{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-calendar",
  "title": "RetroCalendar",
  "description": "A Mac OS 9 styled date selection calendar grid with raised bevel navigation buttons, azul selected day, lavender hover and range states, built on react-day-picker v9.",
  "dependencies": [
    "react-day-picker"
  ],
  "registryDependencies": [
    "https://nostalgia-ui.com/r/nostalgia-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/retro-calendar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DayPicker, type ChevronProps } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * OS9 solid-triangle chevron. Only `className` and `orientation` are used —\n * rdp's other props (size, disabled) are not valid SVG attributes.\n */\nfunction RetroCalendarChevron({ className, orientation }: ChevronProps) {\n  return (\n    <svg\n      width=\"10\"\n      height=\"10\"\n      viewBox=\"0 0 10 10\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n      className={className}\n    >\n      {orientation === \"left\" ? (\n        <path d=\"M7 1 L3 5 L7 9 Z\" fill=\"currentColor\" />\n      ) : orientation === \"up\" ? (\n        <path d=\"M1 7 L5 3 L9 7 Z\" fill=\"currentColor\" />\n      ) : orientation === \"down\" ? (\n        <path d=\"M1 3 L5 7 L9 3 Z\" fill=\"currentColor\" />\n      ) : (\n        <path d=\"M3 1 L7 5 L3 9 Z\" fill=\"currentColor\" />\n      )}\n    </svg>\n  )\n}\n\nfunction RetroCalendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"p-4\",\n        \"border border-os9-black bg-os9-gray-200\",\n        \"shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700)]\",\n        className\n      )}\n      classNames={{\n        months: \"relative flex flex-col sm:flex-row gap-4\",\n        month: \"flex flex-col gap-3\",\n        month_caption:\n          \"flex justify-center items-center h-[28px] px-10\",\n        caption_label:\n          \"font-[family-name:var(--os9-font-heading)] text-[12px] tracking-[0.42px] leading-[0.98] text-os9-black select-none\",\n        nav: cn(\n          \"absolute top-0 left-0 right-0 z-10\",\n          \"flex justify-between items-center h-[28px] px-1\"\n        ),\n        button_previous: cn(\n          \"inline-flex items-center justify-center\",\n          \"size-[24px] p-0\",\n          \"border border-os9-black bg-os9-gray-300\",\n          \"shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700)]\",\n          \"cursor-pointer select-none transition-none\",\n          \"active:shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white)]\",\n          \"focus-visible:os9-focus-ring\"\n        ),\n        button_next: cn(\n          \"inline-flex items-center justify-center\",\n          \"size-[24px] p-0\",\n          \"border border-os9-black bg-os9-gray-300\",\n          \"shadow-[inset_1px_1px_0_var(--os9-white),inset_-1px_-1px_0_var(--os9-gray-700)]\",\n          \"cursor-pointer select-none transition-none\",\n          \"active:shadow-[inset_1px_1px_0_var(--os9-gray-700),inset_-1px_-1px_0_var(--os9-white)]\",\n          \"focus-visible:os9-focus-ring\"\n        ),\n        month_grid: \"w-full border-collapse\",\n        weekdays: \"flex\",\n        weekday:\n          \"font-[family-name:var(--os9-font-sans)] text-[9px] text-os9-gray-700 w-8 h-8 flex items-center justify-center select-none\",\n        week: \"flex w-full mt-0.5\",\n        day: \"relative p-0 text-center text-[10px] font-[family-name:var(--os9-font-sans)] w-8 h-8 flex items-center justify-center\",\n        day_button: cn(\n          \"inline-flex items-center justify-center w-8 h-8 p-0\",\n          \"cursor-pointer select-none transition-none\",\n          \"font-[family-name:var(--os9-font-sans)] text-[10px] text-os9-black\",\n          \"hover:bg-os9-lavender\",\n          \"focus-visible:os9-focus-ring\"\n        ),\n        /*\n         * In rdp v9, modifier classNames (selected, today, range_*, outside)\n         * land on the day cell, while day_button sets its own text/hover\n         * colours. Target the child button so modifier styling wins.\n         */\n        selected:\n          \"[&>button]:!bg-os9-azul [&>button]:!text-os9-white [&>button:hover]:!bg-os9-azul\",\n        today: \"[&>button]:font-bold [&>button]:underline [&>button]:underline-offset-2\",\n        outside: \"[&>button]:text-os9-gray-600\",\n        disabled: \"opacity-50 pointer-events-none\",\n        hidden: \"invisible\",\n        /* `&&` doubles specificity so range styles beat `selected` (also applied) */\n        range_start:\n          \"[&&>button]:!bg-os9-azul [&&>button]:!text-os9-white rounded-none\",\n        range_middle:\n          \"[&&>button]:!bg-os9-lavender [&&>button]:!text-os9-black [&&>button:hover]:!bg-os9-lavender rounded-none\",\n        range_end:\n          \"[&&>button]:!bg-os9-azul [&&>button]:!text-os9-white rounded-none\",\n        ...classNames,\n      }}\n      components={{\n        Chevron: RetroCalendarChevron,\n      }}\n      {...props}\n    />\n  )\n}\n\nRetroCalendar.displayName = \"RetroCalendar\"\n\nexport { RetroCalendar }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}