@nice2dev/icons 1.3.15 → 1.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/NiceDesktopIconExporter.js +688 -599
  3. package/dist/cjs/NiceFaviconGenerator.js +603 -417
  4. package/dist/cjs/NiceIconPicker.js +788 -508
  5. package/dist/cjs/NiceIconPreview.js +246 -188
  6. package/dist/cjs/NiceIconSetCreator.js +683 -552
  7. package/dist/cjs/NiceIconStacker.js +547 -171
  8. package/dist/cjs/NiceIconValue.js +27 -35
  9. package/dist/cjs/NtdIconBadge.js +384 -360
  10. package/dist/cjs/NtdIconMorph.js +419 -354
  11. package/dist/cjs/NtdStateMorph.js +150 -147
  12. package/dist/cjs/advancedIconSearch.js +373 -510
  13. package/dist/cjs/animationControls.js +518 -642
  14. package/dist/cjs/client.js +12 -15
  15. package/dist/cjs/createIcon.js +349 -251
  16. package/dist/cjs/design-tokens.js +324 -390
  17. package/dist/cjs/figmaExport.js +162 -257
  18. package/dist/cjs/figmaSync.js +234 -316
  19. package/dist/cjs/headless-ui.js +240 -368
  20. package/dist/cjs/iconAnalytics.js +337 -393
  21. package/dist/cjs/iconHtml.js +64 -86
  22. package/dist/cjs/iconMetadata.js +392 -472
  23. package/dist/cjs/iconParts.js +120 -90
  24. package/dist/cjs/iconStack.js +136 -155
  25. package/dist/cjs/iconStyles.js +1609 -504
  26. package/dist/cjs/iconValue.js +359 -430
  27. package/dist/cjs/icons/accessibility.js +1119 -134
  28. package/dist/cjs/icons/actions.js +1290 -330
  29. package/dist/cjs/icons/ai.js +1424 -144
  30. package/dist/cjs/icons/brand.js +1344 -172
  31. package/dist/cjs/icons/business.js +903 -193
  32. package/dist/cjs/icons/devtech.js +1656 -227
  33. package/dist/cjs/icons/ecommerce.js +802 -111
  34. package/dist/cjs/icons/education.js +1345 -199
  35. package/dist/cjs/icons/files.js +1597 -328
  36. package/dist/cjs/icons/fintech.js +793 -104
  37. package/dist/cjs/icons/food.js +1507 -153
  38. package/dist/cjs/icons/fun.js +786 -109
  39. package/dist/cjs/icons/gaming.js +916 -170
  40. package/dist/cjs/icons/health.js +623 -112
  41. package/dist/cjs/icons/index.js +32 -35
  42. package/dist/cjs/icons/input.js +282 -83
  43. package/dist/cjs/icons/legal.js +1065 -122
  44. package/dist/cjs/icons/media.js +1061 -267
  45. package/dist/cjs/icons/navigation.js +387 -122
  46. package/dist/cjs/icons/omniverk.js +747 -90
  47. package/dist/cjs/icons/realestate.js +1520 -193
  48. package/dist/cjs/icons/saas.js +867 -98
  49. package/dist/cjs/icons/science.js +1451 -202
  50. package/dist/cjs/icons/shapes.js +1316 -308
  51. package/dist/cjs/icons/smarthome.js +786 -90
  52. package/dist/cjs/icons/social.js +591 -59
  53. package/dist/cjs/icons/sports.js +1225 -133
  54. package/dist/cjs/icons/sustainability.js +1211 -139
  55. package/dist/cjs/icons/travel.js +1470 -148
  56. package/dist/cjs/icons/ui.js +1508 -315
  57. package/dist/cjs/icons/weather.js +1160 -173
  58. package/dist/cjs/index.js +566 -568
  59. package/dist/cjs/lottieIntegration.js +261 -266
  60. package/dist/cjs/nicetodev-icons.css +1 -1
  61. package/dist/cjs/particleEffects.js +270 -251
  62. package/dist/cjs/resolver.js +229 -284
  63. package/dist/cjs/rsc.js +175 -193
  64. package/dist/cjs/sharpen.js +73 -130
  65. package/dist/cjs/smilAnimations.js +371 -165
  66. package/dist/cjs/stacking.js +87 -122
  67. package/dist/cjs/tailwind-plugin.js +280 -320
  68. package/dist/cjs/types.js +46 -72
  69. package/dist/cjs/utilities.js +163 -324
  70. package/dist/cjs/variantProps.js +12 -52
  71. package/dist/esm/NiceDesktopIconExporter.js +671 -598
  72. package/dist/esm/NiceFaviconGenerator.js +583 -416
  73. package/dist/esm/NiceIconPicker.js +789 -507
  74. package/dist/esm/NiceIconPreview.js +247 -187
  75. package/dist/esm/NiceIconSetCreator.js +685 -551
  76. package/dist/esm/NiceIconStacker.js +549 -170
  77. package/dist/esm/NiceIconValue.js +29 -34
  78. package/dist/esm/NtdIconBadge.js +388 -359
  79. package/dist/esm/NtdIconMorph.js +423 -353
  80. package/dist/esm/NtdStateMorph.js +152 -146
  81. package/dist/esm/advancedIconSearch.js +391 -509
  82. package/dist/esm/animationControls.js +527 -641
  83. package/dist/esm/client.js +48 -10
  84. package/dist/esm/createIcon.js +350 -250
  85. package/dist/esm/design-tokens.js +334 -387
  86. package/dist/esm/figmaExport.js +170 -256
  87. package/dist/esm/figmaSync.js +237 -315
  88. package/dist/esm/headless-ui.js +254 -365
  89. package/dist/esm/iconAnalytics.js +342 -392
  90. package/dist/esm/iconHtml.js +67 -85
  91. package/dist/esm/iconMetadata.js +404 -471
  92. package/dist/esm/iconParts.js +125 -89
  93. package/dist/esm/iconStack.js +145 -154
  94. package/dist/esm/iconStyles.js +1620 -503
  95. package/dist/esm/iconValue.js +361 -429
  96. package/dist/esm/icons/accessibility.js +1133 -133
  97. package/dist/esm/icons/actions.js +1320 -329
  98. package/dist/esm/icons/ai.js +1441 -143
  99. package/dist/esm/icons/brand.js +1351 -171
  100. package/dist/esm/icons/business.js +931 -201
  101. package/dist/esm/icons/devtech.js +1687 -226
  102. package/dist/esm/icons/ecommerce.js +816 -110
  103. package/dist/esm/icons/education.js +1364 -198
  104. package/dist/esm/icons/files.js +1628 -327
  105. package/dist/esm/icons/fintech.js +807 -103
  106. package/dist/esm/icons/food.js +1524 -152
  107. package/dist/esm/icons/fun.js +801 -108
  108. package/dist/esm/icons/gaming.js +933 -169
  109. package/dist/esm/icons/health.js +636 -111
  110. package/dist/esm/icons/index.js +596 -32
  111. package/dist/esm/icons/input.js +326 -82
  112. package/dist/esm/icons/legal.js +1079 -121
  113. package/dist/esm/icons/media.js +1086 -266
  114. package/dist/esm/icons/navigation.js +401 -121
  115. package/dist/esm/icons/omniverk.js +759 -89
  116. package/dist/esm/icons/realestate.js +1544 -198
  117. package/dist/esm/icons/saas.js +880 -97
  118. package/dist/esm/icons/science.js +1477 -208
  119. package/dist/esm/icons/shapes.js +1343 -307
  120. package/dist/esm/icons/smarthome.js +799 -89
  121. package/dist/esm/icons/social.js +599 -58
  122. package/dist/esm/icons/sports.js +1240 -132
  123. package/dist/esm/icons/sustainability.js +1226 -138
  124. package/dist/esm/icons/travel.js +1486 -147
  125. package/dist/esm/icons/ui.js +1540 -314
  126. package/dist/esm/icons/weather.js +1181 -172
  127. package/dist/esm/index.js +756 -58
  128. package/dist/esm/lottieIntegration.js +264 -265
  129. package/dist/esm/nicetodev-icons.css +1 -1
  130. package/dist/esm/particleEffects.js +271 -250
  131. package/dist/esm/resolver.js +231 -283
  132. package/dist/esm/rsc.js +182 -192
  133. package/dist/esm/sharpen.js +78 -129
  134. package/dist/esm/smilAnimations.js +376 -164
  135. package/dist/esm/stacking.js +99 -121
  136. package/dist/esm/tailwind-plugin.js +282 -319
  137. package/dist/esm/types.js +50 -71
  138. package/dist/esm/utilities.js +177 -321
  139. package/dist/esm/variantProps.js +23 -52
  140. package/package.json +15 -22
@@ -1,83 +1,219 @@
1
- import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import { forwardRef, useId } from 'react';
3
-
4
- // ────────────────── Shared styles ──────────────────
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
+ import { forwardRef, useId } from "react";
5
3
  const wrapperBase = {
6
- position: 'relative',
7
- display: 'inline-flex',
8
- alignItems: 'center',
9
- justifyContent: 'center',
4
+ position: "relative",
5
+ display: "inline-flex",
6
+ alignItems: "center",
7
+ justifyContent: "center"
10
8
  };
11
9
  const overlayBase = {
12
- position: 'absolute',
13
- pointerEvents: 'none',
14
- overflow: 'visible',
10
+ position: "absolute",
11
+ pointerEvents: "none",
12
+ overflow: "visible"
15
13
  };
