import * as React from "react"; import { cn } from "@kineticui/core"; export type MacWindowProps = React.HTMLAttributes & { /** Text in the title bar, e.g. "user@host: ~/contact". */ title?: React.ReactNode; /** light: paper-white window. dark: terminal black. auto: follows the theme surface. */ tone?: "auto" | "light" | "dark"; /** Right side of the title bar. */ actions?: React.ReactNode; /** Monospace body (terminal look). */ mono?: boolean; onClose?: () => void; onMinimize?: () => void; onZoom?: () => void; bodyClassName?: string; }; const tones = { auto: { win: "border-border bg-surface text-foreground", bar: "border-border bg-surface-raised/60 text-muted" }, light: { win: "border-black/10 bg-[#fdfdfb] text-[#1f2328]", bar: "border-black/[0.07] bg-[#f3f2ee] text-[#57606a]" }, dark: { win: "border-white/10 bg-[#0b0c0e] text-[#E8E8E3]", bar: "border-white/10 bg-[#141518] text-white/50" }, }; /** macOS-style window chrome: traffic lights, centred title and an optional monospace body. */ export function MacWindow({ title, tone = "auto", actions, mono, onClose, onMinimize, onZoom, className, bodyClassName, children, ...props }: MacWindowProps) { const t = tones[tone]; const light = (color: string, label: string, onClick?: () => void, glyph?: string) => ( ); return (

{light("#FF5F57", "Close", onClose, "×")} {light("#FEBC2E", "Minimize", onMinimize, "−")} {light("#28C840", "Zoom", onZoom, "+")}

{title ? {title} : null} {actions ?

{actions}

: null}

{children}

); }

Mac Window

Installation

Exports