@forthtilliath/react-native-kit 0.3.0 → 0.5.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.
+`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, and `react-native-gesture-handler` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, respectively).
 
 ## Usage
 
@@ -70,6 +70,93 @@ The component ships with neutral default styles and no opinion on your app's the
 
 Every field of `styles` is optional — pass only the ones you want to override; the rest fall back to the defaults (`ChangelogNotesStyles` in `ChangelogNotes.tsx`).
 
+### `<Thumbnail photoUri={...} placeholderIcon="..." />`
+
+List-row thumbnail: the photo if there is one, otherwise a placeholder icon.
+
+```tsx
+import { Thumbnail } from "@forthtilliath/react-native-kit/Thumbnail";
+
+<Thumbnail
+  photoUri={container.photoUri}
+  placeholderIcon="cube-outline"
+  size={48}
+/>;
+```
+
+### `<SwipeableRow onDelete={...} deleteLabel="...">`
+
+Swipe a list row left to reveal a delete button, on top of a tap to edit it.
+
+```tsx
+import { SwipeableRow } from "@forthtilliath/react-native-kit/SwipeableRow";
+
+<SwipeableRow
+  onDelete={() => remove(item.id)}
+  deleteLabel={`Delete ${item.name}`}
+>
+  <ItemRow item={item} />
+</SwipeableRow>;
+```
+
+### `<VoiceSearchButton onResult={...} />`
+
+Microphone button to dictate a search instead of typing it. Safe to mount more than one at a time (e.g. a name field plus a search picker on the same screen) — only the instance that started listening reacts to its result.
+
+```tsx
+import { VoiceSearchButton } from "@forthtilliath/react-native-kit/VoiceSearchButton";
+
+<VoiceSearchButton onResult={setQuery} lang="en-US" />;
+```
+
+### `<PhotoPicker photoUri={...} onChange={...} savePhoto={...} photoLabel="..." />`
+
+Photo picker (camera or library) with a preview and a remove link. `savePhoto` is injected rather than hard-coded, so where/how the picked image gets persisted is entirely up to the caller.
+
+```tsx
+import { PhotoPicker } from "@forthtilliath/react-native-kit/PhotoPicker";
+
+<PhotoPicker
+  photoUri={container.photoUri}
+  onChange={(uri) => setPhotoUri(uri)}
+  savePhoto={(sourceUri) => saveContainerPhoto(sourceUri)}
+  photoLabel="of the container"
+/>;
+```
+
+### `<PickerModal visible title items onSelect onClose />`
+
+Full-screen picker: search (typed or dictated via `VoiceSearchButton`), optional sections, and "add" actions always visible above the results.
+
+```tsx
+import {
+  PickerModal,
+  type PickerItem,
+} from "@forthtilliath/react-native-kit/PickerModal";
+
+<PickerModal
+  visible={pickerVisible}
+  title="Choose a container"
+  items={containers.map((c): PickerItem => ({
+    id: c.id,
+    label: c.name,
+    imageUri: c.photoUri,
+  }))}
+  onSelect={(item) => setContainerId(item.id)}
+  onClose={() => setPickerVisible(false)}
+  extraActions={[
+    {
+      label: "Add a new container",
+      onPress: () => router.push("/containers/new"),
+    },
+  ]}
+/>;
+```
+
+Groups results into sections via each item's `group` (e.g. food groups, ingredients vs recipes) — ignored while searching, where the best global matches are shown instead. Pass `filterItems` for custom ranking (e.g. `rankByNameMatch` from this same package's `utils/`) instead of the default case-insensitive substring match.
+
+For all 5 components above, styling and (where relevant) copy work the same way as `ChangelogNotes`: an optional `styles` prop (all fields optional, neutral defaults) and, for `PhotoPicker`/`PickerModal`, an optional `labels` prop for the built-in French copy.
+
 ### `useSubmitGuard()`
 
 Prevents a second call while a first one is still pending — e.g. a double-tap on a "Save" button before it's had time to disable, which would otherwise create duplicate submissions.
@@ -158,4 +245,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`'s package entry uses Flow syntax that `@babel/parser`'s flow plugin can't parse (`as Cast` casts aren't supported there), so Vitest can never load the real package directly. Tests alias `react-native` to a minimal stub (`src/__mocks__/react-native.tsx`) instead — see that file for details. `react-native-gesture-handler` ships the same kind of Flow syntax, and `@expo/vector-icons` has its own unrelated ESM-resolution issue under Vite/Rollup — both are stubbed the same way (`src/__mocks__/react-native-gesture-handler.tsx`, `src/__mocks__/expo-vector-icons.tsx`). `expo-speech-recognition` and `expo-image-picker` wrap native modules unavailable under Vitest regardless, so they're mocked with plain spies (`src/__mocks__/expo-speech-recognition.tsx`, `src/__mocks__/expo-image-picker.ts`).

