@tac-ui/tokens 1.0.2 → 1.1.0

package/dist/index.js

@@ -107,17 +107,17 @@ var semanticTokens = {
     glassBorder: "rgba(24, 24, 27, 0.04)",
     glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
     glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
-    accentGlow: "none",
+    accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
     // ── Gradients ──
-    gradientBrand: "none",
-    gradientBrandHover: "none",
-    gradientSubtle: "none",
-    gradientAccent: "none",
-    gradientAccentVivid: "none",
-    gradientGlow: "none",
-    gradientMesh: "none",
-    gradientSurface: "none",
-    gradientGlowShadow: "none",
+    gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
+    gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
+    gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
+    gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
+    gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
+    gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
+    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%)",
+    gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
+    gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
     // ── Shadow ──
     shadowColor: "rgba(24, 24, 27, 0.05)",
     // ── Status ──
@@ -217,20 +217,20 @@ var semanticTokens = {
     gray900: "#FAFAFA",
     // ── Glass & Effects ──
     glassBg: "rgba(9, 9, 11, 0.85)",
-    glassBorder: "rgba(250, 250, 250, 0.1)",
-    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
-    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
-    accentGlow: "none",
+    glassBorder: "rgba(255, 255, 255, 0.08)",
+    glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
+    accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
     // ── Gradients ──
-    gradientBrand: "none",
-    gradientBrandHover: "none",
-    gradientSubtle: "none",
-    gradientAccent: "none",
-    gradientAccentVivid: "none",
-    gradientGlow: "none",
-    gradientMesh: "none",
-    gradientSurface: "none",
-    gradientGlowShadow: "none",
+    gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
+    gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
+    gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
+    gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
+    gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
+    gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
+    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%)",
+    gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
+    gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
     // ── Shadow ──
     shadowColor: "rgba(0, 0, 0, 0.9)",
     // ── Status ──
@@ -272,15 +272,15 @@ var semanticTokens = {
     btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
     btnDestructiveSurface: "#EF4444",
     btnDestructiveHover: "#F87171",
-    inputBg: "#27272A",
-    inputBorderRest: "#3F3F46",
-    inputBorderHover: "#52525B",
+    inputBg: "rgba(255, 255, 255, 0.04)",
+    inputBorderRest: "rgba(255, 255, 255, 0.1)",
+    inputBorderHover: "rgba(255, 255, 255, 0.16)",
     inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
     inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
     inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
-    dropdownBg: "#18181B",
-    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
-    dropdownItemHover: "#27272A",
+    dropdownBg: "rgba(24, 24, 27, 0.95)",
+    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)",
+    dropdownItemHover: "rgba(255, 255, 255, 0.06)",
     cardAccentBorder: "#3F3F46",
     cardAccentGlow: "none",
     cardAccentHoverBorder: "#52525B",
@@ -296,13 +296,9 @@ var component = {
     lg: { height: 50, paddingX: 28, paddingY: 14, fontSize: 17, borderRadius: 14, iconSize: 20 }
   },
   input: {
-    height: 44,
-    paddingX: 16,
-    paddingY: 12,
-    fontSize: 15,
-    borderRadius: 12,
-    iconSize: 18,
-    iconPadding: 42
+    sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
+    md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
+    lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
   },
   card: {
     padding: 24,
@@ -436,27 +432,34 @@ var typography = {
   fontFamily: {
     primary: "Pretendard",
     secondary: "Pretendard",
-    display: "Pretendard"
+    display: "Pretendard",
+    mono: "SF Mono"
   },
   display: {
-    lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
-    md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
-    sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
+    lg: { size: 56, weight: 700, lineHeight: 1.08, letterSpacing: -0.035 },
+    md: { size: 48, weight: 700, lineHeight: 1.08, letterSpacing: -0.03 },
+    sm: { size: 40, weight: 600, lineHeight: 1.1, letterSpacing: -0.025 }
   },
   heading: {
-    h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
-    h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
+    h1: { size: 34, weight: 700, lineHeight: 1.15, letterSpacing: -0.025 },
+    h2: { size: 28, weight: 600, lineHeight: 1.2, letterSpacing: -0.02 },
     h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
     h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
     h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
     h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
   },
   body: {
-    lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
-    md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
-    sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
+    lg: { size: 17, weight: 400, lineHeight: 1.5, letterSpacing: -0.01 },
+    md: { size: 15, weight: 400, lineHeight: 1.5, letterSpacing: -5e-3 },
+    sm: { size: 13, weight: 400, lineHeight: 1.45, letterSpacing: 0 }
+  },
+  label: {
+    lg: { size: 15, weight: 500, lineHeight: 1.4, letterSpacing: -5e-3 },
+    md: { size: 13, weight: 500, lineHeight: 1.4, letterSpacing: 0 },
+    sm: { size: 12, weight: 500, lineHeight: 1.4, letterSpacing: 5e-3 }
   },
   caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
+  overline: { size: 11, weight: 600, lineHeight: 1.4, letterSpacing: 0.06 },
   fontWeight: {
     light: "300",
     regular: "400",
@@ -521,12 +524,12 @@ var elevation = {
     glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
   },
   dark: {
-    sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
-    m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
-    lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
-    xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
-    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)",
-    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)"
+    sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
+    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)",
+    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)",
+    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)",
+    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)",
+    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)"
   }
 };
 var elevationLight = elevation.light;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 export { ms, px, rem, unitless } from './chunk-GLCF64BD.mjs';
