@forthtilliath/react-native-kit 0.15.1 → 0.17.0

package/README.md

@@ -18,7 +18,7 @@ Or, from within this monorepo, as a workspace dependency:
 }
 ```
 
-`react` and `react-native` are peer dependencies — install them in the consuming app if not already present. `@expo/vector-icons`, `expo-image-picker`, `expo-speech-recognition`, `react-native-gesture-handler` and `react-native-reanimated` are also peer dependencies, needed only if you import the components that use them (`Thumbnail`/`PickerModal`/`SwipeableRow`, `PhotoPicker`, `VoiceSearchButton`/`PickerModal`, `SwipeableRow`, `SwipeableRow`, respectively).
+`react` and `react-native` are the only required peer dependencies — install them in the consuming app if not already present. Every other peer dependency is **optional**, needed only if you import the components that use them: `@expo/vector-icons` (`Thumbnail`, `PickerModal`, `SwipeableRow`, the settings screens…), `expo-image-picker` (`PhotoPicker`), `expo-speech-recognition` (`VoiceSearchButton`/`PickerModal`), `react-native-gesture-handler` (`DragHandle`, `SwipeableRow`), `react-native-reanimated` (`SwipeableRow`) and `@forthtilliath/expo-release-updates-ui` (`UpdateSettingsScreen`). Package managers no longer install them for you, so a native module (and the Android permissions it declares, e.g. `CAMERA` for `expo-image-picker`) only ends up in your APK if you add it yourself.
 
 ## Usage
 
@@ -30,7 +30,7 @@ import { PhotoPicker } from "@forthtilliath/react-native-kit/components/picker/P
 
 This is the recommended way to import: Metro (React Native's bundler) doesn't reliably tree-shake, so pulling from a single deep-import path keeps peer dependencies you don't use (`expo-image-picker`, `expo-speech-recognition`, `react-native-gesture-handler`...) out of your bundle entirely, rather than merely unused.
 
-A root barrel is also available for convenience:
+A root barrel is also available for convenience — but since it imports every module, Metro will fail to resolve any optional peer dependency you haven't installed. Use it only if you have them all:
 
 ```ts
 import { PhotoPicker, useSubmitGuard } from "@forthtilliath/react-native-kit";
