@tac-ui/tokens 1.0.2 → 1.1.0

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 (14) hide show
  1. package/dist/{chunk-7I7QJ2NP.mjs → chunk-I2PXRTYK.mjs} +54 -51
  2. package/dist/index.d.mts +75 -48
  3. package/dist/index.d.ts +75 -48
  4. package/dist/index.js +54 -51
  5. package/dist/index.mjs +1 -1
  6. package/dist/{motion-DrXQxG6N.d.mts → motion-BRcQTpE0.d.mts} +24 -7
  7. package/dist/{motion-DrXQxG6N.d.ts → motion-BRcQTpE0.d.ts} +24 -7
  8. package/dist/native/index.d.mts +1 -1
  9. package/dist/native/index.d.ts +1 -1
  10. package/dist/native/index.js +48 -51
  11. package/dist/native/index.mjs +2 -2
  12. package/dist/web/css-variables.js +63 -50
  13. package/dist/web/css-variables.mjs +24 -8
  14. package/package.json +2 -2
package/dist/{chunk-7I7QJ2NP.mjs → chunk-I2PXRTYK.mjs} RENAMED
@@ -47,17 +47,17 @@ var semanticTokens = {
47
47
  glassBorder: "rgba(24, 24, 27, 0.04)",
48
48
  glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
49
49
  glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
50
- accentGlow: "none",
50
+ accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
51
51
  // ── Gradients ──
52
- gradientBrand: "none",
53
- gradientBrandHover: "none",
54
- gradientSubtle: "none",
55
- gradientAccent: "none",
56
- gradientAccentVivid: "none",
57
- gradientGlow: "none",
58
- gradientMesh: "none",
59
- gradientSurface: "none",
60
- gradientGlowShadow: "none",
52
+ gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
53
+ gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
54
+ gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
55
+ gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
56
+ gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
57
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
58
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)",
59
+ gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
60
+ gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
61
61
  // ── Shadow ──
62
62
  shadowColor: "rgba(24, 24, 27, 0.05)",
63
63
  // ── Status ──
@@ -157,20 +157,20 @@ var semanticTokens = {
157
157
  gray900: "#FAFAFA",
158
158
  // ── Glass & Effects ──
159
159
  glassBg: "rgba(9, 9, 11, 0.85)",
160
- glassBorder: "rgba(250, 250, 250, 0.1)",
161
- glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
162
- glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
163
- accentGlow: "none",
160
+ glassBorder: "rgba(255, 255, 255, 0.08)",
161
+ glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
162
+ glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
163
+ accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
164
164
  // ── Gradients ──
165
- gradientBrand: "none",
166
- gradientBrandHover: "none",
167
- gradientSubtle: "none",
168
- gradientAccent: "none",
169
- gradientAccentVivid: "none",
170
- gradientGlow: "none",
171
- gradientMesh: "none",
172
- gradientSurface: "none",
173
- gradientGlowShadow: "none",
165
+ gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
166
+ gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
167
+ gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
168
+ gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
169
+ gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
170
+ gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
171
+ gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)",
172
+ gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
173
+ gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
174
174
  // ── Shadow ──
175
175
  shadowColor: "rgba(0, 0, 0, 0.9)",
176
176
  // ── Status ──
@@ -212,15 +212,15 @@ var semanticTokens = {
212
212
  btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
213
213
  btnDestructiveSurface: "#EF4444",
214
214
  btnDestructiveHover: "#F87171",
215
- inputBg: "#27272A",
216
- inputBorderRest: "#3F3F46",
217
- inputBorderHover: "#52525B",
215
+ inputBg: "rgba(255, 255, 255, 0.04)",
216
+ inputBorderRest: "rgba(255, 255, 255, 0.1)",
217
+ inputBorderHover: "rgba(255, 255, 255, 0.16)",
218
218
  inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
219
219
  inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
220
220
  inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
221
- dropdownBg: "#18181B",
222
- dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
223
- dropdownItemHover: "#27272A",
221
+ dropdownBg: "rgba(24, 24, 27, 0.95)",
222
+ dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)",
223
+ dropdownItemHover: "rgba(255, 255, 255, 0.06)",
224
224
  cardAccentBorder: "#3F3F46",
225
225
  cardAccentGlow: "none",
