{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:ui",
  "dependencies": [
    "@kobalte/core",
    "@corvu/calendar"
  ],
  "registryDependencies": [
    "@gc-solid/button",
    "@gc-solid/calendar",
    "@gc-solid/popover"
  ],
  "files": [
    {
      "path": "ui/date-picker.tsx",
      "content": "import type { Component, ComponentProps, JSX, ParentComponent } from \"solid-js\"\nimport { For, Show, splitProps } from \"solid-js\"\n\nimport type { RootProps as CalendarRootProps, RootChildrenProps } from \"@corvu/calendar\"\nimport * as PopoverPrimitive from \"@kobalte/core/popover\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Calendar,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridBodyCell,\n  CalendarGridBodyCellTrigger,\n  CalendarGridBodyRow,\n  CalendarGridHead,\n  CalendarGridHeadCell,\n  CalendarGridHeadRow,\n  CalendarHead,\n  CalendarHeading,\n  CalendarNextTrigger,\n  CalendarPrevTrigger\n} from \"@/components/ui/calendar\"\n\nconst DatePicker: Component<PopoverPrimitive.PopoverRootProps> = (props) => (\n  <PopoverPrimitive.Root data-slot=\"date-picker\" gutter={4} {...props} />\n)\n\nconst DatePickerTrigger: ParentComponent<PopoverPrimitive.PopoverTriggerProps> = (props) => (\n  <PopoverPrimitive.Trigger data-slot=\"date-picker-trigger\" {...props} />\n)\n\ntype DatePickerInputProps = ComponentProps<\"button\"> & {\n  placeholder?: string\n}\n\nconst DatePickerInput: Component<DatePickerInputProps> = (props) => {\n  const [local, others] = splitProps(props, [\"class\", \"children\", \"placeholder\"])\n  return (\n    <button\n      class={cn(\n        \"flex h-9 w-full min-w-[240px] items-center justify-start gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-left text-base shadow-xs outline-none transition-[color,box-shadow] md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        local.class\n      )}\n      data-slot=\"date-picker-input\"\n      {...others}\n    >\n      <svg\n        class=\"size-4 shrink-0 text-muted-foreground\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <rect height=\"18\" rx=\"2\" ry=\"2\" width=\"18\" x=\"3\" y=\"4\" />\n        <line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\" />\n        <line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\" />\n        <line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\" />\n      </svg>\n      <Show\n        fallback={<span class=\"text-muted-foreground\">{local.placeholder ?? \"Pick a date\"}</span>}\n        when={local.children}\n      >\n        {local.children}\n      </Show>\n    </button>\n  )\n}\n\ntype DatePickerContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {\n  class?: string | undefined\n  children?: JSX.Element\n}\n\nconst DatePickerContent: Component<DatePickerContentProps> = (props) => {\n  const [local, others] = splitProps(props, [\"class\", \"children\"])\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        class={cn(\n          \"data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 z-50 origin-(--kb-popover-content-transform-origin) rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-hidden data-[closed]:animate-out data-[expanded]:animate-in\",\n          local.class\n        )}\n        data-slot=\"date-picker-content\"\n        {...others}\n      >\n        {local.children}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n}\n\ntype DatePickerCalendarProps = Omit<CalendarRootProps, \"children\"> & {\n  class?: string | undefined\n}\n\nconst DatePickerCalendar: Component<DatePickerCalendarProps> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div class={cn(\"p-3\", local.class)} data-slot=\"date-picker-calendar\">\n      <Calendar {...(others as CalendarRootProps)}>\n        {(calendarProps: RootChildrenProps) => (\n          <>\n            <CalendarHead>\n              <CalendarPrevTrigger />\n              <CalendarHeading />\n              <CalendarNextTrigger />\n            </CalendarHead>\n            <CalendarGrid>\n              <CalendarGridHead>\n                <CalendarGridHeadRow>\n                  <For each={calendarProps.weekdays}>\n                    {(weekday) => (\n                      <CalendarGridHeadCell>\n                        {weekday.toLocaleDateString(\"en\", { weekday: \"short\" }).slice(0, 2)}\n                      </CalendarGridHeadCell>\n                    )}\n                  </For>\n                </CalendarGridHeadRow>\n              </CalendarGridHead>\n              <CalendarGridBody>\n                <For each={calendarProps.weeks}>\n                  {(week) => (\n                    <CalendarGridBodyRow>\n                      <For each={week}>\n                        {(day) => (\n                          <CalendarGridBodyCell>\n                            <CalendarGridBodyCellTrigger day={day}>\n                              {day.getDate()}\n                            </CalendarGridBodyCellTrigger>\n                          </CalendarGridBodyCell>\n                        )}\n                      </For>\n                    </CalendarGridBodyRow>\n                  )}\n                </For>\n              </CalendarGridBody>\n            </CalendarGrid>\n          </>\n        )}\n      </Calendar>\n    </div>\n  )\n}\n\ntype DatePickerPresetsProps = ComponentProps<\"div\">\n\nconst DatePickerPresets: Component<DatePickerPresetsProps> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-col gap-1 border-l p-3\", local.class)}\n      data-slot=\"date-picker-presets\"\n      {...others}\n    />\n  )\n}\n\ntype DatePickerPresetProps = Omit<ComponentProps<typeof Button>, \"variant\" | \"size\">\n\nconst DatePickerPreset: Component<DatePickerPresetProps> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <Button\n      class={cn(\"justify-start\", local.class)}\n      data-slot=\"date-picker-preset\"\n      size=\"sm\"\n      variant=\"ghost\"\n      {...others}\n    />\n  )\n}\n\nfunction formatDate(date: Date, options?: Intl.DateTimeFormatOptions): string {\n  return new Intl.DateTimeFormat(\n    \"en-US\",\n    options ?? { month: \"long\", day: \"numeric\", year: \"numeric\" }\n  ).format(date)\n}\n\nfunction formatDateRange(\n  from: Date | null,\n  to: Date | null,\n  options?: Intl.DateTimeFormatOptions\n): string {\n  const fmt = options ?? { month: \"long\", day: \"numeric\", year: \"numeric\" }\n  if (from && to) {\n    return `${new Intl.DateTimeFormat(\"en-US\", fmt).format(from)} - ${new Intl.DateTimeFormat(\"en-US\", fmt).format(to)}`\n  }\n  if (from) {\n    return new Intl.DateTimeFormat(\"en-US\", fmt).format(from)\n  }\n  return \"\"\n}\n\nexport {\n  DatePicker,\n  DatePickerTrigger,\n  DatePickerInput,\n  DatePickerContent,\n  DatePickerCalendar,\n  DatePickerPresets,\n  DatePickerPreset,\n  formatDate,\n  formatDateRange\n}\n",
      "type": "registry:ui"
    }
  ]
}