@studio-piot/native-ui 0.17.0 → 0.20.0

package/README.md

@@ -7,10 +7,10 @@ The package is the native counterpart of `@studio-piot/ui`. Apps own their palet
 ## Install
 
 ```bash
-npm install @studio-piot/native-ui
+pnpm add @studio-piot/native-ui
 ```
 
-`Select` peers `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler`, and `react-native-screens` (iOS `FullWindowOverlay` so the sheet appears above React Navigation modals). `SegmentedControl` uses that same `react-native-reanimated` peer to slide the selection fill. `Slider` peers `@react-native-community/slider`. `ErrorBanner` peers `react-native-svg` for the megaphone and row arrow. `HeaderIcon` and `HeaderCapsule` take an icon render function, so they add no peer; pass `expo-symbols` `SymbolView` or any icon component.
+`Select` peers `@gorhom/bottom-sheet`, `react-native-reanimated`, `react-native-gesture-handler`, and `react-native-screens` (iOS `FullWindowOverlay` so the sheet appears above React Navigation modals). `SegmentedControl` uses that same `react-native-reanimated` peer to slide the selection fill. `Slider` peers `@react-native-community/slider`. `ErrorBanner` peers `react-native-svg` for the megaphone and row arrow. `FieldDateTime` (from `@studio-piot/native-ui/date-time`) needs `@expo/ui`, an optional peer only that entry uses. `HeaderIcon` and `HeaderCapsule` take an icon render function, so they add no peer; pass `expo-symbols` `SymbolView` or any icon component.
 
 ## Theme roles
 
@@ -30,7 +30,9 @@ Each component doc lists its roles.
 - [Theme provider and Button usage](./docs/components/button.md)
 - [LinkBlocks usage](./docs/components/link-blocks.md)
 - [Field usage](./docs/components/field.md)
+- [FieldDateTime usage](./docs/components/field-date-time.md)
 - [Choice usage](./docs/components/choice.md)
+- [Tabs usage](./docs/components/tabs.md)
 - [Form usage](./docs/components/form.md)
 - [HeaderWash usage](./docs/components/header-wash.md)
 - [FormSheet usage](./docs/components/form-sheet.md)
