@forthtilliath/react-native-kit 0.14.7 → 0.15.0

package/README.md

@@ -18,7 +18,7 @@ Or, from within this monorepo, as a workspace dependency:
 }
 ```
 
-`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, and `react-native-gesture-handler` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, respectively).
+`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, `react-native-gesture-handler` and `react-native-reanimated` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, `SwipeableRow`, respectively).
 
 ## Usage
 
@@ -38,6 +38,23 @@ import { PhotoPicker, useSubmitGuard } from "@forthtilliath/react-native-kit";
 
 **Avoid the barrel under Jest (or any other CommonJS `require` consumer).** `export * from` re-exports are evaluated eagerly on `require()` — unlike Metro's ESM bundling, there's no tree-shaking to skip the unused ones. Requiring the barrel from _any_ file, even one that only wants a framework-agnostic util like `getMostRecentIds`, pulls in every component's module graph, including native-module imports (`expo-speech-recognition` via `VoiceSearchButton`/`PickerModal`) that don't exist in a Jest environment — this throws `Cannot find native module '...'` at require time, not just at runtime for an unrendered component. Deep imports only ever load the one module you asked for, so they don't have this problem in any environment.
 
+### Languages (`locale`)
+
+Every component with built-in copy (labels, hints, accessibility labels, default sections…) ships it in **French** (default) and **English**. Pick the language:
+
+- per component, with a `locale` prop: `<UndoToast locale="en" … />`;
+- or once for a whole tree — handy for a bilingual app — with `KitLocaleProvider`:
+
+```tsx
+import { KitLocaleProvider } from "@forthtilliath/react-native-kit/i18n/KitLocaleProvider";
+
+<KitLocaleProvider locale={userLanguage /* "fr" | "en" */}>
+  <App />
+</KitLocaleProvider>;
+```
+
+A component's own `locale` prop wins over the provider, and its `labels` prop still overrides individual strings on top of either. The locale also drives `VoiceSearchButton`'s speech-recognition language (`fr-FR` / `en-US`) and `UpdateSettingsScreen`'s date format, unless `lang` / `dateLocale` are passed. `confirmDestructive`, being a plain function, can't read the provider: pass it `{ locale }`.
+
 ### `<Thumbnail photoUri={...} placeholderIcon="..." />`
 
 List-row thumbnail: the photo if there is one, otherwise a placeholder icon.
@@ -54,7 +71,7 @@ import { Thumbnail } from "@forthtilliath/react-native-kit/components/list/Thumb
 
 ### `<SwipeableRow onDelete={...} deleteLabel="...">`
 
-Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+Swipe a list row left to reveal a delete button, on top of a tap to edit it. Built on react-native-gesture-handler's `ReanimatedSwipeable`, so it needs `react-native-reanimated` installed. The text under the trash icon defaults to "Supprimer" ("Delete" in English), overridable with `deleteText`.
 
 ```tsx
 import { SwipeableRow } from "@forthtilliath/react-native-kit/components/list/SwipeableRow";
@@ -119,12 +136,13 @@ import { UndoToast } from "@forthtilliath/react-native-kit/components/list/UndoT
 }
 ```
 
-| Prop          | Type              | Default  | Notes                                                                               |
-| ------------- | ----------------- | -------- | ----------------------------------------------------------------------------------- |
-| `message`     | `string`          | —        | Past tense; single line, truncated with an ellipsis.                                |
-| `actionLabel` | `string`          | `"Undo"` | The tappable label on the right.                                                    |
-| `onAction`    | `() => void`      | —        | Reverse the change here. The host then hides the toast.                             |
-| `styles`      | `UndoToastStyles` | —        | Per-slot overrides (`toast` / `message` / `action`), each merged after its default. |
+| Prop          | Type              | Default                           | Notes                                                                               |
+| ------------- | ----------------- | --------------------------------- | ----------------------------------------------------------------------------------- |
+| `message`     | `string`          | —                                 | Past tense; single line, truncated with an ellipsis.                                |
+| `actionLabel` | `string`          | `"Annuler"` (`"Undo"` in English) | The tappable label on the right.                                                    |
+| `locale`      | `KitLocale`       | `"fr"`                            | Language of the default `actionLabel` (see [Languages](#languages-locale)).         |
+| `onAction`    | `() => void`      | —                                 | Reverse the change here. The host then hides the toast.                             |
+| `styles`      | `UndoToastStyles` | —                                 | Per-slot overrides (`toast` / `message` / `action`), each merged after its default. |
 
 Full pattern — commit for good after 5s, localized label, re-themed:
 
@@ -171,9 +189,11 @@ Microphone button to dictate a search instead of typing it. Safe to mount more t
 ```tsx
 import { VoiceSearchButton } from "@forthtilliath/react-native-kit/components/picker/VoiceSearchButton";
 
