{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker-field",
  "title": "Date Picker Field",
  "description": "A date picker field with local-safe date normalization and optional ISO date string output.",
  "dependencies": [
    "date-fns",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "calendar",
    "field",
    "input",
    "popover"
  ],
  "files": [
    {
      "path": "registry/corr/components/date-picker-field.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon, ChevronDownIcon } from \"lucide-react\"\nimport { type DateRange } from \"react-day-picker\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nfunction toLocalDateString(value: Date) {\n  const year = value.getFullYear()\n  const month = String(value.getMonth() + 1).padStart(2, \"0\")\n  const day = String(value.getDate()).padStart(2, \"0\")\n  return `${year}-${month}-${day}`\n}\n\nfunction toLocalSafeDate(value: Date) {\n  return new Date(\n    value.getFullYear(),\n    value.getMonth(),\n    value.getDate(),\n    12,\n    0,\n    0,\n    0\n  )\n}\n\nexport function DatePickerField({\n  date,\n  onSelect,\n  onSelectDateString,\n  placeholder = \"Pick a date\",\n  disabled,\n  captionLayout,\n  closeOnSelect = false,\n  buttonId,\n  displayValue,\n  className,\n}: {\n  date?: Date\n  onSelect: (date: Date | undefined) => void\n  onSelectDateString?: (dateString: string | undefined) => void\n  placeholder?: string\n  disabled?: boolean\n  captionLayout?: \"label\" | \"dropdown\" | \"dropdown-months\" | \"dropdown-years\"\n  closeOnSelect?: boolean\n  buttonId?: string\n  displayValue?: (date: Date) => string\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          id={buttonId}\n          variant=\"outline\"\n          disabled={disabled}\n          data-empty={!date}\n          className={\n            className ??\n            \"w-[212px] justify-between text-left font-normal data-[empty=true]:text-muted-foreground\"\n          }\n        >\n          {date ? (\n            displayValue ? (\n              displayValue(date)\n            ) : (\n              format(date, \"PPP\")\n            )\n          ) : (\n            <span>{placeholder}</span>\n          )}\n          <ChevronDownIcon />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          captionLayout={captionLayout}\n          onSelect={(selected) => {\n            const normalized = selected ? toLocalSafeDate(selected) : undefined\n            onSelect(normalized)\n            onSelectDateString?.(\n              normalized ? toLocalDateString(normalized) : undefined\n            )\n            if (closeOnSelect) setOpen(false)\n          }}\n          defaultMonth={date}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport function DatePickerRangeField({\n  date,\n  onSelect,\n  label = \"Date Picker Range\",\n  buttonId = \"date-picker-range\",\n}: {\n  date?: DateRange\n  onSelect: (date: DateRange | undefined) => void\n  label?: string\n  buttonId?: string\n}) {\n  return (\n    <Field className=\"mx-auto w-60\">\n      <FieldLabel htmlFor={buttonId}>{label}</FieldLabel>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            id={buttonId}\n            className=\"justify-start px-2.5 font-normal\"\n          >\n            <CalendarIcon />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={date?.from}\n            selected={date}\n            onSelect={onSelect}\n            numberOfMonths={2}\n          />\n        </PopoverContent>\n      </Popover>\n    </Field>\n  )\n}\n\nexport function DatePickerTimeField({\n  date,\n  onSelect,\n  time,\n  onTimeChange,\n  defaultTime = \"10:30:00\",\n}: {\n  date?: Date\n  onSelect: (date: Date | undefined) => void\n  time?: string\n  onTimeChange?: (time: string) => void\n  defaultTime?: string\n}) {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <FieldGroup className=\"mx-auto max-w-xs flex-row\">\n      <Field>\n        <FieldLabel htmlFor=\"date-picker-optional\">Date</FieldLabel>\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-optional\"\n              className=\"w-32 justify-between font-normal\"\n            >\n              {date ? format(date, \"PPP\") : \"Select date\"}\n              <ChevronDownIcon />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto overflow-hidden p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              captionLayout=\"dropdown\"\n              defaultMonth={date}\n              onSelect={(selected) => {\n                onSelect(selected)\n                setOpen(false)\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n      <Field className=\"w-32\">\n        <FieldLabel htmlFor=\"time-picker-optional\">Time</FieldLabel>\n        <Input\n          type=\"time\"\n          id=\"time-picker-optional\"\n          step=\"1\"\n          value={time}\n          defaultValue={time === undefined ? defaultTime : undefined}\n          onChange={(event) => onTimeChange?.(event.target.value)}\n          className=\"appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n        />\n      </Field>\n    </FieldGroup>\n  )\n}\n\nexport function DatePickerRangeDemo() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return <DatePickerRangeField date={date} onSelect={setDate} />\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/corr/components/stepper.tsx",
      "content": "import type { CSSProperties } from \"react\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type StepperItem = {\n  id: string\n  title: string\n  description?: string\n}\n\nexport function Stepper({\n  steps,\n  currentStep,\n  orientation = \"horizontal\",\n  className,\n}: {\n  steps: StepperItem[]\n  currentStep: number\n  orientation?: \"horizontal\" | \"vertical\"\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        orientation === \"vertical\"\n          ? \"grid gap-4\"\n          : \"grid gap-4 sm:grid-cols-[repeat(var(--step-count),minmax(0,1fr))]\",\n        className\n      )}\n      style={{ \"--step-count\": steps.length } as CSSProperties}\n    >\n      {steps.map((step, index) => {\n        const complete = index < currentStep\n        const active = index === currentStep\n\n        return (\n          <div\n            key={step.id}\n            className={cn(\n              \"relative flex gap-3\",\n              orientation === \"horizontal\" && \"sm:flex-col\"\n            )}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div\n                className={cn(\n                  \"flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium transition-colors\",\n                  complete &&\n                    \"border-primary bg-primary text-primary-foreground\",\n                  active && \"border-primary text-primary\",\n                  !complete && !active && \"border-border text-muted-foreground\"\n                )}\n              >\n                {complete ? <Check className=\"size-3.5\" /> : index + 1}\n              </div>\n              {index < steps.length - 1 ? (\n                <div\n                  className={cn(\n                    \"bg-border\",\n                    orientation === \"vertical\"\n                      ? \"absolute top-8 bottom-[-1rem] left-3.5 w-px\"\n                      : \"hidden h-px flex-1 sm:block\",\n                    complete && \"bg-primary\"\n                  )}\n                />\n              ) : null}\n            </div>\n            <div className=\"min-w-0\">\n              <div className=\"text-sm font-medium\">{step.title}</div>\n              {step.description ? (\n                <div className=\"mt-1 text-xs leading-5 text-muted-foreground\">\n                  {step.description}\n                </div>\n              ) : null}\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}