@sudobility/building_blocks_rn 0.0.2

package/dist/src/components/subscription/SafeSubscriptionContext.d.ts

@@ -0,0 +1,13 @@
+export interface SubscriptionContextValue {
+    isSubscribed: boolean;
+    subscriptionPlan: string | null;
+    expirationDate: string | null;
+    isLoading: boolean;
+}
+export declare const STUB_SUBSCRIPTION_VALUE: SubscriptionContextValue;
+export declare const SafeSubscriptionContext: import("react").Context<SubscriptionContextValue>;
+/**
+ * Hook to safely access subscription context.
+ * Returns stub value when no provider is available.
+ */
+export declare function useSafeSubscription(): SubscriptionContextValue;

package/dist/src/components/subscription/SafeSubscriptionContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+export const STUB_SUBSCRIPTION_VALUE = {
+    isSubscribed: false,
+    subscriptionPlan: null,
+    expirationDate: null,
+    isLoading: false,
+};
+export const SafeSubscriptionContext = createContext(STUB_SUBSCRIPTION_VALUE);
+/**
+ * Hook to safely access subscription context.
+ * Returns stub value when no provider is available.
+ */
+export function useSafeSubscription() {
+    return useContext(SafeSubscriptionContext);
+}

package/dist/src/components/subscription/SubscriptionScreen.d.ts

