@yamada-ui/color-picker 1.2.8-dev-20240409121247 → 1.2.8

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

@@ -1,7 +1,7 @@
 "use client"
 import {
   ColorSwatch
-} from "./chunk-AHRE6CA3.mjs";
+} from "./chunk-UQWAM6TA.mjs";
 import {
   useColorSelectorContext
 } from "./chunk-L2ILNXB4.mjs";
@@ -67,4 +67,4 @@ var ColorSelectorSwatches = forwardRef(
 export {
   ColorSelectorSwatches
 };
-//# sourceMappingURL=chunk-COT3GJN4.mjs.map
+//# sourceMappingURL=chunk-DSAPB5E3.mjs.map

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

@@ -6,13 +6,13 @@ import {
 } from "./chunk-CR3JRFXA.mjs";
 import {
   ColorSelector
-} from "./chunk-SV347E5S.mjs";
+} from "./chunk-VBH7AXVT.mjs";
 import {
   EyeDropperIcon
 } from "./chunk-JLVD63SI.mjs";
 import {
   ColorSwatch
-} from "./chunk-AHRE6CA3.mjs";
+} from "./chunk-UQWAM6TA.mjs";
 
 // src/color-picker.tsx
 import {
@@ -232,4 +232,4 @@ var ColorPickerEyeDropper = forwardRef(
 export {
   ColorPicker
 };
-//# sourceMappingURL=chunk-XGYPDUD6.mjs.map
+//# sourceMappingURL=chunk-MVCNJELN.mjs.map

package/dist/{chunk-AHRE6CA3.mjs → chunk-UQWAM6TA.mjs}

@@ -81,10 +81,10 @@ var ColorSwatch = forwardRef((props, ref) => {
     {
       ref,
       className: cx("ui-color-swatch", className),
-      ...isRounded ? { rounded: "9999px" } : {},
+      ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
       __css: css,
       ...rest,
-      children: /* @__PURE__ */ jsx(ui.div, { ...isRounded ? { rounded: "9999px" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(ui.div, { ...isRounded ? { rounded: "fallback(full, 9999px)" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ jsx(
         ui.div,
         {
           __css: {
@@ -95,7 +95,7 @@ var ColorSwatch = forwardRef((props, ref) => {
             bottom: 0,
             ...styles.overlay
           },
-          ...isRounded ? { rounded: "9999px" } : {},
+          ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
           ...props2
         },
         index
@@ -107,4 +107,4 @@ var ColorSwatch = forwardRef((props, ref) => {
 export {
   ColorSwatch
 };
-//# sourceMappingURL=chunk-AHRE6CA3.mjs.map
+//# sourceMappingURL=chunk-UQWAM6TA.mjs.map

package/dist/{chunk-AHRE6CA3.mjs.map → chunk-UQWAM6TA.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/color-swatch.tsx"],"sourcesContent":["import {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst defaultOverlays = (\n  background: string,\n  withShadow: boolean,\n): HTMLUIProps<\"div\">[] => {\n  let overlays: HTMLUIProps<\"div\">[] = [\n    {\n      bgImage:\n        \"linear-gradient(45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ui-checkers) 75%), linear-gradient(-45deg, var(--ui-body) 75%, var(--ui-checkers) 75%)\",\n      bgSize: `8px 8px`,\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      var: [\n        {\n          __prefix: \"ui\",\n          name: \"checkers\",\n          token: \"colors\",\n          value: [\"blackAlpha.300\", \"whiteAlpha.300\"],\n        },\n        {\n          __prefix: \"ui\",\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\ntype ColorSwatchOptions = {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default \"#ffffff00\"\n   */\n  color?: string\n  /**\n   * The overlay used for the swatch element.\n   */\n  overlays?: HTMLUIProps<\"div\">[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\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\nexport type ColorSwatchProps = Omit<HTMLUIProps<\"div\">, \"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] = useMultiComponentStyle(\"ColorSwatch\", props)\n  const {\n    className,\n    color = \"#ffffff00\",\n    withShadow = true,\n    overlays = defaultOverlays(color, withShadow),\n    isRounded,\n    __css,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    position: \"relative\",\n    _before: {\n      content: `\"\"`,\n      display: \"block\",\n      h: 0,\n      pb: \"100%\",\n    },\n    \"& > *\": {\n      overflow: \"hidden\",\n      position: \"absolute\",\n      top: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      left: \"0\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      w: \"100%\",\n      h: \"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      {...(isRounded ? { rounded: \"9999px\" } : {})}\n      __css={css}\n      {...rest}\n    >\n      <ui.div {...(isRounded ? { rounded: \"9999px\" } : {})}>\n        {overlays.map((props, index) => (\n          <ui.div\n            key={index}\n            __css={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              ...styles.overlay,\n            }}\n            {...(isRounded ? { rounded: \"9999px\" } : {})}\n            {...props}\n          />\n        ))}\n      </ui.div>\n    </ui.div>\n  )\n})\n"],"mappings":";;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU;AA0HT;AAxHV,IAAM,kBAAkB,CACtB,YACA,eACyB;AACzB,MAAI,WAAiC;AAAA,IACnC;AAAA,MACE,SACE;AAAA,MACF,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,KAAK;AAAA,QACH;AAAA,UACE,UAAU;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,QACA;AAAA,UACE,UAAU;AAAA,UACV,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;AAoCO,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;AAAA,IACb,WAAW,gBAAgB,OAAO,UAAU;AAAA,IAC5C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,IACL;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,MACzC,GAAI,YAAY,EAAE,SAAS,SAAS,IAAI,CAAC;AAAA,MAC1C,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,8BAAC,GAAG,KAAH,EAAQ,GAAI,YAAY,EAAE,SAAS,SAAS,IAAI,CAAC,GAC/C,mBAAS,IAAI,CAACA,QAAO,UACpB;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UAEC,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,GAAG,OAAO;AAAA,UACZ;AAAA,UACC,GAAI,YAAY,EAAE,SAAS,SAAS,IAAI,CAAC;AAAA,UACzC,GAAGA;AAAA;AAAA,QAVC;AAAA,MAWP,CACD,GACH;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["props"]}
+{"version":3,"sources":["../src/color-swatch.tsx"],"sourcesContent":["import {\n  ui,\n  forwardRef,\n  omitThemeProps,\n  useMultiComponentStyle,\n} from \"@yamada-ui/core\"\nimport type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst defaultOverlays = (\n  background: string,\n  withShadow: boolean,\n): HTMLUIProps<\"div\">[] => {\n  let overlays: HTMLUIProps<\"div\">[] = [\n    {\n      bgImage:\n        \"linear-gradient(45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--ui-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ui-checkers) 75%), linear-gradient(-45deg, var(--ui-body) 75%, var(--ui-checkers) 75%)\",\n      bgSize: `8px 8px`,\n      bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n      var: [\n        {\n          __prefix: \"ui\",\n          name: \"checkers\",\n          token: \"colors\",\n          value: [\"blackAlpha.300\", \"whiteAlpha.300\"],\n        },\n        {\n          __prefix: \"ui\",\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\ntype ColorSwatchOptions = {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default \"#ffffff00\"\n   */\n  color?: string\n  /**\n   * The overlay used for the swatch element.\n   */\n  overlays?: HTMLUIProps<\"div\">[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\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\nexport type ColorSwatchProps = Omit<HTMLUIProps<\"div\">, \"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] = useMultiComponentStyle(\"ColorSwatch\", props)\n  const {\n    className,\n    color = \"#ffffff00\",\n    withShadow = true,\n    overlays = defaultOverlays(color, withShadow),\n    isRounded,\n    __css,\n    ...rest\n  } = omitThemeProps(mergedProps)\n\n  const css: CSSUIObject = {\n    position: \"relative\",\n    _before: {\n      content: `\"\"`,\n      display: \"block\",\n      h: 0,\n      pb: \"100%\",\n    },\n    \"& > *\": {\n      overflow: \"hidden\",\n      position: \"absolute\",\n      top: \"0\",\n      right: \"0\",\n      bottom: \"0\",\n      left: \"0\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      alignItems: \"center\",\n      w: \"100%\",\n      h: \"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      {...(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              position: \"absolute\",\n              top: 0,\n              left: 0,\n              right: 0,\n              bottom: 0,\n              ...styles.overlay,\n            }}\n            {...(isRounded ? { rounded: \"fallback(full, 9999px)\" } : {})}\n            {...props}\n          />\n        ))}\n      </ui.div>\n    </ui.div>\n  )\n})\n"],"mappings":";;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,UAAU;AA0HT;AAxHV,IAAM,kBAAkB,CACtB,YACA,eACyB;AACzB,MAAI,WAAiC;AAAA,IACnC;AAAA,MACE,SACE;AAAA,MACF,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,KAAK;AAAA,QACH;AAAA,UACE,UAAU;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,OAAO,CAAC,kBAAkB,gBAAgB;AAAA,QAC5C;AAAA,QACA;AAAA,UACE,UAAU;AAAA,UACV,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;AAoCO,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;AAAA,IACb,WAAW,gBAAgB,OAAO,UAAU;AAAA,IAC5C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,eAAe,WAAW;AAE9B,QAAM,MAAmB;AAAA,IACvB,UAAU;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,GAAG;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACA,SAAS;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,IACL;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,MACzC,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,UAAU;AAAA,YACV,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,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;","names":["props"]}

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

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

package/dist/{chunk-XL4TKXTI.mjs → chunk-VO2YWPCO.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-JFTUHZYL.mjs";
 import {
   ColorSwatch
-} from "./chunk-AHRE6CA3.mjs";
+} from "./chunk-UQWAM6TA.mjs";
 import {
   useColorSelectorContext
 } from "./chunk-L2ILNXB4.mjs";
@@ -72,4 +72,4 @@ var ColorSelectorBody = forwardRef(
 export {
   ColorSelectorBody
 };
-//# sourceMappingURL=chunk-XL4TKXTI.mjs.map
+//# sourceMappingURL=chunk-VO2YWPCO.mjs.map

package/dist/color-picker.js

@@ -1081,10 +1081,10 @@ var ColorSwatch = (0, import_core5.forwardRef)((props, ref) => {
     {
       ref,
       className: (0, import_utils7.cx)("ui-color-swatch", className),
-      ...isRounded ? { rounded: "9999px" } : {},
+      ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
       __css: css,
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.div, { ...isRounded ? { rounded: "9999px" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.div, { ...isRounded ? { rounded: "fallback(full, 9999px)" } : {}, children: overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_core5.ui.div,
         {
           __css: {
@@ -1095,7 +1095,7 @@ var ColorSwatch = (0, import_core5.forwardRef)((props, ref) => {
             bottom: 0,
             ...styles.overlay
           },
-          ...isRounded ? { rounded: "9999px" } : {},
+          ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
           ...props2
         },
         index