@nice2dev/icons 1.3.17 → 1.4.0

package/dist/esm/iconStyles.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
-import { retimeTree, durationScale } from "./animationSpeed.js";
+import { motionTree, durationScale } from "./animationSpeed.js";
+import { useStillMotion } from "./reducedMotion.js";
 const wrapperBase = {
   position: "relative",
   display: "inline-flex",
@@ -19,6 +20,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       vineColor = "#22c55e",
       petalColor = "#f472b6",
@@ -26,6 +28,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 2;
       const lc = leafColor ?? vineColor;
       const dur = `${duration}s`;
@@ -67,7 +70,7 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const dashLen = 250;
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           children,
           /* @__PURE__ */ jsxs(
@@ -199,7 +202,8 @@ const NtdIconFloral = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -212,12 +216,14 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       colors,
       sparkleColor = "#fbbf24",
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 1.5;
       const cols = colors ?? ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ec4899"];
       const dur = `${duration * 0.6}s`;
@@ -268,7 +274,7 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
           { cx: 97, cy: 45, r: 1.1 }
         ] : []
       ];
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           children,
           /* @__PURE__ */ jsxs(
@@ -385,7 +391,8 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -398,6 +405,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       glowColor = "#0ff",
       secondaryGlow,
@@ -405,6 +413,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 4;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const glow2 = secondaryGlow ?? glowColor;
@@ -418,7 +427,7 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
       ].filter(Boolean).join(" ");
       const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
       const animName = `ntd_neon_${uid}`;
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           animate && flicker && /* @__PURE__ */ jsx("style", { children: `
             @keyframes ${animName} {
@@ -438,7 +447,8 @@ const NtdIconNeon = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -451,12 +461,14 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       strokeColor = "#374151",
       roughness = 2,
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 1.5;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const filterId = `ntd_sketch_${uid}`;
@@ -473,7 +485,7 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
         { x1: 10, y1: 12, x2: 16, y2: 10 },
         { x1: 84, y1: 12, x2: 90, y2: 10 }
       ];
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
             /* @__PURE__ */ jsx(
@@ -580,7 +592,8 @@ const NtdIconSketch = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -593,12 +606,14 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       tintColor = "#818cf8",
       bleedColor = "#f0abfc",
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 2;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const filterId = `ntd_wc_${uid}`;
@@ -628,7 +643,7 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
           { cx: 92, cy: 55, r: 1 }
         ] : []
       ];
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxs("defs", { children: [
             /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
@@ -738,7 +753,8 @@ const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -751,6 +767,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       starColor = "#e2e8f0",
       nebulaColor = "#7c3aed",
@@ -758,6 +775,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 2;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const nebulaFilter = `ntd_cosm_${uid}`;
@@ -809,7 +827,7 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const lineLen = 80;
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: nebulaFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
           /* @__PURE__ */ jsxs(
@@ -958,7 +976,8 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -971,6 +990,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       brassColor = "#b45309",
       pipeColor = "#78350f",
@@ -978,6 +998,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 3;
       const makeGear = (cx, cy, r, teeth) => {
         const inner = r * 0.68;
@@ -1030,7 +1051,7 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
         { cx: 55, cy: -4, r: 2.2 },
         { cx: 47, cy: -10, r: 1.6 }
       ];
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxs(
             "svg",
@@ -1135,7 +1156,8 @@ const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -1148,12 +1170,14 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       crystalColor = "#bae6fd",
       glowColor = "#38bdf8",
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 2;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const glowFilterId = `ntd_frost_${uid}`;
@@ -1211,7 +1235,7 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
         { cx: 14, cy: 96, r: 1 },
         { cx: 86, cy: 96, r: 1.1 }
       ];
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: glowFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }),
           /* @__PURE__ */ jsxs(
@@ -1330,7 +1354,8 @@ const NtdIconFrost = /* @__PURE__ */ Object.assign(
           ),
           /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -1343,6 +1368,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       pixelColor = "#22d3ee",
       scanlineColor = "#000000",
@@ -1350,6 +1376,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 0.5;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const scanAnimName = `ntd_pixel_scan_${uid}`;
@@ -1388,7 +1415,7 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
         { x: 48, y: 96 }
       ] : [];
       const allPixels = intensity === "subtle" ? basePixels.filter((_, i) => i % 2 === 0) : [...basePixels, ...extraPixels];
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           animate && /* @__PURE__ */ jsx("style", { children: `
             @keyframes ${scanAnimName} {
@@ -1470,7 +1497,8 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
             }
           )
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -1483,6 +1511,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       cellColor = "#86efac",
       membraneColor = "#4ade80",
@@ -1490,6 +1519,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 3;
       const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
       const blobFilterId = `ntd_org_${uid}`;
@@ -1520,7 +1550,7 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
         { cx: 60, cy: 95, r: 1.5 }
       ];
       const bubbleCount = intensity === "subtle" ? 2 : intensity === "dense" ? 6 : 4;
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: blobFilterId, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }),
           /* @__PURE__ */ jsxs(
@@ -1640,7 +1670,8 @@ const NtdIconOrganic = /* @__PURE__ */ Object.assign(
           ),
           /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),
@@ -1653,6 +1684,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
       animate = true,
       duration: durationProp,
       animationSpeed,
+      reducedMotion,
       intensity = "normal",
       primaryColor = "#6366f1",
       secondaryColor = "#8b5cf6",
@@ -1660,6 +1692,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
       className,
       style
     }, ref) => {
+      const still = useStillMotion(reducedMotion);
       const duration = durationProp ?? 8;
       const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
         const a = (i * 120 - 90 + rotDeg) * Math.PI / 180;
@@ -1692,7 +1725,7 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
         ] : []
       ];
       const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
-      return retimeTree(
+      return motionTree(
         /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
           /* @__PURE__ */ jsxs(
             "svg",
@@ -1786,7 +1819,8 @@ const NtdIconGeometric = /* @__PURE__ */ Object.assign(
           ),
           /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
         ] }),
-        durationScale(durationProp !== void 0, animationSpeed)
+        durationScale(durationProp !== void 0, animationSpeed),
+        still
       );
     }
   ),