@forthtilliath/react-native-kit 0.9.0 → 0.11.0

package/README.md

@@ -1,6 +1,6 @@
 # @forthtilliath/react-native-kit
 
-Small React Native building blocks — components, hooks, and framework-agnostic utils — with no opinion on your app's theme, distributed one file per export (grouped under `components/{picker,theme,update,list}/`, `hooks/`, `utils/{format,helpers}/`) so consumers only pull in what they use.
+Small React Native building blocks — components, hooks, and framework-agnostic utils — with no opinion on your app's theme, distributed one file per export (grouped under `components/{picker,theme,update,list,settings}/`, `hooks/`, `utils/{format,helpers}/`) so consumers only pull in what they use.
 
 ## Install
 
@@ -294,6 +294,201 @@ import { UpdateAvailableBanner } from "@forthtilliath/react-native-kit/component
 }
 ```
 
+### Settings screens (`components/settings/`)
+
+The building blocks of a typical app "Settings" tab — menu, theme, update check, backup, about, contact, privacy — factored out so each new app stops rewriting the same ~7 screens from scratch. Expo Router (or any file-based router) still needs one physical route file per screen in your app; these just give each route file almost nothing left to write beyond rendering the matching component. None of them add new peer dependencies beyond what's already listed above.
+
+```tsx
+// app/(tabs)/settings/index.tsx
+import { router } from "expo-router";
+import { SettingsMenu } from "@forthtilliath/react-native-kit/components/settings/SettingsMenu";
+
+export default function SettingsMenuScreen() {
+  return (
+    <SettingsMenu
+      items={[
+        // `key` doubles as the lookup into a built-in default icon/label
+        // pairing for the 6 sections above — no `emoji`/`icon` needed here.
+        {
+          key: "backup",
+          title: "Sauvegarde",
+          hint: "Exporter / importer tes données",
+          onPress: () => router.push("/settings/backup"),
+        },
+        {
+          key: "theme",
+          title: "Thème",
+          hint: "Clair, sombre, ou automatique",
+          onPress: () => router.push("/settings/theme"),
+        },
+        {
+          key: "update",
+          title: "Mise à jour",
+          onPress: () => router.push("/settings/update"),
+        },
+        {
+          key: "about",
+          title: "À propos",
+          onPress: () => router.push("/settings/about"),
+        },
+        {
+          key: "contact",
+          title: "Contact",
+          onPress: () => router.push("/settings/contact"),
+        },
+        {
+          key: "privacy",
+          title: "Confidentialité",
+          onPress: () => router.push("/settings/privacy"),
+        },
+        // An app-specific section: no default exists for an arbitrary key,
+        // so `emoji`/`icon` (and `hint`, if you want one) are yours to set.
+        {
+          key: "profile",
+          emoji: "🙋",
+          title: "Mon nom",
+          onPress: () => router.push("/settings/profile"),
+        },
+      ]}
+    />
+  );
+}
+```
+
+`SettingsMenu` doesn't depend on expo-router (or any other navigator) itself — each item carries its own `onPress`, so it works the same with any navigation setup.
+
+Two independent style knobs, both usable on their own:
+
+- **Icon flavor** — each item can set its own `emoji` (naturally multicolor) or `icon` (an `Ionicons` glyph, name in `styles.iconColor`) to override its default; `defaultIconKind` (`"emoji"` by default, or `"icon"`) picks which flavor of the _default_ table applies to items that don't set either.
+- **Hints** — set `showHints={false}` to hide every item's `hint` at once, for a denser, icon-only-style menu.
+
+```tsx
+<SettingsMenu
+  items={[
+    {
+      key: "backup",
+      title: "Sauvegarde",
+      onPress: () => router.push("/settings/backup"),
+    },
+  ]}
+  defaultIconKind="icon"
+  showHints={false}
+  styles={{
+    row: { backgroundColor: colors.primary, borderWidth: 0 },
+    iconColor: "#fff",
+    title: { color: "#fff" },
+  }}
+/>
+```
+
+#### `<ThemeSettingsScreen value onChange />`
+
+Same light/dark/system data contract as `ThemeToggle`/`ThemeOptionList`. Two visuals, picked via `variant`: `"emoji"` (default) — emoji + label + a plain-text `✓` on the active row — or `"icon"` — `Ionicons` glyphs in one shared color (`styles.iconColor`/`iconColorActive`) + an `Ionicons` checkmark, matching `SettingsMenu`'s `defaultIconKind="icon"` look. `showHint={false}` hides the hint above the list.
+
+```tsx
+import { ThemeSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/ThemeSettingsScreen";
+
+<ThemeSettingsScreen value={themePreference} onChange={setThemePreference} />;
+
+// Or, matching an icon-flavored SettingsMenu:
+<ThemeSettingsScreen
+  value={themePreference}
+  onChange={setThemePreference}
+  variant="icon"
+/>;
+```
+
+#### `<UpdateSettingsScreen currentVersion checkForUpdate compareVersions downloadAndInstallApk />`
+
+The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Pairs naturally with `@forthtilliath/expo-release-updates` and `useUpdateCheck`/`UpdateAvailableBanner` above (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape.
+
+```tsx
+import { UpdateSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/UpdateSettingsScreen";
+
+import {
+  compareVersions,
+  downloadAndInstallApk,
+  fetchLatestRelease,
+  fetchReleaseHistory,
+} from "@/lib/appUpdate";
+
+<UpdateSettingsScreen
+  currentVersion={Constants.expoConfig?.version ?? "?"}
+  checkForUpdate={fetchLatestRelease}
+  compareVersions={compareVersions}
+  downloadAndInstallApk={downloadAndInstallApk}
+  fetchReleaseHistory={fetchReleaseHistory}
+/>;
+```
+
+#### `<BackupSettingsScreen onExport onImport reminder? />`
+
+Export/import buttons plus an optional reminder-notification switch. Deliberately just a shell: what actually gets exported/imported is entirely app-specific (your own database tables), so `onExport`/`onImport` are required — this package can't have a sensible default for "how do I export my schema". Import asks for confirmation first (via `confirmDestructive`, from `utils/helpers/`) since it replaces existing data; `onImport` itself doesn't need to.
+
+```tsx
+import { BackupSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/BackupSettingsScreen";
+
+<BackupSettingsScreen
+  onExport={shareBackup}
+  onImport={pickAndImportBackup}
+  reminder={{
+    enabled: reminderEnabled,
+    onToggle: handleToggleReminder,
+    intervalDays: BACKUP_REMINDER_INTERVAL_DAYS,
+  }}
+/>;
+```
+
+Omit `reminder` entirely for an app with no backup-reminder notifications.
+
+#### `<AboutSettingsScreen appName version description developerName />`
+
+App name, version, one or more description paragraphs, and a "developed by" credit. `appName`/`version` are required rather than defaulted internally (keeps this package framework-agnostic) — pass `Constants.expoConfig?.name`/`.version` from the caller.
+
+```tsx
+import { AboutSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/AboutSettingsScreen";
+
+<AboutSettingsScreen
+  appName={Constants.expoConfig?.name ?? "My App"}
+  version={Constants.expoConfig?.version ?? "?"}
+  description="A personal tool to do the thing."
+  developerName="Your Name"
+/>;
+```
+
+#### `<ContactSettingsScreen email />`
+
+A `mailto:` button plus a short "how to report a bug" hint.
+
+```tsx
+import { ContactSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/ContactSettingsScreen";
+
+<ContactSettingsScreen email="you@example.com" />;
+```
+
+#### `<PrivacySettingsScreen sections? />`
+
+Ships with the standard "everything stays on this device" three sections (no data collected, local storage only, sharing is opt-in) as the default — the right fit for most of these small personal-data apps. Pass your own `sections` to fully replace it for an app with different data handling (e.g. one that syncs to a server).
+
+```tsx
+import { PrivacySettingsScreen } from "@forthtilliath/react-native-kit/components/settings/PrivacySettingsScreen";
+
+// Zero-config, uses the default copy:
+<PrivacySettingsScreen />;
+
+// Or fully custom:
+<PrivacySettingsScreen
+  sections={[
+    {
+      title: "What we collect",
+      paragraphs: ["Only what you enter, synced to your account."],
+    },
+  ]}
+/>;
+```
+
+For all 7 components above, styling works the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults), and where relevant an optional `labels` prop for the built-in French copy.
+
 ### Utils (`utils/`)
 
 Framework-agnostic pure functions — no React or React Native import, usable from Node/web too.

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./list";
 export * from "./picker";
+export * from "./settings";
 export * from "./theme";
 export * from "./update";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export * from "./list";
 export * from "./picker";
+export * from "./settings";
 export * from "./theme";
 export * from "./update";

package/dist/components/settings/AboutSettingsScreen.d.ts

@@ -0,0 +1,24 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface AboutSettingsScreenStyles {
+    container?: StyleProp<ViewStyle>;
+    appName?: StyleProp<TextStyle>;
+    version?: StyleProp<TextStyle>;
+    separator?: StyleProp<ViewStyle>;
+    paragraph?: StyleProp<TextStyle>;
+    hint?: StyleProp<TextStyle>;
+}
+export interface AboutSettingsScreenLabels {
+    version?: (version: string) => string;
+    developedBy?: (name: string) => string;
+}
+export interface AboutSettingsScreenProps {
+    appName: string;
+    version: string;
+    /** One or more paragraphs describing the app, rendered in order. */
+    description: string | string[];
+    developerName: string;
+    labels?: AboutSettingsScreenLabels;
+    styles?: AboutSettingsScreenStyles;
+}
+export declare function AboutSettingsScreen({ appName, version, description, developerName, labels, styles, }: AboutSettingsScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=AboutSettingsScreen.d.ts.map

package/dist/components/settings/AboutSettingsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/AboutSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AA8BD,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,wBAAwB,+BA8B1B"}

package/dist/components/settings/AboutSettingsScreen.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+const defaultLabels = {
+    version: (version) => `Version ${version}`,
+    developedBy: (name) => `Développée par ${name}.`,
+};
+const defaultStyles = {
+    container: {},
+    appName: { fontSize: 22, fontWeight: "700", color: "#111827" },
+    version: { fontSize: 13, color: "#6b7280", marginTop: 2 },
+    separator: {
+        height: 1,
+        marginVertical: 16,
+        backgroundColor: "#e5e7eb",
+    },
+    paragraph: {
+        fontSize: 14,
+        lineHeight: 20,
+        color: "#111827",
+        marginBottom: 12,
+    },
+    hint: { fontSize: 13, color: "#6b7280" },
+};
+// App name, version, a short description, and a "developed by" credit — the
+// standard "About" section of a settings tab. `appName`/`version` are
+// required rather than defaulted from `expo-constants` so this stays
+// framework-agnostic; pass `Constants.expoConfig?.name`/`.version` from the
+// caller.
+export function AboutSettingsScreen({ appName, version, description, developerName, labels, styles, }) {
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        appName: [defaultStyles.appName, styles?.appName],
+        version: [defaultStyles.version, styles?.version],
+        separator: [defaultStyles.separator, styles?.separator],
+        paragraph: [defaultStyles.paragraph, styles?.paragraph],
+        hint: [defaultStyles.hint, styles?.hint],
+    };
+    const t = { ...defaultLabels, ...labels };
+    const paragraphs = Array.isArray(description) ? description : [description];
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.appName, children: appName }), _jsx(Text, { style: merged.version, children: t.version(version) }), _jsx(View, { style: merged.separator }), paragraphs.map((paragraph) => (_jsx(Text, { style: merged.paragraph, children: paragraph }, paragraph))), _jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.hint, children: t.developedBy(developerName) })] }));
+}

package/dist/components/settings/BackupSettingsScreen.d.ts

@@ -0,0 +1,52 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface BackupSettingsScreenReminder {
+    enabled: boolean;
+    /** Set while a permission request or the toggle's own persistence is in flight. */
+    busy?: boolean;
+    onToggle: (value: boolean) => void;
+    /** How often the reminder fires, only used to word the hint (e.g. "every 7 days"). */
+    intervalDays: number;
+}
+export interface BackupSettingsScreenStyles {
+    container?: StyleProp<ViewStyle>;
+    hint?: StyleProp<TextStyle>;
+    row?: StyleProp<ViewStyle>;
+    button?: StyleProp<ViewStyle>;
+    buttonDisabled?: StyleProp<ViewStyle>;
+    buttonText?: StyleProp<TextStyle>;
+    reminderRow?: StyleProp<ViewStyle>;
+    reminderTextColumn?: StyleProp<ViewStyle>;
+    reminderLabel?: StyleProp<TextStyle>;
+    reminderHint?: StyleProp<TextStyle>;
+    activityIndicatorColor?: string;
+}
+export interface BackupSettingsScreenLabels {
+    hint?: string;
+    exportButton?: string;
+    importButton?: string;
+    importConfirmTitle?: string;
+    importConfirmMessage?: string;
+    importConfirmLabel?: string;
+    importConfirmCancelLabel?: string;
+    reminderLabel?: string;
+    reminderHint?: (intervalDays: number) => string;
+    exportErrorTitle?: string;
+    importErrorTitle?: string;
+    genericErrorMessage?: string;
+}
+export interface BackupSettingsScreenProps {
+    /** Exports/shares the app's data however it sees fit (e.g. a JSON file via the native share sheet). */
+    onExport: () => Promise<void>;
+    /**
+     * Imports data from a file the user picks, replacing what's currently
+     * stored. Only called after the user confirms the destructive-replace
+     * warning — this doesn't need to show its own confirmation.
+     */
+    onImport: () => Promise<void>;
+    /** Omit entirely to not show a reminder toggle at all. */
+    reminder?: BackupSettingsScreenReminder;
+    labels?: BackupSettingsScreenLabels;
+    styles?: BackupSettingsScreenStyles;
+}
+export declare function BackupSettingsScreen({ onExport, onImport, reminder, labels, styles, }: BackupSettingsScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=BackupSettingsScreen.d.ts.map

package/dist/components/settings/BackupSettingsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackupSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/BackupSettingsScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYpE,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,sFAAsF;IACtF,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,uGAAuG;IACvG,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AAiED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,yBAAyB,+BA8H3B"}

package/dist/components/settings/BackupSettingsScreen.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ActivityIndicator, Alert, Pressable, Switch, Text, View, } from "react-native";
+import { confirmDestructive } from "../../utils/helpers/confirmDestructive.js";
+const defaultLabels = {
+    hint: "Les données sont stockées uniquement sur cet appareil et sont perdues en cas de réinstallation ou de mise à jour incompatible. Exporte-les régulièrement pour pouvoir les restaurer.",
+    exportButton: "⬆️ Exporter",
+    importButton: "⬇️ Importer",
+    importConfirmTitle: "Importer une sauvegarde ?",
+    importConfirmMessage: "Toutes les données actuelles seront remplacées par celles du fichier choisi.",
+    importConfirmLabel: "Choisir un fichier",
+    importConfirmCancelLabel: "Annuler",
+    reminderLabel: "🔔 Rappel de sauvegarde",
+    reminderHint: undefined,
+    exportErrorTitle: "Échec de l'export",
+    importErrorTitle: "Échec de l'import",
+    genericErrorMessage: "Une erreur inconnue s'est produite.",
+};
+const defaultStyles = {
+    container: {},
+    hint: { fontSize: 13, color: "#6b7280", marginBottom: 16 },
+    row: { flexDirection: "row", gap: 10 },
+    button: {
+        flex: 1,
+        paddingVertical: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "#2563eb",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    buttonDisabled: { opacity: 0.5 },
+    buttonText: { color: "#2563eb", fontWeight: "700" },
+    reminderRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        marginTop: 24,
+    },
+    reminderTextColumn: { flex: 1 },
+    reminderLabel: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#111827",
+        marginBottom: 4,
+    },
+    reminderHint: { fontSize: 13, color: "#6b7280" },
+    activityIndicatorColor: undefined,
+};
+function errorMessage(err, fallback) {
+    return err instanceof Error ? err.message : fallback;
+}
+// Export/import buttons plus an optional reminder-notification toggle — the
+// standard "Backup" section of a settings tab. Deliberately just a shell:
+// what gets exported/imported is entirely app-specific (its own database
+// tables), so `onExport`/`onImport` are required props, not something this
+// package could have a sensible default for.
+export function BackupSettingsScreen({ onExport, onImport, reminder, labels, styles, }) {
+    const [exporting, setExporting] = useState(false);
+    const [importing, setImporting] = useState(false);
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        hint: [defaultStyles.hint, styles?.hint],
+        row: [defaultStyles.row, styles?.row],
+        button: [defaultStyles.button, styles?.button],
+        buttonDisabled: [defaultStyles.buttonDisabled, styles?.buttonDisabled],
+        buttonText: [defaultStyles.buttonText, styles?.buttonText],
+        reminderRow: [defaultStyles.reminderRow, styles?.reminderRow],
+        reminderTextColumn: [
+            defaultStyles.reminderTextColumn,
+            styles?.reminderTextColumn,
+        ],
+        reminderLabel: [defaultStyles.reminderLabel, styles?.reminderLabel],
+        reminderHint: [defaultStyles.reminderHint, styles?.reminderHint],
+    };
+    const t = { ...defaultLabels, ...labels };
+    const activityIndicatorColor = styles?.activityIndicatorColor ?? defaultStyles.activityIndicatorColor;
+    async function handleExport() {
+        if (exporting)
+            return;
+        setExporting(true);
+        try {
+            await onExport();
+        }
+        catch (err) {
+            Alert.alert(t.exportErrorTitle, errorMessage(err, t.genericErrorMessage));
+        }
+        finally {
+            setExporting(false);
+        }
+    }
+    function handleImportPress() {
+        if (importing)
+            return;
+        confirmDestructive(t.importConfirmTitle, () => {
+            void (async () => {
+                setImporting(true);
+                try {
+                    await onImport();
+                }
+                catch (err) {
+                    Alert.alert(t.importErrorTitle, errorMessage(err, t.genericErrorMessage));
+                }
+                finally {
+                    setImporting(false);
+                }
+            })();
+        }, {
+            message: t.importConfirmMessage,
+            cancelLabel: t.importConfirmCancelLabel,
+            confirmLabel: t.importConfirmLabel,
+        });
+    }
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsxs(View, { style: merged.row, children: [_jsx(Pressable, { style: [merged.button, exporting && merged.buttonDisabled], disabled: exporting, onPress: () => {
+                            void handleExport();
+                        }, accessibilityRole: "button", accessibilityLabel: t.exportButton, children: exporting ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: merged.buttonText, children: t.exportButton })) }), _jsx(Pressable, { style: [merged.button, importing && merged.buttonDisabled], disabled: importing, onPress: handleImportPress, accessibilityRole: "button", accessibilityLabel: t.importButton, children: importing ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: merged.buttonText, children: t.importButton })) })] }), reminder && (_jsxs(Pressable, { style: merged.reminderRow, disabled: reminder.busy, onPress: () => {
+                    reminder.onToggle(!reminder.enabled);
+                }, accessibilityRole: "switch", accessibilityState: { checked: reminder.enabled }, accessibilityLabel: t.reminderLabel, children: [_jsxs(View, { style: merged.reminderTextColumn, children: [_jsx(Text, { style: merged.reminderLabel, children: t.reminderLabel }), _jsx(Text, { style: merged.reminderHint, children: t.reminderHint?.(reminder.intervalDays) ??
+                                    `Une notification tous les ${String(reminder.intervalDays)} jours pour penser à exporter.` })] }), reminder.busy ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Switch, { value: reminder.enabled, onValueChange: reminder.onToggle }))] }))] }));
+}

package/dist/components/settings/ContactSettingsScreen.d.ts

@@ -0,0 +1,19 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface ContactSettingsScreenStyles {
+    container?: StyleProp<ViewStyle>;
+    hint?: StyleProp<TextStyle>;
+    emailButton?: StyleProp<ViewStyle>;
+    emailButtonText?: StyleProp<TextStyle>;
+    separator?: StyleProp<ViewStyle>;
+}
+export interface ContactSettingsScreenLabels {
+    hint?: string;
+    footer?: string;
+}
+export interface ContactSettingsScreenProps {
+    email: string;
+    labels?: ContactSettingsScreenLabels;
+    styles?: ContactSettingsScreenStyles;
+}
+export declare function ContactSettingsScreen({ email, labels, styles, }: ContactSettingsScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=ContactSettingsScreen.d.ts.map

package/dist/components/settings/ContactSettingsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/ContactSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AA6BD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE,0BAA0B,+BA8B5B"}

package/dist/components/settings/ContactSettingsScreen.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Linking, Pressable, Text, View } from "react-native";
+const defaultLabels = {
+    hint: "Une question, un bug, une suggestion ?",
+    footer: "Si tu remontes un bug, précise si possible ce que tu faisais et ce que tu attendais — ça aide à le reproduire.",
+};
+const defaultStyles = {
+    container: {},
+    hint: { fontSize: 13, color: "#6b7280", marginBottom: 12 },
+    emailButton: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "#2563eb",
+        alignItems: "center",
+    },
+    emailButtonText: { color: "#2563eb", fontWeight: "700" },
+    separator: {
+        height: 1,
+        marginVertical: 16,
+        backgroundColor: "#e5e7eb",
+    },
+};
+// A mailto: button plus a short "how to report a bug" hint — the standard
+// "Contact" section of a settings tab.
+export function ContactSettingsScreen({ email, labels, styles, }) {
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        hint: [defaultStyles.hint, styles?.hint],
+        emailButton: [defaultStyles.emailButton, styles?.emailButton],
+        emailButtonText: [defaultStyles.emailButtonText, styles?.emailButtonText],
+        separator: [defaultStyles.separator, styles?.separator],
+    };
+    const t = { ...defaultLabels, ...labels };
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsx(Pressable, { style: merged.emailButton, onPress: () => {
+                    void Linking.openURL(`mailto:${email}`);
+                }, accessibilityRole: "button", accessibilityLabel: `Envoyer un email à ${email}`, children: _jsx(Text, { style: merged.emailButtonText, children: `✉️ ${email}` }) }), _jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.hint, children: t.footer })] }));
+}

package/dist/components/settings/PrivacySettingsScreen.d.ts

@@ -0,0 +1,23 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface PrivacySettingsScreenSection {
+    title: string;
+    paragraphs: string[];
+}
+export interface PrivacySettingsScreenStyles {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    paragraph?: StyleProp<TextStyle>;
+    separator?: StyleProp<ViewStyle>;
+}
+export interface PrivacySettingsScreenProps {
+    /**
+     * Defaults to the standard "everything stays on this device" three
+     * sections (no data collected, local storage only, sharing is opt-in).
+     * Pass your own to describe a different setup (e.g. an app that does sync
+     * to a server) — this fully replaces the default, it isn't merged with it.
+     */
+    sections?: PrivacySettingsScreenSection[];
+    styles?: PrivacySettingsScreenStyles;
+}
+export declare function PrivacySettingsScreen({ sections, styles, }: PrivacySettingsScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=PrivacySettingsScreen.d.ts.map

package/dist/components/settings/PrivacySettingsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrivacySettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/PrivacySettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,0BAA0B;IACzC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AA4CD,wBAAgB,qBAAqB,CAAC,EACpC,QAA0B,EAC1B,MAAM,GACP,EAAE,0BAA0B,+BAuB5B"}

package/dist/components/settings/PrivacySettingsScreen.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+const defaultSections = [
+    {
+        title: "Aucune donnée envoyée nulle part",
+        paragraphs: [
+            "Cette application ne collecte aucune donnée, ne fait appel à aucun serveur, et ne contient aucun outil de suivi ni de publicité.",
+        ],
+    },
+    {
+        title: "Stockage local uniquement",
+        paragraphs: [
+            "Tout ce que tu saisis reste stocké uniquement sur cet appareil, dans le stockage local de l'application. Rien n'est envoyé ailleurs.",
+            "Ces données sont perdues si tu désinstalles l'application ou si tu effaces son stockage — pense à utiliser une sauvegarde régulière pour pouvoir les restaurer.",
+        ],
+    },
+    {
+        title: "Partage volontaire uniquement",
+        paragraphs: [
+            "La seule façon pour une donnée de quitter cet appareil, c'est quand tu choisis toi-même de la partager (export d'une sauvegarde...), via le sélecteur de partage natif du téléphone.",
+        ],
+    },
+];
+const defaultStyles = {
+    container: {},
+    title: { fontSize: 15, fontWeight: "700", color: "#111827", marginBottom: 6 },
+    paragraph: {
+        fontSize: 14,
+        lineHeight: 20,
+        color: "#374151",
+        marginBottom: 8,
+    },
+    separator: {
+        height: 1,
+        marginVertical: 16,
+        backgroundColor: "#e5e7eb",
+    },
+};
+// Privacy section of a settings tab: a list of titled paragraph sections,
+// separated by a thin rule. Ships with the standard "everything stays local"
+// copy as a default — override `sections` entirely for an app with different
+// data handling (e.g. one that does sync to a server).
+export function PrivacySettingsScreen({ sections = defaultSections, styles, }) {
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        title: [defaultStyles.title, styles?.title],
+        paragraph: [defaultStyles.paragraph, styles?.paragraph],
+        separator: [defaultStyles.separator, styles?.separator],
+    };
+    return (_jsx(View, { style: merged.container, children: sections.map((section, index) => (_jsxs(View, { children: [index > 0 && _jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.title, children: section.title }), section.paragraphs.map((paragraph) => (_jsx(Text, { style: merged.paragraph, children: paragraph }, paragraph)))] }, section.title))) }));
+}

package/dist/components/settings/SettingsMenu.d.ts

@@ -0,0 +1,55 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+/**
+ * Well-known settings sections this package itself ships a screen for
+ * (`BackupSettingsScreen`, `ThemeSettingsScreen`, etc.) — matching `key`
+ * against one of these gets an item a default icon for free. Any other
+ * `key` (e.g. an app-specific "profile"/"notifications" section) needs its
+ * own `emoji`/`icon`, since there's no sensible universal default for it.
+ */
+export type SettingsMenuSection = "backup" | "theme" | "update" | "about" | "contact" | "privacy";
+export interface SettingsMenuItem {
+    /**
+     * Stable React key. Doubles as the lookup into the default icon table
+     * above — use `"backup"`/`"theme"`/`"update"`/`"about"`/`"contact"`/
+     * `"privacy"` to get a sensible icon for free, any other string for a
+     * custom (app-specific) section, which then needs its own `emoji`/`icon`.
+     */
+    key: string;
+    /**
+     * Overrides the default icon for this item (whether that default came
+     * from `key` or there simply isn't one). At most one of the two —
+     * `emoji` renders as-is (naturally multicolor, varies per item); `icon`
+     * renders as an `Ionicons` glyph in one shared color (`styles.iconColor`),
+     * for a flatter, more uniform look.
+     */
+    emoji?: string;
+    icon?: keyof typeof Ionicons.glyphMap;
+    title: string;
+    hint?: string;
+    onPress: () => void;
+}
+export interface SettingsMenuStyles {
+    container?: StyleProp<ViewStyle>;
+    row?: StyleProp<ViewStyle>;
+    titleColumn?: StyleProp<ViewStyle>;
+    emoji?: StyleProp<TextStyle>;
+    iconColor?: string;
+    title?: StyleProp<TextStyle>;
+    hint?: StyleProp<TextStyle>;
+    chevronColor?: string;
+}
+export interface SettingsMenuProps {
+    items: SettingsMenuItem[];
+    /**
+     * Which flavor of the default icon table to use for items that don't set
+     * their own `emoji`/`icon`. Doesn't affect items that do. Defaults to
+     * `"emoji"`.
+     */
+    defaultIconKind?: "emoji" | "icon";
+    /** Set to `false` to never render any item's `hint`, for a denser, icon-only-style menu. Defaults to `true`. */
+    showHints?: boolean;
+    styles?: SettingsMenuStyles;
+}
+export declare function SettingsMenu({ items, defaultIconKind, showHints, styles, }: SettingsMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=SettingsMenu.d.ts.map

package/dist/components/settings/SettingsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsMenu.d.ts","sourceRoot":"","sources":["../../../src/components/settings/SettingsMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,MAAM,mBAAmB,GAC7B,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAclE,MAAM,WAAW,gBAAgB;IAC/B;;;;;OAKG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,gHAAgH;IAChH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AA4CD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,eAAyB,EACzB,SAAgB,EAChB,MAAM,GACP,EAAE,iBAAiB,+BAyCnB"}

package/dist/components/settings/SettingsMenu.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const defaultSectionIcons = {
+    backup: { emoji: "💾", icon: "save-outline" },
+    theme: { emoji: "🎨", icon: "contrast-outline" },
+    update: { emoji: "⬇️", icon: "download-outline" },
+    about: { emoji: "ℹ️", icon: "information-circle-outline" },
+    contact: { emoji: "✉️", icon: "chatbubble-ellipses-outline" },
+    privacy: { emoji: "🔒", icon: "lock-closed-outline" },
+};
+const defaultStyles = {
+    container: { gap: 10 },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+    },
+    titleColumn: { flex: 1 },
+    emoji: { fontSize: 24 },
+    iconColor: "#111827",
+    title: {
+        fontSize: 16,
+        fontWeight: "600",
+        color: "#111827",
+    },
+    hint: { fontSize: 12, color: "#6b7280", marginTop: 2 },
+    chevronColor: "#9ca3af",
+};
+function resolveIcon(item, defaultIconKind) {
+    if (item.icon)
+        return { icon: item.icon, emoji: undefined };
+    if (item.emoji)
+        return { icon: undefined, emoji: item.emoji };
+    const fallback = defaultSectionIcons[item.key];
+    if (!fallback)
+        return { icon: undefined, emoji: undefined };
+    return defaultIconKind === "icon"
+        ? { icon: fallback.icon, emoji: undefined }
+        : { icon: undefined, emoji: fallback.emoji };
+}
+// Menu screen for a settings tab: one row per section (icon + title +
+// optional hint), navigating to it on press. Has no opinion on how
+// navigation works — each item carries its own `onPress` (e.g.
+// `() => router.push("/settings/xxx")`), so this doesn't depend on
+// expo-router or any other specific navigator.
+export function SettingsMenu({ items, defaultIconKind = "emoji", showHints = true, styles, }) {
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        row: [defaultStyles.row, styles?.row],
+        titleColumn: [defaultStyles.titleColumn, styles?.titleColumn],
+        emoji: [defaultStyles.emoji, styles?.emoji],
+        title: [defaultStyles.title, styles?.title],
+        hint: [defaultStyles.hint, styles?.hint],
+    };
+    const chevronColor = styles?.chevronColor ?? defaultStyles.chevronColor;
+    const iconColor = styles?.iconColor ?? defaultStyles.iconColor;
+    return (_jsx(View, { style: merged.container, children: items.map((item) => {
+            const { icon, emoji } = resolveIcon(item, defaultIconKind);
+            return (_jsxs(Pressable, { style: merged.row, onPress: item.onPress, accessibilityRole: "button", accessibilityLabel: item.title, children: [icon ? (_jsx(Ionicons, { name: icon, size: 24, color: iconColor })) : (_jsx(Text, { style: merged.emoji, children: emoji })), _jsxs(View, { style: merged.titleColumn, children: [_jsx(Text, { style: merged.title, children: item.title }), showHints && item.hint ? (_jsx(Text, { style: merged.hint, children: item.hint })) : null] }), _jsx(Ionicons, { name: "chevron-forward", size: 20, color: chevronColor })] }, item.key));
+        }) }));
+}

package/dist/components/settings/ThemeSettingsScreen.d.ts

@@ -0,0 +1,51 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import type { ThemePreference } from "../../hooks/useEffectiveColorScheme.js";
+export interface ThemeSettingsScreenEmojis {
+    light?: string;
+    dark?: string;
+    system?: string;
+}
+export interface ThemeSettingsScreenIcons {
+    light?: keyof typeof Ionicons.glyphMap;
+    dark?: keyof typeof Ionicons.glyphMap;
+    system?: keyof typeof Ionicons.glyphMap;
+}
+export interface ThemeSettingsScreenLabels {
+    light?: string;
+    dark?: string;
+    system?: string;
+    hint?: string;
+}
+export interface ThemeSettingsScreenStyles {
+    container?: StyleProp<ViewStyle>;
+    hint?: StyleProp<TextStyle>;
+    row?: StyleProp<ViewStyle>;
+    rowActive?: StyleProp<ViewStyle>;
+    emoji?: StyleProp<TextStyle>;
+    iconColor?: string;
+    iconColorActive?: string;
+    label?: StyleProp<TextStyle>;
+    labelActive?: StyleProp<TextStyle>;
+    check?: StyleProp<TextStyle>;
+    checkColor?: string;
+}
+export interface ThemeSettingsScreenProps {
+    value: ThemePreference;
+    onChange: (preference: ThemePreference) => void;
+    /**
+     * `"emoji"` (default): colorful emoji + a plain-text `✓`. `"icon"`:
+     * `Ionicons` glyphs in one shared color (`styles.iconColor`) + an
+     * `Ionicons` checkmark, for a flatter, more uniform look — matches
+     * `SettingsMenu`'s `defaultIconKind`.
+     */
+    variant?: "emoji" | "icon";
+    emojis?: ThemeSettingsScreenEmojis;
+    icons?: ThemeSettingsScreenIcons;
+    labels?: ThemeSettingsScreenLabels;
+    /** Set to `false` to hide the hint above the list. Defaults to `true`. */
+    showHint?: boolean;
+    styles?: ThemeSettingsScreenStyles;
+}
+export declare function ThemeSettingsScreen({ value, onChange, variant, emojis, icons, labels, showHint, styles, }: ThemeSettingsScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeSettingsScreen.d.ts.map

package/dist/components/settings/ThemeSettingsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/ThemeSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAE9E,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IACvC,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;CACzC;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,KAAK,CAAC,EAAE,wBAAwB,CAAC;IACjC,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AA8DD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAiB,EACjB,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAe,EACf,MAAM,GACP,EAAE,wBAAwB,+BAiE1B"}

package/dist/components/settings/ThemeSettingsScreen.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const OPTIONS = ["light", "dark", "system"];
+const defaultEmojis = {
+    light: "☀️",
+    dark: "🌙",
+    system: "⚙️",
+};
+const defaultIcons = {
+    light: "sunny-outline",
+    dark: "moon-outline",
+    system: "phone-portrait-outline",
+};
+const defaultLabels = {
+    light: "Clair",
+    dark: "Sombre",
+    system: "Système",
+    hint: "« Système » suit automatiquement le réglage clair/sombre de ton téléphone.",
+};
+const defaultStyles = {
+    container: { gap: 10 },
+    hint: { fontSize: 13, color: "#6b7280", marginBottom: 6 },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+    },
+    rowActive: {
+        borderColor: "#2563eb",
+        backgroundColor: "#2563eb1a",
+    },
+    emoji: { fontSize: 20 },
+    iconColor: "#111827",
+    iconColorActive: "#2563eb",
+    label: {
+        flex: 1,
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#111827",
+    },
+    labelActive: { color: "#2563eb" },
+    check: {
+        fontSize: 16,
+        fontWeight: "700",
+        color: "#2563eb",
+    },
+    checkColor: "#2563eb",
+};
+// Selectable list of rows (icon + label + checkmark) for a light/dark/system
+// theme preference — same data contract as `ThemeOptionList`, but with a
+// second visual (`variant="emoji"`, the default) alongside the vector-icon
+// one (`variant="icon"`). Pick whichever fits your app; both cover the exact
+// same `light`/`dark`/`system` preference.
+export function ThemeSettingsScreen({ value, onChange, variant = "emoji", emojis, icons, labels, showHint = true, styles, }) {
+    // Style fields are merged as arrays (default, then override) so a partial
+    // override only changes the properties it specifies instead of replacing
+    // the whole default style object.
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        hint: [defaultStyles.hint, styles?.hint],
+        row: [defaultStyles.row, styles?.row],
+        rowActive: [defaultStyles.rowActive, styles?.rowActive],
+        emoji: [defaultStyles.emoji, styles?.emoji],
+        label: [defaultStyles.label, styles?.label],
+        labelActive: [defaultStyles.labelActive, styles?.labelActive],
+        check: [defaultStyles.check, styles?.check],
+    };
+    const e = { ...defaultEmojis, ...emojis };
+    const i = { ...defaultIcons, ...icons };
+    const t = { ...defaultLabels, ...labels };
+    const iconColor = styles?.iconColor ?? defaultStyles.iconColor;
+    const iconColorActive = styles?.iconColorActive ?? defaultStyles.iconColorActive;
+    const checkColor = styles?.checkColor ?? defaultStyles.checkColor;
+    return (_jsxs(View, { style: merged.container, children: [showHint && _jsx(Text, { style: merged.hint, children: t.hint }), OPTIONS.map((option) => {
+                const active = option === value;
+                return (_jsxs(Pressable, { style: [merged.row, active && merged.rowActive], onPress: () => {
+                        onChange(option);
+                    }, accessibilityRole: "radio", accessibilityState: { checked: active }, accessibilityLabel: t[option], children: [variant === "icon" ? (_jsx(Ionicons, { name: i[option], size: 20, color: active ? iconColorActive : iconColor })) : (_jsx(Text, { style: merged.emoji, children: e[option] })), _jsx(Text, { style: [merged.label, active && merged.labelActive], children: t[option] }), active &&
+                            (variant === "icon" ? (_jsx(Ionicons, { name: "checkmark-circle", size: 20, color: checkColor })) : (_jsx(Text, { style: merged.check, children: "\u2713" })))] }, option));
+            })] }));
+}

package/dist/components/settings/UpdateSettingsScreen.d.ts

@@ -0,0 +1,62 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { ChangelogNotesStyles } from "../update/ChangelogNotes.js";
+export interface UpdateSettingsScreenRelease {
+    version: string;
+    notes: string;
+    apkUrl: string;
+}
+export interface UpdateSettingsScreenHistoryEntry {
+    version: string;
+    notes: string;
+    publishedAt?: string | null;
+}
+export interface UpdateSettingsScreenLabels {
+    installedVersionLabel?: string;
+    checkButton?: string;
+    upToDate?: string;
+    checkError?: string;
+    downloadError?: string;
+    availableTitle?: (version: string) => string;
+    installButton?: (version: string) => string;
+    installButtonAccessibilityLabel?: (version: string) => string;
+    downloadingLabel?: (percent: number) => string;
+    downloadingHint?: string;
+    historyTitle?: string;
+}
+export interface UpdateSettingsScreenStyles {
+    container?: StyleProp<ViewStyle>;
+    infoBox?: StyleProp<ViewStyle>;
+    infoLabel?: StyleProp<TextStyle>;
+    infoValue?: StyleProp<TextStyle>;
+    helpText?: StyleProp<TextStyle>;
+    errorText?: StyleProp<TextStyle>;
+    button?: StyleProp<ViewStyle>;
+    buttonDisabled?: StyleProp<ViewStyle>;
+    buttonText?: StyleProp<TextStyle>;
+    activityIndicatorColor?: string;
+    updateAvailableBox?: StyleProp<ViewStyle>;
+    updateAvailableTitle?: StyleProp<TextStyle>;
+    changelog?: StyleProp<ViewStyle>;
+    changelogTitle?: StyleProp<TextStyle>;
+    changelogEntry?: StyleProp<ViewStyle>;
+    changelogEntryHeader?: StyleProp<ViewStyle>;
+    changelogVersion?: StyleProp<TextStyle>;
+    changelogDate?: StyleProp<TextStyle>;
+    notes?: ChangelogNotesStyles;
+}
+export interface UpdateSettingsScreenProps {
+    currentVersion: string;
+    /** Fetches the latest available release, or `null` if there is none. */
+    checkForUpdate: () => Promise<UpdateSettingsScreenRelease | null>;
+    /** Positive when `a` is newer than `b`, e.g. semver comparison. */
+    compareVersions: (a: string, b: string) => number;
+    downloadAndInstallApk: (apkUrl: string, onProgress?: (fraction: number) => void) => Promise<void>;
+    /** Omit to not show a version history section at all. */
+    fetchReleaseHistory?: () => Promise<UpdateSettingsScreenHistoryEntry[]>;
+    /** Locale for formatting each history entry's date. Defaults to `"fr-FR"`. */
+    dateLocale?: string;
+    labels?: UpdateSettingsScreenLabels;
+    styles?: UpdateSettingsScreenStyles;
+}
+export declare function UpdateSettingsScreen({ currentVersion, checkForUpdate, compareVersions, downloadAndInstallApk, fetchReleaseHistory, dateLocale, labels, styles, }: UpdateSettingsScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=UpdateSettingsScreen.d.ts.map

package/dist/components/settings/UpdateSettingsScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/UpdateSettingsScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGxE,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gCAAgC;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAUD,MAAM,WAAW,0BAA0B;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,+BAA+B,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,cAAc,EAAE,MAAM,OAAO,CAAC,2BAA2B,GAAG,IAAI,CAAC,CAAC;IAClE,mEAAmE;IACnE,eAAe,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,qBAAqB,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,KACpC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,gCAAgC,EAAE,CAAC,CAAC;IACxE,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AA2FD,wBAAgB,oBAAoB,CAAC,EACnC,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,UAAoB,EACpB,MAAM,EACN,MAAM,GACP,EAAE,yBAAyB,+BA+L3B"}

package/dist/components/settings/UpdateSettingsScreen.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { ChangelogNotes } from "../update/ChangelogNotes.js";
+const defaultLabels = {
+    installedVersionLabel: "Version installée",
+    checkButton: "Rechercher une mise à jour",
+    upToDate: "Tu as déjà la dernière version.",
+    checkError: "Impossible de vérifier les mises à jour.",
+    downloadError: "Le téléchargement a échoué.",
+    availableTitle: (version) => `Version ${version} disponible`,
+    installButton: () => "Télécharger et installer",
+    installButtonAccessibilityLabel: (version) => `Télécharger et installer la version ${version}`,
+    downloadingLabel: (percent) => `Téléchargement… ${String(percent)}%`,
+    downloadingHint: "Ton téléphone va ensuite te demander confirmation pour installer la mise à jour.",
+    historyTitle: "Historique des versions",
+};
+const defaultStyles = {
+    container: { gap: 4 },
+    infoBox: {
+        backgroundColor: "#ffffff",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        marginBottom: 8,
+    },
+    infoLabel: { fontSize: 13, fontWeight: "600", color: "#6b7280" },
+    infoValue: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: "#111827",
+        marginTop: 2,
+    },
+    helpText: { fontSize: 12, color: "#6b7280", marginTop: 8 },
+    errorText: { fontSize: 12, color: "#dc2626", marginTop: 8 },
+    button: {
+        backgroundColor: "#2563eb",
+        borderRadius: 10,
+        paddingVertical: 14,
+        alignItems: "center",
+        marginTop: 8,
+    },
+    buttonDisabled: { opacity: 0.6 },
+    buttonText: { color: "#ffffff", fontSize: 16, fontWeight: "700" },
+    activityIndicatorColor: "#ffffff",
+    updateAvailableBox: {
+        backgroundColor: "#ffffff",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        marginTop: 12,
+        gap: 4,
+    },
+    updateAvailableTitle: { fontSize: 15, fontWeight: "700", color: "#111827" },
+    changelog: { marginTop: 28 },
+    changelogTitle: {
+        fontSize: 15,
+        fontWeight: "700",
+        color: "#111827",
+        marginBottom: 8,
+    },
+    changelogEntry: {
+        backgroundColor: "#ffffff",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        marginBottom: 8,
+    },
+    changelogEntryHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    changelogVersion: { fontSize: 14, fontWeight: "700", color: "#111827" },
+    changelogDate: { fontSize: 12, color: "#6b7280" },
+    notes: undefined,
+};
+// Full "check for update" screen: installed version, a manual check button,
+// the available-update box (with changelog + install button) or an
+// up-to-date/error message, download progress, and — if
+// `fetchReleaseHistory` is passed — a list of past releases. Checks
+// automatically once on mount (the caller decided to navigate here, no need
+// to make them tap "check" again).
+export function UpdateSettingsScreen({ currentVersion, checkForUpdate, compareVersions, downloadAndInstallApk, fetchReleaseHistory, dateLocale = "fr-FR", labels, styles, }) {
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        infoBox: [defaultStyles.infoBox, styles?.infoBox],
+        infoLabel: [defaultStyles.infoLabel, styles?.infoLabel],
+        infoValue: [defaultStyles.infoValue, styles?.infoValue],
+        helpText: [defaultStyles.helpText, styles?.helpText],
+        errorText: [defaultStyles.errorText, styles?.errorText],
+        button: [defaultStyles.button, styles?.button],
+        buttonDisabled: [defaultStyles.buttonDisabled, styles?.buttonDisabled],
+        buttonText: [defaultStyles.buttonText, styles?.buttonText],
+        updateAvailableBox: [
+            defaultStyles.updateAvailableBox,
+            styles?.updateAvailableBox,
+        ],
+        updateAvailableTitle: [
+            defaultStyles.updateAvailableTitle,
+            styles?.updateAvailableTitle,
+        ],
+        changelog: [defaultStyles.changelog, styles?.changelog],
+        changelogTitle: [defaultStyles.changelogTitle, styles?.changelogTitle],
+        changelogEntry: [defaultStyles.changelogEntry, styles?.changelogEntry],
+        changelogEntryHeader: [
+            defaultStyles.changelogEntryHeader,
+            styles?.changelogEntryHeader,
+        ],
+        changelogVersion: [
+            defaultStyles.changelogVersion,
+            styles?.changelogVersion,
+        ],
+        changelogDate: [defaultStyles.changelogDate, styles?.changelogDate],
+        notes: styles?.notes ?? defaultStyles.notes,
+    };
+    const activityIndicatorColor = styles?.activityIndicatorColor ?? defaultStyles.activityIndicatorColor;
+    const t = { ...defaultLabels, ...labels };
+    const [updateState, setUpdateState] = useState({
+        status: "idle",
+    });
+    const [releaseHistory, setReleaseHistory] = useState(null);
+    useEffect(() => {
+        if (!fetchReleaseHistory)
+            return;
+        fetchReleaseHistory()
+            .then(setReleaseHistory)
+            .catch(() => {
+            setReleaseHistory([]);
+        });
+    }, [fetchReleaseHistory]);
+    const handleCheckForUpdate = useCallback(async () => {
+        setUpdateState({ status: "checking" });
+        try {
+            const release = await checkForUpdate();
+            if (!release || compareVersions(release.version, currentVersion) <= 0) {
+                setUpdateState({ status: "up-to-date" });
+                return;
+            }
+            setUpdateState({ status: "available", release });
+        }
+        catch {
+            setUpdateState({ status: "error", message: t.checkError });
+        }
+    }, [checkForUpdate, compareVersions, currentVersion, t.checkError]);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- the caller navigated here specifically to check, so this fires a real check on mount rather than waiting for a manual tap; the actual state update happens after the async checkForUpdate() call, not synchronously.
+        void handleCheckForUpdate();
+        // eslint-disable-next-line react-hooks/exhaustive-deps, @eslint-react/exhaustive-deps -- runs once on mount by design; handleCheckForUpdate is expected to be stable enough for the screen's lifetime.
+    }, []);
+    async function handleInstall(apkUrl) {
+        setUpdateState({ status: "downloading", progress: 0 });
+        try {
+            await downloadAndInstallApk(apkUrl, (progress) => {
+                setUpdateState({ status: "downloading", progress });
+            });
+            setUpdateState({ status: "idle" });
+        }
+        catch {
+            setUpdateState({ status: "error", message: t.downloadError });
+        }
+    }
+    const isBusy = updateState.status === "checking" || updateState.status === "downloading";
+    const notesStyles = useMemo(() => ({
+        heading: merged.updateAvailableTitle,
+        text: merged.helpText,
+        ...merged.notes,
+    }), [merged.helpText, merged.notes, merged.updateAvailableTitle]);
+    return (_jsxs(View, { style: merged.container, children: [_jsxs(View, { style: merged.infoBox, children: [_jsx(Text, { style: merged.infoLabel, children: t.installedVersionLabel }), _jsx(Text, { style: merged.infoValue, children: currentVersion })] }), updateState.status !== "available" &&
+                updateState.status !== "downloading" && (_jsx(Pressable, { style: [merged.button, isBusy && merged.buttonDisabled], onPress: () => {
+                    void handleCheckForUpdate();
+                }, disabled: isBusy, accessibilityRole: "button", accessibilityLabel: t.checkButton, children: updateState.status === "checking" ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: merged.buttonText, children: t.checkButton })) })), updateState.status === "up-to-date" && (_jsx(Text, { style: merged.helpText, children: t.upToDate })), updateState.status === "error" && (_jsx(Text, { style: merged.errorText, children: updateState.message })), updateState.status === "available" && (_jsxs(View, { style: merged.updateAvailableBox, children: [_jsx(Text, { style: merged.updateAvailableTitle, children: t.availableTitle(updateState.release.version) }), updateState.release.notes ? (_jsx(ChangelogNotes, { notes: updateState.release.notes, styles: merged.notes })) : null, _jsx(Pressable, { style: merged.button, onPress: () => {
+                            void handleInstall(updateState.release.apkUrl);
+                        }, accessibilityRole: "button", accessibilityLabel: t.installButtonAccessibilityLabel(updateState.release.version), children: _jsx(Text, { style: merged.buttonText, children: t.installButton(updateState.release.version) }) })] })), updateState.status === "downloading" && (_jsxs(View, { style: merged.updateAvailableBox, children: [_jsx(Text, { style: merged.helpText, children: t.downloadingLabel(Math.round(updateState.progress * 100)) }), _jsx(Text, { style: merged.helpText, children: t.downloadingHint })] })), releaseHistory && releaseHistory.length > 0 && (_jsxs(View, { style: merged.changelog, children: [_jsx(Text, { style: merged.changelogTitle, children: t.historyTitle }), releaseHistory.map((release) => (_jsxs(View, { style: merged.changelogEntry, children: [_jsxs(View, { style: merged.changelogEntryHeader, children: [_jsxs(Text, { style: merged.changelogVersion, children: ["v", release.version] }), release.publishedAt ? (_jsx(Text, { style: merged.changelogDate, children: new Date(release.publishedAt).toLocaleDateString(dateLocale) })) : null] }), release.notes ? (_jsx(ChangelogNotes, { notes: release.notes, styles: notesStyles })) : null] }, release.version)))] }))] }));
+}

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

@@ -0,0 +1,8 @@
+export * from "./AboutSettingsScreen";
+export * from "./BackupSettingsScreen";
+export * from "./ContactSettingsScreen";
+export * from "./PrivacySettingsScreen";
+export * from "./SettingsMenu";
+export * from "./ThemeSettingsScreen";
+export * from "./UpdateSettingsScreen";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC"}

package/dist/components/settings/index.js

@@ -0,0 +1,7 @@
+export * from "./AboutSettingsScreen";
+export * from "./BackupSettingsScreen";
+export * from "./ContactSettingsScreen";
+export * from "./PrivacySettingsScreen";
+export * from "./SettingsMenu";
+export * from "./ThemeSettingsScreen";
+export * from "./UpdateSettingsScreen";

package/dist/index.d.ts

@@ -3,6 +3,13 @@ export * from "./components/list/Thumbnail.js";
 export * from "./components/picker/PhotoPicker.js";
 export * from "./components/picker/PickerModal.js";
 export * from "./components/picker/VoiceSearchButton.js";
+export * from "./components/settings/AboutSettingsScreen.js";
+export * from "./components/settings/BackupSettingsScreen.js";
+export * from "./components/settings/ContactSettingsScreen.js";
+export * from "./components/settings/PrivacySettingsScreen.js";
+export * from "./components/settings/SettingsMenu.js";
+export * from "./components/settings/ThemeSettingsScreen.js";
+export * from "./components/settings/UpdateSettingsScreen.js";
 export * from "./components/theme/ThemeOptionList.js";
 export * from "./components/theme/ThemeToggle.js";
 export * from "./components/update/ChangelogNotes.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}

package/dist/index.js

@@ -8,6 +8,13 @@ export * from "./components/list/Thumbnail.js";
 export * from "./components/picker/PhotoPicker.js";
 export * from "./components/picker/PickerModal.js";
 export * from "./components/picker/VoiceSearchButton.js";
+export * from "./components/settings/AboutSettingsScreen.js";
+export * from "./components/settings/BackupSettingsScreen.js";
+export * from "./components/settings/ContactSettingsScreen.js";
+export * from "./components/settings/PrivacySettingsScreen.js";
+export * from "./components/settings/SettingsMenu.js";
+export * from "./components/settings/ThemeSettingsScreen.js";
+export * from "./components/settings/UpdateSettingsScreen.js";
 export * from "./components/theme/ThemeOptionList.js";
 export * from "./components/theme/ThemeToggle.js";
 export * from "./components/update/ChangelogNotes.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -32,13 +32,13 @@
     "react-native-gesture-handler": ">=2.20.0"
   },
   "devDependencies": {
-    "@expo/vector-icons": "^15.0.2",
-    "@types/react": "^19.2.17",
+    "@expo/vector-icons": "^15.1.1",
+    "@types/react": "^19.2.18",
     "@types/react-test-renderer": "^19.1.0",
     "eslint": "10.7.0",
-    "expo-image-picker": "~57.0.7",
+    "expo-image-picker": "~57.0.9",
     "expo-speech-recognition": "^56.0.1",
-    "react": "^19.2.7",
+    "react": "^19.2.8",
     "react-native": "0.86.0",
     "react-native-gesture-handler": "~2.32.0",
     "react-test-renderer": "19.2.3",