@yamada-ui/color-picker 1.4.10-next-20241119123334 → 1.4.10

package/dist/color-swatch.js.map

@@ -1 +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 } 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-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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,mBAAmB;AA2HT;AAzHV,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,kBAAc,wBAAoC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,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,QAAI,4BAAe,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,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,MAC1C,wBAAqB;AAAA,MACrB,MAAK;AAAA,MACJ,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC;AAAA,MAC1D,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,sDAAC,eAAG,KAAH,EAAQ,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC,GAC/D,mBAAS,IAAI,CAACA,QAAO,UACpB;AAAA,QAAC,eAAG;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"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AACP,mBAA6B;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,kBAAc,wBAAoC,CAAC,OAAO,QAAQ;AAC7E,QAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,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,QAAI,4BAAe,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,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,MAC1C,kBAAY,uBAAS,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,sDAAC,eAAG,KAAH,EAAQ,GAAI,YAAY,EAAE,SAAS,yBAAyB,IAAI,CAAC,GAC/D,mBAAS,IAAI,CAACA,QAAO,UACpB;AAAA,QAAC,eAAG;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/color-swatch.mjs

@@ -1,7 +1,7 @@
 "use client"
 import {
   ColorSwatch
-} from "./chunk-OPWYRBSP.mjs";
+} from "./chunk-3DDU22W6.mjs";
 export {
   ColorSwatch
 };

package/dist/index.js

@@ -1201,6 +1201,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)" } : {},
@@ -1906,8 +1907,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,
@@ -1987,8 +1987,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();
@@ -2165,10 +2163,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),
@@ -2197,8 +2196,7 @@ var useColorPicker = (props) => {
         ...disabled || !allowInput ? { pointerEvents: "none" } : {}
       };
       return {
-        "aria-controls": id,
-        role: "combobox",
+        autoComplete: "off",
         tabIndex: !allowInput ? -1 : 0,
         ...formControlProps,
         ...inputProps,
@@ -2210,7 +2208,6 @@ var useColorPicker = (props) => {
       };
     },
     [
-      id,
       inputProps,
       allowInput,
       disabled,
@@ -2281,7 +2278,6 @@ var useColorPicker = (props) => {
     ]
   );
   return {
-    id,
     allowInput,
     eyeDropperSupported,
     value,
@@ -2330,7 +2326,6 @@ var ColorPicker = (0, import_core12.forwardRef)(
       ...computedProps
     } = (0, import_core12.omitThemeProps)(mergedProps, ["withSwatch"]);
     const {
-      id,
       eyeDropperSupported,
       value,
       getContainerProps,
@@ -2388,7 +2383,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)(