@@ -0,0 +1,36 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SubscriptionPageLabels, SubscriptionPageFormatters, AnalyticsTrackingParams } from '../../types';
+export interface SubscriptionPackage {
+    id: string;
+    title: string;
+    description?: string;
+    price: number;
+    currency: string;
+    period: 'monthly' | 'yearly' | 'lifetime';
+    features?: string[];
+    isMostPopular?: boolean;
+    isCurrent?: boolean;
+}
+export interface SubscriptionScreenProps {
+    /** Available subscription packages */
+    packages: SubscriptionPackage[];
+    /** Labels for UI text */
+    labels?: SubscriptionPageLabels;
+    /** Formatters for prices and periods */
+    formatters?: SubscriptionPageFormatters;
+    /** Called when a package is purchased */
+    onPurchase: (packageId: string) => Promise<boolean>;
+    /** Called when restore purchases is pressed */
+    onRestore: () => Promise<boolean>;
+    /** Called on successful purchase */
+    onPurchaseSuccess?: () => void;
+    /** Called on successful restore */
+    onRestoreSuccess?: () => void;
+    /** Called on error */
+    onError?: (title: string, message: string) => void;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+    /** Analytics tracking */
+    onTrack?: (params: AnalyticsTrackingParams) => void;
+}
+export declare function SubscriptionScreen({ packages, labels, formatters, onPurchase, onRestore, onPurchaseSuccess, onRestoreSuccess, onError, style, onTrack, }: SubscriptionScreenProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/subscription/SubscriptionScreen.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { View, Text, Pressable, ScrollView, ActivityIndicator, } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+export function SubscriptionScreen({ packages, labels = {}, formatters = {}, onPurchase, onRestore, onPurchaseSuccess, onRestoreSuccess, onError, style, onTrack, }) {
+    const styles = useStyles();
+    const [loading, setLoading] = useState(null);
+    const formatPrice = formatters.formatPrice ??
+        ((price, currency) => `${currency} ${price.toFixed(2)}`);
+    const handlePurchase = useCallback(async (pkg) => {
+        if (loading)
+            return;
+        setLoading(pkg.id);
+        onTrack?.({
+            eventType: 'subscription_action',
+            componentName: 'SubscriptionScreen',
+            label: 'purchase_tapped',
+            params: { package_id: pkg.id },
+        });
+        try {
+            const success = await onPurchase(pkg.id);
+            if (success) {
+                onPurchaseSuccess?.();
+            }
+        }
+        catch (e) {
+            onError?.('Purchase Failed', e instanceof Error ? e.message : 'An error occurred.');
+        }
+        finally {
+            setLoading(null);
+        }
+    }, [loading, onPurchase, onPurchaseSuccess, onError, onTrack]);
+    const handleRestore = useCallback(async () => {
+        if (loading)
+            return;
+        setLoading('restore');
+        onTrack?.({
+            eventType: 'subscription_action',
+            componentName: 'SubscriptionScreen',
+            label: 'restore_tapped',
+        });
+        try {
+            const success = await onRestore();
+            if (success) {
+                onRestoreSuccess?.();
+            }
+        }
+        catch (e) {
+            onError?.('Restore Failed', e instanceof Error ? e.message : 'An error occurred.');
+        }
+        finally {
+            setLoading(null);
+        }
+    }, [loading, onRestore, onRestoreSuccess, onError, onTrack]);
+    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, children: labels.title ?? 'Subscription' }), labels.subtitle && (_jsx(Text, { style: styles.subtitle, children: labels.subtitle })), _jsx(View, { style: styles.packageList, children: packages.map(pkg => (_jsxs(View, { style: [
+                        styles.packageCard,
+                        pkg.isMostPopular && styles.packageCardPopular,
+                    ], children: [pkg.isMostPopular && (_jsx(View, { style: styles.popularBadge, children: _jsx(Text, { style: styles.popularBadgeText, children: labels.mostPopular ?? 'Most Popular' }) })), _jsx(Text, { style: styles.packageTitle, children: pkg.title }), pkg.description && (_jsx(Text, { style: styles.packageDescription, children: pkg.description })), _jsx(Text, { style: styles.packagePrice, children: formatPrice(pkg.price, pkg.currency) }), pkg.features && pkg.features.length > 0 && (_jsx(View, { style: styles.featureList, children: pkg.features.map((feature, i) => (_jsxs(Text, { style: styles.featureItem, children: ['\u2713', " ", feature] }, i))) })), pkg.isCurrent ? (_jsx(View, { style: styles.currentBadge, children: _jsx(Text, { style: styles.currentBadgeText, children: labels.currentlyActive ?? 'Current Plan' }) })) : (_jsx(Pressable, { style: [
+                                styles.purchaseButton,
+                                loading === pkg.id && styles.purchaseButtonDisabled,
+                            ], onPress: () => handlePurchase(pkg), disabled: loading !== null, children: loading === pkg.id ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.purchaseButtonText, children: labels.purchase ?? 'Subscribe' })) }))] }, pkg.id))) }), _jsx(Pressable, { style: [
+                    styles.restoreButton,
+                    loading === 'restore' && styles.restoreButtonDisabled,
+                ], onPress: handleRestore, disabled: loading !== null, children: loading === 'restore' ? (_jsx(ActivityIndicator, { color: styles.restoreText.color, size: 'small' })) : (_jsx(Text, { style: styles.restoreText, children: labels.restore ?? 'Restore Purchases' })) }), labels.restoreDescription && (_jsx(Text, { style: styles.restoreDescription, children: labels.restoreDescription }))] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    content: {
+        padding: 16,
+        paddingBottom: 32,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: colors.text,
+        marginBottom: 4,
+    },
+    subtitle: {
+        fontSize: 15,
+        color: colors.textSecondary,
+        marginBottom: 20,
+    },
+    packageList: {
+        gap: 16,
+        marginTop: 16,
+    },
+    packageCard: {
+        backgroundColor: colors.card,
+        borderRadius: 16,
+        padding: 20,
+        borderWidth: 1,
+        borderColor: colors.border,
+    },
+    packageCardPopular: {
+        borderColor: colors.primary,
+        borderWidth: 2,
+    },
+    popularBadge: {
+        backgroundColor: colors.primary,
+        borderRadius: 12,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        alignSelf: 'flex-start',
+        marginBottom: 8,
+    },
+    popularBadgeText: {
+        color: '#ffffff',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    packageTitle: {
+        fontSize: 20,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    packageDescription: {
+        fontSize: 14,
+        color: colors.textSecondary,
+        marginTop: 4,
+    },
+    packagePrice: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: colors.text,
+        marginTop: 8,
+    },
+    featureList: {
+        marginTop: 12,
+        gap: 6,
+    },
+    featureItem: {
+        fontSize: 14,
+        color: colors.textSecondary,
+    },
+    purchaseButton: {
+        backgroundColor: colors.primary,
+        borderRadius: 10,
+        paddingVertical: 14,
+        alignItems: 'center',
+        marginTop: 16,
+        minHeight: 48,
+        justifyContent: 'center',
+    },
+    purchaseButtonDisabled: {
+        opacity: 0.6,
+    },
+    purchaseButtonText: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    currentBadge: {
+        borderRadius: 10,
+        paddingVertical: 14,
+        alignItems: 'center',
+        marginTop: 16,
+        backgroundColor: colors.surfaceSecondary,
+    },
+    currentBadgeText: {
+        color: colors.textSecondary,
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    restoreButton: {
+        marginTop: 24,
+        paddingVertical: 12,
+        alignItems: 'center',
+        minHeight: 44,
+        justifyContent: 'center',
+    },
+    restoreButtonDisabled: {
+        opacity: 0.6,
+    },
+    restoreText: {
+        color: colors.primary,
+        fontSize: 15,
+        fontWeight: '500',
+    },
+    restoreDescription: {
+        fontSize: 13,
+        color: colors.textMuted,
+        textAlign: 'center',
+        marginTop: 4,
+    },
+}));

