@forthtilliath/react-native-kit 0.18.0 → 0.19.0

package/README.md

@@ -211,6 +211,10 @@ import { PhotoPicker } from "@forthtilliath/react-native-kit/components/picker/P
 />;
 ```
 
+- `renderPreview(photoUri, saving)` replaces the square preview and the "Add a photo" placeholder (e.g. a round avatar with initials and a small camera badge); the press, permission and action sheet stay the same.
+- While `savePhoto` runs, the picker ignores presses (`saving` is `true`, `accessibilityState.busy`).
+- A failure (camera, picker or `savePhoto` rejecting) goes to `onError(error)`; without it, an alert says the photo was not saved (`labels.saveErrorTitle` / `saveErrorMessage`).
+
 ### `<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.
@@ -336,6 +340,26 @@ import { ThemeOptionList } from "@forthtilliath/react-native-kit/components/them
 <ThemeOptionList value={themePreference} onChange={setThemePreference} />;
 ```
 
+### `<BackgroundPicker options value onChange />` + `findBackground(options, id)`
+
+Radio group of background swatches, each drawing the page and a card in the colours on offer (`{ id, label, page, card, cardBorder? }`), the chosen one outlined with a check mark. `onChange` receives the whole option (extra fields kept: the full palette to apply). `findBackground` reads a saved id back, falling back to the first option (the original background) for an unknown id. Check each palette's text contrast in a test with `contrastRatio` from `@forthtilliath/ts-kit/color/contrastRatio`.
+
+```tsx
+import { BackgroundPicker } from "@forthtilliath/react-native-kit/components/theme/BackgroundPicker";
+import { findBackground } from "@forthtilliath/react-native-kit/components/theme/findBackground";
+
+const background = findBackground(DARK_BACKGROUNDS, settings.background);
+
+<BackgroundPicker
+  options={DARK_BACKGROUNDS}
+  value={background.id}
+  onChange={(option) => {
+    selectFeedback();
+    saveBackground(option.id);
+  }}
+/>;
+```
+
 ### `<ThemePreferenceProvider load save>` + `useThemePreference()` / `useResolvedScheme()`
 
 Holds the light/dark/system preference in a context: loaded once on mount through `load`, changed from anywhere with `useThemePreference().setPreference`, persisted through `save`. Storage-agnostic. A choice made before `load` resolves isn't overwritten by the stored value. `useResolvedScheme()` returns the scheme actually applied (`"light" | "dark"`), to pick the palette.
@@ -358,20 +382,20 @@ const colors = Colors[useResolvedScheme()];
 
 Every component below has neutral default colors and a `styles` prop whose slots are each merged **after** their default (a partial override keeps the rest of the slot) — pass the app's palette there.
 
-| Component                                                               | Import path                         | What it is                                                                                                                                                                                                                                                                                                          |
-| ----------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<BottomSheet visible onClose bottomInset?>`                            | `components/overlay/BottomSheet`    | Modal sliding up from the bottom, content scrollable past 85 % of the screen. Pass `useSafeAreaInsets().bottom` as `bottomInset` with Android edge-to-edge.                                                                                                                                                         |
-| `<OptionsModal visible onClose options onSelect>`                       | `components/picker/OptionsModal`    | Centered popup listing `{ value, label }` options; a tap selects and closes.                                                                                                                                                                                                                                        |
-| `<SelectField label valueLabel options onSelect>`                       | `components/picker/SelectField`     | Native-looking "select": captioned button + `OptionsModal` (styled through `styles.optionsModal`).                                                                                                                                                                                                                  |
-| `<SegmentedToggle options value onChange label?>`                       | `components/picker/SegmentedToggle` | Row of equal-width buttons, one active (Calendar / List…), announced as a radio group; each option may carry a smaller `hint` line under its label.                                                                                                                                                                 |
-| `<QuantityStepper value onChange label min? max?>`                      | `components/picker/QuantityStepper` | Whole-number counter `min…max` (`0…999`, negatives allowed with a negative `min`): −/+ buttons (disabled at the bounds, `longPressStep` to jump on long press, or `repeatOnHold` to repeat faster and faster while held) and a numeric field; screen-reader labels in French or English (`a11yLabels` to override). |
-| `<SwitchRow label description? value onChange>`                         | `components/settings/SwitchRow`     | Settings line "label + description + switch", the whole row pressable and read as one switch; `colors` for the track and thumb.                                                                                                                                                                                     |
-| `<SettingsCard title icon?>` + `SettingsCardStatus`, `SettingsCardHint` | `components/settings/SettingsCard`  | Settings card: icon + title header, then free content — status lines (small icon + text, `iconColor` per state) and a quieter hint.                                                                                                                                                                                 |
-| `<CheckboxGroup options values onChange label?>`                        | `components/picker/CheckboxGroup`   | Wrapping chips that each check and uncheck independently (extensions, tags…), each announced as a checkbox.                                                                                                                                                                                                         |
-| `<MonthDayGrid days selected onToggle>`                                 | `components/picker/MonthDayGrid`    | Monday-first month grid whose days toggle on and off (holidays, days off…); `YYYY-MM-DD` days.                                                                                                                                                                                                                      |
-| `<AddButton label onPress>`                                             | `components/list/AddButton`         | Dashed "+ Add …" button closing a list.                                                                                                                                                                                                                                                                             |
-| `<DragHandle onPressIn accessibilityLabel>`                             | `components/list/DragHandle`        | "⠿" grip for `react-native-draggable-flatlist` rows (gesture-handler's `Pressable`).                                                                                                                                                                                                                                |
-| `<ErrorFallback error retry>`                                           | `components/feedback/ErrorFallback` | Readable crash screen with a retry button, for Expo Router's `ErrorBoundary`; texts in French or English (`labels` to override).                                                                                                                                                                                    |
+| Component                                                               | Import path                         | What it is                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ----------------------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<BottomSheet visible onClose bottomInset?>`                            | `components/overlay/BottomSheet`    | Modal sliding up from the bottom, content scrollable past 85 % of the screen. Pass `useSafeAreaInsets().bottom` as `bottomInset` with Android edge-to-edge.                                                                                                                                                                                                                                                                                                         |
+| `<OptionsModal visible onClose options onSelect>`                       | `components/picker/OptionsModal`    | Centered popup listing `{ value, label }` options; a tap selects and closes.                                                                                                                                                                                                                                                                                                                                                                                        |
+| `<SelectField label valueLabel options onSelect>`                       | `components/picker/SelectField`     | Native-looking "select": captioned button + `OptionsModal` (styled through `styles.optionsModal`).                                                                                                                                                                                                                                                                                                                                                                  |
+| `<SegmentedToggle options value onChange label?>`                       | `components/picker/SegmentedToggle` | Row of equal-width buttons, one active (Calendar / List…), announced as a radio group; each option may carry a smaller `hint` line under its label.                                                                                                                                                                                                                                                                                                                 |
+| `<QuantityStepper value onChange label min? max?>`                      | `components/picker/QuantityStepper` | Whole-number counter `min…max` (`0…999`, negatives allowed with a negative `min`, `-Infinity`/`Infinity` for no bound): −/+ buttons moving by `step` (1; disabled at the bounds, `longPressStep` to jump on long press, or `repeatOnHold` to repeat faster and faster while held) and a numeric field; `onStep(value)` fires on each −/+ change (e.g. `onStep={tapFeedback}`), not on typing; screen-reader labels in French or English (`a11yLabels` to override). |
+| `<SwitchRow label description? value onChange>`                         | `components/settings/SwitchRow`     | Settings line "label + description + switch", the whole row pressable and read as one switch; `colors` for the track and thumb.                                                                                                                                                                                                                                                                                                                                     |
+| `<SettingsCard title icon?>` + `SettingsCardStatus`, `SettingsCardHint` | `components/settings/SettingsCard`  | Settings card: icon + title header, then free content — status lines (small icon + text, `iconColor` per state) and a quieter hint.                                                                                                                                                                                                                                                                                                                                 |
+| `<CheckboxGroup options values onChange label?>`                        | `components/picker/CheckboxGroup`   | Wrapping chips that each check and uncheck independently (extensions, tags…), each announced as a checkbox.                                                                                                                                                                                                                                                                                                                                                         |
+| `<MonthDayGrid days selected onToggle>`                                 | `components/picker/MonthDayGrid`    | Monday-first month grid whose days toggle on and off (holidays, days off…); `YYYY-MM-DD` days.                                                                                                                                                                                                                                                                                                                                                                      |
+| `<AddButton label onPress>`                                             | `components/list/AddButton`         | Dashed "+ Add …" button closing a list.                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `<DragHandle onPressIn accessibilityLabel>`                             | `components/list/DragHandle`        | "⠿" grip for `react-native-draggable-flatlist` rows (gesture-handler's `Pressable`).                                                                                                                                                                                                                                                                                                                                                                                |
+| `<ErrorFallback error retry>`                                           | `components/feedback/ErrorFallback` | Readable crash screen with a retry button, for Expo Router's `ErrorBoundary`; texts in French or English (`labels` to override).                                                                                                                                                                                                                                                                                                                                    |
 
 `SwipeableRow` also takes `fullSwipeToDelete`: swiping past half the row deletes right away (the row slides out over a full-width delete band) instead of revealing a button — pair it with an `UndoToast`.
 
@@ -516,7 +540,7 @@ import { ThemeSettingsScreen } from "@forthtilliath/react-native-kit/components/
 
 #### `<UpdateSettingsScreen currentVersion checkForUpdate compareVersions downloadAndInstallApk />`
 
-The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Renders release notes via `@forthtilliath/expo-release-updates-ui`'s `ChangelogNotes`, and pairs naturally with that package's `useUpdateCheck`/`UpdateAvailableBanner` (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape. `@forthtilliath/expo-release-updates-ui` is an optional peer dependency: install it to use this screen.
+The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Renders release notes via `@forthtilliath/expo-release-updates-ui`'s `ChangelogNotes`, and pairs naturally with that package's `useUpdateCheck`/`UpdateAvailableBanner` (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape. `@forthtilliath/expo-release-updates-ui` is an optional peer dependency: install it to use this screen. `downloadAndInstallApk(apkUrl, onProgress, apkSha256)` receives the release's `apkSha256` (from `fetchLatestRelease`): pass it on as `expectedSha256`.
 
 ```tsx
 import { UpdateSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/UpdateSettingsScreen";

package/dist/components/picker/PhotoPicker.d.ts

@@ -1,38 +1,25 @@
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type ReactNode } from "react";
 import { type KitLocale } from "../../i18n/locale.js";
-export interface PhotoPickerStyles {
-    photoPicker?: StyleProp<ViewStyle>;
-    photoPreview?: StyleProp<ImageStyle>;
-    photoPlaceholder?: StyleProp<ViewStyle>;
-    photoPlaceholderText?: StyleProp<TextStyle>;
-    clearLink?: StyleProp<TextStyle>;
-    iconColor?: string;
-}
-export interface PhotoPickerLabels {
-    photoTitle?: (photoLabel: string) => string;
-    editAccessibilityLabel?: (photoLabel: string) => string;
-    addAccessibilityLabel?: (photoLabel: string) => string;
-    addPlaceholderText?: string;
-    cameraPermissionTitle?: string;
-    cameraPermissionMessage?: string;
-    /**
-     * @deprecated Unused: choosing from the library needs no permission (the
-     * system photo picker), so no "access denied" alert is ever shown.
-     */
-    libraryPermissionTitle?: string;
-    /** @deprecated Unused — see `libraryPermissionTitle`. */
-    libraryPermissionMessage?: string;
-    takePhoto?: string;
-    chooseFromLibrary?: string;
-    cancel?: string;
-    removePhoto?: string;
-}
+import { type PhotoPickerLabels, type PhotoPickerStyles } from "./PhotoPicker.styles.js";
+export type { PhotoPickerLabels, PhotoPickerStyles, } from "./PhotoPicker.styles.js";
 export interface PhotoPickerProps {
     photoUri: string | null;
     onChange: (uri: string | null) => void;
     savePhoto: (sourceUri: string) => Promise<string>;
     /** Used as-is in titles/accessibility labels, e.g. "of the container". */
     photoLabel: string;
+    /**
+     * Replaces the square preview and the "Add a photo" placeholder, e.g. a
+     * round avatar with a small camera badge. `saving` is `true` while
+     * `savePhoto` runs (the picker ignores presses meanwhile).
+     */
+    renderPreview?: (photoUri: string | null, saving: boolean) => ReactNode;
+    /**
+     * Called when taking, picking or saving the photo fails (`savePhoto`
+     * rejected…). Unset, an alert says the photo was not saved
+     * (`labels.saveErrorTitle` / `saveErrorMessage`).
+     */
+    onError?: (error: unknown) => void;
     labels?: PhotoPickerLabels;
     /**
      * Language of the built-in labels — French by default, or the nearest
@@ -41,5 +28,5 @@ export interface PhotoPickerProps {
     locale?: KitLocale;
     styles?: PhotoPickerStyles;
 }
-export declare function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, locale, styles, }: PhotoPickerProps): import("react").JSX.Element;
+export declare function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, renderPreview, onError, labels, locale, styles, }: PhotoPickerProps): import("react").JSX.Element;
 //# sourceMappingURL=PhotoPicker.d.ts.map

package/dist/components/picker/PhotoPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,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;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yDAAyD;IACzD,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;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAyED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAqGlB"}
+{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,OAAO,EAGL,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AAEjC,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;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,OAAO,KAAK,SAAS,CAAC;IACxE;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAUD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,aAAa,EACb,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAmHlB"}

package/dist/components/picker/PhotoPicker.js

@@ -1,121 +1,88 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from "react";
 import { Alert, Image, Pressable, Text, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { useKitLocale } from "../../i18n/locale.js";
 import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
-const defaultStyles = {
-    photoPicker: { alignSelf: "center", marginTop: 8 },
-    photoPreview: {
-        width: 140,
-        height: 140,
-        borderRadius: 16,
-        backgroundColor: "#f9fafb",
-    },
-    photoPlaceholder: {
-        width: 140,
-        height: 140,
-        borderRadius: 16,
-        borderWidth: 1,
-        borderStyle: "dashed",
-        borderColor: "#e5e7eb",
-        backgroundColor: "#f9fafb",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 6,
-    },
-    photoPlaceholderText: { fontSize: 12, color: "#6b7280" },
-    clearLink: {
-        color: "#2563eb",
-        fontSize: 13,
-        textAlign: "center",
-        marginTop: 8,
-    },
-    iconColor: "#6b7280",
-};
-const defaultLabels = {
-    fr: {
-        photoTitle: (photoLabel) => `Photo ${photoLabel}`,
-        editAccessibilityLabel: (photoLabel) => `Photo ${photoLabel}. Modifier.`,
-        addAccessibilityLabel: (photoLabel) => `Ajouter une photo ${photoLabel}`,
-        addPlaceholderText: "Ajouter une photo",
-        cameraPermissionTitle: "Accès à l'appareil photo refusé",
-        cameraPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour prendre une photo.",
-        takePhoto: "Prendre une photo",
-        chooseFromLibrary: "Choisir dans la galerie",
-        cancel: "Annuler",
-        removePhoto: "Retirer la photo",
-    },
-    en: {
-        photoTitle: (photoLabel) => `Photo ${photoLabel}`,
-        editAccessibilityLabel: (photoLabel) => `Photo ${photoLabel}. Edit.`,
-        addAccessibilityLabel: (photoLabel) => `Add a photo ${photoLabel}`,
-        addPlaceholderText: "Add a photo",
-        cameraPermissionTitle: "Camera access denied",
-        cameraPermissionMessage: "Allow access in the phone's settings to take a photo.",
-        takePhoto: "Take a photo",
-        chooseFromLibrary: "Choose from library",
-        cancel: "Cancel",
-        removePhoto: "Remove photo",
-    },
+import { defaultLabels, defaultStyles, } from "./PhotoPicker.styles.js";
+const PICKER_OPTIONS = {
+    mediaTypes: "images",
+    quality: 0.5,
+    allowsEditing: true,
+    aspect: [1, 1],
 };
 // Photo picker (camera or library) with a preview.
-export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, locale, styles, }) {
+export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, renderPreview, onError, labels, locale, styles, }) {
     const mergedStyles = {
         ...mergeSlotStyles(defaultStyles, styles),
         iconColor: styles?.iconColor ?? defaultStyles.iconColor,
     };
     const t = { ...defaultLabels[useKitLocale(locale)], ...labels };
-    async function pickFromCamera() {
+    const [saving, setSaving] = useState(false);
+    // Ahead of `saving`, which only changes on the next render: a second press
+    // in the same frame must not start a second save.
+    const busyRef = useRef(false);
+    async function pick(launch) {
+        if (busyRef.current)
+            return;
+        busyRef.current = true;
+        try {
+            const result = await launch();
+            const asset = result && !result.canceled ? result.assets[0] : undefined;
+            if (!asset)
+                return;
+            setSaving(true);
+            onChange(await savePhoto(asset.uri));
+        }
+        catch (error) {
+            if (onError)
+                onError(error);
+            else
+                Alert.alert(t.saveErrorTitle, t.saveErrorMessage);
+        }
+        finally {
+            busyRef.current = false;
+            setSaving(false);
+        }
+    }
+    async function launchCamera() {
         const permission = await ImagePicker.requestCameraPermissionsAsync();
         if (!permission.granted) {
             Alert.alert(t.cameraPermissionTitle, t.cameraPermissionMessage);
-            return;
-        }
-        const result = await ImagePicker.launchCameraAsync({
-            mediaTypes: "images",
-            quality: 0.5,
-            allowsEditing: true,
-            aspect: [1, 1],
-        });
-        if (!result.canceled && result.assets[0]) {
-            onChange(await savePhoto(result.assets[0].uri));
+            return null;
         }
+        return ImagePicker.launchCameraAsync(PICKER_OPTIONS);
     }
     // No permission request: the library is opened through the system photo
     // picker, which needs none — so apps don't have to keep the storage
     // permissions just for this.
-    async function pickFromLibrary() {
-        const result = await ImagePicker.launchImageLibraryAsync({
-            mediaTypes: "images",
-            quality: 0.5,
-            allowsEditing: true,
-            aspect: [1, 1],
-        });
-        if (!result.canceled && result.assets[0]) {
-            onChange(await savePhoto(result.assets[0].uri));
-        }
+    function launchLibrary() {
+        return ImagePicker.launchImageLibraryAsync(PICKER_OPTIONS);
     }
     function handlePickPhoto() {
+        if (busyRef.current)
+            return;
         Alert.alert(t.photoTitle(photoLabel), undefined, [
             {
                 text: t.takePhoto,
                 onPress: () => {
-                    void pickFromCamera();
+                    void pick(launchCamera);
                 },
             },
             {
                 text: t.chooseFromLibrary,
                 onPress: () => {
-                    void pickFromLibrary();
+                    void pick(launchLibrary);
                 },
             },
             { text: t.cancel, style: "cancel" },
         ]);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { style: mergedStyles.photoPicker, onPress: handlePickPhoto, accessibilityRole: "button", accessibilityLabel: photoUri
+    const defaultPreview = photoUri ? (_jsx(Image, { source: { uri: photoUri }, style: mergedStyles.photoPreview, accessibilityIgnoresInvertColors: true })) : (_jsxs(View, { style: mergedStyles.photoPlaceholder, children: [_jsx(Ionicons, { name: "camera-outline", size: 28, color: mergedStyles.iconColor }), _jsx(Text, { style: mergedStyles.photoPlaceholderText, children: t.addPlaceholderText })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { style: mergedStyles.photoPicker, onPress: handlePickPhoto, disabled: saving, accessibilityRole: "button", accessibilityState: { busy: saving, disabled: saving }, accessibilityLabel: photoUri
                     ? t.editAccessibilityLabel(photoLabel)
-                    : t.addAccessibilityLabel(photoLabel), children: photoUri ? (_jsx(Image, { source: { uri: photoUri }, style: mergedStyles.photoPreview, accessibilityIgnoresInvertColors: true })) : (_jsxs(View, { style: mergedStyles.photoPlaceholder, children: [_jsx(Ionicons, { name: "camera-outline", size: 28, color: mergedStyles.iconColor }), _jsx(Text, { style: mergedStyles.photoPlaceholderText, children: t.addPlaceholderText })] })) }), photoUri ? (_jsx(Pressable, { onPress: () => {
+                    : t.addAccessibilityLabel(photoLabel), children: renderPreview ? renderPreview(photoUri, saving) : defaultPreview }), photoUri ? (_jsx(Pressable, { onPress: () => {
                     onChange(null);
-                }, accessibilityRole: "button", accessibilityLabel: t.removePhoto, children: _jsx(Text, { style: mergedStyles.clearLink, children: t.removePhoto }) })) : null] }));
+                }, disabled: saving, accessibilityRole: "button", accessibilityLabel: t.removePhoto, children: _jsx(Text, { style: mergedStyles.clearLink, children: t.removePhoto }) })) : null] }));
 }

package/dist/components/picker/PhotoPicker.styles.d.ts

@@ -0,0 +1,63 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface PhotoPickerStyles {
+    photoPicker?: StyleProp<ViewStyle>;
+    photoPreview?: StyleProp<ImageStyle>;
+    photoPlaceholder?: StyleProp<ViewStyle>;
+    photoPlaceholderText?: StyleProp<TextStyle>;
+    clearLink?: StyleProp<TextStyle>;
+    iconColor?: string;
+}
+export interface PhotoPickerLabels {
+    photoTitle?: (photoLabel: string) => string;
+    editAccessibilityLabel?: (photoLabel: string) => string;
+    addAccessibilityLabel?: (photoLabel: string) => string;
+    addPlaceholderText?: string;
+    cameraPermissionTitle?: string;
+    cameraPermissionMessage?: string;
+    /**
+     * @deprecated Unused: choosing from the library needs no permission (the
+     * system photo picker), so no "access denied" alert is ever shown.
+     */
+    libraryPermissionTitle?: string;
+    /** @deprecated Unused — see `libraryPermissionTitle`. */
+    libraryPermissionMessage?: string;
+    takePhoto?: string;
+    chooseFromLibrary?: string;
+    cancel?: string;
+    removePhoto?: string;
+    /** Alert shown when the photo could not be taken or saved (no `onError`). */
+    saveErrorTitle?: string;
+    saveErrorMessage?: string;
+}
+export declare const defaultStyles: Required<PhotoPickerStyles>;
+export declare const defaultLabels: {
+    fr: {
+        photoTitle: (photoLabel: string) => string;
+        editAccessibilityLabel: (photoLabel: string) => string;
+        addAccessibilityLabel: (photoLabel: string) => string;
+        addPlaceholderText: string;
+        cameraPermissionTitle: string;
+        cameraPermissionMessage: string;
+        takePhoto: string;
+        chooseFromLibrary: string;
+        cancel: string;
+        removePhoto: string;
+        saveErrorTitle: string;
+        saveErrorMessage: string;
+    };
+    en: {
+        photoTitle: (photoLabel: string) => string;
+        editAccessibilityLabel: (photoLabel: string) => string;
+        addAccessibilityLabel: (photoLabel: string) => string;
+        addPlaceholderText: string;
+        cameraPermissionTitle: string;
+        cameraPermissionMessage: string;
+        takePhoto: string;
+        chooseFromLibrary: string;
+        cancel: string;
+        removePhoto: string;
+        saveErrorTitle: string;
+        saveErrorMessage: string;
+    };
+};
+//# sourceMappingURL=PhotoPicker.styles.d.ts.map

package/dist/components/picker/PhotoPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PhotoPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhF,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;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yDAAyD;IACzD,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;IACrB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CA4BrD,CAAC;AAEF,eAAO,MAAM,aAAa;;iCAEG,MAAM;6CACM,MAAM;4CAEP,MAAM;;;;;;;;;;;;iCAcjB,MAAM;6CACM,MAAM;4CAEP,MAAM;;;;;;;;;;;CAoB7C,CAAC"}

package/dist/components/picker/PhotoPicker.styles.js

@@ -0,0 +1,59 @@
+export const defaultStyles = {
+    photoPicker: { alignSelf: "center", marginTop: 8 },
+    photoPreview: {
+        width: 140,
+        height: 140,
+        borderRadius: 16,
+        backgroundColor: "#f9fafb",
+    },
+    photoPlaceholder: {
+        width: 140,
+        height: 140,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "#e5e7eb",
+        backgroundColor: "#f9fafb",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 6,
+    },
+    photoPlaceholderText: { fontSize: 12, color: "#6b7280" },
+    clearLink: {
+        color: "#2563eb",
+        fontSize: 13,
+        textAlign: "center",
+        marginTop: 8,
+    },
+    iconColor: "#6b7280",
+};
+export const defaultLabels = {
+    fr: {
+        photoTitle: (photoLabel) => `Photo ${photoLabel}`,
+        editAccessibilityLabel: (photoLabel) => `Photo ${photoLabel}. Modifier.`,
+        addAccessibilityLabel: (photoLabel) => `Ajouter une photo ${photoLabel}`,
+        addPlaceholderText: "Ajouter une photo",
+        cameraPermissionTitle: "Accès à l'appareil photo refusé",
+        cameraPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour prendre une photo.",
+        takePhoto: "Prendre une photo",
+        chooseFromLibrary: "Choisir dans la galerie",
+        cancel: "Annuler",
+        removePhoto: "Retirer la photo",
+        saveErrorTitle: "Photo non enregistrée",
+        saveErrorMessage: "La photo n'a pas pu être enregistrée. Réessaie.",
+    },
+    en: {
+        photoTitle: (photoLabel) => `Photo ${photoLabel}`,
+        editAccessibilityLabel: (photoLabel) => `Photo ${photoLabel}. Edit.`,
+        addAccessibilityLabel: (photoLabel) => `Add a photo ${photoLabel}`,
+        addPlaceholderText: "Add a photo",
+        cameraPermissionTitle: "Camera access denied",
+        cameraPermissionMessage: "Allow access in the phone's settings to take a photo.",
+        takePhoto: "Take a photo",
+        chooseFromLibrary: "Choose from library",
+        cancel: "Cancel",
+        removePhoto: "Remove photo",
+        saveErrorTitle: "Photo not saved",
+        saveErrorMessage: "The photo could not be saved. Try again.",
+    },
+};

package/dist/components/picker/QuantityStepper.d.ts

@@ -1,24 +1,6 @@
-import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { type KitLocale } from "../../i18n/locale.js";
-/** Per-slot style overrides for {@link QuantityStepper}, each merged after its default. */
-export interface QuantityStepperStyles {
-    /** The row: − button, field, + button. */
-    row?: StyleProp<ViewStyle>;
-    /** Both round buttons. */
-    button?: StyleProp<ViewStyle>;
-    /** Added on top of `button` for "−" at `min` and "+" at `max`. */
-    buttonDisabled?: StyleProp<ViewStyle>;
-    /** The "−" / "+" glyphs. */
-    buttonText?: StyleProp<TextStyle>;
-    /** The numeric field in the middle (its text color included). */
-    input?: StyleProp<TextStyle>;
-}
-/** Screen-reader labels of the three controls, built from the stepper's `label`. */
-export interface QuantityStepperA11yLabels {
-    decrease: (label: string) => string;
-    increase: (label: string) => string;
-    input: (label: string) => string;
-}
+import { type QuantityStepperA11yLabels, type QuantityStepperStyles } from "./QuantityStepper.styles.js";
+export type { QuantityStepperA11yLabels, QuantityStepperStyles, } from "./QuantityStepper.styles.js";
 export interface QuantityStepperProps {
     value: number;
     /** Receives the new value, already clamped to `min…max`. */
@@ -27,12 +9,24 @@ export interface QuantityStepperProps {
     label: string;
     /**
      * Below 0, negative values are allowed: the field then accepts a leading
-     * "-" (and opens the keyboard that has one).
+     * "-" (and opens the keyboard that has one). `-Infinity`: no lower bound.
      * @defaultValue 0
      */
     min?: number;
-    /** @defaultValue 999 */
+    /** `Infinity`: no upper bound. @defaultValue 999 */
     max?: number;
+    /**
+     * How much −/+ (and each repeat while held) move the value, e.g. `4` for a
+     * category worth 4 points a unit. Typing in the field is not snapped to it.
+     * @defaultValue 1
+     */
+    step?: number;
+    /**
+     * Called with the new value each time −/+ change it (tap, long press, each
+     * repeat while held) — not on typing. The place for a haptic tick:
+     * `onStep={tapFeedback}` (from `utils/helpers/haptics`).
+     */
+    onStep?: (value: number) => void;
     /**
      * Step applied by a long press on −/+, to reach large values quickly.
      * Unset, a long press does nothing more than a tap. Ignored with
@@ -56,13 +50,14 @@ export interface QuantityStepperProps {
     styles?: QuantityStepperStyles;
 }
 /**
- * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust
- * (optionally faster on long press, or repeating while held), and a numeric
- * field in the middle to type a large number in one go (other characters are
- * dropped, the result is clamped). A typed value that is not a number yet or
- * below `min` (an empty field, a lone "-", the "2" of "25" with `min={10}`)
- * stays as typed until the field loses focus. A negative `min` allows
- * negative values (penalties, defeat tokens…).
+ * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust by
+ * `step` (optionally faster on long press, or repeating while held), and a
+ * numeric field in the middle to type a large number in one go (other
+ * characters are dropped, the result is clamped). A typed value that is not a
+ * number yet or below `min` (an empty field, a lone "-", the "2" of "25" with
+ * `min={10}`) stays as typed until the field loses focus. A negative `min`
+ * allows negative values (penalties, defeat tokens…); `-Infinity`/`Infinity`
+ * remove a bound.
  *
  * @example
  * ```tsx
@@ -70,8 +65,8 @@ export interface QuantityStepperProps {
  *
  * <QuantityStepper value={count} onChange={setCount} label="Croissants" />
  * <QuantityStepper value={bans} onChange={setBans} label="Bannissements" min={1} max={40} longPressStep={5} />
- * <QuantityStepper value={score} onChange={setScore} label="Points" min={-999} repeatOnHold />
+ * <QuantityStepper value={score} onChange={setScore} label="Points" min={-Infinity} max={Infinity} step={4} repeatOnHold onStep={tapFeedback} />
  * ```
  */
-export declare function QuantityStepper({ value, onChange, label, min, max, longPressStep, repeatOnHold, locale, a11yLabels, styles, }: QuantityStepperProps): import("react").JSX.Element;
+export declare function QuantityStepper({ value, onChange, label, min, max, step, onStep, longPressStep, repeatOnHold, locale, a11yLabels, styles, }: QuantityStepperProps): import("react").JSX.Element;
 //# sourceMappingURL=QuantityStepper.d.ts.map

package/dist/components/picker/QuantityStepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuantityStepper.d.ts","sourceRoot":"","sources":["../../../src/components/picker/QuantityStepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,2FAA2F;AAC3F,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,kEAAkE;IAClE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,oFAAoF;AACpF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAChD,oEAAoE;IACpE,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AA0DD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,aAAa,EACb,YAAoB,EACpB,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE,oBAAoB,+BAqItB"}
+{"version":3,"file":"QuantityStepper.d.ts","sourceRoot":"","sources":["../../../src/components/picker/QuantityStepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,OAAO,EAGL,KAAK,yBAAyB,EAC9B,KAAK,qBAAqB,EAC3B,MAAM,6BAA6B,CAAC;AAErC,YAAY,EACV,yBAAyB,EACzB,qBAAqB,GACtB,MAAM,6BAA6B,CAAC;AAErC,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAChD,oEAAoE;IACpE,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAgBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,IAAQ,EACR,MAAM,EACN,aAAa,EACb,YAAoB,EACpB,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE,oBAAoB,+BA4ItB"}

package/dist/components/picker/QuantityStepper.js

@@ -4,52 +4,7 @@ import { Pressable, Text, TextInput, View } from "react-native";
 import { usePressRepeat } from "../../hooks/usePressRepeat.js";
 import { useKitLocale } from "../../i18n/locale.js";
 import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
-const defaultA11yLabels = {
-    fr: {
-        decrease: (label) => `Retirer : ${label}`,
-        increase: (label) => `Ajouter : ${label}`,
-        input: (label) => `Quantité : ${label}`,
-    },
-    en: {
-        decrease: (label) => `Decrease: ${label}`,
-        increase: (label) => `Increase: ${label}`,
-        input: (label) => `Quantity: ${label}`,
-    },
-};
-const defaultStyles = {
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 6,
-    },
-    button: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        backgroundColor: "#2563eb",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    buttonDisabled: { opacity: 0.35 },
-    buttonText: {
-        color: "#ffffff",
-        fontSize: 22,
-        fontWeight: "700",
-        lineHeight: 26,
-    },
-    input: {
-        width: 52,
-        height: 40,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: "#d4d4d4",
-        color: "#111111",
-        fontSize: 18,
-        fontWeight: "700",
-        textAlign: "center",
-        padding: 0,
-    },
-};
+import { defaultA11yLabels, defaultStyles, } from "./QuantityStepper.styles.js";
 /** Keeps the digits, and a leading "-" when negatives are allowed. */
 function sanitize(text, allowsNegative) {
     const digits = text.replace(/\D/g, "");
@@ -57,14 +12,21 @@ function sanitize(text, allowsNegative) {
         ? `-${digits}`
         : digits;
 }
+/** Characters a bound takes in the field; 15 digits (+ "-") if unbounded. */
+function lengthOf(bound) {
+    if (Number.isFinite(bound))
+        return String(bound).length;
+    return bound < 0 ? 16 : 15;
+}
 /**
- * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust
- * (optionally faster on long press, or repeating while held), and a numeric
- * field in the middle to type a large number in one go (other characters are
- * dropped, the result is clamped). A typed value that is not a number yet or
- * below `min` (an empty field, a lone "-", the "2" of "25" with `min={10}`)
- * stays as typed until the field loses focus. A negative `min` allows
- * negative values (penalties, defeat tokens…).
+ * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust by
+ * `step` (optionally faster on long press, or repeating while held), and a
+ * numeric field in the middle to type a large number in one go (other
+ * characters are dropped, the result is clamped). A typed value that is not a
+ * number yet or below `min` (an empty field, a lone "-", the "2" of "25" with
+ * `min={10}`) stays as typed until the field loses focus. A negative `min`
+ * allows negative values (penalties, defeat tokens…); `-Infinity`/`Infinity`
+ * remove a bound.
  *
  * @example
  * ```tsx
@@ -72,10 +34,10 @@ function sanitize(text, allowsNegative) {
  *
  * <QuantityStepper value={count} onChange={setCount} label="Croissants" />
  * <QuantityStepper value={bans} onChange={setBans} label="Bannissements" min={1} max={40} longPressStep={5} />
- * <QuantityStepper value={score} onChange={setScore} label="Points" min={-999} repeatOnHold />
+ * <QuantityStepper value={score} onChange={setScore} label="Points" min={-Infinity} max={Infinity} step={4} repeatOnHold onStep={tapFeedback} />
  * ```
  */
-export function QuantityStepper({ value, onChange, label, min = 0, max = 999, longPressStep, repeatOnHold = false, locale, a11yLabels, styles, }) {
+export function QuantityStepper({ value, onChange, label, min = 0, max = 999, step = 1, onStep, longPressStep, repeatOnHold = false, locale, a11yLabels, styles, }) {
     const labels = { ...defaultA11yLabels[useKitLocale(locale)], ...a11yLabels };
     const merged = mergeSlotStyles(defaultStyles, styles);
     const atMin = value <= min;
@@ -96,32 +58,40 @@ export function QuantityStepper({ value, onChange, label, min = 0, max = 999, lo
         setDraft(null);
         onChange(clamp(next));
     }
+    /** A −/+ press: moves by `delta`; `false` when a bound stopped it. */
     function stepBy(delta) {
         const next = clamp(valueRef.current + delta);
-        // A button disabled at its bound may never report the release.
-        if (next === valueRef.current) {
-            repeat.stop();
-            return;
-        }
+        if (next === valueRef.current)
+            return false;
         valueRef.current = next;
         set(next);
+        onStep?.(next);
+        return true;
     }
-    function startRepeat(delta) {
+    function startRepeat(direction) {
         repeat.start(() => {
-            stepBy(delta);
+            // A button disabled at its bound may never report the release.
+            if (!stepBy(direction * step))
+                repeat.stop();
         });
     }
     // Held: repeat from press-in to press-out. Otherwise: one step per tap,
     // and `longPressStep` on long press.
     const tapsOnly = !repeatOnHold;
     const jumps = tapsOnly && longPressStep !== undefined;
+    // A tap starts from the rendered value, even if the parent ignored the
+    // previous onChange.
+    function tap(delta) {
+        valueRef.current = value;
+        stepBy(delta);
+    }
     return (_jsxs(View, { style: merged.row, children: [_jsx(Pressable, { style: [merged.button, atMin && merged.buttonDisabled], onPress: tapsOnly
                     ? () => {
-                        set(value - 1);
+                        tap(-step);
                     }
                     : undefined, onLongPress: jumps
                     ? () => {
-                        set(value - longPressStep);
+                        tap(-longPressStep);
                     }
                     : undefined, onPressIn: repeatOnHold
                     ? () => {
@@ -142,13 +112,13 @@ export function QuantityStepper({ value, onChange, label, min = 0, max = 999, lo
                     set(draft === "" || draft === "-" ? 0 : Number(draft));
                 }, 
                 // "number-pad" has no "-" key on Android.
-                keyboardType: allowsNegative ? "numeric" : "number-pad", selectTextOnFocus: true, maxLength: Math.max(String(min).length, String(max).length), accessibilityLabel: labels.input(label) }), _jsx(Pressable, { style: [merged.button, atMax && merged.buttonDisabled], onPress: tapsOnly
+                keyboardType: allowsNegative ? "numeric" : "number-pad", selectTextOnFocus: true, maxLength: Math.max(lengthOf(min), lengthOf(max)), accessibilityLabel: labels.input(label) }), _jsx(Pressable, { style: [merged.button, atMax && merged.buttonDisabled], onPress: tapsOnly
                     ? () => {
-                        set(value + 1);
+                        tap(step);
                     }
                     : undefined, onLongPress: jumps
                     ? () => {
-                        set(value + longPressStep);
+                        tap(longPressStep);
                     }
                     : undefined, onPressIn: repeatOnHold
                     ? () => {

package/dist/components/picker/QuantityStepper.styles.d.ts

@@ -0,0 +1,59 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { KitLocale } from "../../i18n/locale.js";
+/** Per-slot style overrides for {@link QuantityStepper}, each merged after its default. */
+export interface QuantityStepperStyles {
+    /** The row: − button, field, + button. */
+    row?: StyleProp<ViewStyle>;
+    /** Both round buttons. */
+    button?: StyleProp<ViewStyle>;
+    /** Added on top of `button` for "−" at `min` and "+" at `max`. */
+    buttonDisabled?: StyleProp<ViewStyle>;
+    /** The "−" / "+" glyphs. */
+    buttonText?: StyleProp<TextStyle>;
+    /** The numeric field in the middle (its text color included). */
+    input?: StyleProp<TextStyle>;
+}
+/** Screen-reader labels of the three controls, built from the stepper's `label`. */
+export interface QuantityStepperA11yLabels {
+    decrease: (label: string) => string;
+    increase: (label: string) => string;
+    input: (label: string) => string;
+}
+export declare const defaultA11yLabels: Record<KitLocale, QuantityStepperA11yLabels>;
+export declare const defaultStyles: {
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    button: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        backgroundColor: string;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    buttonDisabled: {
+        opacity: number;
+    };
+    buttonText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "700";
+        lineHeight: number;
+    };
+    input: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        color: string;
+        fontSize: number;
+        fontWeight: "700";
+        textAlign: "center";
+        padding: number;
+    };
+};
+//# sourceMappingURL=QuantityStepper.styles.d.ts.map

package/dist/components/picker/QuantityStepper.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.styles.d.ts","sourceRoot":"","sources":["../../../src/components/picker/QuantityStepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEtD,2FAA2F;AAC3F,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,kEAAkE;IAClE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,oFAAoF;AACpF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,SAAS,EAAE,yBAAyB,CAW1E,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCzB,CAAC"}

package/dist/components/picker/QuantityStepper.styles.js

@@ -0,0 +1,46 @@
+export const defaultA11yLabels = {
+    fr: {
+        decrease: (label) => `Retirer : ${label}`,
+        increase: (label) => `Ajouter : ${label}`,
+        input: (label) => `Quantité : ${label}`,
+    },
+    en: {
+        decrease: (label) => `Decrease: ${label}`,
+        increase: (label) => `Increase: ${label}`,
+        input: (label) => `Quantity: ${label}`,
+    },
+};
+export const defaultStyles = {
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+    },
+    button: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: "#2563eb",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    buttonDisabled: { opacity: 0.35 },
+    buttonText: {
+        color: "#ffffff",
+        fontSize: 22,
+        fontWeight: "700",
+        lineHeight: 26,
+    },
+    input: {
+        width: 52,
+        height: 40,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "#d4d4d4",
+        color: "#111111",
+        fontSize: 18,
+        fontWeight: "700",
+        textAlign: "center",
+        padding: 0,
+    },
+};

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

@@ -7,7 +7,11 @@ export interface UpdateSettingsScreenProps {
     checkForUpdate: () => Promise<UpdateSettingsScreenRelease | null>;
     /** Positive when `a` is newer than `b`, e.g. semver comparison. */
     compareVersions: (a: string, b: string) => number;
-    downloadAndInstallApk: (apkUrl: string, onProgress?: (fraction: number) => void) => Promise<void>;
+    /**
+     * Receives the release's `apkSha256`: pass it on as
+     * `expectedSha256` so a swapped or damaged APK is never installed.
+     */
+    downloadAndInstallApk: (apkUrl: string, onProgress?: (fraction: number) => void, apkSha256?: string) => Promise<void>;
     /** Omit to not show a version history section at all. */
     fetchReleaseHistory?: () => Promise<UpdateSettingsScreenHistoryEntry[]>;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"UpdateSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/UpdateSettingsScreen.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,SAAS,EAEf,MAAM,sBAAsB,CAAC;AAG9B,OAAO,KAAK,EACV,gCAAgC,EAChC,0BAA0B,EAC1B,2BAA2B,EAC3B,0BAA0B,EAC3B,MAAM,kCAAkC,CAAC;AAI1C,YAAY,EACV,gCAAgC,EAChC,0BAA0B,EAC1B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,kCAAkC,CAAC;AAU1C,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,cAAc,EAAE,MAAM,OAAO,CAAC,2BAA2B,GAAG,IAAI,CAAC,CAAC;IAClE,mEAAmE;IACnE,eAAe,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,qBAAqB,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,KACpC,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,gCAAgC,EAAE,CAAC,CAAC;IACxE;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AAQD,wBAAgB,oBAAoB,CAAC,EACnC,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,yBAAyB,+BAuJ3B"}
+{"version":3,"file":"UpdateSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/UpdateSettingsScreen.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,SAAS,EAEf,MAAM,sBAAsB,CAAC;AAG9B,OAAO,KAAK,EACV,gCAAgC,EAChC,0BAA0B,EAC1B,2BAA2B,EAC3B,0BAA0B,EAC3B,MAAM,kCAAkC,CAAC;AAI1C,YAAY,EACV,gCAAgC,EAChC,0BAA0B,EAC1B,2BAA2B,EAC3B,0BAA0B,GAC3B,MAAM,kCAAkC,CAAC;AAU1C,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,cAAc,EAAE,MAAM,OAAO,CAAC,2BAA2B,GAAG,IAAI,CAAC,CAAC;IAClE,mEAAmE;IACnE,eAAe,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD;;;OAGG;IACH,qBAAqB,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,EACvC,SAAS,CAAC,EAAE,MAAM,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,gCAAgC,EAAE,CAAC,CAAC;IACxE;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AAQD,wBAAgB,oBAAoB,CAAC,EACnC,cAAc,EACd,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,yBAAyB,+BA8J3B"}

package/dist/components/settings/UpdateSettingsScreen.js

@@ -52,12 +52,12 @@ export function UpdateSettingsScreen({ currentVersion, checkForUpdate, compareVe
         void handleCheckForUpdate();
         // eslint-disable-next-line @eslint-react/exhaustive-deps -- runs once on mount by design; handleCheckForUpdate is expected to be stable enough for the screen's lifetime.
     }, []);
-    async function handleInstall(apkUrl) {
+    async function handleInstall({ apkUrl, apkSha256, }) {
         setUpdateState({ status: "downloading", progress: 0 });
         try {
             await downloadAndInstallApk(apkUrl, (progress) => {
                 setUpdateState({ status: "downloading", progress });
-            });
+            }, apkSha256);
             setUpdateState({ status: "idle" });
         }
         catch {
@@ -74,6 +74,6 @@ export function UpdateSettingsScreen({ currentVersion, checkForUpdate, compareVe
                 updateState.status !== "downloading" && (_jsx(Pressable, { style: [merged.button, isBusy && merged.buttonDisabled], onPress: () => {
                     void handleCheckForUpdate();
                 }, disabled: isBusy, accessibilityRole: "button", accessibilityLabel: t.checkButton, children: updateState.status === "checking" ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: merged.buttonText, children: t.checkButton })) })), updateState.status === "up-to-date" && (_jsx(Text, { style: merged.helpText, children: t.upToDate })), updateState.status === "error" && (_jsx(Text, { style: merged.errorText, children: updateState.message })), updateState.status === "available" && (_jsxs(View, { style: merged.updateAvailableBox, children: [_jsx(Text, { style: merged.updateAvailableTitle, children: t.availableTitle(updateState.release.version) }), updateState.release.notes ? (_jsx(ChangelogNotes, { notes: updateState.release.notes, styles: merged.notes })) : null, _jsx(Pressable, { style: merged.button, onPress: () => {
-                            void handleInstall(updateState.release.apkUrl);
+                            void handleInstall(updateState.release);
                         }, accessibilityRole: "button", accessibilityLabel: t.installButtonAccessibilityLabel(updateState.release.version), children: _jsx(Text, { style: merged.buttonText, children: t.installButton(updateState.release.version) }) })] })), updateState.status === "downloading" && (_jsxs(View, { style: merged.updateAvailableBox, children: [_jsx(Text, { style: merged.helpText, children: t.downloadingLabel(Math.round(updateState.progress * 100)) }), _jsx(Text, { style: merged.helpText, children: t.downloadingHint })] })), releaseHistory && releaseHistory.length > 0 && (_jsx(UpdateSettingsScreenHistory, { releaseHistory: releaseHistory, historyTitle: t.historyTitle, dateLocale: dateLocale, notesStyles: notesStyles, styles: merged }))] }));
 }

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

@@ -4,6 +4,8 @@ export interface UpdateSettingsScreenRelease {
     version: string;
     notes: string;
     apkUrl: string;
+    /** SHA-256 of the APK, handed back to `downloadAndInstallApk`. */
+    apkSha256?: string;
 }
 export interface UpdateSettingsScreenHistoryEntry {
     version: string;

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

@@ -1 +1 @@
-{"version":3,"file":"UpdateSettingsScreen.styles.d.ts","sourceRoot":"","sources":["../../../src/components/settings/UpdateSettingsScreen.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAInF,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gCAAgC;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,0BAA0B;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,+BAA+B,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa;;;;;;;kCAOI,MAAM;;mDAEW,MAAM;oCAErB,MAAM;;;;;;;;;;kCAYR,MAAM;;mDAEW,MAAM;oCAErB,MAAM;;;;CAI6B,CAAC;AAEpE,eAAO,MAAM,aAAa,EAAE,QAAQ,CAClC,IAAI,CAAC,0BAA0B,EAAE,wBAAwB,GAAG,OAAO,CAAC,CACrE,GACC,IAAI,CAAC,0BAA0B,EAAE,wBAAwB,GAAG,OAAO,CA8DpE,CAAC"}
+{"version":3,"file":"UpdateSettingsScreen.styles.d.ts","sourceRoot":"","sources":["../../../src/components/settings/UpdateSettingsScreen.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAInF,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gCAAgC;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,MAAM,WAAW,0BAA0B;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,+BAA+B,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9D,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,oBAAoB,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa;;;;;;;kCAOI,MAAM;;mDAEW,MAAM;oCAErB,MAAM;;;;;;;;;;kCAYR,MAAM;;mDAEW,MAAM;oCAErB,MAAM;;;;CAI6B,CAAC;AAEpE,eAAO,MAAM,aAAa,EAAE,QAAQ,CAClC,IAAI,CAAC,0BAA0B,EAAE,wBAAwB,GAAG,OAAO,CAAC,CACrE,GACC,IAAI,CAAC,0BAA0B,EAAE,wBAAwB,GAAG,OAAO,CA8DpE,CAAC"}

package/dist/components/theme/BackgroundPicker.d.ts

@@ -0,0 +1,46 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { BackgroundOption } from "./findBackground.js";
+export type { BackgroundOption } from "./findBackground.js";
+export interface BackgroundPickerStyles {
+    /** The wrapping row of swatches. */
+    row?: StyleProp<ViewStyle>;
+    /** One option: swatch + label. */
+    option?: StyleProp<ViewStyle>;
+    swatch?: StyleProp<ViewStyle>;
+    /** Added on top of `swatch` for the chosen one. */
+    swatchSelected?: StyleProp<ViewStyle>;
+    card?: StyleProp<ViewStyle>;
+    /** The round badge holding the check mark. */
+    check?: StyleProp<ViewStyle>;
+    label?: StyleProp<TextStyle>;
+    labelSelected?: StyleProp<TextStyle>;
+    checkIconColor?: string;
+}
+export interface BackgroundPickerProps<T extends BackgroundOption> {
+    options: readonly T[];
+    /** Id of the chosen option. */
+    value: string;
+    /** Receives the chosen option — add a haptic tick here if wanted. */
+    onChange: (option: T) => void;
+    styles?: BackgroundPickerStyles;
+}
+/**
+ * Radio group of background swatches: each one draws the page and a card in
+ * the colours on offer, the chosen one outlined with a check mark. Pair it
+ * with `findBackground` (`./findBackground`) to read the saved id, and check each palette's
+ * contrast with `contrastRatio` from `@forthtilliath/ts-kit/color`.
+ *
+ * @example
+ * ```tsx
+ * <BackgroundPicker
+ *   options={[
+ *     { id: "night", label: "Bleu nuit", page: "#0f172a", card: "#1e293b" },
+ *     { id: "felt", label: "Tapis vert", page: "#0b1f15", card: "#112c1e" },
+ *   ]}
+ *   value={settings.background}
+ *   onChange={(option) => { selectFeedback(); save(option.id); }}
+ * />
+ * ```
+ */
+export declare function BackgroundPicker<T extends BackgroundOption>({ options, value, onChange, styles, }: BackgroundPickerProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=BackgroundPicker.d.ts.map

package/dist/components/theme/BackgroundPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.d.ts","sourceRoot":"","sources":["../../../src/components/theme/BackgroundPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,MAAM,WAAW,sBAAsB;IACrC,oCAAoC;IACpC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,mDAAmD;IACnD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,gBAAgB;IAC/D,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC;IACtB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAwCD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,EAAE,EAC3D,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE,qBAAqB,CAAC,CAAC,CAAC,+BAoD1B"}

package/dist/components/theme/BackgroundPicker.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    option: {
+        flexGrow: 1,
+        flexBasis: "22%",
+        alignItems: "center",
+        gap: 4,
+    },
+    swatch: {
+        width: "100%",
+        aspectRatio: 1,
+        borderRadius: 12,
+        borderWidth: 2,
+        borderColor: "#d4d4d4",
+        padding: 8,
+        justifyContent: "flex-end",
+    },
+    swatchSelected: { borderColor: "#2563eb" },
+    card: { height: "45%", borderRadius: 6, borderWidth: 1 },
+    check: {
+        position: "absolute",
+        top: 4,
+        right: 4,
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: "#2563eb",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    label: {
+        color: "#6b7280",
+        fontSize: 13,
+        fontWeight: "600",
+    },
+    labelSelected: { color: "#111827" },
+};
+/**
+ * Radio group of background swatches: each one draws the page and a card in
+ * the colours on offer, the chosen one outlined with a check mark. Pair it
+ * with `findBackground` (`./findBackground`) to read the saved id, and check each palette's
+ * contrast with `contrastRatio` from `@forthtilliath/ts-kit/color`.
+ *
+ * @example
+ * ```tsx
+ * <BackgroundPicker
+ *   options={[
+ *     { id: "night", label: "Bleu nuit", page: "#0f172a", card: "#1e293b" },
+ *     { id: "felt", label: "Tapis vert", page: "#0b1f15", card: "#112c1e" },
+ *   ]}
+ *   value={settings.background}
+ *   onChange={(option) => { selectFeedback(); save(option.id); }}
+ * />
+ * ```
+ */
+export function BackgroundPicker({ options, value, onChange, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    const checkIconColor = styles?.checkIconColor ?? "#ffffff";
+    return (_jsx(View, { style: merged.row, accessibilityRole: "radiogroup", children: options.map((option) => {
+            const selected = option.id === value;
+            return (_jsxs(Pressable, { style: merged.option, onPress: () => {
+                    onChange(option);
+                }, accessibilityRole: "radio", accessibilityState: { checked: selected }, accessibilityLabel: option.label, children: [_jsxs(View, { style: [
+                            merged.swatch,
+                            { backgroundColor: option.page },
+                            selected && merged.swatchSelected,
+                        ], children: [_jsx(View, { style: [
+                                    merged.card,
+                                    {
+                                        backgroundColor: option.card,
+                                        borderColor: option.cardBorder ?? option.card,
+                                    },
+                                ] }), selected && (_jsx(View, { style: merged.check, children: _jsx(Ionicons, { name: "checkmark", size: 14, color: checkIconColor }) }))] }), _jsx(Text, { style: [merged.label, selected && merged.labelSelected], numberOfLines: 1, children: option.label })] }, option.id));
+        }) }));
+}

package/dist/components/theme/findBackground.d.ts

@@ -0,0 +1,20 @@
+/** One background on offer to `BackgroundPicker`, drawn as a page with a card on it. */
+export interface BackgroundOption {
+    id: string;
+    /** Shown under the swatch and read by screen readers. */
+    label: string;
+    /** The page colour. */
+    page: string;
+    /** The card drawn on the page. */
+    card: string;
+    /** The card's border. Defaults to `card`. */
+    cardBorder?: string;
+}
+/**
+ * The option with this id, or the first one (the original background) if the
+ * id is unknown — a background removed since it was saved, or none saved yet.
+ *
+ * @throws {RangeError} If `options` is empty.
+ */
+export declare function findBackground<T extends BackgroundOption>(options: readonly T[], id: string | null | undefined): T;
+//# sourceMappingURL=findBackground.d.ts.map

package/dist/components/theme/findBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findBackground.d.ts","sourceRoot":"","sources":["../../../src/components/theme/findBackground.ts"],"names":[],"mappings":"AAAA,wFAAwF;AACxF,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,gBAAgB,EACvD,OAAO,EAAE,SAAS,CAAC,EAAE,EACrB,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC5B,CAAC,CAIH"}

package/dist/components/theme/findBackground.js

@@ -0,0 +1,12 @@
+/**
+ * The option with this id, or the first one (the original background) if the
+ * id is unknown — a background removed since it was saved, or none saved yet.
+ *
+ * @throws {RangeError} If `options` is empty.
+ */
+export function findBackground(options, id) {
+    const found = options.find((option) => option.id === id) ?? options[0];
+    if (!found)
+        throw new RangeError("findBackground needs at least one option");
+    return found;
+}

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

@@ -1,3 +1,5 @@
+export * from "./BackgroundPicker.js";
+export * from "./findBackground.js";
 export * from "./ThemeOptionList.js";
 export * from "./themePreferenceContext.js";
 export * from "./ThemePreferenceProvider.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC"}

package/dist/components/theme/index.js

@@ -1,3 +1,5 @@
+export * from "./BackgroundPicker.js";
+export * from "./findBackground.js";
 export * from "./ThemeOptionList.js";
 export * from "./themePreferenceContext.js";
 export * from "./ThemePreferenceProvider.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "type": "module",
   "sideEffects": false,
   "license": "MIT",
@@ -22,7 +22,7 @@
     "./*": "./dist/*.js"
   },
   "dependencies": {
-    "@forthtilliath/ts-kit": "^0.13.0"
+    "@forthtilliath/ts-kit": "^0.14.0"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=15.0.0",
@@ -102,15 +102,15 @@
     "size-limit": "^14.1.0",
     "typescript": "^5.9.3",
     "vitest": "^5.0.2",
-    "@forthtilliath/eslint-config": "0.9.0",
-    "@forthtilliath/expo-release-updates-ui": "^0.4.1",
-    "@forthtilliath/typescript-config": "0.1.1"
+    "@forthtilliath/expo-release-updates-ui": "^0.5.0",
+    "@forthtilliath/typescript-config": "0.1.1",
+    "@forthtilliath/eslint-config": "0.9.0"
   },
   "size-limit": [
     {
       "name": "dist (all modules, brotli)",
       "path": "dist/**/*.js",
-      "limit": "44 KB"
+      "limit": "47 KB"
     }
   ],
   "scripts": {