@sudobility/building_blocks_rn 0.0.2

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, ScrollView } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+function TextSectionView({ section, level = 2, }) {
+    const styles = useStyles();
+    return (_jsxs(View, { style: styles.section, children: [_jsx(Text, { style: level === 2 ? styles.sectionTitle : styles.subsectionTitle, children: section.title }), section.content && (_jsx(Text, { style: styles.sectionContent, children: section.content })), section.items && section.items.length > 0 && (_jsx(View, { style: styles.list, children: section.items.map((item, index) => (_jsxs(View, { style: styles.listItem, children: [_jsx(Text, { style: styles.bullet, children: '\u2022' }), _jsx(Text, { style: styles.listItemText, children: item })] }, index))) })), section.subsections?.map((sub, index) => (_jsx(TextSectionView, { section: sub, level: 3 }, index)))] }));
+}
+export function AppTextScreen({ text, lastUpdatedDate, ScreenWrapper, style, }) {
+    const styles = useStyles();
+    const lastUpdated = text.lastUpdated
+        ? text.lastUpdated.replace('{{date}}', lastUpdatedDate ?? '')
+        : lastUpdatedDate
+            ? `Last updated: ${lastUpdatedDate}`
+            : undefined;
+    const content = (_jsxs(View, { style: [styles.container, style], children: [_jsx(Text, { style: styles.title, children: text.title }), lastUpdated && _jsx(Text, { style: styles.lastUpdated, children: lastUpdated }), text.sections.map((section, index) => (_jsx(TextSectionView, { section: section }, index))), text.contact && (_jsxs(View, { style: styles.contactSection, children: [_jsx(Text, { style: styles.sectionTitle, children: text.contact.title }), _jsx(Text, { style: styles.sectionContent, children: text.contact.description }), _jsx(Text, { style: styles.contactInfo, children: text.contact.info }), text.contact.gdprNotice && (_jsx(Text, { style: styles.gdprNotice, children: text.contact.gdprNotice }))] }))] }));
+    if (ScreenWrapper) {
+        return _jsx(ScreenWrapper, { children: content });
+    }
+    return (_jsx(ScrollView, { contentContainerStyle: styles.scrollContent, children: content }));
+}
+const useStyles = createThemedStyles(colors => ({
+    scrollContent: {
+        flexGrow: 1,
+    },
+    container: {
+        padding: 16,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: colors.text,
+        marginBottom: 8,
+    },
+    lastUpdated: {
+        fontSize: 14,
+        color: colors.textMuted,
+        marginBottom: 24,
+    },
+    section: {
+        marginBottom: 24,
+    },
+    sectionTitle: {
+        fontSize: 20,
+        fontWeight: '600',
+        color: colors.text,
+        marginBottom: 8,
+    },
+    subsectionTitle: {
+        fontSize: 17,
+        fontWeight: '600',
+        color: colors.text,
+        marginBottom: 6,
+    },
+    sectionContent: {
+        fontSize: 15,
+        lineHeight: 22,
+        color: colors.textSecondary,
+    },
+    list: {
+        marginTop: 8,
+        gap: 6,
+    },
+    listItem: {
+        flexDirection: 'row',
+        paddingLeft: 8,
+    },
+    bullet: {
+        fontSize: 15,
+        color: colors.textSecondary,
+        marginRight: 8,
+        lineHeight: 22,
+    },
+    listItemText: {
+        fontSize: 15,
+        lineHeight: 22,
+        color: colors.textSecondary,
+        flex: 1,
+    },
+    contactSection: {
+        marginTop: 16,
+        padding: 16,
+        backgroundColor: colors.surfaceSecondary,
+        borderRadius: 12,
+    },
+    contactInfo: {
+        fontSize: 15,
+        color: colors.primary,
+        marginTop: 8,
+    },
+    gdprNotice: {
+        fontSize: 13,
+        color: colors.textMuted,
+        marginTop: 12,
+        fontStyle: 'italic',
+    },
+}));

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

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface LoginScreenProps {
+    /** App name displayed in the header */
+    appName: string;
+    /** Logo image source */
+    logo?: number | {
+        uri: string;
+    };
+    /** Called on successful login with email and password */
+    onLogin: (email: string, password: string) => Promise<void>;
+    /** Called on successful sign up with email and password */
+    onSignUp?: (email: string, password: string) => Promise<void>;
+    /** Called when Google sign-in is pressed */
+    onGoogleSignIn?: () => Promise<void>;
+    /** Called when Apple sign-in is pressed */
+    onAppleSignIn?: () => Promise<void>;
+    /** Whether to show Google sign-in button */
+    showGoogleSignIn?: boolean;
+    /** Whether to show Apple sign-in button */
+    showAppleSignIn?: boolean;
+    /** Whether to show sign-up option */
+    showSignUp?: boolean;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function LoginScreen({ appName, logo, onLogin, onSignUp, onGoogleSignIn, onAppleSignIn, showGoogleSignIn, showAppleSignIn, showSignUp, style, }: LoginScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,183 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { View, Text, TextInput, Pressable, ActivityIndicator, Image, KeyboardAvoidingView, Platform, } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+export function LoginScreen({ appName, logo, onLogin, onSignUp, onGoogleSignIn, onAppleSignIn, showGoogleSignIn = false, showAppleSignIn = false, showSignUp = true, style, }) {
+    const styles = useStyles();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [isSignUp, setIsSignUp] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const handleSubmit = useCallback(async () => {
+        if (!email.trim() || !password.trim()) {
+            setError('Please enter email and password.');
+            return;
+        }
+        setError(null);
+        setLoading(true);
+        try {
+            if (isSignUp && onSignUp) {
+                await onSignUp(email.trim(), password);
+            }
+            else {
+                await onLogin(email.trim(), password);
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'An error occurred.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [email, password, isSignUp, onLogin, onSignUp]);
+    const handleSocialSignIn = useCallback(async (signIn) => {
+        setError(null);
+        setLoading(true);
+        try {
+            await signIn();
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'An error occurred.');
+        }
+        finally {
+            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: [
+                                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: () => {
+                        setIsSignUp(!isSignUp);
+                        setError(null);
+                    }, children: _jsx(Text, { style: styles.toggleText, children: isSignUp
+                            ? 'Already have an account? Sign in'
+                            : "Don't have an account? Sign up" }) }))] }) }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: colors.background,
+        paddingHorizontal: 24,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 400,
+        backgroundColor: colors.card,
+        borderRadius: 16,
+        padding: 24,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+    },
+    logo: {
+        width: 48,
+        height: 48,
+        alignSelf: 'center',
+        marginBottom: 16,
+    },
+    title: {
+        fontSize: 22,
+        fontWeight: '700',
+        color: colors.text,
+        textAlign: 'center',
+        marginBottom: 20,
+    },
+    errorBox: {
+        backgroundColor: '#fef2f2',
+        borderRadius: 8,
+        padding: 12,
+        marginBottom: 16,
+    },
+    errorText: {
+        color: colors.error,
+        fontSize: 14,
+    },
+    form: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: colors.text,
+        marginTop: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 16,
+        color: colors.text,
+        backgroundColor: colors.background,
+    },
+    submitButton: {
+        backgroundColor: colors.primary,
+        borderRadius: 8,
+        paddingVertical: 12,
+        alignItems: 'center',
+        marginTop: 8,
+        minHeight: 44,
+        justifyContent: 'center',
+    },
+    submitButtonDisabled: {
+        opacity: 0.6,
+    },
+    submitButtonText: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    socialSection: {
+        marginTop: 20,
+        gap: 12,
+    },
+    divider: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: colors.border,
+    },
+    dividerText: {
+        marginHorizontal: 12,
+        fontSize: 14,
+        color: colors.textMuted,
+    },
+    socialButton: {
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: 8,
+        paddingVertical: 12,
+        alignItems: 'center',
+        minHeight: 44,
+        justifyContent: 'center',
+    },
+    socialButtonText: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: colors.text,
+    },
+    appleButton: {
+        backgroundColor: '#000000',
+        borderColor: '#000000',
+    },
+    appleButtonText: {
+        color: '#ffffff',
+    },
+    toggleLink: {
+        marginTop: 16,
+        alignItems: 'center',
+    },
+    toggleText: {
+        fontSize: 14,
+        color: colors.primary,
+    },
+}));

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

