@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
@@ -28,421 +28,368 @@
28
28
  *
29
29
  * audit-allow: i18n-file — token descriptions written into Style Dictionary output, not UI copy.
30
30
  */
31
- /* ────────────────────────────────────────────────────────────────────────────
32
- DEFAULT TOKEN VALUES
33
- ───────────────────────────────────────────────────────────────────────────── */
34
- /**
35
- * Default icon size tokens
36
- */
37
31
  const DEFAULT_SIZE_TOKENS = {
38
- xs: '0.75rem', // 12px
39
- sm: '1rem', // 16px
40
- md: '1.5rem', // 24px
41
- lg: '2rem', // 32px
42
- xl: '3rem', // 48px
43
- '2xl': '4rem', // 64px
32
+ xs: "0.75rem",
33
+ // 12px
34
+ sm: "1rem",
35
+ // 16px
36
+ md: "1.5rem",
37
+ // 24px
38
+ lg: "2rem",
39
+ // 32px
40
+ xl: "3rem",
41
+ // 48px
42
+ "2xl": "4rem"
43
+ // 64px
44
44
  };
45
- /**
46
- * Default icon color tokens
47
- */
48
45
  const DEFAULT_COLOR_TOKENS = {
49
- primary: '#3b82f6', // Blue 500
50
- secondary: '#64748b', // Slate 500
51
- accent: '#8b5cf6', // Violet 500
52
- success: '#22c55e', // Green 500
53
- warning: '#f59e0b', // Amber 500
54
- error: '#ef4444', // Red 500
55
- info: '#06b6d4', // Cyan 500
56
- muted: '#9ca3af', // Gray 400
46
+ primary: "#3b82f6",
47
+ // Blue 500
48
+ secondary: "#64748b",
49
+ // Slate 500
50
+ accent: "#8b5cf6",
51
+ // Violet 500
52
+ success: "#22c55e",
53
+ // Green 500
54
+ warning: "#f59e0b",
55
+ // Amber 500
56
+ error: "#ef4444",
57
+ // Red 500
58
+ info: "#06b6d4",
59
+ // Cyan 500
60
+ muted: "#9ca3af"
61
+ // Gray 400
57
62
  };
58
- /**
59
- * Default stroke width tokens
60
- */
61
63
  const DEFAULT_STROKE_TOKENS = {
62
- thin: '1',
63
- normal: '1.5',
64
- medium: '2',
65
- thick: '2.5',
66
- bold: '3',
64
+ thin: "1",
65
+ normal: "1.5",
66
+ medium: "2",
67
+ thick: "2.5",
68
+ bold: "3"
67
69
  };
68
- /**
69
- * Default animation tokens
70
- */
71
70
  const DEFAULT_ANIMATION_TOKENS = {
72
- duration: {
73
- instant: '0ms',
74
- fast: '150ms',
75
- normal: '300ms',
76
- slow: '500ms',
77
- slower: '1000ms',
78
- },
79
- easing: {
80
- linear: 'linear',
81
- easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
82
- easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
83
- easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
84
- spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
85
- },
71
+ duration: {
72
+ instant: "0ms",
73
+ fast: "150ms",
74
+ normal: "300ms",
75
+ slow: "500ms",
76
+ slower: "1000ms"
77
+ },
78
+ easing: {
79
+ linear: "linear",
80
+ easeIn: "cubic-bezier(0.4, 0, 1, 1)",
81
+ easeOut: "cubic-bezier(0, 0, 0.2, 1)",
82
+ easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
83
+ spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
84
+ }
86
85
  };
