@titan-design/react-ui 0.2.7 → 0.4.0

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, ViewProps } from 'react-native';
 
 /**
  * Elevation System
@@ -866,6 +866,23 @@ declare function getSemanticColors(mode: ThemeMode): {
  */
 
 declare const lightThemeCSSVars: {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -906,8 +923,73 @@ declare const lightThemeCSSVars: {
     readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
     readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
     readonly '--color-divider': "#E8E9EB";
+    readonly '--color-brand-primary-hover': "#F56C00";
+    readonly '--color-brand-primary-active': "#E06D10";
+    readonly '--color-brand-secondary-hover': "#39617A";
+    readonly '--color-brand-secondary-active': "#32556D";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.12)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
+    readonly '--color-result-neutral': "#6B7280";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#3832A0";
+    readonly '--color-surface-overlay': "#FFFFFF";
+    readonly '--color-surface-input': "#FAFAFA";
+    readonly '--color-border-input': "#D1D5DB";
+    readonly '--color-border-input-hover': "#9CA3AF";
+    readonly '--color-border-input-focus': "#5048E5";
+    readonly '--color-border-input-error': "#D14343";
+    readonly '--color-interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
+    readonly '--color-avatar-background': "#6B7280";
+    readonly '--color-avatar-text': "#FFFFFF";
 };
 declare const darkThemeCSSVars: {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -948,8 +1030,73 @@ declare const darkThemeCSSVars: {
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
     readonly '--color-divider': "#1F1F1F";
+    readonly '--color-brand-primary-hover': "#FF8500";
+    readonly '--color-brand-primary-active': "#FF9630";
+    readonly '--color-brand-secondary-hover': "#557488";
+    readonly '--color-brand-secondary-active': "#678498";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.16)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
+    readonly '--color-result-neutral': "#9CA3AF";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#60A5FA";
+    readonly '--color-surface-overlay': "#191919";
+    readonly '--color-surface-input': "#191919";
+    readonly '--color-border-input': "#4B5563";
+    readonly '--color-border-input-hover': "#6B7280";
+    readonly '--color-border-input-focus': "#828DF8";
+    readonly '--color-border-input-error': "#EF4444";
+    readonly '--color-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
+    readonly '--color-avatar-background': "#4B5563";
+    readonly '--color-avatar-text': "#FFFFFF";
 };
 declare function getThemeCSSVars(mode: ThemeMode): {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -990,7 +1137,72 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
     readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
     readonly '--color-divider': "#E8E9EB";
+    readonly '--color-brand-primary-hover': "#F56C00";
+    readonly '--color-brand-primary-active': "#E06D10";
+    readonly '--color-brand-secondary-hover': "#39617A";
+    readonly '--color-brand-secondary-active': "#32556D";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.12)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.12)";
+    readonly '--color-result-neutral': "#6B7280";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#3832A0";
+    readonly '--color-surface-overlay': "#FFFFFF";
+    readonly '--color-surface-input': "#FAFAFA";
+    readonly '--color-border-input': "#D1D5DB";
+    readonly '--color-border-input-hover': "#9CA3AF";
+    readonly '--color-border-input-focus': "#5048E5";
+    readonly '--color-border-input-error': "#D14343";
+    readonly '--color-interactive-disabled-text': "rgba(55, 65, 81, 0.26)";
+    readonly '--color-avatar-background': "#6B7280";
+    readonly '--color-avatar-text': "#FFFFFF";
 } | {
+    readonly '--color-brand-primary-rgb': "255, 121, 0";
+    readonly '--color-brand-secondary-rgb': "64, 109, 135";
+    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-status-error-rgb': "209, 67, 67";
+    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-info-rgb': "33, 150, 243";
+    readonly '--color-background-base-rgb': "16, 16, 16";
+    readonly '--font-family-sans': "'Inter'";
+    readonly '--font-family-body': "'Nunito Sans'";
+    readonly '--font-family-heading': "'Space Grotesk'";
+    readonly '--font-family-mono': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace";
+    readonly '--ease-out': "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly '--ease-in-out': "cubic-bezier(0.65, 0, 0.35, 1)";
+    readonly '--ease-spring': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly '--duration-fast': "150ms";
+    readonly '--duration-normal': "250ms";
+    readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
     readonly '--color-brand-primary-light': "#FF9630";
     readonly '--color-brand-primary-dark': "#D0620C";
@@ -1031,6 +1243,54 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
     readonly '--color-divider': "#1F1F1F";
+    readonly '--color-brand-primary-hover': "#FF8500";
+    readonly '--color-brand-primary-active': "#FF9630";
+    readonly '--color-brand-secondary-hover': "#557488";
+    readonly '--color-brand-secondary-active': "#678498";
+    readonly '--color-status-success-light': "#43C6B7";
+    readonly '--color-status-success-dark': "#0E8074";
+    readonly '--color-status-error-light': "#DA6868";
+    readonly '--color-status-error-dark': "#922E2E";
+    readonly '--color-status-warning-light': "#FFBF4C";
+    readonly '--color-status-warning-dark': "#B27B16";
+    readonly '--color-status-info-light': "#64B6F7";
+    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-on-status-success': "#FFFFFF";
+    readonly '--color-on-status-error': "#FFFFFF";
+    readonly '--color-on-status-warning': "#FFFFFF";
+    readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-result-improve': "#4caf50";
+    readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
+    readonly '--color-result-improve-dark': "#248a24";
+    readonly '--color-result-degrade': "#ef5350";
+    readonly '--color-result-degrade-light': "rgba(239, 83, 80, 0.16)";
+    readonly '--color-result-degrade-dark': "#b30000";
+    readonly '--color-result-inconclusive': "#9E9A97";
+    readonly '--color-result-inconclusive-light': "rgba(158, 154, 151, 0.16)";
+    readonly '--color-result-neutral': "#9CA3AF";
+    readonly '--color-on-result-improve': "#FFFFFF";
+    readonly '--color-on-result-degrade': "#FFFFFF";
+    readonly '--color-on-result-inconclusive': "#FFFFFF";
+    readonly '--color-data-1': "#1965B0";
+    readonly '--color-data-2': "#4EB265";
+    readonly '--color-data-3': "#F7F056";
+    readonly '--color-data-4': "#DC050C";
+    readonly '--color-data-5': "#882E72";
+    readonly '--color-data-6': "#F4A736";
+    readonly '--color-data-7': "#7BAFDE";
+    readonly '--color-data-8': "#90C987";
+    readonly '--color-data-9': "#CAACCB";
+    readonly '--color-data-10': "#EE8026";
+    readonly '--color-text-link-hover': "#60A5FA";
+    readonly '--color-surface-overlay': "#191919";
+    readonly '--color-surface-input': "#191919";
+    readonly '--color-border-input': "#4B5563";
+    readonly '--color-border-input-hover': "#6B7280";
+    readonly '--color-border-input-focus': "#828DF8";
+    readonly '--color-border-input-error': "#EF4444";
+    readonly '--color-interactive-disabled-text': "rgba(255, 255, 255, 0.26)";
+    readonly '--color-avatar-background': "#4B5563";
+    readonly '--color-avatar-text': "#FFFFFF";
 };
 declare const gluestackConfig: {
     readonly tokens: {
@@ -1355,6 +1615,32 @@ declare function validateCssPropertyManifest(candidate: unknown): ManifestValida
 /** Type guard variant of validateCssPropertyManifest for use in narrowing contexts. */
 declare function isCssPropertyManifest(candidate: unknown): candidate is CssPropertyManifest;
 
+type ThemeProviderMode = 'dark' | 'light';
+interface ThemeProviderProps extends ViewProps {
+    /** Theme mode to register. Mobile is dark-only today; defaults to `dark`. */
+    mode?: ThemeProviderMode;
+}
+/**
+ * Wrap the app root so descendant titan components' `--color-*` className tokens
+ * resolve on native. Fills its parent (`flex: 1`) by default; pass `style` to
+ * override. On web it is harmless (the dashboard already loads `global.css`).
+ */
+declare function ThemeProvider({ mode, style, children, ...props }: ThemeProviderProps): React.JSX.Element;
+
+type ColorToken = keyof ReturnType<typeof getSemanticColors>;
+/**
+ * Resolve a semantic color token for an inline style where a nativewind
+ * className can't apply — gradients (`backgroundImage`), per-edge borders
+ * (`borderTopColor`, …), SVG attributes, and conditional hex/token mixes.
+ *
+ * The companion to className color tokens: on **web** it returns the CSS
+ * variable (`var(--color-…)`), so the dashboard's light/dark switching keeps
+ * working exactly as `global.css` intends; on **native** it returns the
+ * resolved hex from `getSemanticColors` (mobile is dark-only). This is why
+ * these spots stay theme-correct on web while also rendering on-device.
+ */
+declare function resolveColor(token: ColorToken, mode?: ThemeMode): string;
+
 interface ThemePresetColors {
     'brand-primary'?: string;
     'brand-primary-light'?: string;
@@ -1440,4 +1726,4 @@ declare const defaultPreset: ThemePreset;
  */
 declare const audiobookPreset: ThemePreset;
 
-export { type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ManifestValidationResult, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors, validateCssPropertyManifest };
+export { type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ManifestValidationResult, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors, validateCssPropertyManifest };

package/dist/theme/index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var reactNative = require('react-native');
+var nativewind = require('nativewind');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
@@ -729,6 +731,28 @@ function getSemanticColors(mode) {
 }
 
 // src/theme/config.ts
+var themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  "--color-brand-primary-rgb": "255, 121, 0",
+  "--color-brand-secondary-rgb": "64, 109, 135",
+  "--color-status-success-rgb": "20, 184, 166",
+  "--color-status-error-rgb": "209, 67, 67",
+  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-info-rgb": "33, 150, 243",
+  "--color-background-base-rgb": "16, 16, 16",
+  // Font families
+  "--font-family-sans": "'Inter'",
+  "--font-family-body": "'Nunito Sans'",
+  "--font-family-heading": "'Space Grotesk'",
+  "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+  // Animation tokens
+  "--ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "--duration-fast": "150ms",
+  "--duration-normal": "250ms",
+  "--duration-slow": "400ms"
+};
 var lightThemeCSSVars = {
   "--color-brand-primary": semanticColorsLight["brand-primary"],
   "--color-brand-primary-light": semanticColorsLight["brand-primary-light"],
@@ -769,7 +793,56 @@ var lightThemeCSSVars = {
   "--color-interactive-active": semanticColorsLight["interactive-active"],
   "--color-interactive-selected": semanticColorsLight["interactive-selected"],
   "--color-interactive-disabled": semanticColorsLight["interactive-disabled"],
-  "--color-divider": semanticColorsLight["divider"]
+  "--color-divider": semanticColorsLight["divider"],
+  "--color-brand-primary-hover": semanticColorsLight["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsLight["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsLight["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsLight["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsLight["status-success-light"],
+  "--color-status-success-dark": semanticColorsLight["status-success-dark"],
+  "--color-status-error-light": semanticColorsLight["status-error-light"],
+  "--color-status-error-dark": semanticColorsLight["status-error-dark"],
+  "--color-status-warning-light": semanticColorsLight["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsLight["status-warning-dark"],
+  "--color-status-info-light": semanticColorsLight["status-info-light"],
+  "--color-status-info-dark": semanticColorsLight["status-info-dark"],
+  "--color-on-status-success": semanticColorsLight["on-status-success"],
+  "--color-on-status-error": semanticColorsLight["on-status-error"],
+  "--color-on-status-warning": semanticColorsLight["on-status-warning"],
+  "--color-on-status-info": semanticColorsLight["on-status-info"],
+  "--color-result-improve": semanticColorsLight["result-improve"],
+  "--color-result-improve-light": semanticColorsLight["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
+  "--color-result-degrade": semanticColorsLight["result-degrade"],
+  "--color-result-degrade-light": semanticColorsLight["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsLight["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsLight["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsLight["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsLight["result-neutral"],
+  "--color-on-result-improve": semanticColorsLight["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsLight["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsLight["on-result-inconclusive"],
+  "--color-data-1": semanticColorsLight["data-1"],
+  "--color-data-2": semanticColorsLight["data-2"],
+  "--color-data-3": semanticColorsLight["data-3"],
+  "--color-data-4": semanticColorsLight["data-4"],
+  "--color-data-5": semanticColorsLight["data-5"],
+  "--color-data-6": semanticColorsLight["data-6"],
+  "--color-data-7": semanticColorsLight["data-7"],
+  "--color-data-8": semanticColorsLight["data-8"],
+  "--color-data-9": semanticColorsLight["data-9"],
+  "--color-data-10": semanticColorsLight["data-10"],
+  "--color-text-link-hover": semanticColorsLight["text-link-hover"],
+  "--color-surface-overlay": semanticColorsLight["surface-overlay"],
+  "--color-surface-input": semanticColorsLight["surface-input"],
+  "--color-border-input": semanticColorsLight["border-input"],
+  "--color-border-input-hover": semanticColorsLight["border-input-hover"],
+  "--color-border-input-focus": semanticColorsLight["border-input-focus"],
+  "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsLight["avatar-background"],
+  "--color-avatar-text": semanticColorsLight["avatar-text"],
+  ...themeIndependentCSSVars
 };
 var darkThemeCSSVars = {
   "--color-brand-primary": semanticColorsDark["brand-primary"],
@@ -811,7 +884,56 @@ var darkThemeCSSVars = {
   "--color-interactive-active": semanticColorsDark["interactive-active"],
   "--color-interactive-selected": semanticColorsDark["interactive-selected"],
   "--color-interactive-disabled": semanticColorsDark["interactive-disabled"],
-  "--color-divider": semanticColorsDark["divider"]
+  "--color-divider": semanticColorsDark["divider"],
+  "--color-brand-primary-hover": semanticColorsDark["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsDark["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsDark["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsDark["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsDark["status-success-light"],
+  "--color-status-success-dark": semanticColorsDark["status-success-dark"],
+  "--color-status-error-light": semanticColorsDark["status-error-light"],
+  "--color-status-error-dark": semanticColorsDark["status-error-dark"],
+  "--color-status-warning-light": semanticColorsDark["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsDark["status-warning-dark"],
+  "--color-status-info-light": semanticColorsDark["status-info-light"],
+  "--color-status-info-dark": semanticColorsDark["status-info-dark"],
+  "--color-on-status-success": semanticColorsDark["on-status-success"],
+  "--color-on-status-error": semanticColorsDark["on-status-error"],
+  "--color-on-status-warning": semanticColorsDark["on-status-warning"],
+  "--color-on-status-info": semanticColorsDark["on-status-info"],
+  "--color-result-improve": semanticColorsDark["result-improve"],
+  "--color-result-improve-light": semanticColorsDark["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
+  "--color-result-degrade": semanticColorsDark["result-degrade"],
+  "--color-result-degrade-light": semanticColorsDark["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsDark["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsDark["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsDark["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsDark["result-neutral"],
+  "--color-on-result-improve": semanticColorsDark["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsDark["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsDark["on-result-inconclusive"],
+  "--color-data-1": semanticColorsDark["data-1"],
+  "--color-data-2": semanticColorsDark["data-2"],
+  "--color-data-3": semanticColorsDark["data-3"],
+  "--color-data-4": semanticColorsDark["data-4"],
+  "--color-data-5": semanticColorsDark["data-5"],
+  "--color-data-6": semanticColorsDark["data-6"],
+  "--color-data-7": semanticColorsDark["data-7"],
+  "--color-data-8": semanticColorsDark["data-8"],
+  "--color-data-9": semanticColorsDark["data-9"],
+  "--color-data-10": semanticColorsDark["data-10"],
+  "--color-text-link-hover": semanticColorsDark["text-link-hover"],
+  "--color-surface-overlay": semanticColorsDark["surface-overlay"],
+  "--color-surface-input": semanticColorsDark["surface-input"],
+  "--color-border-input": semanticColorsDark["border-input"],
+  "--color-border-input-hover": semanticColorsDark["border-input-hover"],
+  "--color-border-input-focus": semanticColorsDark["border-input-focus"],
+  "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsDark["avatar-background"],
+  "--color-avatar-text": semanticColorsDark["avatar-text"],
+  ...themeIndependentCSSVars
 };
 function getThemeCSSVars(mode) {
   return mode === "dark" ? darkThemeCSSVars : lightThemeCSSVars;
@@ -1560,6 +1682,39 @@ function validateCssPropertyManifest(candidate) {
 function isCssPropertyManifest(candidate) {
   return validateCssPropertyManifest(candidate).valid;
 }
+function wrapJsx(fn) {
+  return function(type, props, ...rest) {
+    if (props && typeof props.className === "string" && props.className) {
+      const cn = props.className;
+      const cssStyle = { $$css: true, [cn]: cn };
+      const existing = props.style;
+      props = {
+        ...props,
+        style: existing ? [cssStyle, existing] : cssStyle
+      };
+      delete props.className;
+    }
+    return fn(type, props, ...rest);
+  };
+}
+var jsx = wrapJsx(jsxRuntime.jsx);
+
+// src/theme/ThemeProvider.tsx
+var MODE_VARS = {
+  dark: nativewind.vars(darkThemeCSSVars),
+  light: nativewind.vars(lightThemeCSSVars)
+};
+function ThemeProvider({
+  mode = "dark",
+  style,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(reactNative.View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
+}
+function resolveColor(token, mode = "dark") {
+  return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
+}
 
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
@@ -1724,6 +1879,7 @@ var audiobookPreset = {
   rootClasses: ["atmosphere-warm", "grain"]
 };
 
+exports.ThemeProvider = ThemeProvider;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
 exports.buttonSizes = buttonSizes;
@@ -1763,6 +1919,7 @@ exports.primitiveShadows = primitiveShadows;
 exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
+exports.resolveColor = resolveColor;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
 exports.semanticColorsDark = semanticColorsDark;