-<VoiceSearchButton onResult={setQuery} lang="en-US" />;
+<VoiceSearchButton onResult={setQuery} />;
 ```
 
+Recognizes French by default (`fr-FR`, or `en-US` with `locale="en"`); pass `lang` for any other BCP 47 language.
+
 ### `<PhotoPicker photoUri={...} onChange={...} savePhoto={...} photoLabel="..." />`
 
 Photo picker (camera or library) with a preview and a remove link. `savePhoto` is injected rather than hard-coded, so where/how the picked image gets persisted is entirely up to the caller.
@@ -220,7 +240,7 @@ import {
 
 Groups results into sections via each item's `group` (e.g. food groups, ingredients vs recipes) — ignored while searching, where the best global matches are shown instead. Pass `filterItems` for custom ranking (e.g. `rankByNameMatch` from this same package's `utils/`) instead of the default case-insensitive substring match.
 
-For all 5 components above, styling and (where relevant) copy work the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults) and, for `PhotoPicker`/`PickerModal`, an optional `labels` prop for the built-in French copy.
+For all 5 components above, styling and (where relevant) copy work the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults) and, for `PhotoPicker`/`PickerModal`, an optional `labels` prop over the built-in French or English copy (see [Languages](#languages-locale)).
 
 ### `useSubmitGuard()`
 
@@ -257,15 +277,14 @@ useDebouncedChange([settingsData, itemsData], 5 * 60 * 1000, () => {
 
 ### `confirmDestructive(title, onConfirm, options?)`
 
-Generic destructive-action confirmation (title + message + Cancel/Confirm), for anything irreversible (delete, reset...). Ships with French defaults (`message`, `cancelLabel`, `confirmLabel` all overridable).
+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).
 
 ```ts
 import { confirmDestructive } from "@forthtilliath/react-native-kit/utils/helpers/confirmDestructive";
 
 confirmDestructive("Delete this item?", () => deleteItem(id), {
-  message: "This cannot be undone.",
-  cancelLabel: "Cancel",
-  confirmLabel: "Delete",
+  locale: "en",
+  confirmLabel: "Remove",
 });
 ```
 
@@ -568,11 +587,12 @@ import { PrivacySettingsScreen } from "@forthtilliath/react-native-kit/component
 />;
 ```
 
