@sudobility/building_blocks_rn 0.0.9 → 0.0.11

package/building-blocks-rn-macos.podspec

@@ -0,0 +1,20 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'building-blocks-rn-macos'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = 'https://github.com/sudobility/building_blocks_rn'
+  s.license      = package['license']
+  s.author       = 'Sudobility'
+  s.source       = { :git => 'https://github.com/sudobility/building_blocks_rn.git', :tag => s.version }
+
+  s.osx.deployment_target = '14.0'
+
+  s.source_files = 'macos/**/*.{h,m,mm}'
+  s.frameworks   = 'AuthenticationServices', 'Security'
+
+  s.dependency 'React-Core'
+end

package/dist/index.d.ts

@@ -17,5 +17,8 @@ export { useResponsive } from './src/hooks';
 export type { ResponsiveInfo } from './src/hooks';
 export { ToastProvider, useToast } from './src/components/toast';
 export type { Toast, ToastType } from './src/components/toast';
+export { ErrorBoundary } from './src/components/error';
+export type { ErrorBoundaryProps } from './src/components/error';
 export { initializeI18nRN, getI18n, i18n } from './src/i18n';
 export type { I18nConfig } from './src/i18n';
+export { authenticate as webAuthAuthenticate, generateCodeVerifier as webAuthGenerateCodeVerifier, sha256Base64Url as webAuthSha256Base64Url, } from './src/native/WebAuth';

package/dist/index.js

@@ -21,5 +21,9 @@ export { createThemedStyles } from './src/utils';
 export { useResponsive } from './src/hooks';
 // Toast
 export { ToastProvider, useToast } from './src/components/toast';
+// Error Boundary
+export { ErrorBoundary } from './src/components/error';
 // i18n
 export { initializeI18nRN, getI18n, i18n } from './src/i18n';
+// Native modules (desktop only)
+export { authenticate as webAuthAuthenticate, generateCodeVerifier as webAuthGenerateCodeVerifier, sha256Base64Url as webAuthSha256Base64Url, } from './src/native/WebAuth';

package/dist/src/api/ApiContext.d.ts

@@ -1,3 +1,13 @@
+/**
+ * @fileoverview API context and provider for React Native (Firebase entry only).
+ *
+ * Provides a network client context with typed HTTP methods (get, post, put, delete),
+ * authentication state (token, userId, isReady, isLoading), and optional token
+ * refresh. Uses a default fetch-based client with JSON content type, with support
+ * for custom network client overrides.
+ *
+ * Exports dual hooks: `useApi()` (throws if no provider) and `useApiSafe()` (returns null).
+ */
 import React from 'react';
 export interface NetworkClient {
     request: <T>(url: string, options?: RequestInit) => Promise<T>;

package/dist/src/api/ApiContext.js

@@ -1,4 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @fileoverview API context and provider for React Native (Firebase entry only).
+ *
+ * Provides a network client context with typed HTTP methods (get, post, put, delete),
+ * authentication state (token, userId, isReady, isLoading), and optional token
+ * refresh. Uses a default fetch-based client with JSON content type, with support
+ * for custom network client overrides.
+ *
+ * Exports dual hooks: `useApi()` (throws if no provider) and `useApiSafe()` (returns null).
+ */
 import { createContext, useContext, useMemo } from 'react';
 const ApiContext = createContext(null);
 function createDefaultNetworkClient() {

package/dist/src/app/SudobilityAppRN.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { i18n as I18nInstance } from 'i18next';
+import type { ErrorBoundaryProps } from '../components/error/ErrorBoundary';
 import { Theme } from '../types';
 /**
  * Props for the SudobilityAppRN base app wrapper.
@@ -28,16 +29,21 @@ export interface SudobilityAppRNProps {
     initialTheme?: Theme;
     /** Storage key prefix for persisted settings */
     storageKeyPrefix?: string;
+    /** Custom error boundary fallback component */
+    ErrorFallbackComponent?: ErrorBoundaryProps['FallbackComponent'];
+    /** Called when the error boundary catches an error */
+    onError?: ErrorBoundaryProps['onError'];
 }
 /**
  * Base app wrapper that composes providers in a specific order (outermost to innermost):
  *
- * 1. SafeAreaProvider (always present)
- * 2. I18nextProvider (if `i18n` provided)
- * 3. ThemeProvider (or custom `ThemeProviderComponent`)
- * 4. QueryClientProvider (if provided)
- * 5. ToastProvider (or custom `ToastProviderComponent`)
- * 6. AppProviders (custom additional providers)
+ * 1. ErrorBoundary (outermost, catches provider initialization errors)
+ * 2. SafeAreaProvider (always present)
+ * 3. I18nextProvider (if `i18n` provided)
+ * 4. ThemeProvider (or custom `ThemeProviderComponent`)
+ * 5. QueryClientProvider (if provided)
+ * 6. ToastProvider (or custom `ToastProviderComponent`)
+ * 7. AppProviders (custom additional providers, innermost)
  *
  * @example
  * ```tsx
@@ -54,4 +60,4 @@ export interface SudobilityAppRNProps {
  * }
  * ```
  */
-export declare function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, }: SudobilityAppRNProps): import("react/jsx-runtime").JSX.Element;
+export declare function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, ErrorFallbackComponent, onError, }: SudobilityAppRNProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/app/SudobilityAppRN.js

