@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/smilAnimations.js

@@ -1,177 +1,398 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-/**
- * Default animation configurations.
- */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { durationScale } from "./animationSpeed.js";
 const DEFAULT_CONFIG = {
-    duration: 1,
-    repeatCount: 'indefinite',
-    easing: 'ease-in-out',
-    delay: 0,
-    fill: 'freeze',
+  duration: 1,
+  repeatCount: "indefinite",
+  easing: "ease-in-out",
+  delay: 0,
+  fill: "freeze"
 };
-/**
- * Maps easing names to SMIL calcMode and keySplines.
- */
 const EASING_MAP = {
-    linear: { calcMode: 'linear' },
-    ease: { calcMode: 'spline', keySplines: '0.25 0.1 0.25 1' },
-    'ease-in': { calcMode: 'spline', keySplines: '0.42 0 1 1' },
-    'ease-out': { calcMode: 'spline', keySplines: '0 0 0.58 1' },
-    'ease-in-out': { calcMode: 'spline', keySplines: '0.42 0 0.58 1' },
+  linear: { calcMode: "linear" },
+  ease: { calcMode: "spline", keySplines: "0.25 0.1 0.25 1" },
+  "ease-in": { calcMode: "spline", keySplines: "0.42 0 1 1" },
+  "ease-out": { calcMode: "spline", keySplines: "0 0 0.58 1" },
+  "ease-in-out": { calcMode: "spline", keySplines: "0.42 0 0.58 1" }
 };
