@forthtilliath/react-native-kit 0.15.1 → 0.16.0

package/dist/components/overlay/BottomSheet.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Pressable, ScrollView, View } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        justifyContent: "flex-end",
+    },
+    sheet: {
+        backgroundColor: "#ffffff",
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        paddingTop: 8,
+        paddingBottom: 24,
+        maxHeight: "85%",
+    },
+    // Without flexShrink the ScrollView takes its content's height, ignores the
+    // sheet's maxHeight, and the overflow is clipped instead of scrollable.
+    scroll: { flexShrink: 1 },
+};
+const backdropFill = {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+};
+/**
+ * A modal panel sliding up from the bottom of the screen, its content
+ * scrollable past `maxHeight` — instead of inline content that shifts the
+ * layout. Tapping the backdrop or pressing back closes it.
+ *
+ * @example
+ * ```tsx
+ * import { BottomSheet } from "@forthtilliath/react-native-kit/components/overlay/BottomSheet";
+ *
+ * const { bottom } = useSafeAreaInsets();
+ *
+ * <BottomSheet visible={open} onClose={() => setOpen(false)} bottomInset={bottom}>
+ *   <DayDetails day={day} />
+ * </BottomSheet>
+ * ```
+ */
+export function BottomSheet({ visible, onClose, children, bottomInset = 0, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsx(Modal, { visible: visible, transparent: true, animationType: "slide", onRequestClose: onClose, children: _jsxs(View, { style: merged.overlay, children: [_jsx(Pressable, { style: backdropFill, onPress: onClose }), _jsxs(View, { style: merged.sheet, children: [_jsx(ScrollView, { style: merged.scroll, children: children }), bottomInset > 0 && _jsx(View, { style: { height: bottomInset } })] })] }) }));
+}

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

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

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

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

package/dist/components/overlay/index.js

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

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

@@ -0,0 +1,47 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+/** Per-slot style overrides for {@link CheckboxGroup}, each merged after its default. */
+export interface CheckboxGroupStyles {
+    /** The wrapping row holding the chips. */
+    row?: StyleProp<ViewStyle>;
+    /** Every chip. */
+    chip?: StyleProp<ViewStyle>;
+    /** Added on top of `chip` for the checked ones. */
+    chipChecked?: StyleProp<ViewStyle>;
+    /** Every chip's label. */
+    text?: StyleProp<TextStyle>;
+    /** Added on top of `text` for the checked ones. */
+    textChecked?: StyleProp<TextStyle>;
+}
+export interface CheckboxGroupOption<T extends string> {
+    value: T;
+    label: string;
+}
+export interface CheckboxGroupProps<T extends string> {
+    options: readonly CheckboxGroupOption<T>[];
+    /** The checked values, in the order they were checked. */
+    values: readonly T[];
+    /** Receives the new list: a tap adds the option at the end, or removes it. */
+    onChange: (values: T[]) => void;
+    /** What the choice is about, read by screen readers on the group. */
+    label?: string;
+    /** Per-slot style overrides — see {@link CheckboxGroupStyles}. */
+    styles?: CheckboxGroupStyles;
+}
+/**
+ * Chips that each check and uncheck independently (extensions, tags, days…),
+ * wrapping onto as many lines as needed. Each chip is announced as a checkbox.
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxGroup } from "@forthtilliath/react-native-kit/components/picker/CheckboxGroup";
+ *
+ * <CheckboxGroup
+ *   label="Extensions"
+ *   options={[{ value: "leaders", label: "Leaders" }, { value: "cities", label: "Cités" }]}
+ *   values={extensions}
+ *   onChange={setExtensions}
+ * />
+ * ```
+ */
+export declare function CheckboxGroup<T extends string>({ options, values, onChange, label, styles, }: CheckboxGroupProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../src/components/picker/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,yFAAyF;AACzF,MAAM,WAAW,mBAAmB;IAClC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,kBAAkB;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IAClD,OAAO,EAAE,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3C,0DAA0D;IAC1D,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC;IACrB,8EAA8E;IAC9E,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAuBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,EAC9C,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BA8BvB"}

package/dist/components/picker/CheckboxGroup.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    row: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+    chip: {
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 999,
+        borderWidth: 1.5,
+        borderColor: "#d4d4d4",
+    },
+    chipChecked: {
+        backgroundColor: "#2563eb",
+        borderColor: "#2563eb",
+    },
+    text: {
+        fontSize: 13,
+        fontWeight: "600",
+        color: "#6b7280",
+    },
+    textChecked: { color: "#ffffff" },
+};
+/**
+ * Chips that each check and uncheck independently (extensions, tags, days…),
+ * wrapping onto as many lines as needed. Each chip is announced as a checkbox.
+ *
+ * @example
+ * ```tsx
+ * import { CheckboxGroup } from "@forthtilliath/react-native-kit/components/picker/CheckboxGroup";
+ *
+ * <CheckboxGroup
+ *   label="Extensions"
+ *   options={[{ value: "leaders", label: "Leaders" }, { value: "cities", label: "Cités" }]}
+ *   values={extensions}
+ *   onChange={setExtensions}
+ * />
+ * ```
+ */
+export function CheckboxGroup({ options, values, onChange, label, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsx(View, { style: merged.row, accessibilityLabel: label, children: options.map((option) => {
+            const checked = values.includes(option.value);
+            return (_jsx(Pressable, { style: [merged.chip, checked && merged.chipChecked], accessibilityRole: "checkbox", accessibilityState: { checked }, accessibilityLabel: option.label, onPress: () => {
+                    onChange(checked
+                        ? values.filter((v) => v !== option.value)
+                        : [...values, option.value]);
+                }, children: _jsx(Text, { style: [merged.text, checked && merged.textChecked], children: option.label }) }, option.value));
+        }) }));
+}

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

