{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker-5",
  "type": "registry:component",
  "title": "DatePicker 5",
  "description": "DatePicker 5. A date picker component for selecting dates.",
  "dependencies": [
    "chrono-node",
    "lucide-react"
  ],
  "registryDependencies": [
    "calendar",
    "input",
    "label",
    "popover"
  ],
  "files": [
    {
      "path": "components/watermelon/date-picker-5.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport type { ComponentProps } from 'react'\nimport { useId, useState, type ChangeEvent, type KeyboardEvent } from 'react'\n\nimport { parseDate } from 'chrono-node'\nimport { CalendarIcon } from 'lucide-react'\n\nimport { Calendar } from '@/components/base-ui/calendar'\nimport { Input } from '@/components/base-ui/input'\nimport { Label } from '@/components/base-ui/label'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/base-ui/popover'\n\ntype CalendarClassNames = NonNullable<ComponentProps<typeof Calendar>['classNames']>\n\nfunction formatDate(date: Date | undefined) {\n  if (!date) {\n    return ''\n  }\n\n  return date.toLocaleDateString('en-US', {\n    day: '2-digit',\n    month: 'long',\n    year: 'numeric'\n  })\n}\n\nconst calendarClassNames = {\n  day_button:\n    'rounded-full data-[selected=true]:rounded-full! data-[selected=true]:bg-slate-900! data-[selected=true]:text-white! data-[selected=true]:dark:bg-white! data-[selected=true]:dark:text-slate-950! hover:rounded-full',\n  today:\n    'rounded-full bg-muted/60! data-[selected=true]:bg-slate-900! data-[selected=true]:text-white! dark:data-[selected=true]:bg-white! dark:data-[selected=true]:text-slate-950!'\n} satisfies CalendarClassNames\n\nconst DatePicker5 = () => {\n  const id = useId()\n  const initialInputValue = 'In 2 days'\n  const initialSelectedDate = parseDate(initialInputValue) ?? undefined\n  const [open, setOpen] = useState<boolean>(false)\n  const [inputValue, setInputValue] = useState<string>(initialInputValue)\n  const [selectedDate, setSelectedDate] = useState<Date | undefined>(\n    initialSelectedDate\n  )\n  const [visibleMonth, setVisibleMonth] = useState<Date | undefined>(\n    initialSelectedDate\n  )\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = event.target.value\n    const nextDate = parseDate(nextValue) ?? undefined\n\n    setInputValue(nextValue)\n\n    if (nextDate) {\n      setSelectedDate(nextDate)\n      setVisibleMonth(nextDate)\n    }\n  }\n\n  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      setOpen(true)\n    }\n  }\n\n  return (\n    <div className='w-full max-w-xs space-y-2'>\n      <Label htmlFor={id} className='px-1 text-sm font-medium'>\n        Natural date input\n      </Label>\n      <div className='relative flex gap-2'>\n        <Input\n          id={id}\n          value={inputValue}\n          placeholder='Tomorrow or next week'\n          className='h-11 rounded-2xl border-border/60 bg-background pr-11 shadow-xs'\n          onChange={handleInputChange}\n          onKeyDown={handleInputKeyDown}\n        />\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            id={`${id}-picker`}\n            className='absolute top-1/2 right-2 inline-flex size-7 -translate-y-1/2 items-center justify-center rounded-full text-muted-foreground/80 outline-none transition-colors hover:bg-accent/30 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50'\n          >\n            <CalendarIcon className='size-3.5' />\n            <span className='sr-only'>Pick a date</span>\n          </PopoverTrigger>\n          <PopoverContent\n            className='w-auto overflow-hidden rounded-2xl border-border/60 p-0 shadow-sm'\n            align='end'\n            alignOffset={-8}\n            sideOffset={10}\n          >\n            <Calendar\n              mode='single'\n              selected={selectedDate}\n              month={visibleMonth}\n              classNames={calendarClassNames}\n              onMonthChange={setVisibleMonth}\n              onSelect={(date) => {\n                setSelectedDate(date)\n                setInputValue(formatDate(date))\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n      <div className='text-muted-foreground px-1 text-xs'>\n        Your reminder is currently scheduled for{' '}\n        <span className='font-medium'>{formatDate(selectedDate)}</span>.\n      </div>\n    </div>\n  )\n}\n\nexport default DatePicker5\n"
    }
  ]
}