@forthtilliath/react-native-kit 0.12.0 → 0.14.0

package/dist/components/index.d.ts

@@ -2,5 +2,4 @@ export * from "./list";
 export * from "./picker";
 export * from "./settings";
 export * from "./theme";
-export * from "./update";
 //# 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;AACxB,cAAc,UAAU,CAAC"}
+{"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"}

package/dist/components/index.js

@@ -2,4 +2,3 @@ export * from "./list";
 export * from "./picker";
 export * from "./settings";
 export * from "./theme";
-export * from "./update";

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

@@ -0,0 +1,57 @@
+import type { StyleProp, ViewStyle } from "react-native";
+export interface ColorDotProps {
+    /**
+     * Dot color, as any React Native color string (`"#ef4444"`, `"tomato"`,
+     * `"rgba(0,0,0,0.5)"`…). When `undefined`, the component renders `null` —
+     * so an optional field can be passed straight through:
+     * `<ColorDot color={category.color} />`.
+     */
+    color?: string;
+    /**
+     * Diameter in px. The dot is always a perfect circle
+     * (`borderRadius = size / 2`).
+     *
+     * @defaultValue 10
+     */
+    size?: number;
+    /**
+     * Extra style merged after the computed `{ width, height, borderRadius,
+     * backgroundColor }`. Use it for spacing (`marginRight`), a border, or to
+     * override the shape.
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A small round color swatch — the coloured bullet next to a category, a
+ * team, a tag, or a status.
+ *
+ * It renders **nothing** when `color` is `undefined`, which is the whole
+ * point: list rows can bind an optional color field without wrapping the dot
+ * in `{category.color && ...}` at every call site.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { ColorDot } from "@forthtilliath/react-native-kit/components/list/ColorDot";
+ *
+ * <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+ *   <ColorDot color="#ef4444" />
+ *   <Text>Urgent</Text>
+ * </View>;
+ * ```
+ *
+ * @example Optional color (renders nothing when the category has none)
+ * ```tsx
+ * <ColorDot color={category.color} size={12} />
+ * ```
+ *
+ * @example Custom size and a subtle ring
+ * ```tsx
+ * <ColorDot
+ *   color={team.color}
+ *   size={16}
+ *   style={{ borderWidth: 1, borderColor: "rgba(0,0,0,0.15)" }}
+ * />
+ * ```
+ */
+export declare function ColorDot({ color, size, style }: ColorDotProps): import("react").JSX.Element | null;
+//# sourceMappingURL=ColorDot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorDot.d.ts","sourceRoot":"","sources":["../../../src/components/list/ColorDot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAmB,EAAE,KAAK,EAAE,EAAE,aAAa,sCAe5E"}

package/dist/components/list/ColorDot.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+const DEFAULT_SIZE = 10;
+/**
+ * A small round color swatch — the coloured bullet next to a category, a
+ * team, a tag, or a status.
+ *
+ * It renders **nothing** when `color` is `undefined`, which is the whole
+ * point: list rows can bind an optional color field without wrapping the dot
+ * in `{category.color && ...}` at every call site.
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { ColorDot } from "@forthtilliath/react-native-kit/components/list/ColorDot";
+ *
+ * <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+ *   <ColorDot color="#ef4444" />
+ *   <Text>Urgent</Text>
+ * </View>;
+ * ```
+ *
+ * @example Optional color (renders nothing when the category has none)
+ * ```tsx
+ * <ColorDot color={category.color} size={12} />
+ * ```
+ *
+ * @example Custom size and a subtle ring
+ * ```tsx
+ * <ColorDot
+ *   color={team.color}
+ *   size={16}
+ *   style={{ borderWidth: 1, borderColor: "rgba(0,0,0,0.15)" }}
+ * />
+ * ```
+ */
+export function ColorDot({ color, size = DEFAULT_SIZE, style }) {
+    if (!color)
+        return null;
+    return (_jsx(View, { style: [
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: color,
+            },
+            style,
+        ] }));
+}

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

