@yamada-ui/color-picker 2.0.0-next-20240409133350 → 2.0.0-next-20240513040311

package/dist/{chunk-VO2YWPCO.mjs → chunk-5CQI26IR.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   ColorSelectorEyeDropper
-} from "./chunk-JLVD63SI.mjs";
+} from "./chunk-NMHU434U.mjs";
 import {
   ColorSelectorSliders
 } from "./chunk-JFTUHZYL.mjs";
@@ -72,4 +72,4 @@ var ColorSelectorBody = forwardRef(
 export {
   ColorSelectorBody
 };
-//# sourceMappingURL=chunk-VO2YWPCO.mjs.map
+//# sourceMappingURL=chunk-5CQI26IR.mjs.map

package/dist/{chunk-DSAPB5E3.mjs → chunk-NGSPXJBL.mjs}

@@ -33,7 +33,7 @@ var ColorSelectorSwatches = forwardRef(
       swatchesLabel ? /* @__PURE__ */ jsx(
         ui.p,
         {
-          className: "ui-color-selector__swatches__label",
+          className: "ui-color-selector__swatches-label",
           __css: { ...styles.swatchesLabel },
           children: swatchesLabel
         }
@@ -67,4 +67,4 @@ var ColorSelectorSwatches = forwardRef(
 export {
   ColorSelectorSwatches
 };
-//# sourceMappingURL=chunk-DSAPB5E3.mjs.map
+//# sourceMappingURL=chunk-NGSPXJBL.mjs.map

package/dist/{chunk-DSAPB5E3.mjs.map → chunk-NGSPXJBL.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/color-selector-swatches.tsx"],"sourcesContent":["import { forwardRef, ui } from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps, Token } from \"@yamada-ui/core\"\nimport { cx, replaceObject } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { ColorSwatch } from \"./color-swatch\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ntype ColorSelectorSwatchesOptions = {\n  /**\n   * The swatches label to use.\n   */\n  swatchesLabel?: ReactNode\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  swatches?: string[]\n  /**\n   * Number of swatches grid columns.\n   *\n   * @default 7\n   */\n  swatchesColumns?: Token<number>\n  /**\n   * Props for the color swatch component.\n   */\n  swatchProps?: ColorSwatchProps\n  /**\n   * Props for the swatches container element.\n   */\n  swatchesContainerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n}\n\nexport type ColorSelectorSwatchesProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n  ColorSelectorSwatchesOptions\n\nexport const ColorSelectorSwatches = forwardRef<\n  ColorSelectorSwatchesProps,\n  \"div\"\n>(\n  (\n    {\n      className,\n      swatchesLabel,\n      swatches,\n      swatchesContainerProps,\n      swatchProps,\n      swatchesColumns,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { getSwatchProps, readOnly, styles } = useColorSelectorContext()\n\n    const css: CSSUIObject = {\n      display: \"grid\",\n      gridTemplateColumns: replaceObject(swatchesColumns, (value) =>\n        value != null ? `repeat(${value}, minmax(0, 1fr))` : undefined,\n      ) as CSSUIObject[\"gridTemplateColumns\"],\n      ...styles.swatches,\n    }\n\n    return swatches?.length ? (\n      <ui.div {...swatchesContainerProps}>\n        {swatchesLabel ? (\n          <ui.p\n            className=\"ui-color-selector__swatches__label\"\n            __css={{ ...styles.swatchesLabel }}\n          >\n            {swatchesLabel}\n          </ui.p>\n        ) : null}\n\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-color-selector__swatches\", className)}\n          __css={css}\n          {...rest}\n        >\n          {swatches.map((color) => (\n            <ColorSwatch\n              as=\"button\"\n              key={color}\n              __css={{\n                boxSize: \"100%\",\n                pointerEvents: readOnly ? \"none\" : undefined,\n                ...styles.swatch,\n              }}\n              {...getSwatchProps({ color, ...swatchProps })}\n            />\n          ))}\n        </ui.div>\n      </ui.div>\n    ) : null\n  },\n)\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,UAAU;AAE/B,SAAS,IAAI,qBAAqB;AA8D5B,SAEI,KAFJ;AA3BC,IAAM,wBAAwB;AAAA,EAInC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,gBAAgB,UAAU,OAAO,IAAI,wBAAwB;AAErE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,qBAAqB;AAAA,QAAc;AAAA,QAAiB,CAAC,UACnD,SAAS,OAAO,UAAU,KAAK,sBAAsB;AAAA,MACvD;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,YAAO,qCAAU,UACf,qBAAC,GAAG,KAAH,EAAQ,GAAG,wBACT;AAAA,sBACC;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,GAAG,OAAO,cAAc;AAAA,UAEhC;AAAA;AAAA,MACH,IACE;AAAA,MAEJ;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC;AAAA,UACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,UACtD,OAAO;AAAA,UACN,GAAG;AAAA,UAEH,mBAAS,IAAI,CAAC,UACb;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cAEH,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,eAAe,WAAW,SAAS;AAAA,gBACnC,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,eAAe,EAAE,OAAO,GAAG,YAAY,CAAC;AAAA;AAAA,YANvC;AAAA,UAOP,CACD;AAAA;AAAA,MACH;AAAA,OACF,IACE;AAAA,EACN;AACF;","names":[]}
+{"version":3,"sources":["../src/color-selector-swatches.tsx"],"sourcesContent":["import { forwardRef, ui } from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps, Token } from \"@yamada-ui/core\"\nimport { cx, replaceObject } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { ColorSwatch } from \"./color-swatch\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\ntype ColorSelectorSwatchesOptions = {\n  /**\n   * The swatches label to use.\n   */\n  swatchesLabel?: ReactNode\n  /**\n   * An array of colors in one of the supported formats.\n   * Used to render swatches list below the color selector.\n   */\n  swatches?: string[]\n  /**\n   * Number of swatches grid columns.\n   *\n   * @default 7\n   */\n  swatchesColumns?: Token<number>\n  /**\n   * Props for the color swatch component.\n   */\n  swatchProps?: ColorSwatchProps\n  /**\n   * Props for the swatches container element.\n   */\n  swatchesContainerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n}\n\nexport type ColorSelectorSwatchesProps = Omit<HTMLUIProps<\"div\">, \"children\"> &\n  ColorSelectorSwatchesOptions\n\nexport const ColorSelectorSwatches = forwardRef<\n  ColorSelectorSwatchesProps,\n  \"div\"\n>(\n  (\n    {\n      className,\n      swatchesLabel,\n      swatches,\n      swatchesContainerProps,\n      swatchProps,\n      swatchesColumns,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { getSwatchProps, readOnly, styles } = useColorSelectorContext()\n\n    const css: CSSUIObject = {\n      display: \"grid\",\n      gridTemplateColumns: replaceObject(swatchesColumns, (value) =>\n        value != null ? `repeat(${value}, minmax(0, 1fr))` : undefined,\n      ) as CSSUIObject[\"gridTemplateColumns\"],\n      ...styles.swatches,\n    }\n\n    return swatches?.length ? (\n      <ui.div {...swatchesContainerProps}>\n        {swatchesLabel ? (\n          <ui.p\n            className=\"ui-color-selector__swatches-label\"\n            __css={{ ...styles.swatchesLabel }}\n          >\n            {swatchesLabel}\n          </ui.p>\n        ) : null}\n\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-color-selector__swatches\", className)}\n          __css={css}\n          {...rest}\n        >\n          {swatches.map((color) => (\n            <ColorSwatch\n              as=\"button\"\n              key={color}\n              __css={{\n                boxSize: \"100%\",\n                pointerEvents: readOnly ? \"none\" : undefined,\n                ...styles.swatch,\n              }}\n              {...getSwatchProps({ color, ...swatchProps })}\n            />\n          ))}\n        </ui.div>\n      </ui.div>\n    ) : null\n  },\n)\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,UAAU;AAE/B,SAAS,IAAI,qBAAqB;AA8D5B,SAEI,KAFJ;AA3BC,IAAM,wBAAwB;AAAA,EAInC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,gBAAgB,UAAU,OAAO,IAAI,wBAAwB;AAErE,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,qBAAqB;AAAA,QAAc;AAAA,QAAiB,CAAC,UACnD,SAAS,OAAO,UAAU,KAAK,sBAAsB;AAAA,MACvD;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,YAAO,qCAAU,UACf,qBAAC,GAAG,KAAH,EAAQ,GAAG,wBACT;AAAA,sBACC;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,GAAG,OAAO,cAAc;AAAA,UAEhC;AAAA;AAAA,MACH,IACE;AAAA,MAEJ;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC;AAAA,UACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,UACtD,OAAO;AAAA,UACN,GAAG;AAAA,UAEH,mBAAS,IAAI,CAAC,UACb;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cAEH,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,eAAe,WAAW,SAAS;AAAA,gBACnC,GAAG,OAAO;AAAA,cACZ;AAAA,cACC,GAAG,eAAe,EAAE,OAAO,GAAG,YAAY,CAAC;AAAA;AAAA,YANvC;AAAA,UAOP,CACD;AAAA;AAAA,MACH;AAAA,OACF,IACE;AAAA,EACN;AACF;","names":[]}

package/dist/{chunk-JLVD63SI.mjs → chunk-NMHU434U.mjs}

@@ -25,7 +25,7 @@ var ColorSelectorEyeDropper = forwardRef(({ className, ...rest }, ref) => {
       size,
       __css: css,
       ...getEyeDropperProps(rest, ref),
-      children: /* @__PURE__ */ jsx(EyeDropperIcon, { className: "ui-color-selector__eye-dropper__icon" })
+      children: /* @__PURE__ */ jsx(EyeDropperIcon, { className: "ui-color-selector__eye-dropper-icon" })
     }
   );
 });
@@ -53,4 +53,4 @@ export {
   ColorSelectorEyeDropper,
   EyeDropperIcon
 };
-//# sourceMappingURL=chunk-JLVD63SI.mjs.map
+//# sourceMappingURL=chunk-NMHU434U.mjs.map

package/dist/chunk-NMHU434U.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color-selector-eye-dropper.tsx"],"sourcesContent":["import type { IconButtonProps } from \"@yamada-ui/button\"\nimport { IconButton } from \"@yamada-ui/button\"\nimport { forwardRef } from \"@yamada-ui/core\"\nimport type { CSSUIObject } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport { Icon } from \"@yamada-ui/icon\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { FC } from \"react\"\nimport { useColorSelectorContext } from \"./use-color-selector\"\n\nexport type ColorSelectorEyeDropperProps = IconButtonProps\n\nexport const ColorSelectorEyeDropper = forwardRef<\n  ColorSelectorEyeDropperProps,\n  \"button\"\n>(({ className, ...rest }, ref) => {\n  const { getEyeDropperProps, readOnly, size, styles } =\n    useColorSelectorContext()\n\n  const css: CSSUIObject = {\n    h: \"auto\",\n    minW: \"auto\",\n    pointerEvents: readOnly ? \"none\" : undefined,\n    ...styles.eyeDropper,\n  }\n\n  return (\n    <IconButton\n      className={cx(\"ui-color-selector__eye-dropper\", className)}\n      variant=\"outline\"\n      size={size}\n      __css={css}\n      {...getEyeDropperProps(rest, ref)}\n    >\n      <EyeDropperIcon className=\"ui-color-selector__eye-dropper-icon\" />\n    </IconButton>\n  )\n})\n\nexport const EyeDropperIcon: FC<IconProps> = ({ ...rest }) => {\n  return (\n    <Icon\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      {...rest}\n    >\n      <path d=\"m2 22 1-1h3l9-9\" />\n      <path d=\"M3 21v-3l9-9\" />\n      <path d=\"m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z\" />\n    </Icon>\n  )\n}\n"],"mappings":";;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,UAAU;AA4Bb,cAOF,YAPE;AAtBC,IAAM,0BAA0B,WAGrC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AACjC,QAAM,EAAE,oBAAoB,UAAU,MAAM,OAAO,IACjD,wBAAwB;AAE1B,QAAM,MAAmB;AAAA,IACvB,GAAG;AAAA,IACH,MAAM;AAAA,IACN,eAAe,WAAW,SAAS;AAAA,IACnC,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,kCAAkC,SAAS;AAAA,MACzD,SAAQ;AAAA,MACR;AAAA,MACA,OAAO;AAAA,MACN,GAAG,mBAAmB,MAAM,GAAG;AAAA,MAEhC,8BAAC,kBAAe,WAAU,uCAAsC;AAAA;AAAA,EAClE;AAEJ,CAAC;AAEM,IAAM,iBAAgC,CAAC,EAAE,GAAG,KAAK,MAAM;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACd,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,GAAE,mBAAkB;AAAA,QAC1B,oBAAC,UAAK,GAAE,gBAAe;AAAA,QACvB,oBAAC,UAAK,GAAE,gGAA+F;AAAA;AAAA;AAAA,EACzG;AAEJ;","names":[]}