@@ -0,0 +1,58 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { type KitLocale } from "../../i18n/locale.js";
+/** Per-slot style overrides for {@link MonthDayGrid}, each merged after its default. */
+export interface MonthDayGridStyles {
+    /** Wraps the weekday header row and the grid. */
+    container?: StyleProp<ViewStyle>;
+    /** The weekday header row. */
+    weekdayRow?: StyleProp<ViewStyle>;
+    /** Each weekday initial. */
+    weekdayText?: StyleProp<TextStyle>;
+    /** The wrapping grid of days. */
+    grid?: StyleProp<ViewStyle>;
+    /** One seventh of the width — headers, leading blanks, and days alike. */
+    cell?: StyleProp<ViewStyle>;
+    /** The round, tappable day. */
+    dayBox?: StyleProp<ViewStyle>;
+    /** Added on top of `dayBox` for a selected day. */
+    dayBoxSelected?: StyleProp<ViewStyle>;
+    /** The day number. */
+    dayText?: StyleProp<TextStyle>;
+    /** Added on top of `dayText` for a selected day. */
+    dayTextSelected?: StyleProp<TextStyle>;
+}
+export interface MonthDayGridProps {
+    /** The month's days in order, as `YYYY-MM-DD` dates. */
+    days: readonly string[];
+    /** The selected days, as `YYYY-MM-DD` dates. */
+    selected: ReadonlySet<string>;
+    /** Called with the tapped day; the host adds it to or removes it from `selected`. */
+    onToggle: (day: string) => void;
+    /** Seven column headers, Monday first. Defaults to the locale's initials. */
+    weekdayLabels?: readonly string[];
+    /**
+     * Language of the default `weekdayLabels` — French by default, or the
+     * nearest `KitLocaleProvider`'s.
+     */
+    locale?: KitLocale;
+    /** Per-slot style overrides — see {@link MonthDayGridStyles}. */
+    styles?: MonthDayGridStyles;
+}
+/**
+ * A Monday-first month calendar where days are toggled on and off — public
+ * holidays, days off, availability… The first day is offset under its
+ * weekday column; the selection itself lives in the host.
+ *
+ * @example
+ * ```tsx
+ * import { MonthDayGrid } from "@forthtilliath/react-native-kit/components/picker/MonthDayGrid";
+ *
+ * <MonthDayGrid
+ *   days={daysOfMonth}
+ *   selected={holidays}
+ *   onToggle={(day) => setHolidays((prev) => toggleInSet(prev, day))}
+ * />
+ * ```
+ */
+export declare function MonthDayGrid({ days, selected, onToggle, weekdayLabels, locale, styles, }: MonthDayGridProps): import("react").JSX.Element;
+//# sourceMappingURL=MonthDayGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MonthDayGrid.d.ts","sourceRoot":"","sources":["../../../src/components/picker/MonthDayGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMpE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,wFAAwF;AACxF,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,4BAA4B;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,+BAA+B;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,mDAAmD;IACnD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,sBAAsB;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,oDAAoD;IACpD,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,iBAAiB;IAChC,wDAAwD;IACxD,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;IACxB,gDAAgD;IAChD,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC9B,qFAAqF;IACrF,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAuCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,iBAAiB,+BA8CnB"}

