{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "type": "registry:ui",
  "title": "TAC Calendar",
  "description": "react-day-picker calendar with the nav-z-index + months-relative DayPicker-layout fix that ships with TAC.",
  "dependencies": [
    "react-day-picker"
  ],
  "files": [
    {
      "path": "src/components/primitives/calendar.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DayPicker, getDefaultClassNames } from \"react-day-picker\"\n\nimport { cn } from \"@workspace/ui/lib/utils\"\nimport { buttonVariants } from \"@workspace/ui/components/button\"\nimport {\n  RiArrowLeftSLine,\n  RiArrowRightSLine,\n} from \"@workspace/ui/icons\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: React.ComponentProps<typeof DayPicker>) {\n  const defaults = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      data-slot=\"calendar\"\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        ...defaults,\n        root: cn(\"rdp-root\", defaults.root),\n        // The absolutely-positioned `nav` is rendered by DayPicker as a\n        // sibling of `month` *inside* `months` when `navLayout` is unset\n        // (our default). It therefore needs `months` to be the positioning\n        // context — without that, the nav climbs the DOM until it finds the\n        // nearest positioned ancestor (e.g. an OpsCard with `paper-card-ticks`)\n        // and the chevrons land at that ancestor's corners. We also make\n        // `month` relative to cover the alternative `navLayout` placement\n        // where the nav becomes a child of `month`.\n        months: cn(\"relative\", defaults.months),\n        month: cn(\"relative space-y-3\", defaults.month),\n        month_caption: cn(\n          \"flex h-7 items-center justify-center px-7 font-mono text-paper-11 uppercase tracking-widest text-foreground\",\n          defaults.month_caption\n        ),\n        // `z-10` is required because the nav is rendered *before* `month` in\n        // DOM order and overlaps the caption row. Without an explicit z-index\n        // the later-painted `month_caption` sits on top and swallows clicks on\n        // the prev/next chevron buttons. `inset-x-2` leaves visible breathing\n        // room between each chevron and the calendar's grid edges.\n        nav: cn(\n          \"absolute inset-x-2 top-2 z-10 flex items-center justify-between\",\n          defaults.nav\n        ),\n        // Ghost variant so the chevrons read as floating glyphs over the\n        // calendar rather than as bordered control boxes competing with the\n        // grid. The `size-7` button still gives a 28px hit-target.\n        button_previous: cn(\n          buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n          \"size-7 p-0 opacity-70 hover:opacity-100\",\n          defaults.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n          \"size-7 p-0 opacity-70 hover:opacity-100\",\n          defaults.button_next\n        ),\n        month_grid: cn(\"w-full border-collapse space-y-1\", defaults.month_grid),\n        weekdays: cn(\"flex\", defaults.weekdays),\n        weekday: cn(\n          \"w-8 font-mono text-paper-10 uppercase tracking-widest text-muted-foreground\",\n          defaults.weekday\n        ),\n        week: cn(\"mt-1 flex w-full\", defaults.week),\n        day: cn(\n          \"relative size-8 p-0 text-center text-xs focus-within:relative focus-within:z-20\",\n          defaults.day\n        ),\n        day_button: cn(\n          buttonVariants({ variant: \"ghost\", size: \"icon\" }),\n          \"size-8 p-0 font-normal aria-selected:opacity-100\",\n          defaults.day_button\n        ),\n        range_start: cn(\n          \"bg-primary/20 text-primary aria-selected:bg-primary aria-selected:text-primary-foreground\",\n          defaults.range_start\n        ),\n        range_end: cn(\n          \"bg-primary/20 text-primary aria-selected:bg-primary aria-selected:text-primary-foreground\",\n          defaults.range_end\n        ),\n        range_middle: cn(\n          \"bg-accent text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground\",\n          defaults.range_middle\n        ),\n        selected: cn(\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n          defaults.selected\n        ),\n        today: cn(\n          \"border border-primary text-primary\",\n          defaults.today\n        ),\n        outside: cn(\n          \"text-muted-foreground/40 aria-selected:bg-accent/40 aria-selected:text-muted-foreground/40\",\n          defaults.outside\n        ),\n        disabled: cn(\"text-muted-foreground/40 opacity-40\", defaults.disabled),\n        hidden: cn(\"invisible\", defaults.hidden),\n        ...classNames,\n      }}\n      components={{\n        Chevron: ({ orientation }) => {\n          if (orientation === \"left\") {\n            return <RiArrowLeftSLine className=\"size-4\" />\n          }\n          return <RiArrowRightSLine className=\"size-4\" />\n        },\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar }\n"
    }
  ]
}