@@ -321,6 +321,45 @@ import { ThemeOptionList } from "@forthtilliath/react-native-kit/components/them
 <ThemeOptionList value={themePreference} onChange={setThemePreference} />;
 ```
 
+### `<ThemePreferenceProvider load save>` + `useThemePreference()` / `useResolvedScheme()`
+
+Holds the light/dark/system preference in a context: loaded once on mount through `load`, changed from anywhere with `useThemePreference().setPreference`, persisted through `save`. Storage-agnostic. A choice made before `load` resolves isn't overwritten by the stored value. `useResolvedScheme()` returns the scheme actually applied (`"light" | "dark"`), to pick the palette.
+
+```tsx
+import { ThemePreferenceProvider } from "@forthtilliath/react-native-kit/components/theme/ThemePreferenceProvider";
+import { useResolvedScheme } from "@forthtilliath/react-native-kit/components/theme/themePreferenceContext";
+
+<ThemePreferenceProvider
+  load={async () => (await getSettings()).theme}
+  save={async (theme) => saveSettings({ ...(await getSettings()), theme })}
+>
+  <App />
+</ThemePreferenceProvider>;
+
+const colors = Colors[useResolvedScheme()];
+```
+
+### Overlays and pickers
+
+Every component below has neutral default colors and a `styles` prop whose slots are each merged **after** their default (a partial override keeps the rest of the slot) — pass the app's palette there.
+
+| Component                                                               | Import path                         | What it is                                                                                                                                                                                                       |
+| ----------------------------------------------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<BottomSheet visible onClose bottomInset?>`                            | `components/overlay/BottomSheet`    | Modal sliding up from the bottom, content scrollable past 85 % of the screen. Pass `useSafeAreaInsets().bottom` as `bottomInset` with Android edge-to-edge.                                                      |
+| `<OptionsModal visible onClose options onSelect>`                       | `components/picker/OptionsModal`    | Centered popup listing `{ value, label }` options; a tap selects and closes.                                                                                                                                     |
+| `<SelectField label valueLabel options onSelect>`                       | `components/picker/SelectField`     | Native-looking "select": captioned button + `OptionsModal` (styled through `styles.optionsModal`).                                                                                                               |
+| `<SegmentedToggle options value onChange label?>`                       | `components/picker/SegmentedToggle` | Row of equal-width buttons, one active (Calendar / List…), announced as a radio group; each option may carry a smaller `hint` line under its label.                                                              |
+| `<QuantityStepper value onChange label min? max?>`                      | `components/picker/QuantityStepper` | Whole-number counter `min…max` (`0…999`): −/+ buttons (disabled at the bounds, `longPressStep` to jump on long press) and a numeric field; screen-reader labels in French or English (`a11yLabels` to override). |
+| `<SwitchRow label description? value onChange>`                         | `components/settings/SwitchRow`     | Settings line "label + description + switch", the whole row pressable and read as one switch; `colors` for the track and thumb.                                                                                  |
+| `<SettingsCard title icon?>` + `SettingsCardStatus`, `SettingsCardHint` | `components/settings/SettingsCard`  | Settings card: icon + title header, then free content — status lines (small icon + text, `iconColor` per state) and a quieter hint.                                                                              |
+| `<CheckboxGroup options values onChange label?>`                        | `components/picker/CheckboxGroup`   | Wrapping chips that each check and uncheck independently (extensions, tags…), each announced as a checkbox.                                                                                                      |
+| `<MonthDayGrid days selected onToggle>`                                 | `components/picker/MonthDayGrid`    | Monday-first month grid whose days toggle on and off (holidays, days off…); `YYYY-MM-DD` days.                                                                                                                   |
+| `<AddButton label onPress>`                                             | `components/list/AddButton`         | Dashed "+ Add …" button closing a list.                                                                                                                                                                          |
+| `<DragHandle onPressIn accessibilityLabel>`                             | `components/list/DragHandle`        | "⠿" grip for `react-native-draggable-flatlist` rows (gesture-handler's `Pressable`).                                                                                                                             |
+| `<ErrorFallback error retry>`                                           | `components/feedback/ErrorFallback` | Readable crash screen with a retry button, for Expo Router's `ErrorBoundary`; texts in French or English (`labels` to override).                                                                                 |
+
+`SwipeableRow` also takes `fullSwipeToDelete`: swiping past half the row deletes right away (the row slides out over a full-width delete band) instead of revealing a button — pair it with an `UndoToast`.
+
 > `useUpdateCheck`, `<UpdateAvailableBanner>` and `<ChangelogNotes>` moved to
 > [`@forthtilliath/expo-release-updates-ui`](../expo-release-updates-ui#readme) —
 > install that package alongside this one if you need them.
@@ -462,7 +501,7 @@ import { ThemeSettingsScreen } from "@forthtilliath/react-native-kit/components/
 
 #### `<UpdateSettingsScreen currentVersion checkForUpdate compareVersions downloadAndInstallApk />`
 
-The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Renders release notes via `@forthtilliath/expo-release-updates-ui`'s `ChangelogNotes`, and pairs naturally with that package's `useUpdateCheck`/`UpdateAvailableBanner` (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape.
+The full "check for update" screen: installed version, a manual check button, the available-update box (changelog + install button) or an up-to-date/error message, download progress, and — if `fetchReleaseHistory` is passed — a list of past releases. Checks automatically once on mount. Renders release notes via `@forthtilliath/expo-release-updates-ui`'s `ChangelogNotes`, and pairs naturally with that package's `useUpdateCheck`/`UpdateAvailableBanner` (same `checkForUpdate`/`compareVersions` you already pass those), but takes plain functions so it isn't tied to that package's exact shape. `@forthtilliath/expo-release-updates-ui` is an optional peer dependency: install it to use this screen.
 
 ```tsx
 import { UpdateSettingsScreen } from "@forthtilliath/react-native-kit/components/settings/UpdateSettingsScreen";
@@ -594,7 +633,68 @@ For all 7 components above, styling works the same way as `ChangelogNotes`: an o
 ### Utils (`utils/helpers/`)
 
 - `confirmDestructive` — wraps React Native's `Alert`, so it isn't framework-agnostic (see its own section above).
+- `tapFeedback()`, `selectFeedback()`, `successFeedback()`, `errorFeedback()` (`utils/helpers/haptics`) — semantic aliases over `expo-haptics` (light impact, selection tick, success / error notification). Fire-and-forget: a failed vibration never throws. Needs `expo-haptics`.
 - `mergeSlotStyles(defaultStyles, styles)` — merges a component's per-slot `styles` overrides onto its defaults as `[default, override]` style arrays, so overriding one property of a slot keeps the rest of its default. Every component of this package uses it; handy for your own components following the same `styles` convention.
+- `shareFile(uri, { mimeType, dialogTitle?, locale? })` — opens the native share sheet for a local file; throws a user-facing `Error` (French, or English with `locale: "en"`) when the device can't share. Needs `expo-sharing`.
+- `shareTextFile(filename, content, options)` — writes the text to a file in the cache (replacing any previous one), then `shareFile`s it: `.ics`, `.csv`, JSON exports… Needs `expo-file-system` and `expo-sharing`.
+- `shareViewAsImage(ref, { dialogTitle?, locale? })` (`utils/helpers/shareViewAsImage`) — captures a view as a PNG and shares it (scoreboard, schedule…). Needs `react-native-view-shot` and `expo-sharing`; the capture library is loaded on demand, so a binary built without it only fails this call, with a user-facing `Error`.
+- `isNativeModuleAvailable(name)` — whether a native module is compiled into this binary (either architecture): check it before loading a library that crashes on import without its module.
+
+### Calendar (`utils/calendar/`)
+
+Write an app's events to its **own** calendar on the phone — a local account the user can hide in one tap, never their personal calendars. Needs `expo-calendar` (and its config plugin's permission text).
+
+```ts
+import { syncDedicatedCalendar } from "@forthtilliath/react-native-kit/utils/calendar/syncDedicatedCalendar";
+import { toCalendarEventDetails } from "@forthtilliath/react-native-kit/utils/calendar/toCalendarEventDetails";
+
+const result = await syncDedicatedCalendar({
+  calendar: { name: "my-app", title: "My App", color: "#293897" },
+  from: new Date(2026, 6, 1),
+  to: new Date(2026, 7, 1),
+  events: shifts.map((s) =>
+    toCalendarEventDetails({
+      title: s.code,
+      date: s.date,
+      start: s.start,
+      end: s.end,
+    }),
+  ),
+});
+if (result.status === "denied") explainPermission();
+```
+
+- `syncDedicatedCalendar({ calendar, from, to, events })` — asks for the permission, finds the calendar by its internal `name` (creating it on first use), deletes its events in `[from, to)`, writes the new ones: a new sync replaces the previous one, no duplicates. Returns `{ status: "denied" }` or `{ status: "done", count }`.
+- `toCalendarEventDetails({ title, notes?, date, start?, end? }, timeZone?)` — converts a day + optional `HH:MM` hours to what `createEvent` expects. An `end` at or before `start` ends the next day (night shift); without hours the event lasts all day, set at UTC midnight in `"UTC"` — otherwise Android shows it a day off depending on the device's time zone.
+
+### App files (`utils/files/`)
+
+Files the app keeps for good (photos, avatars…): pickers return URIs in a cache folder the OS may empty at any time, so anything worth keeping is copied into a sub-folder of the app's documents. Needs `expo-file-system`.
+
+```ts
+import {
+  deleteFileQuietly,
+  persistFile,
+} from "@forthtilliath/react-native-kit/utils/files/appFiles";
+
+const photoUri = await persistFile(pickedUri, {
+  directory: "foods",
+  prefix: "food",
+});
+// later, when the photo is replaced or its entity deleted:
+deleteFileQuietly(oldPhotoUri);
+```
+
+- `getAppDirectory(name)` — the persistent sub-folder `name` of documents, created on first use.
+- `persistFile(sourceUri, { directory, prefix })` — copies a temporary file there as `<prefix>-<timestamp>.<ext>` and returns the copy's URI.
+- `getFileExtension(uri, fallback = "jpg")` — extension of a URI, query string ignored.
+- `fileExists(uri)` — `false` for a malformed URI instead of throwing.
+- `deleteFileQuietly(uri)` — best-effort deletion: an absent file, `null` or a failure never throws.
+- `pruneAppDirectory(name, keep)` — deletes the folder's files whose URI isn't in `keep` (orphaned photos after an edit or an import); returns how many were deleted.
+- `readFileBase64(uri)` / `writeBase64File(base64, { directory, prefix, extension? })` — embed a photo in a JSON backup, then recreate it on restore (random file names: a restore writes many files in the same millisecond). `readFileBase64` returns `null` for a file already gone.
+- `saveImageThumbnail(sourceUri, { directory, prefix, width?, quality? })` (`utils/files/imageThumbnail`) — shrinks a picked photo to a JPEG thumbnail (256 px wide, quality 0.8 by default) kept in the folder: small enough to embed in backups. Needs `expo-image-manipulator`.
+
+`expo-sharing`, `expo-file-system`, `expo-calendar`, `expo-haptics`, `expo-image-manipulator` and `react-native-view-shot` are **optional** peer dependencies: only install those your app uses, and deep-import these helpers.
 
 The framework-agnostic helpers that used to live here (`getPeriodStartMs`, `getMostRecentIds`, `nextInCycle`, `normalizeForSearch`, `rankByNameMatch`, `escapeCsvField`, `formatCsvNumber`, `escapeHtml`) moved to [`@forthtilliath/ts-kit`](../ts-kit#readme) — no React Native dependency on them, so they're usable from Node/web too. They're still re-exported from this package's root barrel for convenience:
 

package/dist/components/feedback/ErrorFallback.d.ts

@@ -0,0 +1,63 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type KitLocale } from "../../i18n/locale.js";
+/** Per-slot style overrides for {@link ErrorFallback}, each merged after its default. */
+export interface ErrorFallbackStyles {
+    /** The full-screen, centered container (its background included). */
+    container?: StyleProp<ViewStyle>;
+    emoji?: StyleProp<TextStyle>;
+    title?: StyleProp<TextStyle>;
+    hint?: StyleProp<TextStyle>;
+    /** The retry button. */
+    button?: StyleProp<ViewStyle>;
+    buttonText?: StyleProp<TextStyle>;
+    /** The scrollable box showing the error message. */
+    detailsBox?: StyleProp<ViewStyle>;
+    /** The details box's content container (its padding). */
+    detailsContent?: StyleProp<ViewStyle>;
+    detailsText?: StyleProp<TextStyle>;
+}
+/** The fallback's texts; each defaults to the locale's. */
+export interface ErrorFallbackLabels {
+    emoji: string;
+    title: string;
+    hint: string;
+    retry: string;
+}
+export interface ErrorFallbackProps {
+    error: Error;
+    /** Re-renders the failed tree — Expo Router's `retry`, or a boundary's reset. */
+    retry: () => void | Promise<void>;
+    /** Overrides some or all of the texts — see {@link ErrorFallbackLabels}. */
+    labels?: Partial<ErrorFallbackLabels>;
+    /**
+     * Language of the default texts — French by default, or the nearest
+     * `KitLocaleProvider`'s.
+     */
+    locale?: KitLocale;
+    /**
+     * Show `error.message` in a small box under the button.
+     *
+     * @defaultValue true
+     */
+    showDetails?: boolean;
+    /** Per-slot style overrides — see {@link ErrorFallbackStyles}. */
+    styles?: ErrorFallbackStyles;
+}
+/**
+ * A readable crash screen with a retry button, to replace Expo Router's
+ * default error screen (black background, raw message, meant for
+ * development). Export it as a route's `ErrorBoundary`, or render it from any
+ * error boundary.
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx
+ * import { ErrorFallback } from "@forthtilliath/react-native-kit/components/feedback/ErrorFallback";
+ *
+ * export function ErrorBoundary(props: ErrorBoundaryProps) {
+ *   return <ErrorFallback {...props} />;
+ * }
+ * ```
+ */
+export declare function ErrorFallback({ error, retry, labels, locale, showDetails, styles, }: ErrorFallbackProps): import("react").JSX.Element;
+//# sourceMappingURL=ErrorFallback.d.ts.map

package/dist/components/feedback/ErrorFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ErrorFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,yFAAyF;AACzF,MAAM,WAAW,mBAAmB;IAClC,qEAAqE;IACrE,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,wBAAwB;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,oDAAoD;IACpD,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,yDAAyD;IACzD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACpC;AAED,2DAA2D;AAC3D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,iFAAiF;IACjF,KAAK,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClC,4EAA4E;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACtC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AA+DD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,MAAM,GACP,EAAE,kBAAkB,+BA4BpB"}

package/dist/components/feedback/ErrorFallback.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useKitLocale } from "../../i18n/locale.js";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultLabels = {
+    fr: {
+        emoji: "😕",
+        title: "Une erreur est survenue",
+        hint: "Désolé, quelque chose s'est mal passé. Réessaie ci-dessous.",
+        retry: "Réessayer",
+    },
+    en: {
+        emoji: "😕",
+        title: "Something went wrong",
+        hint: "Sorry, something broke. Try again below.",
+        retry: "Try again",
+    },
+};
+const defaultStyles = {
+    container: {
+        flex: 1,
+        backgroundColor: "#ffffff",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+    },
+    emoji: { fontSize: 40, marginBottom: 12 },
+    title: {
+        fontSize: 20,
+        fontWeight: "700",
+        marginBottom: 8,
+        textAlign: "center",
+        color: "#111111",
+    },
+    hint: {
+        fontSize: 14,
+        opacity: 0.7,
+        textAlign: "center",
+        marginBottom: 20,
+        color: "#111111",
+    },
+    button: {
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+        borderRadius: 8,
+        backgroundColor: "#2563eb",
+        marginBottom: 24,
+    },
+    buttonText: { color: "#ffffff", fontWeight: "700" },
+    detailsBox: {
+        maxHeight: 120,
+        width: "100%",
+        borderRadius: 8,
+        backgroundColor: "rgba(128,128,128,0.08)",
+    },
+    detailsContent: { padding: 12 },
+    detailsText: {
+        fontSize: 12,
+        opacity: 0.6,
+        fontFamily: "monospace",
+        color: "#111111",
+    },
+};
+/**
+ * A readable crash screen with a retry button, to replace Expo Router's
+ * default error screen (black background, raw message, meant for
+ * development). Export it as a route's `ErrorBoundary`, or render it from any
+ * error boundary.
+ *
+ * @example
+ * ```tsx
+ * // app/_layout.tsx
+ * import { ErrorFallback } from "@forthtilliath/react-native-kit/components/feedback/ErrorFallback";
+ *
+ * export function ErrorBoundary(props: ErrorBoundaryProps) {
+ *   return <ErrorFallback {...props} />;
+ * }
+ * ```
+ */
+export function ErrorFallback({ error, retry, labels, locale, showDetails = true, styles, }) {
+    const texts = { ...defaultLabels[useKitLocale(locale)], ...labels };
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.emoji, children: texts.emoji }), _jsx(Text, { style: merged.title, children: texts.title }), _jsx(Text, { style: merged.hint, children: texts.hint }), _jsx(Pressable, { style: merged.button, accessibilityRole: "button", onPress: () => {
+                    void retry();
+                }, children: _jsx(Text, { style: merged.buttonText, children: texts.retry }) }), showDetails && (_jsx(ScrollView, { style: merged.detailsBox, contentContainerStyle: merged.detailsContent, children: _jsx(Text, { style: merged.detailsText, children: error.message }) }))] }));
+}

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