package/dist/src/components/subscription/index.d.ts

@@ -0,0 +1,4 @@
+export { SafeSubscriptionContext, STUB_SUBSCRIPTION_VALUE, useSafeSubscription, } from './SafeSubscriptionContext';
+export type { SubscriptionContextValue } from './SafeSubscriptionContext';
+export { SubscriptionScreen } from './SubscriptionScreen';
+export type { SubscriptionScreenProps, SubscriptionPackage, } from './SubscriptionScreen';

package/dist/src/components/subscription/index.js

@@ -0,0 +1,2 @@
+export { SafeSubscriptionContext, STUB_SUBSCRIPTION_VALUE, useSafeSubscription, } from './SafeSubscriptionContext';
+export { SubscriptionScreen } from './SubscriptionScreen';

package/dist/src/components/toast/ToastProvider.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export interface Toast {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration?: number;
+}
+interface ToastContextValue {
+    addToast: (message: string, type?: ToastType, duration?: number) => void;
+    removeToast: (id: string) => void;
+}
+export declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access toast functionality.
+ */
+export declare function useToast(): ToastContextValue;
+export {};

package/dist/src/components/toast/ToastProvider.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
+import { View, Text, Animated, Pressable, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+const ToastContext = createContext(null);
+let toastCounter = 0;
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const insets = useSafeAreaInsets();
+    const removeToast = useCallback((id) => {
+        setToasts(prev => prev.filter(t => t.id !== id));
+    }, []);
+    const addToast = useCallback((message, type = 'info', duration = 3000) => {
+        const id = `toast-${++toastCounter}`;
+        setToasts(prev => [...prev, { id, message, type, duration }]);
+        if (duration > 0) {
+            setTimeout(() => removeToast(id), duration);
+        }
+    }, [removeToast]);
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { style: [styles.toastContainer, { top: insets.top + 8 }], pointerEvents: 'box-none', children: toasts.map(toast => (_jsx(ToastItem, { toast: toast, onDismiss: () => removeToast(toast.id) }, toast.id))) })] }));
+}
+function ToastItem({ toast, onDismiss, }) {
+    const opacity = useRef(new Animated.Value(0)).current;
+    const translateY = useRef(new Animated.Value(-20)).current;
+    React.useEffect(() => {
+        Animated.parallel([
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+            Animated.timing(translateY, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }),
+        ]).start();
+    }, [opacity, translateY]);
+    const bgColor = {
+        success: '#22c55e',
+        error: '#ef4444',
+        warning: '#f59e0b',
+        info: '#3b82f6',
+    }[toast.type];
+    return (_jsx(Animated.View, { style: [
+            styles.toast,
+            { backgroundColor: bgColor, opacity, transform: [{ translateY }] },
+        ], children: _jsx(Pressable, { style: styles.toastContent, onPress: onDismiss, children: _jsx(Text, { style: styles.toastText, children: toast.message }) }) }));
+}
+/**
+ * Hook to access toast functionality.
+ */
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    return context;
+}
+const styles = StyleSheet.create({
+    toastContainer: {
+        position: 'absolute',
+        left: 16,
+        right: 16,
+        zIndex: 9999,
+        gap: 8,
+    },
+    toast: {
+        borderRadius: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 6,
+    },
+    toastContent: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        minHeight: 44,
+        justifyContent: 'center',
+    },
+    toastText: {
+        color: '#ffffff',
+        fontSize: 15,
+        fontWeight: '500',
+    },
+});

package/dist/src/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './ToastProvider';
+export type { Toast, ToastType } from './ToastProvider';

package/dist/src/components/toast/index.js

@@ -0,0 +1 @@
+export { ToastProvider, useToast } from './ToastProvider';

package/dist/src/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './languages';

package/dist/src/constants/index.js

@@ -0,0 +1 @@
+export * from './languages';