@@ -0,0 +1,4 @@
+export { AppTextScreen } from './AppTextScreen';
+export type { AppTextScreenProps } from './AppTextScreen';
+export { LoginScreen } from './LoginScreen';
+export type { LoginScreenProps } from './LoginScreen';

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

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

package/dist/src/components/settings/AppearanceSettings.d.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Theme, FontSize } from '../../types';
+export interface AppearanceSettingsProps {
+    theme: Theme | string;
+    fontSize: FontSize | string;
+    onThemeChange: (theme: Theme) => void;
+    onFontSizeChange: (fontSize: FontSize) => void;
+    /** Optional translation function */
+    t?: (key: string, fallback?: string) => string;
+    style?: StyleProp<ViewStyle>;
+    showInfoBox?: boolean;
+}
+export declare function AppearanceSettings({ theme, fontSize, onThemeChange, onFontSizeChange, t, style, showInfoBox, }: AppearanceSettingsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.DARK, labelKey: 'appearance.theme.dark', fallback: 'Dark' },
+    {
+        value: Theme.SYSTEM,
+        labelKey: 'appearance.theme.system',
+        fallback: 'System',
+    },
+];
+const FONT_SIZE_OPTIONS = [
+    {
+        value: FontSize.SMALL,
+        labelKey: 'appearance.fontSize.small',
+        fallback: 'Small',
+    },
+    {
+        value: FontSize.MEDIUM,
+        labelKey: 'appearance.fontSize.medium',
+        fallback: 'Medium',
+    },
+    {
+        value: FontSize.LARGE,
+        labelKey: 'appearance.fontSize.large',
+        fallback: 'Large',
+    },
+];
+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.') }) }))] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        padding: 16,
+    },
+    heading: {
+        fontSize: 20,
+        fontWeight: '600',
+        color: colors.text,
+        marginBottom: 20,
+    },
+    label: {
+        fontSize: 15,
+        fontWeight: '500',
+        color: colors.textSecondary,
+        marginBottom: 8,
+    },
+    segmentedControl: {
+        flexDirection: 'row',
+        backgroundColor: colors.surfaceSecondary,
+        borderRadius: 10,
+        padding: 3,
+    },
+    segment: {
+        flex: 1,
+        paddingVertical: 10,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 40,
+    },
+    segmentActive: {
+        backgroundColor: colors.card,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    segmentText: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: colors.textSecondary,
+    },
+    segmentTextActive: {
+        color: colors.text,
+        fontWeight: '600',
+    },
+    infoBox: {
+        marginTop: 20,
+        padding: 12,
+        backgroundColor: colors.surfaceSecondary,
+        borderRadius: 8,
+    },
+    infoText: {
+        fontSize: 13,
+        color: colors.textMuted,
+        lineHeight: 18,
+    },
+}));

