@studio-piot/native-ui 0.16.0 → 0.17.0

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":"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"}
+{"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/index.d.ts

@@ -1,4 +1,4 @@
-export declare const version = "0.16.0";
+export declare const version = "0.17.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";

package/dist/index.js

@@ -38,7 +38,7 @@ 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.version = "0.17.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; } });

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-piot/native-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Shared React Native components for Studio Piot apps.",
   "homepage": "https://github.com/Studio-Piot/studio-native-ui#readme",
   "bugs": {

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

package/src/index.ts

@@ -1,4 +1,4 @@
-export const version = "0.16.0";
+export const version = "0.17.0";
 
 export * from "./theme";
 export { SHEET_TOP_RADIUS, screenPaddingHorizontal } from "./layout";