{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date Picker",
  "description": "Polaris-styled Date Picker component.",
  "dependencies": [],
  "devDependencies": [
    "@shopify/polaris-types"
  ],
  "registryDependencies": [
    "@polaris-shadcn/theme",
    "@polaris-shadcn/utils"
  ],
  "files": [
    {
      "path": "registry/templates/components/ui/date-picker.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\n\ntype SDateFieldProps = React.ComponentPropsWithoutRef<\"s-date-field\">;\ntype SDatePickerProps = React.ComponentPropsWithoutRef<\"s-date-picker\">;\n\nexport type DatePickerChangeEvent = Event & {\n  currentTarget:\n    | HTMLElementTagNameMap[\"s-date-field\"]\n    | HTMLElementTagNameMap[\"s-date-picker\"];\n};\n\nexport interface DatePickerProps\n  extends Omit<SDateFieldProps, \"onInput\" | \"onChange\"> {\n  className?: string;\n  helperText?: React.ReactNode;\n  type?: SDatePickerProps[\"type\"];\n  onInput?: ((event: DatePickerChangeEvent) => void) | null;\n  onChange?: ((event: DatePickerChangeEvent) => void) | null;\n}\n\nconst DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      className,\n      label = \"Pick a date\",\n      helperText = \"Select a delivery date\",\n      value: valueProp,\n      defaultValue,\n      allow,\n      disallow,\n      allowDays,\n      disallowDays,\n      defaultView,\n      type,\n      name,\n      disabled,\n      readOnly,\n      onInput,\n      onChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldRef = React.useRef<HTMLElementTagNameMap[\"s-date-field\"] | null>(\n      null,\n    );\n    const pickerRef = React.useRef<\n      HTMLElementTagNameMap[\"s-date-picker\"] | null\n    >(null);\n    const isControlled = valueProp !== undefined;\n    const [value, setValue] = React.useState(valueProp ?? defaultValue ?? \"\");\n\n    React.useEffect(() => {\n      if (isControlled) {\n        setValue(valueProp ?? \"\");\n      }\n    }, [isControlled, valueProp]);\n\n    React.useEffect(() => {\n      if (fieldRef.current && fieldRef.current.value !== value) {\n        fieldRef.current.value = value;\n      }\n      if (pickerRef.current && pickerRef.current.value !== value) {\n        pickerRef.current.value = value;\n      }\n    }, [value]);\n\n    const handleInput = (event: DatePickerChangeEvent) => {\n      const nextValue = event.currentTarget?.value ?? \"\";\n      if (!isControlled) {\n        setValue(nextValue);\n      }\n      onInput?.(event);\n    };\n\n    const handleChange = (event: DatePickerChangeEvent) => {\n      const nextValue = event.currentTarget?.value ?? \"\";\n      if (!isControlled) {\n        setValue(nextValue);\n      }\n      onChange?.(event);\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-xl border border-border bg-card p-4\", className)}\n      >\n        <s-date-field\n          ref={fieldRef}\n          label={label}\n          value={value}\n          defaultValue={defaultValue}\n          allow={allow}\n          disallow={disallow}\n          allowDays={allowDays}\n          disallowDays={disallowDays}\n          defaultView={defaultView}\n          name={name}\n          disabled={disabled}\n          readOnly={readOnly}\n          onInput={handleInput}\n          onChange={handleChange}\n          {...props}\n        />\n        <p className=\"mt-2 text-xs text-muted-foreground\">{helperText}</p>\n        <div className=\"mt-4\">\n          <s-date-picker\n            ref={pickerRef}\n            value={value}\n            defaultValue={defaultValue}\n            allow={allow}\n            disallow={disallow}\n            allowDays={allowDays}\n            disallowDays={disallowDays}\n            defaultView={defaultView}\n            type={type}\n            name={name}\n            {...({ disabled, readOnly } as SDatePickerProps)}\n            onInput={handleInput}\n            onChange={handleChange}\n          />\n        </div>\n      </div>\n    );\n  },\n);\nDatePicker.displayName = \"DatePicker\";\n\nexport { DatePicker };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}