@@ -71,11 +73,13 @@ export function App() {
 ## Local development
 
 ```bash
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```
 
-`npm run dev` rebuilds `dist` as you edit. `prepare` also builds on install, so a `file:` dependency in a consumer app stays usable after `npm install`.
+This repo uses **pnpm** (`pnpm-lock.yaml`); don't run `npm install` here.
+
+`pnpm dev` rebuilds `dist` as you edit. `prepare` also builds on install, so a linked or `file:` dependency in a consumer app stays usable after installing.
 
 When this package lives outside the consumer app root (e.g. a monorepo sibling), configure Metro `watchFolders` so the app picks up source changes; add `nodeModulesPaths` if resolution needs it.
 
@@ -84,14 +88,16 @@ When this package lives outside the consumer app root (e.g. a monorepo sibling),
 1. Add `src/components/YourComponent.tsx`.
 2. Export it from `src/components/index.ts` and `src/index.ts`.
 3. Document it under `docs/components/` and link it from this README.
-4. Run `npm run build` before publishing.
+4. Run `pnpm build` and `pnpm test` before publishing.
 
 ## Publish
 
 ```bash
-npm publish
+pnpm publish
 ```
 
+`pnpm publish` checks you're on a clean `main`; publish from there.
+
 `prepublishOnly` builds `dist` first. The package is public (`publishConfig.access`).
 
 ## License

package/dist/components/DateTime/DateTimePresenter.android.d.ts

@@ -0,0 +1,4 @@
+import type { DateTimePresenterProps } from "./types";
+/** Android: the system date dialog, then the time dialog (for datetime). */
+export declare function DateTimePresenter({ open, value, mode, minimumDate, maximumDate, colors, onConfirm, onClose, }: DateTimePresenterProps): import("react").JSX.Element | null;
+//# sourceMappingURL=DateTimePresenter.android.d.ts.map

package/dist/components/DateTime/DateTimePresenter.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePresenter.android.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimePresenter.android.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAS,EACT,OAAO,GACR,EAAE,sBAAsB,sCA0DxB"}

package/dist/components/DateTime/DateTimePresenter.android.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePresenter = DateTimePresenter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const jetpack_compose_1 = require("@expo/ui/jetpack-compose");
+const react_1 = require("react");
+const dateTimeValue_1 = require("./dateTimeValue");
+/** Android: the system date dialog, then the time dialog (for datetime). */
+function DateTimePresenter({ open, value, mode, minimumDate, maximumDate, colors, onConfirm, onClose, }) {
+    const [step, setStep] = (0, react_1.useState)(null);
+    const [draft, setDraft] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        if (open) {
+            setDraft(value);
+            setStep(mode === "time" ? "time" : "date");
+        }
+        else {
+            setStep(null);
+        }
+        // Restart from the value only when opened.
+    }, [open]);
+    const close = () => {
+        setStep(null);
+        onClose();
+    };
+    if (step === "date") {
+        return ((0, jsx_runtime_1.jsx)(jetpack_compose_1.Host, { children: (0, jsx_runtime_1.jsx)(jetpack_compose_1.DatePickerDialog, { color: colors.accent, initialDate: draft.toISOString(), onDateSelected: (day) => {
+                    const next = (0, dateTimeValue_1.withDay)(draft, day);
+                    if (mode === "datetime") {
+                        setDraft(next);
+                        setStep("time");
+                    }
+                    else {
+                        setStep(null);
+                        onConfirm(next);
+                    }
+                }, onDismissRequest: close, selectableDates: { start: minimumDate, end: maximumDate } }) }));
+    }
+    if (step === "time") {
+        return ((0, jsx_runtime_1.jsx)(jetpack_compose_1.Host, { children: (0, jsx_runtime_1.jsx)(jetpack_compose_1.TimePickerDialog, { color: colors.accent, initialDate: draft.toISOString(), is24Hour: true, onDateSelected: (time) => {
+                    setStep(null);
+                    onConfirm((0, dateTimeValue_1.withTime)(draft, time));
+                }, onDismissRequest: close }) }));
+    }
+    return null;
+}
+//# sourceMappingURL=DateTimePresenter.android.js.map

package/dist/components/DateTime/DateTimePresenter.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePresenter.android.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimePresenter.android.tsx"],"names":[],"mappings":";;AAQA,8CAmEC;;AA3ED,8DAAoF;AACpF,iCAA4C;AAC5C,mDAAoD;AAKpD,4EAA4E;AAC5E,SAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,WAAW,EACX,MAAM,EACN,SAAS,EACT,OAAO,GACgB;IACvB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAO,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE1C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,OAAO,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;QACD,2CAA2C;IAC7C,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,OAAO,CACL,uBAAC,sBAAI,cACH,uBAAC,kCAAgB,IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,EAChC,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE;oBACtB,MAAM,IAAI,GAAG,IAAA,uBAAO,EAAC,KAAK,EAAE,GAAG,CAAC,CAAC;oBACjC,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;wBACxB,QAAQ,CAAC,IAAI,CAAC,CAAC;wBACf,OAAO,CAAC,MAAM,CAAC,CAAC;oBAClB,CAAC;yBAAM,CAAC;wBACN,OAAO,CAAC,IAAI,CAAC,CAAC;wBACd,SAAS,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;gBACH,CAAC,EACD,gBAAgB,EAAE,KAAK,EACvB,eAAe,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,WAAW,EAAE,GACzD,GACG,CACR,CAAC;IACJ,CAAC;IACD,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QACpB,OAAO,CACL,uBAAC,sBAAI,cACH,uBAAC,kCAAgB,IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EACpB,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,EAChC,QAAQ,QACR,cAAc,EAAE,CAAC,IAAI,EAAE,EAAE;oBACvB,OAAO,CAAC,IAAI,CAAC,CAAC;oBACd,SAAS,CAAC,IAAA,wBAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;gBACnC,CAAC,EACD,gBAAgB,EAAE,KAAK,GACvB,GACG,CACR,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/components/DateTime/DateTimePresenter.d.ts

@@ -0,0 +1,4 @@
+import type { DateTimePresenterProps } from "./types";
+/** Web and other platforms: no native picker; the field shows its value only. */
+export declare function DateTimePresenter(_props: DateTimePresenterProps): null;
+//# sourceMappingURL=DateTimePresenter.d.ts.map

