@forthtilliath/react-native-kit 0.17.1 → 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.
@@ -277,6 +281,21 @@ useDebouncedChange([settingsData, itemsData], 5 * 60 * 1000, () => {
 });
 ```
 
+### `usePressRepeat(timings?)`
+
+Repeats an action while a button is held, faster and faster: `start(action)` runs it at once, then every 180 ms after 450 ms, every 60 ms after 1.2 s of repeating (all four timings overridable); `stop()` ends it, and so does unmounting.
+
+```tsx
+import { usePressRepeat } from "@forthtilliath/react-native-kit/hooks/usePressRepeat";
+
+const repeat = usePressRepeat();
+
+<Pressable
+  onPressIn={() => repeat.start(() => setCount((n) => n + 1))}
+  onPressOut={repeat.stop}
+/>;
+```
+
 ### `confirmDestructive(title, onConfirm, options?)`
 
 Generic destructive-action confirmation (title + message + Cancel/Confirm), for anything irreversible (delete, reset...). Ships with French defaults, or English ones with `{ locale: "en" }` (`message`, `cancelLabel`, `confirmLabel` all overridable).
@@ -321,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.
@@ -343,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`): −/+ buttons (disabled at the bounds, `longPressStep` to jump on long press) 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`.
 
@@ -501,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,39 +1,44 @@
-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`. */
     onChange: (value: number) => void;
     /** What is being counted — used in the screen-reader labels. */
     label: string;
-    /** @defaultValue 0 */
+    /**
+     * Below 0, negative values are allowed: the field then accepts a leading
+     * "-" (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.
+     * Unset, a long press does nothing more than a tap. Ignored with
+     * `repeatOnHold`.
      */
     longPressStep?: number;
+    /**
+     * Holding −/+ repeats the step, faster and faster (see `usePressRepeat`),
+     * until released or a bound is reached.
+     * @defaultValue false
+     */
+    repeatOnHold?: boolean;
     /**
      * Language of the default screen-reader labels — French by default, or the
      * nearest `KitLocaleProvider`'s.
@@ -45,11 +50,14 @@ export interface QuantityStepperProps {
     styles?: QuantityStepperStyles;
 }
 /**
- * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust
- * (optionally faster on long press), and a numeric field in the middle to
- * type a large number in one go (non-digits are dropped, the result is
- * clamped). A typed value below `min` (an empty field, the "2" of "25" with
- * `min={10}`) stays as typed until the field loses focus.
+ * 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
@@ -57,7 +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={-Infinity} max={Infinity} step={4} repeatOnHold onStep={tapFeedback} />
  * ```
  */
-export declare function QuantityStepper({ value, onChange, label, min, max, longPressStep, 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;AAGpE,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,sBAAsB;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,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;AAkDD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,aAAa,EACb,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE,oBAAoB,+BAwEtB"}
+{"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"}