package/dist/PhotoPicker.d.ts

@@ -0,0 +1,34 @@
+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;
+    libraryPermissionTitle?: string;
+    libraryPermissionMessage?: string;
+    takePhoto?: string;
+    chooseFromLibrary?: string;
+    cancel?: string;
+    removePhoto?: string;
+}
+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;
+    labels?: PhotoPickerLabels;
+    styles?: PhotoPickerStyles;
+}
+export declare function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }: PhotoPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=PhotoPicker.d.ts.map

package/dist/PhotoPicker.d.ts.map

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

package/dist/PhotoPicker.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Alert, Image, Pressable, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+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 = {
+    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",
+};
+// Photo picker (camera or library) with a preview.
+export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels, styles, }) {
+    const mergedStyles = { ...defaultStyles, ...styles };
+    const t = { ...defaultLabels, ...labels };
+    async function pickFromCamera() {
+        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));
+        }
+    }
+    async function pickFromLibrary() {
+        const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
+        if (!permission.granted) {
+            Alert.alert(t.libraryPermissionTitle, t.libraryPermissionMessage);
+            return;
+        }
+        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 handlePickPhoto() {
+        Alert.alert(t.photoTitle(photoLabel), undefined, [
+            {
+                text: t.takePhoto,
+                onPress: () => {
+                    void pickFromCamera();
+                },
+            },
+            {
+                text: t.chooseFromLibrary,
+                onPress: () => {
+                    void pickFromLibrary();
+                },
+            },
+            { text: t.cancel, style: "cancel" },
+        ]);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { style: mergedStyles.photoPicker, onPress: handlePickPhoto, accessibilityRole: "button", 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: () => {
+                    onChange(null);
+                }, accessibilityRole: "button", accessibilityLabel: t.removePhoto, children: _jsx(Text, { style: mergedStyles.clearLink, children: t.removePhoto }) })) : null] }));
+}

package/dist/PickerModal.d.ts

@@ -0,0 +1,68 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface PickerItem {
+    id: number;
+    label: string;
+    subtitle?: string;
+    imageUri?: string | null;
+    /**
+     * Groups results into sections (e.g. food groups, ingredients vs recipes)
+     * while browsing without searching. Ignored during an active search: the
+     * best global matches are shown instead, not the grouped-by-section list.
+     */
+    group?: string;
+}
+export interface PickerModalStyles {
+    container?: StyleProp<ViewStyle>;
+    header?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    close?: StyleProp<TextStyle>;
+    searchRow?: StyleProp<ViewStyle>;
+    search?: StyleProp<TextStyle>;
+    row?: StyleProp<ViewStyle>;
+    rowThumbnail?: StyleProp<ImageStyle>;
+    rowThumbnailPlaceholder?: StyleProp<ViewStyle>;
+    rowLabel?: StyleProp<TextStyle>;
+    rowSubtitle?: StyleProp<TextStyle>;
+    empty?: StyleProp<TextStyle>;
+    sectionHeader?: StyleProp<TextStyle>;
+    extraActions?: StyleProp<ViewStyle>;
+    extraActionLabel?: StyleProp<TextStyle>;
+    extraActionIconColor?: string;
+    rowThumbnailPlaceholderIconColor?: string;
+    placeholderTextColor?: string;
+}
+export interface PickerModalLabels {
+    close?: string;
+    searchPlaceholder?: string;
+    searchAccessibilityLabel?: string;
+    voiceSearchAccessibilityLabel?: string;
+    defaultEmptyMessage?: string;
+    otherGroupLabel?: string;
+}
+export interface PickerModalProps {
+    visible: boolean;
+    title: string;
+    items: PickerItem[];
+    onSelect: (item: PickerItem) => void;
+    onClose: () => void;
+    emptyMessage?: string;
+    /** Initial search text on open; defaults to empty. */
+    initialQuery?: string;
+    /** Custom filter (e.g. relevance ranking); defaults to a case-insensitive substring match. */
+    filterItems?: (items: PickerItem[], query: string) => PickerItem[];
+    /** "Add" actions always visible at the top, even when the search matches nothing. */
+    extraActions?: {
+        label: string;
+        onPress: () => void;
+    }[];
+    /**
+     * Explicit section order (e.g. "Recent" before others); sections default
+     * to alphabetical order by title. A group absent from this list is placed
+     * after, alphabetically.
+     */
+    groupOrder?: string[];
+    labels?: PickerModalLabels;
+    styles?: PickerModalStyles;
+}
+export declare function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }: PickerModalProps): import("react").JSX.Element;
+//# sourceMappingURL=PickerModal.d.ts.map

