{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-sheet",
  "title": "RetroSheet",
  "description": "A Mac OS 9 styled sheet (slide-over panel) with side variants, striped title bar, close box, and overlay, built on Radix UI Dialog.",
  "dependencies": [
    "@radix-ui/react-dialog",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-sheet.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* ------------------------------------------------------------------ */\n/*  Root & Trigger (pass-through)                                      */\n/* ------------------------------------------------------------------ */\n\nconst RetroSheet = DialogPrimitive.Root\n\nconst RetroSheetTrigger = DialogPrimitive.Trigger\n\nconst RetroSheetClose = DialogPrimitive.Close\n\nconst RetroSheetPortal = DialogPrimitive.Portal\n\n/* ------------------------------------------------------------------ */\n/*  Overlay                                                            */\n/* ------------------------------------------------------------------ */\n\nconst RetroSheetOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-black/40\",\n      \"data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n      \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0\",\n      className\n    )}\n    {...props}\n  />\n))\nRetroSheetOverlay.displayName = \"RetroSheetOverlay\"\n\n/* ------------------------------------------------------------------ */\n/*  Content variants (slide from edge)                                 */\n/* ------------------------------------------------------------------ */\n\nconst sheetContentVariants = cva(\n  [\n    \"fixed z-50 flex flex-col outline-none\",\n    \"bg-os9-gray-200\",\n    \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  ].join(\" \"),\n  {\n    variants: {\n      side: {\n        right: [\n          \"inset-y-0 right-0 h-full w-3/4 max-w-sm\",\n          \"border-l border-os9-black\",\n          \"data-[state=open]:slide-in-from-right\",\n          \"data-[state=closed]:slide-out-to-right\",\n        ].join(\" \"),\n        left: [\n          \"inset-y-0 left-0 h-full w-3/4 max-w-sm\",\n          \"border-r border-os9-black\",\n          \"data-[state=open]:slide-in-from-left\",\n          \"data-[state=closed]:slide-out-to-left\",\n        ].join(\" \"),\n        top: [\n          \"inset-x-0 top-0 w-full h-auto\",\n          \"border-b border-os9-black\",\n          \"data-[state=open]:slide-in-from-top\",\n          \"data-[state=closed]:slide-out-to-top\",\n        ].join(\" \"),\n        bottom: [\n          \"inset-x-0 bottom-0 w-full h-auto\",\n          \"border-t border-os9-black\",\n          \"data-[state=open]:slide-in-from-bottom\",\n          \"data-[state=closed]:slide-out-to-bottom\",\n        ].join(\" \"),\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  }\n)\n\n/* ------------------------------------------------------------------ */\n/*  RetroSheetContent                                                  */\n/* ------------------------------------------------------------------ */\n\ninterface RetroSheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof sheetContentVariants> {}\n\nconst RetroSheetContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  RetroSheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n  <RetroSheetPortal>\n    <RetroSheetOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(sheetContentVariants({ side }), className)}\n      style={{\n        boxShadow:\n          \"inset 2px 2px 0 rgba(255,255,255,0.6), inset -2px -2px 0 rgba(38,38,38,0.4)\",\n      }}\n      {...props}\n    >\n      {children}\n    </DialogPrimitive.Content>\n  </RetroSheetPortal>\n))\nRetroSheetContent.displayName = \"RetroSheetContent\"\n\n/* ------------------------------------------------------------------ */\n/*  Header (title-bar style with stripes & close box)                  */\n/* ------------------------------------------------------------------ */\n\nfunction RetroSheetHeader({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-[19px] items-center bg-os9-gray-400 shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {/* Close box — far left */}\n      <DialogPrimitive.Close\n        className=\"relative size-[13px] shrink-0 cursor-default ml-[3px]\"\n        aria-label=\"Close\"\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        {/* 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        {/* Outer pixel frame */}\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      </DialogPrimitive.Close>\n\n      {/* Stripes left */}\n      <span\n        className=\"os9-stripes flex-1 min-w-[4px] h-[13px] ml-[4px]\"\n        style={{\n          boxShadow: \"inset 1px 0 0 #eee, inset -1px 0 0 #c5c5c5\",\n        }}\n        aria-hidden\n      />\n\n      {/* Title (rendered via RetroSheetTitle inside children) */}\n      {children}\n\n      {/* Stripes right */}\n      <span\n        className=\"os9-stripes flex-1 min-w-[4px] h-[13px] mr-[4px]\"\n        style={{\n          boxShadow: \"inset 1px 0 0 #eee, inset -1px 0 0 #c5c5c5\",\n        }}\n        aria-hidden\n      />\n    </div>\n  )\n}\nRetroSheetHeader.displayName = \"RetroSheetHeader\"\n\n/* ------------------------------------------------------------------ */\n/*  Title                                                              */\n/* ------------------------------------------------------------------ */\n\nconst RetroSheetTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\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      \"px-[4px]\",\n      className\n    )}\n    {...props}\n  />\n))\nRetroSheetTitle.displayName = \"RetroSheetTitle\"\n\n/* ------------------------------------------------------------------ */\n/*  Description                                                        */\n/* ------------------------------------------------------------------ */\n\nconst RetroSheetDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\n      \"font-[family-name:var(--os9-font-sans)] text-[10px] leading-[1.3] text-os9-gray-800\",\n      className\n    )}\n    {...props}\n  />\n))\nRetroSheetDescription.displayName = \"RetroSheetDescription\"\n\n/* ------------------------------------------------------------------ */\n/*  Footer                                                             */\n/* ------------------------------------------------------------------ */\n\nfunction RetroSheetFooter({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-end gap-[8px] px-[16px] py-[12px]\",\n        className\n      )}\n      style={{\n        borderTop: \"1px solid var(--os9-black)\",\n        boxShadow:\n          \"0 -1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(38,38,38,0.15) inset\",\n      }}\n      {...props}\n    />\n  )\n}\nRetroSheetFooter.displayName = \"RetroSheetFooter\"\n\n/* ------------------------------------------------------------------ */\n/*  Exports                                                            */\n/* ------------------------------------------------------------------ */\n\nexport {\n  RetroSheet,\n  RetroSheetTrigger,\n  RetroSheetContent,\n  RetroSheetHeader,\n  RetroSheetTitle,\n  RetroSheetDescription,\n  RetroSheetFooter,\n  RetroSheetClose,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}