{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-range-picker",
  "type": "registry:ui",
  "title": "Date range picker",
  "description": "Start and end date range picker made from two labelled date inputs. Works controlled or uncontrolled and returns a from and to object for filters and reports.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/date-picker.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/date-range-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/date-range-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { DatePicker } from \"@/components/ui/date-picker\"\n\ntype DateRangePickerProps = {\n  value?: { from?: string; to?: string }\n  onChange?: (value: { from?: string; to?: string }) => void\n  disabled?: boolean\n  className?: string\n  fromId?: string\n  toId?: string\n}\n\nfunction DateRangePicker({ value, onChange, disabled, className, fromId, toId }: DateRangePickerProps) {\n  const uid = React.useId()\n  const from = fromId ?? `${uid}-from`\n  const to = toId ?? `${uid}-to`\n  const [internal, setInternal] = React.useState<{ from?: string; to?: string }>({})\n  const current = value ?? internal\n  const set = (next: { from?: string; to?: string }) => {\n    if (value === undefined) setInternal(next)\n    onChange?.(next)\n  }\n  return (\n    <div data-slot=\"date-range-picker\" className={cn(\"flex flex-wrap items-center gap-2\", className)}>\n      <DatePicker id={from} aria-label=\"Start date\" disabled={disabled} value={current.from} onChange={(fromVal) => set({ ...current, from: fromVal })} />\n      <span className=\"text-xs text-fg-muted\">to</span>\n      <DatePicker id={to} aria-label=\"End date\" disabled={disabled} value={current.to} onChange={(toVal) => set({ ...current, to: toVal })} />\n    </div>\n  )\n}\nexport { DateRangePicker }\n"
    }
  ]
}