@forthtilliath/react-native-kit 0.10.0 → 0.12.0

package/README.md

@@ -307,44 +307,48 @@ 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",
-          emoji: "💾",
           title: "Sauvegarde",
           hint: "Exporter / importer tes données",
           onPress: () => router.push("/settings/backup"),
         },
         {
           key: "theme",
-          emoji: "🎨",
           title: "Thème",
           hint: "Clair, sombre, ou automatique",
           onPress: () => router.push("/settings/theme"),
         },
         {
           key: "update",
-          emoji: "⬇️",
           title: "Mise à jour",
           onPress: () => router.push("/settings/update"),
         },
         {
           key: "about",
-          emoji: "ℹ️",
           title: "À propos",
           onPress: () => router.push("/settings/about"),
         },
         {
           key: "contact",
-          emoji: "✉️",
           title: "Contact",
           onPress: () => router.push("/settings/contact"),
         },
         {
           key: "privacy",
-          emoji: "🔒",
           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"),
+        },
       ]}
     />
   );
@@ -353,14 +357,76 @@ export default function SettingsMenuScreen() {
 
 `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" },
+  }}
+/>
+```
+
+Pass `groups` instead of `items` to render rows under optional section headers (e.g. separating app-specific settings from the standard ones) — the two are mutually exclusive:
+
+```tsx
+<SettingsMenu
+  groups={[
+    {
+      title: "Réglages de calcul",
+      items: [
+        {
+          key: "ratio",
+          emoji: "🧮",
+          title: "Ratio glucidique",
+          onPress: () => router.push("/settings/ratio"),
+        },
+      ],
+    },
+    {
+      // No `title` renders the group with no header at all, e.g. for a
+      // leading group of app-specific items above the standard ones.
+      items: [
+        {
+          key: "backup",
+          title: "Sauvegarde",
+          onPress: () => router.push("/settings/backup"),
+        },
+      ],
+    },
+  ]}
+/>
+```
+
 #### `<ThemeSettingsScreen value onChange />`
 
-Same light/dark/system data contract as `ThemeToggle`/`ThemeOptionList`, but a third visual: emoji + label + a plain-text `✓` on the active row, with a hint above explaining what "Système" does. Pick whichever of the three fits your app.
+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 />`
@@ -406,9 +472,21 @@ import { BackupSettingsScreen } from "@forthtilliath/react-native-kit/components
 
 Omit `reminder` entirely for an app with no backup-reminder notifications.
 
-#### `<AboutSettingsScreen appName version description developerName />`
+Three more knobs for apps whose backup section doesn't fit the compact 2-button shell: an `info` box above everything (e.g. "last auto-backup: ..."), `layout="sections"` for a titled, full-width, stacked layout instead of side-by-side buttons, and `icons` for a leading `Ionicons` glyph on either button.
+
+```tsx
+<BackupSettingsScreen
+  onExport={shareBackup}
+  onImport={pickAndImportBackup}
+  info={{ label: "Dernière sauvegarde auto", value: lastAutoBackupLabel }}
+  layout="sections"
+  icons={{ export: "cloud-upload-outline", import: "cloud-download-outline" }}
+/>
+```
+
+#### `<AboutSettingsScreen appName version description developerName? sections? />`
 
-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.
+App name, version, one or more description paragraphs, and an optional "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";
@@ -421,7 +499,23 @@ import { AboutSettingsScreen } from "@forthtilliath/react-native-kit/components/
 />;
 ```
 
-#### `<ContactSettingsScreen email />`
+Omit `developerName` for an app with no credit line to show. Pass `sections` for extra titled blocks after the description — e.g. a medical/legal disclaimer:
+
+```tsx
+<AboutSettingsScreen
+  appName="GlucoDose"
+  version="1.2.0"
+  description="Un outil personnel de calcul de dose."
+  sections={[
+    {
+      title: "Avertissement médical",
+      paragraphs: ["Cet outil ne remplace pas un avis médical professionnel."],
+    },
+  ]}
+/>
+```
+
+#### `<ContactSettingsScreen email actions? emailIcon? />`
 
 A `mailto:` button plus a short "how to report a bug" hint.
 
@@ -431,6 +525,18 @@ import { ContactSettingsScreen } from "@forthtilliath/react-native-kit/component
 <ContactSettingsScreen email="you@example.com" />;
 ```
 
+Pass `actions` for extra rows below the email one (share the app, a donation link...) — switches the whole section from the single bordered button to a rows layout, email included:
+
+```tsx
+<ContactSettingsScreen
+  email="you@example.com"
+  actions={[
+    { icon: "share-outline", label: "Partager l'app", onPress: shareApp },
+    { icon: "star-outline", label: "Noter l'app", onPress: openStoreListing },
+  ]}
+/>
+```
+
 #### `<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).

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

