@sudobility/building_blocks_rn 0.0.2

package/dist/firebase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Firebase Auth dependent components
+ *
+ * These components require Firebase auth to be set up.
+ * Import from '@sudobility/building_blocks_rn/firebase' to use these.
+ */
+export { SudobilityAppRNWithFirebaseAuth } from './src/app/SudobilityAppRNWithFirebaseAuth';
+export type { SudobilityAppRNWithFirebaseAuthProps } from './src/app/SudobilityAppRNWithFirebaseAuth';
+export { ApiProvider, ApiContext, useApi, useApiSafe, } from './src/api/ApiContext';
+export type { ApiContextValue, ApiProviderProps, NetworkClient, } from './src/api/ApiContext';

package/dist/firebase.js

@@ -0,0 +1,10 @@
+/**
+ * Firebase Auth dependent components
+ *
+ * These components require Firebase auth to be set up.
+ * Import from '@sudobility/building_blocks_rn/firebase' to use these.
+ */
+// App wrappers with Firebase auth
+export { SudobilityAppRNWithFirebaseAuth } from './src/app/SudobilityAppRNWithFirebaseAuth';
+// API context
+export { ApiProvider, ApiContext, useApi, useApiSafe, } from './src/api/ApiContext';

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export * from './src/components/header';
+export * from './src/components/footer';
+export * from './src/components/layout';
+export * from './src/components/settings';
+export * from './src/components/pages';
+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';
+export { createThemedStyles } from './src/utils';
+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 { initializeI18nRN, getI18n, i18n } from './src/i18n';
+export type { I18nConfig } from './src/i18n';

package/dist/index.js

@@ -0,0 +1,25 @@
+// Core components (no auth dependency)
+export * from './src/components/header';
+export * from './src/components/footer';
+export * from './src/components/layout';
+export * from './src/components/settings';
+export * from './src/components/pages';
+// App wrapper without auth dependency
+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
+export * from './src/constants';
+// Types
+export * from './src/types';
+// Utils
+export { createThemedStyles } from './src/utils';
+// Hooks
+export { useResponsive } from './src/hooks';
+// Toast
+export { ToastProvider, useToast } from './src/components/toast';
+// i18n
+export { initializeI18nRN, getI18n, i18n } from './src/i18n';

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

