{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:component",
  "title": "Date Picker",
  "description": "Overwrite the default calendar component with fixed styles for `react-day-picker` v9 and above.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "@radix-ui/react-slot",
    "class-variance-authority",
    "date-fns",
    "lucide-react",
    "react-day-picker"
  ],
  "registryDependencies": [
    "button",
    "popover"
  ],
  "files": [
    {
      "path": "src/registry/new-york/components/ui/calendar.tsx",
      "content": "\"use client\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { differenceInCalendarDays } from \"date-fns\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  labelNext,\n  labelPrevious,\n  useDayPicker,\n  type DayPickerProps,\n} from \"react-day-picker\"\n\nexport type CalendarProps = DayPickerProps & {\n  /**\n   * In the year view, the number of years to display at once.\n   * @default 12\n   */\n  yearRange?: number\n\n  /**\n   * Wether to show the year switcher in the caption.\n   * @default true\n   */\n  showYearSwitcher?: boolean\n\n  monthsClassName?: string\n  monthCaptionClassName?: string\n  weekdaysClassName?: string\n  weekdayClassName?: string\n  monthClassName?: string\n  captionClassName?: string\n  captionLabelClassName?: string\n  buttonNextClassName?: string\n  buttonPreviousClassName?: string\n  navClassName?: string\n  monthGridClassName?: string\n  weekClassName?: string\n  dayClassName?: string\n  dayButtonClassName?: string\n  rangeStartClassName?: string\n  rangeEndClassName?: string\n  selectedClassName?: string\n  todayClassName?: string\n  outsideClassName?: string\n  disabledClassName?: string\n  rangeMiddleClassName?: string\n  hiddenClassName?: string\n}\n\ntype NavView = \"days\" | \"years\"\n\n/**\n * A custom calendar component built on top of react-day-picker.\n * @param props The props for the calendar.\n * @default yearRange 12\n * @returns\n */\nfunction Calendar({\n  className,\n  showOutsideDays = true,\n  showYearSwitcher = true,\n  yearRange = 12,\n  numberOfMonths,\n  components,\n  ...props\n}: CalendarProps) {\n  const [navView, setNavView] = React.useState<NavView>(\"days\")\n  const [displayYears, setDisplayYears] = React.useState<{\n    from: number\n    to: number\n  }>(\n    React.useMemo(() => {\n      const currentYear = new Date().getFullYear()\n      return {\n        from: currentYear - Math.floor(yearRange / 2 - 1),\n        to: currentYear + Math.ceil(yearRange / 2),\n      }\n    }, [yearRange])\n  )\n\n  const { onNextClick, onPrevClick, startMonth, endMonth } = props\n\n  const columnsDisplayed = navView === \"years\" ? 1 : numberOfMonths\n\n  const _monthsClassName = cn(\"relative flex\", props.monthsClassName)\n  const _monthCaptionClassName = cn(\n    \"relative mx-10 flex h-7 items-center justify-center\",\n    props.monthCaptionClassName\n  )\n  const _weekdaysClassName = cn(\"flex flex-row\", props.weekdaysClassName)\n  const _weekdayClassName = cn(\n    \"w-8 text-sm font-normal text-muted-foreground\",\n    props.weekdayClassName\n  )\n  const _monthClassName = cn(\"w-full\", props.monthClassName)\n  const _captionClassName = cn(\n    \"relative flex items-center justify-center pt-1\",\n    props.captionClassName\n  )\n  const _captionLabelClassName = cn(\n    \"truncate text-sm font-medium\",\n    props.captionLabelClassName\n  )\n  const buttonNavClassName = buttonVariants({\n    variant: \"outline\",\n    className:\n      \"absolute h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\",\n  })\n  const _buttonNextClassName = cn(\n    buttonNavClassName,\n    \"right-0\",\n    props.buttonNextClassName\n  )\n  const _buttonPreviousClassName = cn(\n    buttonNavClassName,\n    \"left-0\",\n    props.buttonPreviousClassName\n  )\n  const _navClassName = cn(\"flex items-start\", props.navClassName)\n  const _monthGridClassName = cn(\"mx-auto mt-4\", props.monthGridClassName)\n  const _weekClassName = cn(\"mt-2 flex w-max items-start\", props.weekClassName)\n  const _dayClassName = cn(\n    \"flex size-8 flex-1 items-center justify-center p-0 text-sm\",\n    props.dayClassName\n  )\n  const _dayButtonClassName = cn(\n    buttonVariants({ variant: \"ghost\" }),\n    \"size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100\",\n    props.dayButtonClassName\n  )\n  const buttonRangeClassName =\n    \"bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground\"\n  const _rangeStartClassName = cn(\n    buttonRangeClassName,\n    \"day-range-start rounded-s-md\",\n    props.rangeStartClassName\n  )\n  const _rangeEndClassName = cn(\n    buttonRangeClassName,\n    \"day-range-end rounded-e-md\",\n    props.rangeEndClassName\n  )\n  const _rangeMiddleClassName = cn(\n    \"bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground\",\n    props.rangeMiddleClassName\n  )\n  const _selectedClassName = cn(\n    \"[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground\",\n    props.selectedClassName\n  )\n  const _todayClassName = cn(\n    \"[&>button]:bg-accent [&>button]:text-accent-foreground\",\n    props.todayClassName\n  )\n  const _outsideClassName = cn(\n    \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n    props.outsideClassName\n  )\n  const _disabledClassName = cn(\n    \"text-muted-foreground opacity-50\",\n    props.disabledClassName\n  )\n  const _hiddenClassName = cn(\"invisible flex-1\", props.hiddenClassName)\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      style={{\n        width: 248.8 * (columnsDisplayed ?? 1) + \"px\",\n      }}\n      classNames={{\n        months: _monthsClassName,\n        month_caption: _monthCaptionClassName,\n        weekdays: _weekdaysClassName,\n        weekday: _weekdayClassName,\n        month: _monthClassName,\n        caption: _captionClassName,\n        caption_label: _captionLabelClassName,\n        button_next: _buttonNextClassName,\n        button_previous: _buttonPreviousClassName,\n        nav: _navClassName,\n        month_grid: _monthGridClassName,\n        week: _weekClassName,\n        day: _dayClassName,\n        day_button: _dayButtonClassName,\n        range_start: _rangeStartClassName,\n        range_middle: _rangeMiddleClassName,\n        range_end: _rangeEndClassName,\n        selected: _selectedClassName,\n        today: _todayClassName,\n        outside: _outsideClassName,\n        disabled: _disabledClassName,\n        hidden: _hiddenClassName,\n      }}\n      components={{\n        Chevron: ({ orientation }) => {\n          const Icon = orientation === \"left\" ? ChevronLeft : ChevronRight\n          return <Icon className=\"h-4 w-4\" />\n        },\n        Nav: ({ className }) => (\n          <Nav\n            className={className}\n            displayYears={displayYears}\n            navView={navView}\n            setDisplayYears={setDisplayYears}\n            startMonth={startMonth}\n            endMonth={endMonth}\n            onPrevClick={onPrevClick}\n            onNextClick={onNextClick}\n          />\n        ),\n        CaptionLabel: (props) => (\n          <CaptionLabel\n            showYearSwitcher={showYearSwitcher}\n            navView={navView}\n            setNavView={setNavView}\n            displayYears={displayYears}\n            {...props}\n          />\n        ),\n        MonthGrid: ({ className, children, ...props }) => (\n          <MonthGrid\n            children={children}\n            className={className}\n            displayYears={displayYears}\n            startMonth={startMonth}\n            endMonth={endMonth}\n            navView={navView}\n            setNavView={setNavView}\n            {...props}\n          />\n        ),\n        ...components,\n      }}\n      numberOfMonths={columnsDisplayed}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nfunction Nav({\n  className,\n  navView,\n  startMonth,\n  endMonth,\n  displayYears,\n  setDisplayYears,\n  onPrevClick,\n  onNextClick,\n}: {\n  className?: string\n  navView: NavView\n  startMonth?: Date\n  endMonth?: Date\n  displayYears: { from: number; to: number }\n  setDisplayYears: React.Dispatch<\n    React.SetStateAction<{ from: number; to: number }>\n  >\n  onPrevClick?: (date: Date) => void\n  onNextClick?: (date: Date) => void\n}) {\n  const { nextMonth, previousMonth, goToMonth } = useDayPicker()\n\n  const isPreviousDisabled = (() => {\n    if (navView === \"years\") {\n      return (\n        (startMonth &&\n          differenceInCalendarDays(\n            new Date(displayYears.from - 1, 0, 1),\n            startMonth\n          ) < 0) ||\n        (endMonth &&\n          differenceInCalendarDays(\n            new Date(displayYears.from - 1, 0, 1),\n            endMonth\n          ) > 0)\n      )\n    }\n    return !previousMonth\n  })()\n\n  const isNextDisabled = (() => {\n    if (navView === \"years\") {\n      return (\n        (startMonth &&\n          differenceInCalendarDays(\n            new Date(displayYears.to + 1, 0, 1),\n            startMonth\n          ) < 0) ||\n        (endMonth &&\n          differenceInCalendarDays(\n            new Date(displayYears.to + 1, 0, 1),\n            endMonth\n          ) > 0)\n      )\n    }\n    return !nextMonth\n  })()\n\n  const handlePreviousClick = React.useCallback(() => {\n    if (!previousMonth) return\n    if (navView === \"years\") {\n      setDisplayYears((prev) => ({\n        from: prev.from - (prev.to - prev.from + 1),\n        to: prev.to - (prev.to - prev.from + 1),\n      }))\n      onPrevClick?.(\n        new Date(\n          displayYears.from - (displayYears.to - displayYears.from),\n          0,\n          1\n        )\n      )\n      return\n    }\n    goToMonth(previousMonth)\n    onPrevClick?.(previousMonth)\n  }, [previousMonth, goToMonth])\n\n  const handleNextClick = React.useCallback(() => {\n    if (!nextMonth) return\n    if (navView === \"years\") {\n      setDisplayYears((prev) => ({\n        from: prev.from + (prev.to - prev.from + 1),\n        to: prev.to + (prev.to - prev.from + 1),\n      }))\n      onNextClick?.(\n        new Date(\n          displayYears.from + (displayYears.to - displayYears.from),\n          0,\n          1\n        )\n      )\n      return\n    }\n    goToMonth(nextMonth)\n    onNextClick?.(nextMonth)\n  }, [goToMonth, nextMonth])\n  return (\n    <nav className={cn(\"flex items-center\", className)}>\n      <Button\n        variant=\"outline\"\n        className=\"absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100\"\n        type=\"button\"\n        tabIndex={isPreviousDisabled ? undefined : -1}\n        disabled={isPreviousDisabled}\n        aria-label={\n          navView === \"years\"\n            ? `Go to the previous ${\n                displayYears.to - displayYears.from + 1\n              } years`\n            : labelPrevious(previousMonth)\n        }\n        onClick={handlePreviousClick}\n      >\n        <ChevronLeft className=\"h-4 w-4\" />\n      </Button>\n\n      <Button\n        variant=\"outline\"\n        className=\"absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100\"\n        type=\"button\"\n        tabIndex={isNextDisabled ? undefined : -1}\n        disabled={isNextDisabled}\n        aria-label={\n          navView === \"years\"\n            ? `Go to the next ${displayYears.to - displayYears.from + 1} years`\n            : labelNext(nextMonth)\n        }\n        onClick={handleNextClick}\n      >\n        <ChevronRight className=\"h-4 w-4\" />\n      </Button>\n    </nav>\n  )\n}\n\nfunction CaptionLabel({\n  children,\n  showYearSwitcher,\n  navView,\n  setNavView,\n  displayYears,\n  ...props\n}: {\n  showYearSwitcher?: boolean\n  navView: NavView\n  setNavView: React.Dispatch<React.SetStateAction<NavView>>\n  displayYears: { from: number; to: number }\n} & React.HTMLAttributes<HTMLSpanElement>) {\n  if (!showYearSwitcher) return <span {...props}>{children}</span>\n  return (\n    <Button\n      className=\"h-7 w-full truncate text-sm font-medium\"\n      variant=\"ghost\"\n      size=\"sm\"\n      onClick={() => setNavView((prev) => (prev === \"days\" ? \"years\" : \"days\"))}\n    >\n      {navView === \"days\"\n        ? children\n        : displayYears.from + \" - \" + displayYears.to}\n    </Button>\n  )\n}\n\nfunction MonthGrid({\n  className,\n  children,\n  displayYears,\n  startMonth,\n  endMonth,\n  navView,\n  setNavView,\n  ...props\n}: {\n  className?: string\n  children: React.ReactNode\n  displayYears: { from: number; to: number }\n  startMonth?: Date\n  endMonth?: Date\n  navView: NavView\n  setNavView: React.Dispatch<React.SetStateAction<NavView>>\n} & React.TableHTMLAttributes<HTMLTableElement>) {\n  if (navView === \"years\") {\n    return (\n      <YearGrid\n        displayYears={displayYears}\n        startMonth={startMonth}\n        endMonth={endMonth}\n        setNavView={setNavView}\n        navView={navView}\n        className={className}\n        {...props}\n      />\n    )\n  }\n  return (\n    <table className={className} {...props}>\n      {children}\n    </table>\n  )\n}\n\nfunction YearGrid({\n  className,\n  displayYears,\n  startMonth,\n  endMonth,\n  setNavView,\n  navView,\n  ...props\n}: {\n  className?: string\n  displayYears: { from: number; to: number }\n  startMonth?: Date\n  endMonth?: Date\n  setNavView: React.Dispatch<React.SetStateAction<NavView>>\n  navView: NavView\n} & React.HTMLAttributes<HTMLDivElement>) {\n  const { goToMonth, selected } = useDayPicker()\n\n  return (\n    <div className={cn(\"grid grid-cols-4 gap-y-2\", className)} {...props}>\n      {Array.from(\n        { length: displayYears.to - displayYears.from + 1 },\n        (_, i) => {\n          const isBefore =\n            differenceInCalendarDays(\n              new Date(displayYears.from + i, 11, 31),\n              startMonth!\n            ) < 0\n\n          const isAfter =\n            differenceInCalendarDays(\n              new Date(displayYears.from + i, 0, 0),\n              endMonth!\n            ) > 0\n\n          const isDisabled = isBefore || isAfter\n          return (\n            <Button\n              key={i}\n              className={cn(\n                \"h-7 w-full text-sm font-normal text-foreground\",\n                displayYears.from + i === new Date().getFullYear() &&\n                  \"bg-accent font-medium text-accent-foreground\"\n              )}\n              variant=\"ghost\"\n              onClick={() => {\n                setNavView(\"days\")\n                goToMonth(\n                  new Date(\n                    displayYears.from + i,\n                    (selected as Date | undefined)?.getMonth() ?? 0\n                  )\n                )\n              }}\n              disabled={navView === \"years\" ? isDisabled : undefined}\n            >\n              {displayYears.from + i}\n            </Button>\n          )\n        }\n      )}\n    </div>\n  )\n}\n\nexport { Calendar }\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/new-york/components/date-picker/date-picker.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\nimport { Calendar } from \"@/registry/calendar/calendar\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nexport default function DatePicker() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          className={cn(\n            \"w-[240px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar mode=\"single\" selected={date} onSelect={setDate} autoFocus />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/new-york/components/date-picker/date-range-picker.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\nimport { Calendar } from \"@/registry/new-york/components/ui/calendar\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport * as React from \"react\"\nimport { type DateRange } from \"react-day-picker\"\n\nexport default function DateRangePicker({\n  className,\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: addDays(new Date(), -20),\n    to: new Date(),\n  })\n\n  return (\n    <div className={cn(\"grid gap-2\", className)}>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            id=\"date\"\n            variant=\"outline\"\n            className={cn(\n              \"w-[300px] justify-start text-left font-normal\",\n              !date && \"text-muted-foreground\"\n            )}\n          >\n            <CalendarIcon className=\"mr-2 h-4 w-4\" />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            autoFocus\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={setDate}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/components/ui/button.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-x-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\"\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": ""
    }
  ]
}