@@ -0,0 +1,100 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+/**
+ * Per-slot style overrides for {@link UndoToast}. Every field is optional and
+ * is **merged after** the matching default (as a style array), so overriding
+ * one property (say `toast.backgroundColor`) keeps the rest of the default
+ * for that slot — the positioning, padding, and shadow don't disappear.
+ */
+export interface UndoToastStyles {
+    /** The floating bar container (absolute-positioned, near the bottom). */
+    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"). */
+    action?: StyleProp<TextStyle>;
+}
+export interface UndoToastProps {
+    /**
+     * What just happened, phrased in the past tense — e.g.
+     * `"« Marie » supprimée"` or `"1 item deleted"`. Rendered on a
+     * single line and truncated with an ellipsis if too long.
+     */
+    message: string;
+    /**
+     * Label of the action button.
+     *
+     * @defaultValue "Undo"
+     */
+    actionLabel?: string;
+    /**
+     * 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
+     * responsible for hiding the toast afterwards.
+     */
+    onAction: () => void;
+    /** Per-slot style overrides — see {@link UndoToastStyles}. */
+    styles?: UndoToastStyles;
+}
+/**
+ * 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).
+ *
+ * `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
+ * the "pending undo" payload, a `setTimeout` that commits the change for
+ * good, and an exit animation. This keeps the component free of any
+ * animation-library or timer opinions.
+ *
+ * The default look is a dark floating bar, readable on both light and dark
+ * backgrounds. Re-theme it through {@link UndoToastProps.styles}.
+ *
+ * @example Minimal
+ * ```tsx
+ * import { UndoToast } from "@forthtilliath/react-native-kit/components/list/UndoToast";
+ *
+ * {recentlyDeleted && (
+ *   <UndoToast
+ *     message={`"${recentlyDeleted.name}" deleted`}
+ *     onAction={restoreLast}
+ *   />
+ * )}
+ * ```
+ *
+ * @example Full pattern — auto-commit after 5s, localized label, themed
+ * ```tsx
+ * const [pending, setPending] = useState<Employee | null>(null);
+ *
+ * function remove(employee: Employee) {
+ *   setEmployees((list) => list.filter((e) => e.id !== employee.id));
+ *   setPending(employee);
+ * }
+ *
+ * useEffect(() => {
+ *   if (!pending) return;
+ *   const id = setTimeout(() => {
+ *     db.deleteEmployee(pending.id); // point of no return
+ *     setPending(null);
+ *   }, 5000);
+ *   return () => clearTimeout(id);
+ * }, [pending]);
+ *
+ * {pending && (
+ *   <UndoToast
+ *     message={`« ${pending.name} » supprimé`}
+ *     actionLabel="Annuler"
+ *     onAction={() => {
+ *       setEmployees((list) => [...list, pending]);
+ *       setPending(null);
+ *     }}
+ *     styles={{
+ *       toast: { backgroundColor: colors.inverseSurface },
+ *       message: { color: colors.inverseOnSurface },
+ *       action: { color: colors.inversePrimary },
+ *     }}
+ *   />
+ * )}
+ * ```
+ */
+export declare function UndoToast({ message, actionLabel, onAction, styles, }: UndoToastProps): import("react").JSX.Element;
+//# sourceMappingURL=UndoToast.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/list/UndoToast.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+const defaultStyles = {
+    toast: {
+        position: "absolute",
+        left: 16,
+        right: 16,
+        bottom: 24,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        paddingVertical: 14,
+        paddingHorizontal: 16,
+        borderRadius: 8,
+        backgroundColor: "#1f1f1f",
+        elevation: 4,
+        shadowColor: "#000000",
+        shadowOpacity: 0.3,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+    },
+    message: {
+        flex: 1,
+        color: "#ffffff",
+        fontSize: 14,
+    },
+    action: {
+        color: "#7cc0ff",
+        fontWeight: "700",
+        fontSize: 14,
+    },
+};
+/**
+ * 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).
+ *
+ * `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
+ * the "pending undo" payload, a `setTimeout` that commits the change for
+ * good, and an exit animation. This keeps the component free of any
+ * animation-library or timer opinions.
+ *
+ * The default look is a dark floating bar, readable on both light and dark
+ * backgrounds. Re-theme it through {@link UndoToastProps.styles}.
+ *
+ * @example Minimal
+ * ```tsx
+ * import { UndoToast } from "@forthtilliath/react-native-kit/components/list/UndoToast";
+ *
+ * {recentlyDeleted && (
+ *   <UndoToast
+ *     message={`"${recentlyDeleted.name}" deleted`}
+ *     onAction={restoreLast}
+ *   />
+ * )}
+ * ```
+ *
+ * @example Full pattern — auto-commit after 5s, localized label, themed
+ * ```tsx
+ * const [pending, setPending] = useState<Employee | null>(null);
+ *
+ * function remove(employee: Employee) {
+ *   setEmployees((list) => list.filter((e) => e.id !== employee.id));
+ *   setPending(employee);
+ * }
+ *
+ * useEffect(() => {
+ *   if (!pending) return;
+ *   const id = setTimeout(() => {
+ *     db.deleteEmployee(pending.id); // point of no return
+ *     setPending(null);
+ *   }, 5000);
+ *   return () => clearTimeout(id);
+ * }, [pending]);
+ *
+ * {pending && (
+ *   <UndoToast
+ *     message={`« ${pending.name} » supprimé`}
+ *     actionLabel="Annuler"
+ *     onAction={() => {
+ *       setEmployees((list) => [...list, pending]);
+ *       setPending(null);
+ *     }}
+ *     styles={{
+ *       toast: { backgroundColor: colors.inverseSurface },
+ *       message: { color: colors.inverseOnSurface },
+ *       action: { color: colors.inversePrimary },
+ *     }}
+ *   />
+ * )}
+ * ```
+ */
+export function UndoToast({ message, actionLabel = "Undo", onAction, styles, }) {
+    // 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 }) })] }));
+}

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