-For all 7 components above, styling works the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults), and where relevant an optional `labels` prop for the built-in French copy.
+For all 7 components above, styling works the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults), and where relevant an optional `labels` prop over the built-in French or English copy (see [Languages](#languages-locale)).
 
 ### Utils (`utils/helpers/`)
 
-`confirmDestructive` is the only remaining util here — it wraps React Native's `Alert`, so it isn't framework-agnostic (see its own section above).
+- `confirmDestructive` — wraps React Native's `Alert`, so it isn't framework-agnostic (see its own section above).
+- `mergeSlotStyles(defaultStyles, styles)` — merges a component's per-slot `styles` overrides onto its defaults as `[default, override]` style arrays, so overriding one property of a slot keeps the rest of its default. Every component of this package uses it; handy for your own components following the same `styles` convention.
 
 The framework-agnostic helpers that used to live here (`getPeriodStartMs`, `getMostRecentIds`, `nextInCycle`, `normalizeForSearch`, `rankByNameMatch`, `escapeCsvField`, `formatCsvNumber`, `escapeHtml`) moved to [`@forthtilliath/ts-kit`](../ts-kit#readme) — no React Native dependency on them, so they're usable from Node/web too. They're still re-exported from this package's root barrel for convenience:
 
@@ -600,4 +620,4 @@ Built to `dist/` (see the `exports` field in `package.json`), so run `pnpm run b
 
 ### Testing note
 
-`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details. `react-native-gesture-handler` ships the same kind of Flow syntax, and `@expo/vector-icons` has its own unrelated ESM-resolution issue under Vite/Rollup — both are stubbed the same way (`src/__mocks__/react-native-gesture-handler.tsx`, `src/__mocks__/expo-vector-icons.tsx`). `expo-speech-recognition` and `expo-image-picker` wrap native modules unavailable under Vitest regardless, so they're mocked with plain spies (`src/__mocks__/expo-speech-recognition.tsx`, `src/__mocks__/expo-image-picker.ts`).
+`react-native`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details. `react-native-gesture-handler` ships the same kind of Flow syntax, and `@expo/vector-icons` has its own unrelated ESM-resolution issue under Vite/Rollup — both are stubbed the same way (`src/__mocks__/react-native-gesture-handler.tsx`, `src/__mocks__/expo-vector-icons.tsx`). `react-native-gesture-handler/ReanimatedSwipeable` needs Reanimated's native runtime, so it gets its own stub too (`src/__mocks__/react-native-gesture-handler-reanimated-swipeable.tsx`). `expo-speech-recognition` and `expo-image-picker` wrap native modules unavailable under Vitest regardless, so they're mocked with plain spies (`src/__mocks__/expo-speech-recognition.tsx`, `src/__mocks__/expo-image-picker.ts`).

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
-export * from "./list";
-export * from "./picker";
-export * from "./settings";
-export * from "./theme";
+export * from "./list/index.js";
+export * from "./picker/index.js";
+export * from "./settings/index.js";
+export * from "./theme/index.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export * from "./list";
-export * from "./picker";
-export * from "./settings";
-export * from "./theme";
+export * from "./list/index.js";
+export * from "./picker/index.js";
+export * from "./settings/index.js";
+export * from "./theme/index.js";

package/dist/components/list/SwipeableRow.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type KitLocale } from "../../i18n/locale.js";
 export interface SwipeableRowStyles {
     deleteAction?: StyleProp<ViewStyle>;
     deleteActionText?: StyleProp<TextStyle>;
@@ -8,9 +9,21 @@ export interface SwipeableRowStyles {
 export interface SwipeableRowProps {
     children: ReactNode;
     onDelete: () => void;
+    /** Accessibility label of the delete button, e.g. `"Delete « Marie »"`. */
     deleteLabel: string;
+    /** Text under the trash icon. Defaults to "Supprimer" (`"Delete"` with `locale="en"`). */
     deleteText?: string;
+    /**
+     * Language of the default `deleteText` — French by default, or the
+     * nearest `KitLocaleProvider`'s.
+     */
+    locale?: KitLocale;
     styles?: SwipeableRowStyles;
 }
-export declare function SwipeableRow({ children, onDelete, deleteLabel, deleteText, styles, }: SwipeableRowProps): import("react").JSX.Element;
+/**
+ * Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+ * Built on react-native-gesture-handler's `ReanimatedSwipeable`, so the app
+ * needs `react-native-reanimated` (a peer dependency).
+ */
+export declare function SwipeableRow({ children, onDelete, deleteLabel, deleteText, locale, styles, }: SwipeableRowProps): import("react").JSX.Element;
 //# sourceMappingURL=SwipeableRow.d.ts.map

package/dist/components/list/SwipeableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../../../src/components/list/SwipeableRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAiBD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAqB,EACrB,MAAM,GACP,EAAE,iBAAiB,+BAuCnB"}
+{"version":3,"file":"SwipeableRow.d.ts","sourceRoot":"","sources":["../../../src/components/list/SwipeableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,kBAAkB;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,2EAA2E;IAC3E,WAAW,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAqBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,iBAAiB,+BAiCnB"}

package/dist/components/list/SwipeableRow.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
 import { Pressable, Text } from "react-native";
-import { Swipeable } from "react-native-gesture-handler";
+import ReanimatedSwipeable from "react-native-gesture-handler/ReanimatedSwipeable";
 import { Ionicons } from "@expo/vector-icons";
+import { useKitLocale } from "../../i18n/locale.js";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultDeleteTexts = {
+    fr: "Supprimer",
+    en: "Delete",
+};
 const defaultStyles = {
     deleteAction: {
         backgroundColor: "#dc2626",
@@ -16,22 +21,19 @@ const defaultStyles = {
     deleteActionText: { color: "#ffffff", fontSize: 11, fontWeight: "600" },
     deleteIconColor: "#ffffff",
 };
-// Swipe a list row left to reveal a delete button, on top of a tap to edit it.
-export function SwipeableRow({ children, onDelete, deleteLabel, deleteText = "Delete", styles, }) {
-    // Style fields are merged as arrays (default, then override) so a partial
-    // override (e.g. just backgroundColor) doesn't drop the default's
-    // width/borderRadius/marginBottom/gap too.
+/**
+ * Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+ * Built on react-native-gesture-handler's `ReanimatedSwipeable`, so the app
+ * needs `react-native-reanimated` (a peer dependency).
+ */
+export function SwipeableRow({ children, onDelete, deleteLabel, deleteText, locale, styles, }) {
+    const resolvedLocale = useKitLocale(locale);
     const merged = {
-        deleteAction: [defaultStyles.deleteAction, styles?.deleteAction],
-        deleteActionText: [
-            defaultStyles.deleteActionText,
-            styles?.deleteActionText,
-        ],
+        ...mergeSlotStyles(defaultStyles, styles),
         deleteIconColor: styles?.deleteIconColor ?? defaultStyles.deleteIconColor,
     };
-    const swipeableRef = useRef(null);
-    return (_jsx(Swipeable, { ref: swipeableRef, renderRightActions: () => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
-                swipeableRef.current?.close();
+    return (_jsx(ReanimatedSwipeable, { renderRightActions: (_progress, _translation, swipeable) => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
+                swipeable.close();
                 onDelete();
-            }, accessibilityRole: "button", accessibilityLabel: deleteLabel, children: [_jsx(Ionicons, { name: "trash-outline", size: 22, color: merged.deleteIconColor }), _jsx(Text, { style: merged.deleteActionText, children: deleteText })] })), children: children }));
+            }, accessibilityRole: "button", accessibilityLabel: deleteLabel, children: [_jsx(Ionicons, { name: "trash-outline", size: 22, color: merged.deleteIconColor }), _jsx(Text, { style: merged.deleteActionText, children: deleteText ?? defaultDeleteTexts[resolvedLocale] })] })), children: children }));
 }