package/dist/PickerModal.d.ts.map

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

package/dist/PickerModal.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Image, Modal, Pressable, SectionList, Text, TextInput, View, } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { VoiceSearchButton } from "./VoiceSearchButton.js";
+const defaultStyles = {
+    container: {
+        flex: 1,
+        backgroundColor: "#ffffff",
+        paddingTop: 60,
+        paddingHorizontal: 16,
+    },
+    header: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 12,
+    },
+    title: { fontSize: 20, fontWeight: "700", color: "#111827" },
+    close: { fontSize: 16, color: "#2563eb" },
+    searchRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+        marginBottom: 8,
+    },
+    search: {
+        backgroundColor: "#f9fafb",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        fontSize: 16,
+        color: "#111827",
+        flex: 1,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 12,
+        backgroundColor: "#f9fafb",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 14,
+        marginBottom: 8,
+    },
+    rowThumbnail: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        backgroundColor: "#ffffff",
+    },
+    rowThumbnailPlaceholder: {
+        width: 40,
+        height: 40,
+        borderRadius: 8,
+        backgroundColor: "#ffffff",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    rowLabel: { fontSize: 16, fontWeight: "600", color: "#111827" },
+    rowSubtitle: { fontSize: 13, color: "#6b7280", marginTop: 2 },
+    empty: { textAlign: "center", color: "#6b7280", marginTop: 24 },
+    sectionHeader: {
+        fontSize: 13,
+        fontWeight: "700",
+        color: "#6b7280",
+        textTransform: "uppercase",
+        marginTop: 8,
+        marginBottom: 6,
+    },
+    extraActions: { marginBottom: 4 },
+    extraActionLabel: { color: "#2563eb" },
+    extraActionIconColor: "#2563eb",
+    rowThumbnailPlaceholderIconColor: "#6b7280",
+    placeholderTextColor: "#6b7280",
+};
+const defaultLabels = {
+    close: "Fermer",
+    searchPlaceholder: "Rechercher…",
+    searchAccessibilityLabel: "Rechercher",
+    voiceSearchAccessibilityLabel: "Dicter la recherche",
+    defaultEmptyMessage: "Aucun résultat.",
+    otherGroupLabel: "Autres",
+};
+// Full-screen picker: search (typed or dictated), optional sections, and
+// "add" actions always visible above the results.
+export function PickerModal({ visible, title, items, onSelect, onClose, emptyMessage, initialQuery, filterItems, extraActions, groupOrder, labels, styles, }) {
+    const merged = useMemo(() => ({ ...defaultStyles, ...styles }), [styles]);
+    const t = useMemo(() => ({ ...defaultLabels, ...labels }), [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
+    // visible-transition and must be visible in the very first render after it.
+    const [prevVisible, setPrevVisible] = useState(visible);
+    if (visible !== prevVisible) {
+        setPrevVisible(visible);
+        if (visible)
+            setQuery(initialQuery ?? "");
+    }
+    const isSearching = query.trim().length > 0;
+    const filtered = useMemo(() => {
+        if (!isSearching)
+            return items;
+        if (filterItems)
+            return filterItems(items, query);
+        const q = query.trim().toLowerCase();
+        return items.filter((item) => item.label.toLowerCase().includes(q));
+    }, [items, query, filterItems, isSearching]);
+    // Sections sorted by title: stable order, independent of the source
+    // groups' order. No sections during a search (results ranked by relevance,
+    // not by group), nor if no item has a group (uncategorized pickers,
+    // unchanged behavior).
+    const sections = useMemo(() => {
+        if (isSearching || !filtered.some((item) => item.group)) {
+            return [{ title: null, data: filtered }];
+        }
+        const byGroup = new Map();
+        for (const item of filtered) {
+            const key = item.group ?? t.otherGroupLabel;
+            const group = byGroup.get(key);
+            if (group)
+                group.push(item);
+            else
+                byGroup.set(key, [item]);
+        }
+        function sortIndex(groupTitle) {
+            const index = groupOrder?.indexOf(groupTitle) ?? -1;
+            return index === -1 ? (groupOrder?.length ?? 0) : index;
+        }
+        return [...byGroup.entries()]
+            .sort(([a], [b]) => sortIndex(a) - sortIndex(b) || a.localeCompare(b))
+            .map(([sectionTitle, data]) => ({ title: sectionTitle, data }));
+    }, [filtered, isSearching, groupOrder, t.otherGroupLabel]);
+    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 }) => (_jsxs(Pressable, { style: merged.row, onPress: () => {
+                            onSelect(item);
+                            setQuery("");
+                        }, accessibilityRole: "button", accessibilityLabel: item.subtitle ? `${item.label}, ${item.subtitle}` : item.label, children: [item.imageUri ? (_jsx(Image, { source: { uri: item.imageUri }, style: merged.rowThumbnail, accessibilityIgnoresInvertColors: true })) : item.imageUri === null ? (_jsx(View, { style: merged.rowThumbnailPlaceholder, children: _jsx(Ionicons, { name: "cube-outline", size: 18, color: merged.rowThumbnailPlaceholderIconColor }) })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: merged.rowLabel, children: item.label }), item.subtitle ? (_jsx(Text, { style: merged.rowSubtitle, children: item.subtitle })) : null] })] })) })] }) }));
+}

