@titan-design/react-ui 0.3.0 → 0.4.0

package/dist/theme/index.d.mts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, ViewProps } from 'react-native';
 
 /**
  * Elevation System
@@ -1615,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;
@@ -1700,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.d.ts

@@ -1,4 +1,4 @@
-import { ViewStyle } from 'react-native';
+import { ViewStyle, ViewProps } from 'react-native';
 
 /**
  * Elevation System
@@ -1615,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;
@@ -1700,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 = {
@@ -1680,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) {
@@ -1844,6 +1879,7 @@ var audiobookPreset = {
   rootClasses: ["atmosphere-warm", "grain"]
 };
 
+exports.ThemeProvider = ThemeProvider;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
 exports.buttonSizes = buttonSizes;
@@ -1883,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;