@tac-ui/tokens 0.1.0 → 1.0.0

package/dist/native/index.js

@@ -0,0 +1,826 @@
+'use strict';
+
+// src/semantic.ts
+var semanticTokens = {
+  light: {
+    // ── Canvas & Surface ──
+    background: "#FAFAFA",
+    backgroundSubtle: "#F4F4F5",
+    surface: "#FFFFFF",
+    surfaceHover: "#F4F4F5",
+    surfaceBase: "#FAFAFA",
+    surfaceElevatedLow: "#FFFFFF",
+    surfaceElevatedMid: "#FFFFFF",
+    surfaceElevatedHigh: "#FFFFFF",
+    card: "#FFFFFF",
+    cardForeground: "#18181B",
+    // ── Text ──
+    foreground: "#18181B",
+    muted: "#F4F4F5",
+    mutedForeground: "#71717A",
+    // ── Brand (Ink Black) ──
+    primary: "#18181B",
+    primaryHover: "#27272A",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F4F4F5",
+    secondaryForeground: "#18181B",
+    ring: "#18181B",
+    // ── Point / Accent (Royal Indigo) ──
+    point: "#5856D6",
+    pointHover: "#4B49B8",
+    pointForeground: "#FFFFFF",
+    pointSubtle: "rgba(88, 86, 214, 0.1)",
+    // ── Border ──
+    border: "#E4E4E7",
+    input: "#E4E4E7",
+    // ── Gray Scale (Zinc) ──
+    gray50: "#FAFAFA",
+    gray100: "#F4F4F5",
+    gray200: "#E4E4E7",
+    gray300: "#D4D4D8",
+    gray400: "#A1A1AA",
+    gray500: "#71717A",
+    gray600: "#52525B",
+    gray700: "#3F3F46",
+    gray800: "#27272A",
+    gray900: "#18181B",
+    // ── Glass & Effects ──
+    glassBg: "rgba(255, 255, 255, 0.85)",
+    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",
+    // ── Gradients ──
+    gradientBrand: "none",
+    gradientBrandHover: "none",
+    gradientSubtle: "none",
+    gradientAccent: "none",
+    gradientAccentVivid: "none",
+    gradientGlow: "none",
+    gradientMesh: "none",
+    gradientSurface: "none",
+    gradientGlowShadow: "none",
+    // ── Shadow ──
+    shadowColor: "rgba(24, 24, 27, 0.05)",
+    // ── Status ──
+    success: "#166534",
+    successBg: "#DCFCE7",
+    successForeground: "#166534",
+    warning: "#854D0E",
+    warningBg: "#FEF9C3",
+    warningForeground: "#854D0E",
+    error: "#991B1B",
+    errorBg: "#FEE2E2",
+    errorForeground: "#991B1B",
+    info: "#18181B",
+    infoBg: "#F4F4F5",
+    infoForeground: "#18181B",
+    // ── Interaction States ──
+    interactiveHover: "rgba(24, 24, 27, 0.04)",
+    interactivePressed: "rgba(24, 24, 27, 0.08)",
+    interactiveFocus: "#18181B",
+    interactiveSurfaceTint: "rgba(0, 0, 0, 0.02)",
+    interactiveHoverTint: "rgba(0, 0, 0, 0.04)",
+    focusGlow: "0 0 0 3px rgba(24, 24, 27, 0.1)",
+    pointGlow: "0 0 0 2px rgba(88, 86, 214, 0.2)",
+    // ── Components ──
+    btnPrimarySurface: "#18181B",
+    btnPrimaryHover: "#27272A",
+    btnPrimaryEnergy: "0 4px 12px rgba(24, 24, 27, 0.15)",
+    btnPrimaryInset: "none",
+    btnSecondarySurface: "#F4F4F5",
+    btnSecondaryHover: "#E4E4E7",
+    btnOutlineBorder: "#D4D4D8",
+    btnOutlineBorderHover: "#A1A1AA",
+    btnOutlineHoverBg: "#F9FAFB",
+    btnGhostHover: "#F4F4F5",
+    btnPointSurface: "#5856D6",
+    btnPointBorder: "transparent",
+    btnPointHoverSurface: "#4B49B8",
+    btnPointHoverBorder: "transparent",
+    btnPointEnergy: "0 4px 12px rgba(88, 86, 214, 0.2)",
+    btnDestructiveSurface: "#DC2626",
+    btnDestructiveHover: "#B91C1C",
+    inputBg: "#F4F4F5",
+    inputBorderRest: "#D4D4D8",
+    inputBorderHover: "#A1A1AA",
+    inputHoverGlow: "0 0 0 2px rgba(0, 0, 0, 0.04)",
+    inputFocusGlow: "0 0 0 2px rgba(24, 24, 27, 0.15)",
+    inputErrorGlow: "0 0 0 2px #FEE2E2",
+    dropdownBg: "#FFFFFF",
+    dropdownShadow: "0 20px 25px -5px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(24, 24, 27, 0.03)",
+    dropdownItemHover: "#F4F4F5",
+    cardAccentBorder: "#E4E4E7",
+    cardAccentGlow: "none",
+    cardAccentHoverBorder: "#D4D4D8",
+    cardAccentHoverGlow: "0 8px 24px rgba(24, 24, 27, 0.06)"
+  },
+  dark: {
+    // ── Canvas & Surface ──
+    background: "#09090B",
+    backgroundSubtle: "#18181B",
+    surface: "#27272A",
+    surfaceHover: "#3F3F46",
+    surfaceBase: "#09090B",
+    surfaceElevatedLow: "#18181B",
+    surfaceElevatedMid: "#27272A",
+    surfaceElevatedHigh: "#3F3F46",
+    card: "#18181B",
+    cardForeground: "#FAFAFA",
+    // ── Text ──
+    foreground: "#FAFAFA",
+    muted: "#27272A",
+    mutedForeground: "#A1A1AA",
+    // ── Brand (Inverted — Near-White) ──
+    primary: "#FAFAFA",
+    primaryHover: "#E4E4E7",
+    primaryForeground: "#18181B",
+    secondary: "#27272A",
+    secondaryForeground: "#FAFAFA",
+    ring: "#FAFAFA",
+    // ── Point / Accent (Royal Indigo) ──
+    point: "#5E5CE6",
+    pointHover: "#7A78F0",
+    pointForeground: "#FFFFFF",
+    pointSubtle: "rgba(94, 92, 230, 0.15)",
+    // ── Border ──
+    border: "#3F3F46",
+    input: "#3F3F46",
+    // ── Gray Scale (Zinc Inverted) ──
+    gray50: "#09090B",
+    gray100: "#18181B",
+    gray200: "#27272A",
+    gray300: "#3F3F46",
+    gray400: "#52525B",
+    gray500: "#71717A",
+    gray600: "#A1A1AA",
+    gray700: "#D4D4D8",
+    gray800: "#E4E4E7",
+    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",
+    // ── Gradients ──
+    gradientBrand: "none",
+    gradientBrandHover: "none",
+    gradientSubtle: "none",
+    gradientAccent: "none",
+    gradientAccentVivid: "none",
+    gradientGlow: "none",
+    gradientMesh: "none",
+    gradientSurface: "none",
+    gradientGlowShadow: "none",
+    // ── Shadow ──
+    shadowColor: "rgba(0, 0, 0, 0.9)",
+    // ── Status ──
+    success: "#4ADE80",
+    successBg: "rgba(74, 222, 128, 0.15)",
+    successForeground: "#4ADE80",
+    warning: "#FACC15",
+    warningBg: "rgba(250, 204, 21, 0.15)",
+    warningForeground: "#FACC15",
+    error: "#F87171",
+    errorBg: "rgba(248, 113, 113, 0.15)",
+    errorForeground: "#F87171",
+    info: "#FAFAFA",
+    infoBg: "rgba(250, 250, 250, 0.15)",
+    infoForeground: "#FAFAFA",
+    // ── Interaction States ──
+    interactiveHover: "rgba(250, 250, 250, 0.08)",
+    interactivePressed: "rgba(250, 250, 250, 0.12)",
+    interactiveFocus: "#FAFAFA",
+    interactiveSurfaceTint: "rgba(255, 255, 255, 0.04)",
+    interactiveHoverTint: "rgba(255, 255, 255, 0.08)",
+    focusGlow: "0 0 0 3px rgba(250, 250, 250, 0.15)",
+    pointGlow: "0 0 0 2px rgba(94, 92, 230, 0.3)",
+    // ── Components ──
+    btnPrimarySurface: "#FAFAFA",
+    btnPrimaryHover: "#E4E4E7",
+    btnPrimaryEnergy: "0 4px 16px rgba(250, 250, 250, 0.1)",
+    btnPrimaryInset: "none",
+    btnSecondarySurface: "#27272A",
+    btnSecondaryHover: "#3F3F46",
+    btnOutlineBorder: "#3F3F46",
+    btnOutlineBorderHover: "#52525B",
+    btnOutlineHoverBg: "#18181B",
+    btnGhostHover: "#27272A",
+    btnPointSurface: "#5E5CE6",
+    btnPointBorder: "transparent",
+    btnPointHoverSurface: "#7A78F0",
+    btnPointHoverBorder: "transparent",
+    btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
+    btnDestructiveSurface: "#EF4444",
+    btnDestructiveHover: "#F87171",
+    inputBg: "#27272A",
+    inputBorderRest: "#3F3F46",
+    inputBorderHover: "#52525B",
+    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",
+    cardAccentBorder: "#3F3F46",
+    cardAccentGlow: "none",
+    cardAccentHoverBorder: "#52525B",
+    cardAccentHoverGlow: "0 8px 24px rgba(0, 0, 0, 0.8)"
+  }
+};
+
+// src/typography.ts
+var typography = {
+  fontFamily: {
+    primary: "Pretendard",
+    secondary: "Pretendard",
+    display: "Pretendard"
+  },
+  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 }
+  },
+  heading: {
+    h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
+    h2: { size: 28, weight: 600, lineHeight: 1.22, 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 }
+  },
+  caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
+  fontWeight: {
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  }
+};
+
+// src/spacing.ts
+var spacing = {
+  "2xs": 2,
+  xs: 4,
+  sm: 8,
+  m: 16,
+  lg: 24,
+  xl: 40,
+  "2xl": 56,
+  "3xl": 80
+};
+var radius = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  m: 12,
+  lg: 16,
+  xl: 20,
+  "2xl": 24,
+  pill: 9999
+};
+
+// src/elevation.ts
+var elevation = {
+  light: {
+    sm: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+    m: "0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03)",
+    lg: "0 8px 24px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04)",
+    xl: "0 16px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04)",
+    glass: "0 8px 32px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02)",
+    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)"
+  }
+};
+elevation.light;
+
+// src/motion.ts
+var TAC_SPRING_DEFAULT = { type: "spring", stiffness: 300, damping: 35, mass: 1 };
+var TAC_SPRING_LIGHT = { type: "spring", stiffness: 350, damping: 35, mass: 0.5 };
+var motion = {
+  duration: {
+    instant: 80,
+    fast: 150,
+    normal: 220,
+    slow: 320,
+    complex: 450
+  },
+  easing: {
+    /** Slight overshoot with smooth natural deceleration. */
+    standard: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    /** Exit easing — fast acceleration, abrupt departure. */
+    easeIn: "cubic-bezier(0.42, 0, 1, 1)",
+    /** Entrance easing — gentle deceleration without overshoot. */
+    easeOut: "cubic-bezier(0, 0, 0.58, 1)",
+    /** Symmetric ease — smooth in both directions. */
+    easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)",
+    /** Restrained overshoot — for toggles, switches, confirmatory feedback. */
+    bounce: "cubic-bezier(0.34, 1.3, 0.64, 1)",
+    /** Subtle spring feel — deliberate physical presence. */
+    spring: "cubic-bezier(0.22, 1.1, 0.36, 1)",
+    /** Subtle rubber-band — elastic resistance with quick snap back. */
+    elastic: "cubic-bezier(0.68, -0.1, 0.265, 1.1)"
+  },
+  /** Framer Motion spring presets — tuned with higher damping for natural deceleration. */
+  spring: {
+    /** Quick interactive feedback — subtle and responsive. */
+    snappy: { type: "spring", stiffness: 260, damping: 32 },
+    /** Smooth state changes — gentle spring resolution. */
+    gentle: { type: "spring", stiffness: 180, damping: 30 },
+    /** Toggle/switch feel — restrained with minimal bounce. */
+    bouncy: { type: "spring", stiffness: 260, damping: 30 },
+    /** Large layout shifts — deliberate mass with controlled deceleration. */
+    slow: { type: "spring", stiffness: 140, damping: 28 },
+    /** Press/release with life — elastic resistance, mass gives it weight. */
+    elastic: { type: "spring", stiffness: 220, damping: 28, mass: 0.8 },
+    /** Elements appearing — spring resolves cleanly with organic arrival. */
+    entrance: { type: "spring", stiffness: 180, damping: 28, mass: 0.9 }
+  },
+  /** Mass-differentiated spring configs — tuned higher damping for smooth deceleration. */
+  tacSpring: {
+    default: TAC_SPRING_DEFAULT,
+    light: TAC_SPRING_LIGHT,
+    heavy: { type: "spring", stiffness: 250, damping: 38, mass: 1.5 },
+    magnetic: { type: "spring", stiffness: 400, damping: 40, mass: 0.8 },
+    entrance: { type: "spring", stiffness: 220, damping: 32, mass: 1.2 }
+  },
+  /** Standard animation keyframe presets for reuse across components. */
+  keyframes: {
+    fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
+    fadeOut: { from: { opacity: "1" }, to: { opacity: "0" } },
+    /** Blur entrance — element fades in from blurry with subtle upward spring motion. */
+    blurFadeIn: {
+      from: { opacity: "0", filter: "blur(4px)", transform: "translateY(4px)" },
+      to: { opacity: "1", filter: "blur(0px)", transform: "translateY(0)" }
+    },
+    /** Blur scale entrance — deblurs while gently scaling up from slight compression. */
+    blurScaleIn: {
+      from: { opacity: "0", filter: "blur(3px)", transform: "scale(0.98)" },
+      to: { opacity: "1", filter: "blur(0px)", transform: "scale(1)" }
+    },
+    /** Slide entrance from below — element springs up from offset position. */
+    slideInUp: {
+      from: { opacity: "0", transform: "translateY(5px)" },
+      to: { opacity: "1", transform: "translateY(0)" }
+    },
+    /** Slide entrance from above — element springs down from offset position. */
+    slideInDown: {
+      from: { opacity: "0", transform: "translateY(-5px)" },
+      to: { opacity: "1", transform: "translateY(0)" }
+    },
+    /** Slide entrance from left — element springs in from offset. */
+    slideInLeft: {
+      from: { opacity: "0", transform: "translateX(-5px)" },
+      to: { opacity: "1", transform: "translateX(0)" }
+    },
+    /** Slide entrance from right — element springs in from offset. */
+    slideInRight: {
+      from: { opacity: "0", transform: "translateX(5px)" },
+      to: { opacity: "1", transform: "translateX(0)" }
+    },
+    /** Scale entrance — element inflates from slight compression. */
+    scaleIn: { from: { opacity: "0", transform: "scale(0.98)" }, to: { opacity: "1", transform: "scale(1)" } },
+    scaleOut: { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(0.98)" } },
+    /** Zoom entrance — element arrives from meaningful distance, not just nearby. */
+    zoomIn: { from: { opacity: "0", transform: "scale(0.92)" }, to: { opacity: "1", transform: "scale(1)" } },
+    /** Press feedback — subtle scale to confirm tap/click with physical weight. */
+    pressDown: { from: { transform: "scale(1)" }, to: { transform: "scale(0.98)" } },
+    /** Press keyframes — clean squish held at destination. */
+    elasticPress: {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(0.98)" },
+      "100%": { transform: "scale(0.98)" }
+    },
+    /** Release keyframes — spring overshoots slightly then resolves to rest. */
+    elasticRelease: {
+      "0%": { transform: "scale(0.98)" },
+      "50%": { transform: "scale(1.005)" },
+      "100%": { transform: "scale(1)" }
+    },
+    /** Lift — subtle elevation shift on hover, element has mass. */
+    liftUp: { from: { transform: "translateY(0)" }, to: { transform: "translateY(-1px)" } },
+    /** Glow pulse — ambient glow to indicate active state. */
+    glowPulse: {
+      "0%, 100%": { boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)" },
+      "50%": { boxShadow: "0 0 12px 2px color-mix(in srgb, var(--point) 20%, transparent)" }
+    },
+    shimmer: {
+      "0%": { backgroundPosition: "-200% 0" },
+      "100%": { backgroundPosition: "200% 0" }
+    },
+    gradientShimmer: {
+      "0%": { backgroundPosition: "0% 50%" },
+      "50%": { backgroundPosition: "100% 50%" },
+      "100%": { backgroundPosition: "0% 50%" }
+    },
+    /** Gradient glow — soft glow for decorative emphasis. */
+    gradientGlow: {
+      "0%, 100%": { boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)" },
+      "50%": { boxShadow: "0 0 16px 3px color-mix(in srgb, var(--point) 15%, transparent)" }
+    },
+    /** Spotlight pulse — radial glow that breathes gently. */
+    spotlightPulse: {
+      "0%, 100%": { opacity: "0" },
+      "50%": { opacity: "1" }
+    },
+    spin: { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } },
+    pulse: { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.5" } },
+    bounce: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-2px)" } },
+    /** Float — gentle hovering motion with spring-like rhythm. */
+    float: {
+      "0%, 100%": { transform: "translateY(0)" },
+      "50%": { transform: "translateY(-2px)" }
+    }
+  },
+  /** Glow animation configuration for border glow effects. */
+  glow: {
+    /** Rotation speed in seconds for the border glow sweep. */
+    rotationSpeed: { idle: 3, focused: 1.5 },
+    /** Blur radius in px applied to the glow trail. */
+    blur: { idle: 8, focused: 16 },
+    /** Opacity of the glow sweep. */
+    opacity: { idle: 0.3, focused: 0.6 },
+    /** Conic gradient color stop percentages. */
+    spread: { transparent: 25, start: 40, peak: 50, end: 60, fadeOut: 75 }
+  },
+  /** Layout morphing spring config — for FLIP transitions between components. */
+  morph: {
+    /** Spring config for morph transitions — references tacSpring.default. */
+    spring: TAC_SPRING_DEFAULT,
+    /** Faster variant for small elements. */
+    springFast: { type: "spring", stiffness: 450, damping: 35, mass: 0.8 }
+  }
+};
+var tacSpring = motion.tacSpring;
+var springConfigs = {
+  default: { stiffness: 300, damping: 35, mass: 1 },
+  snappy: { stiffness: 260, damping: 32, mass: 1 },
+  gentle: { stiffness: 180, damping: 30, mass: 1 },
+  bouncy: { stiffness: 260, damping: 30, mass: 1 },
+  magnetic: { stiffness: 400, damping: 40, mass: 0.8 },
+  entrance: { stiffness: 180, damping: 28, mass: 0.9 },
+  light: { stiffness: 350, damping: 35, mass: 0.5 },
+  heavy: { stiffness: 250, damping: 38, mass: 1.5 },
+  elastic: { stiffness: 220, damping: 28, mass: 0.8 },
+  slow: { stiffness: 140, damping: 28, mass: 1 }
+};
+
+// src/chart.ts
+var chart = {
+  light: {
+    colors: [
+      "#18181B",
+      // chart-1: Ink (Primary)
+      "#5856D6",
+      // chart-2: Royal Indigo (Point)
+      "#854D0E",
+      // chart-3: Dark Gold
+      "#0F766E",
+      // chart-4: Deep Teal (cool contrast)
+      "#71717A",
+      // chart-5: Zinc 500 (Neutral)
+      "#4B49B8",
+      // chart-6: Deep Indigo
+      "#44403C",
+      // chart-7: Stone 700 (Warm gray)
+      "#D4D4D8"
+      // chart-8: Zinc 300 (Light fill)
+    ],
+    grid: "rgba(24, 24, 27, 0.04)",
+    axis: "rgba(24, 24, 27, 0.08)",
+    label: "#71717A",
+    tooltipBg: "#FFFFFF"
+  },
+  dark: {
+    colors: [
+      "#FAFAFA",
+      // chart-1: Near-white (Primary)
+      "#5E5CE6",
+      // chart-2: Royal Indigo (Point)
+      "#FCD34D",
+      // chart-3: Amber 300 (Gold)
+      "#2DD4BF",
+      // chart-4: Teal 400 (cool contrast)
+      "#A1A1AA",
+      // chart-5: Zinc 400 (Neutral)
+      "#7A78F0",
+      // chart-6: Light Indigo
+      "#78716C",
+      // chart-7: Stone 500 (Warm gray)
+      "#52525B"
+      // chart-8: Zinc 600 (Deep fill)
+    ],
+    grid: "rgba(255, 255, 255, 0.04)",
+    axis: "rgba(255, 255, 255, 0.06)",
+    label: "#A1A1AA",
+    tooltipBg: "#18181B"
+  },
+  lineWidth: 1.5,
+  dotSize: 2.5,
+  barRadius: 4,
+  areaOpacity: 0.08
+};
+
+// src/native/shadows.ts
+var nativeShadows = {
+  light: {
+    sm: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.04,
+      shadowRadius: 3,
+      elevation: 1
+    },
+    m: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.05,
+      shadowRadius: 12,
+      elevation: 3
+    },
+    lg: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.06,
+      shadowRadius: 24,
+      elevation: 6
+    },
+    xl: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 16 },
+      shadowOpacity: 0.08,
+      shadowRadius: 40,
+      elevation: 9
+    },
+    glass: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.05,
+      shadowRadius: 32,
+      elevation: 4
+    },
+    glassLg: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 12 },
+      shadowOpacity: 0.08,
+      shadowRadius: 48,
+      elevation: 6
+    }
+  },
+  dark: {
+    sm: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+      elevation: 1
+    },
+    m: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 12,
+      elevation: 3
+    },
+    lg: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.2,
+      shadowRadius: 24,
+      elevation: 6
+    },
+    xl: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 12 },
+      shadowOpacity: 0.22,
+      shadowRadius: 32,
+      elevation: 9
+    },
+    glass: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.18,
+      shadowRadius: 12,
+      elevation: 3
+    },
+    glassLg: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 20,
+      elevation: 5
+    }
+  }
+};
+
+// src/component.ts
+var component = {
+  button: {
+    sm: { height: 32, paddingX: 16, paddingY: 6, fontSize: 13, borderRadius: 8, iconSize: 16 },
+    md: { height: 44, paddingX: 20, paddingY: 10, fontSize: 15, borderRadius: 12, iconSize: 18 },
+    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
+  },
+  card: {
+    padding: 24,
+    gap: 16,
+    borderRadius: 16,
+    titleSize: 17,
+    bodySize: 15
+  },
+  badge: {
+    paddingX: 12,
+    paddingY: 6,
+    fontSize: 12,
+    fontWeight: 500,
+    borderRadius: 9999
+  },
+  checkbox: {
+    wrapperPaddingX: 16,
+    wrapperPaddingY: 10,
+    wrapperRadius: 10,
+    gap: 12,
+    size: 22,
+    borderRadius: 6,
+    borderWidth: 1.5,
+    iconSize: 14,
+    labelSize: 15
+  },
+  radio: {
+    wrapperPaddingX: 16,
+    wrapperPaddingY: 10,
+    wrapperRadius: 10,
+    gap: 12,
+    size: 22,
+    borderWidth: 1.5,
+    checkedBorderWidth: 6,
+    labelSize: 15
+  },
+  switch: {
+    width: 51,
+    height: 31,
+    thumbSize: 27,
+    thumbOffset: 2,
+    thumbTranslateOn: 22,
+    thumbTranslateOff: 2
+  },
+  chip: {
+    paddingX: 16,
+    paddingY: 8,
+    fontSize: 13,
+    borderRadius: 9999,
+    iconSize: 14,
+    iconPaddingX: 12
+  },
+  tabs: {
+    primary: {
+      paddingX: 20,
+      paddingY: 12,
+      fontSize: 14,
+      indicatorHeight: 2
+    },
+    secondary: {
+      paddingX: 20,
+      paddingY: 8,
+      fontSize: 13,
+      containerPadding: 4,
+      containerRadius: 10,
+      itemRadius: 8
+    }
+  },
+  slider: {
+    trackHeight: 4,
+    thumbSize: 28,
+    thumbBorderWidth: 0
+  },
+  tooltip: {
+    simple: { paddingX: 14, paddingY: 8, fontSize: 13, borderRadius: 10 },
+    rich: { paddingX: 16, paddingY: 10, maxWidth: 240, borderRadius: 10 },
+    delay: 150
+  },
+  avatar: {
+    sm: { size: 28, fontSize: 11 },
+    md: { size: 36, fontSize: 14 },
+    lg: { size: 48, fontSize: 18 },
+    xl: { size: 64, fontSize: 24 },
+    statusDot: 10,
+    statusBorder: 2
+  },
+  divider: {
+    thickness: 1,
+    thickThickness: 1,
+    insetMargin: 64,
+    labelSize: 12
+  },
+  progress: {
+    linear: { height: 6, borderRadius: 9999 },
+    circular: { strokeWidth: 4, textSize: 14 }
+  },
+  snackbar: {
+    paddingTop: 16,
+    paddingRight: 18,
+    paddingBottom: 16,
+    paddingLeft: 22,
+    borderRadius: 12,
+    gap: 12,
+    iconSize: 18,
+    messageSize: 14,
+    actionPaddingX: 14,
+    actionPaddingY: 6,
+    actionRadius: 8,
+    actionSize: 13
+  },
+  dialog: {
+    width: 320,
+    borderRadius: 14,
+    headerPaddingX: 24,
+    headerPaddingY: 20,
+    footerPaddingX: 24,
+    footerPaddingY: 20,
+    titleSize: 17,
+    descSize: 13,
+    footerGap: 8
+  },
+  animatedToggle: {
+    size: 40,
+    borderRadius: 10,
+    iconSize: 20
+  }
+};
+
+// src/native/index.ts
+function buildNativeTheme(mode) {
+  const colors = semanticTokens[mode];
+  const chartTokens = chart[mode];
+  return {
+    mode,
+    colors: { ...colors },
+    typography: {
+      fontFamily: typography.fontFamily,
+      display: typography.display,
+      heading: typography.heading,
+      body: typography.body,
+      caption: typography.caption,
+      fontWeight: typography.fontWeight
+    },
+    spacing: { ...spacing },
+    radius: { ...radius },
+    elevation: { ...elevation[mode] },
+    motion: {
+      duration: { ...motion.duration },
+      easing: {
+        standard: motion.easing.standard,
+        easeIn: motion.easing.easeIn,
+        easeOut: motion.easing.easeOut,
+        easeInOut: motion.easing.easeInOut,
+        bounce: motion.easing.bounce,
+        spring: motion.easing.spring,
+        elastic: motion.easing.elastic
+      }
+    },
+    chart: {
+      colors: [...chartTokens.colors],
+      grid: chartTokens.grid,
+      axis: chartTokens.axis,
+      label: chartTokens.label,
+      tooltipBg: chartTokens.tooltipBg,
+      lineWidth: chart.lineWidth,
+      dotSize: chart.dotSize,
+      barRadius: chart.barRadius,
+      areaOpacity: chart.areaOpacity
+    }
+  };
+}
+var lightTheme = buildNativeTheme("light");
+var darkTheme = buildNativeTheme("dark");
+
+exports.buildNativeTheme = buildNativeTheme;
+exports.componentTokens = component;
+exports.darkTheme = darkTheme;
+exports.lightTheme = lightTheme;
+exports.motionTokens = motion;
+exports.nativeShadows = nativeShadows;
+exports.springConfigs = springConfigs;
+exports.tacSpring = tacSpring;