226
226
  cardAccentHoverBorder: "#52525B",
@@ -236,13 +236,9 @@ var component = {
236
236
  lg: { height: 50, paddingX: 28, paddingY: 14, fontSize: 17, borderRadius: 14, iconSize: 20 }
237
237
  },
238
238
  input: {
239
- height: 44,
240
- paddingX: 16,
241
- paddingY: 12,
242
- fontSize: 15,
243
- borderRadius: 12,
244
- iconSize: 18,
245
- iconPadding: 42
239
+ sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
240
+ md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
241
+ lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
246
242
  },
247
243
  card: {
248
244
  padding: 24,
@@ -376,27 +372,34 @@ var typography = {
376
372
  fontFamily: {
377
373
  primary: "Pretendard",
378
374
  secondary: "Pretendard",
379
- display: "Pretendard"
375
+ display: "Pretendard",
376
+ mono: "SF Mono"
380
377
  },
381
378
  display: {
382
- lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
383
- md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
384
- sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
379
+ lg: { size: 56, weight: 700, lineHeight: 1.08, letterSpacing: -0.035 },
380
+ md: { size: 48, weight: 700, lineHeight: 1.08, letterSpacing: -0.03 },
381
+ sm: { size: 40, weight: 600, lineHeight: 1.1, letterSpacing: -0.025 }
385
382
  },
386
383
  heading: {
387
- h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
388
- h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
384
+ h1: { size: 34, weight: 700, lineHeight: 1.15, letterSpacing: -0.025 },
385
+ h2: { size: 28, weight: 600, lineHeight: 1.2, letterSpacing: -0.02 },
389
386
  h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
390
387
  h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
391
388
  h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
392
389
  h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
393
390
  },
394
391
  body: {
395
- lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
396
- md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
397
- sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
392
+ lg: { size: 17, weight: 400, lineHeight: 1.5, letterSpacing: -0.01 },
393
+ md: { size: 15, weight: 400, lineHeight: 1.5, letterSpacing: -5e-3 },
394
+ sm: { size: 13, weight: 400, lineHeight: 1.45, letterSpacing: 0 }
395
+ },
396
+ label: {
397
+ lg: { size: 15, weight: 500, lineHeight: 1.4, letterSpacing: -5e-3 },
398
+ md: { size: 13, weight: 500, lineHeight: 1.4, letterSpacing: 0 },
399
+ sm: { size: 12, weight: 500, lineHeight: 1.4, letterSpacing: 5e-3 }
398
400
  },
399
401
  caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
402
+ overline: { size: 11, weight: 600, lineHeight: 1.4, letterSpacing: 0.06 },
400
403
  fontWeight: {
401
404
  light: "300",
402
405
  regular: "400",
@@ -461,12 +464,12 @@ var elevation = {
461
464
  glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
462
465
  },
463
466
  dark: {
464
- sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
465
- m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
466
- lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
467
- xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
468
- glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
469
- glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
467
+ sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
468
+ m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)",
469
+ lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)",
470
+ xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)",
471
+ glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)",
472
+ glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)"
470
473
  }
471
474
  };
472
475
  var elevationLight = elevation.light;
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-DrXQxG6N.mjs';
1
+ export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-BRcQTpE0.mjs';
2
2
 
