@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

package/dist/cjs/components/color-picker/use-color-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useControllableState","useEyeDropper","mergeRefs","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  contains,\n  convertColor,\n  cx,\n  focusTransfer,\n  handlerAll,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n  extends\n    Omit<\n      UseComboboxProps,\n      | \"closeOnSelect\"\n      | \"initialFocusValue\"\n      | \"onChange\"\n      | \"ref\"\n      | \"selectFocusRef\"\n      | \"selectOnSpace\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the color picker.\n   */\n  defaultValue?: string\n  /**\n   * The fallback value of the color picker.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color picker.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the color picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the color picker will be opened when the input is focused.\n   *\n   * @default false\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for color picker.\n   */\n  placeholder?: string\n  /**\n   * The value of the color picker.\n   */\n  value?: string\n  /**\n   * The function to format the input value.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const { t } = useI18n(\"colorPicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      allowInput = true,\n      closeOnChange = false,\n      defaultValue,\n      disabled,\n      fallbackValue = \"#FFFFFF\",\n      format: formatProp,\n      formatInput,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      pattern,\n      placeholder,\n      placement = \"end-start\",\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onInputChange: onInputChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    matchWidth: false,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const format =\n    formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n  const alpha = format.endsWith(\"a\")\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    focusByClickRef.current = true\n\n    if (allowInput) inputRef.current?.focus()\n\n    if (openOnClick) onOpen()\n  }, [allowInput, interactive, onOpen, openOnClick])\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      )\n        ev.preventDefault()\n      else\n        setValue((prev) => {\n          if (!prev) return prev\n\n          let value = convertColor(prev)(format)\n\n          if (!value) return prev\n\n          if (formatInput) value = formatInput(value)\n\n          if (pattern) value = value.replace(pattern, \"\")\n\n          return value\n        })\n    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) onClose()\n      else if (runIfFn(openOnChange, ev)) onOpen()\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":";;;;;;;;;;;AAmHA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,MAAMA,sBAAAA,QAAQ,aAAa;CACnC,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,cAAc,WACd,mBAAmB,oBACnB,aAAa,MACb,gBAAgB,OAChB,cACA,UACA,gBAAgB,WAChB,QAAQ,YACR,aACA,eAAe,MACf,cAAc,MACd,cAAc,MACd,SACA,aACA,YAAY,aACZ,UACA,UACA,OAAO,WACP,UAAU,cACV,eAAe,mBACf,GAAG,QAEL,WACA,WACA,eACEC,wBAAAA,cAAc,KAAK;CACvB,MAAM,EACJ,aACA,MACA,iBAAiB,yBACjB,iBACA,cACA,SACA,WACEC,iCAAAA,YAAY;EACd;EACA,YAAY;EACZ,aAAa;EACb,aAAa,CAAC;EACd,aAAa,CAAC;EACd;EACA;EACA,eAAe;EACf,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;CACL,CAAC;CACD,MAAM,SACJ,eAAA,GAAA,oBAAA,cAAA,WAAA,CAAyB,aAAa,gBAAgB,aAAa;CACrE,MAAM,QAAQ,OAAO,SAAS,GAAG;CACjC,MAAM,YAAA,GAAA,MAAA,OAAA,CAAkC,IAAI;CAC5C,MAAM,cAAA,GAAA,MAAA,OAAA,CAAoC,IAAI;CAC9C,MAAM,YAAA,GAAA,MAAA,OAAA,CAAoC,IAAI;CAC9C,MAAM,mBAAA,GAAA,MAAA,OAAA,CAAkC,KAAK;CAC7C,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,EAAE,WAAW,qBAAqB,QAAQ,qBAC9CC,oCAAAA,cAAc;CAEhB,MAAM,WAAA,GAAA,MAAA,YAAA,OAA4B;EAChC,IAAI,CAAC,aAAa;EAElB,gBAAgB,UAAU;EAE1B,IAAI,YAAY,SAAS,SAAS,MAAM;EAExC,IAAI,aAAa,OAAO;CAC1B,GAAG;EAAC;EAAY;EAAa;EAAQ;CAAW,CAAC;CAEjD,MAAM,eAAA,GAAA,MAAA,YAAA,EACH,OAAsD;EACrD,IAAI,CAAC,aAAa;EAElB,GAAG,eAAe;EAClB,GAAG,gBAAgB;CACrB,GACA,CAAC,WAAW,CACd;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,IAAI,YAAY;EAEhB,IAAI,aAAa,OAAO;EAExB,gBAAgB,UAAU;CAC5B,GAAG;EAAC;EAAY;EAAQ;CAAW,CAAC;CAEpC,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,OAAqC;EACpC,GAAG,eAAe;EAClB,GAAG,gBAAgB;EAEnB,IAAI,eAAe,CAAC,gBAAgB,SAAS,OAAO;EAEpD,gBAAgB,UAAU;CAC5B,GACA,CAAC,QAAQ,WAAW,CACtB;CAEA,MAAM,UAAA,GAAA,MAAA,YAAA,EACH,OAAqC;EACpC,KAAA,GAAA,oBAAA,cAAA,SAAA,CACW,SAAS,SAAS,GAAG,aAAa,MAAA,GAAA,oBAAA,cAAA,SAAA,CAClC,WAAW,SAAS,GAAG,aAAa,GAE7C,GAAG,eAAe;OAElB,UAAU,SAAS;GACjB,IAAI,CAAC,MAAM,OAAO;GAElB,IAAI,SAAA,GAAA,oBAAA,cAAA,aAAA,CAAqB,IAAI,CAAC,CAAC,MAAM;GAErC,IAAI,CAAC,OAAO,OAAO;GAEnB,IAAI,aAAa,QAAQ,YAAY,KAAK;GAE1C,IAAI,SAAS,QAAQ,MAAM,QAAQ,SAAS,EAAE;GAE9C,OAAO;EACT,CAAC;CACL,GACA;EAAC;EAAQ;EAAa;EAAS;CAAQ,CACzC;CAEA,MAAM,iBAAA,GAAA,MAAA,YAAA,EACH,OAAsC;EACrC,IAAI,CAAC,YAAY;EAEjB,oBAAoB,EAAE;EAEtB,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,eAAe,EAAE,GAAG,QAAQ;OACnC,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,cAAc,EAAE,GAAG,OAAO;EAE3C,IAAI,aAAa,GAAG,OAAO;EAE3B,IAAI,aAAa,aAAa,YAAY,UAAU;EAEpD,IAAI,SAAS,aAAa,WAAW,QAAQ,SAAS,EAAE;EAExD,SAAS,UAAU;CACrB,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,qBAAA,GAAA,MAAA,YAAA,CAAgC,YAAY;EAChD,IAAI,CAAC,aAAa;EAElB,MAAM,SAAS,MAAM,iBAAiB;EAEtC,IAAI,QAAQ,SAAS,SAAS,OAAO,OAAO;CAC9C,GAAG;EAAC;EAAa;EAAkB;CAAQ,CAAC;CAE5C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,MAAM;EAEX,QAAA,GAAA,oBAAA,cAAA,cAAA,CACE,WAAW,SACX,aAAa,SAAS,UAAU,SAAS,OAC3C;CACF,GAAG,CAAC,YAAY,IAAI,CAAC;CAErB,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,WAAW;EACV,GAAG;EACH,GAAG;CACL,IACA,CAAC,SAAS,CACZ;CAEA,MAAM,iBAAA,GAAA,MAAA,YAAA,EACH,EAAE,KAAK,GAAG,UAAU,CAAC,MACpB,gBAAgB;EACd,KAAKC,YAAAA,UAAU,KAAK,QAAQ;EAC5B,iBAAiB;EACjB,UAAU,CAAC,aAAa,IAAI;EAC5B,GAAG;EACH,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,OAAO;EAC1C,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,YAAY;EAC/C,cAAA,GAAA,oBAAA,cAAA,WAAA,CAAwB,MAAM,aAAa,WAAW;CACxD,CAAC,GAEH;EAAC;EAAY;EAAiB;EAAS;EAAc;CAAW,CAClE;CAEA,MAAM,iBAAA,GAAA,MAAA,YAAA,EACH,EAAE,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,OAAO;EACzD;EACA,KAAKA,YAAAA,UAAU,MAAM,KAAK,KAAK,QAAQ;EACvC;EACA,OAAO;GACL,GAAI,CAAC,aAAa,EAAE,eAAe,OAAO,IAAI,CAAC;GAC/C,GAAG,MAAM;EACX;EACA,cAAc;EACd,oBAAA,GAAA,oBAAA,cAAA,GAAA,CAAsB,gBAAgB,kBAAkB;EACxD,cAAc;EACd;EACA;EACA;EACA;EACA,UAAU,aAAa,IAAI;EAC3B;EACA,GAAG;EACH,GAAG;EACH,SAAA,GAAA,oBAAA,cAAA,WAAA,CAAmB,MAAM,QAAQ,MAAM;EACvC,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,aAAa;EAClD,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,YAAY;EAC/C,cAAA,GAAA,oBAAA,cAAA,WAAA,CAAwB,MAAM,aAAa,WAAW;CACxD,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,sBAAA,GAAA,MAAA,YAAA,EACH,QAAQ,CAAC,OAAO;EACf,GAAG;EACH,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,CAAC,WAAW;EACtC,cAAc,EAAE,cAAc;EAC9B,QAAQ,CAAC;EACT,MAAM;EACN,UAAU,cAAc,IAAI;EAC5B,GAAG;EACH,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,MAAM,SAAS,iBAAiB;EACpD,YAAA,GAAA,oBAAA,cAAA,WAAA,CAAsB,MAAM,YAAY,OACtCC,YAAAA,aAAa,IAAI;GACf,OAAO;GACP,OAAO;EACT,CAAC,CACH;CACF,IACA;EAAC;EAAW;EAAa;EAAmB;EAAqB;CAAC,CACpE;CAyBA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,kBAAA,GAAA,MAAA,YAAA,EA7BC,EAAE,KAAK,GAAG,UAAU,CAAC,MACpB,wBAAwB;GACtB,KAAKD,YAAAA,UAAU,KAAK,UAAU;GAC9B,MAAM;GACN,GAAG;EACL,CAAC,GACH,CAAC,uBAAuB,CAuBV;EACd;EACA;EACA;EACA;EACA,mBAAA,GAAA,MAAA,YAAA,EAxBC,QAAQ,CAAC,OAAO;GACf;GACA;GACA;GACA;GACA;GACA,GAAG;GACH,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,QAAQ;EAC/C,IACA;GAAC;GAAU;GAAe;GAAQ;GAAU;GAAO;EAAQ,CAe5C;EACf;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-color-picker.cjs","names":["useI18n","useFieldProps","useCombobox","useRef","useControllableState","useEyeDropper","useCallback","mergeRefs","runKeyAction"],"sources":["../../../../src/components/color-picker/use-color-picker.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, MouseEvent } from \"react\"\nimport type { HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { UseComboboxProps } from \"../../hooks/use-combobox\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseColorSelectorProps } from \"../color-selector\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { useCombobox } from \"../../hooks/use-combobox\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  contains,\n  convertColor,\n  cx,\n  focusTransfer,\n  handlerAll,\n  mergeRefs,\n  runIfFn,\n  runKeyAction,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseColorPickerProps\n  extends\n    Omit<\n      UseComboboxProps,\n      | \"closeOnSelect\"\n      | \"initialFocusValue\"\n      | \"onChange\"\n      | \"ref\"\n      | \"selectFocusRef\"\n      | \"selectOnSpace\"\n    >,\n    HTMLRefAttributes<\"input\">,\n    FieldProps {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color picker will be closed when the input value changes.\n   *\n   * @default false\n   */\n  closeOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * The initial value of the color picker.\n   */\n  defaultValue?: string\n  /**\n   * The fallback value of the color picker.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color picker.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * The `id` attribute of the input element.\n   */\n  id?: string\n  /**\n   * The `name` attribute of the input element.\n   */\n  name?: string\n  /**\n   * If `true`, the color picker will be opened when the input value changes.\n   *\n   * @default true\n   */\n  openOnChange?: ((ev: ChangeEvent<HTMLInputElement>) => boolean) | boolean\n  /**\n   * If `true`, the color picker will be opened when the input is focused.\n   *\n   * @default false\n   */\n  openOnFocus?: boolean\n  /**\n   * The pattern used to check the input element.\n   */\n  pattern?: RegExp\n  /**\n   * The placeholder for color picker.\n   */\n  placeholder?: string\n  /**\n   * The value of the color picker.\n   */\n  value?: string\n  /**\n   * The function to format the input value.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when input value state changes.\n   */\n  onInputChange?: (ev: ChangeEvent<HTMLInputElement>) => void\n}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const { t } = useI18n(\"colorPicker\")\n  const {\n    props: {\n      id,\n      ref,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      allowInput = true,\n      closeOnChange = false,\n      defaultValue,\n      disabled,\n      fallbackValue = \"#FFFFFF\",\n      format: formatProp,\n      formatInput,\n      openOnChange = true,\n      openOnClick = true,\n      openOnFocus = true,\n      pattern,\n      placeholder,\n      placement = \"end-start\",\n      readOnly,\n      required,\n      value: valueProp,\n      onChange: onChangeProp,\n      onInputChange: onInputChangeProp,\n      ...rest\n    },\n    ariaProps,\n    dataProps,\n    eventProps,\n  } = useFieldProps(props)\n  const {\n    interactive,\n    open,\n    getContentProps: getComboboxContentProps,\n    getTriggerProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  } = useCombobox({\n    disabled,\n    matchWidth: false,\n    openOnClick: false,\n    openOnEnter: !allowInput,\n    openOnSpace: !allowInput,\n    placement,\n    readOnly,\n    transferFocus: false,\n    ...ariaProps,\n    ...dataProps,\n    ...eventProps,\n    ...rest,\n  })\n  const format =\n    formatProp ?? calcFormat(valueProp ?? defaultValue ?? fallbackValue)\n  const alpha = format.endsWith(\"a\")\n  const fieldRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const focusByClickRef = useRef<boolean>(false)\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n\n  const onClick = useCallback(() => {\n    if (!interactive) return\n\n    focusByClickRef.current = true\n\n    if (allowInput) inputRef.current?.focus()\n\n    if (openOnClick) onOpen()\n  }, [allowInput, interactive, onOpen, openOnClick])\n\n  const onMouseDown = useCallback(\n    (ev: MouseEvent<HTMLDivElement | HTMLInputElement>) => {\n      if (!openOnFocus) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [openOnFocus],\n  )\n\n  const onFieldFocus = useCallback(() => {\n    if (allowInput) return\n\n    if (openOnFocus) onOpen()\n\n    focusByClickRef.current = false\n  }, [allowInput, onOpen, openOnFocus])\n\n  const onInputFocus = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      if (openOnFocus && !focusByClickRef.current) onOpen()\n\n      focusByClickRef.current = false\n    },\n    [onOpen, openOnFocus],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLInputElement>) => {\n      if (\n        contains(fieldRef.current, ev.relatedTarget) ||\n        contains(contentRef.current, ev.relatedTarget)\n      )\n        ev.preventDefault()\n      else\n        setValue((prev) => {\n          if (!prev) return prev\n\n          let value = convertColor(prev)(format)\n\n          if (!value) return prev\n\n          if (formatInput) value = formatInput(value)\n\n          if (pattern) value = value.replace(pattern, \"\")\n\n          return value\n        })\n    },\n    [format, formatInput, pattern, setValue],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (!allowInput) return\n\n      onInputChangeProp?.(ev)\n\n      if (runIfFn(closeOnChange, ev)) onClose()\n      else if (runIfFn(openOnChange, ev)) onOpen()\n\n      let inputValue = ev.target.value\n\n      if (formatInput) inputValue = formatInput(inputValue)\n\n      if (pattern) inputValue = inputValue.replace(pattern, \"\")\n\n      setValue(inputValue)\n    },\n    [\n      allowInput,\n      closeOnChange,\n      formatInput,\n      onClose,\n      onInputChangeProp,\n      onOpen,\n      openOnChange,\n      pattern,\n      setValue,\n    ],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) setValue(result.sRGBHex)\n  }, [interactive, onOpenEyeDropper, setValue])\n\n  useEffect(() => {\n    if (!open) return\n\n    return focusTransfer(\n      contentRef.current,\n      allowInput ? inputRef.current : fieldRef.current,\n    )\n  }, [allowInput, open])\n\n  const getRootProps: PropGetter = useCallback(\n    (props) => ({\n      ...dataProps,\n      ...props,\n    }),\n    [dataProps],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getTriggerProps({\n        ref: mergeRefs(ref, fieldRef),\n        \"aria-haspopup\": \"dialog\",\n        tabIndex: !allowInput ? 0 : -1,\n        ...props,\n        onClick: handlerAll(props.onClick, onClick),\n        onFocus: handlerAll(props.onFocus, onFieldFocus),\n        onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n      }),\n\n    [allowInput, getTriggerProps, onClick, onFieldFocus, onMouseDown],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id,\n      ref: mergeRefs(props.ref, ref, inputRef),\n      name,\n      style: {\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n        ...props.style,\n      },\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n      autoComplete: \"off\",\n      disabled,\n      placeholder,\n      readOnly,\n      required,\n      tabIndex: allowInput ? 0 : -1,\n      value,\n      ...dataProps,\n      ...props,\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onFocus: handlerAll(props.onFocus, onInputFocus),\n      onMouseDown: handlerAll(props.onMouseDown, onMouseDown),\n    }),\n    [\n      allowInput,\n      ariaLabel,\n      ariaLabelledbyProp,\n      dataProps,\n      disabled,\n      id,\n      name,\n      onBlur,\n      onInputChange,\n      onInputFocus,\n      onMouseDown,\n      placeholder,\n      readOnly,\n      ref,\n      required,\n      value,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...dataProps,\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [dataProps, interactive, onEyeDropperClick, supportedEyeDropper, t],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) =>\n      getComboboxContentProps({\n        ref: mergeRefs(ref, contentRef),\n        role: \"dialog\",\n        ...props,\n      }),\n    [getComboboxContentProps],\n  )\n\n  const getSelectorProps: PropGetter<UseColorSelectorProps> = useCallback(\n    (props = {}) => ({\n      disabled,\n      fallbackValue,\n      format,\n      readOnly,\n      value,\n      ...props,\n      onChange: handlerAll(props.onChange, setValue),\n    }),\n    [disabled, fallbackValue, format, readOnly, value, setValue],\n  )\n\n  return {\n    alpha,\n    format,\n    interactive,\n    open,\n    setValue,\n    value,\n    getContentProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getRootProps,\n    getSelectorProps,\n    popoverProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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"}

