@forthtilliath/react-native-kit 0.7.1 → 0.8.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Forthtilliath
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Forthtilliath
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,328 +1,338 @@
-# @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 so consumers only pull in what they use.
-
-## Install
-
-```bash
-npm install @forthtilliath/react-native-kit react react-native
-```
-
-Or, from within this monorepo, as a workspace dependency:
-
-```json
-{
-  "dependencies": {
-    "@forthtilliath/react-native-kit": "workspace:*"
-  }
-}
-```
-
-`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, and `react-native-gesture-handler` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, respectively).
-
-## Usage
-
-Each component is its own module — import the file you need directly:
-
-```ts
-import { ChangelogNotes } from "@forthtilliath/react-native-kit/ChangelogNotes";
-```
-
-This is the recommended way to import: Metro (React Native's bundler) doesn't reliably tree-shake, so pulling from a single deep-import path keeps peer dependencies you don't use (`expo-image-picker`, `expo-speech-recognition`, `react-native-gesture-handler`...) out of your bundle entirely, rather than merely unused.
-
-A root barrel is also available for convenience:
-
-```ts
-import {
-  ChangelogNotes,
-  useSubmitGuard,
-} from "@forthtilliath/react-native-kit";
-```
-
-**Avoid the barrel under Jest (or any other CommonJS `require` consumer).** `export * from` re-exports are evaluated eagerly on `require()` — unlike Metro's ESM bundling, there's no tree-shaking to skip the unused ones. Requiring the barrel from _any_ file, even one that only wants a framework-agnostic util like `getMostRecentIds`, pulls in every component's module graph, including native-module imports (`expo-speech-recognition` via `VoiceSearchButton`/`PickerModal`) that don't exist in a Jest environment — this throws `Cannot find native module '...'` at require time, not just at runtime for an unrendered component. Deep imports only ever load the one module you asked for, so they don't have this problem in any environment.
-
-### `<ChangelogNotes notes={...} styles={...} />`
-
-Renders GitHub-style release notes — as produced by `@forthtilliath/expo-release-updates`'s `parseChangelogNotes` — as headings, bulleted items, and bold-aware text, instead of showing the raw Markdown syntax in a plain `Text`.
-
-```tsx
-<ChangelogNotes notes={release.notes} />
-```
-
-It understands the small subset of Markdown GitHub release notes actually use:
-
-| `notes` input                             | Rendered as                                                                 |
-| ----------------------------------------- | --------------------------------------------------------------------------- |
-| `### Added`                               | a heading `Text` — `"Added"`                                                |
-| `- Export history to CSV.`                | a row (`View`) with a `•` bullet `Text` and an item `Text`                  |
-| `**Auto-backup**: saves every 5 minutes.` | a plain `Text`, with the bold segment split into its own bold-styled `Text` |
-
-A full example, mixing all three:
-
-```tsx
-<ChangelogNotes
-  notes={`### Added\n- **Auto-backup**: saves every 5 minutes.\n- Export history to CSV.\n\nSee the full changelog for details.`}
-/>
-```
-
-The component ships with neutral default styles and no opinion on your app's theme. Override any subset via the `styles` prop to match your colors/dark mode:
-
-```tsx
-<ChangelogNotes
-  notes={release.notes}
-  styles={{
-    heading: { color: colors.text, fontWeight: "700" },
-    itemRow: { gap: 8 },
-    bullet: { color: colors.primary },
-    itemText: { color: colors.textMuted },
-    text: { color: colors.textMuted },
-    bold: { color: colors.text, fontWeight: "700" },
-  }}
-/>
-```
-
-Every field of `styles` is optional — pass only the ones you want to override; the rest fall back to the defaults (`ChangelogNotesStyles` in `ChangelogNotes.tsx`).
-
-### `<Thumbnail photoUri={...} placeholderIcon="..." />`
-
-List-row thumbnail: the photo if there is one, otherwise a placeholder icon.
-
-```tsx
-import { Thumbnail } from "@forthtilliath/react-native-kit/Thumbnail";
-
-<Thumbnail
-  photoUri={container.photoUri}
-  placeholderIcon="cube-outline"
-  size={48}
-/>;
-```
-
-### `<SwipeableRow onDelete={...} deleteLabel="...">`
-
-Swipe a list row left to reveal a delete button, on top of a tap to edit it.
-
-```tsx
-import { SwipeableRow } from "@forthtilliath/react-native-kit/SwipeableRow";
-
-<SwipeableRow
-  onDelete={() => remove(item.id)}
-  deleteLabel={`Delete ${item.name}`}
->
-  <ItemRow item={item} />
-</SwipeableRow>;
-```
-
-### `<VoiceSearchButton onResult={...} />`
-
-Microphone button to dictate a search instead of typing it. Safe to mount more than one at a time (e.g. a name field plus a search picker on the same screen) — only the instance that started listening reacts to its result.
-
-```tsx
-import { VoiceSearchButton } from "@forthtilliath/react-native-kit/VoiceSearchButton";
-
-<VoiceSearchButton onResult={setQuery} lang="en-US" />;
-```
-
-### `<PhotoPicker photoUri={...} onChange={...} savePhoto={...} photoLabel="..." />`
-
-Photo picker (camera or library) with a preview and a remove link. `savePhoto` is injected rather than hard-coded, so where/how the picked image gets persisted is entirely up to the caller.
-
-```tsx
-import { PhotoPicker } from "@forthtilliath/react-native-kit/PhotoPicker";
-
-<PhotoPicker
-  photoUri={container.photoUri}
-  onChange={(uri) => setPhotoUri(uri)}
-  savePhoto={(sourceUri) => saveContainerPhoto(sourceUri)}
-  photoLabel="of the container"
-/>;
-```
-
-### `<PickerModal visible title items onSelect onClose />`
-
-Full-screen picker: search (typed or dictated via `VoiceSearchButton`), optional sections, and "add" actions always visible above the results.
-
-```tsx
-import {
-  PickerModal,
-  type PickerItem,
-} from "@forthtilliath/react-native-kit/PickerModal";
-
-<PickerModal
-  visible={pickerVisible}
-  title="Choose a container"
-  items={containers.map((c): PickerItem => ({
-    id: c.id,
-    label: c.name,
-    imageUri: c.photoUri,
-  }))}
-  onSelect={(item) => setContainerId(item.id)}
-  onClose={() => setPickerVisible(false)}
-  extraActions={[
-    {
-      label: "Add a new container",
-      onPress: () => router.push("/containers/new"),
-    },
-  ]}
-/>;
-```
-
-Groups results into sections via each item's `group` (e.g. food groups, ingredients vs recipes) — ignored while searching, where the best global matches are shown instead. Pass `filterItems` for custom ranking (e.g. `rankByNameMatch` from this same package's `utils/`) instead of the default case-insensitive substring match.
-
-For all 5 components above, styling and (where relevant) copy work the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults) and, for `PhotoPicker`/`PickerModal`, an optional `labels` prop for the built-in French copy.
-
-### `useSubmitGuard()`
-
-Prevents a second call while a first one is still pending — e.g. a double-tap on a "Save" button before it's had time to disable, which would otherwise create duplicate submissions.
-
-```tsx
-import { useSubmitGuard } from "@forthtilliath/react-native-kit/useSubmitGuard";
-
-const { isSaving, guard } = useSubmitGuard();
-
-<Pressable
-  disabled={isSaving}
-  onPress={() =>
-    guard(async () => {
-      await save();
-    })
-  }
->
-  <Text>{isSaving ? "Saving…" : "Save"}</Text>
-</Pressable>;
-```
-
-### `useDebouncedChange(values, delayMs, callback)`
-
-Calls `callback` `delayMs` after the last change among `values`, ignoring renders where any value is still `undefined` (not loaded yet) and the very first render where they're all defined (no trigger on mount). A new change before the delay elapses resets the timer — a real debounce, not a throttle.
-
-```tsx
-import { useDebouncedChange } from "@forthtilliath/react-native-kit/useDebouncedChange";
-
-useDebouncedChange([settingsData, itemsData], 5 * 60 * 1000, () => {
-  runAutoBackup();
-});
-```
-
-### `confirmDestructive(title, onConfirm, options?)`
-
-Generic destructive-action confirmation (title + message + Cancel/Confirm), for anything irreversible (delete, reset...). Ships with French defaults (`message`, `cancelLabel`, `confirmLabel` all overridable).
-
-```ts
-import { confirmDestructive } from "@forthtilliath/react-native-kit/confirmDestructive";
-
-confirmDestructive("Delete this item?", () => deleteItem(id), {
-  message: "This cannot be undone.",
-  cancelLabel: "Cancel",
-  confirmLabel: "Delete",
-});
-```
-
-### `useEffectiveColorScheme(preference)`
-
-Resolves a `"light" | "dark" | "system"` theme preference against the device's color scheme: `"system"` follows the device, `"light"`/`"dark"` override it regardless of what the device is set to.
-
-```tsx
-import { useEffectiveColorScheme } from "@forthtilliath/react-native-kit/useEffectiveColorScheme";
-
-const scheme = useEffectiveColorScheme(themePreference); // "light" | "dark"
-const colors = scheme === "dark" ? darkColors : lightColors;
-```
-
-### `<ThemeToggle value onChange />`
-
-3-way segmented control for a light/dark/system theme preference.
-
-```tsx
-import { ThemeToggle } from "@forthtilliath/react-native-kit/ThemeToggle";
-
-<ThemeToggle value={themePreference} onChange={setThemePreference} />;
-```
-
-### `useUpdateCheck(options)`
-
-Checks once per mount (e.g. app launch) whether a newer release is available, throttled to at most one real check per `minIntervalMs` (default 12h) and silent for a release the user already dismissed. Has no opinion on where "when did we last check" / "which version did the user dismiss" are persisted — both are read/written entirely through the options you pass in.
-
-```tsx
-import { useUpdateCheck } from "@forthtilliath/react-native-kit/useUpdateCheck";
-
-const update = useUpdateCheck({
-  currentVersion: Constants.expoConfig?.version ?? "0.0.0",
-  checkForUpdate: fetchLatestRelease,
-  compareVersions,
-  getLastCheck: () => ({
-    lastCheckedAt: settings?.lastUpdateCheckAt ?? null,
-    dismissedVersion: settings?.dismissedUpdateVersion ?? null,
-  }),
-  onChecked: (lastCheckedAt) =>
-    updateSettings({ lastUpdateCheckAt: lastCheckedAt }),
-});
-
-if (update.status === "available") {
-  // update.release.version / .notes / .apkUrl
-}
-```
-
-### `<UpdateAvailableBanner version notes onPress onDismiss />`
-
-Dismissible banner announcing an available update: version, release notes (rendered via `ChangelogNotes`), an action button and a dismiss button. Has no opinion on what the action does (e.g. navigate to an update screen) or on how/whether dismissal is persisted.
-
-```tsx
-import { UpdateAvailableBanner } from "@forthtilliath/react-native-kit/UpdateAvailableBanner";
-
-{
-  update.status === "available" && (
-    <UpdateAvailableBanner
-      version={update.release.version}
-      notes={update.release.notes}
-      onPress={() => router.push("/settings/update")}
-      onDismiss={() => {
-        dismissUpdateVersion(update.release.version);
-        update.dismiss();
-      }}
-    />
-  );
-}
-```
-
-### Utils (`utils/`)
-
-Framework-agnostic pure functions — no React or React Native import, usable from Node/web too.
-
-```ts
-import { getPeriodStartMs } from "@forthtilliath/react-native-kit/utils/getPeriodStartMs";
-import { getMostRecentIds } from "@forthtilliath/react-native-kit/utils/getMostRecentIds";
-import { nextInCycle } from "@forthtilliath/react-native-kit/utils/nextInCycle";
-import { normalizeForSearch } from "@forthtilliath/react-native-kit/utils/normalizeForSearch";
-import { rankByNameMatch } from "@forthtilliath/react-native-kit/utils/rankByNameMatch";
-import { escapeCsvField } from "@forthtilliath/react-native-kit/utils/escapeCsvField";
-import { formatCsvNumber } from "@forthtilliath/react-native-kit/utils/formatCsvNumber";
-import { escapeHtml } from "@forthtilliath/react-native-kit/utils/escapeHtml";
-```
-
-| Function                                 | What it does                                                                                                                                                       |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `getPeriodStartMs(period, now?)`         | Start timestamp (ms) for a `"today" \| "7d" \| "30d" \| "all"` period filter, or `null` for `"all"`. `"today"` is the current calendar day, not a rolling 24h.     |
-| `getMostRecentIds(rows, limit?)`         | Most recently occurring distinct ids (`{ id, occurredAt }[]`), most recent first, deduplicated, limited (default 5).                                               |
-| `nextInCycle(ids, currentId)`            | Next id in a short list (e.g. cycling through recents on tap) — wraps to the first if `currentId` is at the end or no longer in the list.                          |
-| `normalizeForSearch(text)`               | Lowercases, trims, strips accents, and expands `œ`/`æ` ligatures (which `normalize("NFD")` alone doesn't decompose) — for accent/case-insensitive search matching. |
-| `rankByNameMatch(items, query, getName)` | Ranks `items` by relevance to `query`: earlier match position first, then shorter name — for a search-as-you-type list.                                            |
-| `escapeCsvField(value)`                  | Quotes and escapes a CSV field (RFC 4180) only if it contains a `"`, `;`, or newline.                                                                              |
-| `formatCsvNumber(value, decimals?)`      | Formats a number with a comma decimal separator (French-locale spreadsheets) instead of JS's dot.                                                                  |
-| `escapeHtml(text)`                       | Basic HTML entity escaping (`&`, `<`, `>`, `"`) for inserting user text into an HTML template.                                                                     |
-
-## Scripts
-
-```bash
-pnpm run dev            # tsc --watch -> dist/
-pnpm run build          # tsc -> dist/
-pnpm run check-types    # tsc --noEmit
-pnpm run lint           # eslint
-pnpm run test           # vitest run
-pnpm run test:watch     # vitest
-```
-
-Built to `dist/` (see the `exports` field in `package.json`), so run `pnpm run build` (or `dev`) after source changes for consumers to see them.
-
-### Testing note
-
-`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details. `react-native-gesture-handler` ships the same kind of Flow syntax, and `@expo/vector-icons` has its own unrelated ESM-resolution issue under Vite/Rollup — both are stubbed the same way (`src/__mocks__/react-native-gesture-handler.tsx`, `src/__mocks__/expo-vector-icons.tsx`). `expo-speech-recognition` and `expo-image-picker` wrap native modules unavailable under Vitest regardless, so they're mocked with plain spies (`src/__mocks__/expo-speech-recognition.tsx`, `src/__mocks__/expo-image-picker.ts`).
+# @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 so consumers only pull in what they use.
+
+## Install
+
+```bash
+npm install @forthtilliath/react-native-kit react react-native
+```
+
+Or, from within this monorepo, as a workspace dependency:
+
+```json
+{
+  "dependencies": {
+    "@forthtilliath/react-native-kit": "workspace:*"
+  }
+}
+```
+
+`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, and `react-native-gesture-handler` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, respectively).
+
+## Usage
+
+Each component is its own module — import the file you need directly:
+
+```ts
+import { ChangelogNotes } from "@forthtilliath/react-native-kit/ChangelogNotes";
+```
+
+This is the recommended way to import: Metro (React Native's bundler) doesn't reliably tree-shake, so pulling from a single deep-import path keeps peer dependencies you don't use (`expo-image-picker`, `expo-speech-recognition`, `react-native-gesture-handler`...) out of your bundle entirely, rather than merely unused.
+
+A root barrel is also available for convenience:
+
+```ts
+import {
+  ChangelogNotes,
+  useSubmitGuard,
+} from "@forthtilliath/react-native-kit";
+```
+
+**Avoid the barrel under Jest (or any other CommonJS `require` consumer).** `export * from` re-exports are evaluated eagerly on `require()` — unlike Metro's ESM bundling, there's no tree-shaking to skip the unused ones. Requiring the barrel from _any_ file, even one that only wants a framework-agnostic util like `getMostRecentIds`, pulls in every component's module graph, including native-module imports (`expo-speech-recognition` via `VoiceSearchButton`/`PickerModal`) that don't exist in a Jest environment — this throws `Cannot find native module '...'` at require time, not just at runtime for an unrendered component. Deep imports only ever load the one module you asked for, so they don't have this problem in any environment.
+
+### `<ChangelogNotes notes={...} styles={...} />`
+
+Renders GitHub-style release notes — as produced by `@forthtilliath/expo-release-updates`'s `parseChangelogNotes` — as headings, bulleted items, and bold-aware text, instead of showing the raw Markdown syntax in a plain `Text`.
+
+```tsx
+<ChangelogNotes notes={release.notes} />
+```
+
+It understands the small subset of Markdown GitHub release notes actually use:
+
+| `notes` input                             | Rendered as                                                                 |
+| ----------------------------------------- | --------------------------------------------------------------------------- |
+| `### Added`                               | a heading `Text` — `"Added"`                                                |
+| `- Export history to CSV.`                | a row (`View`) with a `•` bullet `Text` and an item `Text`                  |
+| `**Auto-backup**: saves every 5 minutes.` | a plain `Text`, with the bold segment split into its own bold-styled `Text` |
+
+A full example, mixing all three:
+
+```tsx
+<ChangelogNotes
+  notes={`### Added\n- **Auto-backup**: saves every 5 minutes.\n- Export history to CSV.\n\nSee the full changelog for details.`}
+/>
+```
+
+The component ships with neutral default styles and no opinion on your app's theme. Override any subset via the `styles` prop to match your colors/dark mode:
+
+```tsx
+<ChangelogNotes
+  notes={release.notes}
+  styles={{
+    heading: { color: colors.text, fontWeight: "700" },
+    itemRow: { gap: 8 },
+    bullet: { color: colors.primary },
+    itemText: { color: colors.textMuted },
+    text: { color: colors.textMuted },
+    bold: { color: colors.text, fontWeight: "700" },
+  }}
+/>
+```
+
+Every field of `styles` is optional — pass only the ones you want to override; the rest fall back to the defaults (`ChangelogNotesStyles` in `ChangelogNotes.tsx`).
+
+### `<Thumbnail photoUri={...} placeholderIcon="..." />`
+
+List-row thumbnail: the photo if there is one, otherwise a placeholder icon.
+
+```tsx
+import { Thumbnail } from "@forthtilliath/react-native-kit/Thumbnail";
+
+<Thumbnail
+  photoUri={container.photoUri}
+  placeholderIcon="cube-outline"
+  size={48}
+/>;
+```
+
+### `<SwipeableRow onDelete={...} deleteLabel="...">`
+
+Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+
+```tsx
+import { SwipeableRow } from "@forthtilliath/react-native-kit/SwipeableRow";
+
+<SwipeableRow
+  onDelete={() => remove(item.id)}
+  deleteLabel={`Delete ${item.name}`}
+>
+  <ItemRow item={item} />
+</SwipeableRow>;
+```
+
+### `<VoiceSearchButton onResult={...} />`
+
+Microphone button to dictate a search instead of typing it. Safe to mount more than one at a time (e.g. a name field plus a search picker on the same screen) — only the instance that started listening reacts to its result.
+
+```tsx
+import { VoiceSearchButton } from "@forthtilliath/react-native-kit/VoiceSearchButton";
+
+<VoiceSearchButton onResult={setQuery} lang="en-US" />;
+```
+
+### `<PhotoPicker photoUri={...} onChange={...} savePhoto={...} photoLabel="..." />`
+
+Photo picker (camera or library) with a preview and a remove link. `savePhoto` is injected rather than hard-coded, so where/how the picked image gets persisted is entirely up to the caller.
+
+```tsx
+import { PhotoPicker } from "@forthtilliath/react-native-kit/PhotoPicker";
+
+<PhotoPicker
+  photoUri={container.photoUri}
+  onChange={(uri) => setPhotoUri(uri)}
+  savePhoto={(sourceUri) => saveContainerPhoto(sourceUri)}
+  photoLabel="of the container"
+/>;
+```
+
+### `<PickerModal visible title items onSelect onClose />`
+
+Full-screen picker: search (typed or dictated via `VoiceSearchButton`), optional sections, and "add" actions always visible above the results.
+
+```tsx
+import {
+  PickerModal,
+  type PickerItem,
+} from "@forthtilliath/react-native-kit/PickerModal";
+
+<PickerModal
+  visible={pickerVisible}
+  title="Choose a container"
+  items={containers.map((c): PickerItem => ({
+    id: c.id,
+    label: c.name,
+    imageUri: c.photoUri,
+  }))}
+  onSelect={(item) => setContainerId(item.id)}
+  onClose={() => setPickerVisible(false)}
+  extraActions={[
+    {
+      label: "Add a new container",
+      onPress: () => router.push("/containers/new"),
+    },
+  ]}
+/>;
+```
+
+Groups results into sections via each item's `group` (e.g. food groups, ingredients vs recipes) — ignored while searching, where the best global matches are shown instead. Pass `filterItems` for custom ranking (e.g. `rankByNameMatch` from this same package's `utils/`) instead of the default case-insensitive substring match.
+
+For all 5 components above, styling and (where relevant) copy work the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults) and, for `PhotoPicker`/`PickerModal`, an optional `labels` prop for the built-in French copy.
+
+### `useSubmitGuard()`
+
+Prevents a second call while a first one is still pending — e.g. a double-tap on a "Save" button before it's had time to disable, which would otherwise create duplicate submissions.
+
+```tsx
+import { useSubmitGuard } from "@forthtilliath/react-native-kit/useSubmitGuard";
+
+const { isSaving, guard } = useSubmitGuard();
+
+<Pressable
+  disabled={isSaving}
+  onPress={() =>
+    guard(async () => {
+      await save();
+    })
+  }
+>
+  <Text>{isSaving ? "Saving…" : "Save"}</Text>
+</Pressable>;
+```
+
+### `useDebouncedChange(values, delayMs, callback)`
+
+Calls `callback` `delayMs` after the last change among `values`, ignoring renders where any value is still `undefined` (not loaded yet) and the very first render where they're all defined (no trigger on mount). A new change before the delay elapses resets the timer — a real debounce, not a throttle.
+
+```tsx
+import { useDebouncedChange } from "@forthtilliath/react-native-kit/useDebouncedChange";
+
+useDebouncedChange([settingsData, itemsData], 5 * 60 * 1000, () => {
+  runAutoBackup();
+});
+```
+
+### `confirmDestructive(title, onConfirm, options?)`
+
+Generic destructive-action confirmation (title + message + Cancel/Confirm), for anything irreversible (delete, reset...). Ships with French defaults (`message`, `cancelLabel`, `confirmLabel` all overridable).
+
+```ts
+import { confirmDestructive } from "@forthtilliath/react-native-kit/confirmDestructive";
+
+confirmDestructive("Delete this item?", () => deleteItem(id), {
+  message: "This cannot be undone.",
+  cancelLabel: "Cancel",
+  confirmLabel: "Delete",
+});
+```
+
+### `useEffectiveColorScheme(preference)`
+
+Resolves a `"light" | "dark" | "system"` theme preference against the device's color scheme: `"system"` follows the device, `"light"`/`"dark"` override it regardless of what the device is set to.
+
+```tsx
+import { useEffectiveColorScheme } from "@forthtilliath/react-native-kit/useEffectiveColorScheme";
+
+const scheme = useEffectiveColorScheme(themePreference); // "light" | "dark"
+const colors = scheme === "dark" ? darkColors : lightColors;
+```
+
+### `<ThemeToggle value onChange />`
+
+3-way segmented control for a light/dark/system theme preference.
+
+```tsx
+import { ThemeToggle } from "@forthtilliath/react-native-kit/ThemeToggle";
+
+<ThemeToggle value={themePreference} onChange={setThemePreference} />;
+```
+
+### `<ThemeOptionList value onChange />`
+
+Same light/dark/system data contract as `ThemeToggle`, but rendered as a list of full-width rows (icon + label + checkmark on the active one) instead of a segmented control.
+
+```tsx
+import { ThemeOptionList } from "@forthtilliath/react-native-kit/ThemeOptionList";
+
+<ThemeOptionList value={themePreference} onChange={setThemePreference} />;
+```
+
+### `useUpdateCheck(options)`
+
+Checks once per mount (e.g. app launch) whether a newer release is available, throttled to at most one real check per `minIntervalMs` (default 12h) and silent for a release the user already dismissed. Has no opinion on where "when did we last check" / "which version did the user dismiss" are persisted — both are read/written entirely through the options you pass in.
+
+```tsx
+import { useUpdateCheck } from "@forthtilliath/react-native-kit/useUpdateCheck";
+
+const update = useUpdateCheck({
+  currentVersion: Constants.expoConfig?.version ?? "0.0.0",
+  checkForUpdate: fetchLatestRelease,
+  compareVersions,
+  getLastCheck: () => ({
+    lastCheckedAt: settings?.lastUpdateCheckAt ?? null,
+    dismissedVersion: settings?.dismissedUpdateVersion ?? null,
+  }),
+  onChecked: (lastCheckedAt) =>
+    updateSettings({ lastUpdateCheckAt: lastCheckedAt }),
+});
+
+if (update.status === "available") {
+  // update.release.version / .notes / .apkUrl
+}
+```
+
+### `<UpdateAvailableBanner version notes onPress onDismiss />`
+
+Dismissible banner announcing an available update: version, release notes (rendered via `ChangelogNotes`), an action button and a dismiss button. Has no opinion on what the action does (e.g. navigate to an update screen) or on how/whether dismissal is persisted.
+
+```tsx
+import { UpdateAvailableBanner } from "@forthtilliath/react-native-kit/UpdateAvailableBanner";
+
+{
+  update.status === "available" && (
+    <UpdateAvailableBanner
+      version={update.release.version}
+      notes={update.release.notes}
+      onPress={() => router.push("/settings/update")}
+      onDismiss={() => {
+        dismissUpdateVersion(update.release.version);
+        update.dismiss();
+      }}
+    />
+  );
+}
+```
+
+### Utils (`utils/`)
+
+Framework-agnostic pure functions — no React or React Native import, usable from Node/web too.
+
+```ts
+import { getPeriodStartMs } from "@forthtilliath/react-native-kit/utils/getPeriodStartMs";
+import { getMostRecentIds } from "@forthtilliath/react-native-kit/utils/getMostRecentIds";
+import { nextInCycle } from "@forthtilliath/react-native-kit/utils/nextInCycle";
+import { normalizeForSearch } from "@forthtilliath/react-native-kit/utils/normalizeForSearch";
+import { rankByNameMatch } from "@forthtilliath/react-native-kit/utils/rankByNameMatch";
+import { escapeCsvField } from "@forthtilliath/react-native-kit/utils/escapeCsvField";
+import { formatCsvNumber } from "@forthtilliath/react-native-kit/utils/formatCsvNumber";
+import { escapeHtml } from "@forthtilliath/react-native-kit/utils/escapeHtml";
+```
+
+| Function                                 | What it does                                                                                                                                                       |
+| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `getPeriodStartMs(period, now?)`         | Start timestamp (ms) for a `"today" \| "7d" \| "30d" \| "all"` period filter, or `null` for `"all"`. `"today"` is the current calendar day, not a rolling 24h.     |
+| `getMostRecentIds(rows, limit?)`         | Most recently occurring distinct ids (`{ id, occurredAt }[]`), most recent first, deduplicated, limited (default 5).                                               |
+| `nextInCycle(ids, currentId)`            | Next id in a short list (e.g. cycling through recents on tap) — wraps to the first if `currentId` is at the end or no longer in the list.                          |
+| `normalizeForSearch(text)`               | Lowercases, trims, strips accents, and expands `œ`/`æ` ligatures (which `normalize("NFD")` alone doesn't decompose) — for accent/case-insensitive search matching. |
+| `rankByNameMatch(items, query, getName)` | Ranks `items` by relevance to `query`: earlier match position first, then shorter name — for a search-as-you-type list.                                            |
+| `escapeCsvField(value)`                  | Quotes and escapes a CSV field (RFC 4180) only if it contains a `"`, `;`, or newline.                                                                              |
+| `formatCsvNumber(value, decimals?)`      | Formats a number with a comma decimal separator (French-locale spreadsheets) instead of JS's dot.                                                                  |
+| `escapeHtml(text)`                       | Basic HTML entity escaping (`&`, `<`, `>`, `"`) for inserting user text into an HTML template.                                                                     |
+
+## Scripts
+
+```bash
+pnpm run dev            # tsc --watch -> dist/
+pnpm run build          # tsc -> dist/
+pnpm run check-types    # tsc --noEmit
+pnpm run lint           # eslint
+pnpm run test           # vitest run
+pnpm run test:watch     # vitest
+```
+
+Built to `dist/` (see the `exports` field in `package.json`), so run `pnpm run build` (or `dev`) after source changes for consumers to see them.
+
+### Testing note
+
+`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details. `react-native-gesture-handler` ships the same kind of Flow syntax, and `@expo/vector-icons` has its own unrelated ESM-resolution issue under Vite/Rollup — both are stubbed the same way (`src/__mocks__/react-native-gesture-handler.tsx`, `src/__mocks__/expo-vector-icons.tsx`). `expo-speech-recognition` and `expo-image-picker` wrap native modules unavailable under Vitest regardless, so they're mocked with plain spies (`src/__mocks__/expo-speech-recognition.tsx`, `src/__mocks__/expo-image-picker.ts`).

package/dist/ChangelogNotes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChangelogNotes.d.ts","sourceRoot":"","sources":["../src/ChangelogNotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AA0BD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BAoCpE"}
+{"version":3,"file":"ChangelogNotes.d.ts","sourceRoot":"","sources":["../src/ChangelogNotes.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AA0BD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BA+CpE"}

package/dist/ChangelogNotes.js

@@ -22,7 +22,18 @@ function renderSegments(segments, boldStyle) {
  * Markdown syntax in a plain `<Text>`.
  */
 export function ChangelogNotes({ notes, styles }) {
-    const merged = { ...defaultStyles, ...styles };
+    // Each field is merged as a style array (default, then override) rather
+    // than the override replacing the whole default outright — so passing e.g.
+    // `styles={{ heading: { color: "red" } }}` only changes the color instead
+    // of silently dropping the default's fontSize/fontWeight/marginTop too.
+    const merged = {
+        heading: [defaultStyles.heading, styles?.heading],
+        itemRow: [defaultStyles.itemRow, styles?.itemRow],
+        bullet: [defaultStyles.bullet, styles?.bullet],
+        itemText: [defaultStyles.itemText, styles?.itemText],
+        text: [defaultStyles.text, styles?.text],
+        bold: [defaultStyles.bold, styles?.bold],
+    };
     const blocks = parseChangelogNotes(notes);
     return (_jsx(_Fragment, { children: blocks.map((block, index) => {
             // Blocks have no stable identity of their own (plain parsed lines),

package/dist/PhotoPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../src/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAkDD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAoGlB"}
+{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../src/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAkDD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAoHlB"}

package/dist/PhotoPicker.js

@@ -47,7 +47,23 @@ const defaultLabels = {
 };
 // Photo picker (camera or library) with a preview.
 export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }) {
-    const mergedStyles = { ...defaultStyles, ...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 mergedStyles = {
+        photoPicker: [defaultStyles.photoPicker, styles?.photoPicker],
+        photoPreview: [defaultStyles.photoPreview, styles?.photoPreview],
+        photoPlaceholder: [
+            defaultStyles.photoPlaceholder,
+            styles?.photoPlaceholder,
+        ],
+        photoPlaceholderText: [
+            defaultStyles.photoPlaceholderText,
+            styles?.photoPlaceholderText,
+        ],
+        clearLink: [defaultStyles.clearLink, styles?.clearLink],
+        iconColor: styles?.iconColor ?? defaultStyles.iconColor,
+    };
     const t = { ...defaultLabels, ...labels };
     async function pickFromCamera() {
         const permission = await ImagePicker.requestCameraPermissionsAsync();

package/dist/PickerModal.d.ts.map

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

package/dist/PickerModal.js

@@ -88,7 +88,37 @@ const defaultLabels = {
 // Full-screen picker: search (typed or dictated), optional sections, and
 // "add" actions always visible above the results.
 export function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }) {
-    const merged = useMemo(() => ({ ...defaultStyles, ...styles }), [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 (e.g. losing rowThumbnailPlaceholder's
+    // alignItems/justifyContent by only overriding its backgroundColor).
+    const merged = useMemo(() => ({
+        container: [defaultStyles.container, styles?.container],
+        header: [defaultStyles.header, styles?.header],
+        title: [defaultStyles.title, styles?.title],
+        close: [defaultStyles.close, styles?.close],
+        searchRow: [defaultStyles.searchRow, styles?.searchRow],
+        search: [defaultStyles.search, styles?.search],
+        row: [defaultStyles.row, styles?.row],
+        rowThumbnail: [defaultStyles.rowThumbnail, styles?.rowThumbnail],
+        rowThumbnailPlaceholder: [
+            defaultStyles.rowThumbnailPlaceholder,
+            styles?.rowThumbnailPlaceholder,
+        ],
+        rowLabel: [defaultStyles.rowLabel, styles?.rowLabel],
+        rowSubtitle: [defaultStyles.rowSubtitle, styles?.rowSubtitle],
+        empty: [defaultStyles.empty, styles?.empty],
+        sectionHeader: [defaultStyles.sectionHeader, styles?.sectionHeader],
+        extraActions: [defaultStyles.extraActions, styles?.extraActions],
+        extraActionLabel: [
+            defaultStyles.extraActionLabel,
+            styles?.extraActionLabel,
+        ],
+        extraActionIconColor: styles?.extraActionIconColor ?? defaultStyles.extraActionIconColor,
+        rowThumbnailPlaceholderIconColor: styles?.rowThumbnailPlaceholderIconColor ??
+            defaultStyles.rowThumbnailPlaceholderIconColor,
+        placeholderTextColor: styles?.placeholderTextColor ?? defaultStyles.placeholderTextColor,
+    }), [styles]);
     const t = useMemo(() => ({ ...defaultLabels, ...labels }), [labels]);
     const [query, setQuery] = useState(initialQuery ?? "");
     // Reset the search each time the modal (re-)opens — adjusted during render

package/dist/SwipeableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../src/SwipeableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAqB,EACrB,MAAM,GACP,EAAE,iBAAiB,+BA6BnB"}
+{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../src/SwipeableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAqB,EACrB,MAAM,GACP,EAAE,iBAAiB,+BAuCnB"}

package/dist/SwipeableRow.js

@@ -18,7 +18,17 @@ const defaultStyles = {
 };
 // Swipe a list row left to reveal a delete button, on top of a tap to edit it.
 export function SwipeableRow({ children, onDelete, deleteLabel, deleteText = "Delete", styles, }) {
-    const merged = { ...defaultStyles, ...styles };
+    // Style fields are merged as arrays (default, then override) so a partial
+    // override (e.g. just backgroundColor) doesn't drop the default's
+    // width/borderRadius/marginBottom/gap too.
+    const merged = {
+        deleteAction: [defaultStyles.deleteAction, styles?.deleteAction],
+        deleteActionText: [
+            defaultStyles.deleteActionText,
+            styles?.deleteActionText,
+        ],
+        deleteIconColor: styles?.deleteIconColor ?? defaultStyles.deleteIconColor,
+    };
     const swipeableRef = useRef(null);
     return (_jsx(Swipeable, { ref: swipeableRef, renderRightActions: () => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
                 swipeableRef.current?.close();

package/dist/ThemeOptionList.d.ts

@@ -0,0 +1,28 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import type { ThemeToggleLabels } from "./ThemeToggle.js";
+import type { ThemePreference } from "./useEffectiveColorScheme.js";
+export interface ThemeOptionListIcons {
+    light?: keyof typeof Ionicons.glyphMap;
+    dark?: keyof typeof Ionicons.glyphMap;
+    system?: keyof typeof Ionicons.glyphMap;
+}
+export interface ThemeOptionListStyles {
+    container?: StyleProp<ViewStyle>;
+    row?: StyleProp<ViewStyle>;
+    rowActive?: StyleProp<ViewStyle>;
+    label?: StyleProp<TextStyle>;
+    labelActive?: StyleProp<TextStyle>;
+    iconColor?: string;
+    iconColorActive?: string;
+    checkColor?: string;
+}
+export interface ThemeOptionListProps {
+    value: ThemePreference;
+    onChange: (preference: ThemePreference) => void;
+    labels?: ThemeToggleLabels;
+    icons?: ThemeOptionListIcons;
+    styles?: ThemeOptionListStyles;
+}
+export declare function ThemeOptionList({ value, onChange, labels, icons, styles, }: ThemeOptionListProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeOptionList.d.ts.map

package/dist/ThemeOptionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeOptionList.d.ts","sourceRoot":"","sources":["../src/ThemeOptionList.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,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,WAAW,oBAAoB;IACnC,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,qBAAqB;IACpC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,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,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AA+CD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,GACP,EAAE,oBAAoB,+BAiDtB"}

package/dist/ThemeOptionList.js

@@ -0,0 +1,67 @@
+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 defaultLabels = {
+    light: "Clair",
+    dark: "Sombre",
+    system: "Système",
+};
+const defaultIcons = {
+    light: "sunny-outline",
+    dark: "moon-outline",
+    system: "phone-portrait-outline",
+};
+const defaultStyles = {
+    container: { gap: 8 },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        backgroundColor: "#ffffff",
+    },
+    rowActive: {
+        borderColor: "#2563eb",
+        backgroundColor: "#2563eb1a",
+    },
+    label: {
+        flex: 1,
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#111827",
+    },
+    labelActive: { color: "#2563eb" },
+    iconColor: "#111827",
+    iconColorActive: "#2563eb",
+    checkColor: "#2563eb",
+};
+// Selectable list of rows (icon + label + checkmark) for a light/dark/system
+// theme preference. Same data contract as ThemeToggle, but a taller row-based
+// layout instead of a 3-way segmented control.
+export function ThemeOptionList({ value, onChange, labels, icons, 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],
+        row: [defaultStyles.row, styles?.row],
+        rowActive: [defaultStyles.rowActive, styles?.rowActive],
+        label: [defaultStyles.label, styles?.label],
+        labelActive: [defaultStyles.labelActive, styles?.labelActive],
+    };
+    const t = { ...defaultLabels, ...labels };
+    const i = { ...defaultIcons, ...icons };
+    const iconColor = styles?.iconColor ?? defaultStyles.iconColor;
+    const iconColorActive = styles?.iconColorActive ?? defaultStyles.iconColorActive;
+    const checkColor = styles?.checkColor ?? defaultStyles.checkColor;
+    return (_jsx(View, { style: merged.container, children: 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(Ionicons, { name: i[option], size: 20, color: active ? iconColorActive : iconColor }), _jsx(Text, { style: [merged.label, active && merged.labelActive], children: t[option] }), active && (_jsx(Ionicons, { name: "checkmark-circle", size: 20, color: checkColor }))] }, option));
+        }) }));
+}

package/dist/ThemeToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../src/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AA2BD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BA6BlB"}
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../src/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AA2BD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAyClB"}

package/dist/ThemeToggle.js

@@ -23,7 +23,19 @@ const defaultLabels = {
 };
 // 3-way segmented control for a light/dark/system theme preference.
 export function ThemeToggle({ value, onChange, labels, styles, }) {
-    const merged = { ...defaultStyles, ...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],
+        option: [defaultStyles.option, styles?.option],
+        optionActive: [defaultStyles.optionActive, styles?.optionActive],
+        optionText: [defaultStyles.optionText, styles?.optionText],
+        optionTextActive: [
+            defaultStyles.optionTextActive,
+            styles?.optionTextActive,
+        ],
+    };
     const t = { ...defaultLabels, ...labels };
     return (_jsx(View, { style: merged.container, children: OPTIONS.map((option) => {
             const active = option === value;

package/dist/Thumbnail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../src/Thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,iFAAiF;IACjF,eAAe,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAgBD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,eAAe,EACf,IAAmB,EACnB,MAAM,GACP,EAAE,cAAc,+BAuBhB"}
+{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../src/Thumbnail.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,iFAAiF;IACjF,eAAe,EAAE,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAgBD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,eAAe,EACf,IAAmB,EACnB,MAAM,GACP,EAAE,cAAc,+BA+BhB"}

package/dist/Thumbnail.js

@@ -14,7 +14,15 @@ const defaultStyles = {
 };
 // List-row thumbnail (photo, or a placeholder icon when there is none).
 export function Thumbnail({ photoUri, placeholderIcon, size = DEFAULT_SIZE, styles, }) {
-    const merged = { ...defaultStyles, ...styles };
+    // Style fields are merged as arrays (default, then override) so a partial
+    // override (e.g. just backgroundColor) doesn't drop the default's
+    // borderRadius, or the placeholder's alignItems/justifyContent that center
+    // the icon.
+    const merged = {
+        thumbnail: [defaultStyles.thumbnail, styles?.thumbnail],
+        placeholder: [defaultStyles.placeholder, styles?.placeholder],
+        iconColor: styles?.iconColor ?? defaultStyles.iconColor,
+    };
     const dimensions = { width: size, height: size };
     if (photoUri) {
         return (_jsx(Image, { source: { uri: photoUri }, style: [dimensions, merged.thumbnail], accessibilityIgnoresInvertColors: true }));

package/dist/UpdateAvailableBanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UpdateAvailableBanner.d.ts","sourceRoot":"","sources":["../src/UpdateAvailableBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AAwCD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,MAAM,EACN,MAAM,GACP,EAAE,0BAA0B,+BA4B5B"}
+{"version":3,"file":"UpdateAvailableBanner.d.ts","sourceRoot":"","sources":["../src/UpdateAvailableBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,iBAAiB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,2BAA2B,CAAC;IACrC,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AAwCD,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,EACP,KAAK,EACL,OAAO,EACP,SAAS,EACT,MAAM,EACN,MAAM,GACP,EAAE,0BAA0B,+BA+C5B"}

package/dist/UpdateAvailableBanner.js

@@ -38,7 +38,26 @@ const defaultLabels = {
 // what "action" does (e.g. navigate to an update screen) or on how/whether
 // dismissal is persisted — both are left entirely to the caller.
 export function UpdateAvailableBanner({ version, notes, onPress, onDismiss, labels, styles, }) {
-    const merged = { ...defaultStyles, ...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. `notes` is forwarded as-is to
+    // ChangelogNotes, which does its own equivalent merge against its defaults.
+    const merged = {
+        container: [defaultStyles.container, styles?.container],
+        header: [defaultStyles.header, styles?.header],
+        title: [defaultStyles.title, styles?.title],
+        notes: styles?.notes ?? defaultStyles.notes,
+        actionButton: [defaultStyles.actionButton, styles?.actionButton],
+        actionButtonText: [
+            defaultStyles.actionButtonText,
+            styles?.actionButtonText,
+        ],
+        dismissButton: [defaultStyles.dismissButton, styles?.dismissButton],
+        dismissButtonText: [
+            defaultStyles.dismissButtonText,
+            styles?.dismissButtonText,
+        ],
+    };
     const t = { ...defaultLabels, ...labels };
     return (_jsxs(View, { style: merged.container, children: [_jsxs(View, { style: merged.header, children: [_jsx(Text, { style: merged.title, children: t.title(version) }), _jsx(Pressable, { style: merged.dismissButton, onPress: onDismiss, accessibilityRole: "button", accessibilityLabel: t.dismissAccessibilityLabel, children: _jsx(Text, { style: merged.dismissButtonText, children: t.dismiss }) })] }), notes ? _jsx(ChangelogNotes, { notes: notes, styles: merged.notes }) : null, _jsx(Pressable, { style: merged.actionButton, onPress: onPress, accessibilityRole: "button", accessibilityLabel: t.action, children: _jsx(Text, { style: merged.actionButtonText, children: t.action }) })] }));
 }

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./confirmDestructive.js";
 export * from "./PhotoPicker.js";
 export * from "./PickerModal.js";
 export * from "./SwipeableRow.js";
+export * from "./ThemeOptionList.js";
 export * from "./ThemeToggle.js";
 export * from "./Thumbnail.js";
 export * from "./UpdateAvailableBanner.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC"}

package/dist/index.js

@@ -7,6 +7,7 @@ export * from "./confirmDestructive.js";
 export * from "./PhotoPicker.js";
 export * from "./PickerModal.js";
 export * from "./SwipeableRow.js";
+export * from "./ThemeOptionList.js";
 export * from "./ThemeToggle.js";
 export * from "./Thumbnail.js";
 export * from "./UpdateAvailableBanner.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -8,11 +8,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/Forthtilliath/turborepo.git",
+    "url": "https://github.com/Forthtilliath/forthtilliath-packages.git",
     "directory": "packages/react-native-kit"
   },
-  "homepage": "https://github.com/Forthtilliath/turborepo/tree/main/packages/react-native-kit#readme",
-  "bugs": "https://github.com/Forthtilliath/turborepo/issues",
+  "homepage": "https://github.com/Forthtilliath/forthtilliath-packages/tree/main/packages/react-native-kit#readme",
+  "bugs": "https://github.com/Forthtilliath/forthtilliath-packages/issues",
   "files": [
     "dist"
   ],
@@ -21,7 +21,7 @@
     "./*": "./dist/*.js"
   },
   "dependencies": {
-    "@forthtilliath/expo-release-updates": "0.2.0"
+    "@forthtilliath/expo-release-updates": "0.3.0"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
@@ -33,19 +33,19 @@
   },
   "devDependencies": {
     "@expo/vector-icons": "^15.0.2",
-    "@types/react": "^19.2.17",
+    "@types/react": "catalog:",
     "@types/react-test-renderer": "^19.1.0",
-    "eslint": "10.7.0",
+    "eslint": "catalog:",
     "expo-image-picker": "~57.0.7",
     "expo-speech-recognition": "^56.0.1",
-    "react": "^19.2.7",
+    "react": "catalog:",
     "react-native": "0.86.0",
     "react-native-gesture-handler": "~2.32.0",
     "react-test-renderer": "19.2.3",
-    "typescript": "^5.9.3",
+    "typescript": "catalog:",
     "vitest": "^4.1.10",
-    "@forthtilliath/eslint-config": "0.0.0",
-    "@forthtilliath/typescript-config": "0.0.0"
+    "@forthtilliath/typescript-config": "0.0.0",
+    "@forthtilliath/eslint-config": "0.0.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",