@forthtilliath/react-native-kit 0.15.1 → 0.17.0

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

@@ -0,0 +1,52 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+/** Per-slot style overrides for {@link SegmentedToggle}, each merged after its default. */
+export interface SegmentedToggleStyles {
+    /** The row holding the buttons. */
+    row?: StyleProp<ViewStyle>;
+    /** Every button (equal widths through `flex: 1`). */
+    button?: StyleProp<ViewStyle>;
+    /** Added on top of `button` for the active one. */
+    buttonActive?: StyleProp<ViewStyle>;
+    /** Every button's label. */
+    text?: StyleProp<TextStyle>;
+    /** Added on top of `text` for the active one. */
+    textActive?: StyleProp<TextStyle>;
+    /** Every option's `hint` line. */
+    hint?: StyleProp<TextStyle>;
+    /** Added on top of `hint` for the active one. */
+    hintActive?: StyleProp<TextStyle>;
+}
+export interface SegmentedToggleOption<T extends string> {
+    value: T;
+    label: string;
+    /** A smaller line under the label (e.g. "2 × 2 joueurs"). */
+    hint?: string;
+}
+export interface SegmentedToggleProps<T extends string> {
+    options: readonly SegmentedToggleOption<T>[];
+    /** The active option's value. */
+    value: T;
+    onChange: (value: T) => void;
+    /** What the choice is about, read by screen readers on the group. */
+    label?: string;
+    /** Per-slot style overrides — see {@link SegmentedToggleStyles}. */
+    styles?: SegmentedToggleStyles;
+}
+/**
+ * A row of equal-width buttons of which exactly one is active — a view
+ * switch such as Calendar / List. Announced as a radio group.
+ *
+ * @example
+ * ```tsx
+ * import { SegmentedToggle } from "@forthtilliath/react-native-kit/components/picker/SegmentedToggle";
+ *
+ * <SegmentedToggle
+ *   label="Affichage"
+ *   options={[{ value: "calendar", label: "Calendrier" }, { value: "list", label: "Liste" }]}
+ *   value={view}
+ *   onChange={setView}
+ * />
+ * ```
+ */
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, label, styles, }: SegmentedToggleProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=SegmentedToggle.d.ts.map

package/dist/components/picker/SegmentedToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedToggle.d.ts","sourceRoot":"","sources":["../../../src/components/picker/SegmentedToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,2FAA2F;AAC3F,MAAM,WAAW,qBAAqB;IACpC,mCAAmC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,mDAAmD;IACnD,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM;IACpD,OAAO,EAAE,SAAS,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,iCAAiC;IACjC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAuBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,EAChD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BAqCzB"}

package/dist/components/picker/SegmentedToggle.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    row: { flexDirection: "row", gap: 8, marginBottom: 12 },
+    button: {
+        flex: 1,
+        paddingVertical: 8,
+        paddingHorizontal: 14,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "#d4d4d4",
+        alignItems: "center",
+    },
+    buttonActive: {
+        backgroundColor: "#2563eb",
+        borderColor: "#2563eb",
+    },
+    text: { fontWeight: "600", color: "#111111" },
+    textActive: { color: "#ffffff" },
+    hint: { fontSize: 12, marginTop: 2, color: "#6b7280" },
+    hintActive: { color: "#dbeafe" },
+};
+/**
+ * A row of equal-width buttons of which exactly one is active — a view
+ * switch such as Calendar / List. Announced as a radio group.
+ *
+ * @example
+ * ```tsx
+ * import { SegmentedToggle } from "@forthtilliath/react-native-kit/components/picker/SegmentedToggle";
+ *
+ * <SegmentedToggle
+ *   label="Affichage"
+ *   options={[{ value: "calendar", label: "Calendrier" }, { value: "list", label: "Liste" }]}
+ *   value={view}
+ *   onChange={setView}
+ * />
+ * ```
+ */
+export function SegmentedToggle({ options, value, onChange, label, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsx(View, { style: merged.row, accessibilityRole: "radiogroup", accessibilityLabel: label, children: options.map((option) => {
+            const active = option.value === value;
+            return (_jsxs(Pressable, { style: [merged.button, active && merged.buttonActive], accessibilityRole: "radio", accessibilityState: { selected: active, checked: active }, accessibilityLabel: option.hint ? `${option.label}, ${option.hint}` : option.label, onPress: () => {
+                    onChange(option.value);
+                }, children: [_jsx(Text, { style: [merged.text, active && merged.textActive], children: option.label }), option.hint !== undefined && (_jsx(Text, { style: [merged.hint, active && merged.hintActive], children: option.hint }))] }, option.value));
+        }) }));
+}

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

