@sudobility/building_blocks_rn 0.0.13 → 0.0.15

package/dist/index.d.ts

@@ -7,8 +7,6 @@ export { SudobilityAppRN } from './src/app/SudobilityAppRN';
 export type { SudobilityAppRNProps } from './src/app/SudobilityAppRN';
 export { SafeSubscriptionContext, STUB_SUBSCRIPTION_VALUE, useSafeSubscription, } from './src/components/subscription/SafeSubscriptionContext';
 export type { SubscriptionContextValue } from './src/components/subscription/SafeSubscriptionContext';
-export { SubscriptionScreen } from './src/components/subscription/SubscriptionScreen';
-export type { SubscriptionScreenProps, SubscriptionPackage, } from './src/components/subscription/SubscriptionScreen';
 export * from './src/theme';
 export * from './src/constants';
 export * from './src/types';

package/dist/index.js

@@ -8,7 +8,6 @@ export * from './src/components/pages';
 export { SudobilityAppRN } from './src/app/SudobilityAppRN';
 // Subscription components without auth dependency
 export { SafeSubscriptionContext, STUB_SUBSCRIPTION_VALUE, useSafeSubscription, } from './src/components/subscription/SafeSubscriptionContext';
-export { SubscriptionScreen } from './src/components/subscription/SubscriptionScreen';
 // Theme
 export * from './src/theme';
 // Constants

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

@@ -2,5 +2,3 @@ export { AppTextScreen } from './AppTextScreen';
 export type { AppTextScreenProps } from './AppTextScreen';
 export { LoginScreen } from './LoginScreen';
 export type { LoginScreenProps } from './LoginScreen';
-export { AppSubscriptionPage } from './AppSubscriptionPage';
-export type { AppSubscriptionPageProps, AppSubscriptionPageLabels, CurrentSubscriptionStatus, } from './AppSubscriptionPage';

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

@@ -1,3 +1,2 @@
 export { AppTextScreen } from './AppTextScreen';
 export { LoginScreen } from './LoginScreen';
-export { AppSubscriptionPage } from './AppSubscriptionPage';

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

@@ -1,4 +1,2 @@
 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",
@@ -70,7 +70,7 @@
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-navigation/native": "^7.1.28",
     "@react-navigation/native-stack": "^7.10.1",
-    "@sudobility/types": "^1.9.57",
+    "@sudobility/types": "^1.9.58",
     "@tanstack/react-query": "^5.90.19",
     "@types/react": "~19.1.0",
     "@types/react-dom": "^19.2.3",

package/dist/src/components/pages/AppSubscriptionPage.d.ts