package/dist/{chunk-MVCNJELN.mjs → chunk-ONIOGROX.mjs}

@@ -3,13 +3,13 @@ import {
   ColorPickerProvider,
   useColorPicker,
   useColorPickerContext
-} from "./chunk-CR3JRFXA.mjs";
+} from "./chunk-SBN7FEOE.mjs";
 import {
   ColorSelector
-} from "./chunk-VBH7AXVT.mjs";
+} from "./chunk-ZUPKUHBV.mjs";
 import {
   EyeDropperIcon
-} from "./chunk-JLVD63SI.mjs";
+} from "./chunk-NMHU434U.mjs";
 import {
   ColorSwatch
 } from "./chunk-UQWAM6TA.mjs";
@@ -23,12 +23,7 @@ import {
 } from "@yamada-ui/core";
 import { Popover, PopoverContent, PopoverTrigger } from "@yamada-ui/popover";
 import { Portal } from "@yamada-ui/portal";
-import {
-  cx,
-  getValidChildren,
-  isValidElement,
-  omitObject
-} from "@yamada-ui/utils";
+import { cx, getValidChildren, isValidElement } from "@yamada-ui/utils";
 import { cloneElement } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ColorPicker = forwardRef(
@@ -61,7 +56,7 @@ var ColorPicker = forwardRef(
       channelProps,
       portalProps = { isDisabled: true },
       ...computedProps
-    } = omitThemeProps(omitObject(mergedProps, ["withSwatch"]));
+    } = omitThemeProps(mergedProps, ["withSwatch"]);
     const {
       allowInput,
       eyeDropperSupported,
@@ -223,7 +218,7 @@ var ColorPickerEyeDropper = forwardRef(
         className: cx("ui-color-picker__eye-dropper", className),
         __css: css,
         ...rest,
-        children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(EyeDropperIcon, { className: "ui-color-picker__eye-dropper__icon" })
+        children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(EyeDropperIcon, { className: "ui-color-picker__eye-dropper-icon" })
       }
     );
   }