package/dist/components/list/Thumbnail.d.ts.map

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

package/dist/components/list/Thumbnail.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Image, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
 const DEFAULT_SIZE = 48;
 const defaultStyles = {
     thumbnail: { borderRadius: 10, backgroundColor: "#f3f4f6" },
@@ -14,13 +15,8 @@ const defaultStyles = {
 };
 // List-row thumbnail (photo, or a placeholder icon when there is none).
 export function Thumbnail({ photoUri, placeholderIcon, size = DEFAULT_SIZE, styles, }) {
-    // Style fields are merged as arrays (default, then override) so a partial
-    // override (e.g. just backgroundColor) doesn't drop the default's
-    // borderRadius, or the placeholder's alignItems/justifyContent that center
-    // the icon.
     const merged = {
-        thumbnail: [defaultStyles.thumbnail, styles?.thumbnail],
-        placeholder: [defaultStyles.placeholder, styles?.placeholder],
+        ...mergeSlotStyles(defaultStyles, styles),
         iconColor: styles?.iconColor ?? defaultStyles.iconColor,
     };
     const dimensions = { width: size, height: size };

package/dist/components/list/UndoToast.d.ts

@@ -1,4 +1,5 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type KitLocale } from "../../i18n/locale.js";
 /**
  * Per-slot style overrides for {@link UndoToast}. Every field is optional and
  * is **merged after** the matching default (as a style array), so overriding
@@ -10,7 +11,7 @@ export interface UndoToastStyles {
     toast?: StyleProp<ViewStyle>;
     /** The message text on the left. Truncated to a single line. */
     message?: StyleProp<TextStyle>;
-    /** The action label on the right (the tappable "Undo"). */
+    /** The action label on the right (the tappable "Annuler" / "Undo"). */
     action?: StyleProp<TextStyle>;
 }
 export interface UndoToastProps {
@@ -23,9 +24,14 @@ export interface UndoToastProps {
     /**
      * Label of the action button.
      *
-     * @defaultValue "Undo"
+     * @defaultValue "Annuler" (`"Undo"` with `locale="en"`)
      */
     actionLabel?: string;
+    /**
+     * Language of the default `actionLabel` — French by default, or the
+     * nearest `KitLocaleProvider`'s.
+     */
+    locale?: KitLocale;
     /**
      * Called when the action button is tapped. Wire this to your reverse-the-
      * change logic (restore the row, re-insert the item…). The host is
@@ -38,7 +44,7 @@ export interface UndoToastProps {
 /**
  * A bottom-of-screen snackbar for **undoing an action that already
  * happened** — the counterpart to a delete that runs immediately with no
- * confirmation dialog (for instance a {@link SwipeToDeleteRow} swipe).
+ * confirmation dialog (for instance a {@link SwipeableRow} swipe).
  *
  * `UndoToast` is presentational only: it does not time itself out, animate
  * in/out, or stack. The host owns that — typically a piece of state holding
@@ -96,5 +102,5 @@ export interface UndoToastProps {
  * )}
  * ```
  */
-export declare function UndoToast({ message, actionLabel, onAction, styles, }: UndoToastProps): import("react").JSX.Element;
+export declare function UndoToast({ message, actionLabel, locale, onAction, styles, }: UndoToastProps): import("react").JSX.Element;
 //# sourceMappingURL=UndoToast.d.ts.map

package/dist/components/list/UndoToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UndoToast.d.ts","sourceRoot":"","sources":["../../../src/components/list/UndoToast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAkCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,WAAoB,EACpB,QAAQ,EACR,MAAM,GACP,EAAE,cAAc,+BAmBhB"}
+{"version":3,"file":"UndoToast.d.ts","sourceRoot":"","sources":["../../../src/components/list/UndoToast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,gEAAgE;IAChE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,WAAW,EACX,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EAAE,cAAc,+BAkBhB"}

package/dist/components/list/UndoToast.js

@@ -1,5 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Pressable, Text, View } from "react-native";
+import { useKitLocale } from "../../i18n/locale.js";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultActionLabels = {
+    fr: "Annuler",
+    en: "Undo",
+};
 const defaultStyles = {
     toast: {
         position: "absolute",
@@ -34,7 +40,7 @@ const defaultStyles = {
 /**
  * A bottom-of-screen snackbar for **undoing an action that already
  * happened** — the counterpart to a delete that runs immediately with no
- * confirmation dialog (for instance a {@link SwipeToDeleteRow} swipe).
+ * confirmation dialog (for instance a {@link SwipeableRow} swipe).
  *
  * `UndoToast` is presentational only: it does not time itself out, animate
  * in/out, or stack. The host owns that — typically a piece of state holding
@@ -92,13 +98,10 @@ const defaultStyles = {
  * )}
  * ```
  */
-export function UndoToast({ message, actionLabel = "Undo", onAction, styles, }) {
+export function UndoToast({ message, actionLabel, locale, onAction, styles, }) {
+    const resolvedLocale = useKitLocale(locale);
     // Merge each slot as [default, override] so a partial override doesn't drop
     // the rest of that slot's default (positioning, shadow, flex…).
-    const merged = {
-        toast: [defaultStyles.toast, styles?.toast],
-        message: [defaultStyles.message, styles?.message],
-        action: [defaultStyles.action, styles?.action],
-    };
-    return (_jsxs(View, { style: merged.toast, children: [_jsx(Text, { style: merged.message, numberOfLines: 1, children: message }), _jsx(Pressable, { onPress: onAction, hitSlop: 8, accessibilityRole: "button", children: _jsx(Text, { style: merged.action, children: actionLabel }) })] }));
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsxs(View, { style: merged.toast, children: [_jsx(Text, { style: merged.message, numberOfLines: 1, children: message }), _jsx(Pressable, { onPress: onAction, hitSlop: 8, accessibilityRole: "button", children: _jsx(Text, { style: merged.action, children: actionLabel ?? defaultActionLabels[resolvedLocale] }) })] }));
 }

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

@@ -1,5 +1,5 @@
-export * from "./ColorDot";
-export * from "./SwipeableRow";
-export * from "./Thumbnail";
-export * from "./UndoToast";
+export * from "./ColorDot.js";
+export * from "./SwipeableRow.js";
+export * from "./Thumbnail.js";
+export * from "./UndoToast.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/components/list/index.js

@@ -1,4 +1,4 @@
-export * from "./ColorDot";
-export * from "./SwipeableRow";
-export * from "./Thumbnail";
-export * from "./UndoToast";
+export * from "./ColorDot.js";
+export * from "./SwipeableRow.js";
+export * from "./Thumbnail.js";
+export * from "./UndoToast.js";

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

@@ -1,4 +1,5 @@
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type KitLocale } from "../../i18n/locale.js";
 export interface PhotoPickerStyles {
     photoPicker?: StyleProp<ViewStyle>;
     photoPreview?: StyleProp<ImageStyle>;
@@ -28,7 +29,12 @@ export interface PhotoPickerProps {
     /** Used as-is in titles/accessibility labels, e.g. "of the container". */
     photoLabel: string;
     labels?: PhotoPickerLabels;
+    /**
+     * Language of the built-in labels — French by default, or the nearest
+     * `KitLocaleProvider`'s. `labels` still overrides individual strings.
+     */
+    locale?: KitLocale;
     styles?: PhotoPickerStyles;
 }
-export declare function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }: PhotoPickerProps): import("react").JSX.Element;
+export declare function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, 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,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAkDD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAoHlB"}
+{"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,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAuED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAuGlB"}

package/dist/components/picker/PhotoPicker.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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: {
@@ -32,39 +34,42 @@ const defaultStyles = {
     iconColor: "#6b7280",
 };
 const defaultLabels = {
-    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.",
-    libraryPermissionTitle: "Accès aux photos refusé",
-    libraryPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour choisir une photo.",
-    takePhoto: "Prendre une photo",
-    chooseFromLibrary: "Choisir dans la galerie",
-    cancel: "Annuler",
-    removePhoto: "Retirer la photo",
+    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.",
+        libraryPermissionTitle: "Accès aux photos refusé",
+        libraryPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour choisir 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.",
+        libraryPermissionTitle: "Photo access denied",
+        libraryPermissionMessage: "Allow access in the phone's settings to choose a photo.",
+        takePhoto: "Take a photo",
+        chooseFromLibrary: "Choose from library",
+        cancel: "Cancel",
+        removePhoto: "Remove photo",
+    },
 };
 // Photo picker (camera or library) with a preview.
-export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }) {
-    // Style fields are merged as arrays (default, then override) so a partial
-    // override only changes the properties it specifies instead of replacing
-    // the whole default style object.
+export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, locale, styles, }) {
     const mergedStyles = {
-        photoPicker: [defaultStyles.photoPicker, styles?.photoPicker],
-        photoPreview: [defaultStyles.photoPreview, styles?.photoPreview],
-        photoPlaceholder: [
-            defaultStyles.photoPlaceholder,
-            styles?.photoPlaceholder,
-        ],
-        photoPlaceholderText: [
-            defaultStyles.photoPlaceholderText,
-            styles?.photoPlaceholderText,
-        ],
-        clearLink: [defaultStyles.clearLink, styles?.clearLink],
+        ...mergeSlotStyles(defaultStyles, styles),
         iconColor: styles?.iconColor ?? defaultStyles.iconColor,
     };
-    const t = { ...defaultLabels, ...labels };
+    const t = { ...defaultLabels[useKitLocale(locale)], ...labels };
     async function pickFromCamera() {
         const permission = await ImagePicker.requestCameraPermissionsAsync();
         if (!permission.granted) {

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

@@ -1,3 +1,4 @@
+import { type KitLocale } from "../../i18n/locale.js";
 import type { PickerModalLabels, PickerModalStyles } from "./PickerModal.styles.js";
 export type { PickerModalLabels, PickerModalStyles, } from "./PickerModal.styles.js";
 export interface PickerItem {
@@ -35,7 +36,12 @@ export interface PickerModalProps {
      */
     groupOrder?: string[];
     labels?: PickerModalLabels;
+    /**
+     * Language of the built-in labels and of voice search — French by default, or the nearest
+     * `KitLocaleProvider`'s. `labels` still overrides individual strings.
+     */
+    locale?: KitLocale;
     styles?: PickerModalStyles;
 }
-export declare function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }: PickerModalProps): import("react").JSX.Element;
+export declare function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, locale, styles, }: PickerModalProps): import("react").JSX.Element;
 //# sourceMappingURL=PickerModal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAMjC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,UAAU,EAAE,CAAC;IACnE,qFAAqF;IACrF,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,EAAE,CAAC;IACxD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAID,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAwJlB"}
