@nice2dev/icons 1.3.17 → 1.4.0

package/dist/cjs/reducedMotion.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const QUERY = "(prefers-reduced-motion: reduce)";
+const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+function subscribe(callback) {
+  if (!hasMatchMedia()) {
+    return () => {
+    };
+  }
+  const mq = window.matchMedia(QUERY);
+  if (typeof mq.addEventListener === "function") {
+    mq.addEventListener("change", callback);
+    return () => mq.removeEventListener("change", callback);
+  }
+  mq.addListener?.(callback);
+  return () => mq.removeListener?.(callback);
+}
+function snapshot() {
+  return hasMatchMedia() ? window.matchMedia(QUERY).matches === true : false;
+}
+function usePrefersReducedMotion() {
+  return React.useSyncExternalStore(subscribe, snapshot, () => false);
+}
+function useStillMotion(mode) {
+  const reduce = usePrefersReducedMotion();
+  return reduce && mode !== "ignore";
+}
+exports.usePrefersReducedMotion = usePrefersReducedMotion;
+exports.useStillMotion = useStillMotion;

package/dist/cjs/smilAnimations.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const animationSpeed = require("./animationSpeed.js");
+const reducedMotion = require("./reducedMotion.js");
 const DEFAULT_CONFIG = {
   duration: 1,
   repeatCount: "indefinite",
@@ -322,9 +323,11 @@ function SmilAnimationWrapper({
   easing = "ease-in-out",
   delay = 0,
   center = { x: 12, y: 12 },
+  reducedMotion: reducedMotion$1,
   children
 }) {
-  const animationElements = generateSmilAnimation(
+  const still = reducedMotion.useStillMotion(reducedMotion$1);
+  const generated = generateSmilAnimation(
     {
       type: animation,
       // 1 s before 1.3.17; a given duration keeps its length
@@ -335,6 +338,7 @@ function SmilAnimationWrapper({
     },
     center
   );
+  const animationElements = still ? animationSpeed.stillTree(generated) : generated;
   const needsOriginTransform = [
     "heartbeat",
     "scale-pulse",

package/dist/cjs/utilities.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const React = require("react");
+const reducedMotion = require("./reducedMotion.js");
 /**
  * @file utilities.ts
  * @description Utility hooks and functions for @nice2dev/icons
@@ -87,31 +88,8 @@ function useIcon(iconName, options = {}) {
   }, [iconName, cache, fallback]);
   return state;
 }
-function subscribeToReducedMotion(callback) {
-  if (typeof window === "undefined") {
-    return () => {
-    };
-  }
-  const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-  const handler = () => callback();
-  mediaQuery.addEventListener("change", handler);
-  return () => mediaQuery.removeEventListener("change", handler);
-}
-function getReducedMotionSnapshot() {
-  if (typeof window === "undefined") {
-    return false;
-  }
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function getReducedMotionServerSnapshot() {
-  return false;
-}
 function useReducedMotion() {
-  return React.useSyncExternalStore(
-    subscribeToReducedMotion,
-    getReducedMotionSnapshot,
-    getReducedMotionServerSnapshot
-  );
+  return reducedMotion.usePrefersReducedMotion();
 }
 async function preloadIcons(iconNames) {
   const results = /* @__PURE__ */ new Map();
@@ -145,7 +123,8 @@ function withReducedMotionProps(props, prefersReducedMotion) {
     ...props,
     animation: void 0,
     animationDuration: void 0,
-    gradientAnimation: void 0
+    gradientAnimation: void 0,
+    smilAnimation: void 0
   };
 }
 function createAccessibleIconProps(options) {

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

@@ -61,9 +61,42 @@ function retimeTree(node, scale) {
   };
   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,
-  retimeTree
+  motionTree,
+  retimeTree,
+  stillTree
 };

package/dist/esm/createIcon.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useId, useSyncExternalStore } from "react";
-import { durationScale, retimeTree, animationScale } from "./animationSpeed.js";
+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";
@@ -201,6 +202,10 @@ function createIcon(options) {
       animation,
       animationDuration,
       animationSpeed,
+      animationMode = "loop",
+      playKey,
+      replayOnClick = false,
+      reducedMotion = "auto",
       smilAnimation,
       smilDuration,
       smilRepeatCount = "indefinite",
@@ -235,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);
@@ -262,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)`);
@@ -284,12 +296,14 @@ function createIcon(options) {
         ...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,
           // 1 s before 1.3.17 by default; a given smilDuration keeps its length
@@ -300,9 +314,10 @@ function createIcon(options) {
         },
         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 ? retimeTree(rendered, timeScale) : rendered;
+      const paced = animated ? motionTree(rendered, timeScale, still) : rendered;
       const stacked = renderStackChildren(children, {
         variant,
         primaryColor: effectivePrimary,
@@ -341,6 +356,10 @@ 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(
@@ -348,7 +367,7 @@ function createIcon(options) {
               gradient,
               gradientType,
               gradientAngle,
-              gradientAnimation,
+              still ? void 0 : gradientAnimation,
               timeScale
             ) }),
             is3d && /* @__PURE__ */ jsx("defs", { children: render3dFilterDef(filterId) }),
@@ -365,7 +384,7 @@ function createIcon(options) {
                   accentOpacity: 1,
                   uid: `${uid}m`
                 });
-                return animated ? retimeTree(mask, timeScale) : mask;
+                return animated ? motionTree(mask, timeScale, still) : mask;
               })() })
             ] }) }),
             smilAnimation ? needsSmilScaleWrapper ? /* @__PURE__ */ jsxs(
@@ -383,7 +402,8 @@ function createIcon(options) {
               smilAnimationElements
             ] }) : is3d ? /* @__PURE__ */ jsx("g", { filter: `url(#${filterId})`, children: iconContent }) : iconContent
           ]
-        }
+        },
+        `${playKey ?? ""}:${replays}`
       );
     }
   );