87
- /* ────────────────────────────────────────────────────────────────────────────
88
- TOKEN GENERATION
89
- ───────────────────────────────────────────────────────────────────────────── */
90
- /**
91
- * Generates Style Dictionary compatible design tokens for icons.
92
- *
93
- * @param config - Token configuration
94
- * @returns Token group object ready for Style Dictionary
95
- *
96
- * @example
97
- * ```ts
98
- * const tokens = generateIconTokens({
99
- * prefix: 'ntd',
100
- * colorTokens: {
101
- * primary: '{color.brand.500}',
102
- * },
103
- * });
104
- *
105
- * // Output:
106
- * // {
107
- * // ntd: {
108
- * // icon: {
109
- * // size: { md: { value: '1.5rem', type: 'dimension' } },
110
- * // color: { primary: { value: '{color.brand.500}', type: 'color' } },
111
- * // }
112
- * // }
113
- * // }
114
- * ```
115
- */
116
86
  function generateIconTokens(config = {}) {
117
- const { prefix = 'ntd', namespace = 'icon', colorTokens = {}, sizeTokens = {}, strokeTokens = {}, includeAnimations = true, includeVariants = true, } = config;
118
- const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
119
- const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
120
- const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
121
- const result = {
122
- [prefix]: {
123
- [namespace]: {
124
- // Size tokens
125
- size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
126
- acc[key] = {
127
- value: typeof value === 'number' ? `${value}px` : value,
128
- type: 'dimension',
129
- description: `Icon size: ${key}`,
130
- $extensions: {
131
- 'org.nice2dev.icons': {
132
- cssVariable: `--${prefix}-${namespace}-size-${key}`,
133
- tailwindClass: `${prefix}-${namespace}-${key}`,
134
- },
135
- },
136
- };
137
- return acc;
138
- }, {}),
139
- // Color tokens
140
- color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
141
- acc[key] = {
142
- value,
143
- type: 'color',
144
- description: `Icon color: ${key}`,
145
- $extensions: {
146
- 'org.nice2dev.icons': {
147
- cssVariable: `--${prefix}-${namespace}-color-${key}`,
148
- tailwindClass: `${prefix}-${namespace}-${key}`,
149
- },
150
- },
151
- };
152
- return acc;
153
- }, {}),
154
- // Stroke tokens
155
- stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
156
- acc[key] = {
157
- value: String(value),
158
- type: 'number',
159
- description: `Icon stroke width: ${key}`,
160
- $extensions: {
161
- 'org.nice2dev.icons': {
162
- cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
163
- tailwindClass: `${prefix}-${namespace}-stroke-${key}`,
164
- },
165
- },
166
- };
167
- return acc;
168
- }, {}),
169
- // Secondary opacity
170
- opacity: {
171
- secondary: {
172
- value: '0.35',
173
- type: 'number',
174
- description: 'Secondary color opacity for duotone variant',
175
- },
176
- },
177
- },
87
+ const {
88
+ prefix = "ntd",
89
+ namespace = "icon",
90
+ colorTokens = {},
91
+ sizeTokens = {},
92
+ strokeTokens = {},
93
+ includeAnimations = true,
94
+ includeVariants = true
95
+ } = config;
96
+ const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
97
+ const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
98
+ const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
99
+ const result = {
100
+ [prefix]: {
101
+ [namespace]: {
102
+ // Size tokens
103
+ size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
104
+ acc[key] = {
105
+ value: typeof value === "number" ? `${value}px` : value,
106
+ type: "dimension",
107
+ description: `Icon size: ${key}`,
108
+ $extensions: {
109
+ "org.nice2dev.icons": {
110
+ cssVariable: `--${prefix}-${namespace}-size-${key}`,
111
+ tailwindClass: `${prefix}-${namespace}-${key}`
112
+ }
113
+ }
114
+ };
115
+ return acc;
116
+ }, {}),
117
+ // Color tokens
118
+ color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
119
+ acc[key] = {
120
+ value,
121
+ type: "color",
122
+ description: `Icon color: ${key}`,
123
+ $extensions: {
124
+ "org.nice2dev.icons": {
125
+ cssVariable: `--${prefix}-${namespace}-color-${key}`,
126
+ tailwindClass: `${prefix}-${namespace}-${key}`
127
+ }
128
+ }
129
+ };
130
+ return acc;
131
+ }, {}),
132
+ // Stroke tokens
133
+ stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
134
+ acc[key] = {
135
+ value: String(value),
136
+ type: "number",
137
+ description: `Icon stroke width: ${key}`,
138
+ $extensions: {
139
+ "org.nice2dev.icons": {
140
+ cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
141
+ tailwindClass: `${prefix}-${namespace}-stroke-${key}`
142
+ }
143
+ }
144
+ };
145
+ return acc;
146
+ }, {}),
147
+ // Secondary opacity
148
+ opacity: {
149
+ secondary: {
150
+ value: "0.35",
151
+ type: "number",
152
+ description: "Secondary color opacity for duotone variant"
153
+ }
154
+ }
155
+ }
156
+ }
157
+ };
158
+ if (includeAnimations) {
159
+ result[prefix][namespace] = {
160
+ ...result[prefix][namespace],
161
+ animation: {
162
+ duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
163
+ acc[key] = {
164
+ value,
165
+ type: "duration",
166
+ description: `Animation duration: ${key}`
167
+ };
168
+ return acc;
169
+ }, {}),
170
+ easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
171
+ acc[key] = {
172
+ value,
173
+ type: "cubicBezier",
174
+ description: `Animation easing: ${key}`
175
+ };
176
+ return acc;
177
+ }, {})
178
+ }
179
+ };
180
+ }
181
+ if (includeVariants) {
182
+ result[prefix][namespace] = {
183
+ ...result[prefix][namespace],
184
+ variant: {
185
+ solid: { value: "solid", type: "string", description: "Filled icon variant" },
186
+ outline: { value: "outline", type: "string", description: "Outlined icon variant" },
187
+ wireframe: {
188
+ value: "wireframe",
189
+ type: "string",
190
+ description: "Thin construction-line variant"
191
+ },
192
+ duotone: { value: "duotone", type: "string", description: "Two-tone icon variant" },
193
+ cutout: {
194
+ value: "cutout",
195
+ type: "string",
196
+ description: "Knockout/cutout background variant"
178
197
  },
198
+ sharp: { value: "sharp", type: "string", description: "Sharp corners variant" },
199
+ rounded: { value: "rounded", type: "string", description: "Rounded corners variant" },
200
+ mini: { value: "mini", type: "string", description: "Compact small size variant" },
201
+ vivid: { value: "vivid", type: "string", description: "Colorful multi-fill variant" },
202
+ "3d": { value: "3d", type: "string", description: "Extruded depth variant" }
203
+ }
179
204
  };
180
- // Add animation tokens
181
- if (includeAnimations) {
182
- result[prefix][namespace] = {
183
- ...result[prefix][namespace],
184
- animation: {
185
- duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
186
- acc[key] = {
187
- value,
188
- type: 'duration',
189
- description: `Animation duration: ${key}`,
190
- };
191
- return acc;
192
- }, {}),
193
- easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
194
- acc[key] = {
195
- value,
196
- type: 'cubicBezier',
197
- description: `Animation easing: ${key}`,
198
- };
199
- return acc;
200
- }, {}),
201
- },
202
- };
203
- }
204
- // Add variant tokens
205
- if (includeVariants) {
206
- result[prefix][namespace] = {
207
- ...result[prefix][namespace],
208
- variant: {
209
- solid: { value: 'solid', type: 'string', description: 'Filled icon variant' },
210
- outline: { value: 'outline', type: 'string', description: 'Outlined icon variant' },
211
- wireframe: {
212
- value: 'wireframe',
213
- type: 'string',
214
- description: 'Thin construction-line variant',
215
- },
216
- duotone: { value: 'duotone', type: 'string', description: 'Two-tone icon variant' },
217
- cutout: {
218
- value: 'cutout',
219
- type: 'string',
220
- description: 'Knockout/cutout background variant',
221
- },
222
- sharp: { value: 'sharp', type: 'string', description: 'Sharp corners variant' },
223
- rounded: { value: 'rounded', type: 'string', description: 'Rounded corners variant' },
224
- mini: { value: 'mini', type: 'string', description: 'Compact small size variant' },
225
- vivid: { value: 'vivid', type: 'string', description: 'Colorful multi-fill variant' },
226
- '3d': { value: '3d', type: 'string', description: 'Extruded depth variant' },
227
- },
228
- };
229
- }
230
- return result;
205
+ }
206
+ return result;
231
207
  }