package/dist/components/DateTime/DateTimePresenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePresenter.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimePresenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,sBAAsB,QAE/D"}

package/dist/components/DateTime/DateTimePresenter.ios.d.ts

@@ -0,0 +1,9 @@
+import type { DateTimePresenterProps } from "./types";
+/**
+ * iOS: a bottom panel in a React Native Modal with SwiftUI's picker — a
+ * calendar for dates, wheels for times — and Done. Tapping outside keeps
+ * the old value. A Modal (not a bottom-sheet modal) so it opens from
+ * anywhere, including inside another sheet or a native modal.
+ */
+export declare function DateTimePresenter({ open, value, mode, minimumDate, maximumDate, title, doneLabel, colors, onConfirm, onClose, }: DateTimePresenterProps): import("react").JSX.Element;
+//# sourceMappingURL=DateTimePresenter.ios.d.ts.map

package/dist/components/DateTime/DateTimePresenter.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePresenter.ios.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimePresenter.ios.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,WAAW,EACX,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,GACR,EAAE,sBAAsB,+BA2DxB"}

package/dist/components/DateTime/DateTimePresenter.ios.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePresenter = DateTimePresenter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const swift_ui_1 = require("@expo/ui/swift-ui");
+const modifiers_1 = require("@expo/ui/swift-ui/modifiers");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const sheet_1 = require("../../layout/sheet");
+const BACKDROP = "rgba(0, 0, 0, 0.4)";
+/**
+ * iOS: a bottom panel in a React Native Modal with SwiftUI's picker — a
+ * calendar for dates, wheels for times — and Done. Tapping outside keeps
+ * the old value. A Modal (not a bottom-sheet modal) so it opens from
+ * anywhere, including inside another sheet or a native modal.
+ */
+function DateTimePresenter({ open, value, mode, minimumDate, maximumDate, title, doneLabel, colors, onConfirm, onClose, }) {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const [draft, setDraft] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        // Start from the field's value each time the picker opens.
+        if (open)
+            setDraft(value);
+    }, [open]);
+    const components = mode === "date" ? ["date"] : mode === "time" ? ["hourAndMinute"] : ["date", "hourAndMinute"];
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { animationType: "slide", onRequestClose: onClose, transparent: true, visible: open, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.root, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: "Close", accessibilityRole: "button", onPress: onClose, style: [react_native_1.StyleSheet.absoluteFill, { backgroundColor: BACKDROP }] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                        styles.panel,
+                        { backgroundColor: colors.background, paddingBottom: insets.bottom + 16 },
+                    ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.header, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: [styles.title, { color: colors.text }], children: title }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", hitSlop: 8, onPress: () => onConfirm(draft), children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.done, { color: colors.accent }], children: doneLabel }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.divider, { backgroundColor: colors.border }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.picker, children: (0, jsx_runtime_1.jsx)(swift_ui_1.Host, { matchContents: true, children: (0, jsx_runtime_1.jsx)(swift_ui_1.DatePicker, { displayedComponents: components, modifiers: [
+                                        (0, modifiers_1.datePickerStyle)(mode === "date" ? "graphical" : "wheel"),
+                                        (0, modifiers_1.tint)(colors.accent),
+                                    ], onDateChange: setDraft, range: { start: minimumDate, end: maximumDate }, selection: draft }) }) })] })] }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flex: 1,
+        justifyContent: "flex-end",
+    },
+    panel: {
+        borderTopLeftRadius: sheet_1.SHEET_TOP_RADIUS,
+        borderTopRightRadius: sheet_1.SHEET_TOP_RADIUS,
+    },
+    header: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 12,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+    },
+    title: {
+        flex: 1,
+        fontSize: 17,
+        fontWeight: "600",
+    },
+    done: {
+        fontSize: 17,
+        fontWeight: "600",
+    },
+    divider: {
+        height: react_native_1.StyleSheet.hairlineWidth,
+    },
+    picker: {
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingTop: 8,
+    },
+});
+//# sourceMappingURL=DateTimePresenter.ios.js.map

package/dist/components/DateTime/DateTimePresenter.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePresenter.ios.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimePresenter.ios.tsx"],"names":[],"mappings":"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"}