@@ -0,0 +1,2 @@
+export * from "./ErrorFallback.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/feedback/index.js

@@ -0,0 +1 @@
+export * from "./ErrorFallback.js";

package/dist/components/index.d.ts

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

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,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}

package/dist/components/index.js

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

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

@@ -0,0 +1,27 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+/** Per-slot style overrides for {@link AddButton}, each merged after its default. */
+export interface AddButtonStyles {
+    /** The dashed, full-width button. */
+    button?: StyleProp<ViewStyle>;
+    /** Its label. */
+    text?: StyleProp<TextStyle>;
+}
+export interface AddButtonProps {
+    /** Usually starts with "+", e.g. "+ Ajouter un groupe". */
+    label: string;
+    onPress: () => void;
+    /** Per-slot style overrides — see {@link AddButtonStyles}. */
+    styles?: AddButtonStyles;
+}
+/**
+ * The dashed "+ Add …" button closing a list, to append a row to it.
+ *
+ * @example
+ * ```tsx
+ * import { AddButton } from "@forthtilliath/react-native-kit/components/list/AddButton";
+ *
+ * <AddButton label="+ Ajouter un groupe" onPress={addGroup} />
+ * ```
+ */
+export declare function AddButton({ label, onPress, styles }: AddButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=AddButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AddButton.d.ts","sourceRoot":"","sources":["../../../src/components/list/AddButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,qFAAqF;AACrF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,cAAc;IAC7B,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAeD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,+BAYnE"}

package/dist/components/list/AddButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable, Text } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    button: {
+        marginTop: 4,
+        padding: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderStyle: "dashed",
+        borderColor: "#d4d4d4",
+        alignItems: "center",
+    },
+    text: { fontWeight: "600", color: "#111111" },
+};
+/**
+ * The dashed "+ Add …" button closing a list, to append a row to it.
+ *
+ * @example
+ * ```tsx
+ * import { AddButton } from "@forthtilliath/react-native-kit/components/list/AddButton";
+ *
+ * <AddButton label="+ Ajouter un groupe" onPress={addGroup} />
+ * ```
+ */
+export function AddButton({ label, onPress, styles }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsx(Pressable, { style: merged.button, onPress: onPress, accessibilityRole: "button", children: _jsx(Text, { style: merged.text, children: label }) }));
+}

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

