@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/chunk-GDKZTW34.js

@@ -1,395 +0,0 @@
-import { SummaryItemRow, PriceRow, Amount, FxNote } from './chunk-VBOXAEPI.js';
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { Input } from './chunk-ITTYJZWX.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { Button } from './chunk-3ARE4TES.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React3 from 'react';
-import { Text, View, Pressable } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { SHEET_DISMISS_FRACTION } from '@btndprojects/loam-pay';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { icons } from '@btndprojects/loam-icons';
-
-function CheckoutSheet({
-  open,
-  title,
-  titleLevel,
-  description,
-  children,
-  commit,
-  trust,
-  dismissible = true,
-  safeAreaBottom = 0,
-  closeLabel = "Close",
-  style,
-  onDismiss
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(
-    Sheet,
-    {
-      open,
-      title,
-      titleLevel,
-      dismissible,
-      closeLabel,
-      dismissFraction: SHEET_DISMISS_FRACTION,
-      onClose: onDismiss,
-      footer: (
-        /* The commit bar, outside the scroller. `safeAreaBottom` is padding on
-           the bar rather than a margin under it — or `Sheet.safeAreaBottom`, a
-           slot padding that would push this bar's own fill up off the screen
-           edge — so the surface still reaches the home indicator. */
-        /* @__PURE__ */ jsxs(View, { style: [styles.commitBar, { paddingBottom: theme.space.s4 + safeAreaBottom }], children: [
-          commit,
-          trust
-        ] })
-      ),
-      children: [
-        description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
-        /* @__PURE__ */ jsx(View, { style: [styles.body, style], children })
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  description: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
-    color: theme.color.text2
-  },
-  body: { gap: theme.space.s4 },
-  // The bar reads as a bar rather than as another block in the form: its own
-  // fill, a hairline above it, and the safe-area inset folded into its bottom
-  // padding at the use site. The horizontal padding is the bar's own now that it
-  // lives in `Sheet`'s footer slot, which is deliberately full-bleed — so the
-  // hairline spans the panel while the button keeps the body's gutter.
-  commitBar: {
-    gap: theme.space.s3,
-    paddingTop: theme.space.s4,
-    paddingHorizontal: theme.space[22],
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border,
-    backgroundColor: theme.color.surface
-  }
-}));
-function PayButton({
-  label,
-  state,
-  busyLabel = "Paying\u2026",
-  validatingLabel = "Checking\u2026",
-  doneLabel = "Paid",
-  showLock = true,
-  fullWidth = true,
-  size = "lg",
-  accessibilityLabel,
-  style,
-  onPress
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet2);
-  const [idleWidth, setIdleWidth] = React3.useState(null);
-  const resting = state === "idle";
-  const busy = state === "validating" || state === "busy";
-  const onLayout = (event) => {
-    if (!resting || fullWidth) return;
-    const next = event.nativeEvent.layout.width;
-    if (next <= 0) return;
-    setIdleWidth((prev) => prev !== null && Math.abs(prev - next) < 1 ? prev : next);
-  };
-  const currentLabel = resting ? label : state === "validating" ? validatingLabel : state === "busy" ? busyLabel : doneLabel;
-  const leadingIcon = resting && showLock ? "lock" : state === "done" ? "check" : void 0;
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      onLayout,
-      style: [
-        fullWidth ? styles.wrapFull : styles.wrapAuto,
-        // The frozen width, and only while the label is not the resting one.
-        !resting && !fullWidth && idleWidth !== null ? { minWidth: idleWidth } : null,
-        style
-      ],
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size,
-          fullWidth: true,
-          loading: busy,
-          leadingIcon,
-          accessibilityLabel,
-          onPress: () => {
-            if (!resting) return;
-            onPress();
-          },
-          children: typeof currentLabel === "string" ? currentLabel : /* @__PURE__ */ jsx(View, { style: styles.labelRow, children: typeof currentLabel === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: theme.color.accentInk }], children: currentLabel }) : currentLabel })
-        }
-      )
-    }
-  );
-}
-var sheet2 = createStyleSheet((theme) => ({
-  wrapFull: { alignSelf: "stretch" },
-  wrapAuto: { alignSelf: "flex-start" },
-  labelRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.ctl.gap.lg
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
-    letterSpacing: theme.type.body.letterSpacing
-  }
-}));
-function summaryIcon(name) {
-  if (name === void 0) return void 0;
-  return Object.prototype.hasOwnProperty.call(icons, name) ? name : void 0;
-}
-function OrderSummary({
-  variant,
-  items,
-  rows,
-  total,
-  currency,
-  title = "Order summary",
-  totalLabel = "Total",
-  coupon,
-  fxNote,
-  locale,
-  style,
-  onCouponDraftChange,
-  onApplyCoupon,
-  onRemoveCoupon
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet3);
-  const couponLabelId = React3.useId();
-  const couponErrorId = React3.useId();
-  const heading = `${title} \xB7 ${currency}`;
-  const showItems = variant === "itemised" && items !== void 0 && items.length > 0;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      role: "region",
-      accessibilityLabel: heading,
-      style: [styles.section, style],
-      children: [
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.overline, children: heading }),
-        showItems ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles.itemList, children: items.map((item) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
-          SummaryItemRow,
-          {
-            name: item.name,
-            detail: item.detail,
-            qty: item.qty,
-            minor: item.qty * item.unit,
-            currency,
-            icon: summaryIcon(item.icon),
-            locale,
-            noSymbol: true
-          }
-        ) }, `${item.name}-${item.unit}`)) }) : null,
-        rows.length > 0 ? /* @__PURE__ */ jsx(View, { style: [styles.rowStack, showItems ? styles.rowStackRuled : null], children: rows.map((row, index) => /* @__PURE__ */ jsx(
-          PriceRow,
-          {
-            label: row.label,
-            minor: row.minor,
-            currency,
-            tone: row.tone,
-            strong: row.strong,
-            rule: row.rule,
-            locale,
-            noSymbol: true
-          },
-          `${index}-${String(row.label)}`
-        )) }) : null,
-        coupon ? /* @__PURE__ */ jsx(View, { style: styles.couponBlock, children: coupon.applied ? /* @__PURE__ */ jsxs(View, { style: styles.appliedRow, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "tag", size: theme.icon.sm, color: theme.color.goodOnSoft }),
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.appliedCode, children: coupon.applied }),
-          onRemoveCoupon ? /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onPress: onRemoveCoupon, children: "Remove" }) }) : null
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text, { nativeID: couponLabelId, style: styles.fieldLabel, children: coupon.label ?? "Discount code" }),
-          /* @__PURE__ */ jsxs(View, { style: styles.couponRow, children: [
-            /* @__PURE__ */ jsx(View, { style: styles.couponField, children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                "aria-labelledby": couponLabelId,
-                "aria-describedby": coupon.error ? couponErrorId : void 0,
-                "aria-invalid": coupon.error !== void 0 || void 0,
-                value: coupon.draft,
-                placeholder: coupon.placeholder,
-                autoComplete: "off",
-                autoCorrect: false,
-                loading: coupon.busy ?? false,
-                error: coupon.error !== void 0,
-                onChangeText: (next) => onCouponDraftChange?.(next)
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                loading: coupon.busy ?? false,
-                onPress: () => onApplyCoupon?.(coupon.draft),
-                children: "Apply"
-              }
-            )
-          ] }),
-          coupon.error ? /* @__PURE__ */ jsx(Text, { nativeID: couponErrorId, style: styles.fieldError, children: coupon.error }) : null
-        ] }) }) : null,
-        /* @__PURE__ */ jsxs(View, { style: styles.totalRow, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.totalLabel, children: totalLabel }),
-          /* @__PURE__ */ jsx(Amount, { minor: total, currency, size: "hero", locale })
-        ] }),
-        fxNote ? /* @__PURE__ */ jsx(FxNote, { currency: fxNote.currency, rateLine: fxNote.rateLine }) : null
-      ]
-    }
-  );
-}
-function CollapsedSummaryBar({
-  total,
-  currency,
-  open,
-  children,
-  label = "Order summary",
-  locale,
-  style,
-  onToggle
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet3);
-  const panelId = React3.useId();
-  return /* @__PURE__ */ jsxs(View, { style: [styles.bar, style], children: [
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityState: { expanded: open },
-        ...expandedProps(open),
-        "aria-controls": panelId,
-        onPress: () => onToggle(!open),
-        style: ({ pressed }) => [styles.trigger, pressed ? styles.triggerPressed : null],
-        children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: open ? "chevron-up" : "chevron-down",
-              size: theme.icon.sm,
-              color: theme.color.text3
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { style: styles.triggerLabel, children: label }),
-          /* @__PURE__ */ jsx(View, { style: styles.pushEnd, children: /* @__PURE__ */ jsx(Amount, { minor: total, currency, size: "md", weight: "bold", locale }) })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx(View, { nativeID: panelId, style: styles.panel, children }) : null
-  ] });
-}
-var sheet3 = createStyleSheet((theme) => ({
-  section: { gap: theme.space.s3 },
-  overline: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
-    color: theme.color.text3
-  },
-  itemList: { gap: theme.space.s3 },
-  rowStack: { gap: theme.space.s2 },
-  rowStackRuled: {
-    paddingTop: theme.space.s3,
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border
-  },
-  couponBlock: { gap: theme.space.s1 },
-  appliedRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2,
-    padding: theme.space.s2,
-    borderRadius: theme.radius.md,
-    // The soft tint always carries its tone edge: `goodSoft` collapses to the
-    // plain surface under high contrast, and the edge is the only thing left
-    // drawing the block.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.good,
-    backgroundColor: theme.color.goodSoft
-  },
-  appliedCode: {
-    flexShrink: 1,
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.goodOnSoft
-  },
-  pushEnd: { marginStart: "auto" },
-  fieldLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.text2
-  },
-  couponRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
-  couponField: { flex: 1 },
-  fieldError: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.danger
-  },
-  totalRow: {
-    flexDirection: "row",
-    alignItems: "baseline",
-    justifyContent: "space-between",
-    gap: theme.space.s4,
-    paddingTop: theme.space.s3,
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border
-  },
-  totalLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text
-  },
-  bar: {
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    minHeight: theme.ctl.lg,
-    padding: theme.space.s3
-  },
-  triggerPressed: { backgroundColor: theme.state.pressed },
-  triggerLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text
-  },
-  panel: {
-    padding: theme.space.s3,
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border
-  }
-}));
-
-export { CheckoutSheet, CollapsedSummaryBar, OrderSummary, PayButton, summaryIcon };

