{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "files": [
    {
      "content": "\"use client\";\n\nimport { getLocalTimeZone } from \"@internationalized/date\";\nimport { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { type DateValue, Group } from \"react-aria-components\";\nimport { cn } from \"~/registry/lib/cva\";\nimport { Button } from \"~/registry/ui/button/button\";\nimport { Calendar } from \"~/registry/ui/calendar\";\nimport { DateField } from \"~/registry/ui/date-field\";\nimport { DatePicker } from \"~/registry/ui/date-picker\";\nimport { DialogContent } from \"~/registry/ui/dialog/dialog\";\nimport { Popover } from \"~/registry/ui/popover\";\n\nexport function DatePickerDemo() {\n  return (\n    <div className=\"flex flex-col items-start gap-4 md:flex-row\">\n      <Simple />\n      <DatePickerSimple />\n      {/* <DatePicker.WithRange /> */}\n    </div>\n  );\n}\n\nfunction Simple() {\n  return (\n    <DatePicker.Root aria-label=\"Date Picker\">\n      <Group>\n        <Button className=\"font-normal\" variant=\"outline\">\n          <CalendarIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n          <DateField.Input>\n            {(segment) => <DateField.Segment segment={segment} />}\n          </DateField.Input>\n          <DatePicker.Icon />\n        </Button>\n      </Group>\n      <Popover.Content>\n        <DialogContent className=\"bg-popover\">\n          <Calendar.Root variant=\"outline\">\n            <Calendar.Header>\n              <Calendar.Nav>\n                <Button\n                  className=\"size-8 text-muted-foreground sm:size-7\"\n                  size=\"icon\"\n                  slot=\"previous\"\n                  variant=\"outline\"\n                >\n                  <ChevronLeftIcon className=\"size-4\" />\n                </Button>\n\n                <Calendar.Month />\n\n                <Button\n                  className=\"size-8 text-muted-foreground sm:size-7\"\n                  size=\"icon\"\n                  slot=\"next\"\n                  variant=\"outline\"\n                >\n                  <ChevronRightIcon className=\"size-4\" />\n                </Button>\n              </Calendar.Nav>\n            </Calendar.Header>\n\n            <Calendar.Grid weekdayStyle=\"short\">\n              <Calendar.GridHeader>\n                {(weekDay) => (\n                  <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>\n                )}\n              </Calendar.GridHeader>\n\n              <Calendar.GridBody>\n                {(date) => <Calendar.Cell date={date} />}\n              </Calendar.GridBody>\n            </Calendar.Grid>\n          </Calendar.Root>\n        </DialogContent>\n      </Popover.Content>\n    </DatePicker.Root>\n  );\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = useState<DateValue>();\n\n  return (\n    <Popover.Root>\n      <Button\n        className={cn(\n          \"min-w-[200px] justify-start px-2 font-normal\",\n          !date && \"text-muted-foreground\"\n        )}\n        variant=\"outline\"\n      >\n        <CalendarIcon className=\"text-muted-foreground\" />\n        {date ? (\n          date.toDate(getLocalTimeZone()).toLocaleDateString(undefined, {\n            day: \"numeric\",\n            month: \"long\",\n            year: \"numeric\",\n          })\n        ) : (\n          <span>Pick a date</span>\n        )}\n      </Button>\n      <Popover.Content className=\"min-w-auto p-3\" placement=\"bottom start\">\n        <Calendar.Root onChange={setDate} value={date}>\n          <Calendar.Header>\n            <Calendar.Nav>\n              <Button\n                className=\"size-8 text-muted-foreground sm:size-7\"\n                size=\"icon\"\n                slot=\"previous\"\n                variant=\"outline\"\n              >\n                <ChevronLeftIcon className=\"size-4\" />\n              </Button>\n\n              <Calendar.Month />\n\n              <Button\n                className=\"size-8 text-muted-foreground sm:size-7\"\n                size=\"icon\"\n                slot=\"next\"\n                variant=\"outline\"\n              >\n                <ChevronRightIcon className=\"size-4\" />\n              </Button>\n            </Calendar.Nav>\n          </Calendar.Header>\n\n          <Calendar.Grid weekdayStyle=\"short\">\n            <Calendar.GridHeader>\n              {(weekDay) => (\n                <Calendar.HeaderCell>{weekDay}</Calendar.HeaderCell>\n              )}\n            </Calendar.GridHeader>\n\n            <Calendar.GridBody>\n              {(date) => <Calendar.Cell date={date} />}\n            </Calendar.GridBody>\n          </Calendar.Grid>\n        </Calendar.Root>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n\n// function DatePicker.WithRange() {\n//   const [date, setDate] = useState<DateRange | undefined>({\n//     from: new Date(new Date().getFullYear(), 0, 20),\n//     to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n//   });\n\n//   return (\n//     <Popover>\n//       <PopoverTrigger asChild>\n//         <Button\n//           id=\"date\"\n//           variant={\"outline\"}\n//           className={cn(\n//             \"w-fit justify-start px-2 font-normal\",\n//             !date && \"text-muted-foreground\"\n//           )}\n//         >\n//           <CalendarIcon className=\"text-muted-foreground\" />\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//       <Popover.Content className=\"w-auto p-0\" align=\"start\">\n//         <Calendar.\n//           initialFocus\n//           mode=\"range\"\n//           defaultMonth={date?.from}\n//           selected={date}\n//           onSelect={setDate}\n//           numberOfMonths={2}\n//         />\n//       </Popover.Content>\n//     </Popover>\n//   );\n// }\n",
      "path": "src/registry/examples/date-picker/date-picker-demo.tsx",
      "type": "registry:example"
    }
  ],
  "name": "date-picker-demo",
  "registryDependencies": [
    "@kanpeki/date-picker"
  ],
  "type": "registry:example"
}