package/dist/SwipeableRow.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface SwipeableRowStyles {
+    deleteAction?: StyleProp<ViewStyle>;
+    deleteActionText?: StyleProp<TextStyle>;
+    deleteIconColor?: string;
+}
+export interface SwipeableRowProps {
+    children: ReactNode;
+    onDelete: () => void;
+    deleteLabel: string;
+    deleteText?: string;
+    styles?: SwipeableRowStyles;
+}
+export declare function SwipeableRow({ children, onDelete, deleteLabel, deleteText, styles, }: SwipeableRowProps): import("react").JSX.Element;
+//# sourceMappingURL=SwipeableRow.d.ts.map

package/dist/SwipeableRow.d.ts.map

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

package/dist/SwipeableRow.js

@@ -0,0 +1,27 @@
+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 { Ionicons } from "@expo/vector-icons";
+const defaultStyles = {
+    deleteAction: {
+        backgroundColor: "#dc2626",
+        justifyContent: "center",
+        alignItems: "center",
+        width: 84,
+        marginBottom: 10,
+        borderRadius: 12,
+        gap: 2,
+    },
+    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, }) {
+    const merged = { ...defaultStyles, ...styles };
+    const swipeableRef = useRef(null);
+    return (_jsx(Swipeable, { ref: swipeableRef, renderRightActions: () => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
+                swipeableRef.current?.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 }));
+}

package/dist/Thumbnail.d.ts

