@studio-piot/native-ui 0.16.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/Choice/Choice.d.ts

@@ -1,8 +1,10 @@
 import type { ChoiceProps } from "./types";
 /**
- * One option in a list of next steps: an icon, a title and an optional
- * description, in a filled row. Tapping it acts straight away, usually to
- * open the next screen. For picking a value, use RadioField or Select.
+ * One option in a list: an icon, a title and an optional description, in a
+ * filled row. Tapping it acts straight away (open the next screen), or,
+ * with `selected`, selects it among other choices (e.g. candidate routes,
+ * each with a drawing in the icon slot). For a form value, use RadioField
+ * or Select.
  */
-export declare function Choice({ title, description, icon, onPress, disabled, iconSize, radius, backgroundColor: backgroundColorProp, titleColor: titleColorProp, descriptionColor: descriptionColorProp, iconColor: iconColorProp, style, }: ChoiceProps): import("react").JSX.Element;
+export declare function Choice({ title, description, icon, onPress, selected, disabled, iconSize, radius, backgroundColor: backgroundColorProp, titleColor: titleColorProp, descriptionColor: descriptionColorProp, iconColor: iconColorProp, selectedColor: selectedColorProp, style, }: ChoiceProps): import("react").JSX.Element;
 //# sourceMappingURL=Choice.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/Choice.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,QAAgB,EAChB,QAA2B,EAC3B,MAAa,EACb,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EAAE,aAAa,EACxB,KAAK,GACN,EAAE,WAAW,+BAwDb"}
+{"version":3,"file":"Choice.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/Choice.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,QAA2B,EAC3B,MAAa,EACb,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,iBAAiB,EAChC,KAAK,GACN,EAAE,WAAW,+BA+Db"}

package/dist/components/Choice/Choice.js

@@ -9,23 +9,29 @@ const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
 const choiceLayout_1 = require("./choiceLayout");
 const choiceThemeRoles_1 = require("./choiceThemeRoles");
 /**
- * One option in a list of next steps: an icon, a title and an optional
- * description, in a filled row. Tapping it acts straight away, usually to
- * open the next screen. For picking a value, use RadioField or Select.
+ * One option in a list: an icon, a title and an optional description, in a
+ * filled row. Tapping it acts straight away (open the next screen), or,
+ * with `selected`, selects it among other choices (e.g. candidate routes,
+ * each with a drawing in the icon slot). For a form value, use RadioField
+ * or Select.
  */
