@yamada-ui/color-picker 1.4.9-dev-20241110150602 → 1.4.9-next-20241111190044

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      {...(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;AAyHT;AAvHV,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,MACzC,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 } 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"]}

package/dist/color-swatch.mjs

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

package/dist/index.js

@@ -867,6 +867,7 @@ var useColorSelector = ({
       "aria-label": `Select ${color} as the color`,
       disabled,
       readOnly,
+      role: "button",
       ...props2,
       ref,
       color,
@@ -1200,6 +1201,8 @@ var ColorSwatch = (0, import_core5.forwardRef)((props, ref) => {
     {
       ref,
       className: (0, import_utils7.cx)("ui-color-swatch", className),
+      "aria-roledescription": "color swatch",
+      role: "img",
       ...isRounded ? { rounded: "fallback(full, 9999px)" } : {},
       __css: css,
       ...rest,