@fab1o978/react-ui 0.1.5 → 0.1.8

package/dist/components/ColorPicker/index.cjs

@@ -12,10 +12,6 @@ var ColorPicker_module_default = {
   discWrapper: "ColorPicker_module_discWrapper2",
   disc: "ColorPicker_module_disc2",
   dot: "ColorPicker_module_dot2",
-  lSlider: "ColorPicker_module_lSlider2",
-  lThumb: "ColorPicker_module_lThumb2",
-  alphaSlider: "ColorPicker_module_alphaSlider2",
-  alphaThumb: "ColorPicker_module_alphaThumb2",
   previewSwatch: "ColorPicker_module_previewSwatch2",
   eyedropperBtn: "ColorPicker_module_eyedropperBtn2",
   inputSection: "ColorPicker_module_inputSection2",
@@ -32,6 +28,21 @@ var ColorPicker_module_default = {
   recentSwatch: "ColorPicker_module_recentSwatch2"
 };
 
+// src/components/SliderControl/SliderControl.module.scss
+var SliderControl_module_default = {
+  wrapper: "SliderControl_module_wrapper2",
+  disabled: "SliderControl_module_disabled2",
+  icon: "SliderControl_module_icon2",
+  trackArea: "SliderControl_module_trackArea2",
+  groove: "SliderControl_module_groove2",
+  rail: "SliderControl_module_rail2",
+  fill: "SliderControl_module_fill2",
+  thumb: "SliderControl_module_thumb2",
+  thumbDragging: "SliderControl_module_thumbDragging2",
+  tooltip: "SliderControl_module_tooltip2",
+  tooltipVisible: "SliderControl_module_tooltipVisible2"
+};
+
 // src/utils/color.ts
 function hexToHsl(hex) {
   const r = parseInt(hex.slice(1, 3), 16) / 255;
@@ -147,6 +158,177 @@ function accentToCssVars(tokens, prefix) {
     [`--${prefix}-accent-light`]: tokens.light
   };
 }
+function clamp(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function snapToStep(v, min, step) {
+  return Math.round((v - min) / step) * step + min;
+}
+var SliderControl = ({
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  showTooltip = "drag",
+  showPercentage = false,
+  leftIcon,
+  rightIcon,
+  railBackground,
+  accent,
+  className,
+  disabled = false
+}) => {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = react.useState(defaultValue);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [isFocused, setIsFocused] = react.useState(false);
+  const trackRef = react.useRef(null);
+  const thumbRef = react.useRef(null);
+  const value = isControlled ? controlledValue : internalValue;
+  const pct = (clamp(value, min, max) - min) / (max - min);
+  const accentVars = accent ? accentToCssVars(deriveAccent(accent), "slider") : {};
+  const setValue = react.useCallback(
+    (next) => {
+      const snapped = clamp(snapToStep(next, min, step), min, max);
+      if (!isControlled) setInternalValue(snapped);
+      onChange?.(snapped);
+    },
+    [isControlled, min, max, step, onChange]
+  );
+  const valueFromPointer = react.useCallback(
+    (e) => {
+      const rect = trackRef.current.getBoundingClientRect();
+      const ratio = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+      return min + ratio * (max - min);
+    },
+    [min, max]
+  );
+  const handlePointerDown = react.useCallback(
+    (e) => {
+      if (disabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setIsDragging(true);
+      thumbRef.current?.focus();
+      setValue(valueFromPointer(e.nativeEvent));
+    },
+    [disabled, setValue, valueFromPointer]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!isDragging || disabled) return;
+      setValue(valueFromPointer(e.nativeEvent));
+    },
+    [isDragging, disabled, setValue, valueFromPointer]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    setIsDragging(false);
+    thumbRef.current?.blur();
+  }, []);
+  react.useEffect(() => {
+    const el = trackRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setValue(value + (e.deltaY < 0 ? step : -step));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [disabled, value, step, setValue]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (disabled) return;
+      const map = {
+        ArrowRight: step,
+        ArrowUp: step,
+        ArrowLeft: -step,
+        ArrowDown: -step,
+        PageUp: step * 10,
+        PageDown: -step * 10
+      };
+      if (e.key === "Home") {
+        setValue(min);
+        e.preventDefault();
+        return;
+      }
+      if (e.key === "End") {
+        setValue(max);
+        e.preventDefault();
+        return;
+      }
+      if (map[e.key] !== void 0) {
+        setValue(value + map[e.key]);
+        e.preventDefault();
+      }
+    },
+    [disabled, step, min, max, value, setValue]
+  );
+  const tooltipVisible = showTooltip === "always" || showTooltip === "drag" && (isDragging || isFocused);
+  const decimals = step < 1 ? Math.ceil(-Math.log10(step)) : 0;
+  const displayValue = showPercentage ? `${Math.round((value - min) / (max - min) * 100)}%` : value.toFixed(decimals);
+  const tooltipOffset = `calc(${pct * 100}% + ${(0.5 - pct) * 20}px)`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [SliderControl_module_default.wrapper, disabled ? SliderControl_module_default.disabled : "", className ?? ""].filter(Boolean).join(" "),
+      style: accentVars,
+      children: [
+        leftIcon !== null && leftIcon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SliderControl_module_default.icon, children: leftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: trackRef,
+            className: SliderControl_module_default.trackArea,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: SliderControl_module_default.groove, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: SliderControl_module_default.rail,
+                  style: railBackground ? { background: railBackground } : void 0,
+                  children: !railBackground && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SliderControl_module_default.fill, style: { width: `${pct * 100}%` } })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: thumbRef,
+                  role: "slider",
+                  tabIndex: disabled ? -1 : 0,
+                  "aria-valuenow": Math.round(value),
+                  "aria-valuemin": min,
+                  "aria-valuemax": max,
+                  "aria-disabled": disabled,
+                  className: [SliderControl_module_default.thumb, isDragging ? SliderControl_module_default.thumbDragging : ""].filter(Boolean).join(" "),
+                  style: { left: `calc(${pct * 100}% + ${(0.5 - pct) * 24}px)` },
+                  onKeyDown: handleKeyDown,
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => setIsFocused(false)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: [SliderControl_module_default.tooltip, tooltipVisible ? SliderControl_module_default.tooltipVisible : ""].filter(Boolean).join(" "),
+                  style: { left: tooltipOffset },
+                  "aria-hidden": "true",
+                  children: displayValue
+                }
+              )
+            ]
+          }
+        ),
+        rightIcon !== null && rightIcon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SliderControl_module_default.icon, children: rightIcon })
+      ]
+    }
+  );
+};
+SliderControl.displayName = "SliderControl";
 var DISC = 200;
 var CopyIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "5", width: "7", height: "7", rx: "1.5", stroke: "currentColor", strokeWidth: "1.4" }),
