@yamada-ui/color-picker 1.4.8 → 1.4.9-dev-20241109081144

package/dist/color-selector.js

@@ -517,6 +517,7 @@ var useColorSlider = ({
     id,
     name,
     style: styleProp,
+    channel = "hue",
     defaultValue,
     max,
     min = 0,
@@ -733,6 +734,7 @@ var useColorSlider = ({
         "aria-valuemax": max,
         "aria-valuemin": min,
         "aria-valuenow": value,
+        "aria-valuetext": getAriaValueText(channel, value),
         "data-active": (0, import_utils3.dataAttr)(isDragging && focusThumbOnChange),
         role: "slider",
         tabIndex: isInteractive && focusThumbOnChange ? 0 : void 0,
@@ -748,14 +750,15 @@ var useColorSlider = ({
       value,
       formControlProps,
       ariaReadonly,
-      isInteractive,
-      focusThumbOnChange,
-      min,
       max,
+      min,
+      channel,
       isDragging,
-      onKeyDown,
+      focusThumbOnChange,
+      isInteractive,
+      onBlurProp,
       onFocusProp,
-      onBlurProp
+      onKeyDown
     ]
   );
   return {
@@ -766,9 +769,30 @@ var useColorSlider = ({
     getTrackProps
   };
 };
+var getAriaValueText = (channel, value) => {
+  if (channel === "hue") {
+    return `${value}\xB0, ${getColorName(value)}`;
+  } else {
+    return `${value * 100}%`;
+  }
+};
+var getColorName = (hue) => {
+  if (hue < 30 || hue >= 330) return "Red";
+  if (hue < 90) return "Yellow";
+  if (hue < 150) return "Green";
+  if (hue < 210) return "Cyan";
+  if (hue < 270) return "Blue";
+  return "Magenta";
+};
 
 // src/alpha-slider.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var [AlphaSliderProvider, useAlphaSlider] = (0, import_utils4.createContext)(
+  {
+    name: "SliderContext",
+    errorMessage: `useSliderContext returned is 'undefined'. Seems you forgot to wrap the components in "<AlphaSlider />" `
+  }
+);
 var defaultOverlays = (color, min, max, withShadow) => {
   let overlays = [
     {
@@ -822,14 +846,15 @@ var AlphaSlider = (0, import_core2.forwardRef)(
       min,
       step: 0.01,
       thumbColor: "transparent",
-      ...computedProps
+      ...computedProps,
+      channel: "alpha"
     });
     const css = {
       position: "relative",
       ...styles.container,
       ...__css
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlphaSliderProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       import_core2.ui.div,
       {
         className: (0, import_utils4.cx)("ui-alpha-slider", className),
@@ -837,55 +862,87 @@ var AlphaSlider = (0, import_core2.forwardRef)(
         ...getContainerProps(),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.input, { ...getInputProps(inputProps, ref) }),
-          overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_core2.ui.div,
-            {
-              className: "ui-alpha-slider__overlay",
-              __css: {
-                bottom: 0,
-                left: 0,
-                position: "absolute",
-                right: 0,
-                top: 0,
-                ...styles.overlay
-              },
-              ...props2
-            },
-            index
-          )),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_core2.ui.div,
-            {
-              className: "ui-alpha-slider__track",
-              __css: {
-                h: "100%",
-                position: "relative",
-                w: "100%",
-                ...styles.track
-              },
-              ...getTrackProps(trackProps),
-              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_core2.ui.div,
-                {
-                  className: "ui-alpha-slider__thumb",
-                  __css: { ...styles.thumb },
-                  ...getThumbProps(thumbProps)
-                }
-              )
-            }
-          )
+          overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlphaSliderOverlay, { ...props2 }, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlphaSliderTrack, { ...getTrackProps(trackProps), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AlphaSliderThumb, { ...getThumbProps(thumbProps) }) })
         ]
       }
-    );
+    ) });
   }
 );
 AlphaSlider.displayName = "AlphaSlider";
 AlphaSlider.__ui__ = "AlphaSlider";
