@yamada-ui/color-picker 2.0.0-next-20240614140233 → 2.0.0-next-20240615233332

package/dist/color-selector.js

@@ -46,21 +46,16 @@ var import_react = require("react");
 var convertHsla = (value, fallback) => {
   var _a;
   let [h, s, l, a] = (_a = (0, import_utils.parseToHsla)(value, fallback)) != null ? _a : [0, 0, 1, 1];
-  if (a > 1)
-    a = 1;
+  if (a > 1) a = 1;
   return { h, s, l, a };
 };
 var convertRgba = (value, fallback) => {
   var _a;
   let [r, g, b, a] = (_a = (0, import_utils.parseToRgba)(value, fallback)) != null ? _a : [255, 255, 255, 1];
-  if (r > 255)
-    r = 255;
-  if (g > 255)
-    g = 255;
-  if (b > 255)
-    b = 255;
-  if (a > 1)
-    a = 1;
+  if (r > 255) r = 255;
+  if (g > 255) g = 255;
+  if (b > 255) b = 255;
+  if (a > 1) a = 1;
   return { r, g, b, a };
 };
 var convertHsva = (value, fallback) => {
@@ -180,8 +175,7 @@ var useColorSelector = ({
       isDraggingRef.current = true;
       const { h: h2, s: s2, v: v2, a: a2 } = { ...parsedValue, ...value2 };
       const nextValue = (0, import_utils.hsvTo)([h2, s2, v2, a2], fallbackValue)(formatRef.current);
-      if (nextValue)
-        onChangeStartRef(nextValue);
+      if (nextValue) onChangeStartRef(nextValue);
     },
     [formatRef, onChangeStartRef, fallbackValue, parsedValue]
   );
@@ -198,18 +192,15 @@ var useColorSelector = ({
         const { h: h2, s: s2, v: v2, a: a2 } = { ...parsedValue, ...value2 };
         nextValue = (0, import_utils.hsvTo)([h2, s2, v2, a2], fallbackValue)(formatRef.current);
       }
-      if (nextValue)
-        onChangeEndRef(nextValue);
+      if (nextValue) onChangeEndRef(nextValue);
     },
     [formatRef, onChangeEndRef, fallbackValue, parsedValue]
   );
   const onChannelChange = (0, import_react.useCallback)(
     (ev, space) => {
       let n = Math.floor(parseFloat(ev.target.value));
-      if (isNaN(n))
-        n = 0;
-      if (["s", "l", "a"].includes(space))
-        n = n / 100;
+      if (isNaN(n)) n = 0;
+      if (["s", "l", "a"].includes(space)) n = n / 100;
       let nextValue;
       if (resolvedValue.startsWith("hsl")) {
         const { h: h2, s: s2, l, a: a2 } = Object.assign(
@@ -224,8 +215,7 @@ var useColorSelector = ({
         );
         nextValue = (0, import_utils.rgbaTo)([r, g, b, a2], fallbackValue)(formatRef.current);
       }
-      if (!nextValue)
-        return;
+      if (!nextValue) return;
       onChange(nextValue);
       onChangeEnd(nextValue);
     },
@@ -235,8 +225,7 @@ var useColorSelector = ({
     var _a;
     try {
       const { sRGBHex } = (_a = await onOpen()) != null ? _a : {};
-      if (!sRGBHex)
-        return;
+      if (!sRGBHex) return;
       onChange(sRGBHex);
       onChangeEnd(sRGBHex);
     } catch {
@@ -244,22 +233,17 @@ var useColorSelector = ({
   }, [onOpen, onChange, onChangeEnd]);
   (0, import_utils.useUpdateEffect)(() => {
     const nextValue = (0, import_utils.hsvTo)([h, s, v, a], fallbackValue)(formatRef.current);
-    if (nextValue)
-      setValue(nextValue);
+    if (nextValue) setValue(nextValue);
   }, [h, s, v, a]);
   (0, import_utils.useUpdateEffect)(() => {
-    if (isDraggingRef.current)
-      return;
-    if (valueProp)
-      setParsedValue(convertHsva(valueProp, fallbackValue));
+    if (isDraggingRef.current) return;
+    if (valueProp) setParsedValue(convertHsva(valueProp, fallbackValue));
   }, [valueProp]);
   (0, import_utils.useUpdateEffect)(() => {
-    if (!format || !value)
-      return;
+    if (!format || !value) return;
     formatRef.current = format;
     const nextValue = (0, import_utils.convertColor)(value, fallbackValue)(format);
-    if (nextValue)
-      setValue(nextValue);
+    if (nextValue) setValue(nextValue);
   }, [format]);
   const getContainerProps = (props2 = {}, ref = null) => ({
     ...props2,
@@ -411,8 +395,7 @@ var useColorSelector = ({
       ref,
       color,
       onClick: (0, import_utils.handlerAll)(props2.onClick, () => {
-        if (!color)
-          return;
+        if (!color) return;
         onSwatchClick == null ? void 0 : onSwatchClick(color);
         onChange(color);
         onChangeEnd(color);
@@ -500,8 +483,7 @@ var useColorSlider = ({
   focusThumbOnChange = true,
   ...props
 }) => {
-  if (!focusThumbOnChange)
-    props.isReadOnly = true;
+  if (!focusThumbOnChange) props.isReadOnly = true;
   let {
     id,
     name,
@@ -548,16 +530,14 @@ var useColorSlider = ({
   const getValueFromPointer = (0, import_react2.useCallback)(
     (ev) => {
       var _a, _b;
-      if (!trackRef.current)
-        return;
+      if (!trackRef.current) return;
       const { min: min2, max: max2, step: step2 } = latestRef.current;
       latestRef.current.eventSource = "pointer";
       const { left, width } = trackRef.current.getBoundingClientRect();
       const { clientX } = (_b = (_a = ev.touches) == null ? void 0 : _a[0]) != null ? _b : ev;
       let percent = (clientX - left) / width;
       let nextValue = (0, import_utils3.percentToValue)(percent, min2, max2);
-      if (step2)
-        nextValue = parseFloat((0, import_utils3.roundNumberToStep)(nextValue, min2, step2));
+      if (step2) nextValue = parseFloat((0, import_utils3.roundNumberToStep)(nextValue, min2, step2));
       nextValue = (0, import_utils3.clampNumber)(nextValue, min2, max2);
       return nextValue;
     },
@@ -566,22 +546,19 @@ var useColorSlider = ({
   const setValueFromPointer = (ev) => {
     const { value: value2 } = latestRef.current;
     const nextValue = getValueFromPointer(ev);
-    if (nextValue != null && nextValue !== value2)
-      setValue(nextValue);
+    if (nextValue != null && nextValue !== value2) setValue(nextValue);
   };
   const focusThumb = (0, import_react2.useCallback)(() => {
     const { focusThumbOnChange: focusThumbOnChange2 } = latestRef.current;
-    if (focusThumbOnChange2)
-      setTimeout(() => {
-        var _a;
-        return (_a = thumbRef.current) == null ? void 0 : _a.focus();
-      });
+    if (focusThumbOnChange2) setTimeout(() => {
+      var _a;
+      return (_a = thumbRef.current) == null ? void 0 : _a.focus();
+    });
   }, [latestRef]);
   const constrain = (0, import_react2.useCallback)(
     (value2) => {
       const { isInteractive: isInteractive2, min: min2, max: max2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       value2 = parseFloat((0, import_utils3.roundNumberToStep)(value2, min2, oneStep));
       value2 = (0, import_utils3.clampNumber)(value2, min2, max2);
       setValue(value2);
@@ -610,8 +587,7 @@ var useColorSlider = ({
         End: () => constrain(max2)
       };
       const action = actions[ev.key];
-      if (!action)
-        return;
+      if (!action) return;
       ev.preventDefault();
       ev.stopPropagation();
       action(ev);
@@ -622,8 +598,7 @@ var useColorSlider = ({
   (0, import_use_pan_event.usePanEvent)(containerRef, {
     onSessionStart: (ev) => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(true);
       focusThumb();
       setValueFromPointer(ev);
@@ -631,22 +606,19 @@ var useColorSlider = ({
     },
     onSessionEnd: () => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(false);
       onChangeEnd(value2);
     },
     onMove: (ev) => {
       const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setValueFromPointer(ev);
     }
   });
   (0, import_utils3.useUpdateEffect)(() => {
     const { eventSource, value: value2 } = latestRef.current;
-    if (eventSource === "keyboard")
-      onChangeEnd(value2);
+    if (eventSource === "keyboard") onChangeEnd(value2);
   }, [value, onChangeEnd]);
   const getContainerProps = (0, import_react2.useCallback)(
     (props2 = {}, ref = null) => {
@@ -942,8 +914,7 @@ var ColorSelectorSliders = (0, import_core4.forwardRef)(
     ...rest
   }, ref) => {
     let { size, withAlpha, getHueSliderProps, getAlphaSliderProps, styles } = useColorSelectorContext();
-    if (size === "full")
-      size = "lg";
+    if (size === "full") size = "lg";
     const css = {
       ...styles.sliders
     };
@@ -1139,8 +1110,7 @@ var ColorSelectorChannels = (0, import_core7.forwardRef)(({ className, channelPr
 var ColorSelectorChannel = (0, import_core7.forwardRef)(({ className, channelLabel, ...rest }, ref) => {
   const id = (0, import_react3.useId)();
   let { size, disabled, readOnly, styles } = useColorSelectorContext();
-  if (size === "full")
-    size = "lg";
+  if (size === "full") size = "lg";
   const css = { ...styles.channel };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.ui.div, { className: (0, import_utils9.cx)("ui-color-selector__channel", className), children: [
     channelLabel ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1247,8 +1217,7 @@ var useSaturationSlider = ({
   focusThumbOnChange = true,
   ...props
 }) => {
-  if (!focusThumbOnChange)
-    props.isReadOnly = true;
+  if (!focusThumbOnChange) props.isReadOnly = true;
   let {
     id,
     name,
@@ -1296,8 +1265,7 @@ var useSaturationSlider = ({
   const getValueFromPointer = (0, import_react4.useCallback)(
     (ev) => {
       var _a, _b;
-      if (!trackRef.current)
-        return [];
+      if (!trackRef.current) return [];
       const { step: step2 } = latestRef.current;
       latestRef.current.eventSource = "pointer";
       const { bottom, left, height, width } = trackRef.current.getBoundingClientRect();
@@ -1315,25 +1283,21 @@ var useSaturationSlider = ({
   const setValueFromPointer = (ev) => {
     const { value: value2 } = latestRef.current;
     const [nextS, nextV] = getValueFromPointer(ev);
-    if (nextS == null || nextV == null)
-      return;
+    if (nextS == null || nextV == null) return;
     const [, s2, v2] = value2;
-    if (nextS !== s2 || nextV !== v2)
-      setValue(([h2]) => [h2, nextS, nextV]);
+    if (nextS !== s2 || nextV !== v2) setValue(([h2]) => [h2, nextS, nextV]);
   };
   const focusThumb = (0, import_react4.useCallback)(() => {
     const { focusThumbOnChange: focusThumbOnChange2 } = latestRef.current;
-    if (focusThumbOnChange2)
-      setTimeout(() => {
-        var _a;
-        return (_a = thumbRef.current) == null ? void 0 : _a.focus();
-      });
+    if (focusThumbOnChange2) setTimeout(() => {
+      var _a;
+      return (_a = thumbRef.current) == null ? void 0 : _a.focus();
+    });
   }, [latestRef]);
   const constrain = (0, import_react4.useCallback)(
     ([s2, v2]) => {
       const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       s2 = (0, import_utils11.clampNumber)(s2, 0, 1);
       v2 = (0, import_utils11.clampNumber)(v2, 0, 1);
       setValue(([h2]) => [h2, s2, v2]);
@@ -1349,8 +1313,7 @@ var useSaturationSlider = ({
         ArrowDown: () => constrain([s, v - step])
       };
       const action = actions[ev.key];
-      if (!action)
-        return;
+      if (!action) return;
       ev.preventDefault();
       ev.stopPropagation();
       action(ev);
@@ -1361,8 +1324,7 @@ var useSaturationSlider = ({
   (0, import_use_pan_event2.usePanEvent)(containerRef, {
     onSessionStart: (ev) => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(true);
       focusThumb();
       setValueFromPointer(ev);
@@ -1370,22 +1332,19 @@ var useSaturationSlider = ({
     },
     onSessionEnd: () => {
       const { isInteractive: isInteractive2, value: value2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setDragging(false);
       onChangeEnd(value2);
     },
     onMove: (ev) => {
       const { isInteractive: isInteractive2 } = latestRef.current;
-      if (!isInteractive2)
-        return;
+      if (!isInteractive2) return;
       setValueFromPointer(ev);
     }
   });
   (0, import_utils11.useUpdateEffect)(() => {
     const { eventSource, value: value2 } = latestRef.current;
-    if (eventSource === "keyboard")
-      onChangeEnd(value2);
+    if (eventSource === "keyboard") onChangeEnd(value2);
   }, [value, onChangeEnd]);
   const getContainerProps = (0, import_react4.useCallback)(
     (props2 = {}, ref = null) => ({