@@ -232,4 +227,4 @@ var ColorPickerEyeDropper = forwardRef(
 export {
   ColorPicker
 };
-//# sourceMappingURL=chunk-MVCNJELN.mjs.map
+//# sourceMappingURL=chunk-ONIOGROX.mjs.map

package/dist/chunk-ONIOGROX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color-picker.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal, type PortalProps } from \"@yamada-ui/portal\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport { ColorSelector } from \"./color-selector\"\nimport { EyeDropperIcon } from \"./color-selector-eye-dropper\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport { ColorSwatch } from \"./color-swatch\"\nimport type { UseColorPickerProps } from \"./use-color-picker\"\nimport {\n  ColorPickerProvider,\n  useColorPicker,\n  useColorPickerContext,\n} from \"./use-color-picker\"\n\ntype ColorPickerOptions = {\n  /**\n   * If `true`, display the color swatch component.\n   *\n   * @default true\n   */\n  withSwatch?: boolean\n  /**\n   * If `true`, display the eye dropper component.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * Props for color picker container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n  /**\n   * Props for color picker element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for color swatch component.\n   */\n  swatchProps?: ColorPickerSwatchProps\n  /**\n   * Props for color eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ isDisabled: true }'\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport type ColorPickerProps = ThemeProps<\"ColorPicker\"> &\n  UseColorPickerProps &\n  ColorPickerOptions &\n  Pick<\n    ColorSelectorProps,\n    | \"saturationSliderRef\"\n    | \"saturationSliderProps\"\n    | \"swatchesProps\"\n    | \"hueSliderRef\"\n    | \"hueSliderProps\"\n    | \"alphaSliderRef\"\n    | \"alphaSliderProps\"\n    | \"channelsProps\"\n    | \"channelProps\"\n    | \"children\"\n  >\n\n/**\n * `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.\n *\n * @see Docs https://yamada-ui.com/components/forms/color-picker\n */\nexport const ColorPicker = forwardRef<ColorPickerProps, \"input\">(\n  ({ withSwatch = true, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"ColorPicker\", {\n      withSwatch,\n      ...props,\n    })\n    let {\n      className,\n      children,\n      withEyeDropper = true,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      containerProps,\n      inputProps,\n      swatchProps,\n      eyeDropperProps,\n      saturationSliderRef,\n      saturationSliderProps,\n      swatchesProps,\n      hueSliderRef,\n      hueSliderProps,\n      alphaSliderRef,\n      alphaSliderProps,\n      channelsProps,\n      channelProps,\n      portalProps = { isDisabled: true },\n      ...computedProps\n    } = omitThemeProps(mergedProps, [\"withSwatch\"])\n    const {\n      allowInput,\n      eyeDropperSupported,\n      getPopoverProps,\n      getContainerProps,\n      getFieldProps,\n      getSelectorProps,\n      getEyeDropperProps,\n      ...rest\n    } = useColorPicker(computedProps)\n\n    h ??= height\n    minH ??= minHeight\n\n    const css: CSSUIObject = {\n      w: \"100%\",\n      h: \"fit-content\",\n      color,\n      ...styles.container,\n    }\n\n    return (\n      <ColorPickerProvider value={{ styles, ...rest }}>\n        <Popover {...getPopoverProps()}>\n          <ui.div\n            className={cx(\"ui-color-picker\", className)}\n            __css={css}\n            {...getContainerProps(containerProps)}\n          >\n            <ui.div\n              className=\"ui-color-picker__inner\"\n              __css={{\n                position: \"relative\",\n                cursor: !allowInput ? \"pointer\" : undefined,\n                ...styles.inner,\n              }}\n            >\n              {withSwatch ? <ColorPickerSwatch {...swatchProps} /> : null}\n\n              <PopoverTrigger>\n                <ColorPickerField\n                  h={h}\n                  minH={minH}\n                  {...getFieldProps(inputProps, ref)}\n                />\n              </PopoverTrigger>\n\n              {eyeDropperSupported && withEyeDropper ? (\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              ) : null}\n            </ui.div>\n\n            <Portal {...portalProps}>\n              <PopoverContent\n                className=\"ui-color-picker__popover\"\n                __css={{ ...styles.list }}\n              >\n                <ColorSelector\n                  className=\"ui-color-picker__picker\"\n                  {...getSelectorProps({\n                    saturationSliderRef,\n                    saturationSliderProps,\n                    swatchesProps,\n                    hueSliderRef,\n                    hueSliderProps,\n                    alphaSliderRef,\n                    alphaSliderProps,\n                    channelsProps,\n                    channelProps,\n                  })}\n                >\n                  {children}\n                </ColorSelector>\n              </PopoverContent>\n            </Portal>\n          </ui.div>\n        </Popover>\n      </ColorPickerProvider>\n    )\n  },\n)\n\ntype ColorPickerFieldProps = HTMLUIProps<\"input\">\n\nconst ColorPickerField = forwardRef<ColorPickerFieldProps, \"input\">(\n  ({ className, h, minH, ...rest }, ref) => {\n    const { styles } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      ps: \"2rem\",\n      pe: \"2rem\",\n      h,\n      minH,\n      display: \"flex\",\n      alignItems: \"center\",\n      ...styles.field,\n    }\n\n    return (\n      <ui.input\n        ref={ref}\n        className={cx(\"ui-color-picker__field\", className)}\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\ntype ColorPickerSwatchProps = ColorSwatchProps\n\nconst ColorPickerSwatch = forwardRef<ColorPickerSwatchProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { value, styles } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      zIndex: 2,\n      ...styles.swatch,\n    }\n\n    return (\n      <ColorSwatch\n        ref={ref}\n        className={cx(\"ui-color-picker__swatch\", className)}\n        __css={css}\n        color={value}\n        isRounded\n        {...rest}\n      />\n    )\n  },\n)\n\ntype ColorPickerEyeDropperProps = HTMLUIProps<\"button\">\n\nconst ColorPickerEyeDropper = forwardRef<ColorPickerEyeDropperProps, \"button\">(\n  ({ className, children, ...rest }, ref) => {\n    const { styles } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      zIndex: 1,\n      ...styles.eyeDropper,\n    }\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) =>\n      cloneElement(child, {\n        focusable: false,\n        \"aria-hidden\": true,\n        style: {\n          maxWidth: \"1em\",\n          maxHeight: \"1em\",\n          color: \"currentColor\",\n        },\n      }),\n    )\n\n    return (\n      <ui.button\n        ref={ref}\n        className={cx(\"ui-color-picker__eye-dropper\", className)}\n        __css={css}\n        {...rest}\n      >\n        {isValidElement(children) ? (\n          cloneChildren\n        ) : (\n          <EyeDropperIcon className=\"ui-color-picker__eye-dropper-icon\" />\n        )}\n      </ui.button>\n    )\n  },\n)\n"],"mappings":"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","names":[]}

