@nice2dev/icons 1.3.16 → 1.3.18

package/dist/esm/animationControls.js

@@ -186,7 +186,7 @@ const AnimationController = /* @__PURE__ */ forwardRef(function AnimationControl
   const [singleState, setSingleState] = useState(
     autoPlay ? "playing" : "idle"
   );
-  const singleIterationRef = useRef(0);
+  const [singleIteration, setSingleIteration] = useState(0);
   const sequenceConfig = isSequence ? animation : { steps: [{ animation, duration: 1e3 }] };
   const sequence = useAnimationSequence(sequenceConfig);
   const state = isSequence ? sequence.state : singleState;
@@ -245,7 +245,7 @@ const AnimationController = /* @__PURE__ */ forwardRef(function AnimationControl
         sequence.play();
       } else {
         setSingleState("playing");
-        singleIterationRef.current++;
+        setSingleIteration((n) => n + 1);
       }
       onStart?.();
     },
@@ -262,7 +262,7 @@ const AnimationController = /* @__PURE__ */ forwardRef(function AnimationControl
         sequence.reset();
       } else {
         setSingleState("idle");
-        singleIterationRef.current++;
+        setSingleIteration((n) => n + 1);
       }
     },
     goToStep: (index) => {
@@ -308,7 +308,7 @@ const AnimationController = /* @__PURE__ */ forwardRef(function AnimationControl
       ...children.props.style,
       ...animationStyles
     },
-    key: isSequence ? `seq-${currentStepIndex}-${sequence.loopIteration}` : `single-${singleIterationRef.current}`
+    key: isSequence ? `seq-${currentStepIndex}-${sequence.loopIteration}` : `single-${singleIteration}`
   });
   return /* @__PURE__ */ jsx(
     "span",
@@ -333,6 +333,7 @@ const InteractiveIcon = /* @__PURE__ */ forwardRef(
     const [isActive, setIsActive] = useState(false);
     const [isLeaving, setIsLeaving] = useState(false);
     const [hasPlayed, setHasPlayed] = useState(false);
+    const [plays, setPlays] = useState(0);
     const wrapperRef = useRef(null);
     const timeoutRef = useRef(null);
     const setRefs = useCallback(
@@ -366,11 +367,13 @@ const InteractiveIcon = /* @__PURE__ */ forwardRef(
         timeoutRef.current = setTimeout(() => {
           setIsActive(true);
           setHasPlayed(true);
+          setPlays((n) => n + 1);
           onInteractionStart?.();
         }, config.delay);
       } else {
         setIsActive(true);
         setHasPlayed(true);
+        setPlays((n) => n + 1);
         onInteractionStart?.();
       }
     }, [disabled, config.once, config.delay, hasPlayed, clearTimer, onInteractionStart]);
@@ -423,7 +426,9 @@ const InteractiveIcon = /* @__PURE__ */ forwardRef(
       style: {
         ...children.props.style,
         ...animationStyles
-      }
+      },
+      // a click plays the animation again: a new key restarts it
+      ...config.trigger === "click" ? { key: `play-${plays}` } : {}
     });
     return /* @__PURE__ */ jsx(
       "span",

package/dist/esm/animationSpeed.js

@@ -0,0 +1,102 @@
+import React from "react";
+const ANIMATION_SLOWDOWN = 2;
+function animationScale(speed) {
+  const s = typeof speed === "number" && speed > 0 && Number.isFinite(speed) ? speed : 1;
+  return ANIMATION_SLOWDOWN / s;
+}
+function durationScale(durationGiven, speed) {
+  return durationGiven ? animationScale(speed) / ANIMATION_SLOWDOWN : animationScale(speed);
+}
+const SMIL_ELEMENTS = /* @__PURE__ */ new Set([
+  "animate",
+  "animateTransform",
+  "animateMotion",
+  "animateColor",
+  "set"
+]);
+const TIME_PROPS = ["dur", "begin", "end"];
+const CLOCK = /^(\d*\.?\d+)(ms|s|min|h)?$/;
+function scaleTime(value, scale) {
+  if (typeof value === "number") {
+    return Number((value * scale).toFixed(4));
+  }
+  return value.split(";").map((part) => {
+    const m = CLOCK.exec(part.trim());
+    if (!m) {
+      return part;
+    }
+    return `${Number((Number(m[1]) * scale).toFixed(4))}${m[2] ?? "s"}`;
+  }).join(";");
+}
+function retimeTree(node, scale) {
+  if (scale === 1) {
+    return node;
+  }
+  const walk = (n) => {
+    if (Array.isArray(n)) {
+      return n.map(walk);
+    }
+    if (!React.isValidElement(n)) {
+      return n;
+    }
+    const props = n.props;
+    const isHost = typeof n.type === "string";
+    const isFragment = n.type === React.Fragment;
+    if (!isHost && !isFragment) {
+      return n;
+    }
+    const next = {};
+    if (isHost && SMIL_ELEMENTS.has(n.type)) {
+      for (const key of TIME_PROPS) {
+        const v = props[key];
+        if (typeof v === "string" || typeof v === "number") {
+          next[key] = scaleTime(v, scale);
+        }
+      }
+    }
+    if (props.children !== void 0) {
+      next.children = React.Children.map(props.children, walk);
+    }
+    return Object.keys(next).length > 0 ? React.cloneElement(n, next) : n;
+  };
+  return walk(node);
+}
+function stillTree(node) {
+  const walk = (n) => {
+    if (Array.isArray(n)) {
+      return n.map(walk);
+    }
+    if (!React.isValidElement(n)) {
+      return n;
+    }
+    const props = n.props;
+    const isHost = typeof n.type === "string";
+    if (!isHost && n.type !== React.Fragment) {
+      return n;
+    }
+    const next = {};
+    if (isHost && SMIL_ELEMENTS.has(n.type)) {
+      next.begin = "0s";
+      next.dur = "0.001s";
+      next.repeatCount = "1";
+      next.repeatDur = void 0;
+      next.end = void 0;
+    }
+    if (props.children !== void 0) {
+      next.children = React.Children.map(props.children, walk);
+    }
+    return Object.keys(next).length > 0 ? React.cloneElement(n, next) : n;
+  };
+  return walk(node);
+}
+function motionTree(node, scale, still) {
+  return still ? stillTree(node) : retimeTree(node, scale);
+}
+export {
+  ANIMATION_SLOWDOWN,
+  animationScale,
+  durationScale,
+  motionTree,
+  retimeTree,
+  stillTree
+};

package/dist/esm/createIcon.js

@@ -1,5 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useSyncExternalStore } from "react";
+import { forwardRef, useId, useState, useSyncExternalStore } from "react";
+import { durationScale, stillTree, motionTree, animationScale } from "./animationSpeed.js";
+import { useStillMotion } from "./reducedMotion.js";
 import { sharpenTree, roundTree, wireTree, MINI_SCALE } from "./sharpen.js";
 import { generateSmilAnimation } from "./smilAnimations.js";
 import { BOX_PERFECT_STACK, renderStackChildren, NTD_ICON_MARK, PERFECT_STACK } from "./stacking.js";
