@frosted-ui/react-native 0.0.1-canary.91 → 0.0.1-canary.93

package/dist/lib/color-utils.js

@@ -1,84 +1,48 @@
-import { vars } from 'nativewind';
+import { useMemo } from 'react';
+import { defaultSemanticColors, useSemanticColors, } from './theme-context';
 /**
- * Creates a vars object for a given color name.
- * This maps all accent color variables to the specified color's variables.
+ * Resolves a Color (which can be an AccentColor or SemanticColor) to an AccentColor.
+ * Semantic colors are resolved using the provided semantic color configuration.
+ *
+ * @param color - The color to resolve (can be 'danger', 'warning', 'success', 'info', or any AccentColor)
+ * @param semanticColors - The semantic color configuration from ThemeProvider (optional, uses defaults if not provided)
+ * @param defaultColor - The default color to return if no color is provided (defaults to 'blue')
+ * @returns The resolved AccentColor
  */
-function createColorTheme(colorName) {
-    return vars({
-        '--accent-1': `var(--${colorName}-1)`,
-        '--accent-2': `var(--${colorName}-2)`,
-        '--accent-3': `var(--${colorName}-3)`,
-        '--accent-4': `var(--${colorName}-4)`,
-        '--accent-5': `var(--${colorName}-5)`,
-        '--accent-6': `var(--${colorName}-6)`,
-        '--accent-7': `var(--${colorName}-7)`,
-        '--accent-8': `var(--${colorName}-8)`,
-        '--accent-9': `var(--${colorName}-9)`,
-        '--accent-9-contrast': `var(--${colorName}-9-contrast)`,
-        '--accent-10': `var(--${colorName}-10)`,
-        '--accent-11': `var(--${colorName}-11)`,
-        '--accent-12': `var(--${colorName}-12)`,
-        '--accent-a1': `var(--${colorName}-a1)`,
-        '--accent-a2': `var(--${colorName}-a2)`,
-        '--accent-a3': `var(--${colorName}-a3)`,
-        '--accent-a4': `var(--${colorName}-a4)`,
-        '--accent-a5': `var(--${colorName}-a5)`,
-        '--accent-a6': `var(--${colorName}-a6)`,
-        '--accent-a7': `var(--${colorName}-a7)`,
-        '--accent-a8': `var(--${colorName}-a8)`,
-        '--accent-a9': `var(--${colorName}-a9)`,
-        '--accent-a10': `var(--${colorName}-a10)`,
-        '--accent-a11': `var(--${colorName}-a11)`,
-        '--accent-a12': `var(--${colorName}-a12)`,
-    });
+export function resolveAccentFromColor(color, semanticColors = defaultSemanticColors, defaultColor = 'blue') {
+    if (!color)
+        return defaultColor;
+    switch (color) {
+        case 'accent':
+            return semanticColors.accentColor;
+        case 'danger':
+            return semanticColors.dangerColor;
+        case 'warning':
+            return semanticColors.warningColor;
+        case 'success':
+            return semanticColors.successColor;
+        case 'info':
+            return semanticColors.infoColor;
+        default:
+            return color;
+    }
 }
 /**
- * Pre-defined color themes for all accent colors.
- * Similar to the theme pattern, but for color variants.
- * This allows components to use text-accent-11, bg-accent-9, etc.
- * and have them automatically map to the specified color.
+ * Checks if a color is a semantic color.
  */
-export const colorThemes = {
-    tomato: createColorTheme('tomato'),
-    red: createColorTheme('red'),
-    ruby: createColorTheme('ruby'),
-    crimson: createColorTheme('crimson'),
-    pink: createColorTheme('pink'),
-    plum: createColorTheme('plum'),
-    purple: createColorTheme('purple'),
-    violet: createColorTheme('violet'),
-    iris: createColorTheme('iris'),
-    cyan: createColorTheme('cyan'),
-    teal: createColorTheme('teal'),
-    jade: createColorTheme('jade'),
-    green: createColorTheme('green'),
-    grass: createColorTheme('grass'),
-    brown: createColorTheme('brown'),
-    sky: createColorTheme('sky'),
-    mint: createColorTheme('mint'),
-    yellow: createColorTheme('yellow'),
-    amber: createColorTheme('amber'),
-    gold: createColorTheme('gold'),
-    bronze: createColorTheme('bronze'),
-    gray: createColorTheme('gray'),
-    blue: createColorTheme('blue'),
-    orange: createColorTheme('orange'),
-    indigo: createColorTheme('indigo'),
-    magenta: createColorTheme('magenta'),
-    lemon: createColorTheme('lemon'),
-    lime: createColorTheme('lime'),
-};
+export function isSemanticColor(color) {
+    return color === 'danger' || color === 'warning' || color === 'success' || color === 'info';
+}
 /**
- * Gets the accent color theme for a given color.
- * Returns the pre-defined vars object for that color.
+ * Hook that returns a function to resolve colors using the current theme's semantic color configuration.
+ * Use this in components to properly respect ThemeProvider's color settings.
  *
  * @example
- * const theme = getAccentColorTheme('yellow');
- * <View style={theme}>
- *   <Text className="text-accent-11">This will be yellow-11</Text>
- * </View>
+ * const resolveColor = useResolveColor();
+ * const accentColor = resolveColor(props.color); // Respects ThemeProvider config
  */
-export function getAccentColorTheme(color) {
-    return colorThemes[color];
+export function useResolveColor() {
+    const semanticColors = useSemanticColors();
+    return useMemo(() => (color, defaultColor = 'blue') => resolveAccentFromColor(color, semanticColors, defaultColor), [semanticColors]);
 }
 //# sourceMappingURL=color-utils.js.map

package/dist/lib/color-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../src/lib/color-utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-utils.js","sourceRoot":"","sources":["../../src/lib/color-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EACL,qBAAqB,EACrB,iBAAiB,GAElB,MAAM,iBAAiB,CAAC;AAGzB;;;;;;;;GAQG;AACH,MAAM,UAAU,sBAAsB,CACpC,KAAwB,EACxB,iBAAsC,qBAAqB,EAC3D,eAA4B,MAAM;IAElC,IAAI,CAAC,KAAK;QAAE,OAAO,YAAY,CAAC;IAEhC,QAAQ,KAAK,EAAE,CAAC;QACd,KAAK,QAAQ;YACX,OAAO,cAAc,CAAC,WAAW,CAAC;QACpC,KAAK,QAAQ;YACX,OAAO,cAAc,CAAC,WAAW,CAAC;QACpC,KAAK,SAAS;YACZ,OAAO,cAAc,CAAC,YAAY,CAAC;QACrC,KAAK,SAAS;YACZ,OAAO,cAAc,CAAC,YAAY,CAAC;QACrC,KAAK,MAAM;YACT,OAAO,cAAc,CAAC,SAAS,CAAC;QAClC;YACE,OAAO,KAAoB,CAAC;IAChC,CAAC;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,KAAY;IAC1C,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,MAAM,CAAC;AAC9F,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe;IAC7B,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,OAAO,OAAO,CACZ,GAAG,EAAE,CACH,CAAC,KAAwB,EAAE,eAA4B,MAAM,EAAe,EAAE,CAC5E,sBAAsB,CAAC,KAAK,EAAE,cAAc,EAAE,YAAY,CAAC,EAC/D,CAAC,cAAc,CAAC,CACjB,CAAC;AACJ,CAAC"}

package/dist/lib/full-window-overlay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+/**
+ * A wrapper that uses FullWindowOverlay on iOS and a Fragment on other platforms.
+ * This is implemented as a component rather than a top-level constant to avoid
+ * accessing Platform.OS at module load time, which can cause issues in monorepos
+ * where modules are loaded before React Native is fully initialized.
+ */
+export declare function FullWindowOverlay({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+//# sourceMappingURL=full-window-overlay.d.ts.map

package/dist/lib/full-window-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"full-window-overlay.d.ts","sourceRoot":"","sources":["../../src/lib/full-window-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAK5E"}

package/dist/lib/full-window-overlay.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+/**
+ * A wrapper that uses FullWindowOverlay on iOS and a Fragment on other platforms.
+ * This is implemented as a component rather than a top-level constant to avoid
+ * accessing Platform.OS at module load time, which can cause issues in monorepos
+ * where modules are loaded before React Native is fully initialized.
+ */
+export function FullWindowOverlay({ children }) {
+    if (Platform.OS === 'ios') {
+        return <RNFullWindowOverlay>{children}</RNFullWindowOverlay>;
+    }
+    return <>{children}</>;
+}
+//# sourceMappingURL=full-window-overlay.js.map

package/dist/lib/full-window-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"full-window-overlay.js","sourceRoot":"","sources":["../../src/lib/full-window-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,iBAAiB,IAAI,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhF;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,QAAQ,EAAiC;IAC3E,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,CAAC,mBAAmB,CAAC,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IACD,OAAO,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC;AACzB,CAAC"}

package/dist/lib/text-input-styles.d.ts

@@ -1,9 +1,9 @@
-import type { AccentColor, Color } from '../lib/types';
-import { useThemeVars } from '../lib/use-theme-vars';
+import type { Color } from '../lib/types';
+import { useThemeTokens } from '../lib/use-theme-tokens';
 import { type ViewStyle } from 'react-native';
 export type TextInputSize = '1' | '2' | '3' | '4';
 export type TextInputVariant = 'surface' | 'soft';
-export declare function resolveAccentFromColor(color?: Color): AccentColor;
+type PaletteKey = Color | 'accent' | 'gray';
 /**
  * Convert hex color to rgba with specified opacity
  */
@@ -11,15 +11,15 @@ export declare function hexToRgba(hex: string, opacity: number): string;
 /**
  * Get background and border styles for surface variant
  */
-export declare function getSurfaceVariantStyle(colors: ReturnType<typeof useThemeVars>['colors']): ViewStyle;
+export declare function getSurfaceVariantStyle(colors: ReturnType<typeof useThemeTokens>['colors']): ViewStyle;
 /**
  * Get background style for soft variant
  */
-export declare function getSoftVariantStyle(colors: ReturnType<typeof useThemeVars>['colors'], accentColor: AccentColor): ViewStyle;
+export declare function getSoftVariantStyle(colors: ReturnType<typeof useThemeTokens>['colors'], paletteKey: PaletteKey): ViewStyle;
 /**
  * Get text and placeholder colors based on variant
  */
-export declare function getTextInputColors(variant: TextInputVariant, colors: ReturnType<typeof useThemeVars>['colors'], accentColor: AccentColor, disabled?: boolean): {
+export declare function getTextInputColors(variant: TextInputVariant, colors: ReturnType<typeof useThemeTokens>['colors'], paletteKey: PaletteKey, disabled?: boolean): {
     textColor: string;
     placeholderColor: string;
 };
@@ -27,9 +27,10 @@ export declare function getTextInputColors(variant: TextInputVariant, colors: Re
  * Get disabled background style for surface variant
  * Uses gray-a3 overlay (simulated with opacity/background)
  */
-export declare function getDisabledSurfaceStyle(colors: ReturnType<typeof useThemeVars>['colors']): ViewStyle;
+export declare function getDisabledSurfaceStyle(colors: ReturnType<typeof useThemeTokens>['colors']): ViewStyle;
 /**
  * Get disabled background style for soft variant
  */
-export declare function getDisabledSoftStyle(colors: ReturnType<typeof useThemeVars>['colors']): ViewStyle;
+export declare function getDisabledSoftStyle(colors: ReturnType<typeof useThemeTokens>['colors']): ViewStyle;
+export {};
 //# sourceMappingURL=text-input-styles.d.ts.map

package/dist/lib/text-input-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-styles.d.ts","sourceRoot":"","sources":["../../src/lib/text-input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;AAMlD,wBAAgB,sBAAsB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,WAAW,CAcjE;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAO9D;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,GAChD,SAAS,CAiBX;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,EACjD,WAAW,EAAE,WAAW,GACvB,SAAS,CAIX;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,EACjD,WAAW,EAAE,WAAW,EACxB,QAAQ,CAAC,EAAE,OAAO,GACjB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAyBjD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,GAChD,SAAS,CAIX;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,QAAQ,CAAC,GAAG,SAAS,CAIjG"}
+{"version":3,"file":"text-input-styles.d.ts","sourceRoot":"","sources":["../../src/lib/text-input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMxD,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAClD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;AAGlD,KAAK,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAO9D;AAMD;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,GAClD,SAAS,CAiBX;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,EACnD,UAAU,EAAE,UAAU,GACrB,SAAS,CAIX;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,EACzB,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,EACnD,UAAU,EAAE,UAAU,EACtB,QAAQ,CAAC,EAAE,OAAO,GACjB;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAA;CAAE,CAyBjD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,GAClD,SAAS,CAIX;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,QAAQ,CAAC,GAClD,SAAS,CAIX"}

package/dist/lib/text-input-styles.js

@@ -1,23 +1,4 @@
 import { Platform } from 'react-native';
-// ============================================================================
-// Helpers
-// ============================================================================
-export function resolveAccentFromColor(color) {
-    if (!color)
-        return 'gray';
-    switch (color) {
-        case 'danger':
-            return 'red';
-        case 'warning':
-            return 'amber';
-        case 'success':
-            return 'green';
-        case 'info':
-            return 'blue';
-        default:
-            return color;
-    }
-}
 /**
  * Convert hex color to rgba with specified opacity
  */
@@ -56,17 +37,17 @@ export function getSurfaceVariantStyle(colors) {
 /**
  * Get background style for soft variant
  */
-export function getSoftVariantStyle(colors, accentColor) {
+export function getSoftVariantStyle(colors, paletteKey) {
     return {
-        backgroundColor: colors.palettes[accentColor].a3,
+        backgroundColor: colors.palettes[paletteKey].a3,
     };
 }
 /**
  * Get text and placeholder colors based on variant
  */
-export function getTextInputColors(variant, colors, accentColor, disabled) {
+export function getTextInputColors(variant, colors, paletteKey, disabled) {
     const grayPalette = colors.palettes.gray;
-    const palette = colors.palettes[accentColor];
+    const palette = colors.palettes[paletteKey];
     // Disabled state: always use gray-a11 for text
     // Placeholder uses gray-a5 (lighter alpha shade approximating gray-a11 at 0.5 opacity)
     if (disabled) {

package/dist/lib/text-input-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-styles.js","sourceRoot":"","sources":["../../src/lib/text-input-styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"text-input-styles.js","sourceRoot":"","sources":["../../src/lib/text-input-styles.ts"],"names":[],"mappings":"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"}

package/dist/lib/theme-context.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { AccentColor } from './types';
+type ColorScheme = 'light' | 'dark';
+type DangerColor = 'tomato' | 'red' | 'ruby';
+type WarningColor = 'yellow' | 'amber';
+type SuccessColor = 'teal' | 'jade' | 'green' | 'grass';
+type InfoColor = 'blue' | 'sky';
+type SemanticColorConfig = {
+    accentColor: AccentColor;
+    dangerColor: DangerColor;
+    warningColor: WarningColor;
+    successColor: SuccessColor;
+    infoColor: InfoColor;
+};
+declare const defaultSemanticColors: SemanticColorConfig;
+type ThemeContextValue = {
+    colorScheme: ColorScheme;
+    setColorScheme: (scheme: ColorScheme) => void;
+    toggleColorScheme: () => void;
+} & SemanticColorConfig;
+declare const ThemeContext: React.Context<ThemeContextValue | undefined>;
+type ThemeProviderProps = {
+    children: React.ReactNode;
+    /** Initial color scheme. Defaults to system preference. */
+    defaultColorScheme?: ColorScheme;
+    /** Accent color for primary actions and highlights. Defaults to 'blue'. */
+    accentColor?: AccentColor;
+    /** Color for danger/error states. Defaults to 'red'. */
+    dangerColor?: DangerColor;
+    /** Color for warning states. Defaults to 'amber'. */
+    warningColor?: WarningColor;
+    /** Color for success states. Defaults to 'green'. */
+    successColor?: SuccessColor;
+    /** Color for informational states. Defaults to 'sky'. */
+    infoColor?: InfoColor;
+};
+/**
+ * Provider for theme context that allows programmatic color scheme control
+ * and semantic color customization.
+ *
+ * Wrap your app with this provider to enable theme toggling and custom colors.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       accentColor="purple"
+ *       dangerColor="tomato"
+ *       warningColor="yellow"
+ *       successColor="teal"
+ *       infoColor="blue"
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ */
+declare function ThemeProvider({ children, defaultColorScheme, accentColor, dangerColor, warningColor, successColor, infoColor, }: ThemeProviderProps): React.JSX.Element;
+/**
+ * Hook to access and control the current color scheme.
+ * Must be used within a ThemeProvider.
+ *
+ * @example
+ * const { colorScheme, toggleColorScheme, accentColor } = useTheme();
+ */
+declare function useTheme(): ThemeContextValue;
+/**
+ * Internal hook to get the current color scheme.
+ * Checks ThemeContext first, falls back to system preference.
+ * Used by useThemeTokens.
+ */
+declare function useColorScheme(): ColorScheme;
+/**
+ * Internal hook to get the semantic color configuration.
+ * Returns defaults if not within a ThemeProvider.
+ */
+declare function useSemanticColors(): SemanticColorConfig;
+export { defaultSemanticColors, ThemeContext, ThemeProvider, useColorScheme, useSemanticColors, useTheme, };
+export type { ColorScheme, DangerColor, InfoColor, SemanticColorConfig, SuccessColor, ThemeContextValue, ThemeProviderProps, WarningColor, };
+//# sourceMappingURL=theme-context.d.ts.map

package/dist/lib/theme-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.d.ts","sourceRoot":"","sources":["../../src/lib/theme-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAGpC,KAAK,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAC7C,KAAK,YAAY,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvC,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AACxD,KAAK,SAAS,GAAG,MAAM,GAAG,KAAK,CAAC;AAGhC,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAGF,QAAA,MAAM,qBAAqB,EAAE,mBAM5B,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B,GAAG,mBAAmB,CAAC;AAExB,QAAA,MAAM,YAAY,8CAAgE,CAAC;AAEnF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,wDAAwD;IACxD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qDAAqD;IACrD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qDAAqD;IACrD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,yDAAyD;IACzD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,kBAAkB,EAClB,WAA+C,EAC/C,WAA+C,EAC/C,YAAiD,EACjD,YAAiD,EACjD,SAA2C,GAC5C,EAAE,kBAAkB,qBAiCpB;AAED;;;;;;GAMG;AACH,iBAAS,QAAQ,IAAI,iBAAiB,CAMrC;AAED;;;;GAIG;AACH,iBAAS,cAAc,IAAI,WAAW,CAWrC;AAED;;;GAGG;AACH,iBAAS,iBAAiB,IAAI,mBAAmB,CAGhD;AAED,OAAO,EACL,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,QAAQ,GACT,CAAC;AACF,YAAY,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,YAAY,GACb,CAAC"}

package/dist/lib/theme-context.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useColorScheme as useSystemColorScheme } from 'react-native';
+// Default semantic colors (matching web defaults)
+const defaultSemanticColors = {
+    accentColor: 'blue',
+    dangerColor: 'red',
+    warningColor: 'amber',
+    successColor: 'green',
+    infoColor: 'sky',
+};
+const ThemeContext = React.createContext(undefined);
+/**
+ * Provider for theme context that allows programmatic color scheme control
+ * and semantic color customization.
+ *
+ * Wrap your app with this provider to enable theme toggling and custom colors.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       accentColor="purple"
+ *       dangerColor="tomato"
+ *       warningColor="yellow"
+ *       successColor="teal"
+ *       infoColor="blue"
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ */
+function ThemeProvider({ children, defaultColorScheme, accentColor = defaultSemanticColors.accentColor, dangerColor = defaultSemanticColors.dangerColor, warningColor = defaultSemanticColors.warningColor, successColor = defaultSemanticColors.successColor, infoColor = defaultSemanticColors.infoColor, }) {
+    const systemColorScheme = useSystemColorScheme();
+    const [colorScheme, setColorScheme] = React.useState(defaultColorScheme ?? (systemColorScheme === 'dark' ? 'dark' : 'light'));
+    const toggleColorScheme = React.useCallback(() => {
+        setColorScheme((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    }, []);
+    const value = React.useMemo(() => ({
+        colorScheme,
+        setColorScheme,
+        toggleColorScheme,
+        accentColor,
+        dangerColor,
+        warningColor,
+        successColor,
+        infoColor,
+    }), [
+        colorScheme,
+        toggleColorScheme,
+        accentColor,
+        dangerColor,
+        warningColor,
+        successColor,
+        infoColor,
+    ]);
+    return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+/**
+ * Hook to access and control the current color scheme.
+ * Must be used within a ThemeProvider.
+ *
+ * @example
+ * const { colorScheme, toggleColorScheme, accentColor } = useTheme();
+ */
+function useTheme() {
+    const context = React.useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}
+/**
+ * Internal hook to get the current color scheme.
+ * Checks ThemeContext first, falls back to system preference.
+ * Used by useThemeTokens.
+ */
+function useColorScheme() {
+    const context = React.useContext(ThemeContext);
+    const systemColorScheme = useSystemColorScheme();
+    // If ThemeProvider is used, respect the programmatic value
+    if (context) {
+        return context.colorScheme;
+    }
+    // Otherwise fall back to system preference
+    return systemColorScheme === 'dark' ? 'dark' : 'light';
+}
+/**
+ * Internal hook to get the semantic color configuration.
+ * Returns defaults if not within a ThemeProvider.
+ */
+function useSemanticColors() {
+    const context = React.useContext(ThemeContext);
+    return context ?? defaultSemanticColors;
+}
+export { defaultSemanticColors, ThemeContext, ThemeProvider, useColorScheme, useSemanticColors, useTheme, };
+//# sourceMappingURL=theme-context.js.map

package/dist/lib/theme-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.js","sourceRoot":"","sources":["../../src/lib/theme-context.tsx"],"names":[],"mappings":"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"}

package/dist/lib/{theme-vars.d.ts → theme-tokens.d.ts}

@@ -75,7 +75,7 @@ export declare function blackAndWhitePalettes(): {
     black: AlphaOnlyShades;
     white: AlphaOnlyShades;
 };
-export declare const themeVars: {
+export declare const themeTokens: {
     typography: {
         readonly '0': {
             readonly fontSize: 10;
@@ -219,4 +219,4 @@ export declare const themeVars: {
     };
 };
 export type { ColorShades, FontWeightKey, TypographyStepKey };
-//# sourceMappingURL=theme-vars.d.ts.map
+//# sourceMappingURL=theme-tokens.d.ts.map

package/dist/lib/theme-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.d.ts","sourceRoot":"","sources":["../../src/lib/theme-tokens.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWN,CAAC;AAEX,KAAK,iBAAiB,GAAG,MAAM,OAAO,UAAU,CAAC;AAEjD,QAAA,MAAM,WAAW;;;;;;CAMP,CAAC;AAEX,KAAK,aAAa,GAAG,MAAM,OAAO,WAAW,CAAC;AAK9C,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzF,KAAK,aAAa,GACd,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,KAAK,WAAW,GAAG;KAChB,CAAC,IAAI,QAAQ,GAAG,MAAM;CACxB,GAAG;IACF,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG;KACD,CAAC,IAAI,aAAa,GAAG,MAAM;CAC7B,CAAC;AAqHF,KAAK,eAAe,GAAG;KAAG,CAAC,IAAI,aAAa,GAAG,MAAM;CAAE,CAAC;AAqBxD,wBAAgB,qBAAqB;;;EAKpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBvB,CAAC;AAEF,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/lib/{theme-vars.js → theme-tokens.js}

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-// Typography steps (0-9) based on typography.css / global.css tokens.
+// Typography steps (0-9) based on Frosted UI design system tokens.
 // Values are in px; React Native treats them as logical pixels.
 const typography = {
     '0': { fontSize: 10, lineHeight: 12, letterSpacing: 0.01 },
@@ -108,22 +108,7 @@ const darkPalettes = accentColors.reduce((acc, color) => {
     acc[color] = buildPalette(color, 'dark');
     return acc;
 }, {});
-// Semantic surface tokens (mirroring global.css)
-// Light mode:
-//   --color-background: white;
-//   --color-overlay: var(--black-a6);
-//   --color-panel-solid: white;
-//   --color-panel-translucent: rgba(255, 255, 255, 0.85);
-//   --color-surface: rgba(255, 255, 255, 0.9);
-//   --color-stroke: var(--gray-a5);
-//
-// Dark mode:
-//   --color-background: var(--gray-1);
-//   --color-overlay: var(--black-a8);
-//   --color-panel-solid: var(--gray-2);
-//   --color-panel-translucent: var(--gray-2-translucent);
-//   --color-surface: rgba(0, 0, 0, 0.25);
-//   --color-stroke: var(--gray-a4);
+// Semantic surface tokens for light/dark modes
 // Resolve overlay / stroke from raw color palettes so native can use real values
 const blackA = frostedColors.blackA;
 const whiteA = frostedColors.whiteA;
@@ -146,7 +131,7 @@ export function blackAndWhitePalettes() {
         white: whiteAlpha,
     };
 }
-export const themeVars = {
+export const themeTokens = {
     typography,
     fontWeights,
     colors: {
@@ -170,4 +155,4 @@ export const themeVars = {
         },
     },
 };
-//# sourceMappingURL=theme-vars.js.map
+//# sourceMappingURL=theme-tokens.js.map

package/dist/lib/theme-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-tokens.js","sourceRoot":"","sources":["../../src/lib/theme-tokens.ts"],"names":[],"mappings":"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"}

package/dist/lib/theme.d.ts

@@ -1,57 +1,17 @@
 import { type Theme } from '@react-navigation/native';
-export declare const THEME: {
-    light: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        popover: string;
-        popoverForeground: string;
-        primary: string;
-        primaryForeground: string;
-        secondary: string;
-        secondaryForeground: string;
-        muted: string;
-        mutedForeground: string;
-        accent: string;
-        accentForeground: string;
-        destructive: string;
-        border: string;
-        input: string;
-        ring: string;
-        radius: string;
-        chart1: string;
-        chart2: string;
-        chart3: string;
-        chart4: string;
-        chart5: string;
-    };
-    dark: {
-        background: string;
-        foreground: string;
-        card: string;
-        cardForeground: string;
-        popover: string;
-        popoverForeground: string;
-        primary: string;
-        primaryForeground: string;
-        secondary: string;
-        secondaryForeground: string;
-        muted: string;
-        mutedForeground: string;
-        accent: string;
-        accentForeground: string;
-        destructive: string;
-        border: string;
-        input: string;
-        ring: string;
-        radius: string;
-        chart1: string;
-        chart2: string;
-        chart3: string;
-        chart4: string;
-        chart5: string;
-    };
-};
+/**
+ * Hook to get navigation theme using Frosted UI design system colors.
+ * Reacts to the accent color from ThemeProvider.
+ *
+ * React Navigation uses these colors to style the navigation UI elements
+ * (headers, tab bars, drawers, etc.) throughout your app.
+ *
+ * @see https://reactnavigation.org/docs/themes
+ */
+export declare function useNavTheme(): Record<'light' | 'dark', Theme>;
+/**
+ * @deprecated Use useNavTheme() hook instead for dynamic accent color support.
+ * Static navigation theme with hardcoded blue accent.
+ */
 export declare const NAV_THEME: Record<'light' | 'dark', Theme>;
 //# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE/E,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDjB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,KAAK,CAuBrD,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAQ/E;;;;;;;;GAQG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,KAAK,CAAC,CA+E7D;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,KAAK,CAuBrD,CAAC"}