package/dist/components/picker/MonthDayGrid.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, Text, View } from "react-native";
+import { mondayFirstWeekday } from "@forthtilliath/ts-kit/date/mondayFirstWeekday";
+import { parseIsoDate } from "@forthtilliath/ts-kit/date/parseIsoDate";
+import { useKitLocale } from "../../i18n/locale.js";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultWeekdayLabels = {
+    fr: ["L", "M", "M", "J", "V", "S", "D"],
+    en: ["M", "T", "W", "T", "F", "S", "S"],
+};
+const defaultStyles = {
+    container: {},
+    weekdayRow: { flexDirection: "row" },
+    weekdayText: {
+        fontSize: 11,
+        fontWeight: "700",
+        opacity: 0.6,
+        color: "#111111",
+    },
+    grid: { flexDirection: "row", flexWrap: "wrap" },
+    cell: {
+        width: "14.28%",
+        alignItems: "center",
+        paddingVertical: 2,
+    },
+    dayBox: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: "#d4d4d4",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    dayBoxSelected: {
+        backgroundColor: "#dc2626",
+        borderColor: "#dc2626",
+    },
+    dayText: { fontSize: 12, color: "#111111" },
+    dayTextSelected: { color: "#ffffff", fontWeight: "700" },
+};
+/**
+ * A Monday-first month calendar where days are toggled on and off — public
+ * holidays, days off, availability… The first day is offset under its
+ * weekday column; the selection itself lives in the host.
+ *
+ * @example
+ * ```tsx
+ * import { MonthDayGrid } from "@forthtilliath/react-native-kit/components/picker/MonthDayGrid";
+ *
+ * <MonthDayGrid
+ *   days={daysOfMonth}
+ *   selected={holidays}
+ *   onToggle={(day) => setHolidays((prev) => toggleInSet(prev, day))}
+ * />
+ * ```
+ */
+export function MonthDayGrid({ days, selected, onToggle, weekdayLabels, locale, styles, }) {
+    const resolvedLocale = useKitLocale(locale);
+    const headers = weekdayLabels ?? defaultWeekdayLabels[resolvedLocale];
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    const firstDay = days[0];
+    const leadingBlanks = firstDay ? mondayFirstWeekday(firstDay) : 0;
+    return (_jsxs(View, { style: merged.container, children: [_jsx(View, { style: merged.weekdayRow, children: headers.map((header, i) => (
+                // Initials repeat (M, M / S, S): the column index is the identity.
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                _jsx(View, { style: merged.cell, children: _jsx(Text, { style: merged.weekdayText, children: header }) }, i))) }), _jsxs(View, { style: merged.grid, children: [Array.from({ length: leadingBlanks }, (_, i) => (_jsx(View, { style: merged.cell }, `blank-${String(i)}`))), days.map((day) => {
+                        const isSelected = selected.has(day);
+                        return (_jsx(View, { style: merged.cell, children: _jsx(Pressable, { style: [merged.dayBox, isSelected && merged.dayBoxSelected], accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, onPress: () => {
+                                    onToggle(day);
+                                }, children: _jsx(Text, { style: [merged.dayText, isSelected && merged.dayTextSelected], children: parseIsoDate(day).getDate() }) }) }, day));
+                    })] })] }));
+}

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