@@ -1,3 +1,5 @@
+export * from "./ColorDot";
 export * from "./SwipeableRow";
 export * from "./Thumbnail";
+export * from "./UndoToast";
 //# 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,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC"}
+{"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"}

package/dist/components/list/index.js

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

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

@@ -1,4 +1,5 @@
-import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { PickerModalLabels, PickerModalStyles } from "./PickerModal.styles.js";
+export type { PickerModalLabels, PickerModalStyles, } from "./PickerModal.styles.js";
 export interface PickerItem {
     id: number;
     label: string;
@@ -11,34 +12,6 @@ export interface PickerItem {
      */
     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;

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":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAchF,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,iBAAiB;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,uBAAuB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;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;AAwFD,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,+BAgMlB"}
+{"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"}

package/dist/components/picker/PickerModal.js

@@ -1,90 +1,11 @@
 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 { Modal, Pressable, SectionList, Text, TextInput, View, } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { defaultLabels, defaultStyles } from "./PickerModal.styles.js";
+import { PickerModalRow } from "./PickerModalRow.js";
+import { usePickerModalSections } from "./usePickerModalSections.js";
 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, }) {
@@ -139,33 +60,10 @@ export function PickerModal({ visible, title, items, onSelect, onClose, emptyMes
         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] })] })) })] }) }));
+    const sections = usePickerModalSections(filtered, isSearching, groupOrder, t.otherGroupLabel);
+    function handleSelect(item) {
+        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 })) })] }) }));
 }

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

@@ -0,0 +1,32 @@
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from "react-native";
+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 declare const defaultStyles: Required<PickerModalStyles>;
+export declare const defaultLabels: Required<PickerModalLabels>;
+//# sourceMappingURL=PickerModal.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PickerModal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PickerModal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,uBAAuB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAC1C,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAyErD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,QAAQ,CAAC,iBAAiB,CAOrD,CAAC"}

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

@@ -0,0 +1,82 @@
+export 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",
+};
+export const defaultLabels = {
+    close: "Fermer",
+    searchPlaceholder: "Rechercher…",
+    searchAccessibilityLabel: "Rechercher",
+    voiceSearchAccessibilityLabel: "Dicter la recherche",
+    defaultEmptyMessage: "Aucun résultat.",
+    otherGroupLabel: "Autres",
+};