{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-range",
  "type": "registry:ui",
  "title": "Date range",
  "description": "Start and end date as two native date inputs.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/components/date-range.tsx",
      "type": "registry:ui",
      "content": "import { useState, type ComponentProps } from \"react\";\nimport { Calendar } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface DateRangeValue {\n  /** ISO date, `YYYY-MM-DD`. */\n  from?: string;\n  /** ISO date, `YYYY-MM-DD`. */\n  to?: string;\n}\n\ninterface DateRangeProps extends Omit<ComponentProps<\"fieldset\">, \"defaultValue\" | \"onChange\"> {\n  value?: DateRangeValue;\n  defaultValue?: DateRangeValue;\n  onValueChange?: (value: DateRangeValue) => void;\n  /** Earliest selectable date (ISO). */\n  min?: string;\n  /** Latest selectable date (ISO). */\n  max?: string;\n  /** Accessible name of the whole range. */\n  legend?: string;\n  fromLabel?: string;\n  toLabel?: string;\n  disabled?: boolean;\n  /** Base id; the inputs get `${id}-from` and `${id}-to`. */\n  id?: string;\n}\n\n/** Start and end date as two native date inputs. No calendar library on purpose. */\nfunction DateRange({\n  value,\n  defaultValue,\n  onValueChange,\n  min,\n  max,\n  legend = \"Date range\",\n  fromLabel = \"From\",\n  toLabel = \"To\",\n  disabled,\n  id,\n  className,\n  ...props\n}: DateRangeProps) {\n  const [internal, setInternal] = useState<DateRangeValue>(defaultValue ?? {});\n  const current = value ?? internal;\n  const invalid = Boolean(current.from && current.to && current.from > current.to);\n\n  const update = (next: DateRangeValue) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const inputClass =\n    \"h-full min-w-0 bg-transparent font-mono text-xs tabular-nums text-foreground outline-none disabled:cursor-not-allowed\";\n\n  return (\n    <fieldset\n      data-slot=\"date-range\"\n      disabled={disabled}\n      aria-invalid={invalid || undefined}\n      className={cn(\n        \"inline-flex h-8.5 items-center gap-2 rounded-control border border-input bg-card px-3 shadow-card transition-[border-color,box-shadow] duration-150 hover:border-foreground/20\",\n        \"focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20 focus-within:hover:border-ring\",\n        \"aria-invalid:border-danger disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <legend className=\"sr-only\">{legend}</legend>\n      <Calendar aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n      <input\n        type=\"date\"\n        id={id ? `${id}-from` : undefined}\n        aria-label={fromLabel}\n        value={current.from ?? \"\"}\n        min={min}\n        max={current.to || max}\n        onChange={(event) => update({ ...current, from: event.target.value || undefined })}\n        className={inputClass}\n      />\n      <span aria-hidden=\"true\" className=\"text-muted-foreground\">\n        -\n      </span>\n      <input\n        type=\"date\"\n        id={id ? `${id}-to` : undefined}\n        aria-label={toLabel}\n        value={current.to ?? \"\"}\n        min={current.from || min}\n        max={max}\n        onChange={(event) => update({ ...current, to: event.target.value || undefined })}\n        className={inputClass}\n      />\n    </fieldset>\n  );\n}\n\nexport { DateRange };\nexport type { DateRangeProps, DateRangeValue };\n"
    }
  ]
}