@@ -1,10 +1,15 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface AboutSettingsScreenSection {
+    title: string;
+    paragraphs: string[];
+}
 export interface AboutSettingsScreenStyles {
     container?: StyleProp<ViewStyle>;
     appName?: StyleProp<TextStyle>;
     version?: StyleProp<TextStyle>;
     separator?: StyleProp<ViewStyle>;
     paragraph?: StyleProp<TextStyle>;
+    sectionTitle?: StyleProp<TextStyle>;
     hint?: StyleProp<TextStyle>;
 }
 export interface AboutSettingsScreenLabels {
@@ -16,9 +21,12 @@ export interface AboutSettingsScreenProps {
     version: string;
     /** One or more paragraphs describing the app, rendered in order. */
     description: string | string[];
-    developerName: string;
+    /** Extra titled sections after the description, e.g. a medical/legal disclaimer. */
+    sections?: AboutSettingsScreenSection[];
+    /** Omit to not show a "developed by" credit line at all. */
+    developerName?: string;
     labels?: AboutSettingsScreenLabels;
     styles?: AboutSettingsScreenStyles;
 }
-export declare function AboutSettingsScreen({ appName, version, description, developerName, labels, styles, }: AboutSettingsScreenProps): import("react").JSX.Element;
+export declare function AboutSettingsScreen({ appName, version, description, sections, developerName, labels, styles, }: AboutSettingsScreenProps): import("react").JSX.Element;
 //# sourceMappingURL=AboutSettingsScreen.d.ts.map

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

@@ -1 +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"}
+{"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,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,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,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,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,oFAAoF;IACpF,QAAQ,CAAC,EAAE,0BAA0B,EAAE,CAAC;IACxC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AAqCD,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,wBAAwB,+BA8C1B"}

package/dist/components/settings/AboutSettingsScreen.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, View } from "react-native";
 const defaultLabels = {
     version: (version) => `Version ${version}`,
@@ -19,23 +19,31 @@ const defaultStyles = {
         color: "#111827",
         marginBottom: 12,
     },
+    sectionTitle: {
+        fontSize: 15,
+        fontWeight: "700",
+        color: "#111827",
+        marginBottom: 8,
+    },
     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
+// App name, version, a short description, optional extra titled sections
+// (e.g. a medical/legal disclaimer), and an optional "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, }) {
+export function AboutSettingsScreen({ appName, version, description, sections, 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],
+        sectionTitle: [defaultStyles.sectionTitle, styles?.sectionTitle],
         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) })] }));
+    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))), sections?.map((section) => (_jsxs(View, { children: [_jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.sectionTitle, children: section.title }), section.paragraphs.map((paragraph) => (_jsx(Text, { style: merged.paragraph, children: paragraph }, paragraph)))] }, section.title))), developerName && (_jsxs(_Fragment, { children: [_jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.hint, children: t.developedBy(developerName) })] }))] }));
 }

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

