{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-title-bar",
  "title": "RetroTitleBar",
  "description": "A Mac OS 9 styled title bar with striped drag region, close/collapse/zoom control boxes, and centered title text.",
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-title-bar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/*  Title Bar Control Box (close / zoom / collapse)                   */\n/* ------------------------------------------------------------------ */\n\ntype ControlBoxVariant = \"close\" | \"zoom\" | \"collapse\"\n\ninterface ControlBoxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant: ControlBoxVariant\n  active?: boolean\n}\n\n/**\n * 13x13 beveled control box used in the title bar.\n *\n * - Close box: empty square\n * - Zoom box: nested-squares icon (small square inset top-left)\n * - Collapse box: horizontal line icon\n *\n * When the parent title bar is inactive, the box renders as a flat\n * transparent square with no gradient or icon.\n */\nconst ControlBox = React.forwardRef<HTMLButtonElement, ControlBoxProps>(\n  ({ variant, active = true, className, ...props }, ref) => {\n    if (!active) {\n      return (\n        <button\n          ref={ref}\n          type=\"button\"\n          className={cn(\"size-[13px] shrink-0\", className)}\n          aria-hidden\n          tabIndex={-1}\n          disabled\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={cn(\n          \"relative size-[13px] shrink-0 cursor-default\",\n          className\n        )}\n        {...props}\n      >\n        {/* Outer bevel frame */}\n        <span\n          className=\"absolute inset-[2px] border border-os9-black\"\n          style={{\n            backgroundImage:\n              \"linear-gradient(135deg, #9a9a9a 0%, #f1f1f1 100%)\",\n          }}\n        />\n\n        {/* Inner shadow overlay */}\n        <span\n          className=\"absolute inset-[2px]\"\n          style={{\n            boxShadow:\n              \"inset 1px 1px 0 rgba(255,255,255,0.6), inset -1px -1px 0 rgba(0,0,0,0.15)\",\n          }}\n        />\n\n        {/* Variant-specific icon */}\n        {variant === \"collapse\" && (\n          /* Horizontal line across the middle */\n          <span className=\"absolute left-[2px] right-[2px] top-[6px] h-px border-t border-os9-black\" />\n        )}\n\n        {variant === \"zoom\" && (\n          /* Small nested square in the top-left quadrant */\n          <span className=\"absolute left-[2px] top-[2px] size-[5px] border border-os9-black\" />\n        )}\n\n        {/* Outer pixel frame (top-left highlight, bottom-right shadow) */}\n        <span\n          className=\"absolute inset-0\"\n          style={{\n            boxShadow:\n              \"inset 1px 1px 0 rgba(255,255,255,0.5), inset -1px -1px 0 rgba(0,0,0,0.12)\",\n          }}\n        />\n      </button>\n    )\n  }\n)\nControlBox.displayName = \"ControlBox\"\n\n/* ------------------------------------------------------------------ */\n/*  Stripe Region                                                      */\n/* ------------------------------------------------------------------ */\n\n/** The striped filler between control boxes and the title. */\nfunction StripeRegion({ active }: { active: boolean }) {\n  return (\n    <span\n      className={cn(\n        \"flex-1 min-w-[4px] h-[13px]\",\n        active && \"os9-stripes\"\n      )}\n      style={\n        active\n          ? {\n              /* Edge highlights matching Figma's bar picker */\n              boxShadow:\n                \"inset 1px 0 0 #eee, inset -1px 0 0 #c5c5c5\",\n            }\n          : undefined\n      }\n      aria-hidden\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  RetroTitleBar                                                      */\n/* ------------------------------------------------------------------ */\n\nexport interface RetroTitleBarProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Window title displayed in the center of the bar. */\n  title: string\n  /** Whether the window is in active/focused state. Defaults to true. */\n  active?: boolean\n  /** Callback when the close box is clicked. */\n  onClose?: React.MouseEventHandler<HTMLButtonElement>\n  /** Callback when the collapse box is clicked. */\n  onCollapse?: React.MouseEventHandler<HTMLButtonElement>\n  /** Callback when the zoom box is clicked. */\n  onZoom?: React.MouseEventHandler<HTMLButtonElement>\n}\n\nfunction RetroTitleBar(\n  {\n    title,\n    active = true,\n    onClose,\n    onCollapse,\n    onZoom,\n    className,\n    ...props\n  }: RetroTitleBarProps,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-[19px] items-center\",\n        active ? \"bg-os9-gray-400\" : \"bg-os9-gray-300\",\n        className\n      )}\n      {...props}\n    >\n      {/* Close box — far left */}\n      <ControlBox\n        variant=\"close\"\n        active={active}\n        onClick={onClose}\n        className=\"absolute left-[3px] top-[3px]\"\n        aria-label=\"Close\"\n      />\n\n      {/* Inner layout: stripes + title + stripes + zoom box */}\n      <div className=\"flex items-center gap-[4px] absolute left-[17px] right-[17px] top-[3px]\">\n        <StripeRegion active={active} />\n\n        {/* Title */}\n        <span\n          className={cn(\n            \"shrink-0 whitespace-nowrap text-[12px] tracking-[0.42px] leading-[0.98]\",\n            \"font-[family-name:var(--os9-font-heading)] text-os9-black\",\n            \"max-w-[60%] overflow-hidden text-ellipsis\",\n            !active && \"opacity-50\"\n          )}\n        >\n          {title}\n        </span>\n\n        <StripeRegion active={active} />\n\n        {/* Zoom box — sits next to right stripe region */}\n        <ControlBox\n          variant=\"zoom\"\n          active={active}\n          onClick={onZoom}\n          aria-label=\"Zoom\"\n        />\n      </div>\n\n      {/* Collapse box — far right */}\n      <ControlBox\n        variant=\"collapse\"\n        active={active}\n        onClick={onCollapse}\n        className=\"absolute right-[4px] top-[3px]\"\n        aria-label=\"Collapse\"\n      />\n    </div>\n  )\n}\n\nconst ForwardedRetroTitleBar = React.forwardRef(RetroTitleBar)\nForwardedRetroTitleBar.displayName = \"RetroTitleBar\"\n\nexport { ForwardedRetroTitleBar as RetroTitleBar }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}