@@ -0,0 +1,35 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+/** Per-slot style overrides for {@link DragHandle}, each merged after its default. */
+export interface DragHandleStyles {
+    /** The touch target around the glyph. */
+    handle?: StyleProp<ViewStyle>;
+    /** The "⠿" glyph. */
+    text?: StyleProp<TextStyle>;
+}
+export interface DragHandleProps {
+    /** Start the drag here — typically `drag` from a `DraggableFlatList` row. */
+    onPressIn: () => void;
+    disabled?: boolean;
+    /** E.g. `"Déplacer « Marie »"`. */
+    accessibilityLabel: string;
+    /** Per-slot style overrides — see {@link DragHandleStyles}. */
+    styles?: DragHandleStyles;
+}
+/**
+ * The "⠿" grip that reorders a row of a `react-native-draggable-flatlist`
+ * list: pressing it starts the drag, the rest of the row stays tappable.
+ *
+ * @example
+ * ```tsx
+ * import { DragHandle } from "@forthtilliath/react-native-kit/components/list/DragHandle";
+ *
+ * renderItem={({ item, drag, isActive }) => (
+ *   <Row>
+ *     <DragHandle onPressIn={drag} disabled={isActive} accessibilityLabel={`Déplacer ${item.name}`} />
+ *     <Text>{item.name}</Text>
+ *   </Row>
+ * )}
+ * ```
+ */
+export declare function DragHandle({ onPressIn, disabled, accessibilityLabel, styles, }: DragHandleProps): import("react").JSX.Element;
+//# sourceMappingURL=DragHandle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../../../src/components/list/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AASpE,sFAAsF;AACtF,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,qBAAqB;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,eAAe;IAC9B,6EAA6E;IAC7E,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAOD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,MAAM,GACP,EAAE,eAAe,+BAejB"}