package/dist/src/constants/languages.d.ts

@@ -0,0 +1,18 @@
+export interface LanguageConfig {
+    code: string;
+    name: string;
+    flag: string;
+}
+/**
+ * Default set of 16 supported languages with their flags.
+ * Apps can override this list by passing their own languages prop.
+ */
+export declare const DEFAULT_LANGUAGES: LanguageConfig[];
+/**
+ * Languages that use right-to-left text direction.
+ */
+export declare const RTL_LANGUAGES: string[];
+/**
+ * Check if a language code is RTL.
+ */
+export declare function isRTL(languageCode: string): boolean;

package/dist/src/constants/languages.js

@@ -0,0 +1,48 @@
+/**
+ * Default set of 16 supported languages with their flags.
+ * Apps can override this list by passing their own languages prop.
+ */
+export const DEFAULT_LANGUAGES = [
+    { code: 'en', name: 'English', flag: '\u{1F1FA}\u{1F1F8}' },
+    {
+        code: 'ar',
+        name: '\u0627\u0644\u0639\u0631\u0628\u064A\u0629',
+        flag: '\u{1F1F8}\u{1F1E6}',
+    },
+    { code: 'de', name: 'Deutsch', flag: '\u{1F1E9}\u{1F1EA}' },
+    { code: 'es', name: 'Espa\u00F1ol', flag: '\u{1F1EA}\u{1F1F8}' },
+    { code: 'fr', name: 'Fran\u00E7ais', flag: '\u{1F1EB}\u{1F1F7}' },
+    { code: 'it', name: 'Italiano', flag: '\u{1F1EE}\u{1F1F9}' },
+    { code: 'ja', name: '\u65E5\u672C\u8A9E', flag: '\u{1F1EF}\u{1F1F5}' },
+    { code: 'ko', name: '\uD55C\uAD6D\uC5B4', flag: '\u{1F1F0}\u{1F1F7}' },
+    { code: 'pt', name: 'Portugu\u00EAs', flag: '\u{1F1F5}\u{1F1F9}' },
+    {
+        code: 'ru',
+        name: '\u0420\u0443\u0441\u0441\u043A\u0438\u0439',
+        flag: '\u{1F1F7}\u{1F1FA}',
+    },
+    { code: 'sv', name: 'Svenska', flag: '\u{1F1F8}\u{1F1EA}' },
+    { code: 'th', name: '\u0E44\u0E17\u0E22', flag: '\u{1F1F9}\u{1F1ED}' },
+    {
+        code: 'uk',
+        name: '\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430',
+        flag: '\u{1F1FA}\u{1F1E6}',
+    },
+    { code: 'vi', name: 'Ti\u1EBFng Vi\u1EC7t', flag: '\u{1F1FB}\u{1F1F3}' },
+    { code: 'zh', name: '\u7B80\u4F53\u4E2D\u6587', flag: '\u{1F1E8}\u{1F1F3}' },
+    {
+        code: 'zh-hant',
+        name: '\u7E41\u9AD4\u4E2D\u6587',
+        flag: '\u{1F1F9}\u{1F1FC}',
+    },
+];
+/**
+ * Languages that use right-to-left text direction.
+ */
+export const RTL_LANGUAGES = ['ar'];
+/**
+ * Check if a language code is RTL.
+ */
+export function isRTL(languageCode) {
+    return RTL_LANGUAGES.includes(languageCode);
+}

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useResponsive } from './useResponsive';
+export type { ResponsiveInfo } from './useResponsive';

package/dist/src/hooks/index.js

@@ -0,0 +1 @@
+export { useResponsive } from './useResponsive';

package/dist/src/hooks/useResponsive.d.ts

@@ -0,0 +1,11 @@
+export interface ResponsiveInfo {
+    width: number;
+    height: number;
+    isSmall: boolean;
+    isMedium: boolean;
+    isLarge: boolean;
+}
+/**
+ * Hook for responsive breakpoint detection.
+ */
+export declare function useResponsive(): ResponsiveInfo;

package/dist/src/hooks/useResponsive.js

@@ -0,0 +1,14 @@
+import { useWindowDimensions } from 'react-native';
+/**
+ * Hook for responsive breakpoint detection.
+ */
+export function useResponsive() {
+    const { width, height } = useWindowDimensions();
+    return {
+        width,
+        height,
+        isSmall: width < 380,
+        isMedium: width >= 380 && width <= 768,
+        isLarge: width > 768,
+    };
+}