@@ -1,4 +1,5 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 export interface BackupSettingsScreenReminder {
     enabled: boolean;
     /** Set while a permission request or the toggle's own persistence is in flight. */
@@ -7,13 +8,29 @@ export interface BackupSettingsScreenReminder {
     /** How often the reminder fires, only used to word the hint (e.g. "every 7 days"). */
     intervalDays: number;
 }
+export interface BackupSettingsScreenInfo {
+    label: string;
+    value: string;
+}
+export interface BackupSettingsScreenIcons {
+    export?: keyof typeof Ionicons.glyphMap;
+    import?: keyof typeof Ionicons.glyphMap;
+}
 export interface BackupSettingsScreenStyles {
     container?: StyleProp<ViewStyle>;
+    infoBox?: StyleProp<ViewStyle>;
+    infoLabel?: StyleProp<TextStyle>;
+    infoValue?: StyleProp<TextStyle>;
+    sectionTitle?: StyleProp<TextStyle>;
     hint?: StyleProp<TextStyle>;
     row?: StyleProp<ViewStyle>;
     button?: StyleProp<ViewStyle>;
     buttonDisabled?: StyleProp<ViewStyle>;
     buttonText?: StyleProp<TextStyle>;
+    iconColor?: string;
+    /** Merged on top of `button`/`buttonText` — defaults to the same look as the export button. */
+    importButton?: StyleProp<ViewStyle>;
+    importButtonText?: StyleProp<TextStyle>;
     reminderRow?: StyleProp<ViewStyle>;
     reminderTextColumn?: StyleProp<ViewStyle>;
     reminderLabel?: StyleProp<TextStyle>;
@@ -24,6 +41,11 @@ export interface BackupSettingsScreenLabels {
     hint?: string;
     exportButton?: string;
     importButton?: string;
+    /** Only shown in `layout="sections"`. */
+    exportSectionTitle?: string;
+    exportHelpText?: string;
+    importSectionTitle?: string;
+    importHelpText?: string;
     importConfirmTitle?: string;
     importConfirmMessage?: string;
     importConfirmLabel?: string;
@@ -45,8 +67,18 @@ export interface BackupSettingsScreenProps {
     onImport: () => Promise<void>;
     /** Omit entirely to not show a reminder toggle at all. */
     reminder?: BackupSettingsScreenReminder;
+    /** An info box above everything else, e.g. "Last auto-backup: ...". Omit to not show one. */
+    info?: BackupSettingsScreenInfo;
+    /**
+     * `"compact"` (default): one shared hint, both buttons side by side.
+     * `"sections"`: each action gets its own title + help text, buttons
+     * stacked full-width.
+     */
+    layout?: "compact" | "sections";
+    /** Leading icon for each button. Omit either (or both) for a text-only button (default). */
+    icons?: BackupSettingsScreenIcons;
     labels?: BackupSettingsScreenLabels;
     styles?: BackupSettingsScreenStyles;
 }
-export declare function BackupSettingsScreen({ onExport, onImport, reminder, labels, styles, }: BackupSettingsScreenProps): import("react").JSX.Element;
+export declare function BackupSettingsScreen({ onExport, onImport, reminder, info, layout, icons, labels, styles, }: BackupSettingsScreenProps): import("react").JSX.Element;
 //# sourceMappingURL=BackupSettingsScreen.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"BackupSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/BackupSettingsScreen.tsx"],"names":[],"mappings":"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"}

package/dist/components/settings/BackupSettingsScreen.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ActivityIndicator, Alert, Pressable, Switch, Text, View, } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 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",
+    exportSectionTitle: "Exporter",
+    exportHelpText: "Exporte toutes tes données dans un fichier que tu peux garder précieusement ou transférer vers un autre appareil.",
+    importSectionTitle: "Importer",
+    importHelpText: "Restaure une sauvegarde exportée précédemment. Remplace entièrement les données actuelles — il n'y a pas de fusion.",
     importConfirmTitle: "Importer une sauvegarde ?",
     importConfirmMessage: "Toutes les données actuelles seront remplacées par celles du fichier choisi.",
     importConfirmLabel: "Choisir un fichier",
@@ -18,9 +23,33 @@ const defaultLabels = {
 };
 const defaultStyles = {
     container: {},
-    hint: { fontSize: 13, color: "#6b7280", marginBottom: 16 },
+    infoBox: {
+        backgroundColor: "#f9fafb",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 20,
+        gap: 2,
+    },
+    infoLabel: { fontSize: 12, color: "#6b7280" },
+    infoValue: { fontSize: 12, color: "#111827", fontWeight: "600" },
+    sectionTitle: {
+        fontSize: 15,
+        fontWeight: "700",
+        color: "#111827",
+        marginTop: 20,
+    },
+    hint: {
+        fontSize: 13,
+        color: "#6b7280",
+        marginTop: 6,
+        marginBottom: 14,
+        lineHeight: 18,
+    },
     row: { flexDirection: "row", gap: 10 },
     button: {
+        flexDirection: "row",
         flex: 1,
         paddingVertical: 12,
         borderRadius: 8,
@@ -28,9 +57,13 @@ const defaultStyles = {
         borderColor: "#2563eb",
         alignItems: "center",
         justifyContent: "center",
+        gap: 8,
     },
     buttonDisabled: { opacity: 0.5 },
     buttonText: { color: "#2563eb", fontWeight: "700" },
+    iconColor: "#2563eb",
+    importButton: undefined,
+    importButtonText: undefined,
     reminderRow: {
         flexDirection: "row",
         alignItems: "center",
@@ -55,16 +88,32 @@ function errorMessage(err, fallback) {
 // 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, }) {
+export function BackupSettingsScreen({ onExport, onImport, reminder, info, layout = "compact", icons, labels, styles, }) {
     const [exporting, setExporting] = useState(false);
     const [importing, setImporting] = useState(false);
     const merged = {
         container: [defaultStyles.container, styles?.container],
+        infoBox: [defaultStyles.infoBox, styles?.infoBox],
+        infoLabel: [defaultStyles.infoLabel, styles?.infoLabel],
+        infoValue: [defaultStyles.infoValue, styles?.infoValue],
+        sectionTitle: [defaultStyles.sectionTitle, styles?.sectionTitle],
         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],
+        importButton: [
+            defaultStyles.button,
+            styles?.button,
+            defaultStyles.importButton,
+            styles?.importButton,
+        ],
+        importButtonText: [
+            defaultStyles.buttonText,
+            styles?.buttonText,
+            defaultStyles.importButtonText,
+            styles?.importButtonText,
+        ],
         reminderRow: [defaultStyles.reminderRow, styles?.reminderRow],
         reminderTextColumn: [
             defaultStyles.reminderTextColumn,
@@ -75,6 +124,7 @@ export function BackupSettingsScreen({ onExport, onImport, reminder, labels, sty
     };
     const t = { ...defaultLabels, ...labels };
     const activityIndicatorColor = styles?.activityIndicatorColor ?? defaultStyles.activityIndicatorColor;
+    const iconColor = styles?.iconColor ?? defaultStyles.iconColor;
     async function handleExport() {
         if (exporting)
             return;
@@ -111,9 +161,11 @@ export function BackupSettingsScreen({ onExport, onImport, reminder, labels, sty
             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: () => {
+    const exportButton = (_jsx(Pressable, { style: [merged.button, exporting && merged.buttonDisabled], disabled: exporting, onPress: () => {
+            void handleExport();
+        }, accessibilityRole: "button", accessibilityLabel: t.exportButton, children: exporting ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsxs(_Fragment, { children: [icons?.export && (_jsx(Ionicons, { name: icons.export, size: 18, color: iconColor })), _jsx(Text, { style: merged.buttonText, children: t.exportButton })] })) }));
+    const importButton = (_jsx(Pressable, { style: [merged.importButton, importing && merged.buttonDisabled], disabled: importing, onPress: handleImportPress, accessibilityRole: "button", accessibilityLabel: t.importButton, children: importing ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsxs(_Fragment, { children: [icons?.import && (_jsx(Ionicons, { name: icons.import, size: 18, color: iconColor })), _jsx(Text, { style: merged.importButtonText, children: t.importButton })] })) }));
+    return (_jsxs(View, { style: merged.container, children: [info && (_jsxs(View, { style: merged.infoBox, children: [_jsx(Text, { style: merged.infoLabel, children: info.label }), _jsx(Text, { style: merged.infoValue, children: info.value })] })), layout === "sections" ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: merged.sectionTitle, children: t.exportSectionTitle }), _jsx(Text, { style: merged.hint, children: t.exportHelpText }), exportButton, _jsx(Text, { style: merged.sectionTitle, children: t.importSectionTitle }), _jsx(Text, { style: merged.hint, children: t.importHelpText }), importButton] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsxs(View, { style: merged.row, children: [exportButton, 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

@@ -1,19 +1,40 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+export interface ContactSettingsScreenAction {
+    icon: keyof typeof Ionicons.glyphMap;
+    label: string;
+    onPress: () => void;
+    accessibilityLabel?: string;
+}
 export interface ContactSettingsScreenStyles {
     container?: StyleProp<ViewStyle>;
     hint?: StyleProp<TextStyle>;
     emailButton?: StyleProp<ViewStyle>;
     emailButtonText?: StyleProp<TextStyle>;
     separator?: StyleProp<ViewStyle>;
+    /** Only used when `actions` is set (rows layout). */
+    row?: StyleProp<ViewStyle>;
+    rowText?: StyleProp<TextStyle>;
+    rowIconColor?: string;
 }
 export interface ContactSettingsScreenLabels {
     hint?: string;
     footer?: string;
+    /** Only used when `actions` is set — the email row's label (the button itself shows the address in the default single-button layout). */
+    emailRowLabel?: string;
 }
 export interface ContactSettingsScreenProps {
     email: string;
+    /**
+     * Extra rows below the email one (icon + label). Setting this switches
+     * the whole section from a single bordered `mailto:` button to a list of
+     * icon rows — the email becomes the first row (icon defaults to
+     * `emailIcon`, label to `labels.emailRowLabel`) instead of the button.
+     */
+    actions?: ContactSettingsScreenAction[];
+    emailIcon?: keyof typeof Ionicons.glyphMap;
     labels?: ContactSettingsScreenLabels;
     styles?: ContactSettingsScreenStyles;
 }
-export declare function ContactSettingsScreen({ email, labels, styles, }: ContactSettingsScreenProps): import("react").JSX.Element;
+export declare function ContactSettingsScreen({ email, actions, emailIcon, labels, styles, }: ContactSettingsScreenProps): import("react").JSX.Element;
 //# sourceMappingURL=ContactSettingsScreen.d.ts.map

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

@@ -1 +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"}
+{"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;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,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;IACjC,qDAAqD;IACrD,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yIAAyI;IACzI,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,OAAO,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IAC3C,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AA+CD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,OAAO,EACP,SAA0B,EAC1B,MAAM,EACN,MAAM,GACP,EAAE,0BAA0B,+BAkE5B"}

package/dist/components/settings/ContactSettingsScreen.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Linking, Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 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.",
+    emailRowLabel: "Me contacter",
 };
 const defaultStyles = {
     container: {},
@@ -21,19 +23,40 @@ const defaultStyles = {
         marginVertical: 16,
         backgroundColor: "#e5e7eb",
     },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        backgroundColor: "#ffffff",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        marginTop: 8,
+    },
+    rowText: { flex: 1, fontSize: 15, fontWeight: "600", color: "#111827" },
+    rowIconColor: "#111827",
 };
 // 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, }) {
+// "Contact" section of a settings tab. Pass `actions` for extra rows (share
+// the app, a donation link...), switching email + those to a rows layout.
+export function ContactSettingsScreen({ email, actions, emailIcon = "mail-outline", 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],
+        row: [defaultStyles.row, styles?.row],
+        rowText: [defaultStyles.rowText, styles?.rowText],
     };
     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 })] }));
+    const rowIconColor = styles?.rowIconColor ?? defaultStyles.rowIconColor;
+    function openEmail() {
+        void Linking.openURL(`mailto:${email}`);
+    }
+    if (actions) {
+        return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsxs(Pressable, { style: merged.row, onPress: openEmail, accessibilityRole: "button", accessibilityLabel: `Envoyer un email à ${email}`, children: [_jsx(Ionicons, { name: emailIcon, size: 20, color: rowIconColor }), _jsx(Text, { style: merged.rowText, children: t.emailRowLabel })] }), actions.map((action) => (_jsxs(Pressable, { style: merged.row, onPress: action.onPress, accessibilityRole: "button", accessibilityLabel: action.accessibilityLabel ?? action.label, children: [_jsx(Ionicons, { name: action.icon, size: 20, color: rowIconColor }), _jsx(Text, { style: merged.rowText, children: action.label })] }, action.label)))] }));
+    }
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsx(Pressable, { style: merged.emailButton, onPress: openEmail, 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/SettingsMenu.d.ts

@@ -1,24 +1,64 @@
 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 — also what distinguishes otherwise-identical items. */
+    /**
+     * 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;
-    emoji: 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 SettingsMenuGroup {
+    /** Omit for a group with no visible header (e.g. the first one). */
+    title?: string;
+    items: SettingsMenuItem[];
+}
 export interface SettingsMenuStyles {
     container?: StyleProp<ViewStyle>;
+    groupTitle?: StyleProp<TextStyle>;
     row?: StyleProp<ViewStyle>;
     titleColumn?: StyleProp<ViewStyle>;
     emoji?: StyleProp<TextStyle>;
+    iconColor?: string;
     title?: StyleProp<TextStyle>;
     hint?: StyleProp<TextStyle>;
     chevronColor?: string;
 }
 export interface SettingsMenuProps {
-    items: SettingsMenuItem[];
+    /** A flat list of rows. Mutually exclusive with `groups`. */
+    items?: SettingsMenuItem[];
+    /** Rows grouped under optional section headers. Mutually exclusive with `items`. */
+    groups?: SettingsMenuGroup[];
+    /**
+     * 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, styles }: SettingsMenuProps): import("react").JSX.Element;
+export declare function SettingsMenu({ items, groups, defaultIconKind, showHints, styles, }: SettingsMenuProps): import("react").JSX.Element;
 //# sourceMappingURL=SettingsMenu.d.ts.map

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

@@ -1 +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;AAIpE,MAAM,WAAW,gBAAgB;IAC/B,4EAA4E;IAC5E,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,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,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,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AA4BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,iBAAiB,+BA+BhE"}
+{"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,iBAAiB;IAChC,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,gBAAgB,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,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,6DAA6D;IAC7D,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,oFAAoF;IACpF,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACnC,gHAAgH;IAChH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAmDD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,eAAyB,EACzB,SAAgB,EAChB,MAAM,GACP,EAAE,iBAAiB,+BAsDnB"}

package/dist/components/settings/SettingsMenu.js

@@ -1,8 +1,22 @@
 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 },
+    groupTitle: {
+        fontSize: 13,
+        fontWeight: "700",
+        color: "#6b7280",
+        textTransform: "uppercase",
+    },
     row: {
         flexDirection: "row",
         alignItems: "center",
@@ -14,6 +28,7 @@ const defaultStyles = {
     },
     titleColumn: { flex: 1 },
     emoji: { fontSize: 24 },
+    iconColor: "#111827",
     title: {
         fontSize: 16,
         fontWeight: "600",
@@ -22,13 +37,28 @@ const defaultStyles = {
     hint: { fontSize: 12, color: "#6b7280", marginTop: 2 },
     chevronColor: "#9ca3af",
 };
-// Menu screen for a settings tab: one row per section (emoji + title + 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, styles }) {
+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, optionally grouped under
+// section headers (`groups` instead of `items`). 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, groups, defaultIconKind = "emoji", showHints = true, styles, }) {
     const merged = {
         container: [defaultStyles.container, styles?.container],
+        groupTitle: [defaultStyles.groupTitle, styles?.groupTitle],
         row: [defaultStyles.row, styles?.row],
         titleColumn: [defaultStyles.titleColumn, styles?.titleColumn],
         emoji: [defaultStyles.emoji, styles?.emoji],
@@ -36,5 +66,14 @@ export function SettingsMenu({ items, styles }) {
         hint: [defaultStyles.hint, styles?.hint],
     };
     const chevronColor = styles?.chevronColor ?? defaultStyles.chevronColor;
-    return (_jsx(View, { style: merged.container, children: items.map((item) => (_jsxs(Pressable, { style: merged.row, onPress: item.onPress, accessibilityRole: "button", accessibilityLabel: item.title, children: [_jsx(Text, { style: merged.emoji, children: item.emoji }), _jsxs(View, { style: merged.titleColumn, children: [_jsx(Text, { style: merged.title, children: item.title }), item.hint ? _jsx(Text, { style: merged.hint, children: item.hint }) : null] }), _jsx(Ionicons, { name: "chevron-forward", size: 20, color: chevronColor })] }, item.key))) }));
+    const iconColor = styles?.iconColor ?? defaultStyles.iconColor;
+    function renderItem(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));
+    }
+    return (_jsx(View, { style: merged.container, children: groups
+            ? groups.map((group, index) => (
+            // eslint-disable-next-line @eslint-react/no-array-index-key -- groups have no other stable identifier, and are a static, author-defined list (not reordered/filtered at runtime)
+            _jsxs(View, { style: merged.container, children: [group.title ? (_jsx(Text, { style: merged.groupTitle, children: group.title })) : null, group.items.map(renderItem)] }, group.title ?? index)))
+            : items?.map(renderItem) }));
 }

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

@@ -1,10 +1,16 @@
 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;
@@ -17,16 +23,29 @@ export interface ThemeSettingsScreenStyles {
     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, emojis, labels, styles, }: ThemeSettingsScreenProps): import("react").JSX.Element;
+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

@@ -1 +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;AAGpE,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,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,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;CAC9B;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AAoDD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,wBAAwB,+BA2C1B"}
+{"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

@@ -1,11 +1,17 @@
 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",
@@ -29,6 +35,8 @@ const defaultStyles = {
         backgroundColor: "#2563eb1a",
     },
     emoji: { fontSize: 20 },
+    iconColor: "#111827",
+    iconColorActive: "#2563eb",
     label: {
         flex: 1,
         fontSize: 15,
@@ -41,12 +49,14 @@ const defaultStyles = {
         fontWeight: "700",
         color: "#2563eb",
     },
+    checkColor: "#2563eb",
 };
-// Selectable list of rows (emoji + label + checkmark) for a light/dark/system
-// theme preference — same data contract as `ThemeOptionList`, but an emoji +
-// plain-text checkmark instead of vector icons. Pick whichever visual fits
-// your app; both cover the exact same `light`/`dark`/`system` preference.
-export function ThemeSettingsScreen({ value, onChange, emojis, labels, styles, }) {
+// 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.
@@ -61,11 +71,16 @@ export function ThemeSettingsScreen({ value, onChange, emojis, labels, styles, }
         check: [defaultStyles.check, styles?.check],
     };
     const e = { ...defaultEmojis, ...emojis };
+    const i = { ...defaultIcons, ...icons };
     const t = { ...defaultLabels, ...labels };
-    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.hint, children: t.hint }), OPTIONS.map((option) => {
+    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: [_jsx(Text, { style: merged.emoji, children: e[option] }), _jsx(Text, { style: [merged.label, active && merged.labelActive], children: t[option] }), active && _jsx(Text, { style: merged.check, children: "\u2713" })] }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -44,8 +44,8 @@
     "react-test-renderer": "19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "@forthtilliath/typescript-config": "0.0.0",
-    "@forthtilliath/eslint-config": "0.0.0"
+    "@forthtilliath/eslint-config": "0.0.0",
+    "@forthtilliath/typescript-config": "0.0.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",