+{"version":3,"file":"PickerModal.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModal.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAMjC,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,MAAM,KAAK,UAAU,EAAE,CAAC;IACnE,qFAAqF;IACrF,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,EAAE,CAAC;IACxD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAID,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAsIlB"}

package/dist/components/picker/PickerModal.js

@@ -2,45 +2,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Modal, Pressable, SectionList, Text, TextInput, View, } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useKitLocale } from "../../i18n/locale.js";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
 import { defaultLabels, defaultStyles } from "./PickerModal.styles.js";
 import { PickerModalRow } from "./PickerModalRow.js";
 import { usePickerModalSections } from "./usePickerModalSections.js";
 import { VoiceSearchButton } from "./VoiceSearchButton.js";
 // Full-screen picker: search (typed or dictated), optional sections, and
 // "add" actions always visible above the results.
-export function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }) {
-    // Style fields are merged as arrays (default, then override) so a partial
-    // override only changes the properties it specifies instead of replacing
-    // the whole default style object (e.g. losing rowThumbnailPlaceholder's
-    // alignItems/justifyContent by only overriding its backgroundColor).
+export function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, locale, styles, }) {
+    // Memoized: the rows (and their thumbnails) re-render on every keystroke.
     const merged = useMemo(() => ({
-        container: [defaultStyles.container, styles?.container],
-        header: [defaultStyles.header, styles?.header],
-        title: [defaultStyles.title, styles?.title],
-        close: [defaultStyles.close, styles?.close],
-        searchRow: [defaultStyles.searchRow, styles?.searchRow],
-        search: [defaultStyles.search, styles?.search],
-        row: [defaultStyles.row, styles?.row],
-        rowThumbnail: [defaultStyles.rowThumbnail, styles?.rowThumbnail],
-        rowThumbnailPlaceholder: [
-            defaultStyles.rowThumbnailPlaceholder,
-            styles?.rowThumbnailPlaceholder,
-        ],
-        rowLabel: [defaultStyles.rowLabel, styles?.rowLabel],
-        rowSubtitle: [defaultStyles.rowSubtitle, styles?.rowSubtitle],
-        empty: [defaultStyles.empty, styles?.empty],
-        sectionHeader: [defaultStyles.sectionHeader, styles?.sectionHeader],
-        extraActions: [defaultStyles.extraActions, styles?.extraActions],
-        extraActionLabel: [
-            defaultStyles.extraActionLabel,
-            styles?.extraActionLabel,
-        ],
+        ...mergeSlotStyles(defaultStyles, styles),
         extraActionIconColor: styles?.extraActionIconColor ?? defaultStyles.extraActionIconColor,
         rowThumbnailPlaceholderIconColor: styles?.rowThumbnailPlaceholderIconColor ??
             defaultStyles.rowThumbnailPlaceholderIconColor,
         placeholderTextColor: styles?.placeholderTextColor ?? defaultStyles.placeholderTextColor,
     }), [styles]);
-    const t = useMemo(() => ({ ...defaultLabels, ...labels }), [labels]);
+    const resolvedLocale = useKitLocale(locale);
+    const t = useMemo(() => ({ ...defaultLabels[resolvedLocale], ...labels }), [resolvedLocale, labels]);
     const [query, setQuery] = useState(initialQuery ?? "");
     // Reset the search each time the modal (re-)opens — adjusted during render
     // rather than in an effect, since it only needs to happen once per
@@ -65,5 +45,5 @@ export function PickerModal({ visible, title, items, onSelect, onClose, emptyMes
         onSelect(item);
         setQuery("");
     }
-    return (_jsx(Modal, { visible: visible, animationType: "slide", onRequestClose: onClose, children: _jsxs(View, { style: merged.container, children: [_jsxs(View, { style: merged.header, children: [_jsx(Text, { style: merged.title, children: title }), _jsx(Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: t.close, children: _jsx(Text, { style: merged.close, children: t.close }) })] }), _jsxs(View, { style: merged.searchRow, children: [_jsx(TextInput, { style: merged.search, placeholder: t.searchPlaceholder, placeholderTextColor: merged.placeholderTextColor, value: query, onChangeText: setQuery, autoFocus: true, accessibilityLabel: t.searchAccessibilityLabel }), _jsx(VoiceSearchButton, { onResult: setQuery, accessibilityLabel: t.voiceSearchAccessibilityLabel })] }), _jsx(SectionList, { sections: sections, keyExtractor: (item) => String(item.id), keyboardShouldPersistTaps: "handled", stickySectionHeadersEnabled: false, ListHeaderComponent: extraActions && extraActions.length > 0 ? (_jsx(View, { style: merged.extraActions, children: extraActions.map((action) => (_jsxs(Pressable, { style: merged.row, onPress: action.onPress, accessibilityRole: "button", accessibilityLabel: action.label, children: [_jsx(Ionicons, { name: "add-circle-outline", size: 20, color: merged.extraActionIconColor }), _jsx(Text, { style: [merged.rowLabel, merged.extraActionLabel], children: action.label })] }, action.label))) })) : null, ListEmptyComponent: _jsx(Text, { style: merged.empty, children: emptyMessage ?? t.defaultEmptyMessage }), renderSectionHeader: ({ section: { title: sectionTitle }, }) => sectionTitle ? (_jsx(Text, { style: merged.sectionHeader, children: sectionTitle })) : null, renderItem: ({ item }) => (_jsx(PickerModalRow, { item: item, styles: merged, onSelect: handleSelect })) })] }) }));
+    return (_jsx(Modal, { visible: visible, animationType: "slide", onRequestClose: onClose, children: _jsxs(View, { style: merged.container, children: [_jsxs(View, { style: merged.header, children: [_jsx(Text, { style: merged.title, children: title }), _jsx(Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: t.close, children: _jsx(Text, { style: merged.close, children: t.close }) })] }), _jsxs(View, { style: merged.searchRow, children: [_jsx(TextInput, { style: merged.search, placeholder: t.searchPlaceholder, placeholderTextColor: merged.placeholderTextColor, value: query, onChangeText: setQuery, autoFocus: true, accessibilityLabel: t.searchAccessibilityLabel }), _jsx(VoiceSearchButton, { onResult: setQuery, accessibilityLabel: t.voiceSearchAccessibilityLabel, locale: resolvedLocale })] }), _jsx(SectionList, { sections: sections, keyExtractor: (item) => String(item.id), keyboardShouldPersistTaps: "handled", stickySectionHeadersEnabled: false, ListHeaderComponent: extraActions && extraActions.length > 0 ? (_jsx(View, { style: merged.extraActions, children: extraActions.map((action) => (_jsxs(Pressable, { style: merged.row, onPress: action.onPress, accessibilityRole: "button", accessibilityLabel: action.label, children: [_jsx(Ionicons, { name: "add-circle-outline", size: 20, color: merged.extraActionIconColor }), _jsx(Text, { style: [merged.rowLabel, merged.extraActionLabel], children: action.label })] }, action.label))) })) : null, ListEmptyComponent: _jsx(Text, { style: merged.empty, children: emptyMessage ?? t.defaultEmptyMessage }), renderSectionHeader: ({ section: { title: sectionTitle }, }) => sectionTitle ? (_jsx(Text, { style: merged.sectionHeader, children: sectionTitle })) : null, renderItem: ({ item }) => (_jsx(PickerModalRow, { item: item, styles: merged, onSelect: handleSelect })) })] }) }));
 }