-function Choice({ title, description, icon, onPress, disabled = false, iconSize = choiceLayout_1.CHOICE_ICON_SIZE, radius = "xl", backgroundColor: backgroundColorProp, titleColor: titleColorProp, descriptionColor: descriptionColorProp, iconColor: iconColorProp, style, }) {
+function Choice({ title, description, icon, onPress, selected, disabled = false, iconSize = choiceLayout_1.CHOICE_ICON_SIZE, radius = "xl", backgroundColor: backgroundColorProp, titleColor: titleColorProp, descriptionColor: descriptionColorProp, iconColor: iconColorProp, selectedColor: selectedColorProp, style, }) {
     const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, choiceThemeRoles_1.CHOICE_THEME_ROLES.backgroundColor);
     const titleColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(titleColorProp, choiceThemeRoles_1.CHOICE_THEME_ROLES.titleColor);
     const descriptionColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(descriptionColorProp, choiceThemeRoles_1.CHOICE_THEME_ROLES.descriptionColor);
     const iconColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(iconColorProp, choiceThemeRoles_1.CHOICE_THEME_ROLES.iconColor);
+    const selectedColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(selectedColorProp, choiceThemeRoles_1.CHOICE_THEME_ROLES.selectedColor);
     const slot = (0, choiceLayout_1.choiceIconSlot)(iconSize);
+    const selection = (0, choiceLayout_1.choiceSelection)(selected);
     return (
     // No explicit label: the row groups its text, so VoiceOver reads the
     // title and description together ("Running, Outdoors, with GPS, button").
-    (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: { disabled }, disabled: disabled, onPress: onPress, style: ({ pressed }) => [
+    (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: selection.role, accessibilityState: { ...selection.state, disabled }, disabled: disabled, onPress: onPress, style: ({ pressed }) => [
             styles.row,
             {
                 backgroundColor,
+                borderColor: selection.highlighted ? selectedColor : "transparent",
+                borderWidth: selection.borderWidth,
                 borderRadius: (0, buttonRadius_1.buttonRadiusValue)(radius),
                 opacity: (0, buttonAppearance_1.buttonOpacity)({ disabled, loading: false, pressed }),
             },

package/dist/components/Choice/Choice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../src/components/Choice/Choice.tsx"],"names":[],"mappings":";;AAaA,wBAqEC;;AAlFD,+CAAiE;AACjE,iEAA2D;AAC3D,yDAA2D;AAC3D,0EAAuE;AACvE,iDAAkE;AAClE,yDAAwD;AAGxD;;;;GAIG;AACH,SAAgB,MAAM,CAAC,EACrB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,+BAAgB,EAC3B,MAAM,GAAG,IAAI,EACb,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,cAAc,EAC1B,gBAAgB,EAAE,oBAAoB,EACtC,SAAS,EAAE,aAAa,EACxB,KAAK,GACO;IACZ,MAAM,eAAe,GAAG,IAAA,6CAAqB,EAC3C,mBAAmB,EACnB,qCAAkB,CAAC,eAAe,CACnC,CAAC;IACF,MAAM,UAAU,GAAG,IAAA,6CAAqB,EACtC,cAAc,EACd,qCAAkB,CAAC,UAAU,CAC9B,CAAC;IACF,MAAM,gBAAgB,GAAG,IAAA,6CAAqB,EAC5C,oBAAoB,EACpB,qCAAkB,CAAC,gBAAgB,CACpC,CAAC;IACF,MAAM,SAAS,GAAG,IAAA,6CAAqB,EACrC,aAAa,EACb,qCAAkB,CAAC,SAAS,CAC7B,CAAC;IACF,MAAM,IAAI,GAAG,IAAA,6BAAc,EAAC,QAAQ,CAAC,CAAC;IAEtC,OAAO;IACL,qEAAqE;IACrE,0EAA0E;IAC1E,wBAAC,wBAAS,IACR,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,EAAE,QAAQ,EAAE,EAChC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;YACtB,MAAM,CAAC,GAAG;YACV;gBACE,eAAe;gBACf,YAAY,EAAE,IAAA,gCAAiB,EAAC,MAAM,CAAC;gBACvC,OAAO,EAAE,IAAA,gCAAa,EAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;aAC9D;YACD,KAAK;SACN,aAEA,IAAI,CAAC,CAAC,CAAC,CACN,uBAAC,mBAAI,IACH,yBAAyB,EAAC,qBAAqB,EAC/C,2BAA2B,QAC3B,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,YAElD,IAAI,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,GACtC,CACR,CAAC,CAAC,CAAC,IAAI,EACR,wBAAC,mBAAI,IAAC,KAAK,EAAE,MAAM,CAAC,IAAI,aACtB,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,YAAG,KAAK,GAAQ,EACjE,WAAW,CAAC,CAAC,CAAC,CACb,uBAAC,mBAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAC,YAC3D,WAAW,GACP,CACR,CAAC,CAAC,CAAC,IAAI,IACH,IACG,CACb,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,GAAG,EAAE;QACH,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,EAAE;QACP,SAAS,EAAE,EAAE;QACb,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;KACpB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;KACP;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC"}
+{"version":3,"file":"Choice.js","sourceRoot":"","sources":["../../../src/components/Choice/Choice.tsx"],"names":[],"mappings":"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"}

package/dist/components/Choice/choiceLayout.d.ts

@@ -4,4 +4,20 @@ export declare const CHOICE_ICON_SIZE = 28;
 export declare const CHOICE_ICON_SLOT = 32;
 /** The icon column: the steady slot, or the icon itself when it is larger. Pure so it can be unit-tested. */
 export declare function choiceIconSlot(iconSize: number): number;
+/** Border around a selectable choice; drawn transparent when not selected. */
+export declare const CHOICE_SELECTED_BORDER = 2;
+/**
+ * Role, state and border for a choice. Without `selected` it is a plain
+ * button. With it, a radio option that keeps its border width either way,
+ * so rows do not shift when the selection moves. Pure so it can be unit-tested.
+ */
+export declare function choiceSelection(selected: boolean | undefined): {
+    role: "button" | "radio";
+    state: {
+        selected?: boolean;
+        checked?: boolean;
+    };
+    borderWidth: number;
+    highlighted: boolean;
+};
 //# sourceMappingURL=choiceLayout.d.ts.map

package/dist/components/Choice/choiceLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choiceLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/choiceLayout.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,qEAAqE;AACrE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6GAA6G;AAC7G,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEvD"}
+{"version":3,"file":"choiceLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/choiceLayout.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,qEAAqE;AACrE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,6GAA6G;AAC7G,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,8EAA8E;AAC9E,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG;IAC9D,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,KAAK,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;CACtB,CAUA"}

package/dist/components/Choice/choiceLayout.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CHOICE_ICON_SLOT = exports.CHOICE_ICON_SIZE = void 0;
+exports.CHOICE_SELECTED_BORDER = exports.CHOICE_ICON_SLOT = exports.CHOICE_ICON_SIZE = void 0;
 exports.choiceIconSlot = choiceIconSlot;
+exports.choiceSelection = choiceSelection;
 /** Default icon box, sized for an SF Symbol next to a two-line label. */
 exports.CHOICE_ICON_SIZE = 28;
 /** Icon column width, so titles line up across a list of choices. */
@@ -10,4 +11,22 @@ exports.CHOICE_ICON_SLOT = 32;
 function choiceIconSlot(iconSize) {
     return Math.max(exports.CHOICE_ICON_SLOT, iconSize);
 }
+/** Border around a selectable choice; drawn transparent when not selected. */
+exports.CHOICE_SELECTED_BORDER = 2;
+/**
+ * Role, state and border for a choice. Without `selected` it is a plain
+ * button. With it, a radio option that keeps its border width either way,
+ * so rows do not shift when the selection moves. Pure so it can be unit-tested.
+ */
+function choiceSelection(selected) {
+    if (selected === undefined) {
+        return { role: "button", state: {}, borderWidth: 0, highlighted: false };
+    }
+    return {
+        role: "radio",
+        state: { selected, checked: selected },
+        borderWidth: exports.CHOICE_SELECTED_BORDER,
+        highlighted: selected,
+    };
+}
 //# sourceMappingURL=choiceLayout.js.map

package/dist/components/Choice/choiceLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"choiceLayout.js","sourceRoot":"","sources":["../../../src/components/Choice/choiceLayout.ts"],"names":[],"mappings":";;;AAMA,wCAEC;AARD,yEAAyE;AAC5D,QAAA,gBAAgB,GAAG,EAAE,CAAC;AACnC,qEAAqE;AACxD,QAAA,gBAAgB,GAAG,EAAE,CAAC;AAEnC,6GAA6G;AAC7G,SAAgB,cAAc,CAAC,QAAgB;IAC7C,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAgB,EAAE,QAAQ,CAAC,CAAC;AAC9C,CAAC"}
+{"version":3,"file":"choiceLayout.js","sourceRoot":"","sources":["../../../src/components/Choice/choiceLayout.ts"],"names":[],"mappings":";;;AAMA,wCAEC;AAUD,0CAeC;AAjCD,yEAAyE;AAC5D,QAAA,gBAAgB,GAAG,EAAE,CAAC;AACnC,qEAAqE;AACxD,QAAA,gBAAgB,GAAG,EAAE,CAAC;AAEnC,6GAA6G;AAC7G,SAAgB,cAAc,CAAC,QAAgB;IAC7C,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAgB,EAAE,QAAQ,CAAC,CAAC;AAC9C,CAAC;AAED,8EAA8E;AACjE,QAAA,sBAAsB,GAAG,CAAC,CAAC;AAExC;;;;GAIG;AACH,SAAgB,eAAe,CAAC,QAA6B;IAM3D,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;IAC3E,CAAC;IACD,OAAO;QACL,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE;QACtC,WAAW,EAAE,8BAAsB;QACnC,WAAW,EAAE,QAAQ;KACtB,CAAC;AACJ,CAAC"}

package/dist/components/Choice/choiceThemeRoles.d.ts

@@ -3,6 +3,7 @@ export declare const CHOICE_THEME_ROLES: {
     readonly titleColor: "choiceTitle";
     readonly descriptionColor: "choiceDescription";
     readonly iconColor: "choiceIcon";
+    readonly selectedColor: "choiceSelected";
 };
 export type ChoiceThemeColorProp = keyof typeof CHOICE_THEME_ROLES;
 //# sourceMappingURL=choiceThemeRoles.d.ts.map

package/dist/components/Choice/choiceThemeRoles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choiceThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/choiceThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;CAKrB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,kBAAkB,CAAC"}
+{"version":3,"file":"choiceThemeRoles.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/choiceThemeRoles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;CAMrB,CAAC;AAEX,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,kBAAkB,CAAC"}

package/dist/components/Choice/choiceThemeRoles.js

@@ -6,5 +6,6 @@ exports.CHOICE_THEME_ROLES = {
     titleColor: "choiceTitle",
     descriptionColor: "choiceDescription",
     iconColor: "choiceIcon",
+    selectedColor: "choiceSelected",
 };
 //# sourceMappingURL=choiceThemeRoles.js.map

package/dist/components/Choice/choiceThemeRoles.js.map

@@ -1 +1 @@
-{"version":3,"file":"choiceThemeRoles.js","sourceRoot":"","sources":["../../../src/components/Choice/choiceThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,kBAAkB,GAAG;IAChC,eAAe,EAAE,kBAAkB;IACnC,UAAU,EAAE,aAAa;IACzB,gBAAgB,EAAE,mBAAmB;IACrC,SAAS,EAAE,YAAY;CACf,CAAC"}
+{"version":3,"file":"choiceThemeRoles.js","sourceRoot":"","sources":["../../../src/components/Choice/choiceThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,kBAAkB,GAAG;IAChC,eAAe,EAAE,kBAAkB;IACnC,UAAU,EAAE,aAAa;IACzB,gBAAgB,EAAE,mBAAmB;IACrC,SAAS,EAAE,YAAY;IACvB,aAAa,EAAE,gBAAgB;CACvB,CAAC"}

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

@@ -8,6 +8,11 @@ export type ChoiceProps = {
     /** `({ color, size }) => ReactNode`, e.g. an expo-symbols `SymbolView`. */
     icon?: ButtonIcon;
     onPress: () => void;
+    /**
+     * Makes the choice a selectable option: a highlight border when true,
+     * read as a selected radio. Leave it out for a choice that just acts.
+     */
+    selected?: boolean;
     disabled?: boolean;
     /** Icon box. Default 28. */
     iconSize?: number;
@@ -21,6 +26,8 @@ export type ChoiceProps = {
     descriptionColor?: string;
     /** Defaults to theme role `choiceIcon`. */
     iconColor?: string;
+    /** Border of a selected choice. Defaults to theme role `choiceSelected`. */
+    selectedColor?: string;
     style?: StyleProp<ViewStyle>;
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

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