package/dist/cjs/components/color-selector/color-selector.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_var = require("../../core/system/var.cjs");
 const require_factory = require("../../core/system/factory.cjs");
 const require_props = require("../../core/components/props.cjs");
@@ -124,7 +125,8 @@ const ColorSelectorColorSwatchGroupLabel = withContext("span", "colorSwatchGroup
 });
 const ColorSelectorColorSwatchGroup = withContext("div", "colorSwatchGroup")(void 0, ({ children, ...rest }) => {
 	const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } = useComponentContext();
-	return getColorSwatchGroupProps(require_props.mergeProps(colorSwatchGroupProps, rest, { children: children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSelectorColorSwatchItem, { value }, index)) })());
+	const computedChildren = children ?? colorSwatchGroupProps?.children ?? colorSwatches?.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorSelectorColorSwatchItem, { value }, index));
+	return getColorSwatchGroupProps(require_props.mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })());
 });
 const ColorSelectorColorSwatchItem = withContext(require_color_swatch.ColorSwatch, "colorSwatchItem")(void 0, (props) => {
 	const { colorSwatchItemProps, getColorSwatchItemProps } = useComponentContext();

package/dist/cjs/components/color-selector/color-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-selector.cjs","names":["createSlotComponent","colorSelectorStyle","useColorSelector","styled","varAttr","mergeProps","PipetteIcon","ColorSwatch"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n  UseColorSelectorProps,\n  UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      ColorSelectorRootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n      | \"shape\"\n      | \"size\"\n    >,\n    Pick<\n      UseColorSelectorReturn,\n      | \"alpha\"\n      | \"getAlphaSliderProps\"\n      | \"getColorSwatchGroupLabelProps\"\n      | \"getColorSwatchGroupProps\"\n      | \"getColorSwatchItemProps\"\n      | \"getEyeDropperProps\"\n      | \"getHueSliderProps\"\n      | \"getSaturationSliderProps\"\n    > {}\n\nexport interface ColorSelectorRootProps\n  extends\n    Merge<HTMLStyledProps, UseColorSelectorProps>,\n    ThemeProps<ColorSelectorStyle> {\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  colorSwatches?: string[]\n  /**\n   * The number of columns in the color swatch group.\n   *\n   * @default 8\n   */\n  colorSwatchGroupColumns?: StyleValue<number>\n  /**\n   * The label of the color swatch group.\n   */\n  colorSwatchGroupLabel?: ReactNode\n  /**\n   * If `true`, the alpha slider will be displayed.\n   *\n   * @default false\n   */\n  withAlpha?: boolean\n  /**\n   * Props for the alpha slider.\n   */\n  alphaSliderProps?: ColorSelectorAlphaSliderProps\n  /**\n   * Props for the color swatch group label.\n   */\n  colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n  /**\n   * Props for the color swatch group.\n   */\n  colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n  /**\n   * Props for the color swatch item.\n   */\n  colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n  /**\n   * Props for the hue slider.\n   */\n  hueSliderProps?: ColorSelectorHueSliderProps\n  /**\n   * Props for the saturation slider.\n   */\n  saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorSelectorPropsContext,\n  useComponentContext,\n  usePropsContext: useColorSelectorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  ColorSelectorRootProps,\n  ColorSelectorStyle,\n  ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see https://yamada-ui.com/docs/components/color-selector\n */\nexport const ColorSelectorRoot = withProvider<\n  \"div\",\n  ColorSelectorRootProps,\n  \"shape\" | \"size\"\n>(\n  ({\n    size,\n    children,\n    colorSwatches,\n    colorSwatchGroupLabel,\n    shape,\n    withAlpha,\n    alphaSliderProps,\n    colorSwatchGroupLabelProps,\n    colorSwatchGroupProps,\n    colorSwatchItemProps,\n    hueSliderProps,\n    saturationSliderProps,\n    ...rest\n  }) => {\n    const {\n      alpha,\n      getAlphaSliderProps,\n      getColorSwatchGroupLabelProps,\n      getColorSwatchGroupProps,\n      getColorSwatchItemProps,\n      getEyeDropperProps,\n      getHueSliderProps,\n      getRootProps,\n      getSaturationSliderProps,\n    } = useColorSelector(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          <ColorSelectorSaturationSlider />\n          <ColorSelectorHueSlider />\n          <ColorSelectorAlphaSlider />\n\n          {colorSwatchGroupLabel ? (\n            <ColorSelectorColorSwatchGroupLabel>\n              {colorSwatchGroupLabel}\n            </ColorSelectorColorSwatchGroupLabel>\n          ) : null}\n          {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n        </>\n      )\n    }, [children, colorSwatchGroupLabel, colorSwatches])\n    const context = useMemo(\n      () => ({\n        size,\n        alpha: withAlpha ?? alpha,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        shape,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        getAlphaSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        hueSliderProps,\n        saturationSliderProps,\n      }),\n      [\n        size,\n        withAlpha,\n        alpha,\n        shape,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        alphaSliderProps,\n        getAlphaSliderProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        hueSliderProps,\n        saturationSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n  \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n  ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n  extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n  \"input\",\n  ColorSelectorSaturationSliderProps\n>((props) => {\n  const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n    useComponentContext()\n\n  return (\n    <SaturationSlider.Root\n      size={size}\n      shape={shape}\n      {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n    />\n  )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n  \"input\",\n  ColorSelectorHueSliderProps\n>((props) => {\n  const { size, shape, getHueSliderProps, hueSliderProps } =\n    useComponentContext()\n\n  return (\n    <HueSlider.Root\n      size={size}\n      shape={shape}\n      {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n    />\n  )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n  \"input\",\n  ColorSelectorAlphaSliderProps\n>((props) => {\n  const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n    useComponentContext()\n\n  if (!alpha) return null\n\n  return (\n    <AlphaSlider.Root\n      size={size}\n      shape={shape}\n      {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n    />\n  )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n  /**\n   * The icon to display in the eye dropper.\n   */\n  icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n  \"div\",\n  ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n  \"span\",\n  ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n  const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n    useComponentContext()\n\n  return getColorSwatchGroupLabelProps(\n    mergeProps(colorSwatchGroupLabelProps, props)(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n  \"div\",\n  ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n  const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n    useComponentContext()\n  const computedChildren =\n    children ??\n    colorSwatchGroupProps?.children ??\n    colorSwatches?.map((value, index) => (\n      <ColorSelectorColorSwatchItem key={index} value={value} />\n    ))\n\n  return getColorSwatchGroupProps(\n    mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n  ColorSwatchProps,\n  \"color\"\n> {\n  /**\n   * The value of the color swatch.\n   */\n  value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n  \"div\",\n  ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n  const { colorSwatchItemProps, getColorSwatchItemProps } =\n    useComponentContext()\n\n  return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}
+{"version":3,"file":"color-selector.cjs","names":["createSlotComponent","colorSelectorStyle","useColorSelector","useMemo","styled","varAttr","mergeProps","PipetteIcon","ColorSwatch"],"sources":["../../../../src/components/color-selector/color-selector.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, StyleValue, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { ColorSwatchProps } from \"../color-swatch\"\nimport type { ColorSelectorStyle } from \"./color-selector.style\"\nimport type {\n  UseColorSelectorProps,\n  UseColorSelectorReturn,\n} from \"./use-color-selector\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled, varAttr } from \"../../core\"\nimport { AlphaSlider } from \"../alpha-slider\"\nimport { ColorSwatch } from \"../color-swatch\"\nimport { HueSlider } from \"../hue-slider\"\nimport { PipetteIcon } from \"../icon\"\nimport { SaturationSlider } from \"../saturation-slider\"\nimport { colorSelectorStyle } from \"./color-selector.style\"\nimport { useColorSelector } from \"./use-color-selector\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      ColorSelectorRootProps,\n      | \"alphaSliderProps\"\n      | \"colorSwatches\"\n      | \"colorSwatchGroupLabelProps\"\n      | \"colorSwatchGroupProps\"\n      | \"colorSwatchItemProps\"\n      | \"hueSliderProps\"\n      | \"saturationSliderProps\"\n      | \"shape\"\n      | \"size\"\n    >,\n    Pick<\n      UseColorSelectorReturn,\n      | \"alpha\"\n      | \"getAlphaSliderProps\"\n      | \"getColorSwatchGroupLabelProps\"\n      | \"getColorSwatchGroupProps\"\n      | \"getColorSwatchItemProps\"\n      | \"getEyeDropperProps\"\n      | \"getHueSliderProps\"\n      | \"getSaturationSliderProps\"\n    > {}\n\nexport interface ColorSelectorRootProps\n  extends\n    Merge<HTMLStyledProps, UseColorSelectorProps>,\n    ThemeProps<ColorSelectorStyle> {\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  colorSwatches?: string[]\n  /**\n   * The number of columns in the color swatch group.\n   *\n   * @default 8\n   */\n  colorSwatchGroupColumns?: StyleValue<number>\n  /**\n   * The label of the color swatch group.\n   */\n  colorSwatchGroupLabel?: ReactNode\n  /**\n   * If `true`, the alpha slider will be displayed.\n   *\n   * @default false\n   */\n  withAlpha?: boolean\n  /**\n   * Props for the alpha slider.\n   */\n  alphaSliderProps?: ColorSelectorAlphaSliderProps\n  /**\n   * Props for the color swatch group label.\n   */\n  colorSwatchGroupLabelProps?: ColorSelectorColorSwatchGroupLabelProps\n  /**\n   * Props for the color swatch group.\n   */\n  colorSwatchGroupProps?: ColorSelectorColorSwatchGroupProps\n  /**\n   * Props for the color swatch item.\n   */\n  colorSwatchItemProps?: Omit<ColorSelectorColorSwatchItemProps, \"value\">\n  /**\n   * Props for the hue slider.\n   */\n  hueSliderProps?: ColorSelectorHueSliderProps\n  /**\n   * Props for the saturation slider.\n   */\n  saturationSliderProps?: ColorSelectorSaturationSliderProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ColorSelectorPropsContext,\n  useComponentContext,\n  usePropsContext: useColorSelectorPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  ColorSelectorRootProps,\n  ColorSelectorStyle,\n  ComponentContext\n>(\"color-selector\", colorSelectorStyle)\n\nexport { ColorSelectorPropsContext, useColorSelectorPropsContext }\n\n/**\n * `ColorSelector` is a component used by the user to select a color.\n *\n * @see https://yamada-ui.com/docs/components/color-selector\n */\nexport const ColorSelectorRoot = withProvider<\n  \"div\",\n  ColorSelectorRootProps,\n  \"shape\" | \"size\"\n>(\n  ({\n    size,\n    children,\n    colorSwatches,\n    colorSwatchGroupLabel,\n    shape,\n    withAlpha,\n    alphaSliderProps,\n    colorSwatchGroupLabelProps,\n    colorSwatchGroupProps,\n    colorSwatchItemProps,\n    hueSliderProps,\n    saturationSliderProps,\n    ...rest\n  }) => {\n    const {\n      alpha,\n      getAlphaSliderProps,\n      getColorSwatchGroupLabelProps,\n      getColorSwatchGroupProps,\n      getColorSwatchItemProps,\n      getEyeDropperProps,\n      getHueSliderProps,\n      getRootProps,\n      getSaturationSliderProps,\n    } = useColorSelector(rest)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return (\n        <>\n          <ColorSelectorSaturationSlider />\n          <ColorSelectorHueSlider />\n          <ColorSelectorAlphaSlider />\n\n          {colorSwatchGroupLabel ? (\n            <ColorSelectorColorSwatchGroupLabel>\n              {colorSwatchGroupLabel}\n            </ColorSelectorColorSwatchGroupLabel>\n          ) : null}\n          {colorSwatches ? <ColorSelectorColorSwatchGroup /> : null}\n        </>\n      )\n    }, [children, colorSwatchGroupLabel, colorSwatches])\n    const context = useMemo(\n      () => ({\n        size,\n        alpha: withAlpha ?? alpha,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        shape,\n        alphaSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n        getAlphaSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        hueSliderProps,\n        saturationSliderProps,\n      }),\n      [\n        size,\n        withAlpha,\n        alpha,\n        shape,\n        colorSwatches,\n        colorSwatchGroupLabel,\n        alphaSliderProps,\n        getAlphaSliderProps,\n        getEyeDropperProps,\n        getHueSliderProps,\n        getSaturationSliderProps,\n        getColorSwatchGroupLabelProps,\n        getColorSwatchGroupProps,\n        getColorSwatchItemProps,\n        hueSliderProps,\n        saturationSliderProps,\n        colorSwatchGroupLabelProps,\n        colorSwatchGroupProps,\n        colorSwatchItemProps,\n      ],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>{computedChildren}</styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\", \"shape\"] },\n)(undefined, ({ colorSwatchGroupColumns = 8, ...rest }) => ({\n  \"--color-swatch-group-columns\": varAttr(colorSwatchGroupColumns),\n  ...rest,\n}))\n\nexport interface ColorSelectorSaturationSliderProps\n  extends SaturationSlider.RootProps {}\n\nexport const ColorSelectorSaturationSlider = withContext<\n  \"input\",\n  ColorSelectorSaturationSliderProps\n>((props) => {\n  const { size, shape, getSaturationSliderProps, saturationSliderProps } =\n    useComponentContext()\n\n  return (\n    <SaturationSlider.Root\n      size={size}\n      shape={shape}\n      {...getSaturationSliderProps(mergeProps(saturationSliderProps, props)())}\n    />\n  )\n}, \"saturationSlider\")()\n\nexport interface ColorSelectorHueSliderProps extends HueSlider.RootProps {}\n\nexport const ColorSelectorHueSlider = withContext<\n  \"input\",\n  ColorSelectorHueSliderProps\n>((props) => {\n  const { size, shape, getHueSliderProps, hueSliderProps } =\n    useComponentContext()\n\n  return (\n    <HueSlider.Root\n      size={size}\n      shape={shape}\n      {...getHueSliderProps(mergeProps(hueSliderProps, props)())}\n    />\n  )\n}, \"hueSlider\")()\n\nexport interface ColorSelectorAlphaSliderProps extends Partial<AlphaSlider.RootProps> {}\n\nexport const ColorSelectorAlphaSlider = withContext<\n  \"input\",\n  ColorSelectorAlphaSliderProps\n>((props) => {\n  const { size, alpha, shape, alphaSliderProps, getAlphaSliderProps } =\n    useComponentContext()\n\n  if (!alpha) return null\n\n  return (\n    <AlphaSlider.Root\n      size={size}\n      shape={shape}\n      {...getAlphaSliderProps(mergeProps(alphaSliderProps, props)())}\n    />\n  )\n}, \"alphaSlider\")()\n\nexport interface ColorSelectorEyeDropperProps extends HTMLStyledProps {\n  /**\n   * The icon to display in the eye dropper.\n   */\n  icon?: ReactNode\n}\n\nexport const ColorSelectorEyeDropper = withContext<\n  \"div\",\n  ColorSelectorEyeDropperProps\n>(\"div\", \"eyeDropper\")(undefined, ({ children, icon, ...rest }) => {\n  const { getEyeDropperProps } = useComponentContext()\n\n  return getEyeDropperProps({\n    children: icon || children || <PipetteIcon />,\n    ...rest,\n  })\n})\n\nexport interface ColorSelectorColorSwatchGroupLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const ColorSelectorColorSwatchGroupLabel = withContext<\n  \"span\",\n  ColorSelectorColorSwatchGroupLabelProps\n>(\"span\", \"colorSwatchGroupLabel\")(undefined, (props) => {\n  const { colorSwatchGroupLabelProps, getColorSwatchGroupLabelProps } =\n    useComponentContext()\n\n  return getColorSwatchGroupLabelProps(\n    mergeProps(colorSwatchGroupLabelProps, props)(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchGroupProps extends HTMLStyledProps {}\n\nexport const ColorSelectorColorSwatchGroup = withContext<\n  \"div\",\n  ColorSelectorColorSwatchGroupProps\n>(\"div\", \"colorSwatchGroup\")(undefined, ({ children, ...rest }) => {\n  const { colorSwatches, colorSwatchGroupProps, getColorSwatchGroupProps } =\n    useComponentContext()\n  const computedChildren =\n    children ??\n    colorSwatchGroupProps?.children ??\n    colorSwatches?.map((value, index) => (\n      <ColorSelectorColorSwatchItem key={index} value={value} />\n    ))\n\n  return getColorSwatchGroupProps(\n    mergeProps(colorSwatchGroupProps, rest, { children: computedChildren })(),\n  )\n})\n\nexport interface ColorSelectorColorSwatchItemProps extends Omit<\n  ColorSwatchProps,\n  \"color\"\n> {\n  /**\n   * The value of the color swatch.\n   */\n  value: string\n}\n\nexport const ColorSelectorColorSwatchItem = withContext<\n  \"div\",\n  ColorSelectorColorSwatchItemProps\n>(ColorSwatch, \"colorSwatchItem\")(undefined, (props) => {\n  const { colorSwatchItemProps, getColorSwatchItemProps } =\n    useComponentContext()\n\n  return getColorSwatchItemProps(mergeProps(colorSwatchItemProps, props)())\n})\n"],"mappings":"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"}

package/dist/cjs/components/color-selector/use-color-selector.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_effect = require("../../utils/effect.cjs");
 const require_utils_index = require("../../utils/index.cjs");

package/dist/cjs/components/color-selector/use-color-selector.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useEyeDropper","mergeProps","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}
+{"version":3,"file":"use-color-selector.cjs","names":["useI18n","useControllableState","useState","useId","useRef","useEyeDropper","useCallback","mergeProps","runKeyAction"],"sources":["../../../../src/components/color-selector/use-color-selector.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter, RequiredPropGetter } from \"../../core\"\nimport type { ColorFormat } from \"../../utils\"\nimport type { UseSaturationSliderProps } from \"../saturation-slider\"\nimport type { UseSliderProps } from \"../slider\"\nimport { useCallback, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useEyeDropper } from \"../../hooks/use-eye-dropper\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  calcFormat,\n  convertColor,\n  cx,\n  dataAttr,\n  handlerAll,\n  hsvTo,\n  isString,\n  parseToHsv,\n  runKeyAction,\n  sameColor,\n  useUpdateEffect,\n} from \"../../utils\"\n\ntype Hsva = [number, number, number, number]\n\nexport interface UseColorSelectorProps extends Omit<HTMLProps, \"onChange\"> {\n  /**\n   * The initial value of the color selector.\n   *\n   * @default fallbackValue\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the color selector will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The fallback value of the color selector.\n   *\n   * @default '#FFFFFF'\n   */\n  fallbackValue?: string\n  /**\n   * The format of the color selector.\n   * Automatically determines the format of `value` or `defaultValue`.\n   *\n   * @default 'hex'\n   */\n  format?: ColorFormat\n  /**\n   * If `true`, the color selector will be read only.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the color selector.\n   */\n  value?: string\n  /**\n   * The callback invoked when the value changes.\n   */\n  onChange?: (value: string) => void\n  /**\n   * The callback invoked when the value changes ends.\n   */\n  onChangeEnd?: (value: string) => void\n  /**\n   * The callback invoked when the value changes starts.\n   */\n  onChangeStart?: (value: string) => void\n}\n\nexport const useColorSelector = ({\n  fallbackValue = \"#FFFFFF\",\n  defaultValue = fallbackValue,\n  disabled = false,\n  format: formatProp,\n  readOnly = false,\n  value: valueProp,\n  onChange: onChangeProp,\n  onChangeEnd: onChangeEndProp,\n  onChangeStart: onChangeStartProp,\n  ...rest\n}: UseColorSelectorProps) => {\n  const { t } = useI18n(\"colorSelector\")\n  const format = formatProp ?? calcFormat(valueProp ?? defaultValue)\n  const alpha = format.endsWith(\"a\")\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeProp,\n  })\n  const [hsva, setHsva] = useState(parseToHsv(value, fallbackValue))\n  const [h, s, v, a] = hsva\n  const interactive = !(disabled || readOnly)\n  const swatchGroupLabelId = useId()\n  const activeRef = useRef(false)\n  const { supported: supportedEyeDropper, onOpen: onOpenEyeDropper } =\n    useEyeDropper()\n  const color = hsvTo([h, s, v, 1], fallbackValue)(\"hex\")\n\n  const onChange = useCallback(\n    (value: Hsva | string) => {\n      if (!interactive) return\n\n      if (isString(value)) {\n        setValue(convertColor(value, fallbackValue)(format))\n        setHsva(parseToHsv(value, fallbackValue))\n      } else {\n        setHsva(value)\n        setValue(hsvTo(value, fallbackValue)(format))\n      }\n    },\n    [fallbackValue, format, interactive, setValue],\n  )\n\n  const onChangeStart = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = true\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeStartProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeStartProp],\n  )\n\n  const onChangeEnd = useCallback(\n    ([h, s, v, a]: Hsva) => {\n      if (!interactive) return\n\n      activeRef.current = false\n\n      const value = hsvTo([h, s, v, a], fallbackValue)(format)\n\n      onChangeEndProp?.(value)\n    },\n    [interactive, fallbackValue, format, onChangeEndProp],\n  )\n\n  const onEyeDropperClick = useCallback(async () => {\n    if (!interactive) return\n\n    const result = await onOpenEyeDropper()\n\n    if (result?.sRGBHex) onChange(result.sRGBHex)\n  }, [interactive, onChange, onOpenEyeDropper])\n\n  useUpdateEffect(() => {\n    if (activeRef.current) return\n\n    if (valueProp) setHsva(parseToHsv(valueProp, fallbackValue))\n  }, [valueProp])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n        },\n        rest,\n        props,\n      )(),\n    [disabled, readOnly, rest],\n  )\n\n  const getSaturationSliderProps: PropGetter<UseSaturationSliderProps> =\n    useCallback(\n      (props = {}) => ({\n        disabled,\n        readOnly,\n        value: [h, s, v],\n        ...props,\n        onChange: handlerAll(props.onChange, ([h, s, v]) =>\n          onChange([h, s, v, a]),\n        ),\n        onChangeEnd: handlerAll(props.onChangeEnd, ([h, s, v]) =>\n          onChangeEnd([h, s, v, a]),\n        ),\n        onChangeStart: handlerAll(props.onChangeStart, ([h, s, v]) =>\n          onChangeStart([h, s, v, a]),\n        ),\n      }),\n      [disabled, readOnly, h, s, v, onChange, a, onChangeEnd, onChangeStart],\n    )\n\n  const getHueSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">\n  > = useCallback(\n    (props = {}) => ({\n      disabled,\n      readOnly,\n      value: h,\n      ...props,\n      onChange: handlerAll(props.onChange, (h) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (h) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (h) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [disabled, readOnly, h, onChange, s, v, a, onChangeEnd, onChangeStart],\n  )\n\n  const getAlphaSliderProps: PropGetter<\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\">,\n    undefined,\n    Omit<UseSliderProps, \"betweenThumbs\" | \"orientation\"> & { color: string }\n  > = useCallback(\n    (props = {}) => ({\n      color,\n      disabled,\n      readOnly,\n      value: a,\n      ...props,\n      onChange: handlerAll(props.onChange, (a) => onChange([h, s, v, a])),\n      onChangeEnd: handlerAll(props.onChangeEnd, (a) =>\n        onChangeEnd([h, s, v, a]),\n      ),\n      onChangeStart: handlerAll(props.onChangeStart, (a) =>\n        onChangeStart([h, s, v, a]),\n      ),\n    }),\n    [\n      color,\n      disabled,\n      readOnly,\n      a,\n      onChange,\n      h,\n      s,\n      v,\n      onChangeEnd,\n      onChangeStart,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-label\": t(\"Pick a color\"),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      hidden: !supportedEyeDropper,\n      role: \"button\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: onEyeDropperClick,\n          Space: onEyeDropperClick,\n        }),\n      ),\n    }),\n    [\n      disabled,\n      interactive,\n      onEyeDropperClick,\n      readOnly,\n      supportedEyeDropper,\n      t,\n    ],\n  )\n\n  const getColorSwatchGroupLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({\n      id: swatchGroupLabelId,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      \"aria-labelledby\": cx(ariaLabelledby, swatchGroupLabelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"listbox\",\n      ...props,\n    }),\n    [swatchGroupLabelId, disabled, readOnly],\n  )\n\n  const getColorSwatchItemProps: RequiredPropGetter<\n    \"div\",\n    { value: string },\n    HTMLProps & { color: string }\n  > = useCallback(\n    ({ value, ...props }) => ({\n      \"aria-disabled\": ariaAttr(!interactive),\n      \"aria-selected\": sameColor(value, color),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-readonly\": dataAttr(readOnly),\n      role: \"option\",\n      tabIndex: interactive ? 0 : -1,\n      ...props,\n      color: value,\n      onClick: handlerAll(props.onClick, () => onChange(value)),\n      onKeyDown: handlerAll(props.onKeyDown, (ev) =>\n        runKeyAction(ev, {\n          Enter: () => onChange(value),\n          Space: () => onChange(value),\n        }),\n      ),\n    }),\n    [disabled, color, interactive, onChange, readOnly],\n  )\n\n  return {\n    alpha,\n    format,\n    setValue,\n    value,\n    getAlphaSliderProps,\n    getColorSwatchGroupLabelProps,\n    getColorSwatchGroupProps,\n    getColorSwatchItemProps,\n    getEyeDropperProps,\n    getHueSliderProps,\n    getRootProps,\n    getSaturationSliderProps,\n    onChange,\n  }\n}\n\nexport type UseColorSelectorReturn = ReturnType<typeof useColorSelector>\n"],"mappings":"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"}

package/dist/cjs/components/color-swatch/color-swatch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;EAJN,UAAA,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
+{"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAY,SAAA,CAAS,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;EAJN,UAAA,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}

package/dist/cjs/components/data-list/data-list.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");
@@ -17,11 +18,14 @@ const { ComponentContext, PropsContext: DataListPropsContext, useComponentContex
 const DataListRoot = withProvider(({ style, children, items = [], descriptionProps, termProps, ...rest }) => {
 	const col = (0, react.useMemo)(() => {
 		let col = 0;
-		if (children) require_children.pickChildren(require_children.getValidChildren(children), DataListItem).forEach(({ props }) => {
-			const pickedChildren = require_children.pickChildren(require_children.getValidChildren(props.children), DataListTerm, DataListDescription);
-			col = Math.max(col, pickedChildren.length);
-		});
-		else items.forEach(({ description, term }) => {
+		if (children) {
+			const validChildren = require_children.getValidChildren(children);
+			require_children.pickChildren(validChildren, DataListItem).forEach(({ props }) => {
+				const validChildren = require_children.getValidChildren(props.children);
+				const pickedChildren = require_children.pickChildren(validChildren, DataListTerm, DataListDescription);
+				col = Math.max(col, pickedChildren.length);
+			});
+		} else items.forEach(({ description, term }) => {
 			const termCount = !term ? 0 : (0, require_utils_index.utils_exports.isArray)(term) ? term.length : 1;
 			const descriptionCount = !description ? 0 : (0, require_utils_index.utils_exports.isArray)(description) ? description.length : 1;
 			col = Math.max(col, termCount + descriptionCount);

package/dist/cjs/components/data-list/data-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-list.cjs","names":["createSlotComponent","dataListStyle","pickChildren","getValidChildren","styled","omitChildren","mergeProps"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm\n              key={index}\n              {...mergeProps(termProps, customTermProps)()}\n            >\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...mergeProps(descriptionProps, customDescriptionProps)()}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...mergeProps(descriptionProps, customDescriptionProps)()}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"data-list.cjs","names":["createSlotComponent","dataListStyle","useMemo","getValidChildren","pickChildren","styled","omitChildren","mergeProps"],"sources":["../../../../src/components/data-list/data-list.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { DataListStyle } from \"./data-list.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport {\n  getValidChildren,\n  isArray,\n  isEmpty,\n  omitChildren,\n  pickChildren,\n} from \"../../utils\"\nimport { dataListStyle } from \"./data-list.style\"\n\nexport interface DataListItem extends DataListItemProps {}\n\nexport interface DataListRootProps\n  extends HTMLStyledProps<\"dl\">, ThemeProps<DataListStyle> {\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: DataListItem[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\ninterface ComponentContext extends Pick<\n  DataListRootProps,\n  \"descriptionProps\" | \"termProps\"\n> {}\n\nconst {\n  ComponentContext,\n  PropsContext: DataListPropsContext,\n  useComponentContext,\n  usePropsContext: useDataListPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DataListRootProps, DataListStyle, ComponentContext>(\n  \"data-list\",\n  dataListStyle,\n)\n\nexport { DataListPropsContext, useDataListPropsContext }\n\n/**\n * `DataList` is used to display a list of data items.\n *\n * @see https://yamada-ui.com/docs/components/data-list\n */\nexport const DataListRoot = withProvider<\"dl\", DataListRootProps>(\n  ({ style, children, items = [], descriptionProps, termProps, ...rest }) => {\n    const col = useMemo(() => {\n      let col = 0\n\n      if (children) {\n        const validChildren = getValidChildren(children)\n        const dataListItems = pickChildren(validChildren, DataListItem)\n\n        dataListItems.forEach(({ props }) => {\n          const validChildren = getValidChildren(props.children)\n          const pickedChildren = pickChildren(\n            validChildren,\n            DataListTerm,\n            DataListDescription,\n          )\n\n          col = Math.max(col, pickedChildren.length)\n        })\n      } else {\n        items.forEach(({ description, term }) => {\n          const termCount = !term ? 0 : isArray(term) ? term.length : 1\n          const descriptionCount = !description\n            ? 0\n            : isArray(description)\n              ? description.length\n              : 1\n\n          col = Math.max(col, termCount + descriptionCount)\n        })\n      }\n\n      return col\n    }, [children, items])\n    const computedChildren = useMemo(\n      () =>\n        items.map((props, index) => <DataListItem key={index} {...props} />),\n      [items],\n    )\n    const context = useMemo(\n      () => ({\n        descriptionProps,\n        termProps,\n      }),\n      [descriptionProps, termProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.dl style={{ \"--col\": col, ...style }} {...rest}>\n          {children ?? computedChildren}\n        </styled.dl>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface DataListItemProps extends HTMLStyledProps {\n  /**\n   * The data list description to use.\n   */\n  description?: ReactNode | ReactNode[]\n  /**\n   * The data list term to use.\n   */\n  term?: ReactNode | ReactNode[]\n  /**\n   * The props for the data list description component.\n   */\n  descriptionProps?: DataListDescriptionProps\n  /**\n   * The props for the data list term component.\n   */\n  termProps?: DataListTermProps\n}\n\nexport const DataListItem = withContext<\"div\", DataListItemProps>(\n  ({\n    children,\n    description,\n    term,\n    descriptionProps: customDescriptionProps,\n    termProps: customTermProps,\n    ...rest\n  }) => {\n    const { descriptionProps, termProps } = useComponentContext()\n\n    const [omittedChildren, customTerms, customDescriptions] = useMemo(() => {\n      const validChildren = getValidChildren(children)\n\n      if (isEmpty(validChildren)) return [children]\n\n      const customTerms = pickChildren(validChildren, DataListTerm)\n      const customDescriptions = pickChildren(\n        validChildren,\n        DataListDescription,\n      )\n      const omittedChildren = omitChildren(\n        validChildren,\n        DataListTerm,\n        DataListDescription,\n      )\n\n      return [omittedChildren, customTerms, customDescriptions] as const\n    }, [children])\n\n    return (\n      <styled.div {...rest}>\n        {!isEmpty(customTerms) ? (\n          customTerms\n        ) : isArray(term) ? (\n          term.map((item, index) => (\n            <DataListTerm\n              key={index}\n              {...mergeProps(termProps, customTermProps)()}\n            >\n              {item}\n            </DataListTerm>\n          ))\n        ) : (\n          <DataListTerm {...mergeProps(termProps, customTermProps)()}>\n            {term}\n          </DataListTerm>\n        )}\n\n        {!isEmpty(customDescriptions) ? (\n          customDescriptions\n        ) : isArray(description) ? (\n          description.map((item, index) => (\n            <DataListDescription\n              key={index}\n              {...mergeProps(descriptionProps, customDescriptionProps)()}\n            >\n              {item}\n            </DataListDescription>\n          ))\n        ) : (\n          <DataListDescription\n            {...mergeProps(descriptionProps, customDescriptionProps)()}\n          >\n            {description}\n          </DataListDescription>\n        )}\n\n        {omittedChildren}\n      </styled.div>\n    )\n  },\n  \"item\",\n)()\n\nexport interface DataListTermProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const DataListTerm = withContext<\"dt\", DataListTermProps>(\"dt\", \"term\")()\n\nexport interface DataListDescriptionProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const DataListDescription = withContext<\"dd\", DataListDescriptionProps>(\n  \"dd\",\n  \"description\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/date-picker/date-picker.cjs

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");
@@ -96,7 +97,8 @@ const DatePicker = withProvider((props) => {
 		})
 	});
 }, "root", { transferProps: ["size"] })((props) => {
-	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
+	const context = require_input.useInputPropsContext();
+	return require_props.mergeProps(context, props)();
 });
 const DatePickerField = withContext("div", "field")({ "data-group-propagate": "" }, ({ children, ...rest }) => {
 	const { range, separator, getInputProps, inputProps } = useComponentContext();

package/dist/cjs/components/date-picker/date-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.cjs","names":["createSlotComponent","datePickerStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useDatePicker","useInputBorder","mergeProps","useInputPropsContext","useFieldSizing","styled","mergeRefs","CalendarIcon"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker({ ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\n\n    return (\n      <ComponentContext value={componentContext}>\n        <Popover.Root {...mergedPopoverProps}>\n          <InputGroup.Root\n            {...mergeProps(\n              { className, css, colorScheme },\n              getRootProps(groupItemProps),\n              rootProps,\n            )()}\n          >\n            <Popover.Trigger>\n              <DatePickerField {...getFieldProps({ ...varProps })}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range)\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    else\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}
+{"version":3,"file":"date-picker.cjs","names":["createSlotComponent","datePickerStyle","XIcon","useGroupItemProps","usePopoverStyleProps","useDatePicker","useMemo","useInputBorder","mergeProps","useInputPropsContext","useFieldSizing","styled","mergeRefs","CalendarIcon"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { UsePopoverStyleProps, UsePopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover, usePopoverStyleProps } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends\n    Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n>\n  extends\n    Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    Merge<UseDatePickerProps<Multiple, Range>, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Popover.RootProps[\"placement\"]\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const popoverStyleProps = usePopoverStyleProps(rest)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker({ ...rest, ...popoverStyleProps })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\n\n    return (\n      <ComponentContext value={componentContext}>\n        <Popover.Root {...mergedPopoverProps}>\n          <InputGroup.Root\n            {...mergeProps(\n              { className, css, colorScheme },\n              getRootProps(groupItemProps),\n              rootProps,\n            )()}\n          >\n            <Popover.Trigger>\n              <DatePickerField {...getFieldProps({ ...varProps })}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range)\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    else\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}