@sudobility/building_blocks_rn 0.0.16 → 0.0.17

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './src/components/footer';
 export * from './src/components/layout';
 export * from './src/components/settings';
 export * from './src/components/pages';
+export * from './src/components/empty-state';
 export { SudobilityAppRN } from './src/app/SudobilityAppRN';
 export type { SudobilityAppRNProps } from './src/app/SudobilityAppRN';
 export { SafeSubscriptionContext, STUB_SUBSCRIPTION_VALUE, useSafeSubscription, } from './src/components/subscription/SafeSubscriptionContext';

package/dist/index.js

@@ -4,6 +4,7 @@ export * from './src/components/footer';
 export * from './src/components/layout';
 export * from './src/components/settings';
 export * from './src/components/pages';
+export * from './src/components/empty-state';
 // App wrapper without auth dependency
 export { SudobilityAppRN } from './src/app/SudobilityAppRN';
 // Subscription components without auth dependency

package/dist/src/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,9 @@
+export interface EmptyStateProps {
+    /** Descriptive message shown above the action button */
+    message: string;
+    /** Label for the primary action button */
+    buttonLabel: string;
+    /** Callback fired when the action button is pressed */
+    onPress: () => void;
+}
+export declare function EmptyState({ message, buttonLabel, onPress }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/empty-state/EmptyState.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Pressable } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+export function EmptyState({ message, buttonLabel, onPress }) {
+    const styles = useStyles();
+    return (_jsxs(View, { style: styles.container, children: [_jsx(Text, { style: styles.message, children: message }), _jsx(Pressable, { style: styles.button, onPress: onPress, accessibilityRole: 'button', accessibilityLabel: buttonLabel, children: _jsx(Text, { style: styles.buttonText, children: buttonLabel }) })] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 32,
+    },
+    message: {
+        fontSize: 15,
+        textAlign: 'center',
+        lineHeight: 22,
+        color: colors.textSecondary,
+        marginBottom: 16,
+    },
+    button: {
+        backgroundColor: '#2563eb',
+        borderRadius: 6,
+        minHeight: 44,
+        paddingHorizontal: 24,
+        paddingVertical: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonText: {
+        color: '#ffffff',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+}));

package/dist/src/components/empty-state/index.d.ts

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

package/dist/src/components/empty-state/index.js

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

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

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

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

@@ -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,201 @@
+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,
+    },
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/building_blocks_rn",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Higher-level shared UI building blocks for Sudobility React Native apps",
   "type": "module",
   "main": "./dist/index.js",