-export { breakpoints, chart, component, containers, elevation, elevationLight, grid, motion, radius, semanticTokens, spacing, springConfigs, tacSpring, typography, zIndex } from './chunk-7I7QJ2NP.mjs';
+export { breakpoints, chart, component, containers, elevation, elevationLight, grid, motion, radius, semanticTokens, spacing, springConfigs, tacSpring, typography, zIndex } from './chunk-I2PXRTYK.mjs';
 
 // src/primitive.ts
 var primitiveColors = {

package/dist/{motion-DrXQxG6N.d.mts → motion-BRcQTpE0.d.mts}

@@ -30,13 +30,30 @@ declare const component: {
         };
     };
     readonly input: {
-        readonly height: 44;
-        readonly paddingX: 16;
-        readonly paddingY: 12;
-        readonly fontSize: 15;
-        readonly borderRadius: 12;
-        readonly iconSize: 18;
-        readonly iconPadding: 42;
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingX: 12;
+            readonly fontSize: 13;
+            readonly borderRadius: 8;
+            readonly iconSize: 16;
+            readonly iconPadding: 34;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly paddingX: 16;
+            readonly fontSize: 16;
+            readonly borderRadius: 12;
+            readonly iconSize: 18;
+            readonly iconPadding: 42;
+        };
+        readonly lg: {
+            readonly height: 50;
+            readonly paddingX: 20;
+            readonly fontSize: 17;
+            readonly borderRadius: 14;
+            readonly iconSize: 20;
+            readonly iconPadding: 46;
+        };
     };
     readonly card: {
         readonly padding: 24;

package/dist/{motion-DrXQxG6N.d.ts → motion-BRcQTpE0.d.ts}

@@ -30,13 +30,30 @@ declare const component: {
         };
     };
     readonly input: {
-        readonly height: 44;
-        readonly paddingX: 16;
-        readonly paddingY: 12;
-        readonly fontSize: 15;
-        readonly borderRadius: 12;
-        readonly iconSize: 18;
-        readonly iconPadding: 42;
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingX: 12;
+            readonly fontSize: 13;
+            readonly borderRadius: 8;
+            readonly iconSize: 16;
+            readonly iconPadding: 34;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly paddingX: 16;
+            readonly fontSize: 16;
+            readonly borderRadius: 12;
+            readonly iconSize: 18;
+            readonly iconPadding: 42;
+        };
+        readonly lg: {
+            readonly height: 50;
+            readonly paddingX: 20;
+            readonly fontSize: 17;
+            readonly borderRadius: 14;
+            readonly iconSize: 20;
+            readonly iconPadding: 46;
+        };
     };
     readonly card: {
         readonly padding: 24;

package/dist/native/index.d.mts

@@ -1,5 +1,5 @@
 import { ThemeMode, TacTheme } from '@tac-ui/shared';
-export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-DrXQxG6N.mjs';
+export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-BRcQTpE0.mjs';
 
 /**
  * Native shadow objects for React Native (shadow style + elevation).

package/dist/native/index.d.ts

@@ -1,5 +1,5 @@
 import { ThemeMode, TacTheme } from '@tac-ui/shared';
-export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-DrXQxG6N.js';
+export { c as componentTokens, m as motionTokens, s as springConfigs, t as tacSpring } from '../motion-BRcQTpE0.js';
 
 /**
  * Native shadow objects for React Native (shadow style + elevation).

package/dist/native/index.js

@@ -49,17 +49,17 @@ var semanticTokens = {
     glassBorder: "rgba(24, 24, 27, 0.04)",
     glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
     glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
-    accentGlow: "none",
+    accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
     // ── Gradients ──
-    gradientBrand: "none",
-    gradientBrandHover: "none",
-    gradientSubtle: "none",
-    gradientAccent: "none",
-    gradientAccentVivid: "none",
-    gradientGlow: "none",
-    gradientMesh: "none",
-    gradientSurface: "none",
-    gradientGlowShadow: "none",
+    gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
+    gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
+    gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
+    gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
+    gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
+    gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
+    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%)",
+    gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
+    gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
     // ── Shadow ──
     shadowColor: "rgba(24, 24, 27, 0.05)",
     // ── Status ──
@@ -159,20 +159,20 @@ var semanticTokens = {
     gray900: "#FAFAFA",
     // ── Glass & Effects ──
     glassBg: "rgba(9, 9, 11, 0.85)",
-    glassBorder: "rgba(250, 250, 250, 0.1)",
-    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
-    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
-    accentGlow: "none",
+    glassBorder: "rgba(255, 255, 255, 0.08)",
+    glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
+    accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
     // ── Gradients ──
-    gradientBrand: "none",
-    gradientBrandHover: "none",
-    gradientSubtle: "none",
-    gradientAccent: "none",
-    gradientAccentVivid: "none",
-    gradientGlow: "none",
-    gradientMesh: "none",
-    gradientSurface: "none",
-    gradientGlowShadow: "none",
+    gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
+    gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
+    gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
+    gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
+    gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
+    gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
+    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%)",
+    gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
+    gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
     // ── Shadow ──
     shadowColor: "rgba(0, 0, 0, 0.9)",
     // ── Status ──
@@ -214,15 +214,15 @@ var semanticTokens = {
     btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
     btnDestructiveSurface: "#EF4444",
     btnDestructiveHover: "#F87171",
-    inputBg: "#27272A",
-    inputBorderRest: "#3F3F46",
-    inputBorderHover: "#52525B",
+    inputBg: "rgba(255, 255, 255, 0.04)",
+    inputBorderRest: "rgba(255, 255, 255, 0.1)",
+    inputBorderHover: "rgba(255, 255, 255, 0.16)",
     inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
     inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
     inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
-    dropdownBg: "#18181B",
-    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
-    dropdownItemHover: "#27272A",
+    dropdownBg: "rgba(24, 24, 27, 0.95)",
+    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)",
+    dropdownItemHover: "rgba(255, 255, 255, 0.06)",
     cardAccentBorder: "#3F3F46",
     cardAccentGlow: "none",
     cardAccentHoverBorder: "#52525B",
@@ -235,25 +235,26 @@ var typography = {
   fontFamily: {
     primary: "Pretendard",
     secondary: "Pretendard",
-    display: "Pretendard"
+    display: "Pretendard",
+    mono: "SF Mono"
   },
   display: {
-    lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
-    md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
-    sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
+    lg: { size: 56, weight: 700, lineHeight: 1.08, letterSpacing: -0.035 },
+    md: { size: 48, weight: 700, lineHeight: 1.08, letterSpacing: -0.03 },
+    sm: { size: 40, weight: 600, lineHeight: 1.1, letterSpacing: -0.025 }
   },
   heading: {
-    h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
-    h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
+    h1: { size: 34, weight: 700, lineHeight: 1.15, letterSpacing: -0.025 },
+    h2: { size: 28, weight: 600, lineHeight: 1.2, letterSpacing: -0.02 },
     h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
     h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
     h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
     h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
   },
   body: {
-    lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
-    md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
-    sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
+    lg: { size: 17, weight: 400, lineHeight: 1.5, letterSpacing: -0.01 },
+    md: { size: 15, weight: 400, lineHeight: 1.5, letterSpacing: -5e-3 },
+    sm: { size: 13, weight: 400, lineHeight: 1.45, letterSpacing: 0 }
   },
   caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
   fontWeight: {
@@ -298,12 +299,12 @@ var elevation = {
     glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
   },
   dark: {
-    sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
-    m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
-    lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
-    xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
-    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)",
-    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)"
+    sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
+    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)",
+    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)",
+    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)",
+    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)",
+    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)"
   }
 };
 elevation.light;
@@ -635,13 +636,9 @@ var component = {
     lg: { height: 50, paddingX: 28, paddingY: 14, fontSize: 17, borderRadius: 14, iconSize: 20 }
   },
   input: {
-    height: 44,
-    paddingX: 16,
-    paddingY: 12,
-    fontSize: 15,
-    borderRadius: 12,
-    iconSize: 18,
-    iconPadding: 42
+    sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
+    md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
+    lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
   },
   card: {
     padding: 24,

package/dist/native/index.mjs

@@ -1,5 +1,5 @@
-import { semanticTokens, chart, motion, elevation, radius, spacing, typography } from '../chunk-7I7QJ2NP.mjs';
-export { component as componentTokens, motion as motionTokens, springConfigs, tacSpring } from '../chunk-7I7QJ2NP.mjs';
+import { semanticTokens, chart, motion, elevation, radius, spacing, typography } from '../chunk-I2PXRTYK.mjs';
+export { component as componentTokens, motion as motionTokens, springConfigs, tacSpring } from '../chunk-I2PXRTYK.mjs';
 
 // src/native/shadows.ts
 var nativeShadows = {

package/dist/web/css-variables.js

@@ -49,17 +49,17 @@ var semanticTokens = {
     glassBorder: "rgba(24, 24, 27, 0.04)",
     glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
     glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
-    accentGlow: "none",
+    accentGlow: "0 0 20px rgba(88, 86, 214, 0.08)",
     // ── Gradients ──
-    gradientBrand: "none",
-    gradientBrandHover: "none",
-    gradientSubtle: "none",
-    gradientAccent: "none",
-    gradientAccentVivid: "none",
-    gradientGlow: "none",
-    gradientMesh: "none",
-    gradientSurface: "none",
-    gradientGlowShadow: "none",
+    gradientBrand: "linear-gradient(135deg, #5856D6 0%, #7A78F0 100%)",
+    gradientBrandHover: "linear-gradient(135deg, #4B49B8 0%, #5856D6 100%)",
+    gradientSubtle: "linear-gradient(180deg, rgba(88, 86, 214, 0.03) 0%, transparent 100%)",
+    gradientAccent: "linear-gradient(135deg, #5856D6 0%, #8B5CF6 100%)",
+    gradientAccentVivid: "linear-gradient(135deg, #5856D6 0%, #A855F7 50%, #EC4899 100%)",
+    gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(88, 86, 214, 0.06) 0%, transparent 70%)",
+    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%)",
+    gradientSurface: "linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%)",
+    gradientGlowShadow: "0 8px 32px rgba(88, 86, 214, 0.08)",
     // ── Shadow ──
     shadowColor: "rgba(24, 24, 27, 0.05)",
     // ── Status ──
@@ -159,20 +159,20 @@ var semanticTokens = {
     gray900: "#FAFAFA",
     // ── Glass & Effects ──
     glassBg: "rgba(9, 9, 11, 0.85)",
-    glassBorder: "rgba(250, 250, 250, 0.1)",
-    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
-    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
-    accentGlow: "none",
+    glassBorder: "rgba(255, 255, 255, 0.08)",
+    glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(255, 255, 255, 0.06)",
+    accentGlow: "0 0 24px rgba(94, 92, 230, 0.15)",
     // ── Gradients ──
-    gradientBrand: "none",
-    gradientBrandHover: "none",
-    gradientSubtle: "none",
-    gradientAccent: "none",
-    gradientAccentVivid: "none",
-    gradientGlow: "none",
-    gradientMesh: "none",
-    gradientSurface: "none",
-    gradientGlowShadow: "none",
+    gradientBrand: "linear-gradient(135deg, #5E5CE6 0%, #8B7AF0 100%)",
+    gradientBrandHover: "linear-gradient(135deg, #4E4CD4 0%, #5E5CE6 100%)",
+    gradientSubtle: "linear-gradient(180deg, rgba(94, 92, 230, 0.06) 0%, transparent 100%)",
+    gradientAccent: "linear-gradient(135deg, #5E5CE6 0%, #9B8AFF 100%)",
+    gradientAccentVivid: "linear-gradient(135deg, #5E5CE6 0%, #B07AF0 50%, #F472B6 100%)",
+    gradientGlow: "radial-gradient(ellipse at 50% 0%, rgba(94, 92, 230, 0.12) 0%, transparent 70%)",
+    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%)",
+    gradientSurface: "linear-gradient(180deg, #18181B 0%, #09090B 100%)",
+    gradientGlowShadow: "0 8px 32px rgba(94, 92, 230, 0.12)",
     // ── Shadow ──
     shadowColor: "rgba(0, 0, 0, 0.9)",
     // ── Status ──
@@ -214,15 +214,15 @@ var semanticTokens = {
     btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
     btnDestructiveSurface: "#EF4444",
     btnDestructiveHover: "#F87171",
-    inputBg: "#27272A",
-    inputBorderRest: "#3F3F46",
-    inputBorderHover: "#52525B",
+    inputBg: "rgba(255, 255, 255, 0.04)",
+    inputBorderRest: "rgba(255, 255, 255, 0.1)",
+    inputBorderHover: "rgba(255, 255, 255, 0.16)",
     inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
     inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
     inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
-    dropdownBg: "#18181B",
-    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
-    dropdownItemHover: "#27272A",
+    dropdownBg: "rgba(24, 24, 27, 0.95)",
+    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)",
+    dropdownItemHover: "rgba(255, 255, 255, 0.06)",
     cardAccentBorder: "#3F3F46",
     cardAccentGlow: "none",
     cardAccentHoverBorder: "#52525B",
@@ -319,12 +319,12 @@ var elevation = {
     glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
   },
   dark: {
-    sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
-    m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
-    lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
-    xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
-    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)",
-    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)"
+    sm: "0 1px 2px rgba(0,0,0,0.24), 0 0 0 0.5px rgba(255,255,255,0.04)",
+    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)",
+    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)",
+    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)",
+    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)",
+    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)"
   }
 };
 var zIndex = {
@@ -454,7 +454,8 @@ var typography = {
   fontFamily: {
     primary: "Pretendard",
     secondary: "Pretendard",
-    display: "Pretendard"
+    display: "Pretendard",
+    mono: "SF Mono"
   }};
 
 // src/component.ts
@@ -465,13 +466,9 @@ var component = {
     lg: { height: 50, paddingX: 28, fontSize: 17, borderRadius: 14}
   },
   input: {
-    height: 44,
-    paddingX: 16,
-    paddingY: 12,
-    fontSize: 15,
-    borderRadius: 12,
-    iconSize: 18,
-    iconPadding: 42
+    sm: { height: 32, paddingX: 12, fontSize: 13, borderRadius: 8, iconSize: 16, iconPadding: 34 },
+    md: { height: 44, paddingX: 16, fontSize: 16, borderRadius: 12, iconSize: 18, iconPadding: 42 },
+    lg: { height: 50, paddingX: 20, fontSize: 17, borderRadius: 14, iconSize: 20, iconPadding: 46 }
   },
   card: {
     padding: 24,
@@ -609,6 +606,7 @@ function generateCSSVariables(mode) {
     "--font-primary": `'${typography.fontFamily.primary}', -apple-system, BlinkMacSystemFont, system-ui, sans-serif`,
     "--font-secondary": `'${typography.fontFamily.secondary}', sans-serif`,
     "--font-display": `'${typography.fontFamily.display}', '${typography.fontFamily.primary}', sans-serif`,
+    "--font-mono": `'${typography.fontFamily.mono}', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`,
     // Colors
     "--background": colors.background,
     "--background-subtle": colors.backgroundSubtle,
@@ -802,13 +800,28 @@ function generateCSSVariables(mode) {
     "--btn-lg-radius": px(component.button.lg.borderRadius),
     "--btn-icon-size": px(component.button.md.iconSize),
     // Component: Input
-    "--input-height": rem(component.input.height),
-    "--input-px": rem(component.input.paddingX),
-    "--input-py": rem(component.input.paddingY),
-    "--input-font-size": rem(component.input.fontSize),
-    "--input-radius": px(component.input.borderRadius),
-    "--input-icon-size": px(component.input.iconSize),
-    "--input-icon-padding": rem(component.input.iconPadding),
+    "--input-sm-height": rem(component.input.sm.height),
+    "--input-sm-px": rem(component.input.sm.paddingX),
+    "--input-sm-font-size": rem(component.input.sm.fontSize),
+    "--input-sm-radius": px(component.input.sm.borderRadius),
+    "--input-sm-icon-size": px(component.input.sm.iconSize),
+    "--input-sm-icon-padding": rem(component.input.sm.iconPadding),
+    "--input-md-height": rem(component.input.md.height),
+    "--input-md-px": rem(component.input.md.paddingX),
+    "--input-md-font-size": rem(component.input.md.fontSize),
+    "--input-md-radius": px(component.input.md.borderRadius),
+    "--input-md-icon-size": px(component.input.md.iconSize),
+    "--input-md-icon-padding": rem(component.input.md.iconPadding),
+    "--input-lg-height": rem(component.input.lg.height),
+    "--input-lg-px": rem(component.input.lg.paddingX),
+    "--input-lg-font-size": rem(component.input.lg.fontSize),
+    "--input-lg-radius": px(component.input.lg.borderRadius),
+    "--input-lg-icon-size": px(component.input.lg.iconSize),
+    "--input-lg-icon-padding": rem(component.input.lg.iconPadding),
+    // Component: Input (md aliases for backward compat)
+    "--input-height": rem(component.input.md.height),
+    "--input-radius": px(component.input.md.borderRadius),
+    "--input-font-size": rem(component.input.md.fontSize),
     // Component: Card
     "--card-padding": rem(component.card.padding),
     "--card-gap": rem(component.card.gap),