package/dist/components/DateTime/DateTimePresenter.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePresenter = DateTimePresenter;
+/** Web and other platforms: no native picker; the field shows its value only. */
+function DateTimePresenter(_props) {
+    return null;
+}
+//# sourceMappingURL=DateTimePresenter.js.map

package/dist/components/DateTime/DateTimePresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePresenter.js","sourceRoot":"","sources":["../../../src/components/DateTime/DateTimePresenter.tsx"],"names":[],"mappings":";;AAGA,8CAEC;AAHD,iFAAiF;AACjF,SAAgB,iBAAiB,CAAC,MAA8B;IAC9D,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/components/DateTime/FieldDateTime.d.ts

@@ -0,0 +1,8 @@
+import type { FieldDateTimeProps } from "./types";
+/**
+ * A date, time, or date-and-time field. Looks like Select: label, value,
+ * description or error. Tapping opens the native picker — a sheet with
+ * Done on iOS, the system dialogs on Android. Needs `@expo/ui`.
+ */
+export declare function FieldDateTime({ name, value, onChange, mode, label, description, error, placeholder, minimumDate, maximumDate, formatValue, sheetTitle, doneLabel, radius, editable, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, accentColor: accentColorProp, style, }: FieldDateTimeProps): import("react").JSX.Element;
+//# sourceMappingURL=FieldDateTime.d.ts.map

package/dist/components/DateTime/FieldDateTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDateTime.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/FieldDateTime.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,IAAiB,EACjB,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAiE,EACjE,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,SAAkB,EAClB,MAAa,EACb,QAAe,EACf,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,oBAAoB,EACtC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,WAAW,EAAE,eAAe,EAC5B,KAAK,GACN,EAAE,kBAAkB,+BAsFpB"}

package/dist/components/DateTime/FieldDateTime.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldDateTime = FieldDateTime;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const buttonRadius_1 = require("../Button/buttonRadius");
+const ErrorBanner_1 = require("../ErrorBanner");
+const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
+const DateTimePresenter_1 = require("./DateTimePresenter");
+const dateTimeThemeRoles_1 = require("./dateTimeThemeRoles");
+const dateTimeValue_1 = require("./dateTimeValue");
+/**
+ * A date, time, or date-and-time field. Looks like Select: label, value,
+ * description or error. Tapping opens the native picker — a sheet with
+ * Done on iOS, the system dialogs on Android. Needs `@expo/ui`.
+ */
+function FieldDateTime({ name, value, onChange, mode = "datetime", label, description, error, placeholder = mode === "time" ? "Choose a time" : "Choose a date", minimumDate, maximumDate, formatValue, sheetTitle, doneLabel = "Done", radius = "xl", editable = true, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, accentColor: accentColorProp, style, }) {
+    const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.backgroundColor);
+    const textColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(textColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.textColor);
+    const placeholderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(placeholderColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.placeholderColor);
+    const labelColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(labelColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.labelColor);
+    const descriptionColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(descriptionColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.descriptionColor);
+    const borderColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(borderColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.borderColor);
+    const errorColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(errorColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.errorColor);
+    const accentColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(accentColorProp, dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES.accentColor);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const dismissBanner = (0, ErrorBanner_1.useErrorBannerDismiss)();
+    const { viewRef, listed } = (0, ErrorBanner_1.useErrorBannerField)(name, () => setOpen(true));
+    const hasError = Boolean(error) || Boolean(listed);
+    const inlineError = listed ? undefined : error;
+    const display = value
+        ? (formatValue ?? ((date) => (0, dateTimeValue_1.formatDateTimeValue)(date, mode)))(value)
+        : placeholder;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: viewRef, collapsable: false, style: [styles.column, !editable && styles.blocked, style], children: [label ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: labelColor }], children: label }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityHint: listed?.message ?? "Opens a date and time picker", accessibilityLabel: label ? `${label}. ${display}` : display, accessibilityRole: "button", accessibilityState: { disabled: !editable }, disabled: !editable, onPress: () => setOpen(true), style: [
+                    styles.trigger,
+                    {
+                        backgroundColor,
+                        borderColor: hasError ? errorColor : borderColor,
+                        borderRadius: (0, buttonRadius_1.buttonRadiusValue)(radius),
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: [styles.triggerText, { color: value ? textColor : placeholderColor }], children: display }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: [styles.chevron, { color: placeholderColor }], children: "\u203A" })] }), inlineError ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: errorColor }], children: inlineError })) : description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.helper, { color: descriptionColor }], children: description })) : null, (0, jsx_runtime_1.jsx)(DateTimePresenter_1.DateTimePresenter, { colors: {
+                    background: backgroundColor,
+                    text: textColor,
+                    handle: placeholderColor,
+                    border: borderColor,
+                    accent: accentColor,
+                }, doneLabel: doneLabel, maximumDate: maximumDate, minimumDate: minimumDate, mode: mode, onClose: () => setOpen(false), onConfirm: (next) => {
+                    setOpen(false);
+                    onChange((0, dateTimeValue_1.clampDate)(next, minimumDate, maximumDate));
+                    dismissBanner();
+                }, open: open, title: sheetTitle ?? label ?? "Date and time", value: (0, dateTimeValue_1.clampDate)(value ?? new Date(), minimumDate, maximumDate) })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    column: {
+        gap: 6,
+        width: "100%",
+    },
+    blocked: {
+        opacity: 0.4,
+    },
+    label: {
+        fontSize: 13,
+        fontWeight: "600",
+    },
+    trigger: {
+        alignItems: "center",
+        borderWidth: 1,
+        flexDirection: "row",
+        gap: 8,
+        minHeight: 48,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        width: "100%",
+    },
+    triggerText: {
+        flex: 1,
+        fontSize: 17,
+    },
+    chevron: {
+        fontSize: 22,
+        fontWeight: "300",
+        lineHeight: 24,
+        transform: [{ rotate: "90deg" }],
+    },
+    helper: {
+        fontSize: 13,
+    },
+});
+//# sourceMappingURL=FieldDateTime.js.map

