@studio-piot/native-ui 0.2.4 → 0.16.0

package/README.md

@@ -10,19 +10,38 @@ The package is the native counterpart of `@studio-piot/ui`. Apps own their palet
 npm install @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.
+`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.
+
+## Theme roles
+
+The package never reads your app's own colour names (`background`, `text`, `primary`, …). Every component reads roles with its own prefix (`buttonBackground`, `formBackground`, `pageBackground`, `segmentLabel`, …), and each one has a matching optional prop. Map those roles to your palette in the `ThemeProvider` colours:
+
+```ts
+const Colors = {
+  light: { pageBackground: palette.paper, buttonBackground: palette.brand, /* … */ },
+  dark: { pageBackground: palette.ink, buttonBackground: palette.brand, /* … */ },
+};
+```
+
+Each component doc lists its roles.
 
 ## Docs
 
 - [Theme provider and Button usage](./docs/components/button.md)
 - [LinkBlocks usage](./docs/components/link-blocks.md)
 - [Field usage](./docs/components/field.md)
+- [Choice usage](./docs/components/choice.md)
 - [Form usage](./docs/components/form.md)
+- [HeaderWash usage](./docs/components/header-wash.md)
+- [FormSheet usage](./docs/components/form-sheet.md)
 - [ErrorBanner usage](./docs/components/error-banner.md)
 - [RadioField usage](./docs/components/radio-field.md)
 - [Select usage](./docs/components/select.md)
 - [SegmentedControl usage](./docs/components/segmented-control.md)
 - [Slider usage](./docs/components/slider.md)
+- [Header buttons (Liquid Glass) usage](./docs/components/header-button.md)
+- [TabAccessoryButton (Liquid Glass) usage](./docs/components/tab-accessory-button.md)
+- [Page usage](./docs/components/page.md)
 - [Design: theme provider and Button](./docs/superpowers/specs/2026-09-24-theme-provider-button-design.md)
 - [Design: LinkBlocks](./docs/superpowers/specs/2026-09-24-link-blocks-design.md)
 - [Design: Field](./docs/superpowers/specs/2026-09-24-field-design.md)
@@ -33,32 +52,17 @@ npm install @studio-piot/native-ui
 ## Quick start
 
 ```tsx
-import {
-  Button,
-  ThemeProvider,
-  useThemeColor,
-} from "@studio-piot/native-ui";
+import { Button, ThemeProvider } from "@studio-piot/native-ui";
 
 const Colors = {
   light: { buttonBackground: "#111", buttonLabel: "#fff" },
   dark: { buttonBackground: "#eee", buttonLabel: "#111" },
 };
 
-function SaveButton({ onPress }: { onPress: () => void }) {
-  return (
-    <Button
-      label="Save"
-      onPress={onPress}
-      backgroundColor={useThemeColor("buttonBackground")}
-      labelColor={useThemeColor("buttonLabel")}
-    />
-  );
-}
-
 export function App() {
   return (
     <ThemeProvider colors={Colors}>
-      <SaveButton onPress={() => undefined} />
+      <Button label="Save" onPress={() => undefined} />
     </ThemeProvider>
   );
 }

package/dist/components/Button/Button.d.ts

@@ -1,16 +1,32 @@
+import type { ReactNode } from "react";
 import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import { type ButtonVariant } from "./buttonAppearance";
 import { type ButtonRadius } from "./buttonRadius";