package/dist/chunk-GL7B2DOW.js

@@ -1,134 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { Pressable, Text, View } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function statusMeta(status, queued) {
-  const changes = `${queued} change${queued === 1 ? "" : "s"}`;
-  switch (status) {
-    case "offline":
-      return { icon: "wifi-off", label: `Offline \xB7 ${changes} queued` };
-    case "syncing":
-      return { icon: "refresh", label: "Back online \xB7 syncing" };
-    default:
-      return { icon: "check-circle", label: "All changes synced" };
-  }
-}
-function ConnectivityBanner({
-  status,
-  queuedCount = 0,
-  onRetry,
-  message
-}) {
-  const { styles } = useStyles(sheet, { status });
-  const theme = useLoamTheme();
-  const meta = statusMeta(status, queuedCount);
-  const fg = status === "offline" ? (
-    // The offline banner rests on `surface3`, where neutral `text2` measures
-    // only 4.4:1 (WCAG fail); primary `text` clears 4.5:1.
-    theme.color.text
-  ) : status === "syncing" ? theme.color.warnOnSoft : theme.color.goodOnSoft;
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: onRetry ? "button" : "text",
-      accessibilityLabel: message ?? meta.label,
-      accessibilityState: onRetry ? {} : { disabled: true },
-      onPress: onRetry,
-      style: ({ pressed }) => [styles.banner, pressed && onRetry ? styles.pressed : null],
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 15, color: fg }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, ellipsizeMode: "tail", children: message ?? meta.label }),
-        status === "offline" && onRetry ? /* @__PURE__ */ jsx(Text, { style: styles.retry, children: "RETRY" }) : null
-      ]
-    }
-  );
-}
-var SYNC_META = {
-  queued: { icon: "refresh", label: "Queued \u2014 waiting for a connection" },
-  syncing: { icon: "refresh", label: "Syncing" },
-  synced: { icon: "check", label: "Synced" },
-  failed: { icon: "alert-circle", label: "Failed to sync" }
-};
-function SyncBadge({
-  state,
-  accessibilityLabel,
-  size = 26
-}) {
-  const { styles } = useStyles(sheet, { state });
-  const theme = useLoamTheme();
-  const meta = SYNC_META[state];
-  const fg = state === "synced" ? theme.color.goodOnSoft : state === "failed" ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      accessibilityRole: "image",
-      accessibilityLabel: accessibilityLabel ?? meta.label,
-      style: [styles.badge, { width: size, height: size }],
-      children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: Math.round(size * 0.54), color: fg })
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  banner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[9],
-    paddingVertical: theme.space[10],
-    paddingHorizontal: theme.space.s4,
-    borderBottomWidth: theme.borderWidth.base,
-    variants: {
-      status: {
-        offline: {
-          backgroundColor: theme.color.surface3,
-          borderBottomColor: theme.color.border
-        },
-        syncing: {
-          backgroundColor: theme.color.warnSoft,
-          borderBottomColor: theme.edge.warn
-        },
-        online: {
-          backgroundColor: theme.color.goodSoft,
-          borderBottomColor: theme.edge.good
-        }
-      },
-      state: {}
-    }
-  },
-  // `minWidth: 0` lets the copy truncate rather than push `RETRY` off the edge.
-  label: {
-    flex: 1,
-    minWidth: 0,
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.caption1.fontSize,
-    variants: { status: {}, state: {} }
-  },
-  retry: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[10],
-    // Shown only on the offline banner's `surface3` fill, where `text3` is
-    // 4.16:1 (WCAG fail); primary `text` clears 4.5:1.
-    color: theme.color.text,
-    variants: { status: {}, state: {} }
-  },
-  badge: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.base,
-    variants: {
-      state: {
-        queued: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
-        syncing: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
-        synced: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
-        failed: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger }
-      },
-      status: {}
-    }
-  },
-  pressed: { opacity: theme.state.pressedOpacity }
-}));
-
-export { ConnectivityBanner, SyncBadge };