package/dist/components/DateTime/FieldDateTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDateTime.js","sourceRoot":"","sources":["../../../src/components/DateTime/FieldDateTime.tsx"],"names":[],"mappings":"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"}

package/dist/components/DateTime/dateTimeThemeRoles.d.ts

@@ -0,0 +1,13 @@
+/** The same roles as FieldText and Select, so date fields match the form. */
+export declare const DATE_TIME_THEME_ROLES: {
+    readonly backgroundColor: "fieldBackground";
+    readonly textColor: "fieldText";
+    readonly placeholderColor: "fieldPlaceholder";
+    readonly labelColor: "fieldLabel";
+    readonly descriptionColor: "fieldDescription";
+    readonly borderColor: "fieldBorder";
+    readonly errorColor: "fieldError";
+    readonly accentColor: "fieldSelectSelected";
+};
+export type DateTimeThemeColorProp = keyof typeof DATE_TIME_THEME_ROLES;
+//# sourceMappingURL=dateTimeThemeRoles.d.ts.map

package/dist/components/DateTime/dateTimeThemeRoles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimeThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/dateTimeThemeRoles.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,eAAO,MAAM,qBAAqB;;;;;;;;;CASxB,CAAC;AAEX,MAAM,MAAM,sBAAsB,GAAG,MAAM,OAAO,qBAAqB,CAAC"}

package/dist/components/DateTime/dateTimeThemeRoles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATE_TIME_THEME_ROLES = void 0;
+/** The same roles as FieldText and Select, so date fields match the form. */
+exports.DATE_TIME_THEME_ROLES = {
+    backgroundColor: "fieldBackground",
+    textColor: "fieldText",
+    placeholderColor: "fieldPlaceholder",
+    labelColor: "fieldLabel",
+    descriptionColor: "fieldDescription",
+    borderColor: "fieldBorder",
+    errorColor: "fieldError",
+    accentColor: "fieldSelectSelected",
+};
+//# sourceMappingURL=dateTimeThemeRoles.js.map