3
3
  /**
4
4
  * Primitive color tokens — Tac UI raw palette.
@@ -102,16 +102,16 @@ declare const semanticTokens: {
102
102
  readonly glassBorder: "rgba(24, 24, 27, 0.04)";
103
103
  readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)";
104
104
  readonly glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)";
105
- readonly accentGlow: "none";
106
- readonly gradientBrand: "none";
107
- readonly gradientBrandHover: "none";
108
- readonly gradientSubtle: "none";
109
- readonly gradientAccent: "none";
110
- readonly gradientAccentVivid: "none";
111
- readonly gradientGlow: "none";
112
- readonly gradientMesh: "none";
113
- readonly gradientSurface: "none";
114
- readonly gradientGlowShadow: "none";
105
+ readonly accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)";
106
+ readonly gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)";
107
+ readonly gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)";
108
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)";
109
+ readonly gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)";
110
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)";
111
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)";
112
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)";
113
+ readonly gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)";
114
+ readonly gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)";
115
115
  readonly shadowColor: "rgba(24, 24, 27, 0.05)";
116
116
  readonly success: "#166534";
117
117
  readonly successBg: "#DCFCE7";
@@ -200,19 +200,19 @@ declare const semanticTokens: {
200
200
  readonly gray800: "#E4E4E7";
201
201
  readonly gray900: "#FAFAFA";
202
202
  readonly glassBg: "rgba(9, 9, 11, 0.85)";
203
- readonly glassBorder: "rgba(250, 250, 250, 0.1)";
204
- readonly glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)";
205
- readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)";
206
- readonly accentGlow: "none";
207
- readonly gradientBrand: "none";
208
- readonly gradientBrandHover: "none";
209
- readonly gradientSubtle: "none";
210
- readonly gradientAccent: "none";
211
- readonly gradientAccentVivid: "none";
212
- readonly gradientGlow: "none";
213
- readonly gradientMesh: "none";
214
- readonly gradientSurface: "none";
215
- readonly gradientGlowShadow: "none";
203
+ readonly glassBorder: "rgba(255, 255, 255, 0.08)";
204
+ readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
205
+ readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)";
206
+ readonly accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)";
207
+ readonly gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)";
208
+ readonly gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)";
209
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)";
210
+ readonly gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)";
211
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)";
212
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)";
213
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)";
214
+ readonly gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)";
215
+ readonly gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)";
216
216
  readonly shadowColor: "rgba(0, 0, 0, 0.9)";
217
217
  readonly success: "#4ADE80";
218
218
  readonly successBg: "rgba(74, 222, 128, 0.15)";
@@ -250,15 +250,15 @@ declare const semanticTokens: {
250
250
  readonly btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)";
251
251
  readonly btnDestructiveSurface: "#EF4444";
252
252
  readonly btnDestructiveHover: "#F87171";
253
- readonly inputBg: "#27272A";
254
- readonly inputBorderRest: "#3F3F46";
255
- readonly inputBorderHover: "#52525B";
253
+ readonly inputBg: "rgba(255, 255, 255, 0.04)";
254
+ readonly inputBorderRest: "rgba(255, 255, 255, 0.1)";
255
+ readonly inputBorderHover: "rgba(255, 255, 255, 0.16)";
256
256
  readonly inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)";
257
257
  readonly inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)";
258
258
  readonly inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)";
259
- readonly dropdownBg: "#18181B";
260
- readonly dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)";
261
- readonly dropdownItemHover: "#27272A";
259
+ readonly dropdownBg: "rgba(24, 24, 27, 0.95)";
260
+ readonly dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)";
261
+ readonly dropdownItemHover: "rgba(255, 255, 255, 0.06)";
262
262
  readonly cardAccentBorder: "#3F3F46";
263
263
  readonly cardAccentGlow: "none";
264
264
  readonly cardAccentHoverBorder: "#52525B";
@@ -271,38 +271,39 @@ declare const typography: {
271
271
  readonly primary: "Pretendard";
272
272
  readonly secondary: "Pretendard";
273
273
  readonly display: "Pretendard";
274
+ readonly mono: "SF Mono";
274
275
  };
275
276
  readonly display: {
276
277
  readonly lg: {
277
278
  readonly size: 56;
278
279
  readonly weight: 700;
279
- readonly lineHeight: 1.12;
280
- readonly letterSpacing: -0.03;
280
+ readonly lineHeight: 1.08;
281
+ readonly letterSpacing: -0.035;
281
282
  };
282
283
  readonly md: {
283
284
  readonly size: 48;
284
285
  readonly weight: 700;
285
- readonly lineHeight: 1.12;
286
- readonly letterSpacing: -0.025;
286
+ readonly lineHeight: 1.08;
287
+ readonly letterSpacing: -0.03;
287
288
  };
288
289
  readonly sm: {
289
290
  readonly size: 40;
290
291
  readonly weight: 600;
291
- readonly lineHeight: 1.15;
292
- readonly letterSpacing: -0.02;
292
+ readonly lineHeight: 1.1;
293
+ readonly letterSpacing: -0.025;
293
294
  };
294
295
  };
295
296
  readonly heading: {
296
297
  readonly h1: {
297
298
  readonly size: 34;
298
299
  readonly weight: 700;
299
- readonly lineHeight: 1.2;
300
+ readonly lineHeight: 1.15;
300
301
  readonly letterSpacing: -0.025;
301
302
  };
302
303
  readonly h2: {
303
304
  readonly size: 28;
304
305
  readonly weight: 600;
305
- readonly lineHeight: 1.22;
306
+ readonly lineHeight: 1.2;
306
307
  readonly letterSpacing: -0.02;
307
308
  };
308
309
  readonly h3: {
@@ -334,21 +335,41 @@ declare const typography: {
334
335
  readonly lg: {
335
336
  readonly size: 17;
336
337
  readonly weight: 400;
337
- readonly lineHeight: 1.4;
338
- readonly letterSpacing: -0.02;
338
+ readonly lineHeight: 1.5;
339
+ readonly letterSpacing: -0.01;
339
340
  };
340
341
  readonly md: {
341
342
  readonly size: 15;
342
343
  readonly weight: 400;
343
- readonly lineHeight: 1.4;
344
- readonly letterSpacing: -0.01;
344
+ readonly lineHeight: 1.5;
345
+ readonly letterSpacing: -0.005;
345
346
  };
346
347
  readonly sm: {
347
348
  readonly size: 13;
348
349
  readonly weight: 400;
350
+ readonly lineHeight: 1.45;
351
+ readonly letterSpacing: 0;
352
+ };
353
+ };
354
+ readonly label: {
355
+ readonly lg: {
356
+ readonly size: 15;
357
+ readonly weight: 500;
358
+ readonly lineHeight: 1.4;
359
+ readonly letterSpacing: -0.005;
360
+ };
361
+ readonly md: {
362
+ readonly size: 13;
363
+ readonly weight: 500;
349
364
  readonly lineHeight: 1.4;
350
365
  readonly letterSpacing: 0;
351
366
  };
367
+ readonly sm: {
368
+ readonly size: 12;
369
+ readonly weight: 500;
370
+ readonly lineHeight: 1.4;
371
+ readonly letterSpacing: 0.005;
372
+ };
352
373
  };
353
374
  readonly caption: {
354
375
  readonly size: 12;
@@ -356,6 +377,12 @@ declare const typography: {
356
377
  readonly lineHeight: 1.4;
357
378
  readonly letterSpacing: 0.01;
358
379
  };
380
+ readonly overline: {
381
+ readonly size: 11;
382
+ readonly weight: 600;
383
+ readonly lineHeight: 1.4;
384
+ readonly letterSpacing: 0.06;
385
+ };
359
386
  readonly fontWeight: {
360
387
  readonly light: "300";
361
388
  readonly regular: "400";
@@ -418,12 +445,12 @@ declare const elevation: {
418
445
  readonly glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)";
419
446
  };
420
447
  readonly dark: {
421
- readonly sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)";
422
- readonly m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)";
423
- readonly lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)";
424
- readonly xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)";
425
- readonly glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)";
426
- readonly glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)";
448
+ readonly sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)";
449
+ readonly m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)";
450
+ readonly lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)";
451
+ readonly xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)";
452
+ readonly glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)";
453
+ readonly glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)";
427
454
  };
428
455
  };
429
456
  /** @deprecated Use elevation.light instead */
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-DrXQxG6N.js';
1
+ export { c as component, m as motion, s as springConfigs, t as tacSpring } from './motion-BRcQTpE0.js';
2
2
 