+export declare const BUTTON_ICON_SIZE = 20;
+/** Renders the icon in the button's content colour, e.g. an expo-symbols `SymbolView`. */
+export type ButtonIcon = (props: {
+    color: string;
+    size: number;
+}) => ReactNode;
+export type ButtonIconPosition = "start" | "end" | "only";
 export type ButtonProps = {
+    /** Shown text, and the accessibility label (also when `iconPosition="only"`). */
     label: string;
     onPress: () => void;
-    backgroundColor: string;
-    labelColor: string;
+    /** Filled: fill. Outline: border, label and icon. Defaults to theme role `buttonBackground`. */
+    backgroundColor?: string;
+    /** Filled: label, icon and spinner. Defaults to theme role `buttonLabel`. */
+    labelColor?: string;
     disabled?: boolean;
     loading?: boolean;
-    variant?: "filled" | "outline";
+    variant?: ButtonVariant;
     radius?: ButtonRadius;
+    icon?: ButtonIcon;
+    /** Default `"start"`. `"only"` hides the label text; `label` stays the accessibility name. */
+    iconPosition?: ButtonIconPosition;
+    iconSize?: number;
     style?: StyleProp<ViewStyle>;
     labelStyle?: StyleProp<TextStyle>;
 };
-export declare function Button({ label, onPress, backgroundColor, labelColor, disabled, loading, variant, radius, style, labelStyle, }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ label, onPress, backgroundColor: backgroundColorProp, labelColor: labelColorProp, disabled, loading, variant, radius, icon, iconPosition, iconSize, style, labelStyle, }: ButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,eAAe,EACf,UAAU,EACV,QAAgB,EAChB,OAAe,EACf,OAAkB,EAClB,MAAa,EACb,KAAK,EACL,UAAU,GACX,EAAE,WAAW,+BA6Cb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,EAGL,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGtE,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,0FAA0F;AAC1F,MAAM,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,KAAK,SAAS,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gGAAgG;IAChG,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8FAA8F;IAC9F,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,eAAe,EAAE,mBAAmB,EACpC,UAAU,EAAE,cAAc,EAC1B,QAAgB,EAChB,OAAe,EACf,OAAkB,EAClB,MAAa,EACb,IAAI,EACJ,YAAsB,EACtB,QAA2B,EAC3B,KAAK,EACL,UAAU,GACX,EAAE,WAAW,+BAqDb"}

package/dist/components/Button/Button.js

@@ -1,44 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_ICON_SIZE = void 0;
 exports.Button = Button;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
+const useResolvedFieldColor_1 = require("../Field/useResolvedFieldColor");
+const buttonAppearance_1 = require("./buttonAppearance");
 const buttonRadius_1 = require("./buttonRadius");