@@ -0,0 +1,16 @@
+import type { ImageStyle, StyleProp, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+export interface ThumbnailStyles {
+    thumbnail?: StyleProp<ImageStyle>;
+    placeholder?: StyleProp<ViewStyle>;
+    iconColor?: string;
+}
+export interface ThumbnailProps {
+    photoUri: string | null;
+    /** Icon shown in place of a photo, e.g. "cube-outline", "restaurant-outline". */
+    placeholderIcon: keyof typeof Ionicons.glyphMap;
+    size?: number;
+    styles?: ThumbnailStyles;
+}
+export declare function Thumbnail({ photoUri, placeholderIcon, size, styles, }: ThumbnailProps): import("react").JSX.Element;
+//# sourceMappingURL=Thumbnail.d.ts.map

package/dist/Thumbnail.d.ts.map

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

package/dist/Thumbnail.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+const DEFAULT_SIZE = 48;
+const defaultStyles = {
+    thumbnail: { borderRadius: 10, backgroundColor: "#f3f4f6" },
+    placeholder: {
+        borderRadius: 10,
+        backgroundColor: "#f3f4f6",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    iconColor: "#6b7280",
+};
+// List-row thumbnail (photo, or a placeholder icon when there is none).
+export function Thumbnail({ photoUri, placeholderIcon, size = DEFAULT_SIZE, styles, }) {
+    const merged = { ...defaultStyles, ...styles };
+    const dimensions = { width: size, height: size };
+    if (photoUri) {
+        return (_jsx(Image, { source: { uri: photoUri }, style: [dimensions, merged.thumbnail], accessibilityIgnoresInvertColors: true }));
+    }
+    return (_jsx(View, { style: [dimensions, merged.placeholder], children: _jsx(Ionicons, { name: placeholderIcon, size: Math.round(size * 0.46), color: merged.iconColor }) }));
+}

package/dist/VoiceSearchButton.d.ts

@@ -0,0 +1,14 @@
+export interface VoiceSearchButtonStyles {
+    iconColor?: string;
+    iconColorActive?: string;
+}
+export interface VoiceSearchButtonProps {
+    onResult: (transcript: string) => void;
+    accessibilityLabel?: string;
+    stopAccessibilityLabel?: string;
+    /** BCP 47 locale passed to the speech recognizer. */
+    lang?: string;
+    styles?: VoiceSearchButtonStyles;
+}
+export declare function VoiceSearchButton({ onResult, accessibilityLabel, stopAccessibilityLabel, lang, styles, }: VoiceSearchButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=VoiceSearchButton.d.ts.map

package/dist/VoiceSearchButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceSearchButton.d.ts","sourceRoot":"","sources":["../src/VoiceSearchButton.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,uBAAuB,CAAC;CAClC;AAaD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,kBAAmC,EACnC,sBAA4C,EAC5C,IAAc,EACd,MAAM,GACP,EAAE,sBAAsB,+BAwDxB"}

package/dist/VoiceSearchButton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Pressable } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { ExpoSpeechRecognitionModule, useSpeechRecognitionEvent, } from "expo-speech-recognition";
+const defaultStyles = {
+    iconColor: "#2563eb",
+    iconColorActive: "#dc2626",
+};
+// Microphone button to dictate a search instead of typing it. Recognition
+// events are global to the native module (not scoped to one instance): more
+// than one button can be mounted at the same time (e.g. a name field plus a
+// search picker on the same screen). `requestedRef` distinguishes the button
+// that started THIS session from other mounted instances, so only it reacts
+// to the result instead of all of them.
+export function VoiceSearchButton({ onResult, accessibilityLabel = "Voice search", stopAccessibilityLabel = "Stop voice search", lang = "en-US", styles, }) {
+    const merged = { ...defaultStyles, ...styles };
+    const [isListening, setIsListening] = useState(false);
+    const requestedRef = useRef(false);
+    useSpeechRecognitionEvent("start", () => {
+        if (requestedRef.current)
+            setIsListening(true);
+    });
+    useSpeechRecognitionEvent("end", () => {
+        if (requestedRef.current) {
+            setIsListening(false);
+            requestedRef.current = false;
+        }
+    });
+    useSpeechRecognitionEvent("error", () => {
+        if (requestedRef.current) {
+            setIsListening(false);
+            requestedRef.current = false;
+        }
+    });
+    useSpeechRecognitionEvent("result", (event) => {
+        if (!requestedRef.current)
+            return;
+        const transcript = event.results[0]?.transcript;
+        if (transcript)
+            onResult(transcript);
+    });
+    async function handlePress() {
+        if (isListening) {
+            ExpoSpeechRecognitionModule.stop();
+            return;
+        }
+        const permission = await ExpoSpeechRecognitionModule.requestPermissionsAsync();
+        if (!permission.granted)
+            return;
+        requestedRef.current = true;
+        ExpoSpeechRecognitionModule.start({ lang, interimResults: false });
+    }
+    return (_jsx(Pressable, { onPress: () => {
+            void handlePress();
+        }, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: isListening ? stopAccessibilityLabel : accessibilityLabel, children: _jsx(Ionicons, { name: isListening ? "mic" : "mic-outline", size: 20, color: isListening ? merged.iconColorActive : merged.iconColor }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -23,20 +23,28 @@
     "@forthtilliath/expo-release-updates": "0.2.0"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=15.0.0",
+    "expo-image-picker": ">=54.0.0",
+    "expo-speech-recognition": ">=1.0.0",
     "react": ">=19",
-    "react-native": ">=0.81"
+    "react-native": ">=0.81",
+    "react-native-gesture-handler": ">=2.20.0"
   },
   "devDependencies": {
+    "@expo/vector-icons": "^15.0.2",
     "@types/react": "^19.2.17",
     "@types/react-test-renderer": "^19.1.0",
     "eslint": "10.7.0",
+    "expo-image-picker": "~57.0.7",
+    "expo-speech-recognition": "^56.0.1",
     "react": "^19.2.7",
     "react-native": "0.86.0",
+    "react-native-gesture-handler": "~2.32.0",
     "react-test-renderer": "19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "@forthtilliath/eslint-config": "0.0.0",
-    "@forthtilliath/typescript-config": "0.0.0"
+    "@forthtilliath/typescript-config": "0.0.0",
+    "@forthtilliath/eslint-config": "0.0.0"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",