@@ -0,0 +1,45 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type OptionsModalStyles, type SelectOption } from "./OptionsModal.js";
+/** Per-slot style overrides for {@link SelectField}, each merged after its default. */
+export interface SelectFieldStyles {
+    /** The outer wrapper (`flex: 1`, so two fields share a row evenly). */
+    container?: StyleProp<ViewStyle>;
+    /** The small caption above the button. */
+    label?: StyleProp<TextStyle>;
+    /** The bordered button showing the current value. */
+    button?: StyleProp<ViewStyle>;
+    /** The current value's text. */
+    buttonText?: StyleProp<TextStyle>;
+    /** The "▾" on the right. */
+    chevron?: StyleProp<TextStyle>;
+    /** Forwarded to the {@link OptionsModal} opened by the button. */
+    optionsModal?: OptionsModalStyles;
+}
+export interface SelectFieldProps<T extends string | number> {
+    /** Caption above the button, e.g. "Mois". */
+    label: string;
+    /** Text of the current value, shown in the button. */
+    valueLabel: string;
+    options: readonly SelectOption<T>[];
+    onSelect: (value: T) => void;
+    /** Per-slot style overrides — see {@link SelectFieldStyles}. */
+    styles?: SelectFieldStyles;
+}
+/**
+ * A native-looking "select": a captioned button showing the current value,
+ * opening an {@link OptionsModal} to pick another one.
+ *
+ * @example
+ * ```tsx
+ * import { SelectField } from "@forthtilliath/react-native-kit/components/picker/SelectField";
+ *
+ * <SelectField
+ *   label="Mois"
+ *   valueLabel={MONTH_NAMES[month - 1]}
+ *   options={MONTH_NAMES.map((name, i) => ({ value: i + 1, label: name }))}
+ *   onSelect={setMonth}
+ * />
+ * ```
+ */
+export declare function SelectField<T extends string | number>({ label, valueLabel, options, onSelect, styles, }: SelectFieldProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=SelectField.d.ts.map

package/dist/components/picker/SelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/picker/SelectField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAC;AAE3B,uFAAuF;AACvF,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,gCAAgC;IAChC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,kEAAkE;IAClE,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACzD,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,gEAAgE;IAChE,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AA2BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACrD,KAAK,EACL,UAAU,EACV,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA6BrB"}

package/dist/components/picker/SelectField.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+import { OptionsModal, } from "./OptionsModal.js";
+const defaultStyles = {
+    container: { flex: 1 },
+    label: {
+        fontSize: 12,
+        opacity: 0.7,
+        marginBottom: 4,
+        color: "#111111",
+    },
+    button: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderWidth: 1,
+        borderColor: "#d4d4d4",
+        borderRadius: 8,
+        padding: 10,
+    },
+    buttonText: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#111111",
+    },
+    chevron: { opacity: 0.5, color: "#111111" },
+};
+/**
+ * A native-looking "select": a captioned button showing the current value,
+ * opening an {@link OptionsModal} to pick another one.
+ *
+ * @example
+ * ```tsx
+ * import { SelectField } from "@forthtilliath/react-native-kit/components/picker/SelectField";
+ *
+ * <SelectField
+ *   label="Mois"
+ *   valueLabel={MONTH_NAMES[month - 1]}
+ *   options={MONTH_NAMES.map((name, i) => ({ value: i + 1, label: name }))}
+ *   onSelect={setMonth}
+ * />
+ * ```
+ */
+export function SelectField({ label, valueLabel, options, onSelect, styles, }) {
+    const [open, setOpen] = useState(false);
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsxs(View, { style: merged.container, children: [_jsx(Text, { style: merged.label, children: label }), _jsxs(Pressable, { style: merged.button, accessibilityRole: "button", accessibilityLabel: `${label} : ${valueLabel}`, onPress: () => {
+                    setOpen(true);
+                }, children: [_jsx(Text, { style: merged.buttonText, children: valueLabel }), _jsx(Text, { style: merged.chevron, children: "\u25BE" })] }), _jsx(OptionsModal, { visible: open, onClose: () => {
+                    setOpen(false);
+                }, options: options, onSelect: onSelect, styles: styles?.optionsModal })] }));
+}

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