-function Button({ label, onPress, backgroundColor, labelColor, disabled = false, loading = false, variant = "filled", radius = "xl", style, labelStyle, }) {
-    const blocked = disabled || loading;
-    const isOutline = variant === "outline";
-    const borderRadius = (0, buttonRadius_1.buttonRadiusValue)(radius);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { accessibilityLabel: label, accessibilityRole: "button", accessibilityState: { disabled: blocked, busy: loading }, activeOpacity: 0.75, disabled: blocked, onPress: onPress, style: [
+const buttonThemeRoles_1 = require("./buttonThemeRoles");
+exports.BUTTON_ICON_SIZE = 20;
+function Button({ label, onPress, backgroundColor: backgroundColorProp, labelColor: labelColorProp, disabled = false, loading = false, variant = "filled", radius = "xl", icon, iconPosition = "start", iconSize = exports.BUTTON_ICON_SIZE, style, labelStyle, }) {
+    const backgroundColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(backgroundColorProp, buttonThemeRoles_1.BUTTON_THEME_ROLES.backgroundColor);
+    const labelColor = (0, useResolvedFieldColor_1.useResolvedFieldColor)(labelColorProp, buttonThemeRoles_1.BUTTON_THEME_ROLES.labelColor);
+    const colors = (0, buttonAppearance_1.buttonColors)(variant, backgroundColor, labelColor);
+    const iconNode = icon?.({ color: colors.content, size: iconSize });
+    const showLabel = !(icon && iconPosition === "only");
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityLabel: label, accessibilityRole: "button", accessibilityState: { disabled: disabled || loading, busy: loading }, disabled: disabled || loading, onPress: onPress, style: ({ pressed }) => [
             styles.shell,
-            { borderRadius },
-            isOutline
-                ? {
-                    backgroundColor: "transparent",
-                    borderWidth: 1,
-                    borderColor: backgroundColor,
-                }
-                : { backgroundColor },
-            blocked && styles.blocked,
+            {
+                borderRadius: (0, buttonRadius_1.buttonRadiusValue)(radius),
+                backgroundColor: colors.fill,
+                opacity: (0, buttonAppearance_1.buttonOpacity)({ disabled, loading, pressed }),
+            },
+            colors.border != null && {
+                borderWidth: 1,
+                borderColor: colors.border,
+            },
             style,
-        ], children: loading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: isOutline ? backgroundColor : labelColor, size: "small" })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                styles.label,
-                { color: isOutline ? backgroundColor : labelColor },
-                labelStyle,
-            ], children: label })) }));
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.content, loading && styles.hidden], children: [iconPosition !== "end" ? iconNode : null, showLabel ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.label, { color: colors.content }, labelStyle], children: label })) : null, iconPosition === "end" ? iconNode : null] }), loading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: colors.content, size: "small", style: react_native_1.StyleSheet.absoluteFill })) : null] }));
 }
 const styles = react_native_1.StyleSheet.create({
     shell: {
         width: "100%",
         minHeight: 52,
+        paddingHorizontal: 20,
+        paddingVertical: 12,
         alignItems: "center",
         justifyContent: "center",
     },
-    blocked: {
-        opacity: 0.4,
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+    },
+    hidden: {
+        opacity: 0,
     },
     label: {
+        flexShrink: 1,
         fontSize: 17,
         fontWeight: "600",
+        textAlign: "center",
     },
 });
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;AAwBA,wBAwDC;;AAhFD,+CAQsB;AACtB,iDAAsE;AAetE,SAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,eAAe,EACf,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,QAAQ,EAClB,MAAM,GAAG,IAAI,EACb,KAAK,EACL,UAAU,GACE;IACZ,MAAM,OAAO,GAAG,QAAQ,IAAI,OAAO,CAAC;IACpC,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC;IACxC,MAAM,YAAY,GAAG,IAAA,gCAAiB,EAAC,MAAM,CAAC,CAAC;IAE/C,OAAO,CACL,uBAAC,+BAAgB,IACf,kBAAkB,EAAE,KAAK,EACzB,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,EACxD,aAAa,EAAE,IAAI,EACnB,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL,MAAM,CAAC,KAAK;YACZ,EAAE,YAAY,EAAE;YAChB,SAAS;gBACP,CAAC,CAAC;oBACE,eAAe,EAAE,aAAa;oBAC9B,WAAW,EAAE,CAAC;oBACd,WAAW,EAAE,eAAe;iBAC7B;gBACH,CAAC,CAAC,EAAE,eAAe,EAAE;YACvB,OAAO,IAAI,MAAM,CAAC,OAAO;YACzB,KAAK;SACN,YAEA,OAAO,CAAC,CAAC,CAAC,CACT,uBAAC,gCAAiB,IAChB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,EAC/C,IAAI,EAAC,OAAO,GACZ,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,mBAAI,IACH,KAAK,EAAE;gBACL,MAAM,CAAC,KAAK;gBACZ,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,EAAE;gBACnD,UAAU;aACX,YAEA,KAAK,GACD,CACR,GACgB,CACpB,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,yBAAU,CAAC,MAAM,CAAC;IAC/B,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,EAAE;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,GAAG;KACb;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/Button/buttonAppearance.d.ts

@@ -0,0 +1,20 @@
+export type ButtonVariant = "filled" | "outline";
+/**
+ * Fill, border and content (label, icon, spinner) colours for a variant.
+ * Outline draws everything in `background`; `label` is unused there.
+ */
+export declare function buttonColors(variant: ButtonVariant, background: string, label: string): {
+    fill: string;
+    border: string | undefined;
+    content: string;
+};
+/**
+ * Disabled fades the button. Loading only blocks presses: a spinner on a
+ * faded button reads as broken, not busy.
+ */
+export declare function buttonOpacity({ disabled, loading, pressed, }: {
+    disabled: boolean;
+    loading: boolean;
+    pressed: boolean;
+}): number;
+//# sourceMappingURL=buttonAppearance.d.ts.map

