@forthtilliath/react-native-kit 0.15.0 → 0.16.0

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import type { StyleProp, ViewStyle } from "react-native";
+/** Per-slot style overrides for {@link BottomSheet}, each merged after its default. */
+export interface BottomSheetStyles {
+    /** The dimmed full-screen backdrop; tapping it closes the sheet. */
+    overlay?: StyleProp<ViewStyle>;
+    /** The sheet itself: background, rounded top corners, `maxHeight`. */
+    sheet?: StyleProp<ViewStyle>;
+    /** The `ScrollView` holding the children. */
+    scroll?: StyleProp<ViewStyle>;
+}
+export interface BottomSheetProps {
+    visible: boolean;
+    /** Called on a backdrop tap and on Android's back button. */
+    onClose: () => void;
+    children: ReactNode;
+    /**
+     * Extra space below the content, typically the bottom safe-area inset
+     * (`useSafeAreaInsets().bottom`): with Android edge-to-edge, the modal
+     * otherwise slides under the system navigation bar.
+     *
+     * @defaultValue 0
+     */
+    bottomInset?: number;
+    /** Per-slot style overrides — see {@link BottomSheetStyles}. */
+    styles?: BottomSheetStyles;
+}
+/**
+ * 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 declare function BottomSheet({ visible, onClose, children, bottomInset, styles, }: BottomSheetProps): import("react").JSX.Element;
+//# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,uFAAuF;AACvF,MAAM,WAAW,iBAAiB;IAChC,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,sEAAsE;IACtE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC/B;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AA6BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,WAAe,EACf,MAAM,GACP,EAAE,gBAAgB,+BAqBlB"}

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

@@ -15,7 +15,12 @@ export interface PhotoPickerLabels {
     addPlaceholderText?: string;
     cameraPermissionTitle?: string;
     cameraPermissionMessage?: string;
+    /**
+     * @deprecated Unused: choosing from the library needs no permission (the
+     * system photo picker), so no "access denied" alert is ever shown.
+     */
     libraryPermissionTitle?: string;
+    /** @deprecated Unused — see `libraryPermissionTitle`. */
     libraryPermissionMessage?: string;
     takePhoto?: string;
     chooseFromLibrary?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAuED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAuGlB"}
+{"version":3,"file":"PhotoPicker.d.ts","sourceRoot":"","sources":["../../../src/components/picker/PhotoPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKhF,OAAO,EAAE,KAAK,SAAS,EAAgB,MAAM,sBAAsB,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACrC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sBAAsB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;IACvD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,yDAAyD;IACzD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAClD,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAyED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,+BAqGlB"}

package/dist/components/picker/PhotoPicker.js

@@ -41,8 +41,6 @@ const defaultLabels = {
         addPlaceholderText: "Ajouter une photo",
         cameraPermissionTitle: "Accès à l'appareil photo refusé",
         cameraPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour prendre une photo.",
-        libraryPermissionTitle: "Accès aux photos refusé",
-        libraryPermissionMessage: "Autorise l'accès dans les réglages du téléphone pour choisir une photo.",
         takePhoto: "Prendre une photo",
         chooseFromLibrary: "Choisir dans la galerie",
         cancel: "Annuler",
@@ -55,8 +53,6 @@ const defaultLabels = {
         addPlaceholderText: "Add a photo",
         cameraPermissionTitle: "Camera access denied",
         cameraPermissionMessage: "Allow access in the phone's settings to take a photo.",
-        libraryPermissionTitle: "Photo access denied",
-        libraryPermissionMessage: "Allow access in the phone's settings to choose a photo.",
         takePhoto: "Take a photo",
         chooseFromLibrary: "Choose from library",
         cancel: "Cancel",
@@ -86,12 +82,10 @@ export function PhotoPicker({ photoUri, onChange, savePhoto, photoLabel, labels,
             onChange(await savePhoto(result.assets[0].uri));
         }
     }
+    // No permission request: the library is opened through the system photo
+    // picker, which needs none — so apps don't have to keep the storage
+    // permissions just for this.
     async function pickFromLibrary() {
-        const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
-        if (!permission.granted) {
-            Alert.alert(t.libraryPermissionTitle, t.libraryPermissionMessage);
-            return;
-        }
         const result = await ImagePicker.launchImageLibraryAsync({
             mediaTypes: "images",
             quality: 0.5,

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