{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "mac-window", "title": "Mac Window", "description": "A desktop-style window frame with traffic-light controls, a title bar, an optional toolbar and a translucent sidebar.", "files": [ { "path": "registry/tealmac/mac-window.tsx", "content": "// Adapted from Ballmac UI (https://github.com/vamsiy78/ballmac-ui), MIT License, Copyright (c) 2026 Ballmac.\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype MacWindowContextValue = {\n active: boolean\n onClose?: () => void\n onMinimize?: () => void\n onZoom?: () => void\n}\n\nconst MacWindowContext = React.createContext({\n active: true,\n})\n\ntype MacWindowProps = React.ComponentProps<\"div\"> & {\n /** Active (key) window: colored traffic lights and full-strength title. Inactive windows gray out. */\n active?: boolean\n /** Called by the red close button. Without a handler the light is drawn but not focusable. */\n onClose?: () => void\n /** Called by the yellow minimize button. */\n onMinimize?: () => void\n /** Called by the green zoom (full screen) button. */\n onZoom?: () => void\n}\n\n/**\n * A desktop-style window frame. Compose it from MacWindowTitleBar + MacWindowContent, or MacWindowSidebar +\n * MacWindowMain for a sidebar layout with vibrancy. Traffic-light colors are the --mac-close, --mac-minimize\n * and --mac-zoom CSS variables; override them on the window if you like.\n */\nfunction MacWindow({\n active = true,\n onClose,\n onMinimize,\n onZoom,\n className,\n style,\n ...props\n}: MacWindowProps) {\n const context = React.useMemo(\n () => ({ active, onClose, onMinimize, onZoom }),\n [active, onClose, onMinimize, onZoom]\n )\n return (\n \n \n \n )\n}\n\nconst glyphs = {\n close: (\n \n ),\n minimize: ,\n zoom: (\n \n ),\n} as const\n\nfunction TrafficLight({\n kind,\n label,\n onPress,\n}: {\n kind: keyof typeof glyphs\n label: string\n onPress?: () => void\n}) {\n const shared = cn(\n \"relative flex size-3 shrink-0 items-center justify-center rounded-full text-black/60 outline-none before:absolute before:-inset-1.5 before:content-['']\",\n \"bg-(--light) shadow-[inset_0_0_0_0.5px_rgb(0_0_0/0.18)] dark:shadow-[inset_0_0_0_0.5px_rgb(255_255_255/0.12)]\",\n \"group-data-[state=inactive]/mac-window:bg-foreground/15 group-data-[state=inactive]/mac-window:group-hover/lights:bg-(--light)\"\n )\n const style = { \"--light\": `var(--mac-${kind})` } as React.CSSProperties\n const glyph = (\n \n {glyphs[kind]}\n \n )\n if (!onPress) {\n return (\n \n {glyph}\n \n )\n }\n return (\n \n {glyph}\n \n )\n}\n\ntype MacWindowControlsProps = React.ComponentProps<\"div\"> & {\n /** Accessible labels for the three buttons. */\n labels?: { close?: string; minimize?: string; zoom?: string }\n}\n\n/** The red, yellow and green traffic lights. Glyphs appear when the pointer is over any of them. */\nfunction MacWindowControls({\n labels,\n className,\n ...props\n}: MacWindowControlsProps) {\n const { onClose, onMinimize, onZoom } = React.useContext(MacWindowContext)\n return (\n \n \n \n \n \n )\n}\n\ntype MacWindowTitleBarProps = Omit, \"title\"> & {\n /** Window title, centered in the bar. */\n title?: React.ReactNode\n /** Draw the traffic lights at the leading edge. Turn off when a MacWindowSidebar already shows them. */\n controls?: boolean\n}\n\n/**\n * The title bar. With only a title it is a compact 28px bar; children render as a trailing toolbar\n * and grow it to the 52px unified-toolbar height.\n */\nfunction MacWindowTitleBar({\n title,\n controls = true,\n className,\n children,\n ...props\n}: MacWindowTitleBarProps) {\n const hasToolbar = React.Children.count(children) > 0\n return (\n \n {controls ? : null}\n {title ? (\n \n {title}\n \n ) : null}\n {hasToolbar ? (\n \n {children}\n \n ) : null}\n \n )\n}\n\ntype MacWindowToolbarButtonProps = React.ComponentProps<\"button\">\n\n/** A borderless toolbar button that highlights on hover, sized for 16px icons. Give icon-only buttons an aria-label. */\nfunction MacWindowToolbarButton({\n className,\n type = \"button\",\n ...props\n}: MacWindowToolbarButtonProps) {\n return (\n \n )\n}\n\ntype MacWindowSidebarProps = React.ComponentProps<\"div\"> & {\n /** Draw the traffic lights at the top of the sidebar. */\n controls?: boolean\n}\n\n/** A translucent source-list sidebar that blurs whatever is behind the window (vibrancy). */\nfunction MacWindowSidebar({\n controls = true,\n className,\n children,\n ...props\n}: MacWindowSidebarProps) {\n return (\n \n {controls ? (\n
\n \n
\n ) : null}\n {children}\n \n )\n}\n\ntype MacWindowSidebarItemProps = React.ComponentProps<\"button\"> & {\n /** Marks the selected row (sets aria-current). */\n selected?: boolean\n}\n\n/** A source-list row: icon, label and an optional trailing count. */\nfunction MacWindowSidebarItem({\n selected = false,\n className,\n type = \"button\",\n ...props\n}: MacWindowSidebarItemProps) {\n return (\n \n )\n}\n\ntype MacWindowMainProps = React.ComponentProps<\"div\">\n\n/** The opaque column next to a sidebar; holds the title bar and content. */\nfunction MacWindowMain({ className, ...props }: MacWindowMainProps) {\n return (\n \n )\n}\n\ntype MacWindowContentProps = React.ComponentProps<\"div\">\n\nfunction MacWindowContent({ className, ...props }: MacWindowContentProps) {\n return (\n \n )\n}\n\nexport {\n MacWindow,\n MacWindowContent,\n MacWindowControls,\n MacWindowMain,\n MacWindowSidebar,\n MacWindowSidebarItem,\n MacWindowTitleBar,\n MacWindowToolbarButton,\n type MacWindowContentProps,\n type MacWindowControlsProps,\n type MacWindowMainProps,\n type MacWindowProps,\n type MacWindowSidebarItemProps,\n type MacWindowSidebarProps,\n type MacWindowTitleBarProps,\n type MacWindowToolbarButtonProps,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }