@yamada-ui/color-picker 1.4.10-next-20241123050941 → 1.4.11-dev-20241123052407

package/dist/{chunk-OPWYRBSP.mjs → chunk-3DDU22W6.mjs}

@@ -7,7 +7,7 @@ import {
   ui,
   useComponentMultiStyle
 } from "@yamada-ui/core";
-import { cx } from "@yamada-ui/utils";
+import { cx, isString } from "@yamada-ui/utils";
 import { jsx } from "react/jsx-runtime";
 var defaultOverlays = (background, withShadow) => {
   let overlays = [
@@ -79,6 +79,7 @@ var ColorSwatch = forwardRef((props, ref) => {
     {
       ref,
       className: cx("ui-color-swatch", className),
+      "aria-label": isString(color) ? color : void 0,
       "aria-roledescription": "color swatch",
       role: "img",
       ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
@@ -109,4 +110,4 @@ ColorSwatch.__ui__ = "ColorSwatch";
 export {
   ColorSwatch
 };
-//# sourceMappingURL=chunk-OPWYRBSP.mjs.map
+//# sourceMappingURL=chunk-3DDU22W6.mjs.map

package/dist/chunk-3DDU22W6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color-swatch.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { cx, isString } from \"@yamada-ui/utils\"\n\nconst defaultOverlays = (\n  background: CSSUIProps[\"color\"],\n  withShadow: boolean,\n): HTMLUIProps[] => {\n  let overlays: HTMLUIProps[] = [\n    {\n      bgImage:\n        \"linear-gradient(45deg, $checkers 25%, transparent 25%), linear-gradient(-45deg, $checkers 25%, transparent 25%), linear-gradient(45deg, transparent 75%, $checkers 75%), linear-gradient(-45deg, $body 75%, $checkers 75%)\",\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      bgSize: `8px 8px`,\n      vars: [\n        {\n          name: \"checkers\",\n          token: \"colors\",\n          value: [\"blackAlpha.300\", \"whiteAlpha.300\"],\n        },\n        {\n          name: \"body\",\n          token: \"colors\",\n          value: [\"whiteAlpha.500\", \"blackAlpha.500\"],\n        },\n      ],\n    },\n    { background },\n  ]\n\n  if (withShadow)\n    overlays = [\n      ...overlays,\n      {\n        boxShadow: `rgba(0, 0, 0, .1) 0 0 0 1px inset, rgb(0, 0, 0, .15) 0 0 4px inset`,\n      },\n    ]\n\n  return overlays\n}\n\ninterface ColorSwatchOptions {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default \"#ffffff00\"\n   */\n  color?: CSSUIProps[\"color\"]\n  /**\n   * If `true`, the color swatch will be perfectly round. Else, it'll be slightly round.\n   *\n   * @default false\n   */\n  isRounded?: boolean\n  /**\n   * The overlay used for the swatch element.\n   */\n  overlays?: HTMLUIProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLUIProps, \"color\">,\n    ThemeProps<\"ColorSwatch\">,\n    ColorSwatchOptions {}\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see Docs https://yamada-ui.com/components/data-display/color-swatch\n */\nexport const ColorSwatch = forwardRef<ColorSwatchProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"ColorSwatch\", props)\n  const {\n    className,\n    color = \"#ffffff00\",\n    isRounded,\n    withShadow = true,\n    overlays = defaultOverlays(color, withShadow),\n    __css,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    \"& > *\": {\n      alignItems: \"center\",\n      bottom: \"0\",\n      display: \"flex\",\n      h: \"100%\",\n      justifyContent: \"center\",\n      left: \"0\",\n      overflow: \"hidden\",\n      position: \"absolute\",\n      right: \"0\",\n      top: \"0\",\n      w: \"100%\",\n    },\n    position: \"relative\",\n    _before: {\n      content: `\"\"`,\n      display: \"block\",\n      h: 0,\n      pb: \"100%\",\n    },\n    ...styles.container,\n    ...__css,\n  }\n\n  return (\n    <ui.div\n      ref={ref}\n      className={cx(\"ui-color-swatch\", className)}\n      aria-label={isString(color) ? color : undefined}\n      aria-roledescription=\"color swatch\"\n      role=\"img\"\n      {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}\n      __css={css}\n      {...rest}\n    >\n      <ui.div {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}>\n        {overlays.map((props, index) => (\n          <ui.div\n            key={index}\n            __css={{\n              bottom: 0,\n              left: 0,\n              position: \"absolute\",\n              right: 0,\n              top: 0,\n              ...styles.overlay,\n            }}\n            {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}\n            {...props}\n          />\n        ))}\n      </ui.div>\n    </ui.div>\n  )\n})\n\nColorSwatch.displayName = \"ColorSwatch\"\nColorSwatch.__ui__ = \"ColorSwatch\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,IAAI,gBAAgB;AA4HnB;AA1HV,IAAM,kBAAkB,CACtB,YACA,eACkB;AAClB,MAAI,WAA0B;AAAA,IAC5B;AAAA,MACE,SACE;AAAA,MACF,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,MAAM;AAAA,QACJ;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,QACA;AAAA,UACE,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,MACF;AAAA,IACF;AAAA,IACA,EAAE,WAAW;AAAA,EACf;AAEA,MAAI;AACF,eAAW;AAAA,MACT,GAAG;AAAA,MACH;AAAA,QACE,WAAW;AAAA,MACb;AAAA,IACF;AAEF,SAAO;AACT;AAqCO,IAAM,cAAc,WAAoC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,eAAe,KAAK;AACzE,QAAM;AAAA,IACJ;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,aAAa;AAAA,IACb,WAAW,gBAAgB,OAAO,UAAU;AAAA,IAC5C;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,GAAG;AAAA,MACH,gBAAgB;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,MACV,OAAO;AAAA,MACP,KAAK;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,GAAG,OAAO;AAAA,IACV,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,cAAY,SAAS,KAAK,IAAI,QAAQ;AAAA,MACtC,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACJ,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,GAAG,KAAH,EAAQ,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC,GAC/D,mBAAS,IAAI,CAACA,QAAO,UACpB;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UAEC,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YACL,GAAG,OAAO;AAAA,UACZ;AAAA,UACC,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC;AAAA,UACzD,GAAGA;AAAA;AAAA,QAVC;AAAA,MAWP,CACD,GACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["props"]}

package/dist/{chunk-QWG3QE6A.mjs → chunk-DDNDRQKD.mjs}

@@ -4,13 +4,13 @@ import {
 } from "./chunk-AJTCPCFF.mjs";
 import {
   ColorSelectorBody
-} from "./chunk-XSZZBWND.mjs";
+} from "./chunk-ZW72SK4V.mjs";
 import {
   ColorSelectorChannels
 } from "./chunk-RJOBF4LI.mjs";
 import {
   ColorSelectorSwatches
-} from "./chunk-NNVWH4IX.mjs";
+} from "./chunk-OL3O7L3O.mjs";
 import {
   ColorSelectorProvider,
   useColorSelector
@@ -129,4 +129,4 @@ ColorSelector.__ui__ = "ColorSelector";
 export {
   ColorSelector
 };
-//# sourceMappingURL=chunk-QWG3QE6A.mjs.map
+//# sourceMappingURL=chunk-DDNDRQKD.mjs.map

package/dist/{chunk-ASZZSRFB.mjs → chunk-KXJGUNXF.mjs}

@@ -3,16 +3,16 @@ import {
   ColorPickerProvider,
   useColorPicker,
   useColorPickerContext
-} from "./chunk-Z2KAER2U.mjs";
+} from "./chunk-T4JTAQXV.mjs";
 import {
   ColorSelector
-} from "./chunk-QWG3QE6A.mjs";
+} from "./chunk-DDNDRQKD.mjs";
 import {
   EyeDropperIcon
 } from "./chunk-6XIZXZXV.mjs";
 import {
   ColorSwatch
-} from "./chunk-OPWYRBSP.mjs";
+} from "./chunk-3DDU22W6.mjs";
 
 // src/color-picker.tsx
 import {
@@ -65,7 +65,6 @@ var ColorPicker = forwardRef(
       ...computedProps
     } = omitThemeProps(mergedProps, ["withSwatch"]);
     const {
-      id,
       eyeDropperSupported,
       value,
       getContainerProps,
@@ -123,7 +122,7 @@ var ColorPicker = forwardRef(
           /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
-              id,
+              as: "div",
               className: "ui-color-picker__content",
               __css: { ...styles.content },
               children: /* @__PURE__ */ jsx(
@@ -256,4 +255,4 @@ ColorPickerEyeDropper.__ui__ = "ColorPickerEyeDropper";
 export {
   ColorPicker
 };
-//# sourceMappingURL=chunk-ASZZSRFB.mjs.map
+//# sourceMappingURL=chunk-KXJGUNXF.mjs.map

package/dist/chunk-KXJGUNXF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/color-picker.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { FC, ReactNode, RefAttributes } from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport type { ColorSwatchProps } from \"./color-swatch\"\nimport type { UseColorPickerProps } from \"./use-color-picker\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport {\n  cx,\n  getValidChildren,\n  isValidElement,\n  mergeRefs,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement } from \"react\"\nimport { ColorSelector } from \"./color-selector\"\nimport { EyeDropperIcon } from \"./color-selector-eye-dropper\"\nimport { ColorSwatch } from \"./color-swatch\"\nimport {\n  ColorPickerProvider,\n  useColorPicker,\n  useColorPickerContext,\n} from \"./use-color-picker\"\n\ninterface ColorPickerOptions {\n  children?: FC<{ value: string; onClose: () => void }> | ReactNode\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * If `true`, display the eye dropper component.\n   *\n   * @default true\n   */\n  withEyeDropper?: boolean\n  /**\n   * If `true`, display the color swatch component.\n   *\n   * @default true\n   */\n  withSwatch?: boolean\n  /**\n   * Props for color picker container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for color eye dropper component.\n   */\n  eyeDropperProps?: ColorPickerEyeDropperProps\n  /**\n   * Props for color picker field element.\n   */\n  fieldProps?: Omit<ColorPickerFieldProps, \"children\" | \"inputProps\">\n  /**\n   * Props for color picker input element.\n   */\n  inputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ isDisabled: true }'\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for color swatch component.\n   */\n  swatchProps?: ColorPickerSwatchProps\n}\n\nexport interface ColorPickerProps\n  extends ThemeProps<\"ColorPicker\">,\n    UseColorPickerProps,\n    ColorPickerOptions,\n    Pick<\n      ColorSelectorProps,\n      | \"alphaSliderProps\"\n      | \"alphaSliderRef\"\n      | \"channelProps\"\n      | \"channelsProps\"\n      | \"hueSliderProps\"\n      | \"hueSliderRef\"\n      | \"saturationSliderProps\"\n      | \"saturationSliderRef\"\n      | \"swatchesProps\"\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] = useComponentMultiStyle(\"ColorPicker\", {\n      withSwatch,\n      ...props,\n    })\n    let {\n      className,\n      alphaSliderRef,\n      children,\n      color,\n      h,\n      height,\n      hueSliderRef,\n      minH,\n      minHeight,\n      saturationSliderRef,\n      withEyeDropper = true,\n      alphaSliderProps,\n      channelProps,\n      channelsProps,\n      containerProps,\n      eyeDropperProps,\n      fieldProps,\n      hueSliderProps,\n      inputProps,\n      portalProps = { isDisabled: true },\n      saturationSliderProps,\n      swatchesProps,\n      swatchProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps, [\"withSwatch\"])\n    const {\n      eyeDropperSupported,\n      value,\n      getContainerProps,\n      getEyeDropperProps,\n      getFieldProps,\n      getInputProps,\n      getPopoverProps,\n      getSelectorProps,\n      onClose,\n      ...rest\n    } = useColorPicker(computedProps)\n\n    h ??= height\n    minH ??= minHeight\n\n    const css: CSSUIObject = {\n      color,\n      h: \"fit-content\",\n      w: \"100%\",\n      ...styles.container,\n    }\n\n    return (\n      <ColorPickerProvider value={{ styles, value, ...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                ...styles.inner,\n              }}\n            >\n              {withSwatch ? <ColorPickerSwatch {...swatchProps} /> : null}\n\n              <ColorPickerField\n                h={h}\n                minH={minH}\n                {...getFieldProps(fieldProps, ref)}\n                inputProps={getInputProps(inputProps)}\n              />\n\n              {eyeDropperSupported && withEyeDropper ? (\n                <ColorPickerEyeDropper\n                  {...getEyeDropperProps(eyeDropperProps)}\n                />\n              ) : null}\n            </ui.div>\n\n            <Portal {...portalProps}>\n              <PopoverContent\n                as=\"div\"\n                className=\"ui-color-picker__content\"\n                __css={{ ...styles.content }}\n              >\n                <ColorSelector\n                  className=\"ui-color-picker__picker\"\n                  {...getSelectorProps({\n                    alphaSliderRef,\n                    hueSliderRef,\n                    saturationSliderRef,\n                    alphaSliderProps,\n                    channelProps,\n                    channelsProps,\n                    hueSliderProps,\n                    saturationSliderProps,\n                    swatchesProps,\n                  })}\n                >\n                  {runIfFunc(children, { value, onClose })}\n                </ColorSelector>\n              </PopoverContent>\n            </Portal>\n          </ui.div>\n        </Popover>\n      </ColorPickerProvider>\n    )\n  },\n)\n\nColorPicker.displayName = \"ColorPicker\"\nColorPicker.__ui__ = \"ColorPicker\"\n\ninterface ColorPickerFieldOptions {\n  inputProps?: HTMLUIProps<\"input\"> & RefAttributes<HTMLInputElement>\n}\n\ninterface ColorPickerFieldProps extends HTMLUIProps, ColorPickerFieldOptions {}\n\nconst ColorPickerField = forwardRef<ColorPickerFieldProps, \"input\">(\n  ({ className, h, minH, inputProps, ...rest }, ref) => {\n    const { styles } = useColorPickerContext()\n    const { ref: inputRef, ...computedInputProps } = inputProps ?? {}\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      h,\n      minH,\n      pe: \"2rem\",\n      ps: \"2rem\",\n      ...styles.field,\n    }\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-color-picker__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          <ui.input\n            ref={mergeRefs(ref, inputRef)}\n            className=\"ui-color-picker-picker__field__input\"\n            display=\"inline-block\"\n            w=\"100%\"\n            {...computedInputProps}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nColorPickerField.displayName = \"ColorPickerField\"\nColorPickerField.__ui__ = \"ColorPickerField\"\n\ninterface ColorPickerSwatchProps extends ColorSwatchProps {}\n\nconst ColorPickerSwatch = forwardRef<ColorPickerSwatchProps, \"div\">(\n  ({ className, ...rest }, ref) => {\n    const { styles, value } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      zIndex: 1,\n      ...styles.swatch,\n    }\n\n    return (\n      <ColorSwatch\n        ref={ref}\n        className={cx(\"ui-color-picker__swatch\", className)}\n        color={value}\n        isRounded\n        __css={css}\n        {...rest}\n      />\n    )\n  },\n)\n\nColorPickerSwatch.displayName = \"ColorPickerSwatch\"\nColorPickerSwatch.__ui__ = \"ColorPickerSwatch\"\n\ninterface ColorPickerEyeDropperProps extends HTMLUIProps<\"button\"> {}\n\nconst ColorPickerEyeDropper = forwardRef<ColorPickerEyeDropperProps, \"button\">(\n  ({ className, children, ...rest }, ref) => {\n    const { styles } = useColorPickerContext()\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      zIndex: 1,\n      ...styles.eyeDropper,\n    }\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) =>\n      cloneElement(child, {\n        style: {\n          color: \"currentColor\",\n          maxHeight: \"1em\",\n          maxWidth: \"1em\",\n        },\n        \"aria-hidden\": true,\n        focusable: false,\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\nColorPickerEyeDropper.displayName = \"ColorPickerEyeDropper\"\nColorPickerEyeDropper.__ui__ = \"ColorPickerEyeDropper\"\n"],"mappings":"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","names":[]}

package/dist/{chunk-NNVWH4IX.mjs → chunk-OL3O7L3O.mjs}

@@ -1,7 +1,7 @@
 "use client"
 import {
   ColorSwatch
-} from "./chunk-OPWYRBSP.mjs";
+} from "./chunk-3DDU22W6.mjs";
 import {
   useColorSelectorContext
 } from "./chunk-C7UAG4TH.mjs";
@@ -69,4 +69,4 @@ ColorSelectorSwatches.__ui__ = "ColorSelectorSwatches";
 export {
   ColorSelectorSwatches
 };
-//# sourceMappingURL=chunk-NNVWH4IX.mjs.map
+//# sourceMappingURL=chunk-OL3O7L3O.mjs.map

package/dist/{chunk-Z2KAER2U.mjs → chunk-T4JTAQXV.mjs}

@@ -23,15 +23,14 @@ import {
   splitObject,
   useUpdateEffect
 } from "@yamada-ui/utils";
-import { useCallback, useId, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 var defaultFormatInput = (value) => value;
 var [ColorPickerProvider, useColorPickerContext] = createContext({
   name: "ColorPickerContext",
   errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
 });
 var useColorPicker = (props) => {
-  let {
-    id,
+  const {
     allowInput = true,
     animation,
     boundary,
@@ -111,8 +110,6 @@ var useColorPicker = (props) => {
     onClose: onCloseProp,
     onOpen: onOpenProp
   });
-  const uuid = useId();
-  id != null ? id : id = uuid;
   const onOpen = useCallback(() => {
     if (disabled || readOnly) return;
     onInternalOpen();
@@ -289,10 +286,11 @@ var useColorPicker = (props) => {
   );
   const getFieldProps = useCallback(
     (props2 = {}, ref = null) => ({
-      "aria-expanded": dataAttr(isOpen),
+      "aria-haspopup": "dialog",
       "data-active": dataAttr(isOpen),
       "data-not-allowed": dataAttr(!readOnly && !disabled && !allowInput),
-      tabIndex: !allowInput ? -1 : 0,
+      role: "combobox",
+      tabIndex: -1,
       ...formControlProps,
       ...props2,
       ref: mergeRefs(fieldRef, ref),
@@ -321,8 +319,7 @@ var useColorPicker = (props) => {
         ...disabled || !allowInput ? { pointerEvents: "none" } : {}
       };
       return {
-        "aria-controls": id,
-        role: "combobox",
+        autoComplete: "off",
         tabIndex: !allowInput ? -1 : 0,
         ...formControlProps,
         ...inputProps,
@@ -334,7 +331,6 @@ var useColorPicker = (props) => {
       };
     },
     [
-      id,
       inputProps,
       allowInput,
       disabled,
@@ -405,7 +401,6 @@ var useColorPicker = (props) => {
     ]
   );
   return {
-    id,
     allowInput,
     eyeDropperSupported,
     value,
@@ -424,4 +419,4 @@ export {
   useColorPickerContext,
   useColorPicker
 };
-//# sourceMappingURL=chunk-Z2KAER2U.mjs.map
+//# sourceMappingURL=chunk-T4JTAQXV.mjs.map

package/dist/chunk-T4JTAQXV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-color-picker.ts"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  PropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { ComboBoxProps, PopoverProps } from \"@yamada-ui/popover\"\nimport type { ColorFormat } from \"@yamada-ui/utils\"\nimport type {\n  ChangeEvent,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n} from \"react\"\nimport type { ColorSelectorProps } from \"./color-selector\"\nimport type { UseColorSelectorBaseProps } from \"./use-color-selector\"\nimport { layoutStyleProperties } from \"@yamada-ui/core\"\nimport {\n  formControlProperties,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\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 {\n  calcFormat,\n  convertColor,\n  createContext,\n  dataAttr,\n  getEventRelatedTarget,\n  handlerAll,\n  isContains,\n  mergeRefs,\n  pickObject,\n  splitObject,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useRef, useState } from \"react\"\n\nconst defaultFormatInput = (value: string) => value\n\ntype ColorSelectorThemeProps = ThemeProps<\"ColorSelector\">\n\ninterface ColorPickerContext {\n  styles: { [key: string]: CSSUIObject | undefined }\n  value: string\n}\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\ninterface UseColorPickerOptions {\n  /**\n   * If `true`, allows input.\n   *\n   * @default true\n   */\n  allowInput?: boolean\n  /**\n   * If `true`, the color swatch will be closed when value is selected.\n   */\n  closeOnSelectSwatch?: boolean\n  /**\n   * ColorScheme for the color selector component.\n   */\n  colorSelectorColorScheme?: ColorSelectorThemeProps[\"colorScheme\"]\n  /**\n   * Size for the color selector component.\n   */\n  colorSelectorSize?: ColorSelectorThemeProps[\"size\"]\n  /**\n   * Variant for the color selector component.\n   */\n  colorSelectorVariant?: ColorSelectorThemeProps[\"variant\"]\n  /**\n   * The initial value of the color selector.\n   */\n  defaultColor?: string\n  /**\n   * A callback function to format the input entered.\n   */\n  formatInput?: (value: string) => string\n  /**\n   * If `true` display the eye dropper component.\n   *\n   * @default false\n   */\n  withColorSelectorEyeDropper?: boolean\n  /**\n   * If `true`, display the result component.\n   *\n   * @default false\n   */\n  withResult?: boolean\n  /**\n   * Props for color selector component.\n   */\n  colorSelectorProps?: ColorSelectorProps\n}\n\nexport interface UseColorPickerProps\n  extends Omit<\n      HTMLUIProps<\"input\">,\n      | \"animation\"\n      | \"children\"\n      | \"defaultValue\"\n      | \"offset\"\n      | \"onChange\"\n      | \"size\"\n      | \"value\"\n    >,\n    Omit<UseColorSelectorBaseProps, \"id\" | \"name\">,\n    ComboBoxProps,\n    Pick<\n      ColorSelectorProps,\n      | \"swatches\"\n      | \"swatchesColumns\"\n      | \"swatchesLabel\"\n      | \"withChannel\"\n      | \"withPicker\"\n    >,\n    UseColorPickerOptions {}\n\nexport const useColorPicker = (props: UseColorPickerProps) => {\n  const {\n    allowInput = true,\n    animation,\n    boundary,\n    closeDelay,\n    closeOnBlur = true,\n    closeOnEsc = true,\n    closeOnSelectSwatch,\n    colorSelectorColorScheme,\n    colorSelectorSize,\n    colorSelectorVariant,\n    defaultColor,\n    defaultIsOpen,\n    defaultValue,\n    duration = 0.2,\n    eventListeners,\n    fallbackValue,\n    flip,\n    format,\n    formatInput = defaultFormatInput,\n    gutter,\n    isLazy,\n    isOpen: isOpenProp,\n    lazyBehavior,\n    matchWidth = colorSelectorSize === \"full\",\n    modifiers,\n    offset,\n    openDelay,\n    placement = \"bottom-start\",\n    preventOverflow,\n    strategy,\n    swatches,\n    swatchesColumns,\n    swatchesLabel,\n    value: valueProp,\n    withChannel,\n    withColorSelectorEyeDropper = false,\n    withPicker,\n    withResult = false,\n    onChange: onChangeProp,\n    onChangeEnd,\n    onChangeStart,\n    onClick,\n    onClose: onCloseProp,\n    onKeyDown,\n    onOpen: onOpenProp,\n    onSwatchClick,\n    ...rest\n  } = useFormControlProps(props)\n  const {\n    \"aria-readonly\": _ariaReadonly,\n    onBlur,\n    onFocus,\n    ...formControlProps\n  } = pickObject(rest, formControlProperties)\n  const { disabled, readOnly } = formControlProps\n  const [containerProps, inputProps] = splitObject(rest, layoutStyleProperties)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const fieldRef = useRef<HTMLInputElement>(null)\n  const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } =\n    useEyeDropper()\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\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    onClose: onInternalClose,\n    onOpen: onInternalOpen,\n  } = useDisclosure({\n    defaultIsOpen,\n    isOpen: isOpenProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\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: { [key: string]: Function | undefined } = {\n        Enter: !isOpen ? onOpen : undefined,\n        Escape: closeOnEsc ? onClose : undefined,\n        Space: !isOpen ? onOpen : 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    enabled: isOpen && closeOnBlur,\n    handler: onClose,\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      animation,\n      boundary,\n      closeDelay,\n      closeOnBlur,\n      duration,\n      eventListeners,\n      flip,\n      gutter,\n      isLazy,\n      lazyBehavior,\n      matchWidth,\n      modifiers,\n      offset,\n      openDelay,\n      placement,\n      preventOverflow,\n      strategy,\n      ...props,\n      closeOnButton: false,\n      isOpen,\n      trigger: \"never\",\n      onClose,\n      onOpen,\n    }),\n    [\n      closeOnBlur,\n      openDelay,\n      closeDelay,\n      isLazy,\n      lazyBehavior,\n      animation,\n      duration,\n      offset,\n      gutter,\n      preventOverflow,\n      flip,\n      matchWidth,\n      boundary,\n      eventListeners,\n      strategy,\n      placement,\n      modifiers,\n      isOpen,\n      onOpen,\n      onClose,\n    ],\n  )\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ref: mergeRefs(containerRef, ref),\n      ...containerProps,\n      ...props,\n      ...formControlProps,\n      onBlur: handlerAll(props.onBlur, onBlur, onContainerBlur),\n      onClick: handlerAll(props.onClick, onClick, onContainerClick),\n    }),\n    [\n      containerProps,\n      formControlProps,\n      onBlur,\n      onClick,\n      onContainerBlur,\n      onContainerClick,\n    ],\n  )\n\n  const getFieldProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-haspopup\": \"dialog\",\n      \"data-active\": dataAttr(isOpen),\n      \"data-not-allowed\": dataAttr(!readOnly && !disabled && !allowInput),\n      role: \"combobox\",\n      tabIndex: -1,\n      ...formControlProps,\n      ...props,\n      ref: mergeRefs(fieldRef, ref),\n      onBlur: handlerAll(props.onFocus, onInputBlur),\n      onFocus: handlerAll(props.onFocus, onFocus, onInputFocus),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown, onInputKeyDown),\n    }),\n    [\n      allowInput,\n      formControlProps,\n      isOpen,\n      readOnly,\n      disabled,\n      onInputBlur,\n      onFocus,\n      onInputFocus,\n      onKeyDown,\n      onInputKeyDown,\n    ],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => {\n      const style: CSSProperties = {\n        ...props.style,\n        ...inputProps.style,\n        ...(disabled || !allowInput ? { pointerEvents: \"none\" } : {}),\n      }\n\n      return {\n        autoComplete: \"off\",\n        tabIndex: !allowInput ? -1 : 0,\n        ...formControlProps,\n        ...inputProps,\n        ...props,\n        ref,\n        style,\n        value: inputValue,\n        onChange: handlerAll(props.onChange, onInputChange),\n      }\n    },\n    [\n      inputProps,\n      allowInput,\n      disabled,\n      formControlProps,\n      inputValue,\n      onInputChange,\n    ],\n  )\n\n  const getEyeDropperProps: PropGetter<\"button\"> = useCallback(\n    (props = {}, ref = null) => ({\n      \"aria-label\": \"Pick a color\",\n      disabled,\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: PropGetter<ColorSelectorProps> = useCallback(\n    (props) => ({\n      ...formControlProps,\n      ...props,\n      colorScheme: colorSelectorColorScheme,\n      size: colorSelectorSize,\n      variant: colorSelectorVariant,\n      defaultValue: defaultColor,\n      fallbackValue,\n      format: formatRef.current,\n      swatches,\n      swatchesColumns,\n      swatchesLabel,\n      value,\n      withChannel,\n      withEyeDropper: withColorSelectorEyeDropper,\n      withPicker,\n      withResult,\n      onChange: onColorSelectorChange,\n      onChangeEnd,\n      onChangeStart,\n      onSwatchClick: handlerAll(\n        onSwatchClick,\n        closeOnSelectSwatch ? onClose : undefined,\n      ),\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    allowInput,\n    eyeDropperSupported,\n    value,\n    getContainerProps,\n    getEyeDropperProps,\n    getFieldProps,\n    getInputProps,\n    getPopoverProps,\n    getSelectorProps,\n    onClose,\n  }\n}\n\nexport type UseColorPickerReturn = ReturnType<typeof useColorPicker>\n"],"mappings":"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","names":["value","props"]}

package/dist/{chunk-XSZZBWND.mjs → chunk-ZW72SK4V.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-UKR7WWUY.mjs";
 import {
   ColorSwatch
-} from "./chunk-OPWYRBSP.mjs";
+} from "./chunk-3DDU22W6.mjs";
 import {
   useColorSelectorContext
 } from "./chunk-C7UAG4TH.mjs";
@@ -74,4 +74,4 @@ ColorSelectorBody.__ui__ = "ColorSelectorBody";
 export {
   ColorSelectorBody
 };
-//# sourceMappingURL=chunk-XSZZBWND.mjs.map
+//# sourceMappingURL=chunk-ZW72SK4V.mjs.map

package/dist/color-picker.js

@@ -1194,6 +1194,7 @@ var ColorSwatch = (0, import_core5.forwardRef)((props, ref) => {
     {
       ref,
       className: (0, import_utils7.cx)("ui-color-swatch", className),
+      "aria-label": (0, import_utils7.isString)(color) ? color : void 0,
       "aria-roledescription": "color swatch",
       role: "img",
       ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
@@ -1899,8 +1900,7 @@ var [ColorPickerProvider, useColorPickerContext] = (0, import_utils14.createCont
   errorMessage: `useColorPickerContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorPicker />"`
 });
 var useColorPicker = (props) => {
-  let {
-    id,
+  const {
     allowInput = true,
     animation,
     boundary,
@@ -1980,8 +1980,6 @@ var useColorPicker = (props) => {
     onClose: onCloseProp,
     onOpen: onOpenProp
   });
-  const uuid = (0, import_react5.useId)();
-  id != null ? id : id = uuid;
   const onOpen = (0, import_react5.useCallback)(() => {
     if (disabled || readOnly) return;
     onInternalOpen();
@@ -2158,10 +2156,11 @@ var useColorPicker = (props) => {
   );
   const getFieldProps = (0, import_react5.useCallback)(
     (props2 = {}, ref = null) => ({
-      "aria-expanded": (0, import_utils14.dataAttr)(isOpen),
+      "aria-haspopup": "dialog",
       "data-active": (0, import_utils14.dataAttr)(isOpen),
       "data-not-allowed": (0, import_utils14.dataAttr)(!readOnly && !disabled && !allowInput),
-      tabIndex: !allowInput ? -1 : 0,
+      role: "combobox",
+      tabIndex: -1,
       ...formControlProps,
       ...props2,
       ref: (0, import_utils14.mergeRefs)(fieldRef, ref),
@@ -2190,8 +2189,7 @@ var useColorPicker = (props) => {
         ...disabled || !allowInput ? { pointerEvents: "none" } : {}
       };
       return {
-        "aria-controls": id,
-        role: "combobox",
+        autoComplete: "off",
         tabIndex: !allowInput ? -1 : 0,
         ...formControlProps,
         ...inputProps,
@@ -2203,7 +2201,6 @@ var useColorPicker = (props) => {
       };
     },
     [
-      id,
       inputProps,
       allowInput,
       disabled,
@@ -2274,7 +2271,6 @@ var useColorPicker = (props) => {
     ]
   );
   return {
-    id,
     allowInput,
     eyeDropperSupported,
     value,
@@ -2323,7 +2319,6 @@ var ColorPicker = (0, import_core12.forwardRef)(
       ...computedProps
     } = (0, import_core12.omitThemeProps)(mergedProps, ["withSwatch"]);
     const {
-      id,
       eyeDropperSupported,
       value,
       getContainerProps,
@@ -2381,7 +2376,7 @@ var ColorPicker = (0, import_core12.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             import_popover.PopoverContent,
             {
-              id,
+              as: "div",
               className: "ui-color-picker__content",
               __css: { ...styles.content },
               children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(