@nice2dev/icons 1.0.0 → 1.0.3

package/dist/esm/iconStyles.js

@@ -0,0 +1,585 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+
+// ────────────────── Shared styles ──────────────────
+const wrapperBase = {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const overlayBase = {
+    position: 'absolute',
+    pointerEvents: 'none',
+    overflow: 'visible',
+};
+// ══════════════════════════════════════════════════════
+//  1. NtdIconFloral 🌸
+//  Botanical vines, leaves & flowers wrapping the icon
+// ══════════════════════════════════════════════════════
+const NtdIconFloral = forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', vineColor = '#22c55e', petalColor = '#f472b6', leafColor, className, style, }, ref) => {
+    const lc = leafColor !== null && leafColor !== void 0 ? leafColor : vineColor;
+    const dur = `${duration}s`;
+    const halfDur = `${duration * 0.5}s`;
+    const bloomAt = `${duration * 0.55}s`;
+    const flowerAt = `${duration * 0.75}s`;
+    // Vine paths (viewBox 0 0 100 100, icon occupies ~20-80)
+    const vine1 = 'M12,88 C6,72 4,52 10,38 C16,24 28,14 42,10';
+    const vine2 = 'M88,12 C94,28 96,48 90,62 C84,76 72,86 58,90';
+    const vine3 = 'M18,8 C32,4 52,2 68,8';
+    const vine4 = 'M82,92 C68,96 48,98 32,92';
+    const showExtra = intensity !== 'subtle';
+    // Teardrop leaf
+    const leafD = 'M0,-4 C2.5,-3.5 4.5,-1 4.5,1 C4.5,3 2,5 0,3 C-1.5,1.5 -1.5,-2.5 0,-4Z';
+    const baseLeaves = [
+        { x: 10, y: 38, a: -50 },
+        { x: 28, y: 14, a: 30 },
+        { x: 90, y: 62, a: 140 },
+        { x: 72, y: 86, a: -150 },
+    ];
+    const denseLeaves = intensity === 'dense'
+        ? [
+            { x: 6, y: 60, a: -80 },
+            { x: 94, y: 40, a: 100 },
+            { x: 50, y: 4, a: 5 },
+            { x: 50, y: 96, a: 175 },
+        ]
+        : [];
+    const allLeaves = [...baseLeaves, ...denseLeaves];
+    // 5-petal flower helper
+    const petalOffsets = [
+        [0, -1],
+        [0.95, -0.31],
+        [0.59, 0.81],
+        [-0.59, 0.81],
+        [-0.95, -0.31],
+    ];
+    const flowerPositions = [
+        { x: 42, y: 10, r: 3.5 },
+        ...(intensity !== 'subtle' ? [{ x: 58, y: 90, r: 3 }] : []),
+        ...(intensity === 'dense'
+            ? [
+                { x: 8, y: 55, r: 2.5 },
+                { x: 92, y: 45, r: 2.5 },
+            ]
+            : []),
+    ];
+    const dashLen = 250;
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [children, jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%' }, "aria-hidden": true, children: [[vine1, vine2, ...(showExtra ? [vine3, vine4] : [])].map((d, i) => (jsx("path", { d: d, fill: "none", stroke: vineColor, strokeWidth: i < 2 ? 1.5 : 1, strokeLinecap: "round", opacity: i < 2 ? 0.85 : 0.55, ...(animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {}), children: animate && (jsx("animate", { attributeName: "stroke-dashoffset", from: `${dashLen}`, to: "0", dur: dur, fill: "freeze", begin: i < 2 ? '0s' : `${duration * 0.3}s` })) }, `v${i}`))), allLeaves.map((l, i) => (jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: jsxs("g", { opacity: animate ? 0 : 0.8, children: [jsx("path", { d: leafD, fill: lc }), jsx("line", { x1: 0, y1: -3, x2: 0, y2: 2.5, stroke: lc, strokeWidth: "0.4", opacity: 0.4 }), animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.8", dur: halfDur, begin: bloomAt, fill: "freeze" }), jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0 0;1 1", keyTimes: "0;1", keySplines: "0.34 1.56 0.64 1", calcMode: "spline", dur: halfDur, begin: bloomAt, fill: "freeze" })] }))] }) }, `l${i}`))), flowerPositions.map((f, fi) => (jsxs("g", { opacity: animate ? 0 : 1, children: [petalOffsets.map(([ox, oy], pi) => (jsx("circle", { cx: f.x + ox * f.r, cy: f.y + oy * f.r, r: f.r * 0.5, fill: petalColor, opacity: 0.85 }, pi))), jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }), animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "1", dur: halfDur, begin: flowerAt, fill: "freeze" }), jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0.3 0.3;1 1", keyTimes: "0;1", keySplines: "0.34 1.56 0.64 1", calcMode: "spline", dur: halfDur, begin: flowerAt, fill: "freeze" })] }))] }, `f${fi}`))), animate && (jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 50 50;1 50 50;-1 50 50;0 50 50", dur: "4s", repeatCount: "indefinite", begin: `${duration}s` }))] })] }));
+});
+NtdIconFloral.displayName = 'NtdIconFloral';
+// ══════════════════════════════════════════════════════
+//  2. NtdIconFestive 🎉
+//  Confetti burst, stars & sparkles
+// ══════════════════════════════════════════════════════
+const NtdIconFestive = forwardRef(({ children, animate = true, duration = 1.5, intensity = 'normal', colors, sparkleColor = '#fbbf24', className, style, }, ref) => {
+    const cols = colors !== null && colors !== void 0 ? colors : ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899'];
+    const dur = `${duration * 0.6}s`;
+    // Confetti pieces: position relative to center, rotation, color index
+    const baseConfetti = [
+        { x: 15, y: 15, r: 45, ci: 0 },
+        { x: 80, y: 10, r: -30, ci: 1 },
+        { x: 90, y: 75, r: 60, ci: 2 },
+        { x: 10, y: 80, r: -45, ci: 3 },
+        { x: 50, y: 5, r: 20, ci: 4 },
+        { x: 50, y: 95, r: -15, ci: 5 },
+        { x: 5, y: 50, r: 75, ci: 0 },
+        { x: 95, y: 50, r: -60, ci: 1 },
+    ];
+    const denseConfetti = intensity === 'dense'
+        ? [
+            { x: 30, y: 5, r: 35, ci: 2 },
+            { x: 70, y: 5, r: -25, ci: 3 },
+            { x: 30, y: 95, r: 50, ci: 4 },
+            { x: 70, y: 95, r: -40, ci: 5 },
+            { x: 5, y: 30, r: 65, ci: 0 },
+            { x: 95, y: 30, r: -55, ci: 1 },
+            { x: 5, y: 70, r: 40, ci: 2 },
+            { x: 95, y: 70, r: -35, ci: 3 },
+        ]
+        : [];
+    const allConfetti = [
+        ...(intensity === 'subtle' ? baseConfetti.slice(0, 4) : baseConfetti),
+        ...denseConfetti,
+    ];
+    // 4-point star path
+    const starD = 'M0,-5 L1.2,-1.2 L5,0 L1.2,1.2 L0,5 L-1.2,1.2 L-5,0 L-1.2,-1.2Z';
+    const stars = [
+        { x: 20, y: 8, s: 0.6 },
+        { x: 85, y: 20, s: 0.5 },
+        ...(intensity !== 'subtle'
+            ? [
+                { x: 15, y: 85, s: 0.5 },
+                { x: 80, y: 88, s: 0.4 },
+            ]
+            : []),
+        ...(intensity === 'dense'
+            ? [
+                { x: 50, y: 2, s: 0.7 },
+                { x: 95, y: 55, s: 0.45 },
+            ]
+            : []),
+    ];
+    // Sparkle dots
+    const sparkles = [
+        { cx: 8, cy: 12, r: 1.5 },
+        { cx: 92, cy: 88, r: 1.2 },
+        { cx: 45, cy: 2, r: 1 },
+        { cx: 55, cy: 98, r: 1 },
+        ...(intensity !== 'subtle'
+            ? [
+                { cx: 3, cy: 55, r: 1.3 },
+                { cx: 97, cy: 45, r: 1.1 },
+            ]
+            : []),
+    ];
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [children, jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%' }, "aria-hidden": true, children: [allConfetti.map((c, i) => {
+                        const delay = `${(i * 0.07).toFixed(2)}s`;
+                        const col = cols[c.ci % cols.length];
+                        return (jsx("g", { transform: "translate(50,50)", children: jsxs("g", { opacity: animate ? 0 : 0.85, children: [jsx("rect", { x: c.x - 50 - 1.5, y: c.y - 50 - 3, width: 3, height: 6, rx: 0.5, fill: col, transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})` }), animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.85", dur: "0.4s", begin: delay, fill: "freeze" }), jsx("animateTransform", { attributeName: "transform", type: "scale", values: "0 0;1 1", keyTimes: "0;1", keySplines: "0.34 1.56 0.64 1", calcMode: "spline", dur: dur, begin: delay, fill: "freeze" })] }))] }) }, `c${i}`));
+                    }), stars.map((s, i) => (jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && (jsx("animate", { attributeName: "opacity", from: "0", to: "0.9", dur: "0.5s", begin: `${(i * 0.15 + 0.3).toFixed(2)}s`, fill: "freeze" })) }), animate && (jsx("animateTransform", { attributeName: "transform", type: "scale", values: `${s.s};${s.s * 1.3};${s.s}`, dur: "1.5s", repeatCount: "indefinite", begin: `${duration + 0.5}s` }))] }, `s${i}`))), sparkles.map((sp, i) => (jsx("circle", { cx: sp.cx, cy: sp.cy, r: sp.r, fill: sparkleColor, opacity: animate ? 0 : 0.7, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.7", dur: "0.3s", begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`, fill: "freeze" }), jsx("animate", { attributeName: "opacity", values: "0.3;0.9;0.3", dur: `${1 + i * 0.3}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `sp${i}`)))] })] }));
+});
+NtdIconFestive.displayName = 'NtdIconFestive';
+// ══════════════════════════════════════════════════════
+//  3. NtdIconNeon 💡
+//  Multi-layered glow with neon sign flicker
+// ══════════════════════════════════════════════════════
+const NtdIconNeon = forwardRef(({ children, animate = true, duration = 4, intensity = 'normal', glowColor = '#0ff', secondaryGlow, flicker = true, className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const glow2 = secondaryGlow !== null && secondaryGlow !== void 0 ? secondaryGlow : glowColor;
+    const blur = intensity === 'dense' ? 8 : intensity === 'subtle' ? 3 : 5;
+    const spread = intensity === 'dense' ? 20 : intensity === 'subtle' ? 8 : 12;
+    const filterValue = [
+        `drop-shadow(0 0 ${blur * 0.3}px ${glowColor})`,
+        `drop-shadow(0 0 ${blur}px ${glowColor})`,
+        `drop-shadow(0 0 ${spread}px ${glow2}80)`,
+        intensity === 'dense' ? `drop-shadow(0 0 ${spread * 1.5}px ${glow2}40)` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
+    const animName = `ntd_neon_${uid}`;
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [animate && flicker && (jsx("style", { children: `
+            @keyframes ${animName} {
+              0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
+              20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
+            }
+          ` })), jsx("span", { style: {
+                    display: 'inline-flex',
+                    filter: filterValue,
+                    ...(animate && flicker
+                        ? { animation: `${animName} ${duration}s infinite` }
+                        : {}),
+                }, children: children })] }));
+});
+NtdIconNeon.displayName = 'NtdIconNeon';
+// ══════════════════════════════════════════════════════
+//  4. NtdIconSketch ✏️
+//  Hand-drawn look with SVG turbulence + scribble overlay
+// ══════════════════════════════════════════════════════
+const NtdIconSketch = forwardRef(({ children, animate = true, duration = 1.5, intensity = 'normal', strokeColor = '#374151', roughness = 2, className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const filterId = `ntd_sketch_${uid}`;
+    const dur = `${duration}s`;
+    const dashLen = 100;
+    // Scribble paths
+    const scribbleMain = 'M18,82 C25,80 35,84 50,81 C65,78 75,82 82,80';
+    const scribbleExtra = [
+        'M20,16 C28,18 38,15 48,17',
+        'M55,85 C65,83 75,86 82,84',
+    ];
+    // Cross-hatch mark positions
+    const hatchCount = intensity === 'dense' ? 6 : intensity === 'subtle' ? 2 : 4;
+    const hatchPositions = [
+        { x1: 8, y1: 8, x2: 14, y2: 14 },
+        { x1: 86, y1: 8, x2: 92, y2: 14 },
+        { x1: 8, y1: 86, x2: 14, y2: 92 },
+        { x1: 86, y1: 86, x2: 92, y2: 92 },
+        { x1: 10, y1: 12, x2: 16, y2: 10 },
+        { x1: 84, y1: 12, x2: 90, y2: 10 },
+    ];
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feTurbulence", { type: "turbulence", baseFrequency: 0.02 + roughness * 0.008, numOctaves: 3, seed: 2, result: "noise" }), jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: roughness, xChannelSelector: "R", yChannelSelector: "G" })] }) }) }), jsx("span", { style: { display: 'inline-flex', filter: `url(#${filterId})` }, children: children }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-20%', width: '140%', height: '140%' }, "aria-hidden": true, children: [jsx("path", { d: scribbleMain, fill: "none", stroke: strokeColor, strokeWidth: "1", strokeLinecap: "round", opacity: 0.5, ...(animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {}), children: animate && (jsx("animate", { attributeName: "stroke-dashoffset", from: `${dashLen}`, to: "0", dur: dur, fill: "freeze" })) }), intensity !== 'subtle' &&
+                        scribbleExtra
+                            .slice(0, intensity === 'dense' ? 2 : 1)
+                            .map((d, i) => (jsx("path", { d: d, fill: "none", stroke: strokeColor, strokeWidth: "0.8", strokeLinecap: "round", opacity: 0.35, ...(animate
+                                ? { strokeDasharray: dashLen, strokeDashoffset: dashLen }
+                                : {}), children: animate && (jsx("animate", { attributeName: "stroke-dashoffset", from: `${dashLen}`, to: "0", dur: dur, fill: "freeze", begin: `${0.3 + i * 0.2}s` })) }, `se${i}`))), hatchPositions.slice(0, hatchCount).map((p, i) => (jsx("line", { x1: p.x1, y1: p.y1, x2: p.x2, y2: p.y2, stroke: strokeColor, strokeWidth: "0.6", strokeLinecap: "round", opacity: animate ? 0 : 0.3, children: animate && (jsx("animate", { attributeName: "opacity", from: "0", to: "0.3", dur: "0.3s", begin: `${duration * 0.7 + i * 0.1}s`, fill: "freeze" })) }, `h${i}`)))] })] }));
+});
+NtdIconSketch.displayName = 'NtdIconSketch';
+// ══════════════════════════════════════════════════════
+//  5. NtdIconWatercolor 🎨
+//  Soft paint blobs & bleed effect behind the icon
+// ══════════════════════════════════════════════════════
+const NtdIconWatercolor = forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', tintColor = '#818cf8', bleedColor = '#f0abfc', className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const filterId = `ntd_wc_${uid}`;
+    const blobFilter = `${filterId}_blob`;
+    // Paint splotches
+    const splotches = [
+        { cx: 30, cy: 35, r: 18, color: tintColor, op: 0.2 },
+        { cx: 70, cy: 65, r: 15, color: bleedColor, op: 0.18 },
+        { cx: 50, cy: 50, r: 22, color: tintColor, op: 0.12 },
+        ...(intensity !== 'subtle'
+            ? [
+                { cx: 25, cy: 70, r: 12, color: bleedColor, op: 0.15 },
+                { cx: 75, cy: 30, r: 10, color: tintColor, op: 0.15 },
+            ]
+            : []),
+        ...(intensity === 'dense'
+            ? [
+                { cx: 15, cy: 50, r: 14, color: bleedColor, op: 0.12 },
+                { cx: 85, cy: 50, r: 12, color: tintColor, op: 0.12 },
+                { cx: 50, cy: 15, r: 10, color: bleedColor, op: 0.1 },
+                { cx: 50, cy: 85, r: 11, color: tintColor, op: 0.1 },
+            ]
+            : []),
+    ];
+    // Splatter dots
+    const splatters = [
+        { cx: 12, cy: 20, r: 2 },
+        { cx: 88, cy: 80, r: 1.5 },
+        { cx: 20, cy: 85, r: 1.8 },
+        { cx: 80, cy: 15, r: 1.3 },
+        ...(intensity !== 'subtle'
+            ? [
+                { cx: 8, cy: 45, r: 1.2 },
+                { cx: 92, cy: 55, r: 1 },
+            ]
+            : []),
+    ];
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsxs("defs", { children: [jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.04", numOctaves: 4, seed: 5, result: "noise" }), jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: 3, xChannelSelector: "R", yChannelSelector: "G", result: "displaced" }), jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })] }), jsx("filter", { id: blobFilter, children: jsx("feGaussianBlur", { stdDeviation: "3" }) })] }) }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-25%', width: '150%', height: '150%', zIndex: 0 }, "aria-hidden": true, children: [splotches.map((s, i) => (jsx("circle", { cx: s.cx, cy: s.cy, r: animate ? 0 : s.r, fill: s.color, opacity: s.op, filter: `url(#${blobFilter})`, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "r", from: "0", to: `${s.r}`, dur: `${duration * 0.7}s`, begin: `${(i * 0.15).toFixed(2)}s`, fill: "freeze" }), jsx("animate", { attributeName: "opacity", values: `${s.op};${s.op * 1.3};${s.op}`, dur: "3s", begin: `${duration}s`, repeatCount: "indefinite" })] })) }, `sp${i}`))), splatters.map((d, i) => (jsx("circle", { cx: d.cx, cy: d.cy, r: d.r, fill: i % 2 === 0 ? tintColor : bleedColor, opacity: animate ? 0 : 0.3, filter: `url(#${blobFilter})`, children: animate && (jsx("animate", { attributeName: "opacity", from: "0", to: "0.3", dur: "0.3s", begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`, fill: "freeze" })) }, `dot${i}`)))] }), jsx("span", { style: {
+                    display: 'inline-flex',
+                    filter: `url(#${filterId})`,
+                    position: 'relative',
+                    zIndex: 1,
+                }, children: children })] }));
+});
+NtdIconWatercolor.displayName = 'NtdIconWatercolor';
+// ══════════════════════════════════════════════════════
+//  6. NtdIconCosmic ✨
+//  Stars, nebula glow & constellation lines
+// ══════════════════════════════════════════════════════
+const NtdIconCosmic = forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', starColor = '#e2e8f0', nebulaColor = '#7c3aed', nebulaColor2 = '#2563eb', className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const nebulaFilter = `ntd_cosm_${uid}`;
+    // Stars
+    const baseStars = [
+        { cx: 8, cy: 15, r: 1.2 },
+        { cx: 22, cy: 5, r: 0.9 },
+        { cx: 45, cy: 8, r: 1 },
+        { cx: 78, cy: 12, r: 1.3 },
+        { cx: 92, cy: 22, r: 0.8 },
+        { cx: 5, cy: 42, r: 0.7 },
+        { cx: 95, cy: 55, r: 0.9 },
+        { cx: 12, cy: 82, r: 1.1 },
+        { cx: 35, cy: 92, r: 0.8 },
+        { cx: 72, cy: 88, r: 1 },
+        { cx: 88, cy: 78, r: 0.7 },
+    ];
+    const denseStars = intensity === 'dense'
+        ? [
+            { cx: 55, cy: 3, r: 0.6 },
+            { cx: 3, cy: 65, r: 0.8 },
+            { cx: 97, cy: 35, r: 0.5 },
+            { cx: 60, cy: 97, r: 0.7 },
+            { cx: 15, cy: 35, r: 0.5 },
+            { cx: 85, cy: 42, r: 0.6 },
+        ]
+        : [];
+    const allStars = [
+        ...(intensity === 'subtle' ? baseStars.slice(0, 6) : baseStars),
+        ...denseStars,
+    ];
+    // Constellation lines connecting nearby stars
+    const constellations = [
+        { from: [8, 15], to: [22, 5] },
+        { from: [22, 5], to: [45, 8] },
+        { from: [78, 12], to: [92, 22] },
+        ...(intensity !== 'subtle'
+            ? [
+                { from: [12, 82], to: [35, 92] },
+                { from: [72, 88], to: [88, 78] },
+            ]
+            : []),
+        ...(intensity === 'dense'
+            ? [
+                { from: [45, 8], to: [78, 12] },
+                { from: [5, 42], to: [12, 82] },
+            ]
+            : []),
+    ];
+    // Nebula blobs
+    const nebulae = [
+        { cx: 25, cy: 25, r: 16, color: nebulaColor, op: 0.12 },
+        { cx: 75, cy: 75, r: 18, color: nebulaColor2, op: 0.1 },
+        ...(intensity !== 'subtle'
+            ? [{ cx: 50, cy: 50, r: 14, color: nebulaColor, op: 0.08 }]
+            : []),
+        ...(intensity === 'dense'
+            ? [
+                { cx: 80, cy: 20, r: 12, color: nebulaColor2, op: 0.09 },
+                { cx: 20, cy: 80, r: 13, color: nebulaColor, op: 0.09 },
+            ]
+            : []),
+    ];
+    const lineLen = 80;
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsx("defs", { children: jsx("filter", { id: nebulaFilter, children: jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%', zIndex: 0 }, "aria-hidden": true, children: [nebulae.map((n, i) => (jsx("circle", { cx: n.cx, cy: n.cy, r: n.r, fill: n.color, opacity: animate ? 0 : n.op, filter: `url(#${nebulaFilter})`, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: `${n.op}`, dur: `${duration}s`, fill: "freeze" }), jsx("animate", { attributeName: "opacity", values: `${n.op};${n.op * 1.5};${n.op}`, dur: "5s", repeatCount: "indefinite", begin: `${duration}s` }), jsx("animate", { attributeName: "r", values: `${n.r};${n.r * 1.1};${n.r}`, dur: "6s", repeatCount: "indefinite", begin: `${duration}s` })] })) }, `nb${i}`))), constellations.map((c, i) => (jsx("line", { x1: c.from[0], y1: c.from[1], x2: c.to[0], y2: c.to[1], stroke: starColor, strokeWidth: "0.3", opacity: 0.25, ...(animate
+                            ? { strokeDasharray: lineLen, strokeDashoffset: lineLen }
+                            : {}), children: animate && (jsx("animate", { attributeName: "stroke-dashoffset", from: `${lineLen}`, to: "0", dur: `${duration * 0.8}s`, begin: `${(i * 0.2).toFixed(1)}s`, fill: "freeze" })) }, `cl${i}`)))] }), jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%', zIndex: 2 }, "aria-hidden": true, children: [allStars.map((s, i) => (jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, fill: starColor, opacity: animate ? 0 : 0.8, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.8", dur: `${duration * 0.5}s`, begin: `${(i * 0.1).toFixed(2)}s`, fill: "freeze" }), jsx("animate", { attributeName: "opacity", values: "0.4;1;0.4", dur: `${1.5 + (i % 4) * 0.4}s`, repeatCount: "indefinite", begin: `${duration}s` }), jsx("animate", { attributeName: "r", values: `${s.r};${s.r * 1.4};${s.r}`, dur: `${2 + (i % 3) * 0.5}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `st${i}`))), animate && (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: "360 50 50", dur: "120s", repeatCount: "indefinite" }))] })] }));
+});
+NtdIconCosmic.displayName = 'NtdIconCosmic';
+// ══════════════════════════════════════════════════════
+//  7. NtdIconSteampunk ⚙️
+//  Rotating gears, copper pipes, brass rivets & steam puffs
+// ══════════════════════════════════════════════════════
+const NtdIconSteampunk = forwardRef(({ children, animate = true, duration = 3, intensity = 'normal', brassColor = '#b45309', pipeColor = '#78350f', steamColor = '#d1d5db', className, style, }, ref) => {
+    // Build toothed gear path from a center point, radius and tooth count
+    const makeGear = (cx, cy, r, teeth) => {
+        const inner = r * 0.68;
+        const step = (Math.PI * 2) / teeth;
+        const pt = (radius, angle) => `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`;
+        let d = '';
+        for (let i = 0; i < teeth; i++) {
+            const a0 = i * step;
+            d +=
+                `${i === 0 ? 'M' : 'L'}${pt(inner, a0)} ` +
+                    `L${pt(r, a0 + step * 0.3)} L${pt(r, a0 + step * 0.7)} ` +
+                    `L${pt(inner, a0 + step)} `;
+        }
+        return d + 'Z';
+    };
+    const gears = [
+        { cx: 15, cy: 15, r: 11, teeth: 8, dir: 1, dm: 1 },
+        { cx: 85, cy: 85, r: 9, teeth: 7, dir: -1, dm: 0.8 },
+        ...(intensity !== 'subtle'
+            ? [
+                { cx: 85, cy: 15, r: 7, teeth: 6, dir: 1, dm: 1.1 },
+                { cx: 15, cy: 85, r: 6, teeth: 5, dir: -1, dm: 0.9 },
+            ]
+            : []),
+        ...(intensity === 'dense' ? [{ cx: 50, cy: 3, r: 5, teeth: 5, dir: 1, dm: 1.3 }] : []),
+    ];
+    const pipes = [
+        { d: 'M27,15 H48', w: 3.5 },
+        { d: 'M85,28 V48', w: 3.5 },
+        ...(intensity !== 'subtle'
+            ? [{ d: 'M52,85 H73', w: 3.5 }, { d: 'M15,52 V73', w: 3.5 }]
+            : []),
+    ];
+    const rivets = intensity === 'subtle'
+        ? [{ cx: 50, cy: 2 }, { cx: 50, cy: 98 }]
+        : intensity === 'dense'
+            ? [
+                { cx: 50, cy: 2 }, { cx: 50, cy: 98 },
+                { cx: 2, cy: 50 }, { cx: 98, cy: 50 },
+                { cx: 25, cy: 2 }, { cx: 75, cy: 2 },
+                { cx: 25, cy: 98 }, { cx: 75, cy: 98 },
+            ]
+            : [{ cx: 50, cy: 2 }, { cx: 50, cy: 98 }, { cx: 2, cy: 50 }, { cx: 98, cy: 50 }];
+    const steamPuffs = [
+        { cx: 50, cy: 3, r: 3 },
+        { cx: 55, cy: -4, r: 2.2 },
+        { cx: 47, cy: -10, r: 1.6 },
+    ];
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-20%', width: '140%', height: '140%', zIndex: 0 }, "aria-hidden": true, children: [pipes.map((p, i) => (jsx("path", { d: p.d, stroke: pipeColor, strokeWidth: p.w, fill: "none", strokeLinecap: "round", opacity: 0.55 }, `pipe${i}`))), rivets.map((rv, i) => (jsx("circle", { cx: rv.cx, cy: rv.cy, r: 1.5, fill: brassColor, opacity: 0.7 }, `rv${i}`)))] }), jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-20%', width: '140%', height: '140%', zIndex: 2 }, "aria-hidden": true, children: [gears.map((g, i) => (jsxs("g", { children: [jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${g.cx} ${g.cy}`, to: `${g.dir * 360} ${g.cx} ${g.cy}`, dur: `${duration * g.dm}s`, repeatCount: "indefinite" })) }), jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }), jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })] }, `gear${i}`))), animate &&
+                        steamPuffs.map((sp, i) => (jsxs("circle", { cx: sp.cx, cy: sp.cy, r: sp.r, fill: steamColor, opacity: 0, children: [jsx("animate", { attributeName: "opacity", values: "0;0.45;0", dur: "2.4s", begin: `${i * 0.7}s`, repeatCount: "indefinite" }), jsx("animate", { attributeName: "cy", values: `${sp.cy};${sp.cy - 12}`, dur: "2.4s", begin: `${i * 0.7}s`, repeatCount: "indefinite" }), jsx("animate", { attributeName: "r", values: `${sp.r};${sp.r * 2.2}`, dur: "2.4s", begin: `${i * 0.7}s`, repeatCount: "indefinite" })] }, `stm${i}`)))] })] }));
+});
+NtdIconSteampunk.displayName = 'NtdIconSteampunk';
+// ══════════════════════════════════════════════════════
+//  8. NtdIconFrost ❄️
+//  Hexagonal snowflake crystals, sparkles & frozen glow
+// ══════════════════════════════════════════════════════
+const NtdIconFrost = forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', crystalColor = '#bae6fd', glowColor = '#38bdf8', className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const glowFilterId = `ntd_frost_${uid}`;
+    const crystalDefs = [
+        { cx: 8, cy: 8, len: 7, pi: 0 },
+        { cx: 92, cy: 8, len: 6, pi: 1 },
+        { cx: 8, cy: 92, len: 6, pi: 2 },
+        { cx: 92, cy: 92, len: 7, pi: 3 },
+        ...(intensity !== 'subtle'
+            ? [
+                { cx: 50, cy: 2, len: 5, pi: 4 },
+                { cx: 50, cy: 98, len: 5, pi: 5 },
+                { cx: 2, cy: 50, len: 5, pi: 6 },
+                { cx: 98, cy: 50, len: 5, pi: 7 },
+            ]
+            : []),
+        ...(intensity === 'dense'
+            ? [{ cx: 28, cy: 4, len: 4, pi: 8 }, { cx: 72, cy: 4, len: 4, pi: 9 }]
+            : []),
+    ];
+    // Each snowflake = 6 arms radiating from center
+    const allArms = crystalDefs.flatMap(({ cx, cy, len, pi }) => Array.from({ length: 6 }, (_, ai) => {
+        const angle = (ai * 60 * Math.PI) / 180;
+        return {
+            x1: cx, y1: cy,
+            x2: cx + len * Math.cos(angle),
+            y2: cy + len * Math.sin(angle),
+            delay: pi * 0.12 + ai * 0.02,
+        };
+    }));
+    // Small perpendicular tick marks at midpoint of each arm
+    const allTicks = crystalDefs.flatMap(({ cx, cy, len }, ci) => Array.from({ length: 6 }, (_, ai) => {
+        const angle = (ai * 60 * Math.PI) / 180;
+        const mx = cx + len * 0.55 * Math.cos(angle);
+        const my = cy + len * 0.55 * Math.sin(angle);
+        const p = angle + Math.PI / 2;
+        const tl = len * 0.22;
+        return {
+            x1: mx - tl * Math.cos(p), y1: my - tl * Math.sin(p),
+            x2: mx + tl * Math.cos(p), y2: my + tl * Math.sin(p),
+            delay: ci * 0.12 + duration * 0.5,
+        };
+    }));
+    const sparkles = [
+        { cx: 14, cy: 4, r: 1.1 }, { cx: 86, cy: 4, r: 0.9 },
+        { cx: 4, cy: 14, r: 0.8 }, { cx: 96, cy: 14, r: 1.0 },
+        { cx: 4, cy: 86, r: 0.9 }, { cx: 96, cy: 86, r: 0.8 },
+        { cx: 14, cy: 96, r: 1.0 }, { cx: 86, cy: 96, r: 1.1 },
+    ];
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsx("defs", { children: jsx("filter", { id: glowFilterId, children: jsx("feGaussianBlur", { stdDeviation: "6" }) }) }) }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-25%', width: '150%', height: '150%', zIndex: 0 }, "aria-hidden": true, children: [jsx("circle", { cx: "50", cy: "50", r: "30", fill: glowColor, opacity: 0.07, filter: `url(#${glowFilterId})`, children: animate && (jsx("animate", { attributeName: "opacity", values: "0.04;0.11;0.04", dur: "4s", repeatCount: "indefinite" })) }), allArms.map((arm, i) => (jsx("line", { x1: arm.x1, y1: arm.y1, x2: arm.x2, y2: arm.y2, stroke: crystalColor, strokeWidth: "0.9", strokeLinecap: "round", opacity: animate ? 0 : 0.7, children: animate && (jsx("animate", { attributeName: "opacity", from: "0", to: "0.7", dur: `${duration * 0.4}s`, begin: `${arm.delay.toFixed(2)}s`, fill: "freeze" })) }, `arm${i}`))), allTicks.map((tick, i) => (jsx("line", { x1: tick.x1, y1: tick.y1, x2: tick.x2, y2: tick.y2, stroke: crystalColor, strokeWidth: "0.6", strokeLinecap: "round", opacity: animate ? 0 : 0.45, children: animate && (jsx("animate", { attributeName: "opacity", from: "0", to: "0.45", dur: `${duration * 0.3}s`, begin: `${tick.delay.toFixed(2)}s`, fill: "freeze" })) }, `tick${i}`))), sparkles.slice(0, intensity === 'subtle' ? 4 : 8).map((sp, i) => (jsx("circle", { cx: sp.cx, cy: sp.cy, r: sp.r, fill: glowColor, opacity: animate ? 0 : 0.8, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.8", dur: "0.35s", begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`, fill: "freeze" }), jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: `${1 + i * 0.2}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `fsp${i}`)))] }), jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children })] }));
+});
+NtdIconFrost.displayName = 'NtdIconFrost';
+// ══════════════════════════════════════════════════════
+//  9. NtdIconPixel 👾
+//  Retro pixel corners, scanline scroll & glitch animation
+// ══════════════════════════════════════════════════════
+const NtdIconPixel = forwardRef(({ children, animate = true, duration = 0.5, intensity = 'normal', pixelColor = '#22d3ee', scanlineColor = '#000000', glitchEffect = true, className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const scanAnimName = `ntd_pixel_scan_${uid}`;
+    const glitchAnimName = `ntd_pixel_glitch_${uid}`;
+    const SZ = 4; // pixel block size (SVG units out of 100)
+    const basePixels = [
+        // top-left bracket
+        { x: 0, y: 0 }, { x: SZ, y: 0 }, { x: SZ * 2, y: 0 },
+        { x: 0, y: SZ }, { x: 0, y: SZ * 2 },
+        // top-right bracket
+        { x: 100 - SZ * 3, y: 0 }, { x: 100 - SZ * 2, y: 0 }, { x: 100 - SZ, y: 0 },
+        { x: 100 - SZ, y: SZ }, { x: 100 - SZ, y: SZ * 2 },
+        // bottom-left bracket
+        { x: 0, y: 100 - SZ }, { x: SZ, y: 100 - SZ }, { x: SZ * 2, y: 100 - SZ },
+        { x: 0, y: 100 - SZ * 2 }, { x: 0, y: 100 - SZ * 3 },
+        // bottom-right bracket
+        { x: 100 - SZ * 3, y: 100 - SZ }, { x: 100 - SZ * 2, y: 100 - SZ }, { x: 100 - SZ, y: 100 - SZ },
+        { x: 100 - SZ, y: 100 - SZ * 2 }, { x: 100 - SZ, y: 100 - SZ * 3 },
+    ];
+    const extraPixels = intensity === 'dense'
+        ? [{ x: 48, y: 0 }, { x: 0, y: 48 }, { x: 96, y: 48 }, { x: 48, y: 96 }]
+        : [];
+    const allPixels = intensity === 'subtle'
+        ? basePixels.filter((_, i) => i % 2 === 0)
+        : [...basePixels, ...extraPixels];
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [animate && (jsx("style", { children: `
+            @keyframes ${scanAnimName} {
+              from { transform: translateY(-100%); }
+              to   { transform: translateY(200%);  }
+            }
+            @keyframes ${glitchAnimName} {
+              0%, 90%, 100% { transform: translate(0); filter: none; }
+              92%  { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
+              94%  { transform: translate(3px, -1px); clip-path: inset(25% 0 25% 0); }
+              96%  { transform: translate(-1px, 2px); clip-path: none; }
+            }
+          ` })), jsx("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-5%', width: '110%', height: '110%', zIndex: 2 }, "aria-hidden": true, children: allPixels.map((p, i) => (jsx("rect", { x: p.x, y: p.y, width: SZ - 0.5, height: SZ - 0.5, fill: pixelColor, opacity: 0.75, children: animate && (jsx("animate", { attributeName: "opacity", values: "0.3;1;0.3", dur: `${0.7 + (i % 5) * 0.17}s`, repeatCount: "indefinite", begin: `${((i * 0.06) % 1).toFixed(2)}s` })) }, `px${i}`))) }), jsx("span", { style: {
+                    display: 'inline-flex',
+                    position: 'relative',
+                    zIndex: 1,
+                    ...(animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}),
+                }, children: children }), animate && (jsx("span", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    overflow: 'hidden',
+                    pointerEvents: 'none',
+                    zIndex: 3,
+                    background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`,
+                }, children: jsx("span", { style: {
+                        display: 'block',
+                        width: '100%',
+                        height: '30%',
+                        background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
+                        animation: `${scanAnimName} ${duration + 2}s linear infinite`,
+                    } }) }))] }));
+});
+NtdIconPixel.displayName = 'NtdIconPixel';
+// ══════════════════════════════════════════════════════
+//  10. NtdIconOrganic 🦠
+//  Pulsing cell blobs, membrane rings & floating bubbles
+// ══════════════════════════════════════════════════════
+const NtdIconOrganic = forwardRef(({ children, animate = true, duration = 3, intensity = 'normal', cellColor = '#86efac', membraneColor = '#4ade80', nucleusColor = '#fbbf24', className, style, }, ref) => {
+    const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
+    const blobFilterId = `ntd_org_${uid}`;
+    const cells = [
+        { cx: 8, cy: 8, r: 9, color: cellColor, op: 0.18, pd: '4.2s' },
+        { cx: 92, cy: 8, r: 8, color: membraneColor, op: 0.15, pd: '3.8s' },
+        { cx: 8, cy: 92, r: 8, color: membraneColor, op: 0.16, pd: '4.5s' },
+        { cx: 92, cy: 92, r: 9, color: cellColor, op: 0.18, pd: '3.5s' },
+        ...(intensity !== 'subtle'
+            ? [
+                { cx: 50, cy: 2, r: 6, color: cellColor, op: 0.12, pd: '5.1s' },
+                { cx: 50, cy: 98, r: 6, color: membraneColor, op: 0.12, pd: '4.8s' },
+                { cx: 2, cy: 50, r: 6, color: cellColor, op: 0.12, pd: '4.3s' },
+                { cx: 98, cy: 50, r: 6, color: membraneColor, op: 0.12, pd: '5.2s' },
+            ]
+            : []),
+        ...(intensity === 'dense'
+            ? [
+                { cx: 25, cy: 5, r: 5, color: nucleusColor, op: 0.09, pd: '3.9s' },
+                { cx: 75, cy: 5, r: 5, color: cellColor, op: 0.09, pd: '4.4s' },
+                { cx: 5, cy: 25, r: 5, color: membraneColor, op: 0.09, pd: '4.6s' },
+                { cx: 5, cy: 75, r: 5, color: cellColor, op: 0.09, pd: '3.7s' },
+            ]
+            : []),
+    ];
+    const bubbles = [
+        { cx: 15, cy: 18, r: 2 }, { cx: 85, cy: 18, r: 1.8 },
+        { cx: 12, cy: 78, r: 1.5 }, { cx: 88, cy: 82, r: 2 },
+        { cx: 40, cy: 5, r: 1.5 }, { cx: 60, cy: 95, r: 1.5 },
+    ];
+    const bubbleCount = intensity === 'subtle' ? 2 : intensity === 'dense' ? 6 : 4;
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsx("svg", { style: { position: 'absolute', width: 0, height: 0 }, "aria-hidden": true, children: jsx("defs", { children: jsx("filter", { id: blobFilterId, children: jsx("feGaussianBlur", { stdDeviation: "4" }) }) }) }), jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-25%', width: '150%', height: '150%', zIndex: 0 }, "aria-hidden": true, children: [cells.map((c, i) => (jsx("circle", { cx: c.cx, cy: c.cy, r: c.r, fill: c.color, opacity: animate ? 0 : c.op, filter: `url(#${blobFilterId})`, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: `${c.op}`, dur: `${duration * 0.55}s`, begin: `${(i * 0.2).toFixed(2)}s`, fill: "freeze" }), jsx("animate", { attributeName: "r", values: `${c.r};${c.r * 1.3};${c.r}`, dur: c.pd, repeatCount: "indefinite", begin: `${duration}s` }), jsx("animate", { attributeName: "opacity", values: `${c.op};${c.op * 1.7};${c.op}`, dur: c.pd, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `oc${i}`))), intensity !== 'subtle' &&
+                        [{ cx: 8, cy: 8, r: 10 }, { cx: 92, cy: 92, r: 10 }].map((ring, i) => (jsx("circle", { cx: ring.cx, cy: ring.cy, r: ring.r, fill: "none", stroke: membraneColor, strokeWidth: "0.7", opacity: animate ? 0 : 0.35, children: animate && (jsx("animate", { attributeName: "opacity", from: "0", to: "0.35", dur: `${duration * 0.7}s`, fill: "freeze" })) }, `ring${i}`))), bubbles.slice(0, bubbleCount).map((b, i) => (jsx("circle", { cx: b.cx, cy: b.cy, r: b.r, fill: nucleusColor, opacity: animate ? 0 : 0.28, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.28", dur: "0.5s", begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`, fill: "freeze" }), jsx("animate", { attributeName: "cy", values: `${b.cy};${b.cy - 5};${b.cy}`, dur: `${2.2 + i * 0.45}s`, repeatCount: "indefinite", begin: `${duration}s` })] })) }, `ob${i}`)))] }), jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children })] }));
+});
+NtdIconOrganic.displayName = 'NtdIconOrganic';
+// ══════════════════════════════════════════════════════
+//  11. NtdIconGeometric 🔷
+//  Sacred geometry: concentric rings, Star of David
+//  triangles & slowly rotating corner diamonds
+// ══════════════════════════════════════════════════════
+const NtdIconGeometric = forwardRef(({ children, animate = true, duration = 8, intensity = 'normal', primaryColor = '#6366f1', secondaryColor = '#8b5cf6', accentColor = '#a78bfa', className, style, }, ref) => {
+    const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
+        const a = ((i * 120 - 90 + rotDeg) * Math.PI) / 180;
+        return `${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`;
+    }).join(' ');
+    const rings = [
+        { r: 45, dash: '4 6', color: primaryColor, dir: 1, dur: duration, op: 0.22 },
+        { r: 38, dash: '2 4', color: secondaryColor, dir: -1, dur: duration * 0.75, op: 0.18 },
+        ...(intensity !== 'subtle'
+            ? [{ r: 41, dash: '1 9', color: accentColor, dir: 1, dur: duration * 1.4, op: 0.12 }]
+            : []),
+        ...(intensity === 'dense'
+            ? [{ r: 48, dash: '0.5 4', color: primaryColor, dir: -1, dur: duration * 1.8, op: 0.08 }]
+            : []),
+    ];
+    const triangles = [
+        { r: 34, rot: 0, color: primaryColor, op: 0.14, dur: duration * 2, dir: 1 },
+        { r: 34, rot: 60, color: accentColor, op: 0.10, dur: duration * 1.6, dir: -1 },
+        ...(intensity !== 'subtle'
+            ? [{ r: 24, rot: 15, color: secondaryColor, op: 0.12, dur: duration * 1.9, dir: 1 }]
+            : []),
+        ...(intensity === 'dense'
+            ? [{ r: 44, rot: 30, color: accentColor, op: 0.07, dur: duration * 2.2, dir: -1 }]
+            : []),
+    ];
+    const diamonds = [
+        { cx: 8, cy: 8 }, { cx: 92, cy: 8 }, { cx: 8, cy: 92 }, { cx: 92, cy: 92 },
+        ...(intensity !== 'subtle' ? [{ cx: 50, cy: 2 }, { cx: 50, cy: 98 }] : []),
+        ...(intensity === 'dense' ? [{ cx: 2, cy: 50 }, { cx: 98, cy: 50 }] : []),
+    ];
+    const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
+    return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [jsxs("svg", { viewBox: "0 0 100 100", style: { ...overlayBase, inset: '-30%', width: '160%', height: '160%', zIndex: 0 }, "aria-hidden": true, children: [rings.map((ring, i) => (jsx("circle", { cx: "50", cy: "50", r: ring.r, fill: "none", stroke: ring.color, strokeWidth: "0.6", strokeDasharray: ring.dash, opacity: ring.op, children: animate && (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: `${ring.dir * 360} 50 50`, dur: `${ring.dur}s`, repeatCount: "indefinite" })) }, `rng${i}`))), triangles.map((t, i) => (jsx("polygon", { points: makeTriangle(50, 50, t.r, t.rot), fill: "none", stroke: t.color, strokeWidth: "0.5", opacity: t.op, children: animate && (jsx("animateTransform", { attributeName: "transform", type: "rotate", from: "0 50 50", to: `${t.dir * 360} 50 50`, dur: `${t.dur}s`, repeatCount: "indefinite" })) }, `tri${i}`))), diamonds.map((d, i) => (jsx("path", { d: diamondPath(d.cx, d.cy), fill: accentColor, opacity: animate ? 0 : 0.5, children: animate && (jsxs(Fragment, { children: [jsx("animate", { attributeName: "opacity", from: "0", to: "0.5", dur: `${duration * 0.25}s`, begin: `${(i * 0.09).toFixed(2)}s`, fill: "freeze" }), jsx("animateTransform", { attributeName: "transform", type: "rotate", from: `0 ${d.cx} ${d.cy}`, to: `360 ${d.cx} ${d.cy}`, dur: `${3 + i * 0.6}s`, repeatCount: "indefinite" })] })) }, `dm${i}`)))] }), jsx("span", { style: { display: 'inline-flex', position: 'relative', zIndex: 1 }, children: children })] }));
+});
+NtdIconGeometric.displayName = 'NtdIconGeometric';
+
+export { NtdIconCosmic, NtdIconFestive, NtdIconFloral, NtdIconFrost, NtdIconGeometric, NtdIconNeon, NtdIconOrganic, NtdIconPixel, NtdIconSketch, NtdIconSteampunk, NtdIconWatercolor };
+//# sourceMappingURL=iconStyles.js.map