{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-input",
  "title": "Date Input",
  "registryDependencies": [
    "input"
  ],
  "files": [
    {
      "path": "components/ui/date-input.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarDaysIcon } from \"lucide-react\"\n\nimport { cn } from \"cn\"\n\ntype DateInputProps = Omit<\n  React.ComponentProps<\"input\">,\n  \"type\" | \"defaultValue\" | \"value\"\n> & {\n  defaultValue?: string\n  value?: string\n  showIcon?: boolean\n}\n\nfunction DateInput({\n  className,\n  defaultValue = \"\",\n  value,\n  onChange,\n  placeholder = \"Select a date\",\n  showIcon = true,\n  ...props\n}: DateInputProps) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n  const openedOnPointerDown = React.useRef(false)\n  const currentValue = value ?? internalValue\n\n  return (\n    <label\n      className={cn(\n        \"relative flex h-8 w-full min-w-0 items-center overflow-hidden rounded-2xl border border-transparent bg-input/50 px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] duration-200 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30 md:text-sm\",\n        props[\"aria-invalid\"] &&\n          \"border-destructive focus-within:ring-destructive/20\",\n        showIcon && \"pl-9\",\n        className\n      )}\n    >\n      {showIcon && (\n        <CalendarDaysIcon\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2.5 size-4 text-muted-foreground\"\n        />\n      )}\n      <span\n        className={cn(\n          \"pointer-events-none min-w-0 flex-1 truncate\",\n          currentValue ? \"text-foreground\" : \"text-muted-foreground\"\n        )}\n      >\n        {currentValue || placeholder}\n      </span>\n      <input\n        {...props}\n        ref={inputRef}\n        type=\"date\"\n        value={currentValue}\n        onPointerDown={(event) => {\n          const input = event.currentTarget\n          const pickerInput = input as HTMLInputElement & {\n            showPicker?: () => void\n          }\n\n          if (!props.disabled && pickerInput.showPicker) {\n            try {\n              input.focus({ preventScroll: true })\n              pickerInput.showPicker()\n              openedOnPointerDown.current = true\n              event.preventDefault()\n            } catch {\n              // The browser can reject programmatic picker opening after a\n              // focus transition. The native click remains available.\n            }\n          }\n        }}\n        onClick={(event) => {\n          const input = event.currentTarget\n          const pickerInput = input as HTMLInputElement & {\n            showPicker?: () => void\n          }\n\n          if (openedOnPointerDown.current) {\n            openedOnPointerDown.current = false\n            return\n          }\n\n          if (!props.disabled && pickerInput.showPicker) {\n            try {\n              pickerInput.showPicker()\n            } catch {\n              // Ignore browsers that reject programmatic picker opening.\n            }\n          }\n        }}\n        onChange={(event) => {\n          if (value === undefined) {\n            setInternalValue(event.target.value)\n          }\n\n          onChange?.(event)\n        }}\n        className=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n      />\n    </label>\n  )\n}\n\nexport { DateInput }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}