package/dist/components/DateTime/dateTimeThemeRoles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimeThemeRoles.js","sourceRoot":"","sources":["../../../src/components/DateTime/dateTimeThemeRoles.ts"],"names":[],"mappings":";;;AAAA,6EAA6E;AAChE,QAAA,qBAAqB,GAAG;IACnC,eAAe,EAAE,iBAAiB;IAClC,SAAS,EAAE,WAAW;IACtB,gBAAgB,EAAE,kBAAkB;IACpC,UAAU,EAAE,YAAY;IACxB,gBAAgB,EAAE,kBAAkB;IACpC,WAAW,EAAE,aAAa;IAC1B,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,qBAAqB;CAC1B,CAAC"}

package/dist/components/DateTime/dateTimeValue.d.ts

@@ -0,0 +1,11 @@
+/** Which parts of the value the field edits. */
+export type DateTimeMode = "date" | "time" | "datetime";
+/** Default display: "Sat 3 Oct 2026", "08:05" or "Sat 3 Oct 2026 · 08:05", local time. Pure. */
+export declare function formatDateTimeValue(value: Date, mode: DateTimeMode): string;
+/** `value` moved to the calendar day of `day`, keeping its time. */
+export declare function withDay(value: Date, day: Date): Date;
+/** `value` at the hour and minute of `time`, keeping its day. */
+export declare function withTime(value: Date, time: Date): Date;
+/** `value` moved inside the optional limits. */
+export declare function clampDate(value: Date, minimum?: Date, maximum?: Date): Date;
+//# sourceMappingURL=dateTimeValue.d.ts.map

package/dist/components/DateTime/dateTimeValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimeValue.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/dateTimeValue.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC;AAMxD,gGAAgG;AAChG,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,GAAG,MAAM,CAM3E;AAED,oEAAoE;AACpE,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,CAIpD;AAED,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAItD;AAED,gDAAgD;AAChD,wBAAgB,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAI3E"}

package/dist/components/DateTime/dateTimeValue.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateTimeValue = formatDateTimeValue;
+exports.withDay = withDay;
+exports.withTime = withTime;
+exports.clampDate = clampDate;
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const pad = (value) => String(value).padStart(2, "0");
+/** Default display: "Sat 3 Oct 2026", "08:05" or "Sat 3 Oct 2026 · 08:05", local time. Pure. */
+function formatDateTimeValue(value, mode) {
+    const day = `${WEEKDAYS[value.getDay()]} ${value.getDate()} ${MONTHS[value.getMonth()]} ${value.getFullYear()}`;
+    const time = `${pad(value.getHours())}:${pad(value.getMinutes())}`;
+    if (mode === "date")
+        return day;
+    if (mode === "time")
+        return time;
+    return `${day} · ${time}`;
+}
+/** `value` moved to the calendar day of `day`, keeping its time. */
+function withDay(value, day) {
+    const next = new Date(value);
+    next.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+    return next;
+}
+/** `value` at the hour and minute of `time`, keeping its day. */
+function withTime(value, time) {
+    const next = new Date(value);
+    next.setHours(time.getHours(), time.getMinutes(), 0, 0);
+    return next;
+}
+/** `value` moved inside the optional limits. */
+function clampDate(value, minimum, maximum) {
+    if (minimum && value < minimum)
+        return new Date(minimum);
+    if (maximum && value > maximum)
+        return new Date(maximum);
+    return value;
+}
+//# sourceMappingURL=dateTimeValue.js.map

package/dist/components/DateTime/dateTimeValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dateTimeValue.js","sourceRoot":"","sources":["../../../src/components/DateTime/dateTimeValue.ts"],"names":[],"mappings":";;AAQA,kDAMC;AAGD,0BAIC;AAGD,4BAIC;AAGD,8BAIC;AAhCD,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AACnE,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AACpG,MAAM,GAAG,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAE9D,gGAAgG;AAChG,SAAgB,mBAAmB,CAAC,KAAW,EAAE,IAAkB;IACjE,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;IAChH,MAAM,IAAI,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;IACnE,IAAI,IAAI,KAAK,MAAM;QAAE,OAAO,GAAG,CAAC;IAChC,IAAI,IAAI,KAAK,MAAM;QAAE,OAAO,IAAI,CAAC;IACjC,OAAO,GAAG,GAAG,MAAM,IAAI,EAAE,CAAC;AAC5B,CAAC;AAED,oEAAoE;AACpE,SAAgB,OAAO,CAAC,KAAW,EAAE,GAAS;IAC5C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,GAAG,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC;IACnE,OAAO,IAAI,CAAC;AACd,CAAC;AAED,iEAAiE;AACjE,SAAgB,QAAQ,CAAC,KAAW,EAAE,IAAU;IAC9C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACxD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,gDAAgD;AAChD,SAAgB,SAAS,CAAC,KAAW,EAAE,OAAc,EAAE,OAAc;IACnE,IAAI,OAAO,IAAI,KAAK,GAAG,OAAO;QAAE,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IACzD,IAAI,OAAO,IAAI,KAAK,GAAG,OAAO;QAAE,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IACzD,OAAO,KAAK,CAAC;AACf,CAAC"}

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