package/dist/components/list/DragHandle.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "react-native";
+// Gesture-handler's Pressable, not react-native's: the same gesture system as
+// the pan handler of react-native-draggable-flatlist. With RN's Pressable the
+// two fight over the responder and a drag sometimes starts "empty".
+import { Pressable } from "react-native-gesture-handler";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    handle: { paddingHorizontal: 4, paddingVertical: 4 },
+    text: { fontSize: 20, opacity: 0.5, color: "#111111" },
+};
+/**
+ * The "⠿" grip that reorders a row of a `react-native-draggable-flatlist`
+ * list: pressing it starts the drag, the rest of the row stays tappable.
+ *
+ * @example
+ * ```tsx
+ * import { DragHandle } from "@forthtilliath/react-native-kit/components/list/DragHandle";
+ *
+ * renderItem={({ item, drag, isActive }) => (
+ *   <Row>
+ *     <DragHandle onPressIn={drag} disabled={isActive} accessibilityLabel={`Déplacer ${item.name}`} />
+ *     <Text>{item.name}</Text>
+ *   </Row>
+ * )}
+ * ```
+ */
+export function DragHandle({ onPressIn, disabled, accessibilityLabel, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsx(Pressable, { onPressIn: onPressIn, disabled: disabled, hitSlop: 10, style: merged.handle, accessibilityRole: "button", accessibilityLabel: accessibilityLabel, children: _jsx(Text, { style: merged.text, children: "\u283F" }) }));
+}

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