package/dist/components/Button/buttonAppearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonAppearance.d.ts","sourceRoot":"","sources":["../../../src/components/Button/buttonAppearance.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,GACZ;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAK/D;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;CAClB,GAAG,MAAM,CAQT"}

package/dist/components/Button/buttonAppearance.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonColors = buttonColors;
+exports.buttonOpacity = buttonOpacity;
+/**
+ * Fill, border and content (label, icon, spinner) colours for a variant.
+ * Outline draws everything in `background`; `label` is unused there.
+ */
+function buttonColors(variant, background, label) {
+    if (variant === "outline") {
+        return { fill: "transparent", border: background, content: background };
+    }
+    return { fill: background, border: undefined, content: label };
+}
+/**
+ * Disabled fades the button. Loading only blocks presses: a spinner on a
+ * faded button reads as broken, not busy.
+ */
+function buttonOpacity({ disabled, loading, pressed, }) {
+    if (disabled) {
+        return 0.4;
+    }
+    if (pressed && !loading) {
+        return 0.75;
+    }
+    return 1;
+}
+//# sourceMappingURL=buttonAppearance.js.map

package/dist/components/Button/buttonAppearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonAppearance.js","sourceRoot":"","sources":["../../../src/components/Button/buttonAppearance.ts"],"names":[],"mappings":";;AAMA,oCASC;AAMD,sCAgBC;AAnCD;;;GAGG;AACH,SAAgB,YAAY,CAC1B,OAAsB,EACtB,UAAkB,EAClB,KAAa;IAEb,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;IAC1E,CAAC;IACD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;AACjE,CAAC;AAED;;;GAGG;AACH,SAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,OAAO,GAKR;IACC,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,GAAG,CAAC;IACb,CAAC;IACD,IAAI,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CAAC,CAAC;AACX,CAAC"}

package/dist/components/Button/buttonThemeRoles.d.ts

@@ -0,0 +1,6 @@
+export declare const BUTTON_THEME_ROLES: {
+    readonly backgroundColor: "buttonBackground";
+    readonly labelColor: "buttonLabel";
+};
+export type ButtonThemeColorProp = keyof typeof BUTTON_THEME_ROLES;
+//# sourceMappingURL=buttonThemeRoles.d.ts.map

package/dist/components/Button/buttonThemeRoles.d.ts.map

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

package/dist/components/Button/buttonThemeRoles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_THEME_ROLES = void 0;
+exports.BUTTON_THEME_ROLES = {
+    backgroundColor: "buttonBackground",
+    labelColor: "buttonLabel",
+};
+//# sourceMappingURL=buttonThemeRoles.js.map

package/dist/components/Button/buttonThemeRoles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonThemeRoles.js","sourceRoot":"","sources":["../../../src/components/Button/buttonThemeRoles.ts"],"names":[],"mappings":";;;AAAa,QAAA,kBAAkB,GAAG;IAChC,eAAe,EAAE,kBAAkB;IACnC,UAAU,EAAE,aAAa;CACjB,CAAC"}

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

@@ -1,3 +1,5 @@
-export { Button, type ButtonProps } from "./Button";
+export { Button, BUTTON_ICON_SIZE, type ButtonIcon, type ButtonIconPosition, type ButtonProps, } from "./Button";
+export type { ButtonVariant } from "./buttonAppearance";
 export { buttonRadiusValue, type ButtonRadius } from "./buttonRadius";
+export { BUTTON_THEME_ROLES, type ButtonThemeColorProp, } from "./buttonThemeRoles";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACvB,KAAK,WAAW,GACjB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EACL,kBAAkB,EAClB,KAAK,oBAAoB,GAC1B,MAAM,oBAAoB,CAAC"}

package/dist/components/Button/index.js