package/dist/src/i18n/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * React Native i18n initialization.
+ *
+ * Uses react-native-localize for device language detection
+ * and bundled translations (no HTTP backend).
+ */
+import i18n from 'i18next';
+export interface I18nConfig {
+    /** Supported language codes. Defaults to ["en"]. */
+    supportedLanguages?: string[];
+    /** Translation namespaces. */
+    namespaces?: string[];
+    /** Default namespace. Defaults to "common". */
+    defaultNamespace?: string;
+    /** Bundled translation resources. */
+    resources?: Record<string, Record<string, Record<string, string>>>;
+    /** Enable debug logging. Defaults to false. */
+    debug?: boolean;
+}
+/**
+ * Initialize the i18n instance for React Native.
+ * Safe to call multiple times - only initializes once.
+ */
+export declare function initializeI18nRN(config?: I18nConfig): typeof i18n;
+/**
+ * Get the i18n instance.
+ * Initializes with defaults if not already initialized.
+ */
+export declare function getI18n(): typeof i18n;
+export { i18n };
+export default i18n;

package/dist/src/i18n/index.js

@@ -0,0 +1,78 @@
+/**
+ * React Native i18n initialization.
+ *
+ * Uses react-native-localize for device language detection
+ * and bundled translations (no HTTP backend).
+ */
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+const DEFAULT_SUPPORTED_LANGUAGES = ['en'];
+const DEFAULT_NAMESPACES = [
+    'common',
+    'home',
+    'settings',
+    'auth',
+    'privacy',
+    'terms',
+];
+/**
+ * Detect device language using react-native-localize (if available).
+ */
+function detectDeviceLanguage(supportedLanguages) {
+    try {
+        // Try react-native-localize if available
+        const RNLocalize = require('react-native-localize');
+        const locales = RNLocalize.getLocales();
+        if (locales && locales.length > 0) {
+            const deviceLang = locales[0].languageCode;
+            if (supportedLanguages.includes(deviceLang)) {
+                return deviceLang;
+            }
+        }
+    }
+    catch {
+        // react-native-localize not installed, fall back to 'en'
+    }
+    return 'en';
+}
+let initialized = false;
+/**
+ * Initialize the i18n instance for React Native.
+ * Safe to call multiple times - only initializes once.
+ */
+export function initializeI18nRN(config = {}) {
+    if (initialized) {
+        return i18n;
+    }
+    initialized = true;
+    const { supportedLanguages = DEFAULT_SUPPORTED_LANGUAGES, namespaces = DEFAULT_NAMESPACES, defaultNamespace = 'common', resources, debug = false, } = config;
+    i18n.use(initReactI18next).init({
+        lng: detectDeviceLanguage(supportedLanguages),
+        fallbackLng: {
+            zh: ['zh', 'en'],
+            'zh-hant': ['zh-hant', 'zh', 'en'],
+            default: ['en'],
+        },
+        supportedLngs: supportedLanguages,
+        debug,
+        interpolation: {
+            escapeValue: false,
+        },
+        resources,
+        defaultNS: defaultNamespace,
+        ns: namespaces,
+    });
+    return i18n;
+}
+/**
+ * Get the i18n instance.
+ * Initializes with defaults if not already initialized.
+ */
+export function getI18n() {
+    if (!initialized) {
+        initializeI18nRN();
+    }
+    return i18n;
+}
+export { i18n };
+export default i18n;

package/dist/src/theme/ThemeContext.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Theme } from '../types';
+import { type ThemeColors } from './colors';
+export interface ThemeContextValue {
+    /** User's theme preference */
+    theme: Theme;
+    /** Resolved theme (light or dark) based on preference + system */
+    resolvedTheme: 'light' | 'dark';
+    /** Resolved color palette */
+    colors: ThemeColors;
+    /** Whether the resolved theme is dark */
+    isDark: boolean;
+    /** Update the theme preference */
+    setTheme: (theme: Theme) => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Initial theme override (default: system) */
+    initialTheme?: Theme;
+    /** Custom storage key prefix */
+    storageKeyPrefix?: string;
+}
+export declare function ThemeProvider({ children, initialTheme, storageKeyPrefix, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Hook to access theme context.
+ * Must be used within a ThemeProvider.
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Safely access theme context.
+ * Returns null if not within a ThemeProvider.
+ */
+export declare function useThemeSafe(): ThemeContextValue | null;
+export {};