@fab1o978/react-ui 0.2.3 → 0.2.5

package/dist/index.js

@@ -4878,11 +4878,6 @@ var ARC_A1 = 150;
 var ARC_HANDLE_R_FRAC = 152 / 380;
 var PICKER_HEIGHT_WITH_ARC = 265;
 var PICKER_HEIGHT_NO_ARC = 224;
-var CHIP_SIZE = 26;
-var CHIP_GAP = 7;
-function recentsContentWidth(chipCount) {
-  return chipCount > 0 ? chipCount * CHIP_SIZE + (chipCount - 1) * CHIP_GAP : 0;
-}
 var MODES_HSV = ["h", "s", "v"];
 var MODES_HSVA = ["h", "s", "v", "a"];
 function ringGradient(mode, hsv) {
@@ -4929,14 +4924,6 @@ function ColorWheel({
   const [editValue, setEditValue] = useState("");
   const [eyedropperSupported, setEyedropperSupported] = useState(false);
   const [removingHexes, setRemovingHexes] = useState(/* @__PURE__ */ new Set());
-  const [recentsGrown, setRecentsGrown] = useState(false);
-  const recentsGrowRaf = useRef(0);
-  useEffect(() => {
-    recentsGrowRaf.current = requestAnimationFrame(() => {
-      recentsGrowRaf.current = requestAnimationFrame(() => setRecentsGrown(true));
-    });
-    return () => cancelAnimationFrame(recentsGrowRaf.current);
-  }, []);
   const accentVars = accent ? accentToCssVars(deriveAccent(accent), "colorwheel") : {};
   const lastEmitted = useRef(value);
   useEffect(() => {
@@ -4987,8 +4974,15 @@ function ColorWheel({
   const arcHandleR = ARC_HANDLE_R_FRAC * 380;
   const arcHandleDx = arcHandleR * Math.sin(arcAngleFromTop);
   const arcHandleDy = -arcHandleR * Math.cos(arcAngleFromTop);
+  function nextHueHsv(h) {
+    return {
+      h,
+      s: hsv.s === 0 ? 50 : hsv.s,
+      v: hsv.v === 0 ? 50 : hsv.v
+    };
+  }
   function applyRingAngle(angle) {
-    if (mode === "h") commit({ ...hsv, h: angle }, alpha);
+    if (mode === "h") commit(nextHueHsv(angle), alpha);
     else if (mode === "s") commit({ ...hsv, s: angle / 360 * 100 }, alpha);
     else if (mode === "a") commit(hsv, angle / 360);
     else commit({ ...hsv, v: angle / 360 * 100 }, alpha);
@@ -5039,7 +5033,7 @@ function ColorWheel({
       if (dist < rect.width * RING_INNER_FRAC || dist > rect.width * RING_OUTER_FRAC) return;
       e.preventDefault();
       const dir = e.deltaY > 0 ? -1 : 1;
-      if (mode === "h") commit({ ...hsv, h: (hsv.h + dir * 4 + 360) % 360 }, alpha);
+      if (mode === "h") commit(nextHueHsv((hsv.h + dir * 4 + 360) % 360), alpha);
       else if (mode === "s") commit({ ...hsv, s: clamp2(hsv.s + dir * 3, 0, 100) }, alpha);
       else if (mode === "a") commit(hsv, clamp2(round2(alpha + dir * 0.03), 0, 1));
       else commit({ ...hsv, v: clamp2(hsv.v + dir * 3, 0, 100) }, alpha);
@@ -5154,56 +5148,49 @@ function ColorWheel({
         ...size !== 1 ? { transform: `scale(${size})`, transformOrigin: "top center" } : void 0
       },
       children: [
-        (favorites.length > 0 || onFavoritesChange) && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: [ColorWheel_module_default.recents, favorites.length === 0 ? ColorWheel_module_default.recentsEmpty : ""].join(" "),
-            style: { width: recentsGrown ? recentsContentWidth(favorites.length) : 0 },
-            children: favorites.map((hex, i) => (
-              // keyed by hex alone (not index) so an add/remove -- which
-              // shifts every other item's index -- doesn't remount and replay
-              // the entrance animation on chips that were already there; only
-              // a genuinely new hex mounts fresh and animates in
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: [ColorWheel_module_default.chipWrap, removingHexes.has(hex) ? ColorWheel_module_default.chipWrapRemoving : ""].join(" "),
-                  style: { animationDelay: removingHexes.has(hex) ? void 0 : `${i * 0.05}s` },
-                  onAnimationEnd: (e) => {
-                    if (e.target === e.currentTarget && e.animationName.includes("chipOut")) handleChipRemoveEnd(hex);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: ColorWheel_module_default.chip,
-                        style: { background: hex.length > 7 ? hex.slice(0, 7) : hex },
-                        title: hex,
-                        "aria-label": `Apply color ${hex}`,
-                        onClick: () => applyFavorite(hex)
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: ColorWheel_module_default.chipRemove,
-                        "aria-label": `Remove ${hex} from favorites`,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          removeFavorite(hex);
-                        },
-                        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
-                      }
-                    )
-                  ]
-                },
-                hex
-              )
-            ))
-          }
-        ),
+        (favorites.length > 0 || onFavoritesChange) && /* @__PURE__ */ jsx("div", { className: [ColorWheel_module_default.recents, favorites.length === 0 ? ColorWheel_module_default.recentsEmpty : ""].join(" "), children: favorites.map((hex, i) => (
+          // keyed by hex alone (not index) so an add/remove -- which
+          // shifts every other item's index -- doesn't remount and replay
+          // the entrance animation on chips that were already there; only
+          // a genuinely new hex mounts fresh and animates in
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: [ColorWheel_module_default.chipWrap, removingHexes.has(hex) ? ColorWheel_module_default.chipWrapRemoving : ""].join(" "),
+              style: { animationDelay: removingHexes.has(hex) ? void 0 : `${i * 0.05}s` },
+              onAnimationEnd: (e) => {
+                if (e.target === e.currentTarget && e.animationName.includes("chipOut")) handleChipRemoveEnd(hex);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: ColorWheel_module_default.chip,
+                    style: { background: hex.length > 7 ? hex.slice(0, 7) : hex },
+                    title: hex,
+                    "aria-label": `Apply color ${hex}`,
+                    onClick: () => applyFavorite(hex)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: ColorWheel_module_default.chipRemove,
+                    "aria-label": `Remove ${hex} from favorites`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFavorite(hex);
+                    },
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+                  }
+                )
+              ]
+            },
+            hex
+          )
+        )) }),
         /* @__PURE__ */ jsxs("div", { className: ColorWheel_module_default.picker, style: { height: arcVisible ? PICKER_HEIGHT_WITH_ARC : PICKER_HEIGHT_NO_ARC }, children: [
           /* @__PURE__ */ jsx(
             "div",