{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-range-picker",
  "title": "Date Range Picker",
  "description": "Popover calendar for selecting a start and end date.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/date-range-picker/date-range-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport type { DateRange } from \"react-day-picker\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport { Calendar } from \"@vllnt/ui\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@vllnt/ui\";\n\nconst rangeFormatter = new Intl.DateTimeFormat(\"en-US\", {\n  day: \"numeric\",\n  month: \"short\",\n  year: \"numeric\",\n});\n\nfunction formatRange(range: DateRange | undefined): string | undefined {\n  if (!range?.from) {\n    return undefined;\n  }\n\n  if (!range.to) {\n    return rangeFormatter.format(range.from);\n  }\n\n  return `${rangeFormatter.format(range.from)} – ${rangeFormatter.format(range.to)}`;\n}\n\n/** Popover date-range picker built on the range calendar. */\nexport type DateRangePickerProps = {\n  buttonClassName?: string;\n  className?: string;\n  defaultValue?: DateRange;\n  numberOfMonths?: number;\n  onValueChange?: (range?: DateRange) => void;\n  placeholder?: string;\n  value?: DateRange;\n};\n\nconst DateRangePicker = ({\n  buttonClassName,\n  className,\n  defaultValue,\n  numberOfMonths = 2,\n  onValueChange,\n  placeholder = \"Pick a date range\",\n  ref,\n  value,\n}: DateRangePickerProps & { ref?: React.Ref<HTMLButtonElement> }) => {\n  const [internalValue, setInternalValue] = React.useState<\n    DateRange | undefined\n  >(defaultValue);\n  const selected = value ?? internalValue;\n  const label = formatRange(selected);\n\n  const handleSelect = (range: DateRange | undefined) => {\n    if (value === undefined) {\n      setInternalValue(range);\n    }\n\n    onValueChange?.(range);\n  };\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          className={cn(\n            \"w-full justify-start text-left font-normal\",\n            !label && \"text-muted-foreground\",\n            buttonClassName,\n          )}\n          ref={ref}\n          variant=\"outline\"\n        >\n          <CalendarIcon className=\"mr-2 size-4\" />\n          {label ?? placeholder}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className={cn(\"w-auto p-0\", className)}>\n        <Calendar\n          mode=\"range\"\n          numberOfMonths={numberOfMonths}\n          onSelect={handleSelect}\n          selected={selected}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n};\nDateRangePicker.displayName = \"DateRangePicker\";\n\nexport { DateRangePicker };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}