@@ -0,0 +1,5 @@
+export { FieldDateTime } from "./FieldDateTime";
+export { DATE_TIME_THEME_ROLES, type DateTimeThemeColorProp } from "./dateTimeThemeRoles";
+export { formatDateTimeValue, type DateTimeMode } from "./dateTimeValue";
+export type { FieldDateTimeProps } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,KAAK,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EAAE,mBAAmB,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/DateTime/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateTimeValue = exports.DATE_TIME_THEME_ROLES = exports.FieldDateTime = void 0;
+var FieldDateTime_1 = require("./FieldDateTime");
+Object.defineProperty(exports, "FieldDateTime", { enumerable: true, get: function () { return FieldDateTime_1.FieldDateTime; } });
+var dateTimeThemeRoles_1 = require("./dateTimeThemeRoles");
+Object.defineProperty(exports, "DATE_TIME_THEME_ROLES", { enumerable: true, get: function () { return dateTimeThemeRoles_1.DATE_TIME_THEME_ROLES; } });
+var dateTimeValue_1 = require("./dateTimeValue");
+Object.defineProperty(exports, "formatDateTimeValue", { enumerable: true, get: function () { return dateTimeValue_1.formatDateTimeValue; } });
+//# sourceMappingURL=index.js.map

package/dist/components/DateTime/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DateTime/index.ts"],"names":[],"mappings":";;;AAAA,iDAAgD;AAAvC,8GAAA,aAAa,OAAA;AACtB,2DAA0F;AAAjF,2HAAA,qBAAqB,OAAA;AAC9B,iDAAyE;AAAhE,oHAAA,mBAAmB,OAAA"}

package/dist/components/DateTime/types.d.ts

