{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Integrated Date Picker",
  "description": "Single, multiple, and range date picker built on shadcn Popover + the Integrated Calendar, with an optional inline-input mode.",
  "dependencies": [
    "date-fns",
    "react-day-picker"
  ],
  "registryDependencies": [
    "popover",
    "button",
    "input",
    "@easy-shadcn/calendar"
  ],
  "files": [
    {
      "path": "registry/ui/date-picker.tsx",
      "content": "\"use client\";\n\nimport { Calendar03Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ClassValue } from \"clsx\";\nimport type { Locale } from \"date-fns\";\nimport { format as formatDate, isValid, parse } from \"date-fns\";\nimport type React from \"react\";\nimport type { AriaAttributes } from \"react\";\nimport { useId, useRef, useState } from \"react\";\nimport type { DateRange, Matcher } from \"react-day-picker\";\nimport { dateMatchModifiers } from \"react-day-picker\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils\";\nimport { Calendar } from \"@/registry/ui/calendar\";\n\n// ---------- Types ----------\n\ntype DatePickerBaseProps = {\n  /** Forwarded to the trigger (button or input) for screen-reader descriptions. */\n  \"aria-describedby\"?: string;\n  /** Forwarded to the trigger (button or input) for invalid-state semantics. */\n  \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n  /**\n   * `date-fns` format string applied to the displayed value and used to parse\n   * input back into a `Date` when `withInput` is enabled.\n   * @default \"PPP\"\n   */\n  format?: string;\n  /**\n   * Id applied to the trigger (button or input), so a `<label htmlFor>` / the\n   * Field component can associate with it.\n   */\n  id?: string;\n  /** `date-fns` locale forwarded to both the formatter and the Calendar. */\n  locale?: Locale;\n  /**\n   * Native form name. Applies to the `withInput` text input only (the\n   * formatted text is what gets submitted).\n   */\n  name?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /**\n   * Days that cannot be selected: a react-day-picker `Matcher` or an array of\n   * them (e.g. `{ dayOfWeek: [0, 6] }`). Typed input that resolves to a\n   * blocked day is discarded on commit.\n   */\n  disabledDates?: Matcher | Matcher[];\n  /** Earliest selectable day (inclusive). Typed input before it is discarded. */\n  minDate?: Date;\n  /** Latest selectable day (inclusive). Typed input after it is discarded. */\n  maxDate?: Date;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  numberOfMonths?: number;\n  defaultMonth?: Date;\n  /** Earliest month the user can navigate to. Bounds the year panel. */\n  startMonth?: Date;\n  /** Latest month the user can navigate to. */\n  endMonth?: Date;\n  className?: ClassValue;\n  triggerClassName?: ClassValue;\n  inputClassName?: ClassValue;\n  iconButtonClassName?: ClassValue;\n  contentClassName?: ClassValue;\n  calendarClassName?: ClassValue;\n};\n\nexport type DatePickerSingleProps = DatePickerBaseProps & {\n  mode?: \"single\";\n  value?: Date;\n  defaultValue?: Date;\n  onChange?: (value: Date | undefined) => void;\n  /**\n   * Render an `<Input />` trigger that supports manual typing in addition to\n   * the calendar popover. Only available in `mode=\"single\"`.\n   */\n  withInput?: boolean;\n};\n\nexport type DatePickerMultipleProps = DatePickerBaseProps & {\n  mode: \"multiple\";\n  value?: Date[];\n  defaultValue?: Date[];\n  onChange?: (value: Date[] | undefined) => void;\n  /** Manual input is single-mode only. */\n  withInput?: false;\n};\n\nexport type DatePickerRangeProps = DatePickerBaseProps & {\n  mode: \"range\";\n  value?: DateRange;\n  defaultValue?: DateRange;\n  onChange?: (value: DateRange | undefined) => void;\n  /** Manual input is single-mode only. */\n  withInput?: false;\n};\n\nexport type DatePickerProps =\n  | DatePickerSingleProps\n  | DatePickerMultipleProps\n  | DatePickerRangeProps;\n\nconst DEFAULT_FORMAT = \"PPP\";\n\nconst PLACEHOLDERS = {\n  single: \"Pick a date\",\n  multiple: \"Pick one or more dates\",\n  range: \"Pick a date range\",\n} as const;\n\nfunction formatSingle(\n  value: Date | undefined,\n  fmt: string,\n  locale?: Locale\n): string {\n  if (!(value && isValid(value))) {\n    return \"\";\n  }\n  return formatDate(value, fmt, { locale });\n}\n\nfunction formatMultiple(\n  value: Date[] | undefined,\n  fmt: string,\n  locale?: Locale\n): string {\n  if (!value || value.length === 0) {\n    return \"\";\n  }\n  return value\n    .filter((d) => isValid(d))\n    .map((d) => formatDate(d, fmt, { locale }))\n    .join(\", \");\n}\n\nfunction formatRange(\n  value: DateRange | undefined,\n  fmt: string,\n  locale?: Locale\n): string {\n  if (!(value?.from && isValid(value.from))) {\n    return \"\";\n  }\n  const from = formatDate(value.from, fmt, { locale });\n  if (!(value.to && isValid(value.to))) {\n    return `${from} - ...`;\n  }\n  return `${from} - ${formatDate(value.to, fmt, { locale })}`;\n}\n\ntype DatePickerValue = Date | Date[] | DateRange | undefined;\n\ntype DatePickerCalendarBase = {\n  className: string;\n  disabled?: boolean | Matcher[];\n  endMonth?: Date;\n  locale?: Locale;\n  numberOfMonths?: number;\n  resetViewsKey: number;\n  startMonth?: Date;\n};\n\nfunction renderDatePickerCalendar({\n  calendarBase,\n  commit,\n  currentValue,\n  defaultMonth,\n  mode,\n}: {\n  calendarBase: DatePickerCalendarBase;\n  commit: (next: DatePickerValue) => void;\n  currentValue: DatePickerValue;\n  defaultMonth?: Date;\n  mode: NonNullable<DatePickerProps[\"mode\"]>;\n}) {\n  if (mode === \"multiple\") {\n    return (\n      <Calendar\n        {...calendarBase}\n        defaultMonth={defaultMonth ?? (currentValue as Date[] | undefined)?.[0]}\n        mode=\"multiple\"\n        onSelect={(dates) => commit(dates)}\n        selected={currentValue as Date[] | undefined}\n      />\n    );\n  }\n  if (mode === \"range\") {\n    return (\n      <Calendar\n        {...calendarBase}\n        defaultMonth={\n          defaultMonth ?? (currentValue as DateRange | undefined)?.from\n        }\n        mode=\"range\"\n        onSelect={(range) => commit(range)}\n        selected={currentValue as DateRange | undefined}\n      />\n    );\n  }\n  return (\n    <Calendar\n      {...calendarBase}\n      defaultMonth={defaultMonth ?? (currentValue as Date | undefined)}\n      mode=\"single\"\n      onSelect={(date) => commit(date)}\n      selected={currentValue as Date | undefined}\n    />\n  );\n}\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n  const {\n    mode = \"single\",\n    open,\n    defaultOpen,\n    onOpenChange,\n    format: fmt = DEFAULT_FORMAT,\n    locale,\n    placeholder,\n    disabled,\n    disabledDates,\n    minDate,\n    maxDate,\n    id,\n    name,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    numberOfMonths,\n    defaultMonth,\n    startMonth,\n    endMonth,\n    className,\n    triggerClassName,\n    inputClassName,\n    iconButtonClassName,\n    contentClassName,\n    calendarClassName,\n  } = props;\n\n  const value = props.value as Date | Date[] | DateRange | undefined;\n  const defaultValue = props.defaultValue as\n    | Date\n    | Date[]\n    | DateRange\n    | undefined;\n  const onChange = props.onChange as\n    | ((next: Date | Date[] | DateRange | undefined) => void)\n    | undefined;\n  const isValueControlled = \"value\" in props;\n  const withInput =\n    mode === \"single\" && (props as DatePickerSingleProps).withInput === true;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const committingDraftRef = useRef(false);\n  const skipNextInputBlurRef = useRef(false);\n  const contentId = useId();\n  const contentSelector = `[data-date-picker-content=\"${contentId}\"]`;\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);\n  const currentOpen = open === undefined ? internalOpen : open;\n  const [resetViewsKey, setResetViewsKey] = useState(0);\n  // Interactions that land back inside the picker (input, icon button,\n  // popover content) must not be treated as a dismissal.\n  const isCloseWithinPicker = (details?: {\n    reason?: string;\n    event?: Event;\n  }) => {\n    if (\n      details?.reason === \"outside-press\" &&\n      isTargetWithinPicker(details.event?.target ?? null)\n    ) {\n      return true;\n    }\n    const relatedTarget =\n      details?.event && \"relatedTarget\" in details.event\n        ? (details.event as FocusEvent).relatedTarget\n        : null;\n    return isTargetWithinPicker(relatedTarget);\n  };\n\n  const handleOpenChange = (\n    next: boolean,\n    details?: { reason?: string; event?: Event; cancel?: () => void },\n    options?: { commitDraft?: boolean }\n  ) => {\n    if (!next && isCloseWithinPicker(details)) {\n      details?.cancel?.();\n      return;\n    }\n    if (disabled && next) {\n      return;\n    }\n    if (\n      !next &&\n      withInput &&\n      options?.commitDraft !== false &&\n      !committingDraftRef.current\n    ) {\n      if (details?.reason === \"escape-key\") {\n        // Escape cancels the pending edit instead of committing it.\n        setDraft(null);\n      } else {\n        handleInputCommit({ close: false });\n      }\n    }\n    if (open === undefined) {\n      setInternalOpen(next);\n    }\n    if (!next) {\n      setResetViewsKey((k) => k + 1);\n    }\n    onOpenChange?.(next);\n  };\n\n  const [internalValue, setInternalValue] = useState<\n    Date | Date[] | DateRange | undefined\n  >(defaultValue);\n  const currentValue = isValueControlled ? value : internalValue;\n\n  let display: string;\n  if (mode === \"multiple\") {\n    display = formatMultiple(currentValue as Date[] | undefined, fmt, locale);\n  } else if (mode === \"range\") {\n    display = formatRange(currentValue as DateRange | undefined, fmt, locale);\n  } else {\n    display = formatSingle(currentValue as Date | undefined, fmt, locale);\n  }\n\n  const [draft, setDraft] = useState<string | null>(null);\n\n  // Selectability constraints, shared by the calendar and the typed input.\n  const disabledMatchers: Matcher[] = [];\n  if (minDate) {\n    disabledMatchers.push({ before: minDate });\n  }\n  if (maxDate) {\n    disabledMatchers.push({ after: maxDate });\n  }\n  if (Array.isArray(disabledDates)) {\n    disabledMatchers.push(...disabledDates);\n  } else if (disabledDates !== undefined) {\n    disabledMatchers.push(disabledDates);\n  }\n  const isDateBlocked = (date: Date) =>\n    disabledMatchers.length > 0 && dateMatchModifiers(date, disabledMatchers);\n\n  const commit = (\n    next: Date | Date[] | DateRange | undefined,\n    options?: { close?: boolean }\n  ) => {\n    if (disabled) {\n      return;\n    }\n    if (!isValueControlled) {\n      setInternalValue(next);\n    }\n    onChange?.(next);\n    setDraft(null);\n    // Skip the auto-close when the popover is already closed (blur commits)\n    // or closing (so onOpenChange fires exactly once per close).\n    if (mode === \"single\" && next && currentOpen && options?.close !== false) {\n      handleOpenChange(false, undefined, { commitDraft: false });\n    }\n  };\n\n  const handleInputCommit = (options?: { close?: boolean }) => {\n    if (draft === null) {\n      return;\n    }\n    committingDraftRef.current = true;\n    try {\n      if (!draft) {\n        commit(undefined, options);\n        setDraft(null);\n        return;\n      }\n      const parsed = parse(draft, fmt, new Date(), { locale });\n      if (isValid(parsed) && !isDateBlocked(parsed)) {\n        commit(parsed, options);\n      }\n      setDraft(null);\n    } finally {\n      committingDraftRef.current = false;\n    }\n  };\n\n  const isTargetWithinPicker = (target: EventTarget | null) => {\n    if (!(target instanceof Node)) {\n      return false;\n    }\n    if (wrapperRef.current?.contains(target)) {\n      return true;\n    }\n    return (\n      target instanceof Element && target.closest(contentSelector) !== null\n    );\n  };\n\n  const handlePickerBlur = (event: React.FocusEvent<HTMLElement>) => {\n    if (skipNextInputBlurRef.current) {\n      skipNextInputBlurRef.current = false;\n      return;\n    }\n    if (isTargetWithinPicker(event.relatedTarget)) {\n      return;\n    }\n    if (currentOpen) {\n      return;\n    }\n    handleInputCommit();\n  };\n\n  const handleContentPointerDownCapture = () => {\n    skipNextInputBlurRef.current = true;\n  };\n\n  const placeholderText = placeholder ?? PLACEHOLDERS[mode];\n\n  let calendarDisabled: boolean | Matcher[] | undefined;\n  if (disabled) {\n    calendarDisabled = true;\n  } else if (disabledMatchers.length > 0) {\n    calendarDisabled = disabledMatchers;\n  }\n\n  const calendarBase = {\n    locale,\n    className: cn(calendarClassName),\n    disabled: calendarDisabled,\n    numberOfMonths,\n    startMonth,\n    endMonth,\n    resetViewsKey,\n  };\n\n  const calendarNode = renderDatePickerCalendar({\n    calendarBase,\n    commit,\n    currentValue,\n    defaultMonth,\n    mode,\n  });\n\n  if (withInput) {\n    return (\n      <div className={cn(\"relative w-60\", className)} ref={wrapperRef}>\n        <Input\n          aria-controls={currentOpen ? contentId : undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={currentOpen}\n          aria-haspopup=\"dialog\"\n          aria-invalid={ariaInvalid}\n          className={cn(\"w-full pr-9\", inputClassName, triggerClassName)}\n          disabled={disabled}\n          id={id}\n          name={name}\n          onBlur={handlePickerBlur}\n          onChange={(e) => setDraft(e.target.value)}\n          onClick={() => handleOpenChange(true)}\n          onFocus={() => handleOpenChange(true)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              handleInputCommit();\n            }\n          }}\n          placeholder={placeholderText}\n          value={draft ?? display}\n        />\n        <Popover onOpenChange={handleOpenChange} open={currentOpen}>\n          <PopoverTrigger\n            render={\n              <Button\n                className={cn(\n                  \"absolute top-1/2 right-0.5 -translate-y-1/2\",\n                  iconButtonClassName\n                )}\n                disabled={disabled}\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <HugeiconsIcon icon={Calendar03Icon} strokeWidth={2} />\n            <span className=\"sr-only\">Open calendar</span>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"start\"\n            anchor={wrapperRef}\n            className={cn(\"w-auto p-0\", contentClassName)}\n            data-date-picker-content={contentId}\n            id={contentId}\n            initialFocus={false}\n            onBlurCapture={handlePickerBlur}\n          >\n            <div\n              onMouseDownCapture={handleContentPointerDownCapture}\n              onPointerDownCapture={handleContentPointerDownCapture}\n            >\n              {calendarNode}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    );\n  }\n\n  return (\n    <Popover onOpenChange={handleOpenChange} open={currentOpen}>\n      <PopoverTrigger\n        render={\n          <Button\n            aria-describedby={ariaDescribedBy}\n            aria-invalid={ariaInvalid}\n            className={cn(\n              \"w-60 justify-start font-normal\",\n              !display && \"text-muted-foreground\",\n              className,\n              triggerClassName\n            )}\n            disabled={disabled}\n            id={id}\n            variant=\"outline\"\n          />\n        }\n      >\n        <HugeiconsIcon icon={Calendar03Icon} strokeWidth={2} />\n        <span className=\"truncate\">{display || placeholderText}</span>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className={cn(\"w-auto p-0\", contentClassName)}\n      >\n        {calendarNode}\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport default DatePicker;\n\nexport type { DateRange } from \"react-day-picker\";\n",
      "type": "registry:component",
      "target": "components/easy/date-picker.tsx"
    }
  ],
  "type": "registry:component"
}