@@ -24,11 +26,12 @@ function useColorScheme() {
   return useSyncExternalStore(subscribeColorScheme, getColorScheme, () => "light");
 }
 const BOX_CENTER = [12, 12];
-function renderGradientDef(id, preset, type, angle, animation) {
+function renderGradientDef(id, preset, type, angle, animation, timeScale = 1) {
   const stops = GRADIENT_PRESETS[preset];
   if (!stops) {
     return null;
   }
+  const loop = `${Number((3 * timeScale).toFixed(4))}s`;
   const stopEls = stops.map((color, i) => {
     const offset = `${Math.round(i / (stops.length - 1) * 100)}%`;
     const nextColor = stops[(i + 1) % stops.length];
@@ -38,7 +41,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "stop-color",
           values: `${color};${nextColor};${color}`,
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         }
       ) }, i);
@@ -58,7 +61,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
           type: "rotate",
           from: "0 12 12",
           to: "360 12 12",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "spin"
@@ -72,7 +75,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "x1",
           values: "-24;24;-24",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "shift-x1"
@@ -82,7 +85,7 @@ function renderGradientDef(id, preset, type, angle, animation) {
         {
           attributeName: "x2",
           values: "0;48;0",
-          dur: "3s",
+          dur: loop,
           repeatCount: "indefinite"
         },
         "shift-x2"
@@ -165,7 +168,13 @@ function renderCutoutShape(shape, fill, maskId) {
   }
 }
 function createIcon(options) {
-  const { displayName, viewBox = "0 0 24 24", paths, textCenter = BOX_CENTER } = options;
+  const {
+    displayName,
+    viewBox = "0 0 24 24",
+    paths,
+    textCenter = BOX_CENTER,
+    animated = false
+  } = options;
   const solidDuotone = (props) => paths.solid({ ...props, accentColor: props.secondaryColor, accentOpacity: 1 });
   const perfect = {
     x: options.perfectStackX ?? textCenter[0],
@@ -192,8 +201,13 @@ function createIcon(options) {
       strokeLinejoin: propLinejoin,
       animation,
       animationDuration,
+      animationSpeed,
+      animationMode = "loop",
+      playKey,
+      replayOnClick = false,
+      reducedMotion = "auto",
       smilAnimation,
-      smilDuration = 1,
+      smilDuration,
       smilRepeatCount = "indefinite",
       smilEasing = "ease-in-out",
       smilDelay = 0,
@@ -226,6 +240,8 @@ function createIcon(options) {
       const gradId = useId();
       const uid = useId();
       const center = { x: 12, y: 12 };
+      const still = useStillMotion(reducedMotion);
+      const [replays, setReplays] = useState(0);
       const colorScheme = useColorScheme();
       const adaptiveColor = lightColor && darkColor ? colorScheme === "dark" ? darkColor : lightColor : void 0;
       const primaryColor = adaptiveColor ?? (color ? `var(${SEMANTIC_COLOR_VARS[color]}, ${SEMANTIC_COLOR_DEFAULTS[color]})` : propPrimaryColor);
@@ -253,7 +269,12 @@ function createIcon(options) {
       const filterId = useId();
       const isCutout = variant === "cutout";
       const maskId = useId();
-      const classes = ["ntd-icon", animation ? `ntd-anim-${animation}` : "", className ?? ""].filter(Boolean).join(" ");
+      const classes = [
+        "ntd-icon",
+        animation && !still ? `ntd-anim-${animation}` : "",
+        reducedMotion === "ignore" ? "ntd-motion-ignore" : "",
+        className ?? ""
+      ].filter(Boolean).join(" ");
       const transforms = [];
       if (rotate) {
         transforms.push(`rotate(${rotate}deg)`);
@@ -269,26 +290,34 @@ function createIcon(options) {
       }
       const transformString = transforms.length > 0 ? transforms.join(" ") : void 0;
       const transitionValue = transition === true ? "transform 0.3s ease" : typeof transition === "string" ? `transform ${transition}` : void 0;
+      const timeScale = animationScale(animationSpeed);
       const animStyle = {
         // the variable carries the duration to the parts an icon animates inside itself
         ...animationDuration ? { animationDuration, "--ntd-anim-duration": animationDuration } : {},
+        // animations.css multiplies its times by it (default 2 there, the slowdown)
+        ...animationSpeed !== void 0 ? { "--ntd-anim-scale": String(timeScale) } : {},
+        // a looping animation once (1.3.18): animations.css repeats `var(--ntd-anim-iterations, infinite)`
+        ...animationMode === "single" ? { "--ntd-anim-iterations": "1" } : {},
         ...transformString ? { transform: transformString } : {},
         ...transformString ? { transformOrigin } : {},
         ...transitionValue ? { transition: transitionValue } : {},
         ...style
       };
-      const smilAnimationElements = smilAnimation ? generateSmilAnimation(
+      const smilGenerated = smilAnimation ? generateSmilAnimation(
         {
           type: smilAnimation,
-          duration: smilDuration,
+          // 1 s before 1.3.17 by default; a given smilDuration keeps its length
+          duration: (smilDuration ?? 1) * durationScale(smilDuration !== void 0, animationSpeed),
           repeatCount: smilRepeatCount,
           easing: smilEasing,
           delay: smilDelay
         },
         center
       ) : null;
+      const smilAnimationElements = still ? stillTree(smilGenerated) : smilGenerated;
       const needsSmilScaleWrapper = smilAnimation && ["heartbeat", "scale-pulse", "grow", "shrink", "rubber", "pop"].includes(smilAnimation);
       const rendered = isCutout ? renderCutoutShape(cutoutShape, gradient ? effectivePrimary : resolvedSecondary, maskId) : variant === "sharp" ? sharpenTree(renderer(renderProps)) : variant === "rounded" ? roundTree(renderer(renderProps)) : variant === "wireframe" ? wireTree(renderer(renderProps), effectivePrimary) : renderer(renderProps);
+      const paced = animated ? motionTree(rendered, timeScale, still) : rendered;
       const stacked = renderStackChildren(children, {
         variant,
         primaryColor: effectivePrimary,
@@ -300,9 +329,9 @@ function createIcon(options) {
         textSize
       });
       const drawn = stacked ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        rendered,
+        paced,
         stacked
-      ] }) : rendered;
+      ] }) : paced;
       const iconContent = variant === "mini" ? /* @__PURE__ */ jsx(
         "g",
         {
@@ -327,22 +356,36 @@ function createIcon(options) {
           "aria-hidden": title ? void 0 : true,
           "aria-label": title,
           ...rest,
+          onClick: replayOnClick ? (event) => {
+            setReplays((n) => n + 1);
+            rest.onClick?.(event);
+          } : rest.onClick,
           children: [
             title && /* @__PURE__ */ jsx("title", { children: title }),
-            gradient && /* @__PURE__ */ jsx("defs", { children: renderGradientDef(gradId, gradient, gradientType, gradientAngle, gradientAnimation) }),
+            gradient && /* @__PURE__ */ jsx("defs", { children: renderGradientDef(
+              gradId,
+              gradient,
+              gradientType,
+              gradientAngle,
+              still ? void 0 : gradientAnimation,
+              timeScale
+            ) }),
             is3d && /* @__PURE__ */ jsx("defs", { children: render3dFilterDef(filterId) }),
             isCutout && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
               /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white" }),
-              /* @__PURE__ */ jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: paths.solid({
-                ...renderProps,
-                primaryColor: "black",
-                secondaryColor: "black",
-                accentColor: "white",
-                primaryOpacity: 1,
-                secondaryOpacity: 1,
-                accentOpacity: 1,
-                uid: `${uid}m`
-              }) })
+              /* @__PURE__ */ jsx("g", { transform: "translate(12,12) scale(0.8) translate(-12,-12)", children: (() => {
+                const mask = paths.solid({
+                  ...renderProps,
+                  primaryColor: "black",
+                  secondaryColor: "black",
+                  accentColor: "white",
+                  primaryOpacity: 1,
+                  secondaryOpacity: 1,
+                  accentOpacity: 1,
+                  uid: `${uid}m`
+                });
+                return animated ? motionTree(mask, timeScale, still) : mask;
+              })() })
             ] }) }),
             smilAnimation ? needsSmilScaleWrapper ? /* @__PURE__ */ jsxs(
               "g",
@@ -359,7 +402,8 @@ function createIcon(options) {
               smilAnimationElements
             ] }) : is3d ? /* @__PURE__ */ jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent
           ]
-        }
+        },
+        `${playKey ?? ""}:${replays}`
       );
     }
   );