@nice2dev/icons 1.3.15 → 1.3.17

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 (153) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +1 -1
  3. package/dist/cjs/NiceDesktopIconExporter.js +688 -599
  4. package/dist/cjs/NiceFaviconGenerator.js +603 -417
  5. package/dist/cjs/NiceIconPicker.js +788 -508
  6. package/dist/cjs/NiceIconPreview.js +246 -188
  7. package/dist/cjs/NiceIconSetCreator.js +683 -552
  8. package/dist/cjs/NiceIconStacker.js +547 -171
  9. package/dist/cjs/NiceIconValue.js +27 -35
  10. package/dist/cjs/NtdIconBadge.js +384 -360
  11. package/dist/cjs/NtdIconMorph.js +419 -354
  12. package/dist/cjs/NtdStateMorph.js +150 -147
  13. package/dist/cjs/advancedIconSearch.js +373 -510
  14. package/dist/cjs/animationControls.js +518 -642
  15. package/dist/cjs/animationSpeed.js +69 -0
  16. package/dist/cjs/client.js +12 -15
  17. package/dist/cjs/createIcon.js +374 -252
  18. package/dist/cjs/design-tokens.js +324 -390
  19. package/dist/cjs/figmaExport.js +162 -257
  20. package/dist/cjs/figmaSync.js +234 -316
  21. package/dist/cjs/headless-ui.js +240 -368
  22. package/dist/cjs/iconAnalytics.js +337 -393
  23. package/dist/cjs/iconHtml.js +64 -86
  24. package/dist/cjs/iconMetadata.js +392 -472
  25. package/dist/cjs/iconParts.js +120 -90
  26. package/dist/cjs/iconStack.js +136 -155
  27. package/dist/cjs/iconStyles.js +1670 -509
  28. package/dist/cjs/iconValue.js +359 -430
  29. package/dist/cjs/icons/accessibility.js +1119 -134
  30. package/dist/cjs/icons/actions.js +1290 -330
  31. package/dist/cjs/icons/ai.js +1424 -144
  32. package/dist/cjs/icons/brand.js +613 -184
  33. package/dist/cjs/icons/business.js +938 -192
  34. package/dist/cjs/icons/devtech.js +1656 -227
  35. package/dist/cjs/icons/ecommerce.js +802 -111
  36. package/dist/cjs/icons/education.js +1345 -199
  37. package/dist/cjs/icons/files.js +1597 -328
  38. package/dist/cjs/icons/fintech.js +793 -104
  39. package/dist/cjs/icons/food.js +1028 -156
  40. package/dist/cjs/icons/fun.js +804 -109
  41. package/dist/cjs/icons/gaming.js +916 -170
  42. package/dist/cjs/icons/health.js +623 -112
  43. package/dist/cjs/icons/index.js +32 -42
  44. package/dist/cjs/icons/input.js +282 -83
  45. package/dist/cjs/icons/legal.js +1065 -122
  46. package/dist/cjs/icons/media.js +1061 -267
  47. package/dist/cjs/icons/navigation.js +407 -123
  48. package/dist/cjs/icons/omniverk.js +523 -93
  49. package/dist/cjs/icons/realestate.js +1520 -193
  50. package/dist/cjs/icons/saas.js +867 -98
  51. package/dist/cjs/icons/science.js +1344 -202
  52. package/dist/cjs/icons/shapes.js +1316 -308
  53. package/dist/cjs/icons/smarthome.js +786 -90
  54. package/dist/cjs/icons/social.js +591 -59
  55. package/dist/cjs/icons/sports.js +1133 -133
  56. package/dist/cjs/icons/sustainability.js +1211 -139
  57. package/dist/cjs/icons/travel.js +1470 -148
  58. package/dist/cjs/icons/ui.js +1508 -315
  59. package/dist/cjs/icons/weather.js +1160 -173
  60. package/dist/cjs/index.js +559 -568
  61. package/dist/cjs/lottieIntegration.js +261 -266
  62. package/dist/cjs/nicetodev-icons.css +1 -1
  63. package/dist/cjs/particleEffects.js +270 -251
  64. package/dist/cjs/resolver.js +229 -284
  65. package/dist/cjs/rsc.js +175 -193
  66. package/dist/cjs/sharpen.js +73 -130
  67. package/dist/cjs/smilAnimations.js +380 -165
  68. package/dist/cjs/stacking.js +87 -122
  69. package/dist/cjs/tailwind-plugin.js +280 -320
  70. package/dist/cjs/types.js +46 -72
  71. package/dist/cjs/utilities.js +163 -324
  72. package/dist/cjs/variantProps.js +12 -52
  73. package/dist/esm/NiceDesktopIconExporter.js +671 -598
  74. package/dist/esm/NiceFaviconGenerator.js +583 -416
  75. package/dist/esm/NiceIconPicker.js +789 -507
  76. package/dist/esm/NiceIconPreview.js +247 -187
  77. package/dist/esm/NiceIconSetCreator.js +685 -551
  78. package/dist/esm/NiceIconStacker.js +549 -170
  79. package/dist/esm/NiceIconValue.js +29 -34
  80. package/dist/esm/NtdIconBadge.js +388 -359
  81. package/dist/esm/NtdIconMorph.js +423 -353
  82. package/dist/esm/NtdStateMorph.js +152 -146
  83. package/dist/esm/advancedIconSearch.js +391 -509
  84. package/dist/esm/animationControls.js +527 -641
  85. package/dist/esm/animationSpeed.js +69 -0
  86. package/dist/esm/client.js +48 -10
  87. package/dist/esm/createIcon.js +375 -251
  88. package/dist/esm/design-tokens.js +334 -387
  89. package/dist/esm/figmaExport.js +170 -256
  90. package/dist/esm/figmaSync.js +237 -315
  91. package/dist/esm/headless-ui.js +254 -365
  92. package/dist/esm/iconAnalytics.js +342 -392
  93. package/dist/esm/iconHtml.js +67 -85
  94. package/dist/esm/iconMetadata.js +404 -471
  95. package/dist/esm/iconParts.js +125 -89
  96. package/dist/esm/iconStack.js +145 -154
  97. package/dist/esm/iconStyles.js +1681 -508
  98. package/dist/esm/iconValue.js +361 -429
  99. package/dist/esm/icons/accessibility.js +1133 -133
  100. package/dist/esm/icons/actions.js +1320 -329
  101. package/dist/esm/icons/ai.js +1441 -143
  102. package/dist/esm/icons/brand.js +616 -179
  103. package/dist/esm/icons/business.js +957 -191
  104. package/dist/esm/icons/devtech.js +1687 -226
  105. package/dist/esm/icons/ecommerce.js +816 -110
  106. package/dist/esm/icons/education.js +1364 -198
  107. package/dist/esm/icons/files.js +1628 -327
  108. package/dist/esm/icons/fintech.js +807 -103
  109. package/dist/esm/icons/food.js +1043 -153
  110. package/dist/esm/icons/fun.js +819 -108
  111. package/dist/esm/icons/gaming.js +933 -169
  112. package/dist/esm/icons/health.js +636 -111
  113. package/dist/esm/icons/index.js +589 -32
  114. package/dist/esm/icons/input.js +326 -82
  115. package/dist/esm/icons/legal.js +1079 -121
  116. package/dist/esm/icons/media.js +1086 -266
  117. package/dist/esm/icons/navigation.js +421 -122
  118. package/dist/esm/icons/omniverk.js +534 -91
  119. package/dist/esm/icons/realestate.js +1544 -198
  120. package/dist/esm/icons/saas.js +880 -97
  121. package/dist/esm/icons/science.js +1370 -208
  122. package/dist/esm/icons/shapes.js +1343 -307
  123. package/dist/esm/icons/smarthome.js +799 -89
  124. package/dist/esm/icons/social.js +599 -58
  125. package/dist/esm/icons/sports.js +1148 -132
  126. package/dist/esm/icons/sustainability.js +1226 -138
  127. package/dist/esm/icons/travel.js +1486 -147
  128. package/dist/esm/icons/ui.js +1540 -314
  129. package/dist/esm/icons/weather.js +1181 -172
  130. package/dist/esm/index.js +749 -58
  131. package/dist/esm/lottieIntegration.js +264 -265
  132. package/dist/esm/nicetodev-icons.css +1 -1
  133. package/dist/esm/particleEffects.js +271 -250
  134. package/dist/esm/resolver.js +231 -283
  135. package/dist/esm/rsc.js +182 -192
  136. package/dist/esm/sharpen.js +78 -129
  137. package/dist/esm/smilAnimations.js +385 -164
  138. package/dist/esm/stacking.js +99 -121
  139. package/dist/esm/tailwind-plugin.js +282 -319
  140. package/dist/esm/types.js +50 -71
  141. package/dist/esm/utilities.js +177 -321
  142. package/dist/esm/variantProps.js +23 -52
  143. package/dist/types/animationSpeed.d.ts +19 -0
  144. package/dist/types/createIcon.d.ts +6 -0
  145. package/dist/types/iconStyles.d.ts +6 -1
  146. package/dist/types/icons/brand.d.ts +0 -4
  147. package/dist/types/icons/food.d.ts +0 -3
  148. package/dist/types/icons/index.d.ts +3 -3
  149. package/dist/types/icons/omniverk.d.ts +0 -3
  150. package/dist/types/icons/science.d.ts +1 -1
  151. package/dist/types/smilAnimations.d.ts +4 -2
  152. package/dist/types/types.d.ts +7 -0
  153. 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;