@fab1o978/react-ui 0.2.3 → 0.2.5

package/dist/components/ColorWheel/index.cjs

@@ -270,11 +270,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) {
@@ -321,14 +316,6 @@ function ColorWheel({
   const [editValue, setEditValue] = react.useState("");
   const [eyedropperSupported, setEyedropperSupported] = react.useState(false);
   const [removingHexes, setRemovingHexes] = react.useState(/* @__PURE__ */ new Set());
-  const [recentsGrown, setRecentsGrown] = react.useState(false);
-  const recentsGrowRaf = react.useRef(0);
-  react.useEffect(() => {
-    recentsGrowRaf.current = requestAnimationFrame(() => {
-      recentsGrowRaf.current = requestAnimationFrame(() => setRecentsGrown(true));
-    });
-    return () => cancelAnimationFrame(recentsGrowRaf.current);
-  }, []);
   const accentVars = accent ? accentToCssVars(deriveAccent(accent), "colorwheel") : {};
   const lastEmitted = react.useRef(value);
   react.useEffect(() => {
@@ -379,8 +366,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);
@@ -431,7 +425,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: clamp(hsv.s + dir * 3, 0, 100) }, alpha);
       else if (mode === "a") commit(hsv, clamp(round2(alpha + dir * 0.03), 0, 1));
       else commit({ ...hsv, v: clamp(hsv.v + dir * 3, 0, 100) }, alpha);
@@ -546,56 +540,49 @@ function ColorWheel({
         ...size !== 1 ? { transform: `scale(${size})`, transformOrigin: "top center" } : void 0
       },
       children: [
-        (favorites.length > 0 || onFavoritesChange) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: ColorWheel_module_default.chipRemove,
-                        "aria-label": `Remove ${hex} from favorites`,
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          removeFavorite(hex);
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
-                      }
-                    )
-                  ]
-                },
-                hex
-              )
-            ))
-          }
-        ),
+        (favorites.length > 0 || onFavoritesChange) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: ColorWheel_module_default.chipRemove,
+                    "aria-label": `Remove ${hex} from favorites`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFavorite(hex);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+                  }
+                )
+              ]
+            },
+            hex
+          )
+        )) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorWheel_module_default.picker, style: { height: arcVisible ? PICKER_HEIGHT_WITH_ARC : PICKER_HEIGHT_NO_ARC }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",