@forthtilliath/react-native-kit 0.11.0 → 0.13.0

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/settings/AboutSettingsScreen.d.ts

@@ -1,10 +1,15 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+export interface AboutSettingsScreenSection {
+    title: string;
+    paragraphs: string[];
+}
 export interface AboutSettingsScreenStyles {
     container?: StyleProp<ViewStyle>;
     appName?: StyleProp<TextStyle>;
     version?: StyleProp<TextStyle>;
     separator?: StyleProp<ViewStyle>;
     paragraph?: StyleProp<TextStyle>;
+    sectionTitle?: StyleProp<TextStyle>;
     hint?: StyleProp<TextStyle>;
 }
 export interface AboutSettingsScreenLabels {
@@ -16,9 +21,12 @@ export interface AboutSettingsScreenProps {
     version: string;
     /** One or more paragraphs describing the app, rendered in order. */
     description: string | string[];
-    developerName: string;
+    /** Extra titled sections after the description, e.g. a medical/legal disclaimer. */
+    sections?: AboutSettingsScreenSection[];
+    /** Omit to not show a "developed by" credit line at all. */
+    developerName?: string;
     labels?: AboutSettingsScreenLabels;
     styles?: AboutSettingsScreenStyles;
 }
-export declare function AboutSettingsScreen({ appName, version, description, developerName, labels, styles, }: AboutSettingsScreenProps): import("react").JSX.Element;
+export declare function AboutSettingsScreen({ appName, version, description, sections, developerName, labels, styles, }: AboutSettingsScreenProps): import("react").JSX.Element;
 //# sourceMappingURL=AboutSettingsScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AboutSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/AboutSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AA8BD,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,wBAAwB,+BA8B1B"}
+{"version":3,"file":"AboutSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/AboutSettingsScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC/B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,0BAA0B,EAAE,CAAC;IACxC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,MAAM,CAAC,EAAE,yBAAyB,CAAC;CACpC;AAqCD,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACR,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,wBAAwB,+BA8C1B"}

package/dist/components/settings/AboutSettingsScreen.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Text, View } from "react-native";
 const defaultLabels = {
     version: (version) => `Version ${version}`,
@@ -19,23 +19,31 @@ const defaultStyles = {
         color: "#111827",
         marginBottom: 12,
     },
+    sectionTitle: {
+        fontSize: 15,
+        fontWeight: "700",
+        color: "#111827",
+        marginBottom: 8,
+    },
     hint: { fontSize: 13, color: "#6b7280" },
 };
-// App name, version, a short description, and a "developed by" credit — the
-// standard "About" section of a settings tab. `appName`/`version` are
+// App name, version, a short description, optional extra titled sections
+// (e.g. a medical/legal disclaimer), and an optional "developed by" credit —
+// the standard "About" section of a settings tab. `appName`/`version` are
 // required rather than defaulted from `expo-constants` so this stays
 // framework-agnostic; pass `Constants.expoConfig?.name`/`.version` from the
 // caller.
-export function AboutSettingsScreen({ appName, version, description, developerName, labels, styles, }) {
+export function AboutSettingsScreen({ appName, version, description, sections, developerName, labels, styles, }) {
     const merged = {
         container: [defaultStyles.container, styles?.container],
         appName: [defaultStyles.appName, styles?.appName],
         version: [defaultStyles.version, styles?.version],
         separator: [defaultStyles.separator, styles?.separator],
         paragraph: [defaultStyles.paragraph, styles?.paragraph],
+        sectionTitle: [defaultStyles.sectionTitle, styles?.sectionTitle],
         hint: [defaultStyles.hint, styles?.hint],
     };
     const t = { ...defaultLabels, ...labels };
     const paragraphs = Array.isArray(description) ? description : [description];
-    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.appName, children: appName }), _jsx(Text, { style: merged.version, children: t.version(version) }), _jsx(View, { style: merged.separator }), paragraphs.map((paragraph) => (_jsx(Text, { style: merged.paragraph, children: paragraph }, paragraph))), _jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.hint, children: t.developedBy(developerName) })] }));
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.appName, children: appName }), _jsx(Text, { style: merged.version, children: t.version(version) }), _jsx(View, { style: merged.separator }), paragraphs.map((paragraph) => (_jsx(Text, { style: merged.paragraph, children: paragraph }, paragraph))), sections?.map((section) => (_jsxs(View, { children: [_jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.sectionTitle, children: section.title }), section.paragraphs.map((paragraph) => (_jsx(Text, { style: merged.paragraph, children: paragraph }, paragraph)))] }, section.title))), developerName && (_jsxs(_Fragment, { children: [_jsx(View, { style: merged.separator }), _jsx(Text, { style: merged.hint, children: t.developedBy(developerName) })] }))] }));
 }

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