@@ -0,0 +1,52 @@
+import React from 'react';
+export interface NetworkClient {
+    request: <T>(url: string, options?: RequestInit) => Promise<T>;
+    get: <T>(url: string, options?: Omit<RequestInit, 'method' | 'body'>) => Promise<T>;
+    post: <T>(url: string, body?: unknown, options?: Omit<RequestInit, 'method'>) => Promise<T>;
+    put: <T>(url: string, body?: unknown, options?: Omit<RequestInit, 'method'>) => Promise<T>;
+    delete: <T>(url: string, options?: Omit<RequestInit, 'method' | 'body'>) => Promise<T>;
+}
+export interface ApiContextValue {
+    /** Network client for making API requests */
+    networkClient: NetworkClient;
+    /** Base URL for API calls */
+    baseUrl: string;
+    /** Authentication token (null if not logged in) */
+    token: string | null;
+    /** User ID (null if not logged in) */
+    userId: string | null;
+    /** Whether the context is ready */
+    isReady: boolean;
+    /** Whether authentication is loading */
+    isLoading: boolean;
+    /** Refresh the auth token */
+    refreshToken?: () => Promise<string | null>;
+}
+declare const ApiContext: React.Context<ApiContextValue | null>;
+export interface ApiProviderProps {
+    children: React.ReactNode;
+    /** Base URL for API calls */
+    baseUrl: string;
+    /** Authentication token */
+    token: string | null;
+    /** User ID */
+    userId: string | null;
+    /** Whether auth state is determined */
+    isReady: boolean;
+    /** Whether auth is loading */
+    isLoading: boolean;
+    /** Optional custom network client */
+    networkClient?: NetworkClient;
+    /** Optional token refresh function */
+    refreshToken?: () => Promise<string | null>;
+}
+export declare function ApiProvider({ children, baseUrl, token, userId, isReady, isLoading, networkClient, refreshToken, }: ApiProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access API context. Throws if not within an ApiProvider.
+ */
+export declare function useApi(): ApiContextValue;
+/**
+ * Safely access API context. Returns null if not within an ApiProvider.
+ */
+export declare function useApiSafe(): ApiContextValue | null;
+export { ApiContext };

package/dist/src/api/ApiContext.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const ApiContext = createContext(null);
+function createDefaultNetworkClient() {
+    async function makeRequest(url, options) {
+        const response = await fetch(url, {
+            headers: { 'Content-Type': 'application/json', ...options?.headers },
+            ...options,
+        });
+        const json = await response.json();
+        return json;
+    }
+    return {
+        request: makeRequest,
+        get: (url, options) => makeRequest(url, { ...options, method: 'GET' }),
+        post: (url, body, options) => makeRequest(url, {
+            ...options,
+            method: 'POST',
+            body: body ? JSON.stringify(body) : undefined,
+        }),
+        put: (url, body, options) => makeRequest(url, {
+            ...options,
+            method: 'PUT',
+            body: body ? JSON.stringify(body) : undefined,
+        }),
+        delete: (url, options) => makeRequest(url, { ...options, method: 'DELETE' }),
+    };
+}
+export function ApiProvider({ children, baseUrl, token, userId, isReady, isLoading, networkClient, refreshToken, }) {
+    const defaultClient = useMemo(() => createDefaultNetworkClient(), []);
+    const value = useMemo(() => ({
+        networkClient: networkClient ?? defaultClient,
+        baseUrl,
+        token,
+        userId,
+        isReady,
+        isLoading,
+        refreshToken,
+    }), [
+        networkClient,
+        defaultClient,
+        baseUrl,
+        token,
+        userId,
+        isReady,
+        isLoading,
+        refreshToken,
+    ]);
+    return _jsx(ApiContext.Provider, { value: value, children: children });
+}
+/**
+ * Hook to access API context. Throws if not within an ApiProvider.
+ */
+export function useApi() {
+    const context = useContext(ApiContext);
+    if (!context) {
+        throw new Error('useApi must be used within an ApiProvider');
+    }
+    return context;
+}
+/**
+ * Safely access API context. Returns null if not within an ApiProvider.
+ */
+export function useApiSafe() {
+    return useContext(ApiContext);
+}
+export { ApiContext };

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

@@ -0,0 +1,2 @@
+export { ApiProvider, ApiContext, useApi, useApiSafe } from './ApiContext';
+export type { ApiContextValue, ApiProviderProps, NetworkClient, } from './ApiContext';

package/dist/src/api/index.js

@@ -0,0 +1 @@
+export { ApiProvider, ApiContext, useApi, useApiSafe } from './ApiContext';

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

@@ -0,0 +1,29 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { i18n as I18nInstance } from 'i18next';
+import { Theme } from '../types';
+export interface SudobilityAppRNProps {
+    children: ReactNode;
+    /** Pre-configured i18n instance */
+    i18n?: I18nInstance;
+    /** Optional custom ThemeProvider wrapper */
+    ThemeProviderComponent?: ComponentType<{
+        children: ReactNode;
+    }>;
+    /** Optional custom ToastProvider wrapper */
+    ToastProviderComponent?: ComponentType<{
+        children: ReactNode;
+    }>;
+    /** Query client provider (e.g., from @tanstack/react-query) */
+    QueryClientProvider?: ComponentType<{
+        children: ReactNode;
+    }>;
+    /** Optional additional providers to wrap around children */
+    AppProviders?: ComponentType<{
+        children: ReactNode;
+    }>;
+    /** Initial theme */
+    initialTheme?: Theme;
+    /** Storage key prefix for persisted settings */
+    storageKeyPrefix?: string;
+}
+export declare function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, }: SudobilityAppRNProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/app/SudobilityAppRN.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider } from '../theme/ThemeContext';
+import { ToastProvider } from '../components/toast/ToastProvider';
+export function SudobilityAppRN({ children, i18n, ThemeProviderComponent, ToastProviderComponent, QueryClientProvider, AppProviders, initialTheme, storageKeyPrefix, }) {
+    let content = _jsx(_Fragment, { children: children });
+    // Wrap with additional providers (innermost)
+    if (AppProviders) {
+        content = _jsx(AppProviders, { children: content });
+    }
+    // Toast
+    if (ToastProviderComponent) {
+        content = _jsx(ToastProviderComponent, { children: content });
+    }
+    else {
+        content = _jsx(ToastProvider, { children: content });
+    }
+    // Query client
+    if (QueryClientProvider) {
+        content = _jsx(QueryClientProvider, { children: content });
+    }
+    // Theme
+    if (ThemeProviderComponent) {
+        content = _jsx(ThemeProviderComponent, { children: content });
+    }
+    else {
+        content = (_jsx(ThemeProvider, { initialTheme: initialTheme, storageKeyPrefix: storageKeyPrefix, children: content }));
+    }
+    // i18n
+    if (i18n) {
+        content = _jsx(I18nextProvider, { i18n: i18n, children: content });
+    }
+    // SafeArea (outermost)
+    content = _jsx(SafeAreaProvider, { children: content });
+    return content;
+}

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