-/**
- * Generates SMIL animation elements for a given animation type.
- *
- * @param config - Animation configuration
- * @param center - Center point for transforms (default: 12, 12 for 24x24 viewBox)
- * @returns React elements to be placed inside an SVG `<g>` or at root level
- */
 function generateSmilAnimation(config, center = { x: 12, y: 12 }) {
-    const { type, duration = DEFAULT_CONFIG.duration, repeatCount = DEFAULT_CONFIG.repeatCount, easing = DEFAULT_CONFIG.easing, delay = DEFAULT_CONFIG.delay, fill = DEFAULT_CONFIG.fill, targetColor, } = config;
-    const dur = `${duration}s`;
-    const begin = delay > 0 ? `${delay}s` : '0s';
-    const rep = repeatCount === 'indefinite' ? 'indefinite' : String(repeatCount);
-    const { calcMode, keySplines } = EASING_MAP[easing] || EASING_MAP.linear;
-    const baseProps = {
-        dur,
-        begin,
-        repeatCount: rep,
-        fill,
-        calcMode,
-        ...(keySplines && calcMode === 'spline' ? { keySplines, keyTimes: '0;1' } : {}),
-    };
-    switch (type) {
-        case 'spin':
-            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${center.x} ${center.y}`, to: `360 ${center.x} ${center.y}`, ...baseProps, calcMode: "linear" }));
-        case 'spin-reverse':
-            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `360 ${center.x} ${center.y}`, to: `0 ${center.x} ${center.y}`, ...baseProps, calcMode: "linear" }));
-        case 'pulse':
-            return jsx("animate", { attributeName: "opacity", values: "1;0.4;1", keyTimes: "0;0.5;1", ...baseProps });
-        case 'bounce':
-            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;0,-4;0,0", keyTimes: "0;0.5;1", ...baseProps }));
-        case 'shake':
-            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;-2,0;2,0;-2,0;2,0;0,0", keyTimes: "0;0.1;0.3;0.5;0.7;1", ...baseProps, keySplines: undefined, calcMode: "linear" }));
-        case 'float':
-            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;0,-3;0,0", keyTimes: "0;0.5;1", dur: `${duration * 2}s`, begin: begin, repeatCount: rep, fill: fill, calcMode: "spline", keySplines: "0.42 0 0.58 1;0.42 0 0.58 1" }));
-        case 'flip':
-            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: `0 ${center.x} ${center.y};180 ${center.x} ${center.y};360 ${center.x} ${center.y}`, keyTimes: "0;0.5;1", ...baseProps }));
-        case 'wiggle':
-            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: `0 ${center.x} ${center.y};-10 ${center.x} ${center.y};10 ${center.x} ${center.y};0 ${center.x} ${center.y}`, keyTimes: "0;0.25;0.75;1", ...baseProps }));
-        case 'swing':
-            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: `0 ${center.x} 0;15 ${center.x} 0;-10 ${center.x} 0;5 ${center.x} 0;0 ${center.x} 0`, keyTimes: "0;0.2;0.4;0.6;1", ...baseProps }));
-        case 'heartbeat':
-            return (jsx("animateTransform", { attributeName: "transform", type: "scale", values: "1;1.15;1;1.15;1", keyTimes: "0;0.14;0.28;0.42;1", ...baseProps, additive: "sum" }));
-        case 'scale-pulse':
-            return (jsx("animateTransform", { attributeName: "transform", type: "scale", values: "1;1.1;1", keyTimes: "0;0.5;1", ...baseProps, additive: "sum" }));
-        case 'grow':
-            return (jsx("animateTransform", { attributeName: "transform", type: "scale", from: "0", to: "1", ...baseProps, repeatCount: "1" }));
-        case 'shrink':
-            return (jsx("animateTransform", { attributeName: "transform", type: "scale", from: "1", to: "0", ...baseProps, repeatCount: "1" }));
-        case 'rubber':
-            return (jsx(Fragment, { children: jsx("animateTransform", { attributeName: "transform", type: "scale", values: "1,1;1.25,0.75;0.75,1.25;1.15,0.85;1,1", keyTimes: "0;0.3;0.5;0.7;1", ...baseProps, additive: "sum" }) }));
-        case 'pop':
-            return (jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0;1.2;1", keyTimes: "0;0.6;1", ...baseProps, repeatCount: "1", additive: "sum" }));
-        case 'fade':
-            return jsx("animate", { attributeName: "opacity", values: "0;1;0", keyTimes: "0;0.5;1", ...baseProps });
-        case 'blink':
-            return (jsx("animate", { attributeName: "opacity", values: "1;0;1", keyTimes: "0;0.5;1", dur: `${duration * 0.5}s`, begin: begin, repeatCount: rep, fill: fill, calcMode: "discrete" }));
-        case 'glow':
-            return (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", values: "0.6;1;0.6", keyTimes: "0;0.5;1", ...baseProps }), jsx("animate", { attributeName: "filter", values: "drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)", keyTimes: "0;0.5;1", ...baseProps })] }));
-        case 'slide-x':
-            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "-24,0;0,0;24,0", keyTimes: "0;0.5;1", ...baseProps }));
-        case 'slide-y':
-            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,-24;0,0;0,24", keyTimes: "0;0.5;1", ...baseProps }));
-        case 'orbit':
-            return (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${center.x} ${center.y}`, to: `360 ${center.x} ${center.y}`, ...baseProps, calcMode: "linear" }));
-        case 'wave':
-            return (jsx("animateTransform", { attributeName: "transform", type: "translate", values: "0,0;0,-2;0,2;0,-2;0,0", keyTimes: "0;0.25;0.5;0.75;1", dur: `${duration * 0.5}s`, begin: begin, repeatCount: rep, fill: fill, calcMode: "spline", keySplines: "0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" }));
-        case 'draw':
-            return (jsxs(Fragment, { children: [jsx("animate", { attributeName: "stroke-dashoffset", from: "100", to: "0", ...baseProps }), jsx("set", { attributeName: "stroke-dasharray", to: "100" })] }));
-        case 'draw-reverse':
-            return (jsxs(Fragment, { children: [jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "100", ...baseProps }), jsx("set", { attributeName: "stroke-dasharray", to: "100" })] }));
-        case 'color-shift':
-            return (jsx("animate", { attributeName: "fill", values: `currentColor;${targetColor || '#ff6b6b'};currentColor`, keyTimes: "0;0.5;1", ...baseProps }));
-        default:
-            return null;
-    }
+  const {
+    type,
+    duration = DEFAULT_CONFIG.duration,
+    repeatCount = DEFAULT_CONFIG.repeatCount,
+    easing = DEFAULT_CONFIG.easing,
+    delay = DEFAULT_CONFIG.delay,
+    fill = DEFAULT_CONFIG.fill,
+    targetColor
+  } = config;
+  const dur = `${duration}s`;
+  const begin = delay > 0 ? `${delay}s` : "0s";
+  const rep = repeatCount === "indefinite" ? "indefinite" : String(repeatCount);
+  const { calcMode, keySplines } = EASING_MAP[easing] || EASING_MAP.linear;
+  const baseProps = {
+    dur,
+    begin,
+    repeatCount: rep,
+    fill,
+    calcMode,
+    ...keySplines && calcMode === "spline" ? { keySplines, keyTimes: "0;1" } : {}
+  };
+  switch (type) {
+    case "spin":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "rotate",
+          from: `0 ${center.x} ${center.y}`,
+          to: `360 ${center.x} ${center.y}`,
+          ...baseProps,
+          calcMode: "linear"
+        }
+      );
+    case "spin-reverse":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "rotate",
+          from: `360 ${center.x} ${center.y}`,
+          to: `0 ${center.x} ${center.y}`,
+          ...baseProps,
+          calcMode: "linear"
+        }
+      );
+    case "pulse":
+      return /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "1;0.4;1", keyTimes: "0;0.5;1", ...baseProps });
+    case "bounce":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0,0;0,-4;0,0",
+          keyTimes: "0;0.5;1",
+          ...baseProps
+        }
+      );
+    case "shake":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0,0;-2,0;2,0;-2,0;2,0;0,0",
+          keyTimes: "0;0.1;0.3;0.5;0.7;1",
+          ...baseProps,
+          keySplines: void 0,
+          calcMode: "linear"
+        }
+      );
+    case "float":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0,0;0,-3;0,0",
+          keyTimes: "0;0.5;1",
+          dur: `${duration * 2}s`,
+          begin,
+          repeatCount: rep,
+          fill,
+          calcMode: "spline",
+          keySplines: "0.42 0 0.58 1;0.42 0 0.58 1"
+        }
+      );
+    case "flip":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "rotate",
+          values: `0 ${center.x} ${center.y};180 ${center.x} ${center.y};360 ${center.x} ${center.y}`,
+          keyTimes: "0;0.5;1",
+          ...baseProps
+        }
+      );
+    case "wiggle":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "rotate",
+          values: `0 ${center.x} ${center.y};-10 ${center.x} ${center.y};10 ${center.x} ${center.y};0 ${center.x} ${center.y}`,
+          keyTimes: "0;0.25;0.75;1",
+          ...baseProps
+        }
+      );
+    case "swing":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "rotate",
+          values: `0 ${center.x} 0;15 ${center.x} 0;-10 ${center.x} 0;5 ${center.x} 0;0 ${center.x} 0`,
+          keyTimes: "0;0.2;0.4;0.6;1",
+          ...baseProps
+        }
+      );
+    case "heartbeat":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "scale",
+          values: "1;1.15;1;1.15;1",
+          keyTimes: "0;0.14;0.28;0.42;1",
+          ...baseProps,
+          additive: "sum"
+        }
+      );
+    case "scale-pulse":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "scale",
+          values: "1;1.1;1",
+          keyTimes: "0;0.5;1",
+          ...baseProps,
+          additive: "sum"
+        }
+      );
+    case "grow":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "scale",
+          from: "0",
+          to: "1",
+          ...baseProps,
+          repeatCount: "1"
+        }
+      );
+    case "shrink":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "scale",
+          from: "1",
+          to: "0",
+          ...baseProps,
+          repeatCount: "1"
+        }
+      );
+    case "rubber":
+      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "scale",
+          values: "1,1;1.25,0.75;0.75,1.25;1.15,0.85;1,1",
+          keyTimes: "0;0.3;0.5;0.7;1",
+          ...baseProps,
+          additive: "sum"
+        }
+      ) });
+    case "pop":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "scale",
+          values: "0;1.2;1",
+          keyTimes: "0;0.6;1",
+          ...baseProps,
+          repeatCount: "1",
+          additive: "sum"
+        }
+      );
+    case "fade":
+      return /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0;1;0", keyTimes: "0;0.5;1", ...baseProps });
+    case "blink":
+      return /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "opacity",
+          values: "1;0;1",
+          keyTimes: "0;0.5;1",
+          dur: `${duration * 0.5}s`,
+          begin,
+          repeatCount: rep,
+          fill,
+          calcMode: "discrete"
+        }
+      );
+    case "glow":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.6;1;0.6", keyTimes: "0;0.5;1", ...baseProps }),
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "filter",
+            values: "drop-shadow(0 0 2px currentColor);drop-shadow(0 0 8px currentColor);drop-shadow(0 0 2px currentColor)",
+            keyTimes: "0;0.5;1",
+            ...baseProps
+          }
+        )
+      ] });
+    case "slide-x":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "-24,0;0,0;24,0",
+          keyTimes: "0;0.5;1",
+          ...baseProps
+        }
+      );
+    case "slide-y":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0,-24;0,0;0,24",
+          keyTimes: "0;0.5;1",
+          ...baseProps
+        }
+      );
+    case "orbit":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "rotate",
+          from: `0 ${center.x} ${center.y}`,
+          to: `360 ${center.x} ${center.y}`,
+          ...baseProps,
+          calcMode: "linear"
+        }
+      );
+    case "wave":
+      return /* @__PURE__ */ jsx(
+        "animateTransform",
+        {
+          attributeName: "transform",
+          type: "translate",
+          values: "0,0;0,-2;0,2;0,-2;0,0",
+          keyTimes: "0;0.25;0.5;0.75;1",
+          dur: `${duration * 0.5}s`,
+          begin,
+          repeatCount: rep,
+          fill,
+          calcMode: "spline",
+          keySplines: "0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1"
+        }
+      );
+    case "draw":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "100", to: "0", ...baseProps }),
+        /* @__PURE__ */ jsx("set", { attributeName: "stroke-dasharray", to: "100" })
+      ] });
+    case "draw-reverse":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "100", ...baseProps }),
+        /* @__PURE__ */ jsx("set", { attributeName: "stroke-dasharray", to: "100" })
+      ] });
+    case "color-shift":
+      return /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "fill",
+          values: `currentColor;${targetColor || "#ff6b6b"};currentColor`,
+          keyTimes: "0;0.5;1",
+          ...baseProps
+        }
+      );
+    default:
+      return null;
+  }
 }
