@studio-piot/native-ui 0.16.0 → 0.20.0

package/dist/date-time.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * `@studio-piot/native-ui/date-time`: the date and time field. A separate
+ * entry so `@expo/ui`, which it needs, stays optional for apps without it.
+ */
+__exportStar(require("./components/DateTime"), exports);
+//# sourceMappingURL=date-time.js.map

package/dist/date-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time.js","sourceRoot":"","sources":["../src/date-time.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA;;;GAGG;AACH,wDAAsC"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.16.0";
+export declare const version = "0.20.0";
 export * from "./theme";
 export { SHEET_TOP_RADIUS, screenPaddingHorizontal } from "./layout";
 export { Button, BUTTON_ICON_SIZE, BUTTON_THEME_ROLES, buttonRadiusValue, type ButtonIcon, type ButtonIconPosition, type ButtonProps, type ButtonRadius, type ButtonThemeColorProp, type ButtonVariant, } from "./components/Button";
@@ -15,6 +15,7 @@ export { Slider, SLIDER_THEME_ROLES, type SliderThemeColorProp, type SliderProps
 export { HeaderCapsule, HeaderGroup, HeaderIcon, HEADER_BUTTON_THEME_ROLES, supportsLiquidGlass, type HeaderButtonThemeColorProp, type HeaderButtonIcon, type HeaderCapsuleProps, type HeaderGroupProps, type HeaderIconProps, } from "./components/HeaderButton";
 export { HeaderWash } from "./components/HeaderWash";
 export { TabAccessoryButton, TAB_ACCESSORY_SCREEN_INSET, TAB_ACCESSORY_THEME_ROLES, tabAccessoryScreenInset, type TabAccessoryButtonProps, type TabAccessoryPlacement, type TabAccessoryThemeColorProp, type TabAccessoryVariant, } from "./components/TabAccessoryButton";
+export { Tabs, TABS_THEME_ROLES, type TabItem, type TabsProps, type TabsThemeColorProp, } from "./components/Tabs";
 export { Page, PageBleed, PAGE_THEME_ROLES, type PageBleedProps, type PageProps, type PageTabAccessory, type PageThemeColorProp, } from "./components/Page";
 export * as components from "./components";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -37,8 +37,8 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TAB_ACCESSORY_SCREEN_INSET = exports.TabAccessoryButton = exports.HeaderWash = exports.supportsLiquidGlass = exports.HEADER_BUTTON_THEME_ROLES = exports.HeaderIcon = exports.HeaderGroup = exports.HeaderCapsule = exports.SLIDER_THEME_ROLES = exports.Slider = exports.SEGMENTED_THEME_ROLES = exports.SegmentedControl = exports.resolveSelectDetentIndex = exports.detentsToSnapPoints = exports.DEFAULT_SELECT_INITIAL_DETENT = exports.DEFAULT_SELECT_DETENTS = exports.SELECT_THEME_ROLES = exports.SelectCloseButton = exports.Select = exports.RADIO_THEME_ROLES = exports.RadioField = exports.useErrorBannerField = exports.useErrorBannerDismiss = exports.useErrorBannerContext = exports.useErrorBanner = exports.ERROR_BANNER_THEME_ROLES = exports.ErrorBannerProvider = exports.ErrorBannerField = exports.ErrorBanner = exports.formSheetSnapPoints = exports.FORM_SHEET_THEME_ROLES = exports.FormSheet = exports.FORM_THEME_ROLES = exports.FormCloseButton = exports.Form = exports.FIELD_THEME_ROLES = exports.FieldTextarea = exports.FieldText = exports.filterLinkBlockGroups = exports.LinkBlocks = exports.CHOICE_THEME_ROLES = exports.CHOICE_ICON_SIZE = exports.Choice = exports.buttonRadiusValue = exports.BUTTON_THEME_ROLES = exports.BUTTON_ICON_SIZE = exports.Button = exports.screenPaddingHorizontal = exports.SHEET_TOP_RADIUS = exports.version = void 0;
-exports.components = exports.PAGE_THEME_ROLES = exports.PageBleed = exports.Page = exports.tabAccessoryScreenInset = exports.TAB_ACCESSORY_THEME_ROLES = void 0;
-exports.version = "0.16.0";
+exports.components = exports.PAGE_THEME_ROLES = exports.PageBleed = exports.Page = exports.TABS_THEME_ROLES = exports.Tabs = exports.tabAccessoryScreenInset = exports.TAB_ACCESSORY_THEME_ROLES = void 0;
+exports.version = "0.20.0";
 __exportStar(require("./theme"), exports);
 var layout_1 = require("./layout");
 Object.defineProperty(exports, "SHEET_TOP_RADIUS", { enumerable: true, get: function () { return layout_1.SHEET_TOP_RADIUS; } });
@@ -106,6 +106,9 @@ Object.defineProperty(exports, "TabAccessoryButton", { enumerable: true, get: fu
 Object.defineProperty(exports, "TAB_ACCESSORY_SCREEN_INSET", { enumerable: true, get: function () { return TabAccessoryButton_1.TAB_ACCESSORY_SCREEN_INSET; } });
 Object.defineProperty(exports, "TAB_ACCESSORY_THEME_ROLES", { enumerable: true, get: function () { return TabAccessoryButton_1.TAB_ACCESSORY_THEME_ROLES; } });
 Object.defineProperty(exports, "tabAccessoryScreenInset", { enumerable: true, get: function () { return TabAccessoryButton_1.tabAccessoryScreenInset; } });
+var Tabs_1 = require("./components/Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
+Object.defineProperty(exports, "TABS_THEME_ROLES", { enumerable: true, get: function () { return Tabs_1.TABS_THEME_ROLES; } });
 var Page_1 = require("./components/Page");
 Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
 Object.defineProperty(exports, "PageBleed", { enumerable: true, get: function () { return Page_1.PageBleed; } });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,0CAAwB;AACxB,mCAAqE;AAA5D,0GAAA,gBAAgB,OAAA;AAAE,iHAAA,uBAAuB,OAAA;AAClD,8CAW6B;AAV3B,gGAAA,MAAM,OAAA;AACN,0GAAA,gBAAgB,OAAA;AAChB,4GAAA,kBAAkB,OAAA;AAClB,2GAAA,iBAAiB,OAAA;AAQnB,8CAM6B;AAL3B,gGAAA,MAAM,OAAA;AACN,0GAAA,gBAAgB,OAAA;AAChB,4GAAA,kBAAkB,OAAA;AAIpB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAM2B;AALzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AACf,wGAAA,gBAAgB,OAAA;AAIlB,oDASgC;AAR9B,sGAAA,SAAS,OAAA;AACT,mHAAA,sBAAsB,OAAA;AACtB,gHAAA,mBAAmB,OAAA;AAOrB,wDAakC;AAZhC,0GAAA,WAAW,OAAA;AACX,+GAAA,gBAAgB,OAAA;AAChB,kHAAA,mBAAmB,OAAA;AACnB,uHAAA,wBAAwB,OAAA;AACxB,6GAAA,cAAc,OAAA;AACd,oHAAA,qBAAqB,OAAA;AACrB,oHAAA,qBAAqB,OAAA;AACrB,kHAAA,mBAAmB,OAAA;AAMrB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,kEAMuC;AALrC,oHAAA,gBAAgB,OAAA;AAChB,yHAAA,qBAAqB,OAAA;AAKvB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,0DAWmC;AAVjC,6GAAA,aAAa,OAAA;AACb,2GAAA,WAAW,OAAA;AACX,0GAAA,UAAU,OAAA;AACV,yHAAA,yBAAyB,OAAA;AACzB,mHAAA,mBAAmB,OAAA;AAOrB,sDAAqD;AAA5C,wGAAA,UAAU,OAAA;AACnB,sEASyC;AARvC,wHAAA,kBAAkB,OAAA;AAClB,gIAAA,0BAA0B,OAAA;AAC1B,+HAAA,yBAAyB,OAAA;AACzB,6HAAA,uBAAuB,OAAA;AAMzB,0CAQ2B;AAPzB,4FAAA,IAAI,OAAA;AACJ,iGAAA,SAAS,OAAA;AACT,wGAAA,gBAAgB,OAAA;AAMlB,2DAA2C"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAa,QAAA,OAAO,GAAG,QAAQ,CAAC;AAEhC,0CAAwB;AACxB,mCAAqE;AAA5D,0GAAA,gBAAgB,OAAA;AAAE,iHAAA,uBAAuB,OAAA;AAClD,8CAW6B;AAV3B,gGAAA,MAAM,OAAA;AACN,0GAAA,gBAAgB,OAAA;AAChB,4GAAA,kBAAkB,OAAA;AAClB,2GAAA,iBAAiB,OAAA;AAQnB,8CAM6B;AAL3B,gGAAA,MAAM,OAAA;AACN,0GAAA,gBAAgB,OAAA;AAChB,4GAAA,kBAAkB,OAAA;AAIpB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,mHAAA,qBAAqB,OAAA;AAKvB,4CAQ4B;AAP1B,kGAAA,SAAS,OAAA;AACT,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AAMnB,0CAM2B;AALzB,4FAAA,IAAI,OAAA;AACJ,uGAAA,eAAe,OAAA;AACf,wGAAA,gBAAgB,OAAA;AAIlB,oDASgC;AAR9B,sGAAA,SAAS,OAAA;AACT,mHAAA,sBAAsB,OAAA;AACtB,gHAAA,mBAAmB,OAAA;AAOrB,wDAakC;AAZhC,0GAAA,WAAW,OAAA;AACX,+GAAA,gBAAgB,OAAA;AAChB,kHAAA,mBAAmB,OAAA;AACnB,uHAAA,wBAAwB,OAAA;AACxB,6GAAA,cAAc,OAAA;AACd,oHAAA,qBAAqB,OAAA;AACrB,oHAAA,qBAAqB,OAAA;AACrB,kHAAA,mBAAmB,OAAA;AAMrB,sDAMiC;AAL/B,wGAAA,UAAU,OAAA;AACV,+GAAA,iBAAiB,OAAA;AAKnB,8CAY6B;AAX3B,gGAAA,MAAM,OAAA;AACN,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,gHAAA,sBAAsB,OAAA;AACtB,uHAAA,6BAA6B,OAAA;AAC7B,6GAAA,mBAAmB,OAAA;AACnB,kHAAA,wBAAwB,OAAA;AAM1B,kEAMuC;AALrC,oHAAA,gBAAgB,OAAA;AAChB,yHAAA,qBAAqB,OAAA;AAKvB,8CAK6B;AAJ3B,gGAAA,MAAM,OAAA;AACN,4GAAA,kBAAkB,OAAA;AAIpB,0DAWmC;AAVjC,6GAAA,aAAa,OAAA;AACb,2GAAA,WAAW,OAAA;AACX,0GAAA,UAAU,OAAA;AACV,yHAAA,yBAAyB,OAAA;AACzB,mHAAA,mBAAmB,OAAA;AAOrB,sDAAqD;AAA5C,wGAAA,UAAU,OAAA;AACnB,sEASyC;AARvC,wHAAA,kBAAkB,OAAA;AAClB,gIAAA,0BAA0B,OAAA;AAC1B,+HAAA,yBAAyB,OAAA;AACzB,6HAAA,uBAAuB,OAAA;AAMzB,0CAM2B;AALzB,4FAAA,IAAI,OAAA;AACJ,wGAAA,gBAAgB,OAAA;AAKlB,0CAQ2B;AAPzB,4FAAA,IAAI,OAAA;AACJ,iGAAA,SAAS,OAAA;AACT,wGAAA,gBAAgB,OAAA;AAMlB,2DAA2C"}

package/dist/layout/SheetContainer.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+/** Renders a bottom sheet above React Navigation native modals (iOS). */
+export declare function SheetContainer({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=SheetContainer.d.ts.map

package/dist/layout/SheetContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetContainer.d.ts","sourceRoot":"","sources":["../../src/layout/SheetContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAKpE"}

package/dist/layout/SheetContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetContainer = SheetContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const react_native_screens_1 = require("react-native-screens");
+/** Renders a bottom 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 });
+}
+//# sourceMappingURL=SheetContainer.js.map

package/dist/layout/SheetContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetContainer.js","sourceRoot":"","sources":["../../src/layout/SheetContainer.tsx"],"names":[],"mappings":";;AAKA,wCAKC;;AATD,+CAAwC;AACxC,+DAAyD;AAEzD,yEAAyE;AACzE,SAAgB,cAAc,CAAC,EAAE,QAAQ,EAA4B;IACnE,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,uBAAC,wCAAiB,cAAE,QAAQ,GAAqB,CAAC;IAC3D,CAAC;IACD,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC"}

package/docs/components/choice.md

@@ -2,7 +2,7 @@
 
 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, as in "What are you doing? Running / HIIT".
 
-Use `Choice` for a short list of destinations. To pick a value that stays on the screen, use [RadioField](./radio-field.md), [SegmentedControl](./segmented-control.md) or [Select](./select.md). For a settings list of links, use [LinkBlocks](./link-blocks.md).
+Use `Choice` for a short list of destinations, or, with `selected`, for picking one of a few visual options such as candidate routes. To pick a value that stays on the screen, use [RadioField](./radio-field.md), [SegmentedControl](./segmented-control.md) or [Select](./select.md). For a settings list of links, use [LinkBlocks](./link-blocks.md).
 
 ## Basic usage
 
@@ -42,9 +42,29 @@ export default function NewActivity() {
 - **Title only.** `description` is optional.
 - **Spacing.** Put choices in a stack with a 16pt gap. The row has no margin of its own.
 
+## Selectable choices
+
+Pass `selected` to make the choices a set where one is picked, for example candidate routes with a drawing of each in the icon slot. The selected row gets a highlight border (`choiceSelected`); the others keep a transparent border of the same width, so nothing shifts when the selection moves. Tapping still calls `onPress`, where you update the selection.
+
+```tsx
+{routes.map((route) => (
+  <Choice
+    key={route.id}
+    title={route.name}
+    description={`${route.km} km`}
+    icon={({ color, size }) => <RouteThumbnail route={route} color={color} size={size} />}
+    iconSize={48}
+    selected={route.id === selectedId}
+    onPress={() => setSelectedId(route.id)}
+  />
+))}
+```
+
+Pair it with one action that uses the selection, e.g. **Use this route**. Leave `selected` out when tapping should just act.
+
 ## Accessibility
 
-The row is one button. VoiceOver reads its text together, for example "Running, Outdoors, with GPS, button". The icon is decorative and hidden from screen readers. `disabled` sets the disabled state, fades the row to 40% and blocks presses.
+The row is one button. VoiceOver reads its text together, for example "Running, Outdoors, with GPS, button". With `selected`, it is a radio option instead, read as selected or not. The icon is decorative and hidden from screen readers. `disabled` sets the disabled state, fades the row to 40% and blocks presses.
 
 ## Theme roles
 
@@ -56,6 +76,7 @@ Add these keys to both the light and dark maps.
 | Title | `choiceTitle` |
 | Description | `choiceDescription` |
 | Icon | `choiceIcon` |
+| Selected border (with `selected`) | `choiceSelected` |
 
 ## Props
 
@@ -63,7 +84,8 @@ Add these keys to both the light and dark maps.
 |---|---|---|---|
 | `title` | `string` | — | Required |
 | `onPress` | `() => void` | — | Required |
-| `description` | `string` | — | Second line under the title |
+| `description` | `string` | — | Second line under the title; may wrap to more lines |
+| `selected` | `boolean` | — | Makes it a selectable option: highlight border when true, radio semantics |
 | `icon` | `ButtonIcon` | — | `({ color, size }) => ReactNode` |
 | `iconSize` | `number` | `28` | Icon box |
 | `disabled` | `boolean` | `false` | 40% opacity; not pressable |
@@ -72,6 +94,7 @@ Add these keys to both the light and dark maps.
 | `titleColor` | `string` | theme `choiceTitle` | Optional override |
 | `descriptionColor` | `string` | theme `choiceDescription` | Optional override |
 | `iconColor` | `string` | theme `choiceIcon` | Optional override |
+| `selectedColor` | `string` | theme `choiceSelected` | Optional override |
 | `style` | view style | — | Merged after the row |
 
 Layout: 72pt minimum height, 16pt horizontal and 14pt vertical padding, 12pt between the icon and the text. The title is 17pt semibold and the description 13pt, the same as the rest of the package.

package/docs/components/field-date-time.md

@@ -0,0 +1,89 @@
+# FieldDateTime — usage
+
+A date, time, or date-and-time field that matches `FieldText` and `Select`: label, value, description or error, and a `name` for the error banner. Tapping it opens the native picker:
+
+- **iOS:** a bottom panel with SwiftUI's picker (a calendar for `date`, wheels for `time` and `datetime`) and **Done**. Tapping outside keeps the old value. It opens in a React Native `Modal`, so it works anywhere, including inside a sheet (`FormSheet`) or a native modal.
+- **Android:** the system date dialog, then the time dialog for `datetime`.
+
+## Import and peer dependency
+
+`FieldDateTime` has its own entry, so apps without it don't need its native dependency:
+
+```bash
+npx expo install @expo/ui
+```
+
+```tsx
+import { FieldDateTime } from "@studio-piot/native-ui/date-time";
+```
+
+`@expo/ui` is an optional peer of the package: only this entry uses it. No provider is needed.
+
+## Basic usage
+
+```tsx
+const [when, setWhen] = useState<Date | null>(null);
+
+<FieldDateTime
+  name="when"
+  label="When are you running?"
+  value={when}
+  onChange={setWhen}
+  minimumDate={new Date()}
+  description="We'll remind you an hour before."
+/>
+```
+
+- **Modes.** `mode="date"`, `"time"` or `"datetime"` (default).
+- **Limits.** `minimumDate` / `maximumDate` limit the picker; a chosen value is also kept inside them.
+- **Display.** Values show as "Sat 3 Oct 2026 · 08:05" (local time). Pass `formatValue` for your own wording, e.g. "Tomorrow · 08:00".
+- **Empty.** With `value={null}` the field shows `placeholder` ("Choose a date" / "Choose a time").
+- **Errors.** `error` shows under the field with an error border; with `name`, a banner row opens the picker.
+
+## Theme roles
+
+The same roles as `FieldText` and `Select`, so date fields match the form.
+
+| Usage | Role |
+|---|---|
+| Field fill, sheet | `fieldBackground` |
+| Value, sheet title | `fieldText` |
+| Placeholder, chevron, drag indicator | `fieldPlaceholder` |
+| Label | `fieldLabel` |
+| Description | `fieldDescription` |
+| Border, sheet divider | `fieldBorder` |
+| Error text and border | `fieldError` |
+| Done, picker tint | `fieldSelectSelected` |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `value` | `Date \| null` | — | Required |
+| `onChange` | `(value: Date) => void` | — | Required. Called on Done (iOS) or when the dialogs finish (Android) |
+| `mode` | `"date" \| "time" \| "datetime"` | `"datetime"` | |
+| `name` | `string` | — | Error banner target |
+| `label` | `string` | — | |
+| `description` | `string` | — | |
+| `error` | `string` | — | |
+| `placeholder` | `string` | "Choose a date" / "Choose a time" | |
+| `minimumDate` / `maximumDate` | `Date` | — | |
+| `formatValue` | `(value: Date) => string` | "Sat 3 Oct 2026 · 08:05" | |
+| `sheetTitle` | `string` | `label` | iOS sheet title |
+| `doneLabel` | `string` | `"Done"` | |
+| `radius` | `ButtonRadius` | `"xl"` | |
+| `editable` | `boolean` | `true` | |
+| Colour props | `string` | theme | `backgroundColor`, `textColor`, `placeholderColor`, `labelColor`, `descriptionColor`, `borderColor`, `errorColor`, `accentColor` |
+| `style` | view style | — | |
+
+## Imports
+
+```ts
+import {
+  FieldDateTime,
+  DATE_TIME_THEME_ROLES,
+  formatDateTimeValue,
+  type DateTimeMode,
+  type FieldDateTimeProps,
+} from "@studio-piot/native-ui/date-time";
+```

package/docs/components/tabs.md

@@ -0,0 +1,85 @@
+# Tabs — usage
+
+Underline tabs that switch between views of the same screen, for example **Planned** and **Completed** on an Activities list. Equal-width labels sit on a hairline, and an underline slides to the active tab.
+
+Tabs change what one screen shows; they don't navigate. For a choice inside a form, use [SegmentedControl](./segmented-control.md). For the app's main sections, use the native tab bar.
+
+## Basic usage
+
+```tsx
+import { Page, Tabs } from "@studio-piot/native-ui";
+import { useState } from "react";
+
+type View = "planned" | "completed";
+
+export default function Activities() {
+  const [view, setView] = useState<View>("planned");
+
+  return (
+    <Page>
+      <Tabs
+        value={view}
+        onChange={setView}
+        tabs={[
+          { value: "planned", label: "Planned" },
+          { value: "completed", label: "Completed" },
+        ]}
+      />
+      {view === "planned" ? <PlannedList /> : <CompletedList />}
+    </Page>
+  );
+}
+```
+
+- **Controlled.** Hold `value` in state; `onChange` gets the tapped tab's value.
+- **Width.** Tabs fill their parent and share it equally. Inside a padded `Page`, the line runs between the page margins.
+- **Edge-to-edge line.** To run the hairline across the whole screen while the tabs stay in line with the content, take the row to the edges with `PageBleed` and set `inset` to the page margin:
+
+  ```tsx
+  const { screen } = useThemeSpacing();
+
+  <PageBleed>
+    <Tabs inset={screen} value={view} onChange={setView} tabs={tabs} />
+  </PageBleed>
+  ```
+- **Icons.** Give a tab an `icon` render function, like `Button`'s, to show it left of the label. It gets the label's colour (active or inactive) and size 17; it's hidden from screen readers.
+
+  ```tsx
+  { value: "planned", label: "Planned", icon: ({ color, size }) => <SymbolView name="calendar" size={size} tintColor={color} /> }
+  ```
+- **Disabled tabs** show at 40% and can't be pressed.
+
+## Accessibility
+
+The row is a tab list and each tab is a tab, with `selected` on the active one, so VoiceOver reads "Planned, tab, selected, 1 of 2".
+
+## Theme roles
+
+| Usage | Role |
+|---|---|
+| Hairline under the tabs | `tabsBorder` |
+| Inactive label | `tabsLabel` |
+| Active label | `tabsActiveLabel` |
+| Sliding underline | `tabsIndicator` |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|---|---|---|---|
+| `value` | `T` | — | Required. The active tab |
+| `onChange` | `(value: T) => void` | — | Required |
+| `tabs` | `TabItem<T>[]` | — | Required. `{ value, label, icon?, disabled? }`. Empty renders nothing |
+| `inset` | `number` | `0` | Space each side for the tabs and underline; the hairline still spans the full width |
+| `borderColor` | `string` | theme `tabsBorder` | Optional override |
+| `labelColor` | `string` | theme `tabsLabel` | Optional override |
+| `activeLabelColor` | `string` | theme `tabsActiveLabel` | Optional override |
+| `indicatorColor` | `string` | theme `tabsIndicator` | Optional override |
+| `style` | view style | — | The tab row |
+
+Layout: labels 15pt semibold with 12pt above and below; the underline is 2pt and slides over 300ms. Uses `react-native-reanimated`, already a peer for `SegmentedControl` and `Select`.
+
+## Imports
+
+```ts
+import { Tabs, TABS_THEME_ROLES, type TabItem, type TabsProps } from "@studio-piot/native-ui";
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-piot/native-ui",
-  "version": "0.16.0",
+  "version": "0.20.0",
   "description": "Shared React Native components for Studio Piot apps.",
   "homepage": "https://github.com/Studio-Piot/studio-native-ui#readme",
   "bugs": {
@@ -29,6 +29,13 @@
       "import": "./dist/components/index.js",
       "require": "./dist/components/index.js",
       "default": "./dist/components/index.js"
+    },
+    "./date-time": {
+      "types": "./dist/date-time.d.ts",
+      "react-native": "./dist/date-time.js",
+      "import": "./dist/date-time.js",
+      "require": "./dist/date-time.js",
+      "default": "./dist/date-time.js"
     }
   },
   "typesVersions": {
@@ -50,6 +57,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@expo/ui": ">=57.0.0",
     "@gorhom/bottom-sheet": "^5.2.14",
     "@react-native-community/slider": "^5.2.0",
     "react": ">=19.0.0",
@@ -67,9 +75,10 @@
     "clean": "rm -rf dist *.tsbuildinfo",
     "dev": "tsc --watch",
     "prepare": "tsc",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "pnpm run build"
   },
   "devDependencies": {
+    "@expo/ui": "~57.0.19",
     "@gorhom/bottom-sheet": "^5.2.14",
     "@react-native-community/slider": "^5.2.0",
     "@types/react": "^19.2.2",
@@ -81,5 +90,10 @@
     "react-native-screens": "~4.26.0",
     "react-native-svg": "^15.15.4",
     "typescript": "^5.9.3"
+  },
+  "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    }
   }
 }

package/src/components/Choice/Choice.tsx

@@ -2,20 +2,23 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 import { buttonOpacity } from "../Button/buttonAppearance";
 import { buttonRadiusValue } from "../Button/buttonRadius";
 import { useResolvedFieldColor } from "../Field/useResolvedFieldColor";
-import { CHOICE_ICON_SIZE, choiceIconSlot } from "./choiceLayout";
+import { CHOICE_ICON_SIZE, choiceIconSlot, choiceSelection } from "./choiceLayout";
 import { CHOICE_THEME_ROLES } from "./choiceThemeRoles";
 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 function Choice({
   title,
   description,
   icon,
   onPress,
+  selected,
   disabled = false,
   iconSize = CHOICE_ICON_SIZE,
   radius = "xl",
@@ -23,6 +26,7 @@ export function Choice({
   titleColor: titleColorProp,
   descriptionColor: descriptionColorProp,
   iconColor: iconColorProp,
+  selectedColor: selectedColorProp,
   style,
 }: ChoiceProps) {
   const backgroundColor = useResolvedFieldColor(
@@ -41,20 +45,27 @@ export function Choice({
     iconColorProp,
     CHOICE_THEME_ROLES.iconColor,
   );
+  const selectedColor = useResolvedFieldColor(
+    selectedColorProp,
+    CHOICE_THEME_ROLES.selectedColor,
+  );
   const slot = choiceIconSlot(iconSize);
+  const selection = choiceSelection(selected);
 
   return (
     // No explicit label: the row groups its text, so VoiceOver reads the
     // title and description together ("Running, Outdoors, with GPS, button").
     <Pressable
-      accessibilityRole="button"
-      accessibilityState={{ disabled }}
+      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: buttonRadiusValue(radius),
           opacity: buttonOpacity({ disabled, loading: false, pressed }),
         },

package/src/components/Choice/choiceLayout.test.ts

@@ -1,6 +1,12 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { CHOICE_ICON_SIZE, CHOICE_ICON_SLOT, choiceIconSlot } from "./choiceLayout.ts";
+import {
+  CHOICE_ICON_SIZE,
+  CHOICE_ICON_SLOT,
+  CHOICE_SELECTED_BORDER,
+  choiceIconSlot,
+  choiceSelection,
+} from "./choiceLayout.ts";
 
 describe("choiceIconSlot", () => {
   it("keeps a steady slot so titles line up across rows", () => {
@@ -12,3 +18,32 @@ describe("choiceIconSlot", () => {
     assert.equal(choiceIconSlot(40), 40);
   });
 });
+
+describe("choiceSelection", () => {
+  it("is a plain button with no border when selection is not used", () => {
+    assert.deepEqual(choiceSelection(undefined), {
+      role: "button",
+      state: {},
+      borderWidth: 0,
+      highlighted: false,
+    });
+  });
+
+  it("is a selected radio with the highlight border", () => {
+    assert.deepEqual(choiceSelection(true), {
+      role: "radio",
+      state: { selected: true, checked: true },
+      borderWidth: CHOICE_SELECTED_BORDER,
+      highlighted: true,
+    });
+  });
+
+  it("keeps the border width when not selected, so rows do not jump", () => {
+    assert.deepEqual(choiceSelection(false), {
+      role: "radio",
+      state: { selected: false, checked: false },
+      borderWidth: CHOICE_SELECTED_BORDER,
+      highlighted: false,
+    });
+  });
+});

package/src/components/Choice/choiceLayout.ts

@@ -7,3 +7,28 @@ export const CHOICE_ICON_SLOT = 32;
 export function choiceIconSlot(iconSize: number): number {
   return Math.max(CHOICE_ICON_SLOT, iconSize);
 }
+
+/** Border around a selectable choice; drawn transparent when not selected. */
+export 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 function choiceSelection(selected: boolean | undefined): {
+  role: "button" | "radio";
+  state: { selected?: boolean; checked?: boolean };
+  borderWidth: number;
+  highlighted: boolean;
+} {
+  if (selected === undefined) {
+    return { role: "button", state: {}, borderWidth: 0, highlighted: false };
+  }
+  return {
+    role: "radio",
+    state: { selected, checked: selected },
+    borderWidth: CHOICE_SELECTED_BORDER,
+    highlighted: selected,
+  };
+}

package/src/components/Choice/choiceThemeRoles.test.ts

@@ -9,6 +9,7 @@ describe("CHOICE_THEME_ROLES", () => {
       titleColor: "choiceTitle",
       descriptionColor: "choiceDescription",
       iconColor: "choiceIcon",
+      selectedColor: "choiceSelected",
     });
   });
 });

package/src/components/Choice/choiceThemeRoles.ts

@@ -3,6 +3,7 @@ export const CHOICE_THEME_ROLES = {
   titleColor: "choiceTitle",
   descriptionColor: "choiceDescription",
   iconColor: "choiceIcon",
+  selectedColor: "choiceSelected",
 } as const;
 
 export type ChoiceThemeColorProp = keyof typeof CHOICE_THEME_ROLES;

package/src/components/Choice/types.ts

@@ -9,6 +9,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;
@@ -22,5 +27,7 @@ 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>;
 };