@hilum/ui 3.8.4 → 3.8.5

package/dist/index.js

@@ -6651,6 +6651,13 @@ function parseColor(input) {
   }
   return null;
 }
+function colorsRepresentSameValue(left, right) {
+  if (left.trim().toLowerCase() === right.trim().toLowerCase()) return true;
+  const leftColor = parseColor(left);
+  const rightColor = parseColor(right);
+  if (!leftColor || !rightColor) return false;
+  return Math.abs(leftColor.r - rightColor.r) < 0.5 && Math.abs(leftColor.g - rightColor.g) < 0.5 && Math.abs(leftColor.b - rightColor.b) < 0.5 && Math.abs(leftColor.a - rightColor.a) < 0.5 / 255;
+}
 function buildParsed(h, s, v, a) {
   const { r, g, b } = hsvToRgb(h, s, v);
   const hsl = rgbToHsl(r, g, b);
@@ -6694,7 +6701,7 @@ var CHECKER_BG = {
 function SaturationSquare({ h, s, v, onChange }) {
   const ref = useRef(null);
   const dragging = useRef(false);
-  const hasMoved = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
   const [focused, setFocused] = useState(false);
   const [hovered, setHovered] = useState(false);
   const [cursorPos, setCursorPos] = useState(null);
@@ -6722,7 +6729,7 @@ function SaturationSquare({ h, s, v, onChange }) {
       if (e.pointerType === "mouse" && e.button !== 0) return;
       e.preventDefault();
       dragging.current = true;
-      hasMoved.current = false;
+      setIsDragging(true);
       e.currentTarget.setPointerCapture(e.pointerId);
       updateFromPointer(e.clientX, e.clientY);
     },
@@ -6732,14 +6739,13 @@ function SaturationSquare({ h, s, v, onChange }) {
     (e) => {
       updateCursorPos(e.clientX, e.clientY);
       if (!dragging.current) return;
-      hasMoved.current = true;
       updateFromPointer(e.clientX, e.clientY);
     },
     [updateFromPointer, updateCursorPos]
   );
   const onPointerUp = useCallback(() => {
     dragging.current = false;
-    hasMoved.current = false;
+    setIsDragging(false);
   }, []);
   const onKeyDown = useCallback(
     (e) => {
@@ -6778,6 +6784,8 @@ function SaturationSquare({ h, s, v, onChange }) {
       onPointerDown,
       onPointerMove,
       onPointerUp,
+      onPointerCancel: onPointerUp,
+      onLostPointerCapture: onPointerUp,
       onKeyDown,
       className: cn("relative w-full select-none touch-none cursor-none outline-none", shape3.bg),
       style: {
@@ -6798,18 +6806,16 @@ function SaturationSquare({ h, s, v, onChange }) {
           }
         ),
         /* @__PURE__ */ jsx(
-          motion.div,
+          "div",
           {
+            "data-slot": "color-picker-thumb",
+            "aria-hidden": "true",
             className: "absolute pointer-events-none rounded-full",
-            initial: false,
-            animate: {
+            style: {
               left: `${s * 100}%`,
               top: `${(1 - v) * 100}%`,
               width: 18,
-              height: 18
-            },
-            transition: { duration: 0 },
-            style: {
+              height: 18,
               transform: "translate(-50%, -50%)",
               border: "1px solid white",
               boxShadow: "0 0 0 1px rgba(0,0,0,1)",
@@ -6817,9 +6823,11 @@ function SaturationSquare({ h, s, v, onChange }) {
             }
           }
         ),
-        hovered && !dragging.current && cursorPos && /* @__PURE__ */ jsx(
+        hovered && !isDragging && cursorPos && /* @__PURE__ */ jsx(
           "div",
           {
+            "data-slot": "color-picker-hover",
+            "aria-hidden": "true",
             className: "absolute pointer-events-none rounded-full",
             style: {
               left: `${cursorPos.x}%`,
@@ -7409,7 +7417,7 @@ var ColorPicker = forwardRef(
       if (!isControlled) return;
       const emitted = lastEmittedRef.current;
       const cur = value;
-      if (cur === emitted) return;
+      if (cur === emitted || colorsRepresentSameValue(cur, emitted)) return;
       const p = parseColor(cur);
       if (!p) return;
       oklchHueRef.current = null;