{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date-picker",
  "description": "A date-picker component.",
  "dependencies": [
    "dayjs",
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "@cubby-ui/button",
    "@cubby-ui/calendar",
    "@cubby-ui/popover"
  ],
  "files": [
    {
      "path": "registry/default/date-picker/date-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport dayjs from \"dayjs\";\nimport { Button } from \"@/registry/default/button/button\";\nimport { Calendar } from \"@/registry/default/calendar/calendar\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/popover/popover\";\nimport { cn } from \"@/lib/utils\";\n\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { Calendar01Icon, UnfoldMoreIcon } from \"@hugeicons/core-free-icons\";\nexport interface DatePickerProps {\n  value?: Date;\n  onSelect?: (date: Date | undefined) => void;\n  placeholder?: string;\n  className?: string;\n  disabled?: boolean;\n  format?: string;\n}\n\nexport function DatePicker({\n  value,\n  onSelect,\n  placeholder = \"Select a date\",\n  className,\n  disabled = false,\n  format = \"DD MMMM YYYY\",\n}: DatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={(props) => (\n          <Button\n            {...props}\n            variant=\"outline\"\n            className={cn(\"w-[280px] justify-between\", className)}\n            disabled={disabled}\n          >\n            <span className=\"flex w-full items-center\">\n              <HugeiconsIcon icon={Calendar01Icon} className=\"mr-2 size-4\"  strokeWidth={2} />\n              {value ? (\n                <span>{dayjs(value).format(format)}</span>\n              ) : (\n                <span className=\"text-muted-foreground\">{placeholder}</span>\n              )}\n            </span>\n            <HugeiconsIcon icon={UnfoldMoreIcon} className=\"ml-2 size-4 shrink-0 opacity-50\"  strokeWidth={2} />\n          </Button>\n        )}\n      />\n      <PopoverContent\n        className=\"w-auto border-none p-0 outline-none\"\n        sideOffset={8}\n        arrow={false}\n      >\n        <Calendar\n          className=\"border-0\"\n          mode=\"single\"\n          showOutsideDays\n          selected={value}\n          onSelect={onSelect}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/date-picker.tsx"
    }
  ],
  "type": "registry:ui"
}