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