{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "type": "registry:ui",
  "registryDependencies": ["calendar"],
  "dependencies": [
    "@base-ui/react/input",
    "motion",
    "lucide-react",
    "date-fns"
  ],
  "devDependencies": [],
  "files": [
    {
      "path": "date-picker.tsx",
      "content": "\"use client\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport { format, type Locale, startOfMonth } from \"date-fns\";\nimport { CalendarIcon, X } from \"lucide-react\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  type MouseEvent,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { Calendar, type CalendarProps } from \"@/components/ui/calendar\";\nimport { cn } from \"@/lib/utils\";\n\nconst datePickerTriggerCornerClassName =\n  \"rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]\";\n\nconst datePickerInputShellClassName = cn(\n  \"group flex w-full items-center border border-border bg-card text-left text-foreground text-sm transition-[border-color,box-shadow] focus-within:border-foreground/30 hover:border-foreground/30\",\n  \"[&:has(input:disabled)]:cursor-not-allowed [&:has(input:disabled)]:opacity-50\",\n  \"[&:has(input[aria-invalid=true])]:border-destructive\"\n);\n\nconst datePickerInputClassName = cn(\n  \"min-w-0 flex-1 cursor-pointer truncate bg-transparent py-0 text-left font-medium tracking-tight outline-none focus-visible:outline-none\",\n  \"text-foreground placeholder:text-muted-foreground\",\n  \"[-webkit-tap-highlight-color:transparent]\"\n);\n\nexport const DATE_PICKER_PANEL_WIDTH = {\n  sm: 212,\n  md: 240,\n  lg: 282,\n} as const;\n\nexport type DatePickerAlign = \"start\" | \"end\";\nexport type DatePickerSide = \"top\" | \"bottom\";\n\nexport const DEFAULT_DATE_PICKER_FORMAT = \"EEE, MMM d, yyyy\";\nexport const DEFAULT_DATE_PICKER_ARIA_FORMAT = \"PPPP\";\nconst DATE_PICKER_FORM_VALUE_FORMAT = \"yyyy-MM-dd\";\n\nconst PANEL_GAP_PX = 12;\nconst VIEWPORT_PADDING_PX = 8;\nconst FOCUSABLE_SELECTOR =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport function getDatePickerPanelWidth(\n  size: NonNullable<CalendarProps[\"size\"]> = \"md\"\n): number {\n  return DATE_PICKER_PANEL_WIDTH[size];\n}\n\nexport function resolveDatePickerViewMonth(\n  value: Date | null | undefined,\n  selected: Date | null | undefined,\n  fallback: Date = new Date()\n): Date {\n  const source = value !== undefined ? value : selected;\n  return startOfMonth(source ?? fallback);\n}\n\nexport function formatDatePickerLabel(\n  date: Date,\n  dateFormat: string,\n  locale?: Locale\n): string {\n  const options = locale ? { locale } : undefined;\n\n  try {\n    return format(date, dateFormat, options);\n  } catch {\n    return format(date, DEFAULT_DATE_PICKER_FORMAT, options);\n  }\n}\n\nexport function getDatePickerFormValue(date: Date): string {\n  return format(date, DATE_PICKER_FORM_VALUE_FORMAT);\n}\n\nexport function getDatePickerPanelPosition({\n  align,\n  gap = PANEL_GAP_PX,\n  panelHeight,\n  panelWidth,\n  side,\n  triggerRect,\n  viewportHeight = typeof window !== \"undefined\" ? window.innerHeight : 0,\n  viewportWidth = typeof window !== \"undefined\" ? window.innerWidth : 0,\n}: {\n  align: DatePickerAlign;\n  gap?: number;\n  panelHeight: number;\n  panelWidth: number;\n  side: DatePickerSide;\n  triggerRect: Pick<DOMRect, \"bottom\" | \"left\" | \"right\" | \"top\">;\n  viewportHeight?: number;\n  viewportWidth?: number;\n}): { left: number; side: DatePickerSide; top: number } {\n  const spaceBelow = viewportHeight - triggerRect.bottom;\n  const spaceAbove = triggerRect.top;\n\n  let resolvedSide = side;\n\n  if (\n    panelHeight > 0 &&\n    side === \"bottom\" &&\n    spaceBelow < panelHeight + gap &&\n    spaceAbove > spaceBelow\n  ) {\n    resolvedSide = \"top\";\n  } else if (\n    panelHeight > 0 &&\n    side === \"top\" &&\n    spaceAbove < panelHeight + gap &&\n    spaceBelow > spaceAbove\n  ) {\n    resolvedSide = \"bottom\";\n  }\n\n  const top =\n    resolvedSide === \"bottom\"\n      ? triggerRect.bottom + gap\n      : triggerRect.top - panelHeight - gap;\n\n  let left =\n    align === \"start\" ? triggerRect.left : triggerRect.right - panelWidth;\n\n  left = Math.max(\n    VIEWPORT_PADDING_PX,\n    Math.min(left, viewportWidth - panelWidth - VIEWPORT_PADDING_PX)\n  );\n\n  return { left, side: resolvedSide, top };\n}\n\ntype DatePickerCalendarProps = Omit<\n  CalendarProps,\n  | \"selected\"\n  | \"defaultSelected\"\n  | \"onSelect\"\n  | \"month\"\n  | \"onMonthChange\"\n  | \"mode\"\n  | \"range\"\n  | \"defaultRange\"\n  | \"onRangeSelect\"\n  | \"name\"\n>;\n\nexport type DatePickerProps = {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  onChange?: (date: Date | null) => void;\n  className?: string;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  clearable?: boolean;\n  closeOnSelect?: boolean;\n  dateFormat?: string;\n  name?: string;\n  id?: string;\n  \"aria-invalid\"?: boolean;\n  side?: DatePickerSide;\n  align?: DatePickerAlign;\n  /** Props forwarded to the embedded Calendar, except selection and month state. */\n  calendarProps?: DatePickerCalendarProps;\n};\n\ntype PanelPlacement = {\n  left: number;\n  top: number;\n  width: number;\n};\n\nfunction useFocusTrap(\n  containerRef: RefObject<HTMLElement | null>,\n  returnFocusRef: RefObject<HTMLElement | null>,\n  active: boolean\n) {\n  useEffect(() => {\n    if (!(active && containerRef.current)) return;\n\n    const container = containerRef.current;\n    let frameId = 0;\n\n    const focusFirst = () => {\n      const focusable = Array.from(\n        container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)\n      );\n\n      if (focusable.length === 0) {\n        frameId = window.requestAnimationFrame(focusFirst);\n        return;\n      }\n\n      focusable[0]?.focus();\n    };\n\n    frameId = window.requestAnimationFrame(focusFirst);\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Tab\" || !containerRef.current) return;\n\n      const focusable = Array.from(\n        containerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)\n      );\n\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable.at(-1);\n\n      if (event.shiftKey) {\n        if (document.activeElement === first) {\n          event.preventDefault();\n          last?.focus();\n        }\n        return;\n      }\n\n      if (document.activeElement === last) {\n        event.preventDefault();\n        first?.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      returnFocusRef.current?.focus();\n    };\n  }, [active, containerRef, returnFocusRef]);\n}\n\nfunction useDismissiblePanel({\n  open,\n  rootRef,\n  panelRef,\n  setOpenState,\n}: {\n  open: boolean;\n  rootRef: RefObject<HTMLDivElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  setOpenState: (nextOpen: boolean) => void;\n}) {\n  useEffect(() => {\n    if (!open) return;\n\n    const handlePointerDown = (event: PointerEvent) => {\n      const target = event.target as Node;\n      if (rootRef.current?.contains(target)) return;\n      if (panelRef.current?.contains(target)) return;\n      setOpenState(false);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        setOpenState(false);\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", handlePointerDown, true);\n    document.addEventListener(\"keydown\", handleKeyDown);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown, true);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [open, panelRef, rootRef, setOpenState]);\n}\n\nfunction usePanelPlacement({\n  align,\n  anchorRef,\n  hasRenderedPanel,\n  open,\n  panelRef,\n  panelWidth,\n  side,\n}: {\n  align: DatePickerAlign;\n  anchorRef: RefObject<HTMLElement | null>;\n  hasRenderedPanel: boolean;\n  open: boolean;\n  panelRef: RefObject<HTMLDivElement | null>;\n  panelWidth: number;\n  side: DatePickerSide;\n}) {\n  const [panelPlacement, setPanelPlacement] = useState<PanelPlacement | null>(\n    null\n  );\n\n  const updatePanelPlacement = useCallback(() => {\n    const anchor = anchorRef.current;\n    const panel = panelRef.current;\n    if (!(anchor && panel)) return;\n\n    const panelHeight = panel.offsetHeight;\n    if (panelHeight === 0) return;\n\n    const position = getDatePickerPanelPosition({\n      align,\n      panelHeight,\n      panelWidth,\n      side,\n      triggerRect: anchor.getBoundingClientRect(),\n    });\n\n    setPanelPlacement({\n      left: position.left,\n      top: position.top,\n      width: panelWidth,\n    });\n  }, [align, anchorRef, panelRef, panelWidth, side]);\n\n  useLayoutEffect(() => {\n    if (!(open && hasRenderedPanel)) return;\n\n    updatePanelPlacement();\n\n    const frameId = window.requestAnimationFrame(updatePanelPlacement);\n\n    window.addEventListener(\"resize\", updatePanelPlacement);\n    window.addEventListener(\"scroll\", updatePanelPlacement, true);\n\n    const panel = panelRef.current;\n    const resizeObserver =\n      panel && typeof ResizeObserver !== \"undefined\"\n        ? new ResizeObserver(updatePanelPlacement)\n        : null;\n\n    if (panel && resizeObserver) {\n      resizeObserver.observe(panel);\n    }\n\n    return () => {\n      window.cancelAnimationFrame(frameId);\n      window.removeEventListener(\"resize\", updatePanelPlacement);\n      window.removeEventListener(\"scroll\", updatePanelPlacement, true);\n      resizeObserver?.disconnect();\n    };\n  }, [hasRenderedPanel, open, panelRef, updatePanelPlacement]);\n\n  return panelPlacement;\n}\n\nfunction mergeTriggerRef(\n  node: HTMLInputElement | null,\n  triggerRef: RefObject<HTMLInputElement | null>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  triggerRef.current = node;\n\n  if (typeof ref === \"function\") {\n    ref(node);\n    return;\n  }\n\n  if (ref) {\n    ref.current = node;\n  }\n}\n\ntype DatePickerTriggerProps = {\n  ariaInvalid?: boolean;\n  ariaLabel: string;\n  clearable: boolean;\n  disabled: boolean;\n  id?: string;\n  labelId: string;\n  onClear: (event: MouseEvent<HTMLButtonElement>) => void;\n  onToggle: () => void;\n  open: boolean;\n  panelId: string;\n  placeholder: string;\n  selected: Date | null;\n  setTriggerRef: (node: HTMLInputElement | null) => void;\n  triggerLabel: string;\n};\n\nfunction DatePickerTrigger({\n  ariaInvalid,\n  ariaLabel,\n  clearable,\n  disabled,\n  id,\n  labelId,\n  onClear,\n  onToggle,\n  open,\n  panelId,\n  placeholder,\n  selected,\n  setTriggerRef,\n  triggerLabel,\n}: DatePickerTriggerProps) {\n  const handleActivate = () => {\n    if (disabled) return;\n    onToggle();\n  };\n\n  return (\n    <div\n      className={cn(\n        datePickerInputShellClassName,\n        \"h-10 pr-2 pl-4\",\n        datePickerTriggerCornerClassName\n      )}\n    >\n      <div className=\"relative flex min-w-0 flex-1 items-center\">\n        <CalendarIcon\n          aria-hidden\n          className=\"pointer-events-none absolute left-0 h-4 w-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground group-has-[input:disabled]:text-muted-foreground\"\n        />\n        <InputPrimitive\n          aria-controls={open ? panelId : undefined}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-invalid={ariaInvalid}\n          aria-label={ariaLabel}\n          disabled={disabled}\n          id={id ?? labelId}\n          onClick={handleActivate}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\" || event.key === \" \") {\n              event.preventDefault();\n              handleActivate();\n            }\n          }}\n          placeholder={placeholder}\n          readOnly\n          render={(inputProps) => {\n            const {\n              className: primitiveClassName,\n              ref: primitiveRef,\n              ...resolvedInputProps\n            } = inputProps;\n\n            return (\n              <input\n                {...resolvedInputProps}\n                className={cn(\n                  datePickerInputClassName,\n                  \"pl-7\",\n                  !selected && \"text-muted-foreground\",\n                  primitiveClassName\n                )}\n                ref={(node) => {\n                  setTriggerRef(node);\n\n                  if (typeof primitiveRef === \"function\") {\n                    primitiveRef(node);\n                    return;\n                  }\n\n                  if (primitiveRef) {\n                    primitiveRef.current = node;\n                  }\n                }}\n              />\n            );\n          }}\n          value={selected ? triggerLabel : \"\"}\n        />\n      </div>\n\n      {clearable && selected && !disabled ? (\n        <button\n          aria-label=\"Clear selected date\"\n          className=\"ml-1 flex h-7 w-7 shrink-0 items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground focus-visible:text-foreground focus-visible:outline-none\"\n          onClick={onClear}\n          onPointerDown={(event) => {\n            event.stopPropagation();\n          }}\n          type=\"button\"\n        >\n          <X className=\"h-3.5 w-3.5\" strokeWidth={2.5} />\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\ntype DatePickerPanelProps = {\n  calendarClassName?: string;\n  calendarSize: NonNullable<CalendarProps[\"size\"]>;\n  hasRenderedPanel: boolean;\n  labelId: string;\n  locale?: Locale;\n  onMonthChange: (month: Date) => void;\n  onSelect: (date: Date | null) => void;\n  open: boolean;\n  panelId: string;\n  panelPlacement: PanelPlacement | null;\n  panelRef: RefObject<HTMLDivElement | null>;\n  panelTransition:\n    | { duration: number }\n    | { type: \"spring\"; stiffness: number; damping: number };\n  panelWidth: number;\n  reduceMotion: boolean | null;\n  restCalendarProps: Omit<\n    DatePickerCalendarProps,\n    \"className\" | \"locale\" | \"size\"\n  >;\n  selected: Date | null;\n  viewMonth: Date;\n};\n\nfunction DatePickerPanel({\n  calendarClassName,\n  calendarSize,\n  hasRenderedPanel,\n  labelId,\n  locale,\n  onMonthChange,\n  onSelect,\n  open,\n  panelId,\n  panelPlacement,\n  panelRef,\n  panelTransition,\n  panelWidth,\n  reduceMotion,\n  restCalendarProps,\n  selected,\n  viewMonth,\n}: DatePickerPanelProps) {\n  if (!hasRenderedPanel) return null;\n\n  return (\n    <motion.div\n      animate={{\n        opacity: open ? 1 : 0,\n        y: open || reduceMotion ? 0 : -6,\n      }}\n      aria-hidden={!open}\n      aria-labelledby={labelId}\n      aria-modal=\"true\"\n      className={cn(\n        \"fixed z-50\",\n        !(open && panelPlacement) && \"pointer-events-none\"\n      )}\n      id={panelId}\n      initial={false}\n      ref={panelRef}\n      role=\"dialog\"\n      style={\n        panelPlacement\n          ? {\n              left: panelPlacement.left,\n              top: panelPlacement.top,\n              width: panelPlacement.width,\n              visibility: open ? undefined : \"hidden\",\n            }\n          : { visibility: \"hidden\", width: panelWidth }\n      }\n      transition={panelTransition}\n    >\n      <Calendar\n        className={cn(\"!shadow-none\", calendarClassName)}\n        locale={locale}\n        mode=\"single\"\n        month={viewMonth}\n        onMonthChange={onMonthChange}\n        onSelect={onSelect}\n        selected={selected}\n        size={calendarSize}\n        {...restCalendarProps}\n      />\n    </motion.div>\n  );\n}\n\nexport const AnimatedDatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n  function AnimatedDatePicker(props, ref) {\n    const {\n      value,\n      defaultValue = null,\n      onChange,\n      className,\n      defaultOpen = false,\n      open: openProp,\n      onOpenChange,\n      placeholder = \"Select a date\",\n      disabled = false,\n      clearable = false,\n      closeOnSelect = true,\n      dateFormat = DEFAULT_DATE_PICKER_FORMAT,\n      name,\n      id,\n      \"aria-invalid\": ariaInvalid,\n      side = \"bottom\",\n      align = \"start\",\n      calendarProps,\n    } = props;\n\n    const isValueControlled = value !== undefined;\n    const isOpenControlled = openProp !== undefined;\n    const reduceMotion = useReducedMotion();\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLInputElement>(null);\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    const panelId = useId();\n    const labelId = useId();\n\n    const [mounted, setMounted] = useState(false);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n    const [hasRenderedPanel, setHasRenderedPanel] = useState(defaultOpen);\n    const [internalSelected, setInternalSelected] = useState<Date | null>(\n      defaultValue\n    );\n    const [viewMonth, setViewMonth] = useState<Date>(() =>\n      resolveDatePickerViewMonth(value, defaultValue)\n    );\n\n    const open = isOpenControlled ? Boolean(openProp) : uncontrolledOpen;\n    const selected = isValueControlled ? (value ?? null) : internalSelected;\n\n    const {\n      className: calendarClassName,\n      locale,\n      size,\n      ...restCalendarProps\n    } = calendarProps ?? {};\n    const calendarSize = size ?? \"md\";\n    const panelWidth = getDatePickerPanelWidth(calendarSize);\n\n    const setOpenState = useCallback(\n      (nextOpen: boolean) => {\n        if (disabled && nextOpen) return;\n\n        if (nextOpen) {\n          setHasRenderedPanel(true);\n        }\n\n        if (!isOpenControlled) {\n          setUncontrolledOpen(nextOpen);\n        }\n\n        onOpenChange?.(nextOpen);\n      },\n      [disabled, isOpenControlled, onOpenChange]\n    );\n\n    const panelPlacement = usePanelPlacement({\n      align,\n      anchorRef: rootRef,\n      hasRenderedPanel,\n      open,\n      panelRef,\n      panelWidth,\n      side,\n    });\n\n    useEffect(() => {\n      setMounted(true);\n    }, []);\n\n    useEffect(() => {\n      if (!isValueControlled) return;\n      setViewMonth(resolveDatePickerViewMonth(value, selected));\n    }, [isValueControlled, selected, value]);\n\n    useEffect(() => {\n      if (!open) return;\n      setViewMonth(resolveDatePickerViewMonth(selected, selected));\n    }, [open, selected]);\n\n    useEffect(() => {\n      if (disabled && open) {\n        setOpenState(false);\n      }\n    }, [disabled, open, setOpenState]);\n\n    useDismissiblePanel({ open, panelRef, rootRef, setOpenState });\n    useFocusTrap(\n      panelRef,\n      triggerRef,\n      open && hasRenderedPanel && panelPlacement !== null\n    );\n\n    const handleSelect = useCallback(\n      (date: Date | null) => {\n        if (!isValueControlled) {\n          setInternalSelected(date);\n        }\n\n        if (date) {\n          setViewMonth(startOfMonth(date));\n        }\n\n        onChange?.(date);\n\n        if (closeOnSelect && date) {\n          setOpenState(false);\n        }\n      },\n      [closeOnSelect, isValueControlled, onChange, setOpenState]\n    );\n\n    const handleClear = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n\n        if (!isValueControlled) {\n          setInternalSelected(null);\n        }\n\n        onChange?.(null);\n        setOpenState(false);\n        triggerRef.current?.focus();\n      },\n      [isValueControlled, onChange, setOpenState]\n    );\n\n    const handleMonthChange = useCallback((month: Date) => {\n      setViewMonth(startOfMonth(month));\n    }, []);\n\n    const setTriggerRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        mergeTriggerRef(node, triggerRef, ref);\n      },\n      [ref]\n    );\n\n    const triggerLabel = selected\n      ? formatDatePickerLabel(selected, dateFormat, locale)\n      : placeholder;\n\n    const ariaLabel = selected\n      ? `Selected date, ${formatDatePickerLabel(selected, DEFAULT_DATE_PICKER_ARIA_FORMAT, locale)}`\n      : placeholder;\n\n    const triggerId = id ?? labelId;\n\n    const panelTransition = reduceMotion\n      ? { duration: 0 }\n      : { type: \"spring\" as const, stiffness: 260, damping: 28 };\n\n    const panel = (\n      <DatePickerPanel\n        calendarClassName={calendarClassName}\n        calendarSize={calendarSize}\n        hasRenderedPanel={hasRenderedPanel}\n        labelId={triggerId}\n        locale={locale}\n        onMonthChange={handleMonthChange}\n        onSelect={handleSelect}\n        open={open}\n        panelId={panelId}\n        panelPlacement={panelPlacement}\n        panelRef={panelRef}\n        panelTransition={panelTransition}\n        panelWidth={panelWidth}\n        reduceMotion={reduceMotion}\n        restCalendarProps={restCalendarProps}\n        selected={selected}\n        viewMonth={viewMonth}\n      />\n    );\n\n    return (\n      <div\n        className={cn(\"relative w-full\", className)}\n        ref={rootRef}\n        style={{ maxWidth: panelWidth }}\n      >\n        {name ? (\n          <InputPrimitive\n            aria-hidden\n            className=\"sr-only\"\n            name={name}\n            readOnly\n            render={(inputProps) => <input {...inputProps} tabIndex={-1} />}\n            tabIndex={-1}\n            value={selected ? getDatePickerFormValue(selected) : \"\"}\n          />\n        ) : null}\n\n        <DatePickerTrigger\n          ariaInvalid={ariaInvalid}\n          ariaLabel={ariaLabel}\n          clearable={clearable}\n          disabled={disabled}\n          id={id}\n          labelId={labelId}\n          onClear={handleClear}\n          onToggle={() => setOpenState(!open)}\n          open={open}\n          panelId={panelId}\n          placeholder={placeholder}\n          selected={selected}\n          setTriggerRef={setTriggerRef}\n          triggerLabel={triggerLabel}\n        />\n\n        {mounted && panel ? createPortal(panel, document.body) : null}\n      </div>\n    );\n  }\n);\n\nAnimatedDatePicker.displayName = \"DatePicker\";\n\nexport { AnimatedDatePicker as DatePicker };\n",
      "type": "registry:ui"
    }
  ],
  "title": "Date Picker",
  "description": "Collapsible date picker trigger with the shared Iconiq Calendar panel, spring open motion, and month-aware selection."
}