16
- // ══════════════════════════════════════════════════════
17
- // 1. NtdIconFloral 🌸
18
- // Botanical vines, leaves & flowers wrapping the icon
19
- // ══════════════════════════════════════════════════════
20
14
  const NtdIconFloral = /* @__PURE__ */ Object.assign(
21
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', vineColor = '#22c55e', petalColor = '#f472b6', leafColor, className, style, }, ref) => {
22
- const lc = leafColor !== null && leafColor !== void 0 ? leafColor : vineColor;
23
- const dur = `${duration}s`;
24
- const halfDur = `${duration * 0.5}s`;
25
- const bloomAt = `${duration * 0.55}s`;
26
- const flowerAt = `${duration * 0.75}s`;
27
- // Vine paths (viewBox 0 0 100 100, icon occupies ~20-80)
28
- const vine1 = 'M12,88 C6,72 4,52 10,38 C16,24 28,14 42,10';
29
- const vine2 = 'M88,12 C94,28 96,48 90,62 C84,76 72,86 58,90';
30
- const vine3 = 'M18,8 C32,4 52,2 68,8';
31
- const vine4 = 'M82,92 C68,96 48,98 32,92';
32
- const showExtra = intensity !== 'subtle';
33
- // Teardrop leaf
34
- 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';
35
- const baseLeaves = [
15
+ /* @__PURE__ */ forwardRef(
16
+ ({
17
+ children,
18
+ animate = true,
19
+ duration = 2,
20
+ intensity = "normal",
21
+ vineColor = "#22c55e",
22
+ petalColor = "#f472b6",
23
+ leafColor,
24
+ className,
25
+ style
26
+ }, ref) => {
27
+ const lc = leafColor ?? vineColor;
28
+ const dur = `${duration}s`;
29
+ const halfDur = `${duration * 0.5}s`;
30
+ const bloomAt = `${duration * 0.55}s`;
31
+ const flowerAt = `${duration * 0.75}s`;
32
+ const vine1 = "M12,88 C6,72 4,52 10,38 C16,24 28,14 42,10";
33
+ const vine2 = "M88,12 C94,28 96,48 90,62 C84,76 72,86 58,90";
34
+ const vine3 = "M18,8 C32,4 52,2 68,8";
35
+ const vine4 = "M82,92 C68,96 48,98 32,92";
36
+ const showExtra = intensity !== "subtle";
37
+ 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";
38
+ const baseLeaves = [
36
39
  { x: 10, y: 38, a: -50 },
37
40
  { x: 28, y: 14, a: 30 },
38
41
  { x: 90, y: 62, a: 140 },
39
- { x: 72, y: 86, a: -150 },
40
- ];
41
- const denseLeaves = intensity === 'dense'
42
- ? [
43
- { x: 6, y: 60, a: -80 },
44
- { x: 94, y: 40, a: 100 },
45
- { x: 50, y: 4, a: 5 },
46
- { x: 50, y: 96, a: 175 },
47
- ]
48
- : [];
49
- const allLeaves = [...baseLeaves, ...denseLeaves];
50
- // 5-petal flower helper
51
- const petalOffsets = [
42
+ { x: 72, y: 86, a: -150 }
43
+ ];
44
+ const denseLeaves = intensity === "dense" ? [
45
+ { x: 6, y: 60, a: -80 },
46
+ { x: 94, y: 40, a: 100 },
47
+ { x: 50, y: 4, a: 5 },
48
+ { x: 50, y: 96, a: 175 }
49
+ ] : [];
50
+ const allLeaves = [...baseLeaves, ...denseLeaves];
51
+ const petalOffsets = [
52
52
  [0, -1],
53
53
  [0.95, -0.31],
54
54
  [0.59, 0.81],
55
55
  [-0.59, 0.81],
56
- [-0.95, -0.31],
57
- ];
58
- const flowerPositions = [
56
+ [-0.95, -0.31]
57
+ ];
58
+ const flowerPositions = [
59
59
  { x: 42, y: 10, r: 3.5 },
60
- ...(intensity !== 'subtle' ? [{ x: 58, y: 90, r: 3 }] : []),
61
- ...(intensity === 'dense'
62
- ? [
63
- { x: 8, y: 55, r: 2.5 },
64
- { x: 92, y: 45, r: 2.5 },
60
+ ...intensity !== "subtle" ? [{ x: 58, y: 90, r: 3 }] : [],
61
+ ...intensity === "dense" ? [
62
+ { x: 8, y: 55, r: 2.5 },
63
+ { x: 92, y: 45, r: 2.5 }
64
+ ] : []
65
+ ];
66
+ const dashLen = 250;
67
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
68
+ children,
69
+ /* @__PURE__ */ jsxs(
70
+ "svg",
71
+ {
72
+ viewBox: "0 0 100 100",
73
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
74
+ "aria-hidden": true,
75
+ children: [
76
+ [vine1, vine2, ...showExtra ? [vine3, vine4] : []].map((d, i) => /* @__PURE__ */ jsx(
77
+ "path",
78
+ {
79
+ d,
80
+ fill: "none",
81
+ stroke: vineColor,
82
+ strokeWidth: i < 2 ? 1.5 : 1,
83
+ strokeLinecap: "round",
84
+ opacity: i < 2 ? 0.85 : 0.55,
85
+ ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
86
+ children: animate && /* @__PURE__ */ jsx(
87
+ "animate",
88
+ {
89
+ attributeName: "stroke-dashoffset",
90
+ from: `${dashLen}`,
91
+ to: "0",
92
+ dur,
93
+ fill: "freeze",
94
+ begin: i < 2 ? "0s" : `${duration * 0.3}s`
95
+ }
96
+ )
97
+ },
98
+ `v${i}`
99
+ )),
100
+ allLeaves.map((l, i) => /* @__PURE__ */ jsx("g", { transform: `translate(${l.x},${l.y}) rotate(${l.a})`, children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.8, children: [
101
+ /* @__PURE__ */ jsx("path", { d: leafD, fill: lc }),
102
+ /* @__PURE__ */ jsx(
103
+ "line",
104
+ {
105
+ x1: 0,
106
+ y1: -3,
107
+ x2: 0,
108
+ y2: 2.5,
109
+ stroke: lc,
110
+ strokeWidth: "0.4",
111
+ opacity: 0.4
112
+ }
113
+ ),
114
+ animate && /* @__PURE__ */ jsxs(Fragment, { children: [
115
+ /* @__PURE__ */ jsx(
116
+ "animate",
117
+ {
118
+ attributeName: "opacity",
119
+ from: "0",
120
+ to: "0.8",
121
+ dur: halfDur,
122
+ begin: bloomAt,
123
+ fill: "freeze"
124
+ }
125
+ ),
126
+ /* @__PURE__ */ jsx(
127
+ "animateTransform",
128
+ {
129
+ attributeName: "transform",
130
+ type: "scale",
131
+ values: "0 0;1 1",
132
+ keyTimes: "0;1",
133
+ keySplines: "0.34 1 0.64 1",
134
+ calcMode: "spline",
135
+ dur: halfDur,
136
+ begin: bloomAt,
137
+ fill: "freeze"
138
+ }
139
+ )
140
+ ] })
141
+ ] }) }, `l${i}`)),
142
+ flowerPositions.map((f, fi) => /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 1, children: [
143
+ petalOffsets.map(([ox, oy], pi) => /* @__PURE__ */ jsx(
144
+ "circle",
145
+ {
146
+ cx: f.x + ox * f.r,
147
+ cy: f.y + oy * f.r,
148
+ r: f.r * 0.5,
149
+ fill: petalColor,
150
+ opacity: 0.85
151
+ },
152
+ pi
153
+ )),
154
+ /* @__PURE__ */ jsx("circle", { cx: f.x, cy: f.y, r: f.r * 0.3, fill: "#fde047" }),
155
+ animate && /* @__PURE__ */ jsxs(Fragment, { children: [
156
+ /* @__PURE__ */ jsx(
157
+ "animate",
158
+ {
159
+ attributeName: "opacity",
160
+ from: "0",
161
+ to: "1",
162
+ dur: halfDur,
163
+ begin: flowerAt,
164
+ fill: "freeze"
165
+ }
166
+ ),
167
+ /* @__PURE__ */ jsx(
168
+ "animateTransform",
169
+ {
170
+ attributeName: "transform",
171
+ type: "scale",
172
+ values: "0.3 0.3;1 1",
173
+ keyTimes: "0;1",
174
+ keySplines: "0.34 1 0.64 1",
175
+ calcMode: "spline",
176
+ dur: halfDur,
177
+ begin: flowerAt,
178
+ fill: "freeze"
179
+ }
180
+ )
181
+ ] })
182
+ ] }, `f${fi}`)),
183
+ animate && /* @__PURE__ */ jsx(
184
+ "animateTransform",
185
+ {
186
+ attributeName: "transform",
187
+ type: "rotate",
188
+ values: "0 50 50;1 50 50;-1 50 50;0 50 50",
189
+ dur: "4s",
190
+ repeatCount: "indefinite",
191
+ begin: `${duration}s`
192
+ }
193
+ )
65
194
  ]
66
- : []),
67
- ];
68
- const dashLen = 250;
69
- 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 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 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` }))] })] }));
70
- }), { displayName: 'NtdIconFloral' });
71
- // ══════════════════════════════════════════════════════
72
- // 2. NtdIconFestive 🎉
73
- // Confetti burst, stars & sparkles
74
- // ══════════════════════════════════════════════════════
195
+ }
196
+ )
197
+ ] });
198
+ }
199
+ ),
200
+ { displayName: "NtdIconFloral" }
201
+ );
75
202
  const NtdIconFestive = /* @__PURE__ */ Object.assign(
76
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 1.5, intensity = 'normal', colors, sparkleColor = '#fbbf24', className, style, }, ref) => {
77
- const cols = colors !== null && colors !== void 0 ? colors : ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899'];
78
- const dur = `${duration * 0.6}s`;
79
- // Confetti pieces: position relative to center, rotation, color index
80
- const baseConfetti = [
203
+ /* @__PURE__ */ forwardRef(
204
+ ({
205
+ children,
206
+ animate = true,
207
+ duration = 1.5,
208
+ intensity = "normal",
209
+ colors,
210
+ sparkleColor = "#fbbf24",
211
+ className,
212
+ style
213
+ }, ref) => {
214
+ const cols = colors ?? ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ec4899"];
215
+ const dur = `${duration * 0.6}s`;
216
+ const baseConfetti = [
81
217
  { x: 15, y: 15, r: 45, ci: 0 },
82
218
  { x: 80, y: 10, r: -30, ci: 1 },
83
219
  { x: 90, y: 75, r: 60, ci: 2 },
@@ -85,177 +221,519 @@ const NtdIconFestive = /* @__PURE__ */ Object.assign(
85
221
  { x: 50, y: 5, r: 20, ci: 4 },
86
222
  { x: 50, y: 95, r: -15, ci: 5 },
87
223
  { x: 5, y: 50, r: 75, ci: 0 },
88
- { x: 95, y: 50, r: -60, ci: 1 },
89
- ];
90
- const denseConfetti = intensity === 'dense'
91
- ? [
92
- { x: 30, y: 5, r: 35, ci: 2 },
93
- { x: 70, y: 5, r: -25, ci: 3 },
94
- { x: 30, y: 95, r: 50, ci: 4 },
95
- { x: 70, y: 95, r: -40, ci: 5 },
96
- { x: 5, y: 30, r: 65, ci: 0 },
97
- { x: 95, y: 30, r: -55, ci: 1 },
98
- { x: 5, y: 70, r: 40, ci: 2 },
99
- { x: 95, y: 70, r: -35, ci: 3 },
100
- ]
101
- : [];
102
- const allConfetti = [
103
- ...(intensity === 'subtle' ? baseConfetti.slice(0, 4) : baseConfetti),
104
- ...denseConfetti,
105
- ];
106
- // 4-point star path
107
- 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';
108
- const stars = [
224
+ { x: 95, y: 50, r: -60, ci: 1 }
225
+ ];
226
+ const denseConfetti = intensity === "dense" ? [
227
+ { x: 30, y: 5, r: 35, ci: 2 },
228
+ { x: 70, y: 5, r: -25, ci: 3 },
229
+ { x: 30, y: 95, r: 50, ci: 4 },
230
+ { x: 70, y: 95, r: -40, ci: 5 },
231
+ { x: 5, y: 30, r: 65, ci: 0 },
232
+ { x: 95, y: 30, r: -55, ci: 1 },
233
+ { x: 5, y: 70, r: 40, ci: 2 },
234
+ { x: 95, y: 70, r: -35, ci: 3 }
235
+ ] : [];
236
+ const allConfetti = [
237
+ ...intensity === "subtle" ? baseConfetti.slice(0, 4) : baseConfetti,
238
+ ...denseConfetti
239
+ ];
240
+ 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";
241
+ const stars = [
109
242
  { x: 20, y: 8, s: 0.6 },
110
243
  { x: 85, y: 20, s: 0.5 },
111
- ...(intensity !== 'subtle'
112
- ? [
113
- { x: 15, y: 85, s: 0.5 },
114
- { x: 80, y: 88, s: 0.4 },
115
- ]
116
- : []),
117
- ...(intensity === 'dense'
118
- ? [
119
- { x: 50, y: 2, s: 0.7 },
120
- { x: 95, y: 55, s: 0.45 },
121
- ]
122
- : []),
123
- ];
124
- // Sparkle dots
125
- const sparkles = [
244
+ ...intensity !== "subtle" ? [
245
+ { x: 15, y: 85, s: 0.5 },
246
+ { x: 80, y: 88, s: 0.4 }
247
+ ] : [],
248
+ ...intensity === "dense" ? [
249
+ { x: 50, y: 2, s: 0.7 },
250
+ { x: 95, y: 55, s: 0.45 }
251
+ ] : []
252
+ ];
253
+ const sparkles = [
126
254
  { cx: 8, cy: 12, r: 1.5 },
127
255
  { cx: 92, cy: 88, r: 1.2 },
128
256
  { cx: 45, cy: 2, r: 1 },
129
257
  { cx: 55, cy: 98, r: 1 },
130
- ...(intensity !== 'subtle'
131
- ? [
132
- { cx: 3, cy: 55, r: 1.3 },
133
- { cx: 97, cy: 45, r: 1.1 },
258
+ ...intensity !== "subtle" ? [
259
+ { cx: 3, cy: 55, r: 1.3 },
260
+ { cx: 97, cy: 45, r: 1.1 }
261
+ ] : []
262
+ ];
263
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
264
+ children,
265
+ /* @__PURE__ */ jsxs(
266
+ "svg",
267
+ {
268
+ viewBox: "0 0 100 100",
269
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%" },
270
+ "aria-hidden": true,
271
+ children: [
272
+ allConfetti.map((c, i) => {
273
+ const delay = `${(i * 0.07).toFixed(2)}s`;
274
+ const col = cols[c.ci % cols.length];
275
+ return /* @__PURE__ */ jsx("g", { transform: "translate(50,50)", children: /* @__PURE__ */ jsxs("g", { opacity: animate ? 0 : 0.85, children: [
276
+ /* @__PURE__ */ jsx(
277
+ "rect",
278
+ {
279
+ x: c.x - 50 - 1.5,
280
+ y: c.y - 50 - 3,
281
+ width: 3,
282
+ height: 6,
283
+ rx: 0.5,
284
+ fill: col,
285
+ transform: `rotate(${c.r} ${c.x - 50} ${c.y - 50})`
286
+ }
287
+ ),
288
+ animate && /* @__PURE__ */ jsxs(Fragment, { children: [
289
+ /* @__PURE__ */ jsx(
290
+ "animate",
291
+ {
292
+ attributeName: "opacity",
293
+ from: "0",
294
+ to: "0.85",
295
+ dur: "0.4s",
296
+ begin: delay,
297
+ fill: "freeze"
298
+ }
299
+ ),
300
+ /* @__PURE__ */ jsx(
301
+ "animateTransform",
302
+ {
303
+ attributeName: "transform",
304
+ type: "scale",
305
+ values: "0 0;1 1",
306
+ keyTimes: "0;1",
307
+ keySplines: "0.34 1 0.64 1",
308
+ calcMode: "spline",
309
+ dur,
310
+ begin: delay,
311
+ fill: "freeze"
312
+ }
313
+ )
314
+ ] })
315
+ ] }) }, `c${i}`);
316
+ }),
317
+ stars.map((s, i) => /* @__PURE__ */ jsxs("g", { transform: `translate(${s.x},${s.y}) scale(${s.s})`, children: [
318
+ /* @__PURE__ */ jsx("path", { d: starD, fill: sparkleColor, opacity: animate ? 0 : 0.9, children: animate && /* @__PURE__ */ jsx(
319
+ "animate",
320
+ {
321
+ attributeName: "opacity",
322
+ from: "0",
323
+ to: "0.9",
324
+ dur: "0.5s",
325
+ begin: `${(i * 0.15 + 0.3).toFixed(2)}s`,
326
+ fill: "freeze"
327
+ }
328
+ ) }),
329
+ animate && /* @__PURE__ */ jsx(
330
+ "animateTransform",
331
+ {
332
+ attributeName: "transform",
333
+ type: "scale",
334
+ values: `${s.s};${s.s * 1.3};${s.s}`,
335
+ dur: "1.5s",
336
+ repeatCount: "indefinite",
337
+ begin: `${duration + 0.5}s`
338
+ }
339
+ )
340
+ ] }, `s${i}`)),
341
+ sparkles.map((sp, i) => /* @__PURE__ */ jsx(
342
+ "circle",
343
+ {
344
+ cx: sp.cx,
345
+ cy: sp.cy,
346
+ r: sp.r,
347
+ fill: sparkleColor,
348
+ opacity: animate ? 0 : 0.7,
349
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
350
+ /* @__PURE__ */ jsx(
351
+ "animate",
352
+ {
353
+ attributeName: "opacity",
354
+ from: "0",
355
+ to: "0.7",
356
+ dur: "0.3s",
357
+ begin: `${(duration * 0.4 + i * 0.08).toFixed(2)}s`,
358
+ fill: "freeze"
359
+ }
360
+ ),
361
+ /* @__PURE__ */ jsx(
362
+ "animate",
363
+ {
364
+ attributeName: "opacity",
365
+ values: "0.3;0.9;0.3",
366
+ dur: `${1 + i * 0.3}s`,
367
+ repeatCount: "indefinite",
368
+ begin: `${duration}s`
369
+ }
370
+ )
371
+ ] })
372
+ },
373
+ `sp${i}`
374
+ ))
134
375
  ]
135
- : []),
136
- ];
137
- 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) => {
138
- const delay = `${(i * 0.07).toFixed(2)}s`;
139
- const col = cols[c.ci % cols.length];
140
- 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 0.64 1", calcMode: "spline", dur: dur, begin: delay, fill: "freeze" })] }))] }) }, `c${i}`));
141
- }), 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}`)))] })] }));
142
- }), { displayName: 'NtdIconFestive' });
143
- // ══════════════════════════════════════════════════════
144
- // 3. NtdIconNeon 💡
145
- // Multi-layered glow with neon sign flicker
146
- // ══════════════════════════════════════════════════════
376
+ }
377
+ )
378
+ ] });
379
+ }
380
+ ),
381
+ { displayName: "NtdIconFestive" }
382
+ );
147
383
  const NtdIconNeon = /* @__PURE__ */ Object.assign(
148
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 4, intensity = 'normal', glowColor = '#0ff', secondaryGlow, flicker = true, className, style, }, ref) => {
149
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
150
- const glow2 = secondaryGlow !== null && secondaryGlow !== void 0 ? secondaryGlow : glowColor;
151
- const blur = intensity === 'dense' ? 8 : intensity === 'subtle' ? 3 : 5;
152
- const spread = intensity === 'dense' ? 20 : intensity === 'subtle' ? 8 : 12;
153
- const filterValue = [
384
+ /* @__PURE__ */ forwardRef(
385
+ ({
386
+ children,
387
+ animate = true,
388
+ duration = 4,
389
+ intensity = "normal",
390
+ glowColor = "#0ff",
391
+ secondaryGlow,
392
+ flicker = true,
393
+ className,
394
+ style
395
+ }, ref) => {
396
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
397
+ const glow2 = secondaryGlow ?? glowColor;
398
+ const blur = intensity === "dense" ? 8 : intensity === "subtle" ? 3 : 5;
399
+ const spread = intensity === "dense" ? 20 : intensity === "subtle" ? 8 : 12;
400
+ const filterValue = [
154
401
  `drop-shadow(0 0 ${blur * 0.3}px ${glowColor})`,
155
402
  `drop-shadow(0 0 ${blur}px ${glowColor})`,
156
403
  `drop-shadow(0 0 ${spread}px ${glow2}80)`,
157
- intensity === 'dense' ? `drop-shadow(0 0 ${spread * 1.5}px ${glow2}40)` : '',
158
- ]
159
- .filter(Boolean)
160
- .join(' ');
161
- const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
162
- const animName = `ntd_neon_${uid}`;
163
- return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [animate && flicker && (jsx("style", { children: `
164
- @keyframes ${animName} {
165
- 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
166
- 20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
167
- }
168
- ` })), jsx("span", { style: {
169
- display: 'inline-flex',
170
- filter: filterValue,
171
- ...(animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}),
172
- }, children: children })] }));
173
- }), { displayName: 'NtdIconNeon' });
174
- // ══════════════════════════════════════════════════════
175
- // 4. NtdIconSketch ✏️
176
- // Hand-drawn look with SVG turbulence + scribble overlay
177
- // ══════════════════════════════════════════════════════
404
+ intensity === "dense" ? `drop-shadow(0 0 ${spread * 1.5}px ${glow2}40)` : ""
405
+ ].filter(Boolean).join(" ");
406
+ const dimFilter = `drop-shadow(0 0 ${blur * 0.2}px ${glowColor})`;
407
+ const animName = `ntd_neon_${uid}`;
408
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
409
+ animate && flicker && /* @__PURE__ */ jsx("style", { children: `
410
+ @keyframes ${animName} {
411
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; filter: ${filterValue}; }
412
+ 20%, 24%, 55% { opacity: 0.5; filter: ${dimFilter}; }
413
+ }
414
+ ` }),
415
+ /* @__PURE__ */ jsx(
416
+ "span",
417
+ {
418
+ style: {
419
+ display: "inline-flex",
420
+ filter: filterValue,
421
+ ...animate && flicker ? { animation: `${animName} ${duration}s infinite` } : {}
422
+ },
423
+ children
424
+ }
425
+ )
426
+ ] });
427
+ }
428
+ ),
429
+ { displayName: "NtdIconNeon" }
430
+ );
178
431
  const NtdIconSketch = /* @__PURE__ */ Object.assign(
179
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 1.5, intensity = 'normal', strokeColor = '#374151', roughness = 2, className, style, }, ref) => {
180
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
181
- const filterId = `ntd_sketch_${uid}`;
182
- const dur = `${duration}s`;
183
- const dashLen = 100;
184
- // Scribble paths
185
- const scribbleMain = 'M18,82 C25,80 35,84 50,81 C65,78 75,82 82,80';
186
- const scribbleExtra = ['M20,16 C28,18 38,15 48,17', 'M55,85 C65,83 75,86 82,84'];
187
- // Cross-hatch mark positions
188
- const hatchCount = intensity === 'dense' ? 6 : intensity === 'subtle' ? 2 : 4;
189
- const hatchPositions = [
432
+ /* @__PURE__ */ forwardRef(
433
+ ({
434
+ children,
435
+ animate = true,
436
+ duration = 1.5,
437
+ intensity = "normal",
438
+ strokeColor = "#374151",
439
+ roughness = 2,
440
+ className,
441
+ style
442
+ }, ref) => {
443
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
444
+ const filterId = `ntd_sketch_${uid}`;
445
+ const dur = `${duration}s`;
446
+ const dashLen = 100;
447
+ const scribbleMain = "M18,82 C25,80 35,84 50,81 C65,78 75,82 82,80";
448
+ const scribbleExtra = ["M20,16 C28,18 38,15 48,17", "M55,85 C65,83 75,86 82,84"];
449
+ const hatchCount = intensity === "dense" ? 6 : intensity === "subtle" ? 2 : 4;
450
+ const hatchPositions = [
190
451
  { x1: 8, y1: 8, x2: 14, y2: 14 },
191
452
  { x1: 86, y1: 8, x2: 92, y2: 14 },
192
453
  { x1: 8, y1: 86, x2: 14, y2: 92 },
193
454
  { x1: 86, y1: 86, x2: 92, y2: 92 },
194
455
  { x1: 10, y1: 12, x2: 16, y2: 10 },
195
- { x1: 84, y1: 12, x2: 90, y2: 10 },
196
- ];
197
- 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' &&
198
- 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}`)))] })] }));
199
- }), { displayName: 'NtdIconSketch' });
200
- // ══════════════════════════════════════════════════════
201
- // 5. NtdIconWatercolor 🎨
202
- // Soft paint blobs & bleed effect behind the icon
203
- // ══════════════════════════════════════════════════════
456
+ { x1: 84, y1: 12, x2: 90, y2: 10 }
457
+ ];
458
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
459
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: filterId, children: [
460
+ /* @__PURE__ */ jsx(
461
+ "feTurbulence",
462
+ {
463
+ type: "turbulence",
464
+ baseFrequency: 0.02 + roughness * 8e-3,
465
+ numOctaves: 3,
466
+ seed: 2,
467
+ result: "noise"
468
+ }
469
+ ),
470
+ /* @__PURE__ */ jsx(
471
+ "feDisplacementMap",
472
+ {
473
+ in: "SourceGraphic",
474
+ in2: "noise",
475
+ scale: roughness,
476
+ xChannelSelector: "R",
477
+ yChannelSelector: "G"
478
+ }
479
+ )
480
+ ] }) }) }),
481
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", filter: `url(#${filterId})` }, children }),
482
+ /* @__PURE__ */ jsxs(
483
+ "svg",
484
+ {
485
+ viewBox: "0 0 100 100",
486
+ style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%" },
487
+ "aria-hidden": true,
488
+ children: [
489
+ /* @__PURE__ */ jsx(
490
+ "path",
491
+ {
492
+ d: scribbleMain,
493
+ fill: "none",
494
+ stroke: strokeColor,
495
+ strokeWidth: "1",
496
+ strokeLinecap: "round",
497
+ opacity: 0.5,
498
+ ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
499
+ children: animate && /* @__PURE__ */ jsx(
500
+ "animate",
501
+ {
502
+ attributeName: "stroke-dashoffset",
503
+ from: `${dashLen}`,
504
+ to: "0",
505
+ dur,
506
+ fill: "freeze"
507
+ }
508
+ )
509
+ }
510
+ ),
511
+ intensity !== "subtle" && scribbleExtra.slice(0, intensity === "dense" ? 2 : 1).map((d, i) => /* @__PURE__ */ jsx(
512
+ "path",
513
+ {
514
+ d,
515
+ fill: "none",
516
+ stroke: strokeColor,
517
+ strokeWidth: "0.8",
518
+ strokeLinecap: "round",
519
+ opacity: 0.35,
520
+ ...animate ? { strokeDasharray: dashLen, strokeDashoffset: dashLen } : {},
521
+ children: animate && /* @__PURE__ */ jsx(
522
+ "animate",
523
+ {
524
+ attributeName: "stroke-dashoffset",
525
+ from: `${dashLen}`,
526
+ to: "0",
527
+ dur,
528
+ fill: "freeze",
529
+ begin: `${0.3 + i * 0.2}s`
530
+ }
531
+ )
532
+ },
533
+ `se${i}`
534
+ )),
535
+ hatchPositions.slice(0, hatchCount).map((p, i) => /* @__PURE__ */ jsx(
536
+ "line",
537
+ {
538
+ x1: p.x1,
539
+ y1: p.y1,
540
+ x2: p.x2,
541
+ y2: p.y2,
542
+ stroke: strokeColor,
543
+ strokeWidth: "0.6",
544
+ strokeLinecap: "round",
545
+ opacity: animate ? 0 : 0.3,
546
+ children: animate && /* @__PURE__ */ jsx(
547
+ "animate",
548
+ {
549
+ attributeName: "opacity",
550
+ from: "0",
551
+ to: "0.3",
552
+ dur: "0.3s",
553
+ begin: `${duration * 0.7 + i * 0.1}s`,
554
+ fill: "freeze"
555
+ }
556
+ )
557
+ },
558
+ `h${i}`
559
+ ))
560
+ ]
561
+ }
562
+ )
563
+ ] });
564
+ }
565
+ ),
566
+ { displayName: "NtdIconSketch" }
567
+ );
204
568
  const NtdIconWatercolor = /* @__PURE__ */ Object.assign(
205
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', tintColor = '#818cf8', bleedColor = '#f0abfc', className, style, }, ref) => {
206
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
207
- const filterId = `ntd_wc_${uid}`;
208
- const blobFilter = `${filterId}_blob`;
209
- // Paint splotches
210
- const splotches = [
569
+ /* @__PURE__ */ forwardRef(
570
+ ({
571
+ children,
572
+ animate = true,
573
+ duration = 2,
574
+ intensity = "normal",
575
+ tintColor = "#818cf8",
576
+ bleedColor = "#f0abfc",
577
+ className,
578
+ style
579
+ }, ref) => {
580
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
581
+ const filterId = `ntd_wc_${uid}`;
582
+ const blobFilter = `${filterId}_blob`;
583
+ const splotches = [
211
584
  { cx: 30, cy: 35, r: 18, color: tintColor, op: 0.2 },
212
585
  { cx: 70, cy: 65, r: 15, color: bleedColor, op: 0.18 },
213
586
  { cx: 50, cy: 50, r: 22, color: tintColor, op: 0.12 },
214
- ...(intensity !== 'subtle'
215
- ? [
216
- { cx: 25, cy: 70, r: 12, color: bleedColor, op: 0.15 },
217
- { cx: 75, cy: 30, r: 10, color: tintColor, op: 0.15 },
218
- ]
219
- : []),
220
- ...(intensity === 'dense'
221
- ? [
222
- { cx: 15, cy: 50, r: 14, color: bleedColor, op: 0.12 },
223
- { cx: 85, cy: 50, r: 12, color: tintColor, op: 0.12 },
224
- { cx: 50, cy: 15, r: 10, color: bleedColor, op: 0.1 },
225
- { cx: 50, cy: 85, r: 11, color: tintColor, op: 0.1 },
226
- ]
227
- : []),
228
- ];
229
- // Splatter dots
230
- const splatters = [
587
+ ...intensity !== "subtle" ? [
588
+ { cx: 25, cy: 70, r: 12, color: bleedColor, op: 0.15 },
589
+ { cx: 75, cy: 30, r: 10, color: tintColor, op: 0.15 }
590
+ ] : [],
591
+ ...intensity === "dense" ? [
592
+ { cx: 15, cy: 50, r: 14, color: bleedColor, op: 0.12 },
593
+ { cx: 85, cy: 50, r: 12, color: tintColor, op: 0.12 },
594
+ { cx: 50, cy: 15, r: 10, color: bleedColor, op: 0.1 },
595
+ { cx: 50, cy: 85, r: 11, color: tintColor, op: 0.1 }
596
+ ] : []
597
+ ];
598
+ const splatters = [
231
599
  { cx: 12, cy: 20, r: 2 },
232
600
  { cx: 88, cy: 80, r: 1.5 },
233
601
  { cx: 20, cy: 85, r: 1.8 },
234
602
  { cx: 80, cy: 15, r: 1.3 },
235
- ...(intensity !== 'subtle'
236
- ? [
237
- { cx: 8, cy: 45, r: 1.2 },
238
- { cx: 92, cy: 55, r: 1 },
603
+ ...intensity !== "subtle" ? [
604
+ { cx: 8, cy: 45, r: 1.2 },
605
+ { cx: 92, cy: 55, r: 1 }
606
+ ] : []
607
+ ];
608
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
609
+ /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, "aria-hidden": true, children: /* @__PURE__ */ jsxs("defs", { children: [
610
+ /* @__PURE__ */ jsxs("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
611
+ /* @__PURE__ */ jsx(
612
+ "feTurbulence",
613
+ {
614
+ type: "fractalNoise",
615
+ baseFrequency: "0.04",
616
+ numOctaves: 4,
617
+ seed: 5,
618
+ result: "noise"
619
+ }
620
+ ),
621
+ /* @__PURE__ */ jsx(
622
+ "feDisplacementMap",
623
+ {
624
+ in: "SourceGraphic",
625
+ in2: "noise",
626
+ scale: 3,
627
+ xChannelSelector: "R",
628
+ yChannelSelector: "G",
629
+ result: "displaced"
630
+ }
631
+ ),
632
+ /* @__PURE__ */ jsx("feGaussianBlur", { in: "displaced", stdDeviation: "0.5" })
633
+ ] }),
634
+ /* @__PURE__ */ jsx("filter", { id: blobFilter, children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "3" }) })
635
+ ] }) }),
636
+ /* @__PURE__ */ jsxs(
637
+ "svg",
638
+ {
639
+ viewBox: "0 0 100 100",
640
+ style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
641
+ "aria-hidden": true,
642
+ children: [
643
+ splotches.map((s, i) => /* @__PURE__ */ jsx(
644
+ "circle",
645
+ {
646
+ cx: s.cx,
647
+ cy: s.cy,
648
+ r: animate ? 0 : s.r,
649
+ fill: s.color,
650
+ opacity: s.op,
651
+ filter: `url(#${blobFilter})`,
652
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
653
+ /* @__PURE__ */ jsx(
654
+ "animate",
655
+ {
656
+ attributeName: "r",
657
+ from: "0",
658
+ to: `${s.r}`,
659
+ dur: `${duration * 0.7}s`,
660
+ begin: `${(i * 0.15).toFixed(2)}s`,
661
+ fill: "freeze"
662
+ }
663
+ ),
664
+ /* @__PURE__ */ jsx(
665
+ "animate",
666
+ {
667
+ attributeName: "opacity",
668
+ values: `${s.op};${s.op * 1.3};${s.op}`,
669
+ dur: "3s",
670
+ begin: `${duration}s`,
671
+ repeatCount: "indefinite"
672
+ }
673
+ )
674
+ ] })
675
+ },
676
+ `sp${i}`
677
+ )),
678
+ splatters.map((d, i) => /* @__PURE__ */ jsx(
679
+ "circle",
680
+ {
681
+ cx: d.cx,
682
+ cy: d.cy,
683
+ r: d.r,
684
+ fill: i % 2 === 0 ? tintColor : bleedColor,
685
+ opacity: animate ? 0 : 0.3,
686
+ filter: `url(#${blobFilter})`,
687
+ children: animate && /* @__PURE__ */ jsx(
688
+ "animate",
689
+ {
690
+ attributeName: "opacity",
691
+ from: "0",
692
+ to: "0.3",
693
+ dur: "0.3s",
694
+ begin: `${(duration * 0.5 + i * 0.1).toFixed(2)}s`,
695
+ fill: "freeze"
696
+ }
697
+ )
698
+ },
699
+ `dot${i}`
700
+ ))
239
701
  ]