@@ -0,0 +1,13 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { SudobilityAppRNProps } from './SudobilityAppRN';
+export interface SudobilityAppRNWithFirebaseAuthProps extends SudobilityAppRNProps {
+    /** Firebase auth provider component */
+    AuthProvider: ComponentType<{
+        children: ReactNode;
+    }>;
+    /** API provider component (wraps children with auth-aware API context) */
+    ApiProviderComponent?: ComponentType<{
+        children: ReactNode;
+    }>;
+}
+export declare function SudobilityAppRNWithFirebaseAuth({ children, AuthProvider, ApiProviderComponent, ...appProps }: SudobilityAppRNWithFirebaseAuthProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/app/SudobilityAppRNWithFirebaseAuth.js

@@ -0,0 +1,12 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { SudobilityAppRN } from './SudobilityAppRN';
+export function SudobilityAppRNWithFirebaseAuth({ children, AuthProvider, ApiProviderComponent, ...appProps }) {
+    let content = _jsx(_Fragment, { children: children });
+    // API provider (innermost of auth stack)
+    if (ApiProviderComponent) {
+        content = _jsx(ApiProviderComponent, { children: content });
+    }
+    // Auth provider
+    content = _jsx(AuthProvider, { children: content });
+    return _jsx(SudobilityAppRN, { ...appProps, children: content });
+}

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

@@ -0,0 +1,4 @@
+export { SudobilityAppRN } from './SudobilityAppRN';
+export type { SudobilityAppRNProps } from './SudobilityAppRN';
+export { SudobilityAppRNWithFirebaseAuth } from './SudobilityAppRNWithFirebaseAuth';
+export type { SudobilityAppRNWithFirebaseAuthProps } from './SudobilityAppRNWithFirebaseAuth';

package/dist/src/app/index.js

@@ -0,0 +1,2 @@
+export { SudobilityAppRN } from './SudobilityAppRN';
+export { SudobilityAppRNWithFirebaseAuth } from './SudobilityAppRNWithFirebaseAuth';

package/dist/src/components/footer/AppFooter.d.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { FooterLinkItem, AnalyticsTrackingParams } from '../../types';
+export interface AppFooterProps {
+    /** App version string */
+    version?: string;
+    /** Copyright year */
+    copyrightYear?: string;
+    /** Company name */
+    companyName: string;
+    /** Company URL (opened via Linking) */
+    companyUrl?: string;
+    /** Rights text (default: "All rights reserved.") */
+    rightsText?: string;
+    /** Footer links (Privacy, Terms, etc.) */
+    links?: FooterLinkItem[];
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+    /** Analytics tracking */
+    onTrack?: (params: AnalyticsTrackingParams) => void;
+}
+export declare function AppFooter({ version, copyrightYear, companyName, companyUrl, rightsText, links, style, onTrack, }: AppFooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,72 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View, Text, Pressable, Linking } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+export function AppFooter({ version, copyrightYear, companyName, companyUrl, rightsText = 'All rights reserved.', links, style, onTrack, }) {
+    const styles = useStyles();
+    const handleLinkPress = (link) => {
+        onTrack?.({
+            eventType: 'link_click',
+            componentName: 'AppFooter',
+            label: 'footer_link_clicked',
+            params: { link_label: link.label },
+        });
+        if (link.onPress) {
+            link.onPress();
+        }
+        else if (link.url) {
+            Linking.openURL(link.url);
+        }
+    };
+    const handleCompanyPress = () => {
+        if (companyUrl) {
+            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))) }))] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderTopWidth: 1,
+        borderTopColor: colors.border,
+        backgroundColor: colors.card,
+    },
+    topRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        flexWrap: 'wrap',
+    },
+    versionText: {
+        fontSize: 12,
+        color: colors.textMuted,
+    },
+    copyrightText: {
+        fontSize: 12,
+        color: colors.textSecondary,
+        textAlign: 'center',
+    },
+    companyLink: {
+        color: colors.primary,
+        textDecorationLine: 'underline',
+    },
+    linksRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 8,
+        gap: 8,
+        flexWrap: 'wrap',
+    },
+    separator: {
+        color: colors.textMuted,
+        fontSize: 12,
+    },
+    linkText: {
+        fontSize: 12,
+        color: colors.textSecondary,
+    },
+}));

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

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

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

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

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { MenuItemConfig, LogoConfig } from '../../types';
+export interface AppHeaderProps {
+    /** Logo configuration */
+    logo: LogoConfig;
+    /** Menu items (shown as icon buttons on the right) */
+    menuItems?: MenuItemConfig[];
+    /** Optional left section (e.g., back button) */
+    renderLeft?: () => React.ReactNode;
+    /** Optional right section (e.g., profile icon, account button) */
+    renderRight?: () => React.ReactNode;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function AppHeader({ logo, menuItems, renderLeft, renderRight, style, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Create React Navigation screen options from header config.
+ * Useful for integrating AppHeader into a navigation stack.
+ */
+export declare function createAppHeaderOptions(config: {
+    logo: LogoConfig;
+    menuItems?: MenuItemConfig[];
+    renderRight?: () => React.ReactNode;
+}): {
+    headerTitle: () => import("react/jsx-runtime").JSX.Element;
+    headerRight: (() => import("react/jsx-runtime").JSX.Element) | undefined;
+};

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Image, Pressable, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme/ThemeContext';
+export function AppHeader({ logo, menuItems, renderLeft, renderRight, style, }) {
+    const { colors } = useTheme();
+    return (_jsxs(View, { 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
+                        ?.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));
+                    }), renderRight?.()] })] }));
+}
+/**
+ * Create React Navigation screen options from header config.
+ * Useful for integrating AppHeader into a navigation stack.
+ */
+export function createAppHeaderOptions(config) {
+    return {
+        headerTitle: () => (_jsxs(View, { style: styles.logoContainer, children: [config.logo.source && (_jsx(Image, { source: config.logo.source, style: styles.logoImage, resizeMode: 'contain' })), _jsx(Text, { style: styles.headerTitle, children: config.logo.appName })] })),
+        headerRight: config.renderRight
+            ? () => _jsx(View, { style: styles.headerRightNav, children: config.renderRight() })
+            : undefined,
+    };
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    leftSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+    },
+    rightSection: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    logoContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    logoImage: {
+        width: 28,
+        height: 28,
+    },
+    appName: {
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    menuButton: {
+        padding: 8,
+        borderRadius: 8,
+        minWidth: 44,
+        minHeight: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    headerRightNav: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        marginRight: 8,
+    },
+});

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

