@solostylist/ui-kit-native 1.0.0

package/dist/s-text-field/index.js

@@ -0,0 +1 @@
+export { STextField, default } from './s-text-field';

package/dist/s-text-field/s-text-field.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { type KeyboardTypeOptions } from 'react-native';
+import { type TextInputProps } from 'react-native-paper';
+/**
+ * Props interface for STextField component
+ * Synced with web STextField from @solostylist/ui-kit
+ */
+export interface STextFieldProps extends Omit<TextInputProps, 'error' | 'theme'> {
+    /** Field label displayed above the input */
+    label?: string;
+    /** Placeholder text shown when input is empty */
+    placeholder?: string;
+    /** Current value of the input */
+    value?: string;
+    /** Callback fired when text changes */
+    onChangeText?: (text: string) => void;
+    /** Callback fired when input loses focus */
+    onBlur?: () => void;
+    /** Error message to display (string instead of boolean for better UX) */
+    error?: string;
+    /** Whether the field is required (shows asterisk in label) */
+    required?: boolean;
+    /** Input type - controls keyboard and secure entry */
+    type?: 'text' | 'password' | 'email' | 'tel' | 'number' | 'url';
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Keyboard type for mobile input */
+    keyboardType?: KeyboardTypeOptions;
+    /** Maximum length of input */
+    maxLength?: number;
+    /** Help text shown below the input */
+    hint?: string;
+    /** Whether to allow multiline input */
+    multiline?: boolean;
+    /** Number of lines for multiline input */
+    numberOfLines?: number;
+    /** Input size variant */
+    size?: 'small' | 'medium';
+    /** Visual style variant */
+    variant?: 'outlined' | 'flat';
+    /** Whether to auto-focus on mount */
+    autoFocus?: boolean;
+}
+/**
+ * An enhanced text field component with integrated form labeling, error handling, and password visibility toggle.
+ * Synced with web STextField from @solostylist/ui-kit.
+ */
+export declare const STextField: {
+    ({ label, placeholder, value, onChangeText, onBlur, error, required, type, disabled, keyboardType, maxLength, hint, multiline, numberOfLines, size, variant, autoFocus, ...props }: STextFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export default STextField;
+//# sourceMappingURL=s-text-field.d.ts.map

package/dist/s-text-field/s-text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-text-field.d.ts","sourceRoot":"","sources":["../../src/s-text-field/s-text-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAc,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIpE;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,CAAC;IAC9E,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,mBAAmB,CAAC;IACnC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU;wLAmBpB,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO;;CAkGrC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/s-text-field/s-text-field.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { TextInput } from 'react-native-paper';
+import { SForm } from '../s-form';
+import { useSTheme } from '../theme';
+/**
+ * An enhanced text field component with integrated form labeling, error handling, and password visibility toggle.
+ * Synced with web STextField from @solostylist/ui-kit.
+ */
+export const STextField = ({ label, placeholder, value, onChangeText, onBlur, error, required = false, type = 'text', disabled = false, keyboardType, maxLength, hint, multiline = false, numberOfLines, size = 'medium', variant = 'outlined', autoFocus = false, ...props }) => {
+    const { theme } = useSTheme();
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const isPassword = type === 'password';
+    // Determine keyboard type based on input type
+    const getKeyboardType = () => {
+        if (keyboardType)
+            return keyboardType;
+        switch (type) {
+            case 'email':
+                return 'email-address';
+            case 'tel':
+                return 'phone-pad';
+            case 'number':
+                return 'numeric';
+            case 'url':
+                return 'url';
+            default:
+                return 'default';
+        }
+    };
+    // Auto-capitalize settings based on type
+    const getAutoCapitalize = () => {
+        if (type === 'email' || type === 'url' || type === 'password') {
+            return 'none';
+        }
+        return 'sentences';
+    };
+    const handleTogglePasswordVisibility = () => {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+    const styles = StyleSheet.create({
+        input: {
+            // Match web sizes: small = 36px (2.25rem), medium = 40px (2.5rem)
+            ...(size === 'small' && !multiline
+                ? {
+                    height: 36,
+                }
+                : size === 'medium' && !multiline
+                    ? {
+                        height: 40,
+                    }
+                    : {}),
+        },
+        content: {
+            // contentStyle is used for text content styling (input text and placeholder)
+            fontFamily: theme.typography.fontFamily,
+            // fontSize controls both input text and placeholder text size
+            fontSize: size === 'small' ? theme.typography.fontSize.sm : theme.typography.fontSize.md,
+        },
+    });
+    const inputType = isPassword && isPasswordVisible ? 'text' : type;
+    const secureTextEntry = inputType === 'password';
+    // Extract left prop from props if provided (for start icon support)
+    const { left, ...restProps } = props;
+    return (_jsx(SForm, { label: label, hint: hint, error: error, required: required, children: _jsx(TextInput, { mode: variant, placeholder: placeholder, placeholderTextColor: theme.colors.divider, value: value, onChangeText: onChangeText, onBlur: onBlur, error: !!error, disabled: disabled, secureTextEntry: secureTextEntry, keyboardType: getKeyboardType(), autoCapitalize: getAutoCapitalize(), maxLength: maxLength, multiline: multiline, numberOfLines: numberOfLines, autoFocus: autoFocus, dense: size === 'small', left: left, right: isPassword ? (_jsx(TextInput.Icon, { icon: isPasswordVisible ? 'eye-off' : 'eye', onPress: handleTogglePasswordVisibility, forceTextInputFocus: false, size: theme.iconSize.xs })) : undefined, style: styles.input, contentStyle: styles.content, ...restProps }) }));
+};
+STextField.displayName = 'STextField';
+export default STextField;

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Theme exports for @solostylist/ui-kit-native
+ */
+export { SThemeProvider, useSTheme, type SThemeProviderProps, type ThemeMode } from './s-theme-provider';
+export { darkTheme, lightTheme, type NativeTheme, type NativeThemeColors, brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme-primitives';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,KAAK,mBAAmB,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACzG,OAAO,EACL,SAAS,EACT,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,iBAAiB,EAEtB,KAAK,EACL,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,WAAW,EACX,IAAI,EACJ,SAAS,EACT,GAAG,EACH,QAAQ,EACR,MAAM,EACN,WAAW,EACX,UAAU,EACV,UAAU,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,UAAU,GACX,MAAM,oBAAoB,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,7 @@
+/**
+ * Theme exports for @solostylist/ui-kit-native
+ */
+export { SThemeProvider, useSTheme } from './s-theme-provider';
+export { darkTheme, lightTheme, 
+// Re-export core colors for convenience
+brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkPulse, lightPulse, } from './theme-primitives';

package/dist/theme/s-theme-provider.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type NativeTheme } from './theme-primitives';
+export type ThemeMode = 'light' | 'dark' | 'system';
+interface SThemeContextType {
+    theme: NativeTheme;
+    mode: ThemeMode;
+    isDark: boolean;
+    setMode: (mode: ThemeMode) => void;
+    toggleTheme: () => void;
+}
+export interface SThemeProviderProps {
+    children: React.ReactNode;
+    defaultMode?: ThemeMode;
+}
+/**
+ * Theme provider for React Native that syncs with @solostylist/core colors.
+ * Wraps react-native-paper's Provider with custom theme configuration.
+ */
+export declare const SThemeProvider: {
+    ({ children, defaultMode }: SThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Hook to access the current theme and theme controls.
+ */
+export declare const useSTheme: () => SThemeContextType;
+export default SThemeProvider;
+//# sourceMappingURL=s-theme-provider.d.ts.map

package/dist/theme/s-theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/s-theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAyB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAE7E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpD,UAAU,iBAAiB;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAID,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc;gCAA0C,mBAAmB;;CAoGvF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,QAAO,iBAM5B,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/theme/s-theme-provider.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { useColorScheme } from 'react-native';
+import { MD3DarkTheme, MD3LightTheme, Provider as PaperProvider } from 'react-native-paper';
+import { darkTheme, lightTheme } from './theme-primitives';
+const SThemeContext = createContext(undefined);
+/**
+ * Theme provider for React Native that syncs with @solostylist/core colors.
+ * Wraps react-native-paper's Provider with custom theme configuration.
+ */
+export const SThemeProvider = ({ children, defaultMode = 'system' }) => {
+    const systemColorScheme = useColorScheme();
+    const [mode, setMode] = useState(defaultMode);
+    const isDark = useMemo(() => {
+        if (mode === 'system') {
+            return systemColorScheme === 'dark';
+        }
+        return mode === 'dark';
+    }, [mode, systemColorScheme]);
+    const theme = useMemo(() => (isDark ? darkTheme : lightTheme), [isDark]);
+    const toggleTheme = useCallback(() => {
+        // Toggle based on current visual state (isDark) instead of mode
+        // This ensures a single click always switches between light and dark
+        setMode(isDark ? 'light' : 'dark');
+    }, [isDark]);
+    // Create react-native-paper theme based on our theme
+    // Synchronized with web theme (MUI) for consistency
+    const paperTheme = useMemo(() => {
+        const baseTheme = isDark ? MD3DarkTheme : MD3LightTheme;
+        return {
+            ...baseTheme,
+            colors: {
+                ...baseTheme.colors,
+                // Primary colors - matches web theme primary.main/light/contrastText
+                primary: theme.colors.primary[500],
+                primaryContainer: theme.colors.primary[100],
+                onPrimary: theme.colors.primary[50], // Matches web primary.contrastText
+                onPrimaryContainer: theme.colors.primary[900],
+                // Secondary colors - matches web theme secondary
+                secondary: theme.colors.secondary[500],
+                secondaryContainer: theme.colors.secondary[100],
+                onSecondary: theme.colors.secondary[50], // Matches web secondary.contrastText pattern
+                onSecondaryContainer: theme.colors.secondary[900],
+                // Tertiary colors - maps to info color from web theme
+                tertiary: theme.colors.info[500],
+                tertiaryContainer: theme.colors.info[100],
+                onTertiary: theme.colors.info[50], // Matches web info.contrastText
+                onTertiaryContainer: theme.colors.info[900],
+                // Background and surface - matches web theme background.default/paper
+                background: theme.colors.background.default,
+                onBackground: theme.colors.text.primary,
+                surface: theme.colors.background.paper,
+                onSurface: theme.colors.text.primary,
+                surfaceVariant: theme.colors.background.elevated,
+                onSurfaceVariant: theme.colors.text.secondary,
+                // Error colors - matches web theme error.main/light/contrastText
+                error: theme.colors.error[500],
+                errorContainer: theme.colors.error[100],
+                onError: theme.colors.error[50], // Matches web error.contrastText
+                onErrorContainer: theme.colors.error[900],
+                // Outline colors - matches web theme divider/border
+                outline: theme.colors.divider,
+                outlineVariant: theme.colors.divider,
+            },
+            fonts: {
+                ...baseTheme.fonts,
+                regular: {
+                    fontFamily: 'Outfit_400Regular',
+                    fontWeight: '400',
+                },
+                medium: {
+                    fontFamily: 'Outfit_500Medium',
+                    fontWeight: '500',
+                },
+                bold: {
+                    fontFamily: 'Outfit_700Bold',
+                    fontWeight: '700',
+                },
+                labelLarge: {
+                    fontFamily: 'Outfit_500Medium',
+                    fontSize: 14,
+                    fontWeight: '500',
+                    letterSpacing: 0.1,
+                    lineHeight: 20,
+                },
+            },
+            roundness: theme.borderRadius.md,
+        };
+    }, [isDark, theme]);
+    const contextValue = useMemo(() => ({
+        theme,
+        mode,
+        isDark,
+        setMode,
+        toggleTheme,
+    }), [theme, mode, isDark, toggleTheme]);
+    return (_jsx(SThemeContext.Provider, { value: contextValue, children: _jsx(PaperProvider, { theme: paperTheme, children: children }) }));
+};
+/**
+ * Hook to access the current theme and theme controls.
+ */
+export const useSTheme = () => {
+    const context = useContext(SThemeContext);
+    if (!context) {
+        throw new Error('useSTheme must be used within a SThemeProvider');
+    }
+    return context;
+};
+SThemeProvider.displayName = 'SThemeProvider';
+export default SThemeProvider;

package/dist/theme/theme-primitives.d.ts

@@ -0,0 +1,169 @@
+/**
+ * Theme primitives for React Native
+ * Uses @solostylist/core for consistent colors across web and mobile
+ */
+import { blackAlpha, blue, brand, darkGradients, darkNativeGradients, darkPulse, gray, green, lightBlue, lightBrand, lightGradients, lightGray, lightGreen, lightNativeGradients, lightOrange, lightPulse, lightPurple, lightRed, orange, purple, red, whiteAlpha, type ColorRange, type NativeGradientPalette } from '@solostylist/core';
+export interface NativeThemeColors {
+    primary: ColorRange;
+    secondary: ColorRange;
+    background: {
+        default: string;
+        paper: string;
+        elevated: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    error: ColorRange;
+    warning: ColorRange;
+    success: ColorRange;
+    info: ColorRange;
+    divider: string;
+    blackAlpha: {
+        zero: string;
+        light: string;
+        medium: string;
+        dark: string;
+        full: string;
+    };
+    whiteAlpha: {
+        zero: string;
+        light: string;
+        medium: string;
+        dark: string;
+        full: string;
+    };
+}
+export interface NativeTheme {
+    dark: boolean;
+    colors: NativeThemeColors;
+    typography: {
+        fontFamily: string;
+        fontSize: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+            '3xl': number;
+        };
+        fontWeight: {
+            regular: '400';
+            medium: '500';
+            semibold: '600';
+            bold: '700';
+        };
+        lineHeight: {
+            tight: number;
+            normal: number;
+            relaxed: number;
+        };
+        scale: {
+            h1: {
+                fontSize: number;
+                fontWeight: '600';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            h2: {
+                fontSize: number;
+                fontWeight: '600';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            h3: {
+                fontSize: number;
+                fontWeight: '600';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            h4: {
+                fontSize: number;
+                fontWeight: '600';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            h5: {
+                fontSize: number;
+                fontWeight: '600';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            h6: {
+                fontSize: number;
+                fontWeight: '600';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            subtitle1: {
+                fontSize: number;
+                fontWeight: '400';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            subtitle2: {
+                fontSize: number;
+                fontWeight: '400';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            body1: {
+                fontSize: number;
+                fontWeight: '400';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            body2: {
+                fontSize: number;
+                fontWeight: '400';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+            caption: {
+                fontSize: number;
+                fontWeight: '400';
+                lineHeight: number;
+                letterSpacing?: number;
+            };
+        };
+    };
+    iconSize: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    spacing: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+    };
+    borderRadius: {
+        none: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        full: number;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    gradients: typeof darkGradients;
+    nativeGradients: NativeGradientPalette;
+    pulse: typeof darkPulse;
+}
+export declare const darkTheme: NativeTheme;
+export declare const lightTheme: NativeTheme;
+export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkNativeGradients, lightNativeGradients, darkPulse, lightPulse, };
+export type { NativeGradientConfig, NativeGradientPalette } from '@solostylist/core';
+//# sourceMappingURL=theme-primitives.d.ts.map

package/dist/theme/theme-primitives.d.ts.map

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

package/dist/theme/theme-primitives.js

@@ -0,0 +1,209 @@
+/**
+ * Theme primitives for React Native
+ * Uses @solostylist/core for consistent colors across web and mobile
+ */
+import Color from 'color';
+import { blackAlpha, blue, brand, darkGradients, darkNativeGradients, darkPulse, gray, green, lightBlue, lightBrand, lightGradients, lightGray, lightGreen, lightNativeGradients, lightOrange, lightPulse, lightPurple, lightRed, orange, purple, red, whiteAlpha, } from '@solostylist/core';
+const typography = {
+    fontFamily: 'Outfit_400Regular',
+    fontSize: {
+        xs: 10,
+        sm: 12,
+        md: 14,
+        lg: 16,
+        xl: 18,
+        '2xl': 20,
+        '3xl': 24,
+    },
+    fontWeight: {
+        regular: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+    lineHeight: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75,
+    },
+    // Web-compatible typography scale (matches MUI theme)
+    scale: {
+        h1: {
+            fontSize: 48,
+            fontWeight: '600',
+            lineHeight: 1.2,
+            letterSpacing: -0.5,
+        },
+        h2: {
+            fontSize: 36,
+            fontWeight: '600',
+            lineHeight: 1.2,
+        },
+        h3: {
+            fontSize: 30,
+            fontWeight: '600',
+            lineHeight: 1.2,
+        },
+        h4: {
+            fontSize: 24,
+            fontWeight: '600',
+            lineHeight: 1.2,
+        },
+        h5: {
+            fontSize: 20,
+            fontWeight: '600',
+            lineHeight: 1.2,
+        },
+        h6: {
+            fontSize: 18,
+            fontWeight: '600',
+            lineHeight: 1.2,
+        },
+        subtitle1: {
+            fontSize: 18,
+            fontWeight: '400',
+            lineHeight: 1.75,
+        },
+        subtitle2: {
+            fontSize: 14,
+            fontWeight: '400',
+            lineHeight: 1.5,
+        },
+        body1: {
+            fontSize: 14,
+            fontWeight: '400',
+            lineHeight: 1.5,
+        },
+        body2: {
+            fontSize: 14,
+            fontWeight: '400',
+            lineHeight: 1.5,
+        },
+        caption: {
+            fontSize: 12,
+            fontWeight: '400',
+            lineHeight: 2,
+        },
+    },
+};
+const spacing = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    '2xl': 32,
+};
+const iconSize = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 28,
+    xl: 32,
+};
+const borderRadius = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+};
+export const darkTheme = {
+    dark: true,
+    colors: {
+        primary: brand,
+        secondary: gray,
+        background: {
+            default: gray[900],
+            paper: gray[800],
+            elevated: gray[700],
+        },
+        text: {
+            primary: gray[50],
+            secondary: gray[400],
+            disabled: gray[500],
+        },
+        error: red,
+        warning: orange,
+        success: green,
+        info: blue,
+        divider: Color(gray[700]).alpha(0.9).hsl().string(),
+        blackAlpha: {
+            zero: blackAlpha[0],
+            light: blackAlpha[10],
+            medium: blackAlpha[50],
+            dark: blackAlpha[80],
+            full: blackAlpha[100],
+        },
+        whiteAlpha: {
+            zero: whiteAlpha[0],
+            light: whiteAlpha[10],
+            medium: whiteAlpha[50],
+            dark: whiteAlpha[80],
+            full: whiteAlpha[100],
+        },
+    },
+    typography,
+    iconSize,
+    spacing,
+    borderRadius,
+    shadows: {
+        sm: 'none',
+        md: 'none',
+        lg: 'none',
+    },
+    gradients: darkGradients,
+    nativeGradients: darkNativeGradients,
+    pulse: darkPulse,
+};
+export const lightTheme = {
+    dark: false,
+    colors: {
+        primary: lightBrand,
+        secondary: lightGray,
+        background: {
+            default: lightGray[50],
+            paper: lightGray[100],
+            elevated: lightGray[100],
+        },
+        text: {
+            primary: lightGray[900],
+            secondary: lightGray[600],
+            disabled: lightGray[400],
+        },
+        error: lightRed,
+        warning: lightOrange,
+        success: lightGreen,
+        info: lightBlue,
+        divider: Color(lightGray[300]).alpha(0.9).hsl().string(),
+        blackAlpha: {
+            zero: blackAlpha[0],
+            light: blackAlpha[10],
+            medium: blackAlpha[50],
+            dark: blackAlpha[80],
+            full: blackAlpha[100],
+        },
+        whiteAlpha: {
+            zero: whiteAlpha[0],
+            light: whiteAlpha[10],
+            medium: whiteAlpha[50],
+            dark: whiteAlpha[80],
+            full: whiteAlpha[100],
+        },
+    },
+    typography,
+    iconSize,
+    spacing,
+    borderRadius,
+    shadows: {
+        sm: 'none',
+        md: 'none',
+        lg: 'none',
+    },
+    gradients: lightGradients,
+    nativeGradients: lightNativeGradients,
+    pulse: lightPulse,
+};
+// Re-export color palettes for direct use
+export { brand, lightBrand, gray, lightGray, green, lightGreen, orange, lightOrange, blue, lightBlue, red, lightRed, purple, lightPurple, blackAlpha, whiteAlpha, darkGradients, lightGradients, darkNativeGradients, lightNativeGradients, darkPulse, lightPulse, };