@forthtilliath/react-native-kit 0.10.0 → 0.11.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,45 @@ 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" },
+  }}
+/>
+```
+
 #### `<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 />`

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

@@ -1,8 +1,30 @@
 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;
@@ -12,13 +34,22 @@ export interface SettingsMenuStyles {
     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, styles }: SettingsMenuProps): import("react").JSX.Element;
+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

@@ -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,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

@@ -1,6 +1,14 @@
 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: {
@@ -14,6 +22,7 @@ const defaultStyles = {
     },
     titleColumn: { flex: 1 },
     emoji: { fontSize: 24 },
+    iconColor: "#111827",
     title: {
         fontSize: 16,
         fontWeight: "600",
@@ -22,11 +31,24 @@ 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. 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],
@@ -36,5 +58,9 @@ 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;
+    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

@@ -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.11.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",