@@ -0,0 +1,57 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonRadius } from "../Button/buttonRadius";
+import type { DateTimeMode } from "./dateTimeValue";
+export type FieldDateTimeProps = {
+    /** Matches `FieldError.field` for the error banner. */
+    name?: string;
+    value: Date | null;
+    onChange: (value: Date) => void;
+    /** Default `"datetime"`. */
+    mode?: DateTimeMode;
+    label?: string;
+    description?: string;
+    error?: string;
+    /** Shown while `value` is null. Default "Choose a date" / "Choose a time". */
+    placeholder?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    /** Field text. Default: "Sat 3 Oct 2026 · 08:05" style. */
+    formatValue?: (value: Date) => string;
+    /** iOS sheet title. Defaults to `label`. */
+    sheetTitle?: string;
+    /** Default "Done". */
+    doneLabel?: string;
+    radius?: ButtonRadius;
+    editable?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    placeholderColor?: string;
+    labelColor?: string;
+    descriptionColor?: string;
+    borderColor?: string;
+    errorColor?: string;
+    /** Done button (iOS) and picker tint. */
+    accentColor?: string;
+    style?: StyleProp<ViewStyle>;
+};
+/** Platform picker opened by the field. */
+export type DateTimePresenterProps = {
+    open: boolean;
+    /** Starting point: the value, or now within the limits. */
+    value: Date;
+    mode: DateTimeMode;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    title: string;
+    doneLabel: string;
+    colors: {
+        background: string;
+        text: string;
+        handle: string;
+        border: string;
+        accent: string;
+    };
+    onConfirm: (value: Date) => void;
+    onClose: () => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/DateTime/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DateTime/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC;IACtC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,2CAA2C;AAC3C,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,2DAA2D;IAC3D,KAAK,EAAE,IAAI,CAAC;IACZ,IAAI,EAAE,YAAY,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE;QACN,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,SAAS,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC"}

package/dist/components/DateTime/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/components/DateTime/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/DateTime/types.ts"],"names":[],"mappings":""}

package/dist/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,SAAS,CAAC;AAYzD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAgC,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW;AACX,4GAA4G;AAC5G,OAAqC,EACrC,aAAa,EAAE,cAAc,EAC7B,MAAa,EACb,QAAe,EACf,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,oBAAoB,EACtC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,oBAAoB,EAAE,wBAAwB,EAC9C,cAAc,EAAE,kBAAkB,EAClC,KAAK,GACN,EAAE,WAAW,+BAkQb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,SAAS,CAAC;AAIzD,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAgC,EAChC,KAAK,EACL,WAAW,EACX,KAAK,EACL,UAAU,EACV,WAAW;AACX,4GAA4G;AAC5G,OAAqC,EACrC,aAAa,EAAE,cAAc,EAC7B,MAAa,EACb,QAAe,EACf,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,gBAAgB,EAAE,oBAAoB,EACtC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,oBAAoB,EAAE,wBAAwB,EAC9C,cAAc,EAAE,kBAAkB,EAClC,KAAK,GACN,EAAE,WAAW,+BAkQb"}

package/dist/components/Select/Select.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const bottom_sheet_1 = require("@gorhom/bottom-sheet");
-const react_native_screens_1 = require("react-native-screens");
+const SheetContainer_1 = require("../../layout/SheetContainer");
 const sheet_1 = require("../../layout/sheet");
 const buttonRadius_1 = require("../Button/buttonRadius");
 const ErrorBanner_1 = require("../ErrorBanner");
@@ -14,13 +14,6 @@ const resolveSelectDetentIndex_1 = require("./resolveSelectDetentIndex");
 const SelectCloseButton_1 = require("./SelectCloseButton");
 const selectThemeRoles_1 = require("./selectThemeRoles");
 const BACKDROP_OPACITY = 0.72;
-/** Renders the sheet above React Navigation native modals (iOS). */
-function SheetContainer({ children }) {
-    if (react_native_1.Platform.OS === "ios") {
-        return (0, jsx_runtime_1.jsx)(react_native_screens_1.FullWindowOverlay, { children: children });
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-}
 function Select({ name, value, onChange, options, placeholder = "Select an option", label, description, error, sheetTitle, closeButton, 
 /** Max sheet height as a fraction of the window (largest value wins). Default `[0.25, 0.5, 0.75]` → 75%. */
 detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent: _initialDetent, radius = "xl", editable = true, backgroundColor: backgroundColorProp, textColor: textColorProp, placeholderColor: placeholderColorProp, labelColor: labelColorProp, descriptionColor: descriptionColorProp, borderColor: borderColorProp, errorColor: errorColorProp, selectedColor: selectedColorProp, closeBackgroundColor: closeBackgroundColorProp, closeIconColor: closeIconColorProp, style, }) {
@@ -104,7 +97,7 @@ detents = [...resolveSelectDetentIndex_1.DEFAULT_SELECT_DETENTS], initialDetent:
                     backgroundColor,
                     borderTopLeftRadius: sheet_1.SHEET_TOP_RADIUS,
                     borderTopRightRadius: sheet_1.SHEET_TOP_RADIUS,
-                }, containerComponent: SheetContainer, enableDynamicSizing: true, enablePanDownToClose: true, handleComponent: renderHandle, handleStyle: styles.handleShell, maxDynamicContentSize: maxDynamicContentSize, stackBehavior: "push", children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetScrollView, { contentContainerStyle: styles.sheetContent, enableFooterMarginAdjustment: false, children: options.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.empty, { color: placeholderColor }], children: "No options" })) : (options.map((option) => {
+                }, containerComponent: SheetContainer_1.SheetContainer, enableDynamicSizing: true, enablePanDownToClose: true, handleComponent: renderHandle, handleStyle: styles.handleShell, maxDynamicContentSize: maxDynamicContentSize, stackBehavior: "push", children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetScrollView, { contentContainerStyle: styles.sheetContent, enableFooterMarginAdjustment: false, children: options.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.empty, { color: placeholderColor }], children: "No options" })) : (options.map((option) => {
                         const isSelected = option.value === value;
                         return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: {
                                 selected: isSelected,