@fab1o978/react-ui 0.2.1 → 0.2.2

package/dist/index.js

@@ -4691,7 +4691,9 @@ var PageBreakButton = () => {
 var ColorWheel_module_default = {
   root: "ColorWheel_module_root",
   recents: "ColorWheel_module_recents",
+  recentsEmpty: "ColorWheel_module_recentsEmpty",
   chipWrap: "ColorWheel_module_chipWrap",
+  chipWrapRemoving: "ColorWheel_module_chipWrapRemoving",
   chip: "ColorWheel_module_chip",
   chipRemove: "ColorWheel_module_chipRemove",
   picker: "ColorWheel_module_picker",
@@ -4876,6 +4878,11 @@ 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) {
@@ -4921,6 +4928,15 @@ function ColorWheel({
   const [editing, setEditing] = useState(false);
   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(() => {
@@ -5116,6 +5132,15 @@ function ColorWheel({
     if (next) commit(next.hsv, next.a);
   }
   function removeFavorite(hex) {
+    setRemovingHexes((prev) => new Set(prev).add(hex));
+  }
+  function handleChipRemoveEnd(hex) {
+    setRemovingHexes((prev) => {
+      if (!prev.has(hex)) return prev;
+      const next = new Set(prev);
+      next.delete(hex);
+      return next;
+    });
     onFavoritesChange?.(favorites.filter((h) => h !== hex));
   }
   return /* @__PURE__ */ jsxs(
@@ -5129,32 +5154,56 @@ function ColorWheel({
         ...size !== 1 ? { transform: `scale(${size})`, transformOrigin: "top center" } : void 0
       },
       children: [
-        favorites.length > 0 && /* @__PURE__ */ jsx("div", { className: ColorWheel_module_default.recents, children: favorites.map((hex, i) => /* @__PURE__ */ jsxs("div", { className: ColorWheel_module_default.chipWrap, style: { animationDelay: `${i * 0.02}s` }, 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 + i)) }),
+        (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
+              )
+            ))
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: ColorWheel_module_default.picker, style: { height: arcVisible ? PICKER_HEIGHT_WITH_ARC : PICKER_HEIGHT_NO_ARC }, children: [
           /* @__PURE__ */ jsx(
             "div",