@@ -0,0 +1,2 @@
+export { AppHeader, createAppHeaderOptions } from './AppHeader';
+export type { AppHeaderProps } from './AppHeader';

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface AppScreenLayoutProps {
+    children: React.ReactNode;
+    /** Optional header component (rendered above scroll content) */
+    header?: React.ReactNode;
+    /** Optional footer component (rendered below scroll content) */
+    footer?: React.ReactNode;
+    /** Whether to wrap content in a ScrollView (default: true) */
+    scrollable?: boolean;
+    /** Content padding */
+    contentPadding?: 'none' | 'sm' | 'md' | 'lg';
+    /** Background variant */
+    background?: 'default' | 'white';
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom content style */
+    contentStyle?: StyleProp<ViewStyle>;
+}
+export declare function AppScreenLayout({ children, header, footer, scrollable, contentPadding, background, style, contentStyle, }: AppScreenLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/layout/AppScreenLayout.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { createThemedStyles } from '../../utils/styles';
+const paddingMap = {
+    none: 0,
+    sm: 8,
+    md: 16,
+    lg: 24,
+};
+export function AppScreenLayout({ children, header, footer, scrollable = true, contentPadding = 'md', background = 'default', style, contentStyle, }) {
+    const styles = useStyles();
+    const backgroundStyle = background === 'white' ? styles.bgWhite : styles.bgDefault;
+    const padding = paddingMap[contentPadding];
+    const content = (_jsx(View, { style: [
+            { paddingHorizontal: padding, flex: scrollable ? undefined : 1 },
+            contentStyle,
+        ], children: children }));
+    return (_jsxs(SafeAreaView, { style: [styles.container, backgroundStyle, style], edges: ['top', 'left', 'right'], children: [header, scrollable ? (_jsx(ScrollView, { style: styles.scrollView, contentContainerStyle: styles.scrollContent, keyboardShouldPersistTaps: 'handled', children: content })) : (_jsx(View, { style: styles.fixedContent, children: content })), footer] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        flex: 1,
+    },
+    bgDefault: {
+        backgroundColor: colors.background,
+    },
+    bgWhite: {
+        backgroundColor: colors.card,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+        paddingBottom: 16,
+    },
+    fixedContent: {
+        flex: 1,
+    },
+}));

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

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

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { TextPageContent } from '../../types';
+export interface AppTextScreenProps {
+    /** Structured text content (same data type as web) */
+    text: TextPageContent;
+    /** Last updated date override */
+    lastUpdatedDate?: string;
+    /** Optional screen wrapper component */
+    ScreenWrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function AppTextScreen({ text, lastUpdatedDate, ScreenWrapper, style, }: AppTextScreenProps): import("react/jsx-runtime").JSX.Element;