@@ -1,4 +1,5 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 export interface BackupSettingsScreenReminder {
     enabled: boolean;
     /** Set while a permission request or the toggle's own persistence is in flight. */
@@ -7,13 +8,29 @@ export interface BackupSettingsScreenReminder {
     /** How often the reminder fires, only used to word the hint (e.g. "every 7 days"). */
     intervalDays: number;
 }
+export interface BackupSettingsScreenInfo {
+    label: string;
+    value: string;
+}
+export interface BackupSettingsScreenIcons {
+    export?: keyof typeof Ionicons.glyphMap;
+    import?: keyof typeof Ionicons.glyphMap;
+}
 export interface BackupSettingsScreenStyles {
     container?: StyleProp<ViewStyle>;
+    infoBox?: StyleProp<ViewStyle>;
+    infoLabel?: StyleProp<TextStyle>;
+    infoValue?: StyleProp<TextStyle>;
+    sectionTitle?: StyleProp<TextStyle>;
     hint?: StyleProp<TextStyle>;
     row?: StyleProp<ViewStyle>;
     button?: StyleProp<ViewStyle>;
     buttonDisabled?: StyleProp<ViewStyle>;
     buttonText?: StyleProp<TextStyle>;
+    iconColor?: string;
+    /** Merged on top of `button`/`buttonText` — defaults to the same look as the export button. */
+    importButton?: StyleProp<ViewStyle>;
+    importButtonText?: StyleProp<TextStyle>;
     reminderRow?: StyleProp<ViewStyle>;
     reminderTextColumn?: StyleProp<ViewStyle>;
     reminderLabel?: StyleProp<TextStyle>;
@@ -24,6 +41,11 @@ export interface BackupSettingsScreenLabels {
     hint?: string;
     exportButton?: string;
     importButton?: string;
+    /** Only shown in `layout="sections"`. */
+    exportSectionTitle?: string;
+    exportHelpText?: string;
+    importSectionTitle?: string;
+    importHelpText?: string;
     importConfirmTitle?: string;
     importConfirmMessage?: string;
     importConfirmLabel?: string;
@@ -45,8 +67,18 @@ export interface BackupSettingsScreenProps {
     onImport: () => Promise<void>;
     /** Omit entirely to not show a reminder toggle at all. */
     reminder?: BackupSettingsScreenReminder;
+    /** An info box above everything else, e.g. "Last auto-backup: ...". Omit to not show one. */
+    info?: BackupSettingsScreenInfo;
+    /**
+     * `"compact"` (default): one shared hint, both buttons side by side.
+     * `"sections"`: each action gets its own title + help text, buttons
+     * stacked full-width.
+     */
+    layout?: "compact" | "sections";
+    /** Leading icon for each button. Omit either (or both) for a text-only button (default). */
+    icons?: BackupSettingsScreenIcons;
     labels?: BackupSettingsScreenLabels;
     styles?: BackupSettingsScreenStyles;
 }
-export declare function BackupSettingsScreen({ onExport, onImport, reminder, labels, styles, }: BackupSettingsScreenProps): import("react").JSX.Element;
+export declare function BackupSettingsScreen({ onExport, onImport, reminder, info, layout, icons, labels, styles, }: BackupSettingsScreenProps): import("react").JSX.Element;
 //# sourceMappingURL=BackupSettingsScreen.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackupSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/BackupSettingsScreen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYpE,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,sFAAsF;IACtF,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,uGAAuG;IACvG,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,4BAA4B,CAAC;IACxC,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC,MAAM,CAAC,EAAE,0BAA0B,CAAC;CACrC;AAiED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,MAAM,GACP,EAAE,yBAAyB,+BA8H3B"}
+{"version":3,"file":"BackupSettingsScreen.d.ts","sourceRoot":"","sources":["../../../src/components/settings/BackupSettingsScreen.tsx"],"names":[],"mappings":"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"}

package/dist/components/settings/BackupSettingsScreen.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ActivityIndicator, Alert, Pressable, Switch, Text, View, } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 import { confirmDestructive } from "../../utils/helpers/confirmDestructive.js";
 const defaultLabels = {
     hint: "Les données sont stockées uniquement sur cet appareil et sont perdues en cas de réinstallation ou de mise à jour incompatible. Exporte-les régulièrement pour pouvoir les restaurer.",
     exportButton: "⬆️ Exporter",
     importButton: "⬇️ Importer",
+    exportSectionTitle: "Exporter",
+    exportHelpText: "Exporte toutes tes données dans un fichier que tu peux garder précieusement ou transférer vers un autre appareil.",
+    importSectionTitle: "Importer",
+    importHelpText: "Restaure une sauvegarde exportée précédemment. Remplace entièrement les données actuelles — il n'y a pas de fusion.",
     importConfirmTitle: "Importer une sauvegarde ?",
     importConfirmMessage: "Toutes les données actuelles seront remplacées par celles du fichier choisi.",
     importConfirmLabel: "Choisir un fichier",
@@ -18,9 +23,33 @@ const defaultLabels = {
 };
 const defaultStyles = {
     container: {},
-    hint: { fontSize: 13, color: "#6b7280", marginBottom: 16 },
+    infoBox: {
+        backgroundColor: "#f9fafb",
+        borderWidth: 1,
+        borderColor: "#e5e7eb",
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 20,
+        gap: 2,
+    },
+    infoLabel: { fontSize: 12, color: "#6b7280" },
+    infoValue: { fontSize: 12, color: "#111827", fontWeight: "600" },
+    sectionTitle: {
+        fontSize: 15,
+        fontWeight: "700",
+        color: "#111827",
+        marginTop: 20,
+    },
+    hint: {
+        fontSize: 13,
+        color: "#6b7280",
+        marginTop: 6,
+        marginBottom: 14,
+        lineHeight: 18,
+    },
     row: { flexDirection: "row", gap: 10 },
     button: {
+        flexDirection: "row",
         flex: 1,
         paddingVertical: 12,
         borderRadius: 8,
@@ -28,9 +57,13 @@ const defaultStyles = {
         borderColor: "#2563eb",
         alignItems: "center",
         justifyContent: "center",
+        gap: 8,
     },
     buttonDisabled: { opacity: 0.5 },
     buttonText: { color: "#2563eb", fontWeight: "700" },
+    iconColor: "#2563eb",
+    importButton: undefined,
+    importButtonText: undefined,
     reminderRow: {
         flexDirection: "row",
         alignItems: "center",
@@ -55,16 +88,32 @@ function errorMessage(err, fallback) {
 // what gets exported/imported is entirely app-specific (its own database
 // tables), so `onExport`/`onImport` are required props, not something this
 // package could have a sensible default for.
-export function BackupSettingsScreen({ onExport, onImport, reminder, labels, styles, }) {
+export function BackupSettingsScreen({ onExport, onImport, reminder, info, layout = "compact", icons, labels, styles, }) {
     const [exporting, setExporting] = useState(false);
     const [importing, setImporting] = useState(false);
     const merged = {
         container: [defaultStyles.container, styles?.container],
+        infoBox: [defaultStyles.infoBox, styles?.infoBox],
+        infoLabel: [defaultStyles.infoLabel, styles?.infoLabel],
+        infoValue: [defaultStyles.infoValue, styles?.infoValue],
+        sectionTitle: [defaultStyles.sectionTitle, styles?.sectionTitle],
         hint: [defaultStyles.hint, styles?.hint],
         row: [defaultStyles.row, styles?.row],
         button: [defaultStyles.button, styles?.button],
         buttonDisabled: [defaultStyles.buttonDisabled, styles?.buttonDisabled],
         buttonText: [defaultStyles.buttonText, styles?.buttonText],
+        importButton: [
+            defaultStyles.button,
+            styles?.button,
+            defaultStyles.importButton,
+            styles?.importButton,
+        ],
+        importButtonText: [
+            defaultStyles.buttonText,
+            styles?.buttonText,
+            defaultStyles.importButtonText,
+            styles?.importButtonText,
+        ],
         reminderRow: [defaultStyles.reminderRow, styles?.reminderRow],
         reminderTextColumn: [
             defaultStyles.reminderTextColumn,
@@ -75,6 +124,7 @@ export function BackupSettingsScreen({ onExport, onImport, reminder, labels, sty
     };
     const t = { ...defaultLabels, ...labels };
     const activityIndicatorColor = styles?.activityIndicatorColor ?? defaultStyles.activityIndicatorColor;
+    const iconColor = styles?.iconColor ?? defaultStyles.iconColor;
     async function handleExport() {
         if (exporting)
             return;
@@ -111,9 +161,11 @@ export function BackupSettingsScreen({ onExport, onImport, reminder, labels, sty
             confirmLabel: t.importConfirmLabel,
         });
     }
-    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsxs(View, { style: merged.row, children: [_jsx(Pressable, { style: [merged.button, exporting && merged.buttonDisabled], disabled: exporting, onPress: () => {
-                            void handleExport();
-                        }, accessibilityRole: "button", accessibilityLabel: t.exportButton, children: exporting ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: merged.buttonText, children: t.exportButton })) }), _jsx(Pressable, { style: [merged.button, importing && merged.buttonDisabled], disabled: importing, onPress: handleImportPress, accessibilityRole: "button", accessibilityLabel: t.importButton, children: importing ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Text, { style: merged.buttonText, children: t.importButton })) })] }), reminder && (_jsxs(Pressable, { style: merged.reminderRow, disabled: reminder.busy, onPress: () => {
+    const exportButton = (_jsx(Pressable, { style: [merged.button, exporting && merged.buttonDisabled], disabled: exporting, onPress: () => {
+            void handleExport();
+        }, accessibilityRole: "button", accessibilityLabel: t.exportButton, children: exporting ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsxs(_Fragment, { children: [icons?.export && (_jsx(Ionicons, { name: icons.export, size: 18, color: iconColor })), _jsx(Text, { style: merged.buttonText, children: t.exportButton })] })) }));
+    const importButton = (_jsx(Pressable, { style: [merged.importButton, importing && merged.buttonDisabled], disabled: importing, onPress: handleImportPress, accessibilityRole: "button", accessibilityLabel: t.importButton, children: importing ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsxs(_Fragment, { children: [icons?.import && (_jsx(Ionicons, { name: icons.import, size: 18, color: iconColor })), _jsx(Text, { style: merged.importButtonText, children: t.importButton })] })) }));
+    return (_jsxs(View, { style: merged.container, children: [info && (_jsxs(View, { style: merged.infoBox, children: [_jsx(Text, { style: merged.infoLabel, children: info.label }), _jsx(Text, { style: merged.infoValue, children: info.value })] })), layout === "sections" ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: merged.sectionTitle, children: t.exportSectionTitle }), _jsx(Text, { style: merged.hint, children: t.exportHelpText }), exportButton, _jsx(Text, { style: merged.sectionTitle, children: t.importSectionTitle }), _jsx(Text, { style: merged.hint, children: t.importHelpText }), importButton] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: merged.hint, children: t.hint }), _jsxs(View, { style: merged.row, children: [exportButton, importButton] })] })), reminder && (_jsxs(Pressable, { style: merged.reminderRow, disabled: reminder.busy, onPress: () => {
                     reminder.onToggle(!reminder.enabled);
                 }, accessibilityRole: "switch", accessibilityState: { checked: reminder.enabled }, accessibilityLabel: t.reminderLabel, children: [_jsxs(View, { style: merged.reminderTextColumn, children: [_jsx(Text, { style: merged.reminderLabel, children: t.reminderLabel }), _jsx(Text, { style: merged.reminderHint, children: t.reminderHint?.(reminder.intervalDays) ??
                                     `Une notification tous les ${String(reminder.intervalDays)} jours pour penser à exporter.` })] }), reminder.busy ? (_jsx(ActivityIndicator, { color: activityIndicatorColor })) : (_jsx(Switch, { value: reminder.enabled, onValueChange: reminder.onToggle }))] }))] }));