@@ -3,15 +3,17 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from '../theme/ThemeContext';
 import { ToastProvider } from '../components/toast/ToastProvider';
+import { ErrorBoundary } from '../components/error/ErrorBoundary';
 /**
  * Base app wrapper that composes providers in a specific order (outermost to innermost):
  *
- * 1. SafeAreaProvider (always present)
- * 2. I18nextProvider (if `i18n` provided)
- * 3. ThemeProvider (or custom `ThemeProviderComponent`)
- * 4. QueryClientProvider (if provided)
- * 5. ToastProvider (or custom `ToastProviderComponent`)
- * 6. AppProviders (custom additional providers)
+ * 1. ErrorBoundary (outermost, catches provider initialization errors)
+ * 2. SafeAreaProvider (always present)
+ * 3. I18nextProvider (if `i18n` provided)
+ * 4. ThemeProvider (or custom `ThemeProviderComponent`)
+ * 5. QueryClientProvider (if provided)
+ * 6. ToastProvider (or custom `ToastProviderComponent`)
+ * 7. AppProviders (custom additional providers, innermost)
  *
  * @example
  * ```tsx
@@ -28,7 +30,7 @@ import { ToastProvider } from '../components/toast/ToastProvider';
  * }
  * ```
  */
-export function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, }) {
+export function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, ErrorFallbackComponent, onError, }) {
     let content = _jsx(_Fragment, { children: children });
     // Wrap with additional providers (innermost)
     if (AppProviders) {
@@ -58,5 +60,6 @@ export function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastP
     }
     // SafeArea (outermost)
     content = _jsx(SafeAreaProvider, { children: content });
-    return content;
+    // ErrorBoundary (very outermost)
+    return (_jsx(ErrorBoundary, { FallbackComponent: ErrorFallbackComponent, onError: onError, children: content }));
 }

package/dist/src/components/error/ErrorBoundary.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @fileoverview Reusable error boundary component for React Native.
+ *
+ * Catches JavaScript errors in its child component tree, logs them,
+ * and displays a user-friendly fallback screen with an error message
+ * and a retry button. Must be a class component since React does not
+ * support error boundary hooks.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallbackMessage="Something went wrong.">
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+import React from 'react';
+export interface ErrorBoundaryProps {
+    children: React.ReactNode;
+    /** Custom fallback component. Receives error and reset function. */
+    FallbackComponent?: React.ComponentType<{
+        error: Error;
+        resetError: () => void;
+    }>;
+    /** Fallback message displayed in the default fallback UI. */
+    fallbackMessage?: string;
+    /** Called when an error is caught. Useful for logging. */
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    resetError: () => void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/src/components/error/ErrorBoundary.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview Reusable error boundary component for React Native.
+ *
+ * Catches JavaScript errors in its child component tree, logs them,
+ * and displays a user-friendly fallback screen with an error message
+ * and a retry button. Must be a class component since React does not
+ * support error boundary hooks.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallbackMessage="Something went wrong.">
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+import React from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.resetError = () => {
+            this.setState({ hasError: false, error: null });
+        };
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError && this.state.error) {
+            if (this.props.FallbackComponent) {
+                return (_jsx(this.props.FallbackComponent, { error: this.state.error, resetError: this.resetError }));
+            }
+            return (_jsxs(View, { style: styles.container, accessibilityRole: 'summary', accessibilityLabel: 'An error has occurred', children: [_jsx(Text, { style: styles.title, children: "Oops!" }), _jsx(Text, { style: styles.message, children: this.props.fallbackMessage ??
+                            'Something went wrong. Please try again.' }), _jsx(Text, { style: styles.errorDetail, children: this.state.error.message }), _jsx(Pressable, { style: styles.retryButton, onPress: this.resetError, accessibilityRole: 'button', accessibilityLabel: 'Try again', children: _jsx(Text, { style: styles.retryButtonText, children: "Try Again" }) })] }));
+        }
+        return this.props.children;
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        backgroundColor: '#f9fafb',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        color: '#111827',
+        marginBottom: 8,
+    },
+    message: {
+        fontSize: 16,
+        color: '#4b5563',
+        textAlign: 'center',
+        marginBottom: 12,
+    },
+    errorDetail: {
+        fontSize: 13,
+        color: '#9ca3af',
+        textAlign: 'center',
+        marginBottom: 24,
+        paddingHorizontal: 16,
+    },
+    retryButton: {
+        backgroundColor: '#2563eb',
+        borderRadius: 8,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        minHeight: 44,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    retryButtonText: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+});

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

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

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

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