@@ -1,8 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonRadiusValue = exports.Button = void 0;
+exports.BUTTON_THEME_ROLES = exports.buttonRadiusValue = exports.BUTTON_ICON_SIZE = exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "BUTTON_ICON_SIZE", { enumerable: true, get: function () { return Button_1.BUTTON_ICON_SIZE; } });
 var buttonRadius_1 = require("./buttonRadius");
 Object.defineProperty(exports, "buttonRadiusValue", { enumerable: true, get: function () { return buttonRadius_1.buttonRadiusValue; } });
+var buttonThemeRoles_1 = require("./buttonThemeRoles");
+Object.defineProperty(exports, "BUTTON_THEME_ROLES", { enumerable: true, get: function () { return buttonThemeRoles_1.BUTTON_THEME_ROLES; } });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,+CAAsE;AAA7D,iHAAA,iBAAiB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAMkB;AALhB,gGAAA,MAAM,OAAA;AACN,0GAAA,gBAAgB,OAAA;AAMlB,+CAAsE;AAA7D,iHAAA,iBAAiB,OAAA;AAC1B,uDAG4B;AAF1B,sHAAA,kBAAkB,OAAA"}

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

@@ -0,0 +1,8 @@
+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.
+ */
+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;
+//# sourceMappingURL=Choice.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Choice/Choice.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Choice = Choice;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const buttonAppearance_1 = require("../Button/buttonAppearance");
+const buttonRadius_1 = require("../Button/buttonRadius");
+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.
+ */
+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, }) {
+    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 slot = (0, choiceLayout_1.choiceIconSlot)(iconSize);
+    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 }) => [
+            styles.row,
+            {
+                backgroundColor,
+                borderRadius: (0, buttonRadius_1.buttonRadiusValue)(radius),
+                opacity: (0, buttonAppearance_1.buttonOpacity)({ disabled, loading: false, pressed }),
+            },
+            style,
+        ], children: [icon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, style: [styles.icon, { width: slot, height: slot }], children: icon({ color: iconColor, size: iconSize }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.copy, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.title, { color: titleColor }], children: title }), description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.description, { color: descriptionColor }], children: description })) : null] })] }));
+}
+const styles = react_native_1.StyleSheet.create({
+    row: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 12,
+        minHeight: 72,
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+    },
+    icon: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    copy: {
+        flex: 1,
+        gap: 2,
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: "600",
+    },
+    description: {
+        fontSize: 13,
+    },
+});
+//# sourceMappingURL=Choice.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+/** Default icon box, sized for an SF Symbol next to a two-line label. */
+export declare const CHOICE_ICON_SIZE = 28;
+/** Icon column width, so titles line up across a list of choices. */
+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;
+//# sourceMappingURL=choiceLayout.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Choice/choiceLayout.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHOICE_ICON_SLOT = exports.CHOICE_ICON_SIZE = void 0;
+exports.choiceIconSlot = choiceIconSlot;
+/** 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. */
+exports.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. */
+function choiceIconSlot(iconSize) {
+    return Math.max(exports.CHOICE_ICON_SLOT, iconSize);
+}
+//# sourceMappingURL=choiceLayout.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+export declare const CHOICE_THEME_ROLES: {
+    readonly backgroundColor: "choiceBackground";
+    readonly titleColor: "choiceTitle";
+    readonly descriptionColor: "choiceDescription";
+    readonly iconColor: "choiceIcon";
+};
+export type ChoiceThemeColorProp = keyof typeof CHOICE_THEME_ROLES;
+//# sourceMappingURL=choiceThemeRoles.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Choice/choiceThemeRoles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHOICE_THEME_ROLES = void 0;
+exports.CHOICE_THEME_ROLES = {
+    backgroundColor: "choiceBackground",
+    titleColor: "choiceTitle",
+    descriptionColor: "choiceDescription",
+    iconColor: "choiceIcon",
+};
+//# sourceMappingURL=choiceThemeRoles.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,5 @@
+export { Choice } from "./Choice";
+export { CHOICE_ICON_SIZE } from "./choiceLayout";
+export { CHOICE_THEME_ROLES, type ChoiceThemeColorProp } from "./choiceThemeRoles";
+export type { ChoiceProps } from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Choice/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACnF,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Choice/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CHOICE_THEME_ROLES = exports.CHOICE_ICON_SIZE = exports.Choice = void 0;
+var Choice_1 = require("./Choice");
+Object.defineProperty(exports, "Choice", { enumerable: true, get: function () { return Choice_1.Choice; } });
+var choiceLayout_1 = require("./choiceLayout");
+Object.defineProperty(exports, "CHOICE_ICON_SIZE", { enumerable: true, get: function () { return choiceLayout_1.CHOICE_ICON_SIZE; } });
+var choiceThemeRoles_1 = require("./choiceThemeRoles");
+Object.defineProperty(exports, "CHOICE_THEME_ROLES", { enumerable: true, get: function () { return choiceThemeRoles_1.CHOICE_THEME_ROLES; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Choice/index.ts"],"names":[],"mappings":";;;AAAA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,+CAAkD;AAAzC,gHAAA,gBAAgB,OAAA;AACzB,uDAAmF;AAA1E,sHAAA,kBAAkB,OAAA"}

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

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle } from "react-native";
+import type { ButtonIcon } from "../Button";
+import type { ButtonRadius } from "../Button/buttonRadius";
+export type ChoiceProps = {
+    title: string;
+    /** Second line under the title. */
+    description?: string;
+    /** `({ color, size }) => ReactNode`, e.g. an expo-symbols `SymbolView`. */
+    icon?: ButtonIcon;
+    onPress: () => void;
+    disabled?: boolean;
+    /** Icon box. Default 28. */
+    iconSize?: number;
+    /** Default `"xl"` (12), the same scale as `Button`. */
+    radius?: ButtonRadius;
+    /** Row fill. Defaults to theme role `choiceBackground`. */
+    backgroundColor?: string;
+    /** Defaults to theme role `choiceTitle`. */
+    titleColor?: string;
+    /** Defaults to theme role `choiceDescription`. */
+    descriptionColor?: string;
+    /** Defaults to theme role `choiceIcon`. */
+    iconColor?: string;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Choice/types.js

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

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

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

package/dist/components/ErrorBanner/ErrorBanner.d.ts

@@ -4,5 +4,5 @@ import type { ErrorBannerProps } from "./types";
  * exit animation can play. It is not tied to a form shell: pass `errors`,
  * `onJump`, and `onDismiss`. `Form` does that by default.
  */
-export declare function ErrorBanner({ open, errors, onJump, onDismiss, onHeightChange, safeAreaTop, paddingHorizontal, backgroundColor: backgroundColorProp, textColor: textColorProp, secondaryColor: secondaryColorProp, dividerColor: dividerColorProp, accentColor: accentColorProp, }: ErrorBannerProps): import("react").JSX.Element;
+export declare function ErrorBanner({ open, errors, onJump, onDismiss, onHeightChange, safeAreaTop, paddingHorizontal: paddingHorizontalProp, backgroundColor: backgroundColorProp, textColor: textColorProp, secondaryColor: secondaryColorProp, dividerColor: dividerColorProp, accentColor: accentColorProp, }: ErrorBannerProps): import("react").JSX.Element;
 //# sourceMappingURL=ErrorBanner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBanner.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/ErrorBanner.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,WAAW,EACX,iBAA2C,EAC3C,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,GAC7B,EAAE,gBAAgB,+BAuIlB"}
+{"version":3,"file":"ErrorBanner.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorBanner/ErrorBanner.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,WAAW,EACX,iBAAiB,EAAE,qBAAqB,EACxC,eAAe,EAAE,mBAAmB,EACpC,SAAS,EAAE,aAAa,EACxB,cAAc,EAAE,kBAAkB,EAClC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,GAC7B,EAAE,gBAAgB,+BAwIlB"}