@@ -0,0 +1,45 @@
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+/** One choice of an {@link OptionsModal} or a `SelectField`. */
+export interface SelectOption<T extends string | number> {
+    value: T;
+    label: string;
+}
+/** Per-slot style overrides for {@link OptionsModal}, each merged after its default. */
+export interface OptionsModalStyles {
+    /** The dimmed full-screen backdrop centering the card; tapping it closes. */
+    overlay?: StyleProp<ViewStyle>;
+    /** The card holding the scrollable list. */
+    card?: StyleProp<ViewStyle>;
+    /** Each option row. */
+    option?: StyleProp<ViewStyle>;
+    /** Each option's label. */
+    optionText?: StyleProp<TextStyle>;
+}
+export interface OptionsModalProps<T extends string | number> {
+    visible: boolean;
+    /** Called on a backdrop tap, on Android's back button, and after a choice. */
+    onClose: () => void;
+    options: readonly SelectOption<T>[];
+    onSelect: (value: T) => void;
+    /** Per-slot style overrides — see {@link OptionsModalStyles}. */
+    styles?: OptionsModalStyles;
+}
+/**
+ * A centered popup listing options in a scrollable card: tapping one selects
+ * it and closes the popup. The building block of `SelectField`, usable on
+ * its own behind any custom trigger.
+ *
+ * @example
+ * ```tsx
+ * import { OptionsModal } from "@forthtilliath/react-native-kit/components/picker/OptionsModal";
+ *
+ * <OptionsModal
+ *   visible={open}
+ *   onClose={() => setOpen(false)}
+ *   options={[{ value: "a", label: "Option A" }, { value: "b", label: "Option B" }]}
+ *   onSelect={setChoice}
+ * />
+ * ```
+ */
+export declare function OptionsModal<T extends string | number>({ visible, onClose, options, onSelect, styles, }: OptionsModalProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=OptionsModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionsModal.d.ts","sourceRoot":"","sources":["../../../src/components/picker/OptionsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKpE,gEAAgE;AAChE,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wFAAwF;AACxF,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,uBAAuB;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC1D,OAAO,EAAE,OAAO,CAAC;IACjB,8EAA8E;IAC9E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,iEAAiE;IACjE,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAqBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACtD,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BA+BtB"}

package/dist/components/picker/OptionsModal.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal, Pressable, ScrollView, Text, View } from "react-native";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultStyles = {
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0,0,0,0.5)",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+    },
+    card: {
+        width: "100%",
+        maxHeight: "70%",
+        backgroundColor: "#ffffff",
+        borderRadius: 12,
+        paddingVertical: 8,
+    },
+    option: { paddingVertical: 14, paddingHorizontal: 20 },
+    optionText: { fontSize: 16, color: "#111111" },
+};
+/**
+ * A centered popup listing options in a scrollable card: tapping one selects
+ * it and closes the popup. The building block of `SelectField`, usable on
+ * its own behind any custom trigger.
+ *
+ * @example
+ * ```tsx
+ * import { OptionsModal } from "@forthtilliath/react-native-kit/components/picker/OptionsModal";
+ *
+ * <OptionsModal
+ *   visible={open}
+ *   onClose={() => setOpen(false)}
+ *   options={[{ value: "a", label: "Option A" }, { value: "b", label: "Option B" }]}
+ *   onSelect={setChoice}
+ * />
+ * ```
+ */
+export function OptionsModal({ visible, onClose, options, onSelect, styles, }) {
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    return (_jsx(Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(Pressable, { style: merged.overlay, onPress: onClose, children: _jsx(View, { style: merged.card, children: _jsx(ScrollView, { children: options.map((option) => (_jsx(Pressable, { style: merged.option, accessibilityRole: "button", onPress: () => {
+                            onSelect(option.value);
+                            onClose();
+                        }, children: _jsx(Text, { style: merged.optionText, children: option.label }) }, option.value))) }) }) }) }));
+}