package/dist/{chunk-CR3JRFXA.mjs → chunk-SBN7FEOE.mjs}

@@ -3,8 +3,8 @@
 // src/use-color-picker.ts
 import { layoutStyleProperties } from "@yamada-ui/core";
 import {
-  useFormControlProps,
-  getFormControlProperties
+  formControlProperties,
+  useFormControlProps
 } from "@yamada-ui/form-control";
 import { popoverProperties } from "@yamada-ui/popover";
 import { useControllableState } from "@yamada-ui/use-controllable-state";
@@ -65,9 +65,9 @@ var useColorPicker = ({
 }) => {
   var _a;
   rest = useFormControlProps(rest);
-  const formControlProps = pickObject(
+  const { "aria-readonly": _ariaReadonly, ...formControlProps } = pickObject(
     rest,
-    getFormControlProperties({ omit: ["aria-readonly"] })
+    formControlProperties
   );
   const { disabled, readOnly } = formControlProps;
   const [containerProps, inputProps] = splitObject(
@@ -354,4 +354,4 @@ export {
   useColorPickerContext,
   useColorPicker
 };
-//# sourceMappingURL=chunk-CR3JRFXA.mjs.map
+//# sourceMappingURL=chunk-SBN7FEOE.mjs.map

package/dist/chunk-SBN7FEOE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-color-picker.ts"],"sourcesContent":["import { layoutStyleProperties } from \"@yamada-ui/core\"\nimport type {\n  UIPropGetter,\n  CSSUIObject,\n  ThemeProps,\n  HTMLUIProps,\n} from \"@yamada-ui/core\"\nimport {\n  formControlProperties,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { popoverProperties, type PopoverProps } from \"@yamada-ui/popover\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { useDisclosure } from \"@yamada-ui/use-disclosure\"\nimport { useEyeDropper } from \"@yamada-ui/use-eye-dropper\"\nimport { useOutsideClick } from \"@yamada-ui/use-outside-click\"\nimport type { ColorFormat, Dict } from \"@yamada-ui/utils\"\nimport {\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n  splitObject,\n  omitObject,\n  getEventRelatedTarget,\n  isContains,\n  convertColor,\n  calcFormat,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from \"react\"\nimport { useCallback, useRef, useState } from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport type { UseColorSelectorBaseProps } from \"./use-color-selector\"\n\ntype ColorSelectorThemeProps = ThemeProps<\"ColorSelector\">\n\ntype ColorPickerContext = { value: string; styles: Record<string, CSSUIObject> }\n\nexport const [ColorPickerProvider, useColorPickerContext] =\n  createContext<ColorPickerContext>({\n    name: \"ColorPickerContext\",\n    errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in \"<ColorPicker />\"`,\n  })\n\ntype UseColorPickerOptions = {\n  /**\n   * The initial value of the color selector.\n   */\n  defaultColor?: string\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * A callback function to format the input entered.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * If `true`, display the result component.\n   *\n   * @default false\n   */\n  withResult?: boolean\n  /**\n   * If `true` display the eye dropper component.\n   *\n   * @default false\n   */\n  withColorSelectorEyeDropper?: boolean\n  /**\n   * If `true`, the color swatch will be closed when value is selected.\n   */\n  closeOnSelectSwatch?: boolean\n  /**\n   * Variant for the color selector component.\n   */\n  colorSelectorVariant?: ColorSelectorThemeProps[\"variant\"]\n  /**\n   * Size for the color selector component.\n   */\n  colorSelectorSize?: ColorSelectorThemeProps[\"size\"]\n  /**\n   * ColorScheme for the color selector component.\n   */\n  colorSelectorColorScheme?: ColorSelectorThemeProps[\"colorScheme\"]\n  /**\n   * Props for color selector component.\n   */\n  colorSelectorProps?: ColorSelectorProps\n}\n\nexport type UseColorPickerProps = Omit<\n  HTMLUIProps<\"input\">,\n  \"size\" | \"offset\" | \"value\" | \"defaultValue\" | \"onChange\" | \"children\"\n> &\n  Omit<UseColorSelectorBaseProps, \"id\" | \"name\"> &\n  Omit<\n    PopoverProps,\n    | \"initialFocusRef\"\n    | \"closeOnButton\"\n    | \"trigger\"\n    | \"autoFocus\"\n    | \"restoreFocus\"\n    | \"openDelay\"\n    | \"closeDelay\"\n    | \"children\"\n  > &\n  Pick<\n    ColorSelectorProps,\n    | \"withPicker\"\n    | \"withChannel\"\n    | \"swatchesLabel\"\n    | \"swatches\"\n    | \"swatchesColumns\"\n  > &\n  UseColorPickerOptions\n\nexport const useColorPicker = ({\n  value: valueProp,\n  defaultValue,\n  fallbackValue,\n  defaultColor,\n  onChange: onChangeProp,\n  onChangeStart,\n  onChangeEnd,\n  onSwatchClick,\n  formatInput = (value) => value,\n  closeOnBlur = true,\n  closeOnEsc = true,\n  placement = \"bottom-start\",\n  duration = 0.2,\n  isOpen: isOpenProp,\n  defaultIsOpen,\n  onOpen: onOpenProp,\n  onClose: onCloseProp,\n  allowInput = true,\n  closeOnSelectSwatch,\n  format,\n  swatchesLabel,\n  swatches,\n  swatchesColumns,\n  withPicker,\n  withChannel,\n  withResult = false,\n  withColorSelectorEyeDropper = false,\n  colorSelectorVariant,\n  colorSelectorSize,\n  colorSelectorColorScheme,\n  ...rest\n}: UseColorPickerProps) => {\n  rest = useFormControlProps(rest)\n\n  const { \"aria-readonly\": _ariaReadonly, ...formControlProps } = pickObject(\n    rest,\n    formControlProperties,\n  )\n  const { disabled, readOnly } = formControlProps\n  const [containerProps, inputProps] = splitObject<Dict, string>(\n    omitObject(rest, [...popoverProperties]),\n    layoutStyleProperties,\n  )\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const fieldRef = useRef<HTMLInputElement>(null)\n\n  const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } =\n    useEyeDropper()\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange: onChangeProp,\n  })\n  const formatRef = useRef<ColorFormat>(\n    format ?? calcFormat(value ?? defaultColor ?? \"\"),\n  )\n  const isInputFocused = useRef<boolean>(false)\n  const [inputValue, setInputValue] = useState<string>(value ?? \"\")\n  const {\n    isOpen,\n    onOpen: onInternalOpen,\n    onClose: onInternalClose,\n  } = useDisclosure({\n    isOpen: isOpenProp,\n    defaultIsOpen,\n    onOpen: onOpenProp,\n    onClose: onCloseProp,\n  })\n  const isColorSelectorFull = colorSelectorSize === \"full\"\n\n  const onOpen = useCallback(() => {\n    if (disabled || readOnly) return\n\n    onInternalOpen()\n  }, [onInternalOpen, disabled, readOnly])\n\n  const onClose = useCallback(() => {\n    if (!isOpen) return\n\n    const next = convertColor(value, fallbackValue)(formatRef.current)\n\n    setValue((prev) => (!next || prev === next ? prev : next))\n    setInputValue(formatInput(next ?? \"\"))\n\n    onInternalClose()\n  }, [\n    formatRef,\n    isOpen,\n    setValue,\n    onInternalClose,\n    value,\n    formatInput,\n    setInputValue,\n    fallbackValue,\n  ])\n\n  const onContainerClick = useCallback(() => {\n    if (isOpen) return\n\n    onOpen()\n  }, [isOpen, onOpen])\n\n  const onInputFocus = useCallback(() => {\n    isInputFocused.current = true\n\n    if (isOpen) return\n\n    onOpen()\n  }, [isOpen, onOpen])\n\n  const onInputBlur = useCallback(() => {\n    isInputFocused.current = false\n  }, [])\n\n  const onContainerBlur = useCallback(\n    (ev: FocusEvent<HTMLDivElement>) => {\n      const relatedTarget = getEventRelatedTarget(ev)\n\n      if (isContains(containerRef.current, relatedTarget)) return\n\n      if (!closeOnBlur) return\n\n      if (isOpen) onClose()\n    },\n    [closeOnBlur, isOpen, onClose],\n  )\n\n  const onInputKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLInputElement>) => {\n      if (ev.key === \" \") ev.key = ev.code\n\n      if (disabled || readOnly) return\n\n      const actions: Record<string, Function | undefined> = {\n        Space: !isOpen ? onOpen : undefined,\n        Enter: !isOpen ? onOpen : undefined,\n        Escape: closeOnEsc ? onClose : undefined,\n      }\n\n      const action = actions[ev.key]\n\n      if (!action) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n      action()\n    },\n    [disabled, readOnly, isOpen, onOpen, closeOnEsc, onClose],\n  )\n\n  const onInputChange = useCallback(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      const value = ev.target.value\n\n      setInputValue(formatInput(value))\n      setValue(value)\n    },\n    [setInputValue, formatInput, setValue],\n  )\n\n  const onColorSelectorChange = useCallback(\n    (value: string) => {\n      setValue(value)\n\n      setTimeout(() => {\n        if (!isInputFocused.current) setInputValue(formatInput(value))\n      })\n    },\n    [setValue, formatInput],\n  )\n\n  const onEyeDropperClick = useCallback(\n    async (ev: MouseEvent<HTMLButtonElement>) => {\n      ev.preventDefault()\n      ev.stopPropagation()\n\n      try {\n        const { sRGBHex } = (await onEyeDropperOpen()) ?? {}\n\n        if (!sRGBHex) return\n\n        onColorSelectorChange(sRGBHex)\n        onChangeEnd?.(sRGBHex)\n      } catch {}\n    },\n    [onEyeDropperOpen, onColorSelectorChange, onChangeEnd],\n  )\n\n  useOutsideClick({\n    ref: containerRef,\n    handler: onClose,\n    enabled: isOpen && closeOnBlur,\n  })\n\n  useUpdateEffect(() => {\n    if (!format || !value) return\n\n    formatRef.current = format\n\n    const nextValue = convertColor(value, fallbackValue)(format)\n\n    if (!nextValue) return\n\n    setInputValue(formatInput(nextValue))\n    setValue(nextValue)\n  }, [format])\n\n  useUpdateEffect(() => {\n    if (isInputFocused.current || !valueProp) return\n\n    setInputValue(formatInput(valueProp))\n  }, [valueProp])\n\n  const getPopoverProps = useCallback(\n    (props?: PopoverProps): PopoverProps => ({\n      matchWidth: isColorSelectorFull,\n      ...rest,\n      ...props,\n      isOpen,\n      onOpen,\n      onClose,\n      placement,\n      duration,\n      trigger: \"never\",\n      closeOnButton: false,\n    }),\n    [isColorSelectorFull, duration, onClose, onOpen, placement, rest, isOpen],\n  )\n\n  const getContainerProps: UIPropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(containerRef, ref),\n      ...containerProps,\n      ...props,\n      ...formControlProps,\n      onClick: handlerAll(props.onClick, rest.onClick, onContainerClick),\n      onBlur: handlerAll(props.onBlur, rest.onBlur, onContainerBlur),\n    }),\n    [containerProps, formControlProps, onContainerBlur, onContainerClick, rest],\n  )\n\n  const getFieldProps: UIPropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(fieldRef, ref),\n      tabIndex: !allowInput ? -1 : 0,\n      ...inputProps,\n      ...props,\n      style: {\n        ...props.style,\n        ...(!allowInput ? { pointerEvents: \"none\" } : {}),\n      },\n      value: inputValue,\n      \"data-active\": dataAttr(isOpen),\n      \"aria-expanded\": dataAttr(isOpen),\n      onFocus: handlerAll(props.onFocus, rest.onFocus, onInputFocus),\n      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onInputKeyDown),\n      onChange: handlerAll(props.onChange, onInputChange),\n      onBlur: handlerAll(props.onFocus, onInputBlur),\n    }),\n    [\n      allowInput,\n      inputProps,\n      inputValue,\n      isOpen,\n      rest,\n      onInputFocus,\n      onInputKeyDown,\n      onInputChange,\n      onInputBlur,\n    ],\n  )\n\n  const getEyeDropperProps: UIPropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      disabled,\n      \"aria-label\": \"Pick a color\",\n      ...props,\n      ref,\n      style: { ...props.style, pointerEvents: readOnly ? \"none\" : undefined },\n      onClick: handlerAll(props.onClick, onEyeDropperClick),\n    }),\n    [disabled, onEyeDropperClick, readOnly],\n  )\n\n  const getSelectorProps = useCallback(\n    (props?: ColorSelectorProps): ColorSelectorProps => ({\n      ...formControlProps,\n      ...props,\n      value,\n      defaultValue: defaultColor,\n      fallbackValue,\n      onChange: onColorSelectorChange,\n      onChangeStart,\n      onChangeEnd,\n      onSwatchClick: handlerAll(\n        onSwatchClick,\n        closeOnSelectSwatch ? onClose : undefined,\n      ),\n      format: formatRef.current,\n      withPicker,\n      withChannel,\n      withResult,\n      withEyeDropper: withColorSelectorEyeDropper,\n      swatchesLabel,\n      swatches,\n      swatchesColumns,\n      variant: colorSelectorVariant,\n      size: colorSelectorSize,\n      colorScheme: colorSelectorColorScheme,\n    }),\n    [\n      formControlProps,\n      value,\n      fallbackValue,\n      defaultColor,\n      onColorSelectorChange,\n      onChangeStart,\n      onChangeEnd,\n      onSwatchClick,\n      onClose,\n      closeOnSelectSwatch,\n      formatRef,\n      withPicker,\n      withChannel,\n      withResult,\n      withColorSelectorEyeDropper,\n      swatchesLabel,\n      swatches,\n      swatchesColumns,\n      colorSelectorColorScheme,\n      colorSelectorSize,\n      colorSelectorVariant,\n    ],\n  )\n\n  return {\n    value,\n    eyeDropperSupported,\n    allowInput,\n    getPopoverProps,\n    getContainerProps,\n    getFieldProps,\n    getSelectorProps,\n    getEyeDropperProps,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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","names":["value","_a"]}

package/dist/{chunk-VBH7AXVT.mjs → chunk-ZUPKUHBV.mjs}

@@ -4,13 +4,13 @@ import {
 } from "./chunk-RR6V37S5.mjs";
 import {
   ColorSelectorBody
-} from "./chunk-VO2YWPCO.mjs";
+} from "./chunk-5CQI26IR.mjs";
 import {
   ColorSelectorChannels
 } from "./chunk-2PW2Z2XD.mjs";
 import {
   ColorSelectorSwatches
-} from "./chunk-DSAPB5E3.mjs";
+} from "./chunk-NGSPXJBL.mjs";
 import {
   ColorSelectorProvider,
   useColorSelector
@@ -127,4 +127,4 @@ var ColorSelector = forwardRef(
 export {
   ColorSelector
 };
-//# sourceMappingURL=chunk-VBH7AXVT.mjs.map
+//# sourceMappingURL=chunk-ZUPKUHBV.mjs.map

package/dist/color-picker.js

@@ -465,7 +465,7 @@ var ColorSelectorEyeDropper = (0, import_core.forwardRef)(({ className, ...rest
       size,
       __css: css,
       ...getEyeDropperProps(rest, ref),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeDropperIcon, { className: "ui-color-selector__eye-dropper__icon" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EyeDropperIcon, { className: "ui-color-selector__eye-dropper-icon" })
     }
   );
 });
@@ -1241,7 +1241,7 @@ var ColorSelectorSwatches = (0, import_core8.forwardRef)(
       swatchesLabel ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         import_core8.ui.p,
         {
-          className: "ui-color-selector__swatches__label",
+          className: "ui-color-selector__swatches-label",
           __css: { ...styles.swatchesLabel },
           children: swatchesLabel
         }
@@ -1809,9 +1809,9 @@ var useColorPicker = ({
 }) => {
   var _a;
   rest = (0, import_form_control4.useFormControlProps)(rest);
-  const formControlProps = (0, import_utils14.pickObject)(
+  const { "aria-readonly": _ariaReadonly, ...formControlProps } = (0, import_utils14.pickObject)(
     rest,
-    (0, import_form_control4.getFormControlProperties)({ omit: ["aria-readonly"] })
+    import_form_control4.formControlProperties
   );
   const { disabled, readOnly } = formControlProps;
   const [containerProps, inputProps] = (0, import_utils14.splitObject)(
@@ -2125,7 +2125,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
       channelProps,
       portalProps = { isDisabled: true },
       ...computedProps
-    } = (0, import_core12.omitThemeProps)((0, import_utils15.omitObject)(mergedProps, ["withSwatch"]));
+    } = (0, import_core12.omitThemeProps)(mergedProps, ["withSwatch"]);
     const {
       allowInput,
       eyeDropperSupported,
@@ -2287,7 +2287,7 @@ var ColorPickerEyeDropper = (0, import_core12.forwardRef)(
         className: (0, import_utils15.cx)("ui-color-picker__eye-dropper", className),
         __css: css,
         ...rest,
-        children: (0, import_utils15.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EyeDropperIcon, { className: "ui-color-picker__eye-dropper__icon" })
+        children: (0, import_utils15.isValidElement)(children) ? cloneChildren : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EyeDropperIcon, { className: "ui-color-picker__eye-dropper-icon" })
       }
     );
   }