-/**
- * Wraps icon content in a `<g>` element with SMIL animations applied.
- *
- * @example
- * ```tsx
- * <svg viewBox="0 0 24 24">
- *   <SmilAnimationWrapper animation="spin" duration={2}>
- *     <path d="M12 2l3 7h7l-5.5 4 2 7L12 16l-6.5 4 2-7L2 9h7z" />
- *   </SmilAnimationWrapper>
- * </svg>
- * ```
- */
-function SmilAnimationWrapper({ animation, duration = 1, repeatCount = 'indefinite', easing = 'ease-in-out', delay = 0, center = { x: 12, y: 12 }, children, }) {
-    const animationElements = generateSmilAnimation({ type: animation, duration, repeatCount, easing, delay }, center);
-    // For scale animations, we need to translate to origin, scale, then translate back
-    const needsOriginTransform = [
-        'heartbeat',
-        'scale-pulse',
-        'grow',
-        'shrink',
-        'rubber',
-        'pop',
-    ].includes(animation);
-    if (needsOriginTransform) {
-        return (jsxs("g", { transform: `translate(${center.x}, ${center.y})`, children: [jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children: children }), animationElements] }));
-    }
-    return (jsxs("g", { children: [children, animationElements] }));
+function SmilAnimationWrapper({
+  animation,
+  duration,
+  animationSpeed,
+  repeatCount = "indefinite",
+  easing = "ease-in-out",
+  delay = 0,
+  center = { x: 12, y: 12 },
+  children
+}) {
+  const animationElements = generateSmilAnimation(
+    {
+      type: animation,
+      // 1 s before 1.3.17; a given duration keeps its length
+      duration: (duration ?? 1) * durationScale(duration !== void 0, animationSpeed),
+      repeatCount,
+      easing,
+      delay
+    },
+    center
+  );
+  const needsOriginTransform = [
+    "heartbeat",
+    "scale-pulse",
+    "grow",
+    "shrink",
+    "rubber",
+    "pop"
+  ].includes(animation);
+  if (needsOriginTransform) {
+    return /* @__PURE__ */ jsxs("g", { transform: `translate(${center.x}, ${center.y})`, children: [
+      /* @__PURE__ */ jsx("g", { transform: `translate(-${center.x}, -${center.y})`, children }),
+      animationElements
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("g", { children: [
+    children,
+    animationElements
+  ] });
 }
-/**
- * Creates a SMIL animation definition that can be referenced by id.
- * Useful for applying the same animation to multiple elements.
- */
 function createSmilAnimationDef(id, config) {
-    return (jsx("defs", { children: jsx("g", { id: id, children: generateSmilAnimation(config) }) }));
+  return /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("g", { id, children: generateSmilAnimation(config) }) });
 }
-/**
- * Utility to check if SMIL animations are supported in the current environment.
- */
 function isSmilSupported() {
-    if (typeof document === 'undefined') {
-        return false;
-    }
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    return (typeof svg.animate === 'function' ||
-        'animateTransform' in document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform'));
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  return typeof svg.animate === "function" || "animateTransform" in document.createElementNS("http://www.w3.org/2000/svg", "animateTransform");
 }
-/**
- * All available SMIL animation types as an array.
- * Useful for documentation and UI components like NiceIconPicker.
- */
 const SMIL_ANIMATION_TYPES = [
-    'spin',
-    'spin-reverse',
-    'pulse',
-    'bounce',
-    'shake',
-    'float',
-    'flip',
-    'wiggle',
-    'swing',
-    'heartbeat',
-    'scale-pulse',
-    'grow',
-    'shrink',
-    'rubber',
-    'pop',
-    'fade',
-    'blink',
-    'glow',
-    'slide-x',
-    'slide-y',
-    'orbit',
-    'wave',
-    'draw',
-    'draw-reverse',
-    'color-shift',
+  "spin",
+  "spin-reverse",
+  "pulse",
+  "bounce",
+  "shake",
+  "float",
+  "flip",
+  "wiggle",
+  "swing",
+  "heartbeat",
+  "scale-pulse",
+  "grow",
+  "shrink",
+  "rubber",
+  "pop",
+  "fade",
+  "blink",
+  "glow",
+  "slide-x",
+  "slide-y",
+  "orbit",
+  "wave",
+  "draw",
+  "draw-reverse",
+  "color-shift"
 ];
-
-export { SMIL_ANIMATION_TYPES, SmilAnimationWrapper, createSmilAnimationDef, generateSmilAnimation, isSmilSupported };
+export {
+  SMIL_ANIMATION_TYPES,
+  SmilAnimationWrapper,
+  createSmilAnimationDef,
+  generateSmilAnimation,
+  isSmilSupported
+};