package/dist/components/picker/QuantityStepper.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 QuantityStepper}, each merged after its default. */
+export interface QuantityStepperStyles {
+    /** The row: − button, field, + button. */
+    row?: StyleProp<ViewStyle>;
+    /** Both round buttons. */
+    button?: StyleProp<ViewStyle>;
+    /** Added on top of `button` for "−" at `min` and "+" at `max`. */
+    buttonDisabled?: StyleProp<ViewStyle>;
+    /** The "−" / "+" glyphs. */
+    buttonText?: StyleProp<TextStyle>;
+    /** The numeric field in the middle (its text color included). */
+    input?: StyleProp<TextStyle>;
+}
+/** Screen-reader labels of the three controls, built from the stepper's `label`. */
+export interface QuantityStepperA11yLabels {
+    decrease: (label: string) => string;
+    increase: (label: string) => string;
+    input: (label: string) => string;
+}
+export interface QuantityStepperProps {
+    value: number;
+    /** Receives the new value, already clamped to `min…max`. */
+    onChange: (value: number) => void;
+    /** What is being counted — used in the screen-reader labels. */
+    label: string;
+    /** @defaultValue 0 */
+    min?: number;
+    /** @defaultValue 999 */
+    max?: number;
+    /**
+     * Step applied by a long press on −/+, to reach large values quickly.
+     * Unset, a long press does nothing more than a tap.
+     */
+    longPressStep?: number;
+    /**
+     * Language of the default screen-reader labels — French by default, or the
+     * nearest `KitLocaleProvider`'s.
+     */
+    locale?: KitLocale;
+    /** Overrides some or all of the screen-reader labels. */
+    a11yLabels?: Partial<QuantityStepperA11yLabels>;
+    /** Per-slot style overrides — see {@link QuantityStepperStyles}. */
+    styles?: QuantityStepperStyles;
+}
+/**
+ * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust
+ * (optionally faster on long press), and a numeric field in the middle to
+ * type a large number in one go (non-digits are dropped, the result is
+ * clamped). A typed value below `min` (an empty field, the "2" of "25" with
+ * `min={10}`) stays as typed until the field loses focus.
+ *
+ * @example
+ * ```tsx
+ * import { QuantityStepper } from "@forthtilliath/react-native-kit/components/picker/QuantityStepper";
+ *
+ * <QuantityStepper value={count} onChange={setCount} label="Croissants" />
+ * <QuantityStepper value={bans} onChange={setBans} label="Bannissements" min={1} max={40} longPressStep={5} />
+ * ```
+ */
+export declare function QuantityStepper({ value, onChange, label, min, max, longPressStep, locale, a11yLabels, styles, }: QuantityStepperProps): import("react").JSX.Element;
+//# sourceMappingURL=QuantityStepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuantityStepper.d.ts","sourceRoot":"","sources":["../../../src/components/picker/QuantityStepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpE,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,2FAA2F;AAC3F,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,kEAAkE;IAClE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,4BAA4B;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,iEAAiE;IACjE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,oFAAoF;AACpF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAChD,oEAAoE;IACpE,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAkDD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAO,EACP,GAAS,EACT,aAAa,EACb,MAAM,EACN,UAAU,EACV,MAAM,GACP,EAAE,oBAAoB,+BAwEtB"}