package/dist/src/components/settings/LanguagePicker.d.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { LanguageConfig } from '../../constants/languages';
+export interface LanguagePickerProps {
+    /** Available languages (default: DEFAULT_LANGUAGES) */
+    languages?: LanguageConfig[];
+    /** Currently selected language code */
+    currentLanguage?: string;
+    /** Called when a language is selected */
+    onLanguageChange?: (languageCode: string) => void;
+    /** Label displayed above the picker */
+    label?: string;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function LanguagePicker({ languages, currentLanguage, onLanguageChange, label, style, }: LanguagePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { View, Text, Pressable, Modal, FlatList, SafeAreaView, } from 'react-native';
+import { DEFAULT_LANGUAGES } from '../../constants/languages';
+import { createThemedStyles } from '../../utils/styles';
+export function LanguagePicker({ languages = DEFAULT_LANGUAGES, currentLanguage = 'en', onLanguageChange, label, style, }) {
+    const styles = useStyles();
+    const [modalVisible, setModalVisible] = useState(false);
+    const currentLang = languages.find(l => l.code === currentLanguage);
+    const handleSelect = (code) => {
+        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
+                            ? `${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: [
+                                    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 }) })] }) })] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    label: {
+        fontSize: 15,
+        fontWeight: '500',
+        color: colors.textSecondary,
+        marginBottom: 8,
+    },
+    trigger: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 12,
+        backgroundColor: colors.card,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        minHeight: 44,
+    },
+    triggerText: {
+        fontSize: 16,
+        color: colors.text,
+    },
+    chevron: {
+        fontSize: 10,
+        color: colors.textMuted,
+    },
+    modal: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    modalHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+    },
+    modalTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: colors.text,
+    },
+    closeButton: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: colors.primary,
+    },
+    languageRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        minHeight: 48,
+    },
+    languageRowActive: {
+        backgroundColor: colors.surfaceSecondary,
+    },
+    flag: {
+        fontSize: 20,
+        marginRight: 12,
+    },
+    languageName: {
+        fontSize: 16,
+        color: colors.text,
+        flex: 1,
+    },
+    checkmark: {
+        fontSize: 18,
+        color: colors.primary,
+        fontWeight: '600',
+    },
+    separator: {
+        height: 1,
+        backgroundColor: colors.border,
+        marginLeft: 48,
+    },
+}));

package/dist/src/components/settings/SettingsListScreen.d.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SettingsSectionConfig, AnalyticsTrackingParams } from '../../types';
+export interface SettingsListScreenProps {
+    /** Settings sections to display */
+    sections: SettingsSectionConfig[];
+    /** Called when a section is pressed */
+    onSectionPress: (sectionId: string) => void;
+    /** Title displayed at the top */
+    title?: string;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+    /** Analytics tracking */
+    onTrack?: (params: AnalyticsTrackingParams) => void;
+}
+export declare function SettingsListScreen({ sections, onSectionPress, title, style, onTrack, }: SettingsListScreenProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, Pressable, ScrollView } from 'react-native';
+import { createThemedStyles } from '../../utils/styles';
+export function SettingsListScreen({ sections, onSectionPress, title = 'Settings', style, onTrack, }) {
+    const styles = useStyles();
+    const handlePress = (section) => {
+        onTrack?.({
+            eventType: 'navigation',
+            componentName: 'SettingsListScreen',
+            label: 'settings_section_tapped',
+            params: { section_id: section.id },
+        });
+        onSectionPress(section.id);
+    };
+    return (_jsxs(ScrollView, { style: [styles.container, style], contentContainerStyle: styles.content, children: [_jsx(Text, { style: styles.title, children: title }), _jsx(View, { style: styles.sectionList, children: sections.map((section, index) => {
+                    const IconComponent = section.icon;
+                    return (_jsxs(Pressable, { style: [
+                            styles.sectionRow,
+                            index < sections.length - 1 && styles.sectionRowBorder,
+                        ], onPress: () => handlePress(section), children: [IconComponent && (_jsx(View, { style: styles.iconContainer, children: _jsx(IconComponent, { size: 20, color: styles.iconColor.color }) })), _jsxs(View, { style: styles.sectionInfo, children: [_jsx(Text, { style: styles.sectionLabel, children: section.label }), section.description && (_jsx(Text, { style: styles.sectionDescription, children: section.description }))] }), _jsx(Text, { style: styles.chevron, children: '\u203A' })] }, section.id));
+                }) })] }));
+}
+const useStyles = createThemedStyles(colors => ({
+    container: {
+        flex: 1,
+        backgroundColor: colors.background,
+    },
+    content: {
+        padding: 16,
+    },
+    title: {
+        fontSize: 28,
+        fontWeight: '700',
+        color: colors.text,
+        marginBottom: 20,
+    },
+    sectionList: {
+        backgroundColor: colors.card,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    sectionRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        minHeight: 56,
+    },
+    sectionRowBorder: {
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+    },
+    iconContainer: {
+        width: 32,
+        height: 32,
+        borderRadius: 8,
+        backgroundColor: colors.surfaceSecondary,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    iconColor: {
+        color: colors.primary,
+    },
+    sectionInfo: {
+        flex: 1,
+    },
+    sectionLabel: {
+        fontSize: 16,
+        fontWeight: '500',
+        color: colors.text,
+    },
+    sectionDescription: {
+        fontSize: 13,
+        color: colors.textMuted,
+        marginTop: 2,
+    },
+    chevron: {
+        fontSize: 22,
+        color: colors.textMuted,
+        marginLeft: 8,
+    },
+}));

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

@@ -0,0 +1,6 @@
+export { AppearanceSettings } from './AppearanceSettings';
+export type { AppearanceSettingsProps } from './AppearanceSettings';
+export { SettingsListScreen } from './SettingsListScreen';
+export type { SettingsListScreenProps } from './SettingsListScreen';
+export { LanguagePicker } from './LanguagePicker';
+export type { LanguagePickerProps } from './LanguagePicker';

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

@@ -0,0 +1,3 @@
+export { AppearanceSettings } from './AppearanceSettings';
+export { SettingsListScreen } from './SettingsListScreen';
+export { LanguagePicker } from './LanguagePicker';