+var AlphaSliderOverlay = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAlphaSlider();
+    const css = {
+      bottom: 0,
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      ...styles.overlay
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-alpha-slider__overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+AlphaSliderOverlay.displayName = "AlphaSliderOverlay";
+AlphaSliderOverlay.__ui__ = "AlphaSliderOverlay";
+var AlphaSliderTrack = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAlphaSlider();
+    const css = {
+      h: "100%",
+      position: "relative",
+      w: "100%",
+      ...styles.track
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-alpha-slider__track", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+AlphaSliderTrack.displayName = "AlphaSliderTrack";
+AlphaSliderTrack.__ui__ = "AlphaSliderTrack";
+var AlphaSliderThumb = (0, import_core2.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useAlphaSlider();
+    const css = { ...styles.thumb };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_core2.ui.div,
+      {
+        ref,
+        className: (0, import_utils4.cx)("ui-alpha-slider__thumb", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+AlphaSliderThumb.displayName = "AlphaSliderThumb";
+AlphaSliderThumb.__ui__ = "AlphaSliderThumb";
 
 // src/hue-slider.tsx
 var import_core3 = require("@yamada-ui/core");
 var import_utils5 = require("@yamada-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var [HueSliderProvider, useHueSlider] = (0, import_utils5.createContext)({
+  name: "SliderContext",
+  errorMessage: `useSliderContext returned is 'undefined'. Seems you forgot to wrap the components in "<HueSlider />" `
+});
 var defaultOverlays2 = (min, max, withShadow) => {
   let overlays = [
     {
@@ -917,13 +974,13 @@ var HueSlider = (0, import_core3.forwardRef)((props, ref) => {
     __css,
     ...computedProps
   } = (0, import_core3.omitThemeProps)(mergedProps);
-  const { getContainerProps, getInputProps, getThumbProps, getTrackProps } = useColorSlider({ max, min, step: 1, ...computedProps });
+  const { getContainerProps, getInputProps, getThumbProps, getTrackProps } = useColorSlider({ max, min, step: 1, ...computedProps, channel: "hue" });
   const css = {
     position: "relative",
     ...styles.container,
     ...__css
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HueSliderProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_core3.ui.div,
     {
       className: (0, import_utils5.cx)("ui-hue-slider", className),
@@ -931,44 +988,77 @@ var HueSlider = (0, import_core3.forwardRef)((props, ref) => {
       ...getContainerProps(),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.input, { ...getInputProps(inputProps, ref) }),
-        overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_core3.ui.div,
-          {
-            className: "ui-hue-slider__overlay",
-            __css: {
-              bottom: 0,
-              left: 0,
-              position: "absolute",
-              right: 0,
-              top: 0,
-              ...styles.overlay
-            },
-            ...props2
-          },
-          index
-        )),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_core3.ui.div,
-          {
-            className: "ui-hue-slider__track",
-            __css: { h: "100%", position: "relative", w: "100%", ...styles.track },
-            ...getTrackProps(trackProps),
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_core3.ui.div,
-              {
-                className: "ui-hue-slider__thumb",
-                __css: { ...styles.thumb },
-                ...getThumbProps(thumbProps)
-              }
-            )
-          }
-        )
+        overlays.map((props2, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HueSliderOverlay, { ...props2 }, index)),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HueSliderTrack, { ...getTrackProps(trackProps), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HueSliderThumb, { ...getThumbProps(thumbProps) }) })
       ]
     }
-  );
+  ) });
 });
 HueSlider.displayName = "HueSlider";
 HueSlider.__ui__ = "HueSlider";
+var HueSliderOverlay = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useHueSlider();
+    const css = {
+      bottom: 0,
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      ...styles.overlay
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-hue-slider__overlay", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+HueSliderOverlay.displayName = "HueSliderOverlay";
+HueSliderOverlay.__ui__ = "HueSliderOverlay";
+var HueSliderTrack = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useHueSlider();
+    const css = {
+      h: "100%",
+      position: "relative",
+      w: "100%",
+      ...styles.track
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-hue-slider__track", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+HueSliderTrack.displayName = "HueSliderTrack";
+HueSliderTrack.__ui__ = "HueSliderTrack";
+var HueSliderThumb = (0, import_core3.forwardRef)(
+  ({ className, ...rest }, ref) => {
+    const { styles } = useHueSlider();
+    const css = { ...styles.thumb };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_core3.ui.div,
+      {
+        ref,
+        className: (0, import_utils5.cx)("ui-hue-slider__thumb", className),
+        __css: css,
+        ...rest
+      }
+    );
+  }
+);
+HueSliderThumb.displayName = "HueSliderThumb";
+HueSliderThumb.__ui__ = "HueSliderThumb";
 
 // src/color-selector-sliders.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");