232
- /**
233
- * Creates a Style Dictionary configuration for icon tokens.
234
- *
235
- * @param options - Configuration options
236
- * @returns Style Dictionary config object
237
- */
238
208
  function createStyleDictionaryConfig(options = {}) {
239
- const { sourcePath = './tokens', outputPath = './dist/tokens', platforms = ['css', 'scss', 'js', 'json'], } = options;
240
- const platformConfigs = {};
241
- if (platforms.includes('css')) {
242
- platformConfigs.css = {
243
- transformGroup: 'css',
244
- buildPath: `${outputPath}/css/`,
245
- files: [
246
- {
247
- destination: 'icon-tokens.css',
248
- format: 'css/variables',
249
- filter: { attributes: { category: 'ntd' } },
250
- },
251
- ],
252
- };
253
- }
254
- if (platforms.includes('scss')) {
255
- platformConfigs.scss = {
256
- transformGroup: 'scss',
257
- buildPath: `${outputPath}/scss/`,
258
- files: [
259
- {
260
- destination: '_icon-tokens.scss',
261
- format: 'scss/variables',
262
- filter: { attributes: { category: 'ntd' } },
263
- },
264
- ],
265
- };
266
- }
267
- if (platforms.includes('js')) {
268
- platformConfigs.js = {
269
- transformGroup: 'js',
270
- buildPath: `${outputPath}/js/`,
271
- files: [
272
- {
273
- destination: 'icon-tokens.js',
274
- format: 'javascript/module',
275
- filter: { attributes: { category: 'ntd' } },
276
- },
277
- {
278
- destination: 'icon-tokens.d.ts',
279
- format: 'typescript/module-declarations',
280
- filter: { attributes: { category: 'ntd' } },
281
- },
282
- ],
283
- };
284
- }
285
- if (platforms.includes('json')) {
286
- platformConfigs.json = {
287
- transformGroup: 'js',
288
- buildPath: `${outputPath}/json/`,
289
- files: [
290
- {
291
- destination: 'icon-tokens.json',
292
- format: 'json/nested',
293
- filter: { attributes: { category: 'ntd' } },
294
- },
295
- ],
296
- };
297
- }
298
- return {
299
- source: [`${sourcePath}/**/*.json`],
300
- platforms: platformConfigs,
209
+ const {
210
+ sourcePath = "./tokens",
211
+ outputPath = "./dist/tokens",
212
+ platforms = ["css", "scss", "js", "json"]
213
+ } = options;
214
+ const platformConfigs = {};
215
+ if (platforms.includes("css")) {
216
+ platformConfigs.css = {
217
+ transformGroup: "css",
218
+ buildPath: `${outputPath}/css/`,
219
+ files: [
220
+ {
221
+ destination: "icon-tokens.css",
222
+ format: "css/variables",
223
+ filter: { attributes: { category: "ntd" } }
224
+ }
225
+ ]
226
+ };
227
+ }
228
+ if (platforms.includes("scss")) {
229
+ platformConfigs.scss = {
230
+ transformGroup: "scss",
231
+ buildPath: `${outputPath}/scss/`,
232
+ files: [
233
+ {
234
+ destination: "_icon-tokens.scss",
235
+ format: "scss/variables",
236
+ filter: { attributes: { category: "ntd" } }
237
+ }
238
+ ]
301
239
  };
240
+ }
241
+ if (platforms.includes("js")) {
242
+ platformConfigs.js = {
243
+ transformGroup: "js",
244
+ buildPath: `${outputPath}/js/`,
245
+ files: [
246
+ {
247
+ destination: "icon-tokens.js",
248
+ format: "javascript/module",
249
+ filter: { attributes: { category: "ntd" } }
250
+ },
251
+ {
252
+ destination: "icon-tokens.d.ts",
253
+ format: "typescript/module-declarations",
254
+ filter: { attributes: { category: "ntd" } }
255
+ }
256
+ ]
257
+ };
258
+ }
259
+ if (platforms.includes("json")) {
260
+ platformConfigs.json = {
261
+ transformGroup: "js",
262
+ buildPath: `${outputPath}/json/`,
263
+ files: [
264
+ {
265
+ destination: "icon-tokens.json",
266
+ format: "json/nested",
267
+ filter: { attributes: { category: "ntd" } }
268
+ }
269
+ ]
270
+ };
271
+ }
272
+ return {
273
+ source: [`${sourcePath}/**/*.json`],
274
+ platforms: platformConfigs
275
+ };
302
276
  }
303
- /* ────────────────────────────────────────────────────────────────────────────
304
- CSS GENERATION
305
- ───────────────────────────────────────────────────────────────────────────── */
306
- /**
307
- * Generates CSS custom properties from icon tokens.
308
- *
309
- * @param tokens - Token group
310
- * @param selector - CSS selector (default: ':root')
311
- * @returns CSS string with custom properties
312
- */
313
- function generateCSSVariables(tokens, selector = ':root') {
314
- const variables = [];
315
- function processTokens(obj, path = []) {
316
- for (const [key, value] of Object.entries(obj)) {
317
- const newPath = [...path, key];
318
- if (typeof value === 'object' && value !== null) {
319
- if ('value' in value && typeof value.value !== 'object') {
320
- // It's a token
321
- const token = value;
322
- const varName = `--${newPath.join('-')}`;
323
- variables.push(` ${varName}: ${token.value};`);
324
- }
325
- else {
326
- // It's a nested group
327
- processTokens(value, newPath);
328
- }
329
- }
277
+ function generateCSSVariables(tokens, selector = ":root") {
278
+ const variables = [];
279
+ function processTokens(obj, path = []) {
280
+ for (const [key, value] of Object.entries(obj)) {
281
+ const newPath = [...path, key];
282
+ if (typeof value === "object" && value !== null) {
283
+ if ("value" in value && typeof value.value !== "object") {
284
+ const token = value;
285
+ const varName = `--${newPath.join("-")}`;
286
+ variables.push(` ${varName}: ${token.value};`);
287
+ } else {
288
+ processTokens(value, newPath);
330
289
  }
290
+ }
331
291
  }
332
- processTokens(tokens);
333
- return `${selector} {\n${variables.join('\n')}\n}`;
292
+ }
293
+ processTokens(tokens);
294
+ return `${selector} {
295
+ ${variables.join("\n")}
296
+ }`;
334
297
  }
335
- /**
336
- * Generates Tailwind CSS config from icon tokens.
337
- *
338
- * @param tokens - Token group
339
- * @returns Tailwind config extend object
340
- */
341
298
  function generateTailwindConfig(tokens) {
342
- var _a;
343
- const colors = {};
344
- const spacing = {};
345
- const strokeWidth = {};
346
- function extractTokens(obj, type, prefix = '') {
347
- for (const [key, value] of Object.entries(obj)) {
348
- if (typeof value === 'object' && value !== null && 'value' in value) {
349
- const token = value;
350
- const tokenKey = prefix ? `${prefix}-${key}` : key;
351
- if (token.type === 'color') {
352
- colors[tokenKey] = String(token.value);
353
- }
354
- else if (token.type === 'dimension') {
355
- spacing[tokenKey] = String(token.value);
356
- }
357
- else if (type === 'stroke') {
358
- strokeWidth[tokenKey] = String(token.value);
359
- }
360
- }
361
- else if (typeof value === 'object' && value !== null) {
362
- extractTokens(value, type, key);
363
- }
299
+ const colors = {};
300
+ const spacing = {};
301
+ const strokeWidth = {};
302
+ function extractTokens(obj, type, prefix = "") {
303
+ for (const [key, value] of Object.entries(obj)) {
304
+ if (typeof value === "object" && value !== null && "value" in value) {
305
+ const token = value;
306
+ const tokenKey = prefix ? `${prefix}-${key}` : key;
307
+ if (token.type === "color") {
308
+ colors[tokenKey] = String(token.value);
309
+ } else if (token.type === "dimension") {
310
+ spacing[tokenKey] = String(token.value);
311
+ } else if (type === "stroke") {
312
+ strokeWidth[tokenKey] = String(token.value);
364
313
  }
314
+ } else if (typeof value === "object" && value !== null) {
315
+ extractTokens(value, type, key);
316
+ }
365
317
  }
366
- // Navigate to the icon tokens
367
- const iconTokens = (_a = tokens.ntd) === null || _a === void 0 ? void 0 : _a.icon;
368
- if (iconTokens) {
369
- if (iconTokens.color) {
370
- extractTokens(iconTokens.color, 'color', 'icon');
371
- }
372
- if (iconTokens.size) {
373
- extractTokens(iconTokens.size, 'size', 'icon');
374
- }
375
- if (iconTokens.stroke) {
376
- extractTokens(iconTokens.stroke, 'stroke', 'icon');
377
- }
318
+ }
319
+ const iconTokens = tokens.ntd?.icon;
320
+ if (iconTokens) {
321
+ if (iconTokens.color) {
322
+ extractTokens(iconTokens.color, "color", "icon");
323
+ }
324
+ if (iconTokens.size) {
325
+ extractTokens(iconTokens.size, "size", "icon");
378
326
  }
379
- return { colors, spacing, strokeWidth };
327
+ if (iconTokens.stroke) {
328
+ extractTokens(iconTokens.stroke, "stroke", "icon");
329
+ }
330
+ }
331
+ return { colors, spacing, strokeWidth };
380
332
  }
381
- /* ────────────────────────────────────────────────────────────────────────────
382
- FIGMA TOKENS EXPORT
383
- ───────────────────────────────────────────────────────────────────────────── */
384
- /**
385
- * Converts icon tokens to Figma Tokens format.
386
- * Compatible with the Figma Tokens plugin.
387
- *
388
- * @param tokens - Token group
389
- * @returns Figma Tokens compatible object
390
- */
391
333
  function toFigmaTokens(tokens) {
392
- const figmaTokens = {};
393
- function processTokens(obj, path = []) {
394
- for (const [key, value] of Object.entries(obj)) {
395
- const newPath = [...path, key];
396
- if (typeof value === 'object' && value !== null) {
397
- if ('value' in value && typeof value.value !== 'object') {
398
- const token = value;
399
- let currentObj = figmaTokens;
400
- for (let i = 0; i < newPath.length - 1; i++) {
401
- const part = newPath[i];
402
- if (!currentObj[part]) {
403
- currentObj[part] = {};
404
- }
405
- currentObj = currentObj[part];
406
- }
407
- currentObj[newPath[newPath.length - 1]] = {
408
- value: token.value,
409
- type: mapToFigmaType(token.type),
410
- };
411
- }
412
- else {
413
- processTokens(value, newPath);
414
- }
334
+ const figmaTokens = {};
335
+ function processTokens(obj, path = []) {
336
+ for (const [key, value] of Object.entries(obj)) {
337
+ const newPath = [...path, key];
338
+ if (typeof value === "object" && value !== null) {
339
+ if ("value" in value && typeof value.value !== "object") {
340
+ const token = value;
341
+ let currentObj = figmaTokens;
342
+ for (let i = 0; i < newPath.length - 1; i++) {
343
+ const part = newPath[i];
344
+ if (!currentObj[part]) {
345
+ currentObj[part] = {};
415
346
  }
347
+ currentObj = currentObj[part];
348
+ }
349
+ currentObj[newPath[newPath.length - 1]] = {
350
+ value: token.value,
351
+ type: mapToFigmaType(token.type)
352
+ };
353
+ } else {
354
+ processTokens(value, newPath);
416
355
  }
356
+ }
417
357
  }
418
- processTokens(tokens);
419
- return figmaTokens;
358
+ }
359
+ processTokens(tokens);
360
+ return figmaTokens;
420
361
  }
421
362
  function mapToFigmaType(type) {
422
- var _a;
423
- const typeMap = {
424
- color: 'color',
425
- dimension: 'sizing',
426
- number: 'number',
427
- duration: 'other',
428
- cubicBezier: 'other',
429
- string: 'other',
430
- };
431
- return (_a = typeMap[type !== null && type !== void 0 ? type : 'other']) !== null && _a !== void 0 ? _a : 'other';
363
+ const typeMap = {
364
+ color: "color",
365
+ dimension: "sizing",
366
+ number: "number",
367
+ duration: "other",
368
+ cubicBezier: "other",
369
+ string: "other"
370
+ };
371
+ return typeMap[type ?? "other"] ?? "other";
432
372
  }
433
- /* ────────────────────────────────────────────────────────────────────────────
434
- EXPORTS
435
- ───────────────────────────────────────────────────────────────────────────── */
436
- var designTokens = {
437
- generateIconTokens,
438
- createStyleDictionaryConfig,
439
- generateCSSVariables,
440
- generateTailwindConfig,
441
- toFigmaTokens,
442
- DEFAULT_SIZE_TOKENS,
443
- DEFAULT_COLOR_TOKENS,
444
- DEFAULT_STROKE_TOKENS,
445
- DEFAULT_ANIMATION_TOKENS,
373
+ const designTokens = {
374
+ generateIconTokens,
375
+ createStyleDictionaryConfig,
376
+ generateCSSVariables,
377
+ generateTailwindConfig,
378
+ toFigmaTokens,
379
+ DEFAULT_SIZE_TOKENS,
380
+ DEFAULT_COLOR_TOKENS,
381
+ DEFAULT_STROKE_TOKENS,
382
+ DEFAULT_ANIMATION_TOKENS
383
+ };
384
+ export {
385
+ DEFAULT_ANIMATION_TOKENS,
386
+ DEFAULT_COLOR_TOKENS,
387
+ DEFAULT_SIZE_TOKENS,
388
+ DEFAULT_STROKE_TOKENS,
389
+ createStyleDictionaryConfig,
390
+ designTokens as default,
391
+ generateCSSVariables,
392
+ generateIconTokens,
393
+ generateTailwindConfig,
394
+ toFigmaTokens
446
395
  };
447
-
448
- export { DEFAULT_ANIMATION_TOKENS, DEFAULT_COLOR_TOKENS, DEFAULT_SIZE_TOKENS, DEFAULT_STROKE_TOKENS, createStyleDictionaryConfig, designTokens as default, generateCSSVariables, generateIconTokens, generateTailwindConfig, toFigmaTokens };