@@ -2,8 +2,11 @@ import type { ReactNode } from "react";
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { type KitLocale } from "../../i18n/locale.js";
 export interface SwipeableRowStyles {
+    /** The swipeable's outer container (clips the row while it slides). */
+    container?: StyleProp<ViewStyle>;
     deleteAction?: StyleProp<ViewStyle>;
     deleteActionText?: StyleProp<TextStyle>;
+    /** Ignored with `fullSwipeToDelete`, which shows no icon. */
     deleteIconColor?: string;
 }
 export interface SwipeableRowProps {
@@ -11,8 +14,17 @@ export interface SwipeableRowProps {
     onDelete: () => void;
     /** Accessibility label of the delete button, e.g. `"Delete « Marie »"`. */
     deleteLabel: string;
-    /** Text under the trash icon. Defaults to "Supprimer" (`"Delete"` with `locale="en"`). */
+    /** Text of the delete action. Defaults to "Supprimer" (`"Delete"` with `locale="en"`). */
     deleteText?: string;
+    /**
+     * Swiping past half the row's width and letting go deletes right away —
+     * the row slides out, no button to tap. A full-width delete band shows
+     * under the row while swiping. Pair it with an `UndoToast`, as nothing
+     * asks for confirmation.
+     *
+     * By default (`false`), the swipe reveals a trash button to tap.
+     */
+    fullSwipeToDelete?: boolean;
     /**
      * Language of the default `deleteText` — French by default, or the
      * nearest `KitLocaleProvider`'s.
@@ -21,9 +33,11 @@ export interface SwipeableRowProps {
     styles?: SwipeableRowStyles;
 }
 /**
- * Swipe a list row left to reveal a delete button, on top of a tap to edit it.
- * Built on react-native-gesture-handler's `ReanimatedSwipeable`, so the app
+ * Swipe a list row left to delete it: either reveal a delete button, on top
+ * of a tap to edit the row, or — with `fullSwipeToDelete` — delete as soon
+ * as the swipe passes half the row. Built on react-native-gesture-handler's
+ * `ReanimatedSwipeable`, so the gesture runs on the UI thread and the app
  * needs `react-native-reanimated` (a peer dependency).
  */
-export declare function SwipeableRow({ children, onDelete, deleteLabel, deleteText, locale, styles, }: SwipeableRowProps): import("react").JSX.Element;
+export declare function SwipeableRow({ children, onDelete, deleteLabel, deleteText, fullSwipeToDelete, locale, styles, }: SwipeableRowProps): import("react").JSX.Element;
 //# sourceMappingURL=SwipeableRow.d.ts.map

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

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

package/dist/components/list/SwipeableRow.js

@@ -9,6 +9,7 @@ const defaultDeleteTexts = {
     en: "Delete",
 };
 const defaultStyles = {
+    container: {},
     deleteAction: {
         backgroundColor: "#dc2626",
         justifyContent: "center",
@@ -18,22 +19,48 @@ const defaultStyles = {
         borderRadius: 12,
         gap: 2,
     },
-    deleteActionText: { color: "#ffffff", fontSize: 11, fontWeight: "600" },
-    deleteIconColor: "#ffffff",
+    deleteActionText: {
+        color: "#ffffff",
+        fontSize: 11,
+        fontWeight: "600",
+    },
+};
+const fullSwipeDefaultStyles = {
+    container: {},
+    // Full width: the swipeable opens by the action's width, so the row slides
+    // all the way out, and its default threshold (half that width) is half the row.
+    deleteAction: {
+        flex: 1,
+        backgroundColor: "#dc2626",
+        justifyContent: "center",
+        alignItems: "flex-end",
+        paddingEnd: 16,
+    },
+    deleteActionText: {
+        color: "#ffffff",
+        fontSize: 15,
+        fontWeight: "700",
+    },
 };
+const DEFAULT_ICON_COLOR = "#ffffff";
 /**
- * Swipe a list row left to reveal a delete button, on top of a tap to edit it.
- * Built on react-native-gesture-handler's `ReanimatedSwipeable`, so the app
+ * Swipe a list row left to delete it: either reveal a delete button, on top
+ * of a tap to edit the row, or — with `fullSwipeToDelete` — delete as soon
+ * as the swipe passes half the row. Built on react-native-gesture-handler's
+ * `ReanimatedSwipeable`, so the gesture runs on the UI thread and the app
  * needs `react-native-reanimated` (a peer dependency).
  */
-export function SwipeableRow({ children, onDelete, deleteLabel, deleteText, locale, styles, }) {
+export function SwipeableRow({ children, onDelete, deleteLabel, deleteText, fullSwipeToDelete = false, locale, styles, }) {
     const resolvedLocale = useKitLocale(locale);
-    const merged = {
-        ...mergeSlotStyles(defaultStyles, styles),
-        deleteIconColor: styles?.deleteIconColor ?? defaultStyles.deleteIconColor,
-    };
-    return (_jsx(ReanimatedSwipeable, { renderRightActions: (_progress, _translation, swipeable) => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
-                swipeable.close();
-                onDelete();
-            }, accessibilityRole: "button", accessibilityLabel: deleteLabel, children: [_jsx(Ionicons, { name: "trash-outline", size: 22, color: merged.deleteIconColor }), _jsx(Text, { style: merged.deleteActionText, children: deleteText ?? defaultDeleteTexts[resolvedLocale] })] })), children: children }));
+    const merged = mergeSlotStyles(fullSwipeToDelete ? fullSwipeDefaultStyles : defaultStyles, styles);
+    return (_jsx(ReanimatedSwipeable, { containerStyle: merged.container, overshootRight: !fullSwipeToDelete, onSwipeableOpen: fullSwipeToDelete ? onDelete : undefined, renderRightActions: (_progress, _translation, swipeable) => (_jsxs(Pressable, { style: merged.deleteAction, onPress: () => {
+                if (fullSwipeToDelete) {
+                    // Slide the row out like a swipe would; onSwipeableOpen deletes.
+                    swipeable.openRight();
+                }
+                else {
+                    swipeable.close();
+                    onDelete();
+                }
+            }, accessibilityRole: "button", accessibilityLabel: deleteLabel, children: [!fullSwipeToDelete && (_jsx(Ionicons, { name: "trash-outline", size: 22, color: styles?.deleteIconColor ?? DEFAULT_ICON_COLOR })), _jsx(Text, { style: merged.deleteActionText, children: deleteText ?? defaultDeleteTexts[resolvedLocale] })] })), children: children }));
 }

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

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

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,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/list/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}

package/dist/components/list/index.js

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