@@ -316,50 +498,21 @@ var ColorPicker = ({
     },
     [updateDisc]
   );
-  const updateL = react.useCallback(
-    (clientX, rect) => {
-      const nl = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
+  const handleLChange = react.useCallback(
+    (nl) => {
       setL(nl);
       notify(h, s, nl, a);
     },
     [h, s, a, notify]
   );
-  const handleLPointerDown = react.useCallback(
-    (e) => {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateL]
-  );
-  const handleLPointerMove = react.useCallback(
-    (e) => {
-      if (e.buttons === 0) return;
-      updateL(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateL]
-  );
-  const updateA = react.useCallback(
-    (clientX, rect) => {
-      const na = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  const handleAChange = react.useCallback(
+    (val) => {
+      const na = val / 100;
       setA(na);
       notify(h, s, l, na);
     },
     [h, s, l, notify]
   );
-  const handleAPointerDown = react.useCallback(
-    (e) => {
-      e.currentTarget.setPointerCapture(e.pointerId);
-      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateA]
-  );
-  const handleAPointerMove = react.useCallback(
-    (e) => {
-      if (e.buttons === 0) return;
-      updateA(e.clientX, e.currentTarget.getBoundingClientRect());
-    },
-    [updateA]
-  );
   const { r: rr, g: gg, b: bb } = hslToRgb(h, s, l);
   const luminance = (0.299 * rr + 0.587 * gg + 0.114 * bb) / 255;
   const swatchFg = luminance > 0.6 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.9)";
@@ -372,7 +525,6 @@ var ColorPicker = ({
     hsl(${h}, ${s}%, 5%),
     hsl(${h}, ${s}%, 50%),
     hsl(${h}, ${s}%, 95%))`;
-  const alphaGradient = `linear-gradient(to right, transparent, ${rgbStr})`;
   const handleEyeDropper = async () => {
     if (!window.EyeDropper) return;
     try {
@@ -433,35 +585,27 @@ var ColorPicker = ({
           )
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          SliderControl,
           {
-            className: ColorPicker_module_default.lSlider,
-            style: { backgroundImage: lGradient },
-            onPointerDown: handleLPointerDown,
-            onPointerMove: handleLPointerMove,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: ColorPicker_module_default.lThumb,
-                style: { left: `${l}%` }
-              }
-            )
+            value: l,
+            onChange: handleLChange,
+            min: 0,
+            max: 100,
+            step: 1,
+            showTooltip: "never",
+            railBackground: lGradient
           }
         ),
         showAlpha && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          SliderControl,
           {
-            className: ColorPicker_module_default.alphaSlider,
-            style: { backgroundImage: alphaGradient },
-            onPointerDown: handleAPointerDown,
-            onPointerMove: handleAPointerMove,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: ColorPicker_module_default.alphaThumb,
-                style: { left: `${a * 100}%` }
-              }
-            )
+            value: Math.round(a * 100),
+            onChange: handleAChange,
+            min: 0,
+            max: 100,
+            step: 1,
+            showTooltip: "never",
+            railBackground: `linear-gradient(to right, transparent, ${rgbStr}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 / 10px 10px`
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(