package/dist/chunk-NKB7BZYK.js

@@ -1,167 +0,0 @@
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { expandedProps } from './chunk-RQ3HASCC.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Pressable, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function Picker({
-  items,
-  value,
-  onValueChange,
-  placeholder = "Select\u2026",
-  title,
-  disabled = false,
-  size = "md",
-  accessibilityLabel
-}) {
-  const [open, setOpen] = React.useState(false);
-  const theme = useLoamTheme();
-  const selected = items.find((item) => item.value === value);
-  const isPlaceholder = selected == null;
-  const displayText = selected?.label ?? placeholder;
-  const { styles } = useStyles(sheet, { size, disabled, placeholder: isPlaceholder });
-  const iconSize = theme.ctl.icon[size];
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const handleSelect = (next) => {
-    haptics.impact("light");
-    onValueChange?.(next);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel ?? displayText,
-        accessibilityState: { disabled, expanded: open },
-        ...expandedProps(open),
-        disabled,
-        onPress: disabled ? void 0 : () => setOpen(true),
-        hitSlop: { top: slopY, bottom: slopY },
-        style: styles.trigger,
-        children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.value, numberOfLines: 1, children: displayText }),
-          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: iconSize, color: theme.color.text3 })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(Sheet, { open, onClose: () => setOpen(false), title, children: items.map((item) => {
-      const isSelected = item.value === value;
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: item.label,
-          accessibilityState: { selected: isSelected },
-          onPress: () => handleSelect(item.value),
-          style: ({ pressed }) => [
-            styles.option,
-            isSelected ? styles.optionSelected : null,
-            pressed ? styles.optionPressed : null
-          ],
-          children: [
-            /* @__PURE__ */ jsx(Text, { style: [styles.optionLabel, isSelected ? styles.optionLabelSelected : null], children: item.label }),
-            isSelected ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.md, color: theme.color.accentOnSoft }) : null
-          ]
-        },
-        item.value
-      );
-    }) })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.color.surface2,
-    // The reference draws a `1.5px` field edge — the static `w2` weight.
-    borderWidth: theme.borderWidth.thick,
-    borderColor: theme.color.borderStrong,
-    variants: {
-      // Height, padding, gap and corner radius all resolve from one control-size
-      // tier (26 / 30 / 36 / 44), matching {@link Input}.
-      size: {
-        xs: {
-          height: theme.ctl.xs,
-          paddingHorizontal: theme.ctl.px.xs,
-          gap: theme.ctl.gap.xs,
-          borderRadius: theme.ctl.r.xs
-        },
-        sm: {
-          height: theme.ctl.sm,
-          paddingHorizontal: theme.ctl.px.sm,
-          gap: theme.ctl.gap.sm,
-          borderRadius: theme.ctl.r.sm
-        },
-        md: {
-          height: theme.ctl.md,
-          paddingHorizontal: theme.ctl.px.md,
-          gap: theme.ctl.gap.md,
-          borderRadius: theme.ctl.r.md
-        },
-        lg: {
-          height: theme.ctl.lg,
-          paddingHorizontal: theme.ctl.px.lg,
-          gap: theme.ctl.gap.lg,
-          borderRadius: theme.ctl.r.lg
-        }
-      },
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  value: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    variants: {
-      size: {
-        xs: { fontSize: theme.fontSize[14] },
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[16] },
-        lg: { fontSize: theme.fontSize[16] }
-      },
-      placeholder: {
-        true: { color: theme.color.text3 },
-        false: { color: theme.color.text }
-      }
-    }
-  },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    minHeight: theme.space[48],
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space.s2,
-    borderRadius: theme.radius.md,
-    // Every row carries the edge weight so selecting one does not shift the text.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent"
-  },
-  // The reference's selection band: an `accentSoft` `radius.md` plate behind the
-  // centred option. `-soft` tints collapse at high contrast, so it carries the
-  // matching tone edge.
-  optionSelected: {
-    backgroundColor: theme.color.accentSoft,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent
-  },
-  optionPressed: { backgroundColor: theme.color.surface2 },
-  optionLabel: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[16],
-    color: theme.color.text2
-  },
-  optionLabelSelected: {
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.accentOnSoft
-  }
-}));
-
-export { Picker };