package/dist/components/picker/QuantityStepper.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable, Text, TextInput, View } from "react-native";
+import { useKitLocale } from "../../i18n/locale.js";
+import { mergeSlotStyles } from "../../utils/helpers/mergeSlotStyles.js";
+const defaultA11yLabels = {
+    fr: {
+        decrease: (label) => `Retirer : ${label}`,
+        increase: (label) => `Ajouter : ${label}`,
+        input: (label) => `Quantité : ${label}`,
+    },
+    en: {
+        decrease: (label) => `Decrease: ${label}`,
+        increase: (label) => `Increase: ${label}`,
+        input: (label) => `Quantity: ${label}`,
+    },
+};
+const defaultStyles = {
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+    },
+    button: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: "#2563eb",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    buttonDisabled: { opacity: 0.35 },
+    buttonText: {
+        color: "#ffffff",
+        fontSize: 22,
+        fontWeight: "700",
+        lineHeight: 26,
+    },
+    input: {
+        width: 52,
+        height: 40,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "#d4d4d4",
+        color: "#111111",
+        fontSize: 18,
+        fontWeight: "700",
+        textAlign: "center",
+        padding: 0,
+    },
+};
+/**
+ * A whole-number counter from `min` (0) to `max`: −/+ buttons to adjust
+ * (optionally faster on long press), and a numeric field in the middle to
+ * type a large number in one go (non-digits are dropped, the result is
+ * clamped). A typed value below `min` (an empty field, the "2" of "25" with
+ * `min={10}`) stays as typed until the field loses focus.
+ *
+ * @example
+ * ```tsx
+ * import { QuantityStepper } from "@forthtilliath/react-native-kit/components/picker/QuantityStepper";
+ *
+ * <QuantityStepper value={count} onChange={setCount} label="Croissants" />
+ * <QuantityStepper value={bans} onChange={setBans} label="Bannissements" min={1} max={40} longPressStep={5} />
+ * ```
+ */
+export function QuantityStepper({ value, onChange, label, min = 0, max = 999, longPressStep, locale, a11yLabels, styles, }) {
+    const labels = { ...defaultA11yLabels[useKitLocale(locale)], ...a11yLabels };
+    const merged = mergeSlotStyles(defaultStyles, styles);
+    const atMin = value <= min;
+    const atMax = value >= max;
+    // Field text not sent yet: clamping it to `min` on every keystroke would
+    // make any number starting below `min` impossible to type.
+    const [draft, setDraft] = useState(null);
+    function set(next) {
+        setDraft(null);
+        onChange(Math.min(max, Math.max(min, next)));
+    }
+    return (_jsxs(View, { style: merged.row, children: [_jsx(Pressable, { style: [merged.button, atMin && merged.buttonDisabled], onPress: () => {
+                    set(value - 1);
+                }, onLongPress: longPressStep === undefined
+                    ? undefined
+                    : () => {
+                        set(value - longPressStep);
+                    }, disabled: atMin, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: labels.decrease(label), children: _jsx(Text, { style: merged.buttonText, children: "\u2212" }) }), _jsx(TextInput, { style: merged.input, value: draft ?? String(value), onChangeText: (text) => {
+                    const digits = text.replace(/\D/g, "");
+                    if (digits === "" || Number(digits) < min)
+                        setDraft(digits);
+                    else
+                        set(Number(digits));
+                }, onBlur: () => {
+                    if (draft !== null)
+                        set(draft === "" ? min : Number(draft));
+                }, keyboardType: "number-pad", selectTextOnFocus: true, maxLength: String(max).length, accessibilityLabel: labels.input(label) }), _jsx(Pressable, { style: [merged.button, atMax && merged.buttonDisabled], onPress: () => {
+                    set(value + 1);
+                }, onLongPress: longPressStep === undefined
+                    ? undefined
+                    : () => {
+                        set(value + longPressStep);
+                    }, disabled: atMax, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: labels.increase(label), children: _jsx(Text, { style: merged.buttonText, children: "+" }) })] }));
+}

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"}