3
3
  /**
4
4
  * Primitive color tokens — Tac UI raw palette.
@@ -102,16 +102,16 @@ declare const semanticTokens: {
102
102
  readonly glassBorder: "rgba(24, 24, 27, 0.04)";
103
103
  readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)";
104
104
  readonly glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)";
105
- readonly accentGlow: "none";
106
- readonly gradientBrand: "none";
107
- readonly gradientBrandHover: "none";
108
- readonly gradientSubtle: "none";
109
- readonly gradientAccent: "none";
110
- readonly gradientAccentVivid: "none";
111
- readonly gradientGlow: "none";
112
- readonly gradientMesh: "none";
113
- readonly gradientSurface: "none";
114
- readonly gradientGlowShadow: "none";
105
+ readonly accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)";
106
+ readonly gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)";
107
+ readonly gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)";
108
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)";
109
+ readonly gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)";
110
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)";
111
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)";
112
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(88, 86, 214, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(139, 92, 246, 0.03) 0%, transparent 50%)";
113
+ readonly gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)";
114
+ readonly gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)";
115
115
  readonly shadowColor: "rgba(24, 24, 27, 0.05)";
116
116
  readonly success: "#166534";
117
117
  readonly successBg: "#DCFCE7";
@@ -200,19 +200,19 @@ declare const semanticTokens: {
200
200
  readonly gray800: "#E4E4E7";
201
201
  readonly gray900: "#FAFAFA";
202
202
  readonly glassBg: "rgba(9, 9, 11, 0.85)";
203
- readonly glassBorder: "rgba(250, 250, 250, 0.1)";
204
- readonly glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)";
205
- readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)";
206
- readonly accentGlow: "none";
207
- readonly gradientBrand: "none";
208
- readonly gradientBrandHover: "none";
209
- readonly gradientSubtle: "none";
210
- readonly gradientAccent: "none";
211
- readonly gradientAccentVivid: "none";
212
- readonly gradientGlow: "none";
213
- readonly gradientMesh: "none";
214
- readonly gradientSurface: "none";
215
- readonly gradientGlowShadow: "none";
203
+ readonly glassBorder: "rgba(255, 255, 255, 0.08)";
204
+ readonly glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)";
205
+ readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)";
206
+ readonly accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)";
207
+ readonly gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)";
208
+ readonly gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)";
209
+ readonly gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)";
210
+ readonly gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)";
211
+ readonly gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)";
212
+ readonly gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)";
213
+ readonly gradientMesh: "radial-gradient(ellipse at 20% 50%, rgba(94, 92, 230, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 50%, rgba(155, 138, 255, 0.06) 0%, transparent 50%)";
214
+ readonly gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)";
215
+ readonly gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)";
216
216
  readonly shadowColor: "rgba(0, 0, 0, 0.9)";
217
217
  readonly success: "#4ADE80";
218
218
  readonly successBg: "rgba(74, 222, 128, 0.15)";
@@ -250,15 +250,15 @@ declare const semanticTokens: {
250
250
  readonly btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)";
251
251
  readonly btnDestructiveSurface: "#EF4444";
252
252
  readonly btnDestructiveHover: "#F87171";
253
- readonly inputBg: "#27272A";
254
- readonly inputBorderRest: "#3F3F46";
255
- readonly inputBorderHover: "#52525B";
253
+ readonly inputBg: "rgba(255, 255, 255, 0.04)";
254
+ readonly inputBorderRest: "rgba(255, 255, 255, 0.1)";
255
+ readonly inputBorderHover: "rgba(255, 255, 255, 0.16)";
256
256
  readonly inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)";
257
257
  readonly inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)";
258
258
  readonly inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)";
259
- readonly dropdownBg: "#18181B";
260
- readonly dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)";
261
- readonly dropdownItemHover: "#27272A";
259
+ readonly dropdownBg: "rgba(24, 24, 27, 0.95)";
260
+ readonly dropdownShadow: "0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 8px 16px -4px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.08)";
261
+ readonly dropdownItemHover: "rgba(255, 255, 255, 0.06)";
262
262
  readonly cardAccentBorder: "#3F3F46";
263
263
  readonly cardAccentGlow: "none";
264
264
  readonly cardAccentHoverBorder: "#52525B";
@@ -271,38 +271,39 @@ declare const typography: {
271
271
  readonly primary: "Pretendard";
272
272
  readonly secondary: "Pretendard";
273
273
  readonly display: "Pretendard";
274
+ readonly mono: "SF Mono";
274
275
  };
275
276
  readonly display: {
276
277
  readonly lg: {
277
278
  readonly size: 56;
278
279
  readonly weight: 700;
279
- readonly lineHeight: 1.12;
280
- readonly letterSpacing: -0.03;
280
+ readonly lineHeight: 1.08;
281
+ readonly letterSpacing: -0.035;
281
282
  };
282
283
  readonly md: {
283
284
  readonly size: 48;
284
285
  readonly weight: 700;
285
- readonly lineHeight: 1.12;
286
- readonly letterSpacing: -0.025;
286
+ readonly lineHeight: 1.08;
287
+ readonly letterSpacing: -0.03;
287
288
  };
288
289
  readonly sm: {
289
290
  readonly size: 40;
290
291
  readonly weight: 600;
291
- readonly lineHeight: 1.15;
292
- readonly letterSpacing: -0.02;
292
+ readonly lineHeight: 1.1;
293
+ readonly letterSpacing: -0.025;
293
294
  };
294
295
  };
295
296
  readonly heading: {
296
297
  readonly h1: {
297
298
  readonly size: 34;
298
299
  readonly weight: 700;
299
- readonly lineHeight: 1.2;
300
+ readonly lineHeight: 1.15;
300
301
  readonly letterSpacing: -0.025;
301
302
  };
302
303
  readonly h2: {
303
304
  readonly size: 28;
304
305
  readonly weight: 600;
305
- readonly lineHeight: 1.22;
306
+ readonly lineHeight: 1.2;
306
307
  readonly letterSpacing: -0.02;
307
308
  };
308
309
  readonly h3: {
@@ -334,21 +335,41 @@ declare const typography: {
334
335
  readonly lg: {
335
336
  readonly size: 17;
336
337
  readonly weight: 400;
337
- readonly lineHeight: 1.4;
338
- readonly letterSpacing: -0.02;
338
+ readonly lineHeight: 1.5;
339
+ readonly letterSpacing: -0.01;
339
340
  };
340
341
  readonly md: {
341
342
  readonly size: 15;
342
343
  readonly weight: 400;
343
- readonly lineHeight: 1.4;
344
- readonly letterSpacing: -0.01;
344
+ readonly lineHeight: 1.5;
345
+ readonly letterSpacing: -0.005;
345
346
  };
346
347
  readonly sm: {
347
348
  readonly size: 13;
348
349
  readonly weight: 400;
350
+ readonly lineHeight: 1.45;
351
+ readonly letterSpacing: 0;
352
+ };
353
+ };
354
+ readonly label: {
355
+ readonly lg: {
356
+ readonly size: 15;
357
+ readonly weight: 500;
358
+ readonly lineHeight: 1.4;
359
+ readonly letterSpacing: -0.005;
360
+ };
361
+ readonly md: {
362
+ readonly size: 13;
363
+ readonly weight: 500;
349
364
  readonly lineHeight: 1.4;
350
365
  readonly letterSpacing: 0;
351
366
  };
367
+ readonly sm: {
368
+ readonly size: 12;
369
+ readonly weight: 500;
370
+ readonly lineHeight: 1.4;
371
+ readonly letterSpacing: 0.005;
372
+ };
352
373
  };
353
374
  readonly caption: {
354
375
  readonly size: 12;
@@ -356,6 +377,12 @@ declare const typography: {
356
377
  readonly lineHeight: 1.4;
357
378
  readonly letterSpacing: 0.01;
358
379
  };
380
+ readonly overline: {
381
+ readonly size: 11;
382
+ readonly weight: 600;
383
+ readonly lineHeight: 1.4;
384
+ readonly letterSpacing: 0.06;
385
+ };
359
386
  readonly fontWeight: {
360
387
  readonly light: "300";
361
388
  readonly regular: "400";
@@ -418,12 +445,12 @@ declare const elevation: {
418
445
  readonly glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)";
419
446
  };
420
447
  readonly dark: {
421
- readonly sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)";
422
- readonly m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)";
423
- readonly lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)";
424
- readonly xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)";
425
- readonly glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)";
426
- readonly glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)";
448
+ readonly sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)";
449
+ readonly m: "0 2px 8px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.04)";
450
+ readonly lg: "0 4px 12px rgba(0,0,0,0.24), 0 8px 24px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(255,255,255,0.06)";
451
+ readonly xl: "0 8px 24px rgba(0,0,0,0.28), 0 16px 40px rgba(0,0,0,0.22), 0 0 0 0.5px rgba(255,255,255,0.06)";
452
+ readonly glass: "0 4px 16px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 0.5px 0 rgba(255,255,255,0.04)";
453
+ readonly glassLg: "0 8px 32px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.16), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 0.5px 0 rgba(255,255,255,0.06)";
427
454
  };
428
455
  };
429
456
  /** @deprecated Use elevation.light instead */