@@ -1,35 +0,0 @@
-import type { StyleProp, ViewStyle } from 'react-native';
-import type { SubscriptionPageLabels, SubscriptionPageFormatters, AnalyticsTrackingParams } from '../../types';
-import type { SubscriptionPackage } from '../subscription/SubscriptionScreen';
-export interface CurrentSubscriptionStatus {
-    isActive: boolean;
-    planName?: string;
-    expirationDate?: string | null;
-    willRenew?: boolean;
-    productIdentifier?: string;
-}
-export interface AppSubscriptionPageLabels extends SubscriptionPageLabels {
-    statusActive?: string;
-    statusInactive?: string;
-    statusInactiveMessage?: string;
-    labelPlan?: string;
-    labelExpires?: string;
-    labelRenews?: string;
-    yes?: string;
-    no?: string;
-}
-export interface AppSubscriptionPageProps {
-    currentStatus?: CurrentSubscriptionStatus;
-    packages: SubscriptionPackage[];
-    labels?: AppSubscriptionPageLabels;
-    formatters?: SubscriptionPageFormatters;
-    onPurchase: (packageId: string) => Promise<boolean>;
-    onRestore: () => Promise<boolean>;
-    onPurchaseSuccess?: () => void;
-    onRestoreSuccess?: () => void;
-    onError?: (title: string, message: string) => void;
-    style?: StyleProp<ViewStyle>;
-    onTrack?: (params: AnalyticsTrackingParams) => void;
-    isLoading?: boolean;
-}
-export declare function AppSubscriptionPage({ currentStatus, packages, labels, formatters, onPurchase, onRestore, onPurchaseSuccess, onRestoreSuccess, onError, style, onTrack, isLoading: externalLoading, }: AppSubscriptionPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/pages/AppSubscriptionPage.js

@@ -1,270 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileoverview Full subscription management page for React Native.
- *
- * Displays the current subscription status (active/inactive badge, plan name,
- * expiration date, auto-renew status), followed by package cards with features,
- * pricing, "Most Popular" badge, and purchase buttons. Also includes a
- * "Restore Purchases" button with loading states.
- */
-import { useState, useCallback } from 'react';
-import { View, Text, Pressable, ScrollView, ActivityIndicator, } from 'react-native';
-import { createThemedStyles } from '../../utils/styles';
-export function AppSubscriptionPage({ currentStatus, packages, labels = {}, formatters = {}, onPurchase, onRestore, onPurchaseSuccess, onRestoreSuccess, onError, style, onTrack, isLoading: externalLoading, }) {
-    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: 'AppSubscriptionPage',
-            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: 'AppSubscriptionPage',
-            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: [currentStatus && (_jsxs(View, { style: styles.statusCard, accessibilityRole: 'summary', accessibilityLabel: `Subscription status: ${currentStatus.isActive ? 'Active' : 'Inactive'}`, children: [_jsx(View, { style: styles.statusHeader, children: _jsx(View, { style: [
-                                styles.statusBadge,
-                                currentStatus.isActive
-                                    ? styles.statusBadgeActive
-                                    : styles.statusBadgeInactive,
-                            ], children: _jsx(Text, { style: [
-                                    styles.statusBadgeText,
-                                    currentStatus.isActive
-                                        ? styles.statusBadgeTextActive
-                                        : styles.statusBadgeTextInactive,
-                                ], children: currentStatus.isActive
-                                    ? (labels.statusActive ?? 'Active')
-                                    : (labels.statusInactive ?? 'Inactive') }) }) }), currentStatus.isActive ? (_jsxs(View, { style: styles.statusFields, children: [currentStatus.planName && (_jsxs(View, { style: styles.statusField, children: [_jsx(Text, { style: styles.statusFieldLabel, children: labels.labelPlan ?? 'Plan' }), _jsx(Text, { style: styles.statusFieldValue, children: currentStatus.planName })] })), currentStatus.expirationDate && (_jsxs(View, { style: styles.statusField, children: [_jsx(Text, { style: styles.statusFieldLabel, children: labels.labelExpires ?? 'Expires' }), _jsx(Text, { style: styles.statusFieldValue, children: currentStatus.expirationDate })] })), currentStatus.willRenew !== undefined && (_jsxs(View, { style: styles.statusField, children: [_jsx(Text, { style: styles.statusFieldLabel, children: labels.labelRenews ?? 'Auto-renews' }), _jsx(Text, { style: styles.statusFieldValue, children: currentStatus.willRenew
-                                            ? (labels.yes ?? 'Yes')
-                                            : (labels.no ?? 'No') })] }))] })) : (_jsx(Text, { style: styles.statusInactiveMessage, children: labels.statusInactiveMessage ??
-                            'Subscribe to unlock premium features' }))] })), externalLoading && (_jsx(View, { style: styles.loadingContainer, children: _jsx(ActivityIndicator, { size: 'large', color: styles.loadingIndicator.color, accessibilityLabel: 'Loading subscription packages' }) })), !externalLoading && packages.length > 0 && (_jsx(View, { style: styles.packageList, accessibilityRole: 'list', children: packages.map(pkg => (_jsxs(View, { style: [
-                        styles.packageCard,
-                        pkg.isMostPopular && styles.packageCardPopular,
-                    ], accessibilityRole: 'summary', accessibilityLabel: `${pkg.title}, ${formatPrice(pkg.price, pkg.currency)}${pkg.isMostPopular ? ', Most Popular' : ''}${pkg.isCurrent ? ', Current Plan' : ''}`, 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, accessibilityRole: 'button', accessibilityLabel: `${labels.purchase ?? 'Subscribe'} to ${pkg.title}`, accessibilityState: {
-                                disabled: loading !== null,
-                                busy: loading === pkg.id,
-                            }, 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, accessibilityRole: 'button', accessibilityLabel: labels.restore ?? 'Restore Purchases', accessibilityState: {
-                    disabled: loading !== null,
-                    busy: loading === 'restore',
-                }, 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,
-    },
-    // Status card
-    statusCard: {
-        backgroundColor: colors.card,
-        borderRadius: 16,
-        padding: 20,
-        borderWidth: 1,
-        borderColor: colors.border,
-        marginBottom: 16,
-    },
-    statusHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 12,
-    },
-    statusBadge: {
-        borderRadius: 12,
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-    },
-    statusBadgeActive: {
-        backgroundColor: colors.successBg,
-    },
-    statusBadgeInactive: {
-        backgroundColor: colors.surfaceSecondary,
-    },
-    statusBadgeText: {
-        fontSize: 13,
-        fontWeight: '600',
-    },
-    statusBadgeTextActive: {
-        color: colors.successText,
-    },
-    statusBadgeTextInactive: {
-        color: colors.textSecondary,
-    },
-    statusFields: {
-        gap: 8,
-    },
-    statusField: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-    },
-    statusFieldLabel: {
-        fontSize: 14,
-        color: colors.textSecondary,
-    },
-    statusFieldValue: {
-        fontSize: 14,
-        fontWeight: '500',
-        color: colors.text,
-    },
-    statusInactiveMessage: {
-        fontSize: 14,
-        color: colors.textSecondary,
-    },
-    // Loading
-    loadingContainer: {
-        paddingVertical: 48,
-        alignItems: 'center',
-    },
-    loadingIndicator: {
-        color: colors.primary,
-    },
-    // Package cards (mirrors SubscriptionScreen styles)
-    packageList: {
-        gap: 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/SubscriptionScreen.d.ts

@@ -1,36 +0,0 @@
-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

@@ -1,201 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @fileoverview Subscription plan selector screen for React Native.
- *
- * Simpler plan selector (no current status display) with package cards,
- * purchase buttons, and a restore purchases flow. Uses the same
- * purchase/restore callback pattern as AppSubscriptionPage.
- */
-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, accessibilityRole: 'header', children: labels.title ?? 'Subscription' }), labels.subtitle && (_jsx(Text, { style: styles.subtitle, children: labels.subtitle })), _jsx(View, { style: styles.packageList, accessibilityRole: 'list', children: packages.map(pkg => (_jsxs(View, { style: [
-                        styles.packageCard,
-                        pkg.isMostPopular && styles.packageCardPopular,
-                    ], accessibilityRole: 'summary', accessibilityLabel: `${pkg.title}, ${formatPrice(pkg.price, pkg.currency)}${pkg.isMostPopular ? ', Most Popular' : ''}${pkg.isCurrent ? ', Current Plan' : ''}`, 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, accessibilityRole: 'button', accessibilityLabel: `${labels.purchase ?? 'Subscribe'} to ${pkg.title}`, accessibilityState: {
-                                disabled: loading !== null,
-                                busy: loading === pkg.id,
-                            }, 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, accessibilityRole: 'button', accessibilityLabel: labels.restore ?? 'Restore Purchases', accessibilityState: {
-                    disabled: loading !== null,
-                    busy: loading === 'restore',
-                }, 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,
-    },
-}));