240
- : []),
241
- ];
242
- 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: {
243
- display: 'inline-flex',
244
- filter: `url(#${filterId})`,
245
- position: 'relative',
246
- zIndex: 1,
247
- }, children: children })] }));
248
- }), { displayName: 'NtdIconWatercolor' });
249
- // ══════════════════════════════════════════════════════
250
- // 6. NtdIconCosmic ✨
251
- // Stars, nebula glow & constellation lines
252
- // ══════════════════════════════════════════════════════
702
+ }
703
+ ),
704
+ /* @__PURE__ */ jsx(
705
+ "span",
706
+ {
707
+ style: {
708
+ display: "inline-flex",
709
+ filter: `url(#${filterId})`,
710
+ position: "relative",
711
+ zIndex: 1
712
+ },
713
+ children
714
+ }
715
+ )
716
+ ] });
717
+ }
718
+ ),
719
+ { displayName: "NtdIconWatercolor" }
720
+ );
253
721
  const NtdIconCosmic = /* @__PURE__ */ Object.assign(
254
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', starColor = '#e2e8f0', nebulaColor = '#7c3aed', nebulaColor2 = '#2563eb', className, style, }, ref) => {
255
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
256
- const nebulaFilter = `ntd_cosm_${uid}`;
257
- // Stars
258
- const baseStars = [
722
+ /* @__PURE__ */ forwardRef(
723
+ ({
724
+ children,
725
+ animate = true,
726
+ duration = 2,
727
+ intensity = "normal",
728
+ starColor = "#e2e8f0",
729
+ nebulaColor = "#7c3aed",
730
+ nebulaColor2 = "#2563eb",
731
+ className,
732
+ style
733
+ }, ref) => {
734
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
735
+ const nebulaFilter = `ntd_cosm_${uid}`;
736
+ const baseStars = [
259
737
  { cx: 8, cy: 15, r: 1.2 },
260
738
  { cx: 22, cy: 5, r: 0.9 },
261
739
  { cx: 45, cy: 8, r: 1 },
@@ -266,206 +744,575 @@ const NtdIconCosmic = /* @__PURE__ */ Object.assign(
266
744
  { cx: 12, cy: 82, r: 1.1 },
267
745
  { cx: 35, cy: 92, r: 0.8 },
268
746
  { cx: 72, cy: 88, r: 1 },
269
- { cx: 88, cy: 78, r: 0.7 },
270
- ];
271
- const denseStars = intensity === 'dense'
272
- ? [
273
- { cx: 55, cy: 3, r: 0.6 },
274
- { cx: 3, cy: 65, r: 0.8 },
275
- { cx: 97, cy: 35, r: 0.5 },
276
- { cx: 60, cy: 97, r: 0.7 },
277
- { cx: 15, cy: 35, r: 0.5 },
278
- { cx: 85, cy: 42, r: 0.6 },
279
- ]
280
- : [];
281
- const allStars = [
282
- ...(intensity === 'subtle' ? baseStars.slice(0, 6) : baseStars),
283
- ...denseStars,
284
- ];
285
- // Constellation lines connecting nearby stars
286
- const constellations = [
747
+ { cx: 88, cy: 78, r: 0.7 }
748
+ ];
749
+ const denseStars = intensity === "dense" ? [
750
+ { cx: 55, cy: 3, r: 0.6 },
751
+ { cx: 3, cy: 65, r: 0.8 },
752
+ { cx: 97, cy: 35, r: 0.5 },
753
+ { cx: 60, cy: 97, r: 0.7 },
754
+ { cx: 15, cy: 35, r: 0.5 },
755
+ { cx: 85, cy: 42, r: 0.6 }
756
+ ] : [];
757
+ const allStars = [
758
+ ...intensity === "subtle" ? baseStars.slice(0, 6) : baseStars,
759
+ ...denseStars
760
+ ];
761
+ const constellations = [
287
762
  { from: [8, 15], to: [22, 5] },
288
763
  { from: [22, 5], to: [45, 8] },
289
764
  { from: [78, 12], to: [92, 22] },
290
- ...(intensity !== 'subtle'
291
- ? [
292
- { from: [12, 82], to: [35, 92] },
293
- { from: [72, 88], to: [88, 78] },
294
- ]
295
- : []),
296
- ...(intensity === 'dense'
297
- ? [
298
- { from: [45, 8], to: [78, 12] },
299
- { from: [5, 42], to: [12, 82] },
300
- ]
301
- : []),
302
- ];
303
- // Nebula blobs
304
- const nebulae = [
765
+ ...intensity !== "subtle" ? [
766
+ { from: [12, 82], to: [35, 92] },
767
+ { from: [72, 88], to: [88, 78] }
768
+ ] : [],
769
+ ...intensity === "dense" ? [
770
+ { from: [45, 8], to: [78, 12] },
771
+ { from: [5, 42], to: [12, 82] }
772
+ ] : []
773
+ ];
774
+ const nebulae = [
305
775
  { cx: 25, cy: 25, r: 16, color: nebulaColor, op: 0.12 },
306
776
  { cx: 75, cy: 75, r: 18, color: nebulaColor2, op: 0.1 },
307
- ...(intensity !== 'subtle'
308
- ? [{ cx: 50, cy: 50, r: 14, color: nebulaColor, op: 0.08 }]
309
- : []),
310
- ...(intensity === 'dense'
311
- ? [
312
- { cx: 80, cy: 20, r: 12, color: nebulaColor2, op: 0.09 },
313
- { cx: 20, cy: 80, r: 13, color: nebulaColor, op: 0.09 },
777
+ ...intensity !== "subtle" ? [{ cx: 50, cy: 50, r: 14, color: nebulaColor, op: 0.08 }] : [],
778
+ ...intensity === "dense" ? [
779
+ { cx: 80, cy: 20, r: 12, color: nebulaColor2, op: 0.09 },
780
+ { cx: 20, cy: 80, r: 13, color: nebulaColor, op: 0.09 }
781
+ ] : []
782
+ ];
783
+ const lineLen = 80;
784
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
785
+ /* @__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" }) }) }) }),
786
+ /* @__PURE__ */ jsxs(
787
+ "svg",
788
+ {
789
+ viewBox: "0 0 100 100",
790
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
791
+ "aria-hidden": true,
792
+ children: [
793
+ nebulae.map((n, i) => /* @__PURE__ */ jsx(
794
+ "circle",
795
+ {
796
+ cx: n.cx,
797
+ cy: n.cy,
798
+ r: n.r,
799
+ fill: n.color,
800
+ opacity: animate ? 0 : n.op,
801
+ filter: `url(#${nebulaFilter})`,
802
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
803
+ /* @__PURE__ */ jsx(
804
+ "animate",
805
+ {
806
+ attributeName: "opacity",
807
+ from: "0",
808
+ to: `${n.op}`,
809
+ dur: `${duration}s`,
810
+ fill: "freeze"
811
+ }
812
+ ),
813
+ /* @__PURE__ */ jsx(
814
+ "animate",
815
+ {
816
+ attributeName: "opacity",
817
+ values: `${n.op};${n.op * 1.5};${n.op}`,
818
+ dur: "5s",
819
+ repeatCount: "indefinite",
820
+ begin: `${duration}s`
821
+ }
822
+ ),
823
+ /* @__PURE__ */ jsx(
824
+ "animate",
825
+ {
826
+ attributeName: "r",
827
+ values: `${n.r};${n.r * 1.1};${n.r}`,
828
+ dur: "6s",
829
+ repeatCount: "indefinite",
830
+ begin: `${duration}s`
831
+ }
832
+ )
833
+ ] })
834
+ },
835
+ `nb${i}`
836
+ )),
837
+ constellations.map((c, i) => /* @__PURE__ */ jsx(
838
+ "line",
839
+ {
840
+ x1: c.from[0],
841
+ y1: c.from[1],
842
+ x2: c.to[0],
843
+ y2: c.to[1],
844
+ stroke: starColor,
845
+ strokeWidth: "0.3",
846
+ opacity: 0.25,
847
+ ...animate ? { strokeDasharray: lineLen, strokeDashoffset: lineLen } : {},
848
+ children: animate && /* @__PURE__ */ jsx(
849
+ "animate",
850
+ {
851
+ attributeName: "stroke-dashoffset",
852
+ from: `${lineLen}`,
853
+ to: "0",
854
+ dur: `${duration * 0.8}s`,
855
+ begin: `${(i * 0.2).toFixed(1)}s`,
856
+ fill: "freeze"
857
+ }
858
+ )
859
+ },
860
+ `cl${i}`
861
+ ))
862
+ ]
863
+ }
864
+ ),
865
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
866
+ /* @__PURE__ */ jsxs(
867
+ "svg",
868
+ {
869
+ viewBox: "0 0 100 100",
870
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 2 },
871
+ "aria-hidden": true,
872
+ children: [
873
+ allStars.map((s, i) => /* @__PURE__ */ jsx(
874
+ "circle",
875
+ {
876
+ cx: s.cx,
877
+ cy: s.cy,
878
+ r: s.r,
879
+ fill: starColor,
880
+ opacity: animate ? 0 : 0.8,
881
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
882
+ /* @__PURE__ */ jsx(
883
+ "animate",
884
+ {
885
+ attributeName: "opacity",
886
+ from: "0",
887
+ to: "0.8",
888
+ dur: `${duration * 0.5}s`,
889
+ begin: `${(i * 0.1).toFixed(2)}s`,
890
+ fill: "freeze"
891
+ }
892
+ ),
893
+ /* @__PURE__ */ jsx(
894
+ "animate",
895
+ {
896
+ attributeName: "opacity",
897
+ values: "0.4;1;0.4",
898
+ dur: `${1.5 + i % 4 * 0.4}s`,
899
+ repeatCount: "indefinite",
900
+ begin: `${duration}s`
901
+ }
902
+ ),
903
+ /* @__PURE__ */ jsx(
904
+ "animate",
905
+ {
906
+ attributeName: "r",
907
+ values: `${s.r};${s.r * 1.4};${s.r}`,
908
+ dur: `${2 + i % 3 * 0.5}s`,
909
+ repeatCount: "indefinite",
910
+ begin: `${duration}s`
911
+ }
912
+ )
913
+ ] })
914
+ },
915
+ `st${i}`
916
+ )),
917
+ animate && /* @__PURE__ */ jsx(
918
+ "animateTransform",
919
+ {
920
+ attributeName: "transform",
921
+ type: "rotate",
922
+ from: "0 50 50",
923
+ to: "360 50 50",
924
+ dur: "120s",
925
+ repeatCount: "indefinite"
926
+ }
927
+ )
314
928
  ]
315
- : []),
316
- ];
317
- const lineLen = 80;
318
- 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" }))] })] }));
319
- }), { displayName: 'NtdIconCosmic' });
320
- // ══════════════════════════════════════════════════════
321
- // 7. NtdIconSteampunk ⚙️
322
- // Rotating gears, copper pipes, brass rivets & steam puffs
323
- // ══════════════════════════════════════════════════════
929
+ }
930
+ )
931
+ ] });
932
+ }
933
+ ),
934
+ { displayName: "NtdIconCosmic" }
935
+ );
324
936
  const NtdIconSteampunk = /* @__PURE__ */ Object.assign(
325
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 3, intensity = 'normal', brassColor = '#b45309', pipeColor = '#78350f', steamColor = '#d1d5db', className, style, }, ref) => {
326
- // Build toothed gear path from a center point, radius and tooth count
327
- const makeGear = (cx, cy, r, teeth) => {
937
+ /* @__PURE__ */ forwardRef(
938
+ ({
939
+ children,
940
+ animate = true,
941
+ duration = 3,
942
+ intensity = "normal",
943
+ brassColor = "#b45309",
944
+ pipeColor = "#78350f",
945
+ steamColor = "#d1d5db",
946
+ className,
947
+ style
948
+ }, ref) => {
949
+ const makeGear = (cx, cy, r, teeth) => {
328
950
  const inner = r * 0.68;
329
- const step = (Math.PI * 2) / teeth;
951
+ const step = Math.PI * 2 / teeth;
330
952
  const pt = (radius, angle) => `${(cx + radius * Math.cos(angle)).toFixed(2)},${(cy + radius * Math.sin(angle)).toFixed(2)}`;
331
- let d = '';
953
+ let d = "";
332
954
  for (let i = 0; i < teeth; i++) {
333
- const a0 = i * step;
334
- d +=
335
- `${i === 0 ? 'M' : 'L'}${pt(inner, a0)} ` +
336
- `L${pt(r, a0 + step * 0.3)} L${pt(r, a0 + step * 0.7)} ` +
337
- `L${pt(inner, a0 + step)} `;
955
+ const a0 = i * step;
956
+ 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)} `;
338
957
  }
339
- return d + 'Z';
340
- };
341
- const gears = [
958
+ return d + "Z";
959
+ };
960
+ const gears = [
342
961
  { cx: 15, cy: 15, r: 11, teeth: 8, dir: 1, dm: 1 },
343
962
  { cx: 85, cy: 85, r: 9, teeth: 7, dir: -1, dm: 0.8 },
344
- ...(intensity !== 'subtle'
345
- ? [
346
- { cx: 85, cy: 15, r: 7, teeth: 6, dir: 1, dm: 1.1 },
347
- { cx: 15, cy: 85, r: 6, teeth: 5, dir: -1, dm: 0.9 },
348
- ]
349
- : []),
350
- ...(intensity === 'dense' ? [{ cx: 50, cy: 3, r: 5, teeth: 5, dir: 1, dm: 1.3 }] : []),
351
- ];
352
- const pipes = [
353
- { d: 'M27,15 H48', w: 3.5 },
354
- { d: 'M85,28 V48', w: 3.5 },
355
- ...(intensity !== 'subtle'
356
- ? [
357
- { d: 'M52,85 H73', w: 3.5 },
358
- { d: 'M15,52 V73', w: 3.5 },
359
- ]
360
- : []),
361
- ];
362
- const rivets = intensity === 'subtle'
363
- ? [
364
- { cx: 50, cy: 2 },
365
- { cx: 50, cy: 98 },
366
- ]
367
- : intensity === 'dense'
368
- ? [
369
- { cx: 50, cy: 2 },
370
- { cx: 50, cy: 98 },
371
- { cx: 2, cy: 50 },
372
- { cx: 98, cy: 50 },
373
- { cx: 25, cy: 2 },
374
- { cx: 75, cy: 2 },
375
- { cx: 25, cy: 98 },
376
- { cx: 75, cy: 98 },
377
- ]
378
- : [
379
- { cx: 50, cy: 2 },
380
- { cx: 50, cy: 98 },
381
- { cx: 2, cy: 50 },
382
- { cx: 98, cy: 50 },
383
- ];
384
- const steamPuffs = [
963
+ ...intensity !== "subtle" ? [
964
+ { cx: 85, cy: 15, r: 7, teeth: 6, dir: 1, dm: 1.1 },
965
+ { cx: 15, cy: 85, r: 6, teeth: 5, dir: -1, dm: 0.9 }
966
+ ] : [],
967
+ ...intensity === "dense" ? [{ cx: 50, cy: 3, r: 5, teeth: 5, dir: 1, dm: 1.3 }] : []
968
+ ];
969
+ const pipes = [
970
+ { d: "M27,15 H48", w: 3.5 },
971
+ { d: "M85,28 V48", w: 3.5 },
972
+ ...intensity !== "subtle" ? [
973
+ { d: "M52,85 H73", w: 3.5 },
974
+ { d: "M15,52 V73", w: 3.5 }
975
+ ] : []
976
+ ];
977
+ const rivets = intensity === "subtle" ? [
978
+ { cx: 50, cy: 2 },
979
+ { cx: 50, cy: 98 }
980
+ ] : intensity === "dense" ? [
981
+ { cx: 50, cy: 2 },
982
+ { cx: 50, cy: 98 },
983
+ { cx: 2, cy: 50 },
984
+ { cx: 98, cy: 50 },
985
+ { cx: 25, cy: 2 },
986
+ { cx: 75, cy: 2 },
987
+ { cx: 25, cy: 98 },
988
+ { cx: 75, cy: 98 }
989
+ ] : [
990
+ { cx: 50, cy: 2 },
991
+ { cx: 50, cy: 98 },
992
+ { cx: 2, cy: 50 },
993
+ { cx: 98, cy: 50 }
994
+ ];
995
+ const steamPuffs = [
385
996
  { cx: 50, cy: 3, r: 3 },
386
997
  { cx: 55, cy: -4, r: 2.2 },
387
- { cx: 47, cy: -10, r: 1.6 },
388
- ];
389
- 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 &&
390
- 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}`)))] })] }));
391
- }), { displayName: 'NtdIconSteampunk' });
392
- // ══════════════════════════════════════════════════════
393
- // 8. NtdIconFrost ❄️
394
- // Hexagonal snowflake crystals, sparkles & frozen glow
395
- // ══════════════════════════════════════════════════════
998
+ { cx: 47, cy: -10, r: 1.6 }
999
+ ];
1000
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1001
+ /* @__PURE__ */ jsxs(
1002
+ "svg",
1003
+ {
1004
+ viewBox: "0 0 100 100",
1005
+ style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 0 },
1006
+ "aria-hidden": true,
1007
+ children: [
1008
+ pipes.map((p, i) => /* @__PURE__ */ jsx(
1009
+ "path",
1010
+ {
1011
+ d: p.d,
1012
+ stroke: pipeColor,
1013
+ strokeWidth: p.w,
1014
+ fill: "none",
1015
+ strokeLinecap: "round",
1016
+ opacity: 0.55
1017
+ },
1018
+ `pipe${i}`
1019
+ )),
1020
+ rivets.map((rv, i) => /* @__PURE__ */ jsx(
1021
+ "circle",
1022
+ {
1023
+ cx: rv.cx,
1024
+ cy: rv.cy,
1025
+ r: 1.5,
1026
+ fill: brassColor,
1027
+ opacity: 0.7
1028
+ },
1029
+ `rv${i}`
1030
+ ))
1031
+ ]
1032
+ }
1033
+ ),
1034
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children }),
1035
+ /* @__PURE__ */ jsxs(
1036
+ "svg",
1037
+ {
1038
+ viewBox: "0 0 100 100",
1039
+ style: { ...overlayBase, inset: "-20%", width: "140%", height: "140%", zIndex: 2 },
1040
+ "aria-hidden": true,
1041
+ children: [
1042
+ gears.map((g, i) => /* @__PURE__ */ jsxs("g", { children: [
1043
+ /* @__PURE__ */ jsx("path", { d: makeGear(g.cx, g.cy, g.r, g.teeth), fill: brassColor, opacity: 0.78, children: animate && /* @__PURE__ */ jsx(
1044
+ "animateTransform",
1045
+ {
1046
+ attributeName: "transform",
1047
+ type: "rotate",
1048
+ from: `0 ${g.cx} ${g.cy}`,
1049
+ to: `${g.dir * 360} ${g.cx} ${g.cy}`,
1050
+ dur: `${duration * g.dm}s`,
1051
+ repeatCount: "indefinite"
1052
+ }
1053
+ ) }),
1054
+ /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.3, fill: pipeColor, opacity: 0.85 }),
1055
+ /* @__PURE__ */ jsx("circle", { cx: g.cx, cy: g.cy, r: g.r * 0.12, fill: brassColor, opacity: 0.6 })
1056
+ ] }, `gear${i}`)),
1057
+ animate && steamPuffs.map((sp, i) => /* @__PURE__ */ jsxs(
1058
+ "circle",
1059
+ {
1060
+ cx: sp.cx,
1061
+ cy: sp.cy,
1062
+ r: sp.r,
1063
+ fill: steamColor,
1064
+ opacity: 0,
1065
+ children: [
1066
+ /* @__PURE__ */ jsx(
1067
+ "animate",
1068
+ {
1069
+ attributeName: "opacity",
1070
+ values: "0;0.45;0",
1071
+ dur: "2.4s",
1072
+ begin: `${i * 0.7}s`,
1073
+ repeatCount: "indefinite"
1074
+ }
1075
+ ),
1076
+ /* @__PURE__ */ jsx(
1077
+ "animate",
1078
+ {
1079
+ attributeName: "cy",
1080
+ values: `${sp.cy};${sp.cy - 12}`,
1081
+ dur: "2.4s",
1082
+ begin: `${i * 0.7}s`,
1083
+ repeatCount: "indefinite"
1084
+ }
1085
+ ),
1086
+ /* @__PURE__ */ jsx(
1087
+ "animate",
1088
+ {
1089
+ attributeName: "r",
1090
+ values: `${sp.r};${sp.r * 2.2}`,
1091
+ dur: "2.4s",
1092
+ begin: `${i * 0.7}s`,
1093
+ repeatCount: "indefinite"
1094
+ }
1095
+ )
1096
+ ]
1097
+ },
1098
+ `stm${i}`
1099
+ ))
1100
+ ]
1101
+ }
1102
+ )
1103
+ ] });
1104
+ }
1105
+ ),
1106
+ { displayName: "NtdIconSteampunk" }
1107
+ );
396
1108
  const NtdIconFrost = /* @__PURE__ */ Object.assign(
397
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 2, intensity = 'normal', crystalColor = '#bae6fd', glowColor = '#38bdf8', className, style, }, ref) => {
398
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
399
- const glowFilterId = `ntd_frost_${uid}`;
400
- const crystalDefs = [
1109
+ /* @__PURE__ */ forwardRef(
1110
+ ({
1111
+ children,
1112
+ animate = true,
1113
+ duration = 2,
1114
+ intensity = "normal",
1115
+ crystalColor = "#bae6fd",
1116
+ glowColor = "#38bdf8",
1117
+ className,
1118
+ style
1119
+ }, ref) => {
1120
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
1121
+ const glowFilterId = `ntd_frost_${uid}`;
1122
+ const crystalDefs = [
401
1123
  { cx: 8, cy: 8, len: 7, pi: 0 },
402
1124
  { cx: 92, cy: 8, len: 6, pi: 1 },
403
1125
  { cx: 8, cy: 92, len: 6, pi: 2 },
404
1126
  { cx: 92, cy: 92, len: 7, pi: 3 },
405
- ...(intensity !== 'subtle'
406
- ? [
407
- { cx: 50, cy: 2, len: 5, pi: 4 },
408
- { cx: 50, cy: 98, len: 5, pi: 5 },
409
- { cx: 2, cy: 50, len: 5, pi: 6 },
410
- { cx: 98, cy: 50, len: 5, pi: 7 },
411
- ]
412
- : []),
413
- ...(intensity === 'dense'
414
- ? [
415
- { cx: 28, cy: 4, len: 4, pi: 8 },
416
- { cx: 72, cy: 4, len: 4, pi: 9 },
417
- ]
418
- : []),
419
- ];
420
- // Each snowflake = 6 arms radiating from center
421
- const allArms = crystalDefs.flatMap(({ cx, cy, len, pi }) => Array.from({ length: 6 }, (_, ai) => {
422
- const angle = (ai * 60 * Math.PI) / 180;
423
- return {
1127
+ ...intensity !== "subtle" ? [
1128
+ { cx: 50, cy: 2, len: 5, pi: 4 },
1129
+ { cx: 50, cy: 98, len: 5, pi: 5 },
1130
+ { cx: 2, cy: 50, len: 5, pi: 6 },
1131
+ { cx: 98, cy: 50, len: 5, pi: 7 }
1132
+ ] : [],
1133
+ ...intensity === "dense" ? [
1134
+ { cx: 28, cy: 4, len: 4, pi: 8 },
1135
+ { cx: 72, cy: 4, len: 4, pi: 9 }
1136
+ ] : []
1137
+ ];
1138
+ const allArms = crystalDefs.flatMap(
1139
+ ({ cx, cy, len, pi }) => Array.from({ length: 6 }, (_, ai) => {
1140
+ const angle = ai * 60 * Math.PI / 180;
1141
+ return {
424
1142
  x1: cx,
425
1143
  y1: cy,
426
1144
  x2: cx + len * Math.cos(angle),
427
1145
  y2: cy + len * Math.sin(angle),
428
- delay: pi * 0.12 + ai * 0.02,
429
- };
430
- }));
431
- // Small perpendicular tick marks at midpoint of each arm
432
- const allTicks = crystalDefs.flatMap(({ cx, cy, len }, ci) => Array.from({ length: 6 }, (_, ai) => {
433
- const angle = (ai * 60 * Math.PI) / 180;
434
- const mx = cx + len * 0.55 * Math.cos(angle);
435
- const my = cy + len * 0.55 * Math.sin(angle);
436
- const p = angle + Math.PI / 2;
437
- const tl = len * 0.22;
438
- return {
1146
+ delay: pi * 0.12 + ai * 0.02
1147
+ };
1148
+ })
1149
+ );
1150
+ const allTicks = crystalDefs.flatMap(
1151
+ ({ cx, cy, len }, ci) => Array.from({ length: 6 }, (_, ai) => {
1152
+ const angle = ai * 60 * Math.PI / 180;
1153
+ const mx = cx + len * 0.55 * Math.cos(angle);
1154
+ const my = cy + len * 0.55 * Math.sin(angle);
1155
+ const p = angle + Math.PI / 2;
1156
+ const tl = len * 0.22;
1157
+ return {
439
1158
  x1: mx - tl * Math.cos(p),
440
1159
  y1: my - tl * Math.sin(p),
441
1160
  x2: mx + tl * Math.cos(p),
442
1161
  y2: my + tl * Math.sin(p),
443
- delay: ci * 0.12 + duration * 0.5,
444
- };
445
- }));
446
- const sparkles = [
1162
+ delay: ci * 0.12 + duration * 0.5
1163
+ };
1164
+ })
1165
+ );
1166
+ const sparkles = [
447
1167
  { cx: 14, cy: 4, r: 1.1 },
448
1168
  { cx: 86, cy: 4, r: 0.9 },
449
1169
  { cx: 4, cy: 14, r: 0.8 },
450
- { cx: 96, cy: 14, r: 1.0 },
1170
+ { cx: 96, cy: 14, r: 1 },
451
1171
  { cx: 4, cy: 86, r: 0.9 },
452
1172
  { cx: 96, cy: 86, r: 0.8 },
453
- { cx: 14, cy: 96, r: 1.0 },
454
- { cx: 86, cy: 96, r: 1.1 },
455
- ];
456
- 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 })] }));
457
- }), { displayName: 'NtdIconFrost' });
458
- // ══════════════════════════════════════════════════════
459
- // 9. NtdIconPixel 👾
460
- // Retro pixel corners, scanline scroll & glitch animation
461
- // ══════════════════════════════════════════════════════
1173
+ { cx: 14, cy: 96, r: 1 },
1174
+ { cx: 86, cy: 96, r: 1.1 }
1175
+ ];
1176
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1177
+ /* @__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" }) }) }) }),
1178
+ /* @__PURE__ */ jsxs(
1179
+ "svg",
1180
+ {
1181
+ viewBox: "0 0 100 100",
1182
+ style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
1183
+ "aria-hidden": true,
1184
+ children: [
1185
+ /* @__PURE__ */ jsx(
1186
+ "circle",
1187
+ {
1188
+ cx: "50",
1189
+ cy: "50",
1190
+ r: "30",
1191
+ fill: glowColor,
1192
+ opacity: 0.07,
1193
+ filter: `url(#${glowFilterId})`,
1194
+ children: animate && /* @__PURE__ */ jsx(
1195
+ "animate",
1196
+ {
1197
+ attributeName: "opacity",
1198
+ values: "0.04;0.11;0.04",
1199
+ dur: "4s",
1200
+ repeatCount: "indefinite"
1201
+ }
1202
+ )
1203
+ }
1204
+ ),
1205
+ allArms.map((arm, i) => /* @__PURE__ */ jsx(
1206
+ "line",
1207
+ {
1208
+ x1: arm.x1,
1209
+ y1: arm.y1,
1210
+ x2: arm.x2,
1211
+ y2: arm.y2,
1212
+ stroke: crystalColor,
1213
+ strokeWidth: "0.9",
1214
+ strokeLinecap: "round",
1215
+ opacity: animate ? 0 : 0.7,
1216
+ children: animate && /* @__PURE__ */ jsx(
1217
+ "animate",
1218
+ {
1219
+ attributeName: "opacity",
1220
+ from: "0",
1221
+ to: "0.7",
1222
+ dur: `${duration * 0.4}s`,
1223
+ begin: `${arm.delay.toFixed(2)}s`,
1224
+ fill: "freeze"
1225
+ }
1226
+ )
1227
+ },
1228
+ `arm${i}`
1229
+ )),
1230
+ allTicks.map((tick, i) => /* @__PURE__ */ jsx(
1231
+ "line",
1232
+ {
1233
+ x1: tick.x1,
1234
+ y1: tick.y1,
1235
+ x2: tick.x2,
1236
+ y2: tick.y2,
1237
+ stroke: crystalColor,
1238
+ strokeWidth: "0.6",
1239
+ strokeLinecap: "round",
1240
+ opacity: animate ? 0 : 0.45,
1241
+ children: animate && /* @__PURE__ */ jsx(
1242
+ "animate",
1243
+ {
1244
+ attributeName: "opacity",
1245
+ from: "0",
1246
+ to: "0.45",
1247
+ dur: `${duration * 0.3}s`,
1248
+ begin: `${tick.delay.toFixed(2)}s`,
1249
+ fill: "freeze"
1250
+ }
1251
+ )
1252
+ },
1253
+ `tick${i}`
1254
+ )),
1255
+ sparkles.slice(0, intensity === "subtle" ? 4 : 8).map((sp, i) => /* @__PURE__ */ jsx(
1256
+ "circle",
1257
+ {
1258
+ cx: sp.cx,
1259
+ cy: sp.cy,
1260
+ r: sp.r,
1261
+ fill: glowColor,
1262
+ opacity: animate ? 0 : 0.8,
1263
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1264
+ /* @__PURE__ */ jsx(
1265
+ "animate",
1266
+ {
1267
+ attributeName: "opacity",
1268
+ from: "0",
1269
+ to: "0.8",
1270
+ dur: "0.35s",
1271
+ begin: `${(duration * 0.65 + i * 0.08).toFixed(2)}s`,
1272
+ fill: "freeze"
1273
+ }
1274
+ ),
1275
+ /* @__PURE__ */ jsx(
1276
+ "animate",
1277
+ {
1278
+ attributeName: "opacity",
1279
+ values: "0.3;1;0.3",
1280
+ dur: `${1 + i * 0.2}s`,
1281
+ repeatCount: "indefinite",
1282
+ begin: `${duration}s`
1283
+ }
1284
+ )
1285
+ ] })
1286
+ },
1287
+ `fsp${i}`
1288
+ ))
1289
+ ]
1290
+ }
1291
+ ),
1292
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1293
+ ] });
1294
+ }
1295
+ ),
1296
+ { displayName: "NtdIconFrost" }
1297
+ );
462
1298
  const NtdIconPixel = /* @__PURE__ */ Object.assign(
463
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 0.5, intensity = 'normal', pixelColor = '#22d3ee', scanlineColor = '#000000', glitchEffect = true, className, style, }, ref) => {
464
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
465
- const scanAnimName = `ntd_pixel_scan_${uid}`;
466
- const glitchAnimName = `ntd_pixel_glitch_${uid}`;
467
- const SZ = 4; // pixel block size (SVG units out of 100)
468
- const basePixels = [
1299
+ /* @__PURE__ */ forwardRef(
1300
+ ({
1301
+ children,
1302
+ animate = true,
1303
+ duration = 0.5,
1304
+ intensity = "normal",
1305
+ pixelColor = "#22d3ee",
1306
+ scanlineColor = "#000000",
1307
+ glitchEffect = true,
1308
+ className,
1309
+ style
1310
+ }, ref) => {
1311
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
1312
+ const scanAnimName = `ntd_pixel_scan_${uid}`;
1313
+ const glitchAnimName = `ntd_pixel_glitch_${uid}`;
1314
+ const SZ = 4;
1315
+ const basePixels = [
469
1316
  // top-left bracket
470
1317
  { x: 0, y: 0 },
471
1318
  { x: SZ, y: 0 },
@@ -489,146 +1336,416 @@ const NtdIconPixel = /* @__PURE__ */ Object.assign(
489
1336
  { x: 100 - SZ * 2, y: 100 - SZ },
490
1337
  { x: 100 - SZ, y: 100 - SZ },
491
1338
  { x: 100 - SZ, y: 100 - SZ * 2 },
492
- { x: 100 - SZ, y: 100 - SZ * 3 },
493
- ];
494
- const extraPixels = intensity === 'dense'
495
- ? [
496
- { x: 48, y: 0 },
497
- { x: 0, y: 48 },
498
- { x: 96, y: 48 },
499
- { x: 48, y: 96 },
500
- ]
501
- : [];
502
- const allPixels = intensity === 'subtle'
503
- ? basePixels.filter((_, i) => i % 2 === 0)
504
- : [...basePixels, ...extraPixels];
505
- return (jsxs("span", { ref: ref, className: className, style: { ...wrapperBase, ...style }, children: [animate && (jsx("style", { children: `
506
- @keyframes ${scanAnimName} {
507
- from { transform: translateY(-100%); }
508
- to { transform: translateY(200%); }
509
- }
510
- @keyframes ${glitchAnimName} {
511
- 0%, 90%, 100% { transform: translate(0); filter: none; }
512
- 92% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
513
- 94% { transform: translate(3px, -1px); clip-path: inset(25% 0 25% 0); }
514
- 96% { transform: translate(-1px, 2px); clip-path: none; }
515
- }
516
- ` })), 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: {
517
- display: 'inline-flex',
518
- position: 'relative',
519
- zIndex: 1,
520
- ...(animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}),
521
- }, children: children }), animate && (jsx("span", { style: {
522
- position: 'absolute',
523
- inset: 0,
524
- overflow: 'hidden',
525
- pointerEvents: 'none',
526
- zIndex: 3,
527
- background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`,
528
- }, children: jsx("span", { style: {
529
- display: 'block',
530
- width: '100%',
531
- height: '30%',
532
- background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
533
- animation: `${scanAnimName} ${duration + 2}s linear infinite`,
534
- } }) }))] }));
535
- }), { displayName: 'NtdIconPixel' });
536
- // ══════════════════════════════════════════════════════
537
- // 10. NtdIconOrganic 🦠
538
- // Pulsing cell blobs, membrane rings & floating bubbles
539
- // ══════════════════════════════════════════════════════
1339
+ { x: 100 - SZ, y: 100 - SZ * 3 }
1340
+ ];
1341
+ const extraPixels = intensity === "dense" ? [
1342
+ { x: 48, y: 0 },
1343
+ { x: 0, y: 48 },
1344
+ { x: 96, y: 48 },
1345
+ { x: 48, y: 96 }
1346
+ ] : [];
1347
+ const allPixels = intensity === "subtle" ? basePixels.filter((_, i) => i % 2 === 0) : [...basePixels, ...extraPixels];
1348
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1349
+ animate && /* @__PURE__ */ jsx("style", { children: `
1350
+ @keyframes ${scanAnimName} {
1351
+ from { transform: translateY(-100%); }
1352
+ to { transform: translateY(200%); }
1353
+ }
1354
+ @keyframes ${glitchAnimName} {
1355
+ 0%, 90%, 100% { transform: translate(0); filter: none; }
1356
+ 92% { transform: translate(-3px, 1px); filter: hue-rotate(90deg); }
1357
+ 94% { transform: translate(3px, -1px); clip-path: inset(25% 0 25% 0); }
1358
+ 96% { transform: translate(-1px, 2px); clip-path: none; }
1359
+ }
1360
+ ` }),
1361
+ /* @__PURE__ */ jsx(
1362
+ "svg",
1363
+ {
1364
+ viewBox: "0 0 100 100",
1365
+ style: { ...overlayBase, inset: "-5%", width: "110%", height: "110%", zIndex: 2 },
1366
+ "aria-hidden": true,
1367
+ children: allPixels.map((p, i) => /* @__PURE__ */ jsx(
1368
+ "rect",
1369
+ {
1370
+ x: p.x,
1371
+ y: p.y,
1372
+ width: SZ - 0.5,
1373
+ height: SZ - 0.5,
1374
+ fill: pixelColor,
1375
+ opacity: 0.75,
1376
+ children: animate && /* @__PURE__ */ jsx(
1377
+ "animate",
1378
+ {
1379
+ attributeName: "opacity",
1380
+ values: "0.3;1;0.3",
1381
+ dur: `${0.7 + i % 5 * 0.17}s`,
1382
+ repeatCount: "indefinite",
1383
+ begin: `${(i * 0.06 % 1).toFixed(2)}s`
1384
+ }
1385
+ )
1386
+ },
1387
+ `px${i}`
1388
+ ))
1389
+ }
1390
+ ),
1391
+ /* @__PURE__ */ jsx(
1392
+ "span",
1393
+ {
1394
+ style: {
1395
+ display: "inline-flex",
1396
+ position: "relative",
1397
+ zIndex: 1,
1398
+ ...animate && glitchEffect ? { animation: `${glitchAnimName} 4s infinite` } : {}
1399
+ },
1400
+ children
1401
+ }
1402
+ ),
1403
+ animate && /* @__PURE__ */ jsx(
1404
+ "span",
1405
+ {
1406
+ style: {
1407
+ position: "absolute",
1408
+ inset: 0,
1409
+ overflow: "hidden",
1410
+ pointerEvents: "none",
1411
+ zIndex: 3,
1412
+ background: `repeating-linear-gradient(0deg, transparent, transparent 3px, ${scanlineColor}1a 3px, ${scanlineColor}1a 4px)`
1413
+ },
1414
+ children: /* @__PURE__ */ jsx(
1415
+ "span",
1416
+ {
1417
+ style: {
1418
+ display: "block",
1419
+ width: "100%",
1420
+ height: "30%",
1421
+ background: `linear-gradient(transparent, ${pixelColor}20, transparent)`,
1422
+ animation: `${scanAnimName} ${duration + 2}s linear infinite`
1423
+ }
1424
+ }
1425
+ )
1426
+ }
1427
+ )
1428
+ ] });
1429
+ }
1430
+ ),
1431
+ { displayName: "NtdIconPixel" }
1432
+ );
540
1433
  const NtdIconOrganic = /* @__PURE__ */ Object.assign(
541
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 3, intensity = 'normal', cellColor = '#86efac', membraneColor = '#4ade80', nucleusColor = '#fbbf24', className, style, }, ref) => {
542
- const uid = useId().replace(/[^a-zA-Z0-9]/g, '_');
543
- const blobFilterId = `ntd_org_${uid}`;
544
- const cells = [
545
- { cx: 8, cy: 8, r: 9, color: cellColor, op: 0.18, pd: '4.2s' },
546
- { cx: 92, cy: 8, r: 8, color: membraneColor, op: 0.15, pd: '3.8s' },
547
- { cx: 8, cy: 92, r: 8, color: membraneColor, op: 0.16, pd: '4.5s' },
548
- { cx: 92, cy: 92, r: 9, color: cellColor, op: 0.18, pd: '3.5s' },
549
- ...(intensity !== 'subtle'
550
- ? [
551
- { cx: 50, cy: 2, r: 6, color: cellColor, op: 0.12, pd: '5.1s' },
552
- { cx: 50, cy: 98, r: 6, color: membraneColor, op: 0.12, pd: '4.8s' },
553
- { cx: 2, cy: 50, r: 6, color: cellColor, op: 0.12, pd: '4.3s' },
554
- { cx: 98, cy: 50, r: 6, color: membraneColor, op: 0.12, pd: '5.2s' },
555
- ]
556
- : []),
557
- ...(intensity === 'dense'
558
- ? [
559
- { cx: 25, cy: 5, r: 5, color: nucleusColor, op: 0.09, pd: '3.9s' },
560
- { cx: 75, cy: 5, r: 5, color: cellColor, op: 0.09, pd: '4.4s' },
561
- { cx: 5, cy: 25, r: 5, color: membraneColor, op: 0.09, pd: '4.6s' },
562
- { cx: 5, cy: 75, r: 5, color: cellColor, op: 0.09, pd: '3.7s' },
563
- ]
564
- : []),
565
- ];
566
- const bubbles = [
1434
+ /* @__PURE__ */ forwardRef(
1435
+ ({
1436
+ children,
1437
+ animate = true,
1438
+ duration = 3,
1439
+ intensity = "normal",
1440
+ cellColor = "#86efac",
1441
+ membraneColor = "#4ade80",
1442
+ nucleusColor = "#fbbf24",
1443
+ className,
1444
+ style
1445
+ }, ref) => {
1446
+ const uid = useId().replace(/[^a-zA-Z0-9]/g, "_");
1447
+ const blobFilterId = `ntd_org_${uid}`;
1448
+ const cells = [
1449
+ { cx: 8, cy: 8, r: 9, color: cellColor, op: 0.18, pd: "4.2s" },
1450
+ { cx: 92, cy: 8, r: 8, color: membraneColor, op: 0.15, pd: "3.8s" },
1451
+ { cx: 8, cy: 92, r: 8, color: membraneColor, op: 0.16, pd: "4.5s" },
1452
+ { cx: 92, cy: 92, r: 9, color: cellColor, op: 0.18, pd: "3.5s" },
1453
+ ...intensity !== "subtle" ? [
1454
+ { cx: 50, cy: 2, r: 6, color: cellColor, op: 0.12, pd: "5.1s" },
1455
+ { cx: 50, cy: 98, r: 6, color: membraneColor, op: 0.12, pd: "4.8s" },
1456
+ { cx: 2, cy: 50, r: 6, color: cellColor, op: 0.12, pd: "4.3s" },
1457
+ { cx: 98, cy: 50, r: 6, color: membraneColor, op: 0.12, pd: "5.2s" }
1458
+ ] : [],
1459
+ ...intensity === "dense" ? [
1460
+ { cx: 25, cy: 5, r: 5, color: nucleusColor, op: 0.09, pd: "3.9s" },
1461
+ { cx: 75, cy: 5, r: 5, color: cellColor, op: 0.09, pd: "4.4s" },
1462
+ { cx: 5, cy: 25, r: 5, color: membraneColor, op: 0.09, pd: "4.6s" },
1463
+ { cx: 5, cy: 75, r: 5, color: cellColor, op: 0.09, pd: "3.7s" }
1464
+ ] : []
1465
+ ];
1466
+ const bubbles = [
567
1467
  { cx: 15, cy: 18, r: 2 },
568
1468
  { cx: 85, cy: 18, r: 1.8 },
569
1469
  { cx: 12, cy: 78, r: 1.5 },
570
1470
  { cx: 88, cy: 82, r: 2 },
571
1471
  { cx: 40, cy: 5, r: 1.5 },
572
- { cx: 60, cy: 95, r: 1.5 },
573
- ];
574
- const bubbleCount = intensity === 'subtle' ? 2 : intensity === 'dense' ? 6 : 4;
575
- 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' &&
576
- [
577
- { cx: 8, cy: 8, r: 10 },
578
- { cx: 92, cy: 92, r: 10 },
579
- ].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 })] }));
580
- }), { displayName: 'NtdIconOrganic' });
581
- // ══════════════════════════════════════════════════════
582
- // 11. NtdIconGeometric 🔷
583
- // Sacred geometry: concentric rings, Star of David
584
- // triangles & slowly rotating corner diamonds
585
- // ══════════════════════════════════════════════════════
1472
+ { cx: 60, cy: 95, r: 1.5 }
1473
+ ];
1474
+ const bubbleCount = intensity === "subtle" ? 2 : intensity === "dense" ? 6 : 4;
1475
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1476
+ /* @__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" }) }) }) }),
1477
+ /* @__PURE__ */ jsxs(
1478
+ "svg",
1479
+ {
1480
+ viewBox: "0 0 100 100",
1481
+ style: { ...overlayBase, inset: "-25%", width: "150%", height: "150%", zIndex: 0 },
1482
+ "aria-hidden": true,
1483
+ children: [
1484
+ cells.map((c, i) => /* @__PURE__ */ jsx(
1485
+ "circle",
1486
+ {
1487
+ cx: c.cx,
1488
+ cy: c.cy,
1489
+ r: c.r,
1490
+ fill: c.color,
1491
+ opacity: animate ? 0 : c.op,
1492
+ filter: `url(#${blobFilterId})`,
1493
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1494
+ /* @__PURE__ */ jsx(
1495
+ "animate",
1496
+ {
1497
+ attributeName: "opacity",
1498
+ from: "0",
1499
+ to: `${c.op}`,
1500
+ dur: `${duration * 0.55}s`,
1501
+ begin: `${(i * 0.2).toFixed(2)}s`,
1502
+ fill: "freeze"
1503
+ }
1504
+ ),
1505
+ /* @__PURE__ */ jsx(
1506
+ "animate",
1507
+ {
1508
+ attributeName: "r",
1509
+ values: `${c.r};${c.r * 1.3};${c.r}`,
1510
+ dur: c.pd,
1511
+ repeatCount: "indefinite",
1512
+ begin: `${duration}s`
1513
+ }
1514
+ ),
1515
+ /* @__PURE__ */ jsx(
1516
+ "animate",
1517
+ {
1518
+ attributeName: "opacity",
1519
+ values: `${c.op};${c.op * 1.7};${c.op}`,
1520
+ dur: c.pd,
1521
+ repeatCount: "indefinite",
1522
+ begin: `${duration}s`
1523
+ }
1524
+ )
1525
+ ] })
1526
+ },
1527
+ `oc${i}`
1528
+ )),
1529
+ intensity !== "subtle" && [
1530
+ { cx: 8, cy: 8, r: 10 },
1531
+ { cx: 92, cy: 92, r: 10 }
1532
+ ].map((ring, i) => /* @__PURE__ */ jsx(
1533
+ "circle",
1534
+ {
1535
+ cx: ring.cx,
1536
+ cy: ring.cy,
1537
+ r: ring.r,
1538
+ fill: "none",
1539
+ stroke: membraneColor,
1540
+ strokeWidth: "0.7",
1541
+ opacity: animate ? 0 : 0.35,
1542
+ children: animate && /* @__PURE__ */ jsx(
1543
+ "animate",
1544
+ {
1545
+ attributeName: "opacity",
1546
+ from: "0",
1547
+ to: "0.35",
1548
+ dur: `${duration * 0.7}s`,
1549
+ fill: "freeze"
1550
+ }
1551
+ )
1552
+ },
1553
+ `ring${i}`
1554
+ )),
1555
+ bubbles.slice(0, bubbleCount).map((b, i) => /* @__PURE__ */ jsx(
1556
+ "circle",
1557
+ {
1558
+ cx: b.cx,
1559
+ cy: b.cy,
1560
+ r: b.r,
1561
+ fill: nucleusColor,
1562
+ opacity: animate ? 0 : 0.28,
1563
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1564
+ /* @__PURE__ */ jsx(
1565
+ "animate",
1566
+ {
1567
+ attributeName: "opacity",
1568
+ from: "0",
1569
+ to: "0.28",
1570
+ dur: "0.5s",
1571
+ begin: `${(duration * 0.65 + i * 0.18).toFixed(2)}s`,
1572
+ fill: "freeze"
1573
+ }
1574
+ ),
1575
+ /* @__PURE__ */ jsx(
1576
+ "animate",
1577
+ {
1578
+ attributeName: "cy",
1579
+ values: `${b.cy};${b.cy - 5};${b.cy}`,
1580
+ dur: `${2.2 + i * 0.45}s`,
1581
+ repeatCount: "indefinite",
1582
+ begin: `${duration}s`
1583
+ }
1584
+ )
1585
+ ] })
1586
+ },
1587
+ `ob${i}`
1588
+ ))
1589
+ ]
1590
+ }
1591
+ ),
1592
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1593
+ ] });
1594
+ }
1595
+ ),
1596
+ { displayName: "NtdIconOrganic" }
1597
+ );
586
1598
  const NtdIconGeometric = /* @__PURE__ */ Object.assign(
587
- /* @__PURE__ */ forwardRef(({ children, animate = true, duration = 8, intensity = 'normal', primaryColor = '#6366f1', secondaryColor = '#8b5cf6', accentColor = '#a78bfa', className, style, }, ref) => {
588
- const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
589
- const a = ((i * 120 - 90 + rotDeg) * Math.PI) / 180;
1599
+ /* @__PURE__ */ forwardRef(
1600
+ ({
1601
+ children,
1602
+ animate = true,
1603
+ duration = 8,
1604
+ intensity = "normal",
1605
+ primaryColor = "#6366f1",
1606
+ secondaryColor = "#8b5cf6",
1607
+ accentColor = "#a78bfa",
1608
+ className,
1609
+ style
1610
+ }, ref) => {
1611
+ const makeTriangle = (cx, cy, r, rotDeg) => Array.from({ length: 3 }, (_, i) => {
1612
+ const a = (i * 120 - 90 + rotDeg) * Math.PI / 180;
590
1613
  return `${(cx + r * Math.cos(a)).toFixed(2)},${(cy + r * Math.sin(a)).toFixed(2)}`;
591
- }).join(' ');
592
- const rings = [
593
- { r: 45, dash: '4 6', color: primaryColor, dir: 1, dur: duration, op: 0.22 },
594
- { r: 38, dash: '2 4', color: secondaryColor, dir: -1, dur: duration * 0.75, op: 0.18 },
595
- ...(intensity !== 'subtle'
596
- ? [{ r: 41, dash: '1 9', color: accentColor, dir: 1, dur: duration * 1.4, op: 0.12 }]
597
- : []),
598
- ...(intensity === 'dense'
599
- ? [{ r: 48, dash: '0.5 4', color: primaryColor, dir: -1, dur: duration * 1.8, op: 0.08 }]
600
- : []),
601
- ];
602
- const triangles = [
1614
+ }).join(" ");
1615
+ const rings = [
1616
+ { r: 45, dash: "4 6", color: primaryColor, dir: 1, dur: duration, op: 0.22 },
1617
+ { r: 38, dash: "2 4", color: secondaryColor, dir: -1, dur: duration * 0.75, op: 0.18 },
1618
+ ...intensity !== "subtle" ? [{ r: 41, dash: "1 9", color: accentColor, dir: 1, dur: duration * 1.4, op: 0.12 }] : [],
1619
+ ...intensity === "dense" ? [{ r: 48, dash: "0.5 4", color: primaryColor, dir: -1, dur: duration * 1.8, op: 0.08 }] : []
1620
+ ];
1621
+ const triangles = [
603
1622
  { r: 34, rot: 0, color: primaryColor, op: 0.14, dur: duration * 2, dir: 1 },
604
1623
  { r: 34, rot: 60, color: accentColor, op: 0.1, dur: duration * 1.6, dir: -1 },
605
- ...(intensity !== 'subtle'
606
- ? [{ r: 24, rot: 15, color: secondaryColor, op: 0.12, dur: duration * 1.9, dir: 1 }]
607
- : []),
608
- ...(intensity === 'dense'
609
- ? [{ r: 44, rot: 30, color: accentColor, op: 0.07, dur: duration * 2.2, dir: -1 }]
610
- : []),
611
- ];
612
- const diamonds = [
1624
+ ...intensity !== "subtle" ? [{ r: 24, rot: 15, color: secondaryColor, op: 0.12, dur: duration * 1.9, dir: 1 }] : [],
1625
+ ...intensity === "dense" ? [{ r: 44, rot: 30, color: accentColor, op: 0.07, dur: duration * 2.2, dir: -1 }] : []
1626
+ ];
1627
+ const diamonds = [
613
1628
  { cx: 8, cy: 8 },
614
1629
  { cx: 92, cy: 8 },
615
1630
  { cx: 8, cy: 92 },
616
1631
  { cx: 92, cy: 92 },
617
- ...(intensity !== 'subtle'
618
- ? [
619
- { cx: 50, cy: 2 },
620
- { cx: 50, cy: 98 },
1632
+ ...intensity !== "subtle" ? [
1633
+ { cx: 50, cy: 2 },
1634
+ { cx: 50, cy: 98 }
1635
+ ] : [],
1636
+ ...intensity === "dense" ? [
1637
+ { cx: 2, cy: 50 },
1638
+ { cx: 98, cy: 50 }
1639
+ ] : []
1640
+ ];
1641
+ const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
1642
+ return /* @__PURE__ */ jsxs("span", { ref, className, style: { ...wrapperBase, ...style }, children: [
1643
+ /* @__PURE__ */ jsxs(
1644
+ "svg",
1645
+ {
1646
+ viewBox: "0 0 100 100",
1647
+ style: { ...overlayBase, inset: "-30%", width: "160%", height: "160%", zIndex: 0 },
1648
+ "aria-hidden": true,
1649
+ children: [
1650
+ rings.map((ring, i) => /* @__PURE__ */ jsx(
1651
+ "circle",
1652
+ {
1653
+ cx: "50",
1654
+ cy: "50",
1655
+ r: ring.r,
1656
+ fill: "none",
1657
+ stroke: ring.color,
1658
+ strokeWidth: "0.6",
1659
+ strokeDasharray: ring.dash,
1660
+ opacity: ring.op,
1661
+ children: animate && /* @__PURE__ */ jsx(
1662
+ "animateTransform",
1663
+ {
1664
+ attributeName: "transform",
1665
+ type: "rotate",
1666
+ from: "0 50 50",
1667
+ to: `${ring.dir * 360} 50 50`,
1668
+ dur: `${ring.dur}s`,
1669
+ repeatCount: "indefinite"
1670
+ }
1671
+ )
1672
+ },
1673
+ `rng${i}`
1674
+ )),
1675
+ triangles.map((t, i) => /* @__PURE__ */ jsx(
1676
+ "polygon",
1677
+ {
1678
+ points: makeTriangle(50, 50, t.r, t.rot),
1679
+ fill: "none",
1680
+ stroke: t.color,
1681
+ strokeWidth: "0.5",
1682
+ opacity: t.op,
1683
+ children: animate && /* @__PURE__ */ jsx(
1684
+ "animateTransform",
1685
+ {
1686
+ attributeName: "transform",
1687
+ type: "rotate",
1688
+ from: "0 50 50",
1689
+ to: `${t.dir * 360} 50 50`,
1690
+ dur: `${t.dur}s`,
1691
+ repeatCount: "indefinite"
1692
+ }
1693
+ )
1694
+ },
1695
+ `tri${i}`
1696
+ )),
1697
+ diamonds.map((d, i) => /* @__PURE__ */ jsx(
1698
+ "path",
1699
+ {
1700
+ d: diamondPath(d.cx, d.cy),
1701
+ fill: accentColor,
1702
+ opacity: animate ? 0 : 0.5,
1703
+ children: animate && /* @__PURE__ */ jsxs(Fragment, { children: [
1704
+ /* @__PURE__ */ jsx(
1705
+ "animate",
1706
+ {
1707
+ attributeName: "opacity",
1708
+ from: "0",
1709
+ to: "0.5",
1710
+ dur: `${duration * 0.25}s`,
1711
+ begin: `${(i * 0.09).toFixed(2)}s`,
1712
+ fill: "freeze"
1713
+ }
1714
+ ),
1715
+ /* @__PURE__ */ jsx(
1716
+ "animateTransform",
1717
+ {
1718
+ attributeName: "transform",
1719
+ type: "rotate",
1720
+ from: `0 ${d.cx} ${d.cy}`,
1721
+ to: `360 ${d.cx} ${d.cy}`,
1722
+ dur: `${3 + i * 0.6}s`,
1723
+ repeatCount: "indefinite"
1724
+ }
1725
+ )
1726
+ ] })
1727
+ },
1728
+ `dm${i}`
1729
+ ))
621
1730
  ]
622
- : []),
623
- ...(intensity === 'dense'
624
- ? [
625
- { cx: 2, cy: 50 },
626
- { cx: 98, cy: 50 },
627
- ]
628
- : []),
629
- ];
630
- const diamondPath = (cx, cy, s = 3) => `M${cx},${cy - s} L${cx + s},${cy} L${cx},${cy + s} L${cx - s},${cy}Z`;
631
- 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 })] }));
632
- }), { displayName: 'NtdIconGeometric' });
633
-
634
- export { NtdIconCosmic, NtdIconFestive, NtdIconFloral, NtdIconFrost, NtdIconGeometric, NtdIconNeon, NtdIconOrganic, NtdIconPixel, NtdIconSketch, NtdIconSteampunk, NtdIconWatercolor };
1731
+ }
1732
+ ),
1733
+ /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", position: "relative", zIndex: 1 }, children })
1734
+ ] });
1735
+ }
1736
+ ),
1737
+ { displayName: "NtdIconGeometric" }
1738
+ );
1739
+ export {
1740
+ NtdIconCosmic,
1741
+ NtdIconFestive,
1742
+ NtdIconFloral,
1743
+ NtdIconFrost,
1744
+ NtdIconGeometric,
1745
+ NtdIconNeon,
1746
+ NtdIconOrganic,
1747
+ NtdIconPixel,
1748
+ NtdIconSketch,
1749
+ NtdIconSteampunk,
1750
+ NtdIconWatercolor
1751
+ };