@forthtilliath/react-native-kit 0.12.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/index.d.ts

@@ -1,5 +1,7 @@
+export * from "./components/list/ColorDot.js";
 export * from "./components/list/SwipeableRow.js";
 export * from "./components/list/Thumbnail.js";
+export * from "./components/list/UndoToast.js";
 export * from "./components/picker/PhotoPicker.js";
 export * from "./components/picker/PickerModal.js";
 export * from "./components/picker/VoiceSearchButton.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uCAAuC,CAAC;AACtD,cAAc,oCAAoC,CAAC"}

package/dist/index.js

@@ -3,8 +3,10 @@
 // etc.) remain the recommended default for apps that want to avoid pulling in
 // peer deps they don't have installed (Metro doesn't reliably tree-shake) —
 // see the README.
+export * from "./components/list/ColorDot.js";
 export * from "./components/list/SwipeableRow.js";
 export * from "./components/list/Thumbnail.js";
+export * from "./components/list/UndoToast.js";
 export * from "./components/picker/PhotoPicker.js";
 export * from "./components/picker/PickerModal.js";
 export * from "./components/picker/VoiceSearchButton.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forthtilliath/react-native-kit",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -44,7 +44,7 @@
     "react-test-renderer": "19.2.3",
     "typescript": "^5.9.3",
     "vitest": "^4.1.10",
-    "@forthtilliath/eslint-config": "0.0.0",
+    "@forthtilliath/eslint-config": "0.1.0",
     "@forthtilliath/typescript-config": "0.0.0"
   },
   "scripts": {