@@ -1,4 +1,10 @@
+export * from "./CheckboxGroup.js";
+export * from "./MonthDayGrid.js";
+export * from "./OptionsModal.js";
 export * from "./PhotoPicker.js";
 export * from "./PickerModal.js";
+export * from "./QuantityStepper.js";
+export * from "./SegmentedToggle.js";
+export * from "./SelectField.js";
 export * from "./VoiceSearchButton.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}

package/dist/components/picker/index.js

@@ -1,3 +1,9 @@
+export * from "./CheckboxGroup.js";
+export * from "./MonthDayGrid.js";
+export * from "./OptionsModal.js";
 export * from "./PhotoPicker.js";
 export * from "./PickerModal.js";
+export * from "./QuantityStepper.js";
+export * from "./SegmentedToggle.js";
+export * from "./SelectField.js";
 export * from "./VoiceSearchButton.js";

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from "react";
+import type { ColorValue, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+type IconName = keyof typeof Ionicons.glyphMap;
+/** Per-slot style overrides for {@link SettingsCard}, each merged after its default. */
+export interface SettingsCardStyles {
+    card?: StyleProp<ViewStyle>;
+    /** The row holding the icon and title. */
+    header?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+}
+export interface SettingsCardProps {
+    title: string;
+    /** `Ionicons` glyph before the title. */
+    icon?: IconName;
+    /** @defaultValue "#2563eb" */
+    iconColor?: ColorValue;
+    /** Free content: `SettingsCardStatus` lines, `SettingsCardHint`, buttons… */
+    children?: ReactNode;
+    styles?: SettingsCardStyles;
+}
+/**
+ * A settings card: a header (icon + title), then free content — typically
+ * status lines, a hint and action buttons (backup, sync, account…).
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   SettingsCard,
+ *   SettingsCardHint,
+ *   SettingsCardStatus,
+ * } from "@forthtilliath/react-native-kit/components/settings/SettingsCard";
+ *
+ * <SettingsCard icon="cloud-outline" title="Google Drive">
+ *   <SettingsCardStatus icon="person-circle-outline">{email}</SettingsCardStatus>
+ *   <SettingsCardStatus icon="time-outline">Dernier envoi : hier à 21:42</SettingsCardStatus>
+ *   <SettingsCardHint>Copie privée, invisible dans ton Drive.</SettingsCardHint>
+ * </SettingsCard>
+ * ```
+ */
+export declare function SettingsCard({ title, icon, iconColor, children, styles, }: SettingsCardProps): import("react").JSX.Element;
+/** Per-slot style overrides for {@link SettingsCardStatus}. */
+export interface SettingsCardStatusStyles {
+    row?: StyleProp<ViewStyle>;
+    text?: StyleProp<TextStyle>;
+}
+export interface SettingsCardStatusProps {
+    icon: IconName;
+    /** E.g. green for "connected", red for an error. @defaultValue "#6b7280" */
+    iconColor?: ColorValue;
+    children: ReactNode;
+    styles?: SettingsCardStatusStyles;
+}
+/** A status line of a card: small icon, then text (linked account, last backup…). */
+export declare function SettingsCardStatus({ icon, iconColor, children, styles, }: SettingsCardStatusProps): import("react").JSX.Element;
+export interface SettingsCardHintProps {
+    children: ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+/** Explanatory text of a card, quieter than its status lines. */
+export declare function SettingsCardHint({ children, style }: SettingsCardHintProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SettingsCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsCard.d.ts","sourceRoot":"","sources":["../../../src/components/settings/SettingsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAI9C,KAAK,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC,QAAQ,CAAC;AAE/C,wFAAwF;AACxF,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAsBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,SAAqB,EACrB,QAAQ,EACR,MAAM,GACP,EAAE,iBAAiB,+BAgBnB;AAED,+DAA+D;AAC/D,MAAM,WAAW,wBAAwB;IACvC,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,QAAQ,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,wBAAwB,CAAC;CACnC;AAWD,qFAAqF;AACrF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,SAAqB,EACrB,QAAQ,EACR,MAAM,GACP,EAAE,uBAAuB,+BASzB;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAQD,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,+BAE1E"}

package/dist/components/settings/SettingsCard.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const cardStyles = {
+    card: {
+        backgroundColor: "#f3f4f6",
+        borderRadius: 12,
+        padding: 16,
+        gap: 8,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    title: {
+        flex: 1,
+        fontSize: 16,
+        fontWeight: "700",
+        color: "#111111",
+    },
+};
+/**
+ * A settings card: a header (icon + title), then free content — typically
+ * status lines, a hint and action buttons (backup, sync, account…).
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   SettingsCard,
+ *   SettingsCardHint,
+ *   SettingsCardStatus,
+ * } from "@forthtilliath/react-native-kit/components/settings/SettingsCard";
+ *
+ * <SettingsCard icon="cloud-outline" title="Google Drive">
+ *   <SettingsCardStatus icon="person-circle-outline">{email}</SettingsCardStatus>
+ *   <SettingsCardStatus icon="time-outline">Dernier envoi : hier à 21:42</SettingsCardStatus>
+ *   <SettingsCardHint>Copie privée, invisible dans ton Drive.</SettingsCardHint>
+ * </SettingsCard>
+ * ```
+ */
+export function SettingsCard({ title, icon, iconColor = "#2563eb", children, styles, }) {
+    const merged = mergeSlotStyles(cardStyles, styles);
+    return (_jsxs(View, { style: merged.card, children: [_jsxs(View, { style: merged.header, children: [icon !== undefined && (_jsx(Ionicons, { name: icon, size: 20, color: iconColor })), _jsx(Text, { style: merged.title, accessibilityRole: "header", children: title })] }), children] }));
+}
+const statusStyles = {
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+    },
+    text: { flex: 1, fontSize: 14, color: "#111111" },
+};
+/** A status line of a card: small icon, then text (linked account, last backup…). */
+export function SettingsCardStatus({ icon, iconColor = "#6b7280", children, styles, }) {
+    const merged = mergeSlotStyles(statusStyles, styles);
+    return (_jsxs(View, { style: merged.row, children: [_jsx(Ionicons, { name: icon, size: 16, color: iconColor }), _jsx(Text, { style: merged.text, children: children })] }));
+}
+const hintStyle = {
+    fontSize: 13,
+    color: "#6b7280",
+    marginBottom: 4,
+};
+/** Explanatory text of a card, quieter than its status lines. */
+export function SettingsCardHint({ children, style }) {
+    return _jsx(Text, { style: [hintStyle, style], children: children });
+}

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

@@ -0,0 +1,48 @@
+import type { ColorValue, StyleProp, TextStyle, ViewStyle } from "react-native";
+/** Per-slot style overrides for {@link SwitchRow}, each merged after its default. */
+export interface SwitchRowStyles {
+    /** The pressable row (border and background included). */
+    row?: StyleProp<ViewStyle>;
+    /** The column holding the label and description. */
+    texts?: StyleProp<ViewStyle>;
+    label?: StyleProp<TextStyle>;
+    description?: StyleProp<TextStyle>;
+}
+/** Colors of the switch itself — React Native's `Switch` takes no `style` for them. */
+export interface SwitchRowColors {
+    trackOff?: ColorValue;
+    trackOn?: ColorValue;
+    thumbOff?: ColorValue;
+    thumbOn?: ColorValue;
+}
+export interface SwitchRowProps {
+    label: string;
+    /** A line under the label, also read as the screen-reader hint. */
+    description?: string;
+    value: boolean;
+    /** Receives the new value — from the switch or from a tap anywhere on the row. */
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+    /** Switch colors; unset ones keep the platform default. */
+    colors?: SwitchRowColors;
+    /** Per-slot style overrides — see {@link SwitchRowStyles}. */
+    styles?: SwitchRowStyles;
+}
+/**
+ * A settings line: label, optional description, and a switch — the whole
+ * row is pressable and announced as one switch by screen readers.
+ *
+ * @example
+ * ```tsx
+ * import { SwitchRow } from "@forthtilliath/react-native-kit/components/settings/SwitchRow";
+ *
+ * <SwitchRow
+ *   label="Équipes aléatoires"
+ *   description="Mélange les joueurs avant de former les équipes"
+ *   value={randomTeams}
+ *   onChange={setRandomTeams}
+ * />
+ * ```
+ */
+export declare function SwitchRow({ label, description, value, onChange, disabled, colors, styles, }: SwitchRowProps): import("react").JSX.Element;
+//# sourceMappingURL=SwitchRow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchRow.d.ts","sourceRoot":"","sources":["../../../src/components/settings/SwitchRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,qFAAqF;AACrF,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACpC;AAED,uFAAuF;AACvF,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,kFAAkF;IAClF,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAmBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,MAAM,EACN,MAAM,GACP,EAAE,cAAc,+BAkChB"}

package/dist/components/settings/SwitchRow.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Switch, Text, View } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 16,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+    texts: { flex: 1, gap: 2 },
+    label: {
+        fontSize: 15,
+        fontWeight: "600",
+        color: "#111111",
+    },
+    description: { fontSize: 13, color: "#6b7280" },
+};
+/**
+ * A settings line: label, optional description, and a switch — the whole
+ * row is pressable and announced as one switch by screen readers.
+ *
+ * @example
+ * ```tsx
+ * import { SwitchRow } from "@forthtilliath/react-native-kit/components/settings/SwitchRow";
+ *
+ * <SwitchRow
+ *   label="Équipes aléatoires"
+ *   description="Mélange les joueurs avant de former les équipes"
+ *   value={randomTeams}
+ *   onChange={setRandomTeams}
+ * />
+ * ```
+ */
+export function SwitchRow({ label, description, value, onChange, disabled = false, colors, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsxs(Pressable, { style: merged.row, onPress: () => {
+            onChange(!value);
+        }, disabled: disabled, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: label, accessibilityHint: description, children: [_jsxs(View, { style: merged.texts, children: [_jsx(Text, { style: merged.label, children: label }), description !== undefined && (_jsx(Text, { style: merged.description, children: description }))] }), _jsx(Switch, { value: value, onValueChange: onChange, disabled: disabled, trackColor: { false: colors?.trackOff, true: colors?.trackOn }, thumbColor: value ? colors?.thumbOn : colors?.thumbOff, 
+                // The row already announces the switch: hide this one from screen
+                // readers so it isn't read twice.
+                importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true })] }));
+}

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

@@ -2,7 +2,9 @@ export * from "./AboutSettingsScreen.js";
 export * from "./BackupSettingsScreen.js";
 export * from "./ContactSettingsScreen.js";
 export * from "./PrivacySettingsScreen.js";
+export * from "./SettingsCard.js";
 export * from "./SettingsMenu.js";
+export * from "./SwitchRow.js";
 export * from "./ThemeSettingsScreen.js";
 export * from "./UpdateSettingsScreen.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}

package/dist/components/settings/index.js

@@ -2,6 +2,8 @@ export * from "./AboutSettingsScreen.js";
 export * from "./BackupSettingsScreen.js";
 export * from "./ContactSettingsScreen.js";
 export * from "./PrivacySettingsScreen.js";
+export * from "./SettingsCard.js";
 export * from "./SettingsMenu.js";
+export * from "./SwitchRow.js";
 export * from "./ThemeSettingsScreen.js";
 export * from "./UpdateSettingsScreen.js";

package/dist/components/theme/ThemePreferenceProvider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import type { ThemePreference } from "../../hooks/useEffectiveColorScheme.js";
+export interface ThemePreferenceProviderProps {
+    children: ReactNode;
+    /**
+     * Reads the saved preference once, on mount. Resolve to `null` /
+     * `undefined` when nothing is saved yet: `initialPreference` then stays.
+     */
+    load: () => Promise<ThemePreference | null | undefined>;
+    /** Persists a new preference (AsyncStorage, SQLite, a settings row…). */
+    save: (preference: ThemePreference) => void | Promise<void>;
+    /**
+     * Used until `load` resolves, and when nothing is saved.
+     *
+     * @defaultValue "system"
+     */
+    initialPreference?: ThemePreference;
+}
+/**
+ * Holds the app's light / dark / system theme preference in a context:
+ * loaded from storage on mount, changeable from anywhere through
+ * `useThemePreference`, persisted on change. Storage-agnostic — the app
+ * passes its own `load` / `save`. Pair it with `ThemeSettingsScreen` for the
+ * settings screen and `useResolvedScheme` to pick the palette.
+ *
+ * @example
+ * ```tsx
+ * import { ThemePreferenceProvider } from "@forthtilliath/react-native-kit/components/theme/ThemePreferenceProvider";
+ *
+ * <ThemePreferenceProvider
+ *   load={async () => (await getSettings()).theme}
+ *   save={async (theme) => saveSettings({ ...(await getSettings()), theme })}
+ * >
+ *   <App />
+ * </ThemePreferenceProvider>
+ * ```
+ */
+export declare function ThemePreferenceProvider({ children, load, save, initialPreference, }: ThemePreferenceProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemePreferenceProvider.d.ts.map

package/dist/components/theme/ThemePreferenceProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePreferenceProvider.d.ts","sourceRoot":"","sources":["../../../src/components/theme/ThemePreferenceProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAI9E,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,EAAE,MAAM,OAAO,CAAC,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACxD,yEAAyE;IACzE,IAAI,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,iBAA4B,GAC7B,EAAE,4BAA4B,+BAwC9B"}

package/dist/components/theme/ThemePreferenceProvider.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { ThemePreferenceContext } from "./themePreferenceContext.js";
+/**
+ * Holds the app's light / dark / system theme preference in a context:
+ * loaded from storage on mount, changeable from anywhere through
+ * `useThemePreference`, persisted on change. Storage-agnostic — the app
+ * passes its own `load` / `save`. Pair it with `ThemeSettingsScreen` for the
+ * settings screen and `useResolvedScheme` to pick the palette.
+ *
+ * @example
+ * ```tsx
+ * import { ThemePreferenceProvider } from "@forthtilliath/react-native-kit/components/theme/ThemePreferenceProvider";
+ *
+ * <ThemePreferenceProvider
+ *   load={async () => (await getSettings()).theme}
+ *   save={async (theme) => saveSettings({ ...(await getSettings()), theme })}
+ * >
+ *   <App />
+ * </ThemePreferenceProvider>
+ * ```
+ */
+export function ThemePreferenceProvider({ children, load, save, initialPreference = "system", }) {
+    const [preference, setPreference] = useState(initialPreference);
+    // Latest callbacks, so inline `load` / `save` props neither re-run the
+    // initial load nor go stale.
+    const loadRef = useRef(load);
+    const saveRef = useRef(save);
+    // Set by a user choice made before `load` resolved: the slower stored
+    // value must not overwrite it.
+    const chosenRef = useRef(false);
+    useEffect(() => {
+        loadRef.current = load;
+        saveRef.current = save;
+    });
+    useEffect(() => {
+        let active = true;
+        void loadRef.current().then((stored) => {
+            if (active && stored && !chosenRef.current)
+                setPreference(stored);
+        });
+        return () => {
+            active = false;
+        };
+    }, []);
+    const choosePreference = useCallback((next) => {
+        chosenRef.current = true;
+        setPreference(next);
+        void saveRef.current(next);
+    }, []);
+    const value = useMemo(() => ({ preference, setPreference: choosePreference }), [preference, choosePreference]);
+    return (_jsx(ThemePreferenceContext, { value: value, children: children }));
+}

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

@@ -1,3 +1,5 @@
 export * from "./ThemeOptionList.js";
+export * from "./themePreferenceContext.js";
+export * from "./ThemePreferenceProvider.js";
 export * from "./ThemeToggle.js";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC"}

package/dist/components/theme/index.js

@@ -1,2 +1,4 @@
 export * from "./ThemeOptionList.js";
+export * from "./themePreferenceContext.js";
+export * from "./ThemePreferenceProvider.js";
 export * from "./ThemeToggle.js";

package/dist/components/theme/themePreferenceContext.d.ts

@@ -0,0 +1,20 @@
+import { type ThemePreference } from "../../hooks/useEffectiveColorScheme.js";
+export interface ThemePreferenceContextValue {
+    /** The user's choice: light, dark, or follow the system. */
+    preference: ThemePreference;
+    /** Applies a new choice right away, then persists it through `save`. */
+    setPreference: (preference: ThemePreference) => void;
+}
+/**
+ * Provided by `ThemePreferenceProvider`, read through
+ * {@link useThemePreference}; `"system"` outside a provider.
+ */
+export declare const ThemePreferenceContext: import("react").Context<ThemePreferenceContextValue>;
+/** The theme preference and its setter, from the nearest `ThemePreferenceProvider`. */
+export declare function useThemePreference(): ThemePreferenceContextValue;
+/**
+ * The scheme actually applied: the chosen one, or the device's when the
+ * preference is `"system"`.
+ */
+export declare function useResolvedScheme(): "light" | "dark";
+//# sourceMappingURL=themePreferenceContext.d.ts.map

package/dist/components/theme/themePreferenceContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themePreferenceContext.d.ts","sourceRoot":"","sources":["../../../src/components/theme/themePreferenceContext.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,eAAe,EAErB,MAAM,wCAAwC,CAAC;AAEhD,MAAM,WAAW,2BAA2B;IAC1C,4DAA4D;IAC5D,UAAU,EAAE,eAAe,CAAC;IAC5B,wEAAwE;IACxE,aAAa,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,CAAC;CACtD;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,sDAI/B,CAAC;AAEL,uFAAuF;AACvF,wBAAgB,kBAAkB,IAAI,2BAA2B,CAEhE;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,GAAG,MAAM,CAEpD"}