package/dist/src/components/footer/AppFooter.js

@@ -1,4 +1,13 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @fileoverview App footer component for React Native.
+ *
+ * Displays a copyright line with company name/link, version string, and
+ * configurable rights text. Below the copyright, it renders a row of
+ * footer links (e.g., Privacy, Terms) with dot separators. Links can use
+ * `url` (Linking.openURL), `routeName`, or `onPress`. Analytics tracking
+ * for link clicks is supported via the `onTrack` prop.
+ */
 import React from 'react';
 import { View, Text, Pressable, Linking } from 'react-native';
 import { createThemedStyles } from '../../utils/styles';
@@ -23,7 +32,7 @@ export function AppFooter({ version, copyrightYear, companyName, companyUrl, rig
             Linking.openURL(companyUrl);
         }
     };
-    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: styles.topRow, children: [version && _jsxs(Text, { style: styles.versionText, children: ["v", version] }), _jsxs(Text, { style: styles.copyrightText, children: [copyrightYear ? `\u00A9 ${copyrightYear} ` : '', companyUrl ? (_jsx(Text, { style: styles.companyLink, onPress: handleCompanyPress, children: companyName })) : (companyName), '. ', rightsText] })] }), links && links.length > 0 && (_jsx(View, { style: styles.linksRow, children: links.map((link, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { style: styles.separator, children: '\u00B7' }), _jsx(Pressable, { onPress: () => handleLinkPress(link), children: _jsx(Text, { style: styles.linkText, children: link.label }) })] }, link.label))) }))] }));
+    return (_jsxs(View, { style: [styles.container, style], accessibilityLabel: 'App footer', children: [_jsxs(View, { style: styles.topRow, children: [version && _jsxs(Text, { style: styles.versionText, children: ["v", version] }), _jsxs(Text, { style: styles.copyrightText, children: [copyrightYear ? `\u00A9 ${copyrightYear} ` : '', companyUrl ? (_jsx(Text, { style: styles.companyLink, onPress: handleCompanyPress, accessibilityRole: 'link', accessibilityLabel: `${companyName} website`, children: companyName })) : (companyName), '. ', rightsText] })] }), links && links.length > 0 && (_jsx(View, { style: styles.linksRow, accessibilityRole: 'list', children: links.map((link, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Text, { style: styles.separator, children: '\u00B7' }), _jsx(Pressable, { onPress: () => handleLinkPress(link), accessibilityRole: 'link', accessibilityLabel: link.label, children: _jsx(Text, { style: styles.linkText, children: link.label }) })] }, link.label))) }))] }));
 }
 const useStyles = createThemedStyles(colors => ({
     container: {

package/dist/src/components/header/AppHeader.d.ts

@@ -1,3 +1,11 @@
+/**
+ * @fileoverview App header bar component for React Native.
+ *
+ * Renders a row with a left section (logo + app name) and a right section
+ * (icon buttons from `menuItems`). Both sections can be overridden via
+ * `renderLeft` and `renderRight` props. Also provides a
+ * `createAppHeaderOptions()` helper for React Navigation integration.
+ */
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { MenuItemConfig, LogoConfig } from '../../types';

package/dist/src/components/header/AppHeader.js

@@ -7,11 +7,11 @@ export function AppHeader({ logo, menuItems, renderLeft, renderRight, style, })
             styles.container,
             { backgroundColor: colors.card, borderBottomColor: colors.border },
             style,
-        ], children: [_jsx(View, { style: styles.leftSection, children: renderLeft ? (renderLeft()) : (_jsxs(Pressable, { onPress: logo.onPress, style: styles.logoContainer, children: [logo.source && (_jsx(Image, { source: logo.source, style: styles.logoImage, resizeMode: 'contain' })), _jsx(Text, { style: [styles.appName, { color: colors.text }], children: logo.appName })] })) }), _jsxs(View, { style: styles.rightSection, children: [menuItems
+        ], accessibilityRole: 'header', accessibilityLabel: `${logo.appName} header`, children: [_jsx(View, { style: styles.leftSection, children: renderLeft ? (renderLeft()) : (_jsxs(Pressable, { onPress: logo.onPress, style: styles.logoContainer, accessibilityRole: 'button', accessibilityLabel: `${logo.appName} home`, children: [logo.source && (_jsx(Image, { source: logo.source, style: styles.logoImage, resizeMode: 'contain', accessibilityLabel: `${logo.appName} logo` })), _jsx(Text, { style: [styles.appName, { color: colors.text }], children: logo.appName })] })) }), _jsxs(View, { style: styles.rightSection, children: [menuItems
                         ?.filter(item => item.show !== false)
                         .map(item => {
                         const IconComponent = item.icon;
-                        return (_jsx(Pressable, { onPress: item.onPress, style: styles.menuButton, accessibilityLabel: item.label, children: _jsx(IconComponent, { size: 22, color: colors.textSecondary }) }, item.id));
+                        return (_jsx(Pressable, { onPress: item.onPress, style: styles.menuButton, accessibilityRole: 'button', accessibilityLabel: item.label, children: _jsx(IconComponent, { size: 22, color: colors.textSecondary }) }, item.id));
                     }), renderRight?.()] })] }));
 }
 /**
@@ -74,6 +74,6 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 4,
-        marginRight: 8,
+        marginEnd: 8,
     },
 });

package/dist/src/components/layout/AppScreenLayout.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @fileoverview Screen layout wrapper component for React Native.
+ *
+ * Provides a SafeAreaView (top, left, right edges) with optional header/footer
+ * slots, scrollable (default) or fixed content mode, configurable content padding,
+ * and background variants (theme default or card white).
+ */
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface AppScreenLayoutProps {

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

@@ -1,4 +1,12 @@
 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';
@@ -52,7 +60,7 @@ export function AppSubscriptionPage({ currentStatus, packages, labels = {}, form
             setLoading(null);
         }
     }, [loading, onRestore, onRestoreSuccess, onError, onTrack]);
-    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [currentStatus && (_jsxs(View, { style: styles.statusCard, children: [_jsx(View, { style: styles.statusHeader, children: _jsx(View, { style: [
+    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
@@ -67,16 +75,22 @@ export function AppSubscriptionPage({ currentStatus, packages, labels = {}, form
                                     : (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 }) })), !externalLoading && packages.length > 0 && (_jsx(View, { style: styles.packageList, children: packages.map(pkg => (_jsxs(View, { style: [
+                            '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,
-                    ], 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: [
+                    ], 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, children: loading === pkg.id ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.purchaseButtonText, children: labels.purchase ?? 'Subscribe' })) }))] }, pkg.id))) })), _jsx(Pressable, { style: [
+                            ], 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, 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 }))] }));
+                ], 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: {

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

@@ -1,3 +1,11 @@
+/**
+ * @fileoverview Structured text content screen for React Native.
+ *
+ * Renders structured `TextPageContent` (title, sections with subsections,
+ * bullet lists, and contact block). Suitable for privacy policy, terms of
+ * service, and similar static content pages. Supports optional `ScreenWrapper`
+ * prop for custom layout wrapping.
+ */
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { TextPageContent } from '../../types';

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

@@ -62,12 +62,12 @@ const useStyles = createThemedStyles(colors => ({
     },
     listItem: {
         flexDirection: 'row',
-        paddingLeft: 8,
+        paddingStart: 8,
     },
     bullet: {
         fontSize: 15,
         color: colors.textSecondary,
-        marginRight: 8,
+        marginEnd: 8,
         lineHeight: 22,
     },
     listItemText: {

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

@@ -1,4 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview Login screen component for React Native.
+ *
+ * Provides an email/password form with sign-in and sign-up toggle, optional
+ * Google and Apple OAuth buttons, loading states with ActivityIndicator,
+ * and inline error display. Uses KeyboardAvoidingView for proper keyboard handling.
+ *
+ * @platform ios - Uses `behavior="padding"` for KeyboardAvoidingView, which
+ *   adjusts the bottom padding to keep form fields visible above the keyboard.
+ * @platform android - Uses `behavior="height"` for KeyboardAvoidingView, which
+ *   adjusts the component height. This is more reliable on Android where padding
+ *   behavior can conflict with system window insets.
+ */
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput, Pressable, ActivityIndicator, Image, KeyboardAvoidingView, Platform, } from 'react-native';
 import { createThemedStyles } from '../../utils/styles';
@@ -44,13 +57,15 @@ export function LoginScreen({ appName, logo, onLogin, onSignUp, onGoogleSignIn,
             setLoading(false);
         }
     }, []);
-    return (_jsx(KeyboardAvoidingView, { style: [styles.container, style], behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsxs(View, { style: styles.card, children: [logo && (_jsx(Image, { source: logo, style: styles.logo, resizeMode: 'contain' })), _jsx(Text, { style: styles.title, children: isSignUp ? `Sign up for ${appName}` : `Sign in to ${appName}` }), error && (_jsx(View, { style: styles.errorBox, children: _jsx(Text, { style: styles.errorText, children: error }) })), _jsxs(View, { style: styles.form, children: [_jsx(Text, { style: styles.label, children: "Email" }), _jsx(TextInput, { style: styles.input, value: email, onChangeText: setEmail, placeholder: 'you@example.com', autoCapitalize: 'none', autoCorrect: false, keyboardType: 'email-address', textContentType: 'emailAddress', editable: !loading }), _jsx(Text, { style: styles.label, children: "Password" }), _jsx(TextInput, { style: styles.input, value: password, onChangeText: setPassword, placeholder: 'Password', secureTextEntry: true, textContentType: isSignUp ? 'newPassword' : 'password', editable: !loading, onSubmitEditing: handleSubmit }), _jsx(Pressable, { style: [
+    return (_jsx(KeyboardAvoidingView, { style: [styles.container, style], behavior: Platform.OS === 'ios' ? 'padding' : 'height', children: _jsxs(View, { style: styles.card, accessibilityLabel: 'Login form', children: [logo && (_jsx(Image, { source: logo, style: styles.logo, resizeMode: 'contain', accessibilityLabel: `${appName} logo` })), _jsx(Text, { style: styles.title, accessibilityRole: 'header', accessibilityLabel: isSignUp ? `Sign up for ${appName}` : `Sign in to ${appName}`, children: isSignUp ? `Sign up for ${appName}` : `Sign in to ${appName}` }), error && (_jsx(View, { style: styles.errorBox, accessibilityRole: 'alert', accessibilityLabel: `Error: ${error}`, children: _jsx(Text, { style: styles.errorText, children: error }) })), _jsxs(View, { style: styles.form, children: [_jsx(Text, { style: styles.label, accessibilityLabel: 'Email address', children: "Email" }), _jsx(TextInput, { style: styles.input, value: email, onChangeText: setEmail, placeholder: 'you@example.com', autoCapitalize: 'none', autoCorrect: false, keyboardType: 'email-address', textContentType: 'emailAddress', editable: !loading, accessibilityLabel: 'Email address input', accessibilityHint: 'Enter your email address' }), _jsx(Text, { style: styles.label, accessibilityLabel: 'Password', children: "Password" }), _jsx(TextInput, { style: styles.input, value: password, onChangeText: setPassword, placeholder: 'Password', secureTextEntry: true, textContentType: isSignUp ? 'newPassword' : 'password', editable: !loading, onSubmitEditing: handleSubmit, accessibilityLabel: 'Password input', accessibilityHint: 'Enter your password' }), _jsx(Pressable, { style: [
                                 styles.submitButton,
                                 loading && styles.submitButtonDisabled,
-                            ], onPress: handleSubmit, disabled: loading, children: loading ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.submitButtonText, children: isSignUp ? 'Sign Up' : 'Sign In' })) })] }), (showGoogleSignIn || showAppleSignIn) && (_jsxs(View, { style: styles.socialSection, children: [_jsxs(View, { style: styles.divider, children: [_jsx(View, { style: styles.dividerLine }), _jsx(Text, { style: styles.dividerText, children: "or" }), _jsx(View, { style: styles.dividerLine })] }), showGoogleSignIn && onGoogleSignIn && (_jsx(Pressable, { style: styles.socialButton, onPress: () => handleSocialSignIn(onGoogleSignIn), disabled: loading, children: _jsx(Text, { style: styles.socialButtonText, children: "Continue with Google" }) })), showAppleSignIn && onAppleSignIn && (_jsx(Pressable, { style: [styles.socialButton, styles.appleButton], onPress: () => handleSocialSignIn(onAppleSignIn), disabled: loading, children: _jsx(Text, { style: [styles.socialButtonText, styles.appleButtonText], children: "Continue with Apple" }) }))] })), showSignUp && onSignUp && (_jsx(Pressable, { style: styles.toggleLink, onPress: () => {
+                            ], onPress: handleSubmit, disabled: loading, accessibilityRole: 'button', accessibilityLabel: isSignUp ? 'Sign Up' : 'Sign In', accessibilityState: { disabled: loading, busy: loading }, children: loading ? (_jsx(ActivityIndicator, { color: '#ffffff', size: 'small' })) : (_jsx(Text, { style: styles.submitButtonText, children: isSignUp ? 'Sign Up' : 'Sign In' })) })] }), (showGoogleSignIn || showAppleSignIn) && (_jsxs(View, { style: styles.socialSection, children: [_jsxs(View, { style: styles.divider, children: [_jsx(View, { style: styles.dividerLine }), _jsx(Text, { style: styles.dividerText, children: "or" }), _jsx(View, { style: styles.dividerLine })] }), showGoogleSignIn && onGoogleSignIn && (_jsx(Pressable, { style: styles.socialButton, onPress: () => handleSocialSignIn(onGoogleSignIn), disabled: loading, accessibilityRole: 'button', accessibilityLabel: 'Continue with Google', accessibilityState: { disabled: loading }, children: _jsx(Text, { style: styles.socialButtonText, children: "Continue with Google" }) })), showAppleSignIn && onAppleSignIn && (_jsx(Pressable, { style: [styles.socialButton, styles.appleButton], onPress: () => handleSocialSignIn(onAppleSignIn), disabled: loading, accessibilityRole: 'button', accessibilityLabel: 'Continue with Apple', accessibilityState: { disabled: loading }, children: _jsx(Text, { style: [styles.socialButtonText, styles.appleButtonText], children: "Continue with Apple" }) }))] })), showSignUp && onSignUp && (_jsx(Pressable, { style: styles.toggleLink, onPress: () => {
                         setIsSignUp(!isSignUp);
                         setError(null);
-                    }, children: _jsx(Text, { style: styles.toggleText, children: isSignUp
+                    }, accessibilityRole: 'button', accessibilityLabel: isSignUp
+                        ? 'Already have an account? Sign in'
+                        : "Don't have an account? Sign up", children: _jsx(Text, { style: styles.toggleText, children: isSignUp
                             ? 'Already have an account? Sign in'
                             : "Don't have an account? Sign up" }) }))] }) }));
 }

package/dist/src/components/settings/AppearanceSettings.js

@@ -3,7 +3,11 @@ import { View, Text, Pressable } from 'react-native';
 import { Theme, FontSize } from '../../types';
 import { createThemedStyles } from '../../utils/styles';
 const THEME_OPTIONS = [
-    { value: Theme.LIGHT, labelKey: 'appearance.theme.light', fallback: 'Light' },
+    {
+        value: Theme.LIGHT,
+        labelKey: 'appearance.theme.light',
+        fallback: 'Light',
+    },
     { value: Theme.DARK, labelKey: 'appearance.theme.dark', fallback: 'Dark' },
     {
         value: Theme.SYSTEM,
@@ -31,19 +35,19 @@ const FONT_SIZE_OPTIONS = [
 export function AppearanceSettings({ theme, fontSize, onThemeChange, onFontSizeChange, t, style, showInfoBox = false, }) {
     const styles = useStyles();
     const translate = (key, fallback) => t?.(key, fallback) ?? fallback;
-    return (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: styles.heading, children: translate('appearance.title', 'Appearance') }), _jsx(Text, { style: styles.label, children: translate('appearance.theme.label', 'Theme') }), _jsx(View, { style: styles.segmentedControl, children: THEME_OPTIONS.map(option => (_jsx(Pressable, { style: [
-                        styles.segment,
-                        theme === option.value && styles.segmentActive,
-                    ], onPress: () => onThemeChange(option.value), children: _jsx(Text, { style: [
-                            styles.segmentText,
-                            theme === option.value && styles.segmentTextActive,
-                        ], children: translate(option.labelKey, option.fallback) }) }, option.value))) }), _jsx(Text, { style: [styles.label, { marginTop: 20 }], children: translate('appearance.fontSize.label', 'Font Size') }), _jsx(View, { style: styles.segmentedControl, children: FONT_SIZE_OPTIONS.map(option => (_jsx(Pressable, { style: [
-                        styles.segment,
-                        fontSize === option.value && styles.segmentActive,
-                    ], onPress: () => onFontSizeChange(option.value), children: _jsx(Text, { style: [
-                            styles.segmentText,
-                            fontSize === option.value && styles.segmentTextActive,
-                        ], children: translate(option.labelKey, option.fallback) }) }, option.value))) }), showInfoBox && (_jsx(View, { style: styles.infoBox, children: _jsx(Text, { style: styles.infoText, children: translate('appearance.infoBox', 'Your appearance preferences are stored locally on this device.') }) }))] }));
+    return (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: styles.heading, accessibilityRole: 'header', children: translate('appearance.title', 'Appearance') }), _jsx(Text, { style: styles.label, children: translate('appearance.theme.label', 'Theme') }), _jsx(View, { style: styles.segmentedControl, accessibilityRole: 'radiogroup', accessibilityLabel: translate('appearance.theme.label', 'Theme'), children: THEME_OPTIONS.map(option => {
+                    const isSelected = theme === option.value;
+                    return (_jsx(Pressable, { style: [styles.segment, isSelected && styles.segmentActive], onPress: () => onThemeChange(option.value), accessibilityRole: 'radio', accessibilityState: { selected: isSelected }, accessibilityLabel: translate(option.labelKey, option.fallback), children: _jsx(Text, { style: [
+                                styles.segmentText,
+                                isSelected && styles.segmentTextActive,
+                            ], children: translate(option.labelKey, option.fallback) }) }, option.value));
+                }) }), _jsx(Text, { style: [styles.label, { marginTop: 20 }], children: translate('appearance.fontSize.label', 'Font Size') }), _jsx(View, { style: styles.segmentedControl, accessibilityRole: 'radiogroup', accessibilityLabel: translate('appearance.fontSize.label', 'Font Size'), children: FONT_SIZE_OPTIONS.map(option => {
+                    const isSelected = fontSize === option.value;
+                    return (_jsx(Pressable, { style: [styles.segment, isSelected && styles.segmentActive], onPress: () => onFontSizeChange(option.value), accessibilityRole: 'radio', accessibilityState: { selected: isSelected }, accessibilityLabel: translate(option.labelKey, option.fallback), children: _jsx(Text, { style: [
+                                styles.segmentText,
+                                isSelected && styles.segmentTextActive,
+                            ], children: translate(option.labelKey, option.fallback) }) }, option.value));
+                }) }), showInfoBox && (_jsx(View, { style: styles.infoBox, children: _jsx(Text, { style: styles.infoText, children: translate('appearance.infoBox', 'Your appearance preferences are stored locally on this device.') }) }))] }));
 }
 const useStyles = createThemedStyles(colors => ({
     container: {

package/dist/src/components/settings/LanguagePicker.js

@@ -1,4 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview Modal-based language selector for React Native.
+ *
+ * Displays a trigger button showing the current language (flag + name) with
+ * a dropdown chevron. Pressing the trigger opens a full-screen modal with a
+ * FlatList of all available languages, each showing flag + name + checkmark
+ * for the current selection.
+ *
+ * @platform ios - Uses `presentationStyle="pageSheet"` for the modal, which
+ *   presents as a card that can be swiped to dismiss (iOS 13+).
+ * @platform android - Uses the default modal presentation (full-screen overlay).
+ *   The `presentationStyle` prop is ignored on Android.
+ */
 import { useState } from 'react';
 import { View, Text, Pressable, Modal, FlatList, SafeAreaView, } from 'react-native';
 import { DEFAULT_LANGUAGES } from '../../constants/languages';
@@ -11,12 +24,14 @@ export function LanguagePicker({ languages = DEFAULT_LANGUAGES, currentLanguage
         onLanguageChange?.(code);
         setModalVisible(false);
     };
-    return (_jsxs(View, { style: style, children: [label && _jsx(Text, { style: styles.label, children: label }), _jsxs(Pressable, { style: styles.trigger, onPress: () => setModalVisible(true), children: [_jsx(Text, { style: styles.triggerText, children: currentLang
+    return (_jsxs(View, { style: style, children: [label && _jsx(Text, { style: styles.label, children: label }), _jsxs(Pressable, { style: styles.trigger, onPress: () => setModalVisible(true), accessibilityRole: 'button', accessibilityLabel: `${label ?? 'Language'}: ${currentLang?.name ?? currentLanguage}. Tap to change.`, children: [_jsx(Text, { style: styles.triggerText, children: currentLang
                             ? `${currentLang.flag} ${currentLang.name}`
-                            : currentLanguage }), _jsx(Text, { style: styles.chevron, children: '\u25BC' })] }), _jsx(Modal, { visible: modalVisible, animationType: 'slide', presentationStyle: 'pageSheet', onRequestClose: () => setModalVisible(false), children: _jsxs(SafeAreaView, { style: styles.modal, children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(Text, { style: styles.modalTitle, children: label ?? 'Select Language' }), _jsx(Pressable, { onPress: () => setModalVisible(false), children: _jsx(Text, { style: styles.closeButton, children: "Done" }) })] }), _jsx(FlatList, { data: languages, keyExtractor: item => item.code, renderItem: ({ item }) => (_jsxs(Pressable, { style: [
+                            : currentLanguage }), _jsx(Text, { style: styles.chevron, children: '\u25BC' })] }), _jsx(Modal, { visible: modalVisible, animationType: 'slide', presentationStyle: 'pageSheet', onRequestClose: () => setModalVisible(false), children: _jsxs(SafeAreaView, { style: styles.modal, children: [_jsxs(View, { style: styles.modalHeader, children: [_jsx(Text, { style: styles.modalTitle, accessibilityRole: 'header', children: label ?? 'Select Language' }), _jsx(Pressable, { onPress: () => setModalVisible(false), accessibilityRole: 'button', accessibilityLabel: 'Done, close language picker', children: _jsx(Text, { style: styles.closeButton, children: "Done" }) })] }), _jsx(FlatList, { data: languages, keyExtractor: item => item.code, renderItem: ({ item }) => (_jsxs(Pressable, { style: [
                                     styles.languageRow,
                                     item.code === currentLanguage && styles.languageRowActive,
-                                ], onPress: () => handleSelect(item.code), children: [_jsx(Text, { style: styles.flag, children: item.flag }), _jsx(Text, { style: styles.languageName, children: item.name }), item.code === currentLanguage && (_jsx(Text, { style: styles.checkmark, children: '\u2713' }))] })), ItemSeparatorComponent: () => _jsx(View, { style: styles.separator }) })] }) })] }));
+                                ], onPress: () => handleSelect(item.code), accessibilityRole: 'radio', accessibilityState: {
+                                    selected: item.code === currentLanguage,
+                                }, accessibilityLabel: `${item.name}${item.code === currentLanguage ? ', selected' : ''}`, children: [_jsx(Text, { style: styles.flag, children: item.flag }), _jsx(Text, { style: styles.languageName, children: item.name }), item.code === currentLanguage && (_jsx(Text, { style: styles.checkmark, children: '\u2713' }))] })), ItemSeparatorComponent: () => _jsx(View, { style: styles.separator }) })] }) })] }));
 }
 const useStyles = createThemedStyles(colors => ({
     label: {
@@ -80,7 +95,7 @@ const useStyles = createThemedStyles(colors => ({
     },
     flag: {
         fontSize: 20,
-        marginRight: 12,
+        marginEnd: 12,
     },
     languageName: {
         fontSize: 16,
@@ -95,6 +110,6 @@ const useStyles = createThemedStyles(colors => ({
     separator: {
         height: 1,
         backgroundColor: colors.border,
-        marginLeft: 48,
+        marginStart: 48,
     },
 }));