@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-TZO6YDS7.js

@@ -0,0 +1,346 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import { DEFAULT_DATE_LABELS, localeNames, monthGrid, weekdayOrder, dayDisabled, dayLabel } from '@btndprojects/loam-date';
+import * as React from 'react';
+import { ScrollView, View, Text, Animated, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  ...DEFAULT_DATE_LABELS,
+  pickDate: "Pick a date",
+  pickRange: "Pick a range",
+  triggerNamed: (label, value) => `${label}, ${value}`,
+  triggerHint: "Double tap to change the date range",
+  valid: "Valid",
+  loading: "Loading",
+  startTime: "Start time, 24-hour",
+  endTime: "End time, 24-hour",
+  timeTo: "to",
+  clearButton: "Clear",
+  goToToday: "Go to today",
+  cancel: "Cancel",
+  apply: "Apply",
+  pickOtherEnd: (stamp) => `${stamp} \u2014 pick the other end`,
+  reResolvesNote: "Re-resolves on load",
+  dayToday: "today",
+  dayWholeRange: "the whole range",
+  dayRangeStart: "range start",
+  dayRangeEnd: "range end",
+  dayInRange: "in the range",
+  dayUnavailable: (reason) => `unavailable: ${reason}`
+};
+function MonthList({
+  Z,
+  anchorMs,
+  radius,
+  ctx,
+  from,
+  to,
+  constraints,
+  dayMeta,
+  weekNumbers = false,
+  onPick,
+  scrollNonce = 0,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("dateRangePicker", DEFAULT_LABELS, labelsProp);
+  const names = localeNames(ctx.locale);
+  const level = useResolvedMotion(motion, "date-range-picker");
+  const months = React.useMemo(() => {
+    const out = [];
+    for (let i = -radius; i <= radius; i += 1) {
+      out.push(monthGrid(Z, Z.addMonths(Z.startOfMonth(anchorMs), i), ctx));
+    }
+    return out;
+  }, [Z, anchorMs, radius, ctx]);
+  const order = weekdayOrder(ctx.weekStartsOn ?? 1);
+  const scroller = React.useRef(null);
+  const offsets = React.useRef([]);
+  const anchorKey = Z.monthKey(anchorMs);
+  React.useEffect(() => {
+    const y = offsets.current[radius];
+    if (y != null) scroller.current?.scrollTo({ y, animated: false });
+  }, [anchorKey, radius, scrollNonce]);
+  const [snaps, setSnaps] = React.useState(void 0);
+  const measure = (index) => (event) => {
+    offsets.current[index] = event.nativeEvent.layout.y;
+    const all = offsets.current;
+    if (all.length === months.length && all.every((y) => y != null)) {
+      setSnaps(
+        (prev) => prev && prev.length === all.length && prev.every((y, i) => y === all[i]) ? prev : [...all]
+      );
+    }
+    if (index === radius)
+      scroller.current?.scrollTo({ y: event.nativeEvent.layout.y, animated: false });
+  };
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      ref: scroller,
+      showsVerticalScrollIndicator: true,
+      snapToOffsets: snaps,
+      snapToEnd: false,
+      decelerationRate: "fast",
+      testID: "date-range-month-list",
+      children: months.map((item, index) => /* @__PURE__ */ jsxs(View, { style: styles.month, onLayout: measure(index), children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.monthLabel, role: "heading", ...{ "aria-level": 3 }, children: item.label }),
+        /* @__PURE__ */ jsxs(View, { style: styles.weekdayRow, children: [
+          weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber }) : null,
+          order.map((dow) => /* @__PURE__ */ jsx(View, { style: styles.weekdayCell, children: /* @__PURE__ */ jsx(Text, { style: styles.weekdayText, ...{ "aria-hidden": true }, children: names.dayAbbr[dow] }) }, dow))
+        ] }),
+        item.weeks.map((week) => /* @__PURE__ */ jsxs(View, { style: styles.weekRow, children: [
+          weekNumbers ? /* @__PURE__ */ jsx(View, { style: styles.weekNumber, children: /* @__PURE__ */ jsx(Text, { style: styles.weekNumberText, children: week.week }) }) : null,
+          week.days.map(
+            (day, column) => (
+              // A day borrowed from the neighbouring month is **not** rendered
+              // as a cell here, unlike in the web picker's two-month view. In a
+              // continuous scroll that month is a thumb-flick away, so a
+              // borrowed day is not a shortcut — it is the same date appearing
+              // twice, pickable twice, and announced twice. The blank keeps the
+              // six-row height so the grid does not jump.
+              day.inMonth ? /* @__PURE__ */ jsx(
+                DayCell,
+                {
+                  Z,
+                  day,
+                  ctx,
+                  from,
+                  to,
+                  constraints,
+                  meta: dayMeta?.(day.ms),
+                  level,
+                  labels,
+                  names: names.days,
+                  column,
+                  onPick
+                },
+                day.key
+              ) : /* @__PURE__ */ jsx(View, { style: styles.dayBlank }, day.key)
+            )
+          )
+        ] }, `${week.week}-${week.days[0].key}`))
+      ] }, `${item.y}-${item.mo}`))
+    }
+  );
+}
+function DayCell({
+  Z,
+  day,
+  ctx,
+  from,
+  to,
+  constraints,
+  meta,
+  level,
+  labels,
+  names,
+  column,
+  onPick
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("date-range-picker");
+  const reason = dayDisabled(Z, day.ms, constraints, ctx, meta);
+  const disabled = reason !== false || meta?.loading === true;
+  const today = Z.sameDay(day.ms, ctx.now ?? Date.now());
+  const dayEnd = Z.endOfDay(day.ms);
+  const isStart = from != null && Z.sameDay(day.ms, from);
+  const isEnd = to != null && Z.sameDay(day.ms, to - 1);
+  const inside = from != null && to != null && day.ms >= from && dayEnd < to;
+  const selection = isStart && isEnd ? "both" : isStart ? "start" : isEnd ? "end" : inside ? "inside" : "none";
+  const wash = React.useRef(new Animated.Value(inside ? 1 : 0)).current;
+  const land = React.useRef(new Animated.Value(1)).current;
+  const endpoint = isStart || isEnd;
+  const daysIn = inside && from != null ? Math.round((day.ms - from) / 864e5) : 0;
+  React.useEffect(() => {
+    if (level !== "full") {
+      wash.setValue(inside ? 1 : 0);
+      return;
+    }
+    const run = Animated.sequence([
+      // loam-audit-ignore raw-duration — the shared 30ms stagger, capped at 8
+      Animated.delay(inside ? Math.min(daysIn, 8) * 30 : 0),
+      Animated.spring(wash, {
+        ...springConfig(theme, "fe"),
+        toValue: inside ? 1 : 0,
+        useNativeDriver: true
+      })
+    ]);
+    run.start();
+    return () => run.stop();
+  }, [inside, level]);
+  const wasEnd = React.useRef(endpoint);
+  React.useEffect(() => {
+    if (endpoint && !wasEnd.current && level === "full") {
+      land.setValue(0);
+      Animated.spring(land, {
+        ...springConfig(theme, "fs"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+    wasEnd.current = endpoint;
+  }, [endpoint, level]);
+  const parts = [
+    `${names[day.dow]} ${dayLabel(Z, day.ms, { longMonth: true, locale: ctx.locale })}`
+  ];
+  if (today) parts.push(labels.dayToday);
+  if (selection === "both") parts.push(labels.dayWholeRange);
+  else if (selection === "start") parts.push(labels.dayRangeStart);
+  else if (selection === "end") parts.push(labels.dayRangeEnd);
+  else if (selection === "inside") parts.push(labels.dayInRange);
+  if (reason) parts.push(labels.dayUnavailable(reason));
+  const name = parts.join(", ");
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: name,
+      accessibilityState: { selected: selection !== "none", disabled },
+      disabled,
+      onPress: () => onPick(day.ms),
+      style: ({ pressed }) => [styles.day, pressed && !disabled && styles.pressed],
+      children: [
+        selection !== "none" && selection !== "both" ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.capsule,
+              {
+                opacity: endpoint ? 1 : wash,
+                left: isStart ? "50%" : 0,
+                right: isEnd ? "50%" : 0
+              },
+              !isStart && column === 0 && styles.capsuleRoundStart,
+              !isEnd && column === 6 && styles.capsuleRoundEnd
+            ]
+          }
+        ) : null,
+        endpoint ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [
+              styles.dayEnd,
+              {
+                transform: [
+                  { scale: land.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }
+                ]
+              }
+            ]
+          }
+        ) : null,
+        today && !endpoint ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.dayToday }) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.dayText,
+              (isStart || isEnd) && styles.dayEndText,
+              disabled && styles.dayDisabled
+            ],
+            children: day.day
+          }
+        ),
+        meta?.density != null && meta.density > 0 ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              styles.densityBar,
+              {
+                height: Math.max(theme.borderWidth.heavy, Math.round(meta.density * theme.space.s2))
+              }
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  month: { gap: theme.space.s1, paddingBottom: theme.space.s4 },
+  monthLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    fontWeight: theme.type.headline.fontWeight,
+    color: theme.color.text,
+    paddingVertical: theme.space.s1
+  },
+  weekdayRow: { flexDirection: "row" },
+  weekdayCell: { flex: 1, alignItems: "center", paddingVertical: theme.space[2] },
+  weekdayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text2
+  },
+  weekRow: { flexDirection: "row", alignItems: "stretch" },
+  weekNumber: { width: theme.space.s6, alignItems: "center", justifyContent: "center" },
+  weekNumberText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  day: {
+    flex: 1,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[1]
+  },
+  // The in-range wash is a state layer, not a tint: it has to composite over the
+  // sheet surface and over a pressed cell without either turning muddy.
+  // loam-contrast-ignore — the range band runs behind consecutive day cells; an edge per cell would break the capsule.
+  capsule: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.color.accentSoft
+  },
+  capsuleRoundStart: {
+    borderTopLeftRadius: theme.radius.full,
+    borderBottomLeftRadius: theme.radius.full
+  },
+  capsuleRoundEnd: {
+    borderTopRightRadius: theme.radius.full,
+    borderBottomRightRadius: theme.radius.full
+  },
+  // The end is a filled circle at the day height (44 iOS, 48 Android).
+  dayEnd: {
+    position: "absolute",
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  dayText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  dayBlank: { flex: 1, minHeight: theme.tapMin },
+  // Today: a 1.5 accent-strong ring at regular weight.
+  dayToday: {
+    position: "absolute",
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.strong,
+    borderColor: theme.color.accentStrong
+  },
+  dayEndText: { color: theme.color.accentInk, fontWeight: theme.fontWeight.bold },
+  dayDisabled: { color: theme.color.text3 },
+  densityBar: {
+    width: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { DEFAULT_LABELS, MonthList };

package/dist/chunk-U3ETF22F.js

@@ -0,0 +1,328 @@
+import { announce } from './chunk-W23G6JLF.js';
+import { useInputPlatform, useColorTransition } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Easing, View, Pressable, TextInput, Platform, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  field: "One-time code",
+  clear: "Clear code",
+  errorAnnouncement: (field, message) => `${field}: ${message}`
+};
+var MASK = "\u2022";
+var COMPLETE_POP = 1.08;
+var COMPLETE_STAGGER = 55;
+function OTPBox({
+  char,
+  secure,
+  active,
+  borderTarget,
+  fillTarget,
+  caret,
+  pop,
+  size
+}) {
+  const theme = useLoamTheme("otp");
+  const os = useInputPlatform();
+  const { styles } = useStyles(sheet, { disabled: false, os });
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(borderTarget, theme.duration.base, easing);
+  const backgroundColor = useColorTransition(fillTarget, theme.duration.base, easing);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      testID: "otp-box",
+      style: [styles.box, size !== "lg" && { width: size === "md" ? theme.space[32] : theme.space[28], height: theme.ctl[size], borderRadius: theme.ctl.r[size] }, { borderColor, backgroundColor, transform: [{ scale: pop }] }],
+      children: char ? /* @__PURE__ */ jsx(Text, { style: styles.digit, children: secure ? MASK : char }) : active ? /* @__PURE__ */ jsx(Animated.View, { style: [styles.caret, { opacity: caret }] }) : null
+    }
+  );
+}
+function OTP({
+  length = 6,
+  surface = "filled",
+  value,
+  defaultValue = "",
+  onChangeText,
+  onComplete,
+  disabled = false,
+  error: errorMessage,
+  success = false,
+  loading = false,
+  readOnly = false,
+  secure = false,
+  keyboardType = "number-pad",
+  size = "lg",
+  motion = "full",
+  clearable = false,
+  leading,
+  trailing,
+  accessibilityLabel: accessibilityLabelProp,
+  labels: labelsProp,
+  style
+}) {
+  const labels = useLabels("otp", DEFAULT_LABELS, labelsProp);
+  const error = !!errorMessage;
+  const isLoading = loading && !disabled;
+  const accessibilityLabel = accessibilityLabelProp ?? labels.field;
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(() => defaultValue.slice(0, length));
+  const current = (isControlled ? value : internal) ?? "";
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const { styles } = useStyles(sheet, { disabled });
+  const theme = useLoamTheme("otp");
+  const os = useInputPlatform();
+  const caret = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (!focused || disabled || theme.reduceMotion) {
+      caret.setValue(1);
+      return;
+    }
+    const half = theme.loop.spin / 2;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(caret, { toValue: 0, duration: half, useNativeDriver: true }),
+        Animated.timing(caret, { toValue: 1, duration: half, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [focused, disabled, caret, theme.reduceMotion, theme.loop.spin]);
+  const numeric = keyboardType === "number-pad" || keyboardType === "numeric" || keyboardType === "phone-pad";
+  const handleChange = (text) => {
+    let next = numeric ? text.replace(/\D/g, "") : text;
+    next = next.slice(0, length);
+    if (next.length > current.length) haptics.impact("light");
+    if (!isControlled) setInternal(next);
+    onChangeText?.(next);
+    if (next.length === length) {
+      haptics.notify("success");
+      onComplete?.(next);
+    }
+  };
+  const focus = () => {
+    if (!disabled && !readOnly) inputRef.current?.focus();
+  };
+  const activeIndex = current.length;
+  const isComplete = length > 0 && current.length === length;
+  const popsRef = React.useRef([]);
+  if (popsRef.current.length !== length) {
+    popsRef.current = Array.from({ length }, (_, i) => popsRef.current[i] ?? new Animated.Value(1));
+  }
+  const pops = popsRef.current;
+  React.useEffect(() => {
+    if (!isComplete || disabled || motion !== "full") return;
+    const easing = Easing.bezier(...theme.easing.base);
+    const anim = Animated.stagger(
+      COMPLETE_STAGGER,
+      pops.map(
+        (p) => Animated.sequence([
+          Animated.timing(p, {
+            toValue: COMPLETE_POP,
+            duration: theme.duration.base,
+            easing,
+            useNativeDriver: true
+          }),
+          Animated.timing(p, {
+            toValue: 1,
+            duration: theme.duration.base,
+            easing,
+            useNativeDriver: true
+          })
+        ])
+      )
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [isComplete, disabled, motion, pops, theme.duration.base, theme.easing.base]);
+  const kick = React.useRef(new Animated.Value(0)).current;
+  const wasError = React.useRef(error);
+  React.useEffect(() => {
+    if (error && !wasError.current) {
+      haptics.notify("error");
+      announce(labels.errorAnnouncement(accessibilityLabel, errorMessage ?? ""), "assertive");
+      if (!theme.reduceMotion && motion === "full") {
+        kick.setValue(theme.space[4]);
+        Animated.spring(kick, {
+          ...springConfig(theme, "fs", { thrown: true }),
+          toValue: 0,
+          useNativeDriver: true
+        }).start();
+      }
+    }
+    wasError.current = error;
+  }, [error, kick, motion, theme, accessibilityLabel, errorMessage, labels]);
+  const errorId = React.useId();
+  const showError = error;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.root, style], children: [
+    /* @__PURE__ */ jsxs(Pressable, { onPress: focus, disabled, accessibilityRole: "none", style: styles.row, children: [
+      leading ? /* @__PURE__ */ jsx(Icon, { name: leading, size: theme.icon.md, color: theme.color.text3 }) : null,
+      /* @__PURE__ */ jsx(
+        Animated.View,
+        {
+          style: [styles.boxes, { transform: [{ translateX: kick }] }],
+          importantForAccessibility: "no-hide-descendants",
+          accessibilityElementsHidden: true,
+          children: Array.from({ length }).map((_, i) => {
+            const char = current[i];
+            const isActive = focused && !disabled && !error && i === activeIndex && i < length;
+            const borderTarget = error ? theme.color.danger : isComplete || success ? theme.color.good : isLoading ? theme.focus.ringColor : char || isActive ? theme.color.accent : theme.color.borderStrong;
+            return /* @__PURE__ */ jsx(
+              OTPBox,
+              {
+                char,
+                secure,
+                active: isActive,
+                borderTarget,
+                fillTarget: isActive ? theme.color.surface : fieldSurfaceFill(theme, surface),
+                caret,
+                pop: pops[i],
+                size
+              },
+              i
+            );
+          })
+        }
+      ),
+      trailing ? /* @__PURE__ */ jsx(Icon, { name: trailing, size: theme.icon.md, color: theme.color.text3 }) : null,
+      clearable && current.length > 0 && !disabled && !readOnly ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.clear,
+          hitSlop: theme.space.s2,
+          onPress: () => {
+            if (!isControlled) setInternal("");
+            onChangeText?.("");
+            inputRef.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text3 })
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          ref: inputRef,
+          value: current,
+          onChangeText: handleChange,
+          onFocus: () => setFocused(true),
+          onBlur: () => setFocused(false),
+          editable: !disabled && !readOnly,
+          "aria-busy": isLoading || void 0,
+          keyboardType,
+          textContentType: "oneTimeCode",
+          autoComplete: os === "android" ? "sms-otp" : "one-time-code",
+          maxLength: length,
+          caretHidden: true,
+          accessibilityLabel,
+          accessibilityState: { disabled },
+          secureTextEntry: secure,
+          accessibilityHint: showError && Platform.OS !== "web" ? errorMessage : void 0,
+          ...{
+            "aria-invalid": error || void 0,
+            "aria-describedby": showError ? errorId : void 0
+          },
+          style: styles.hiddenInput
+        }
+      )
+    ] }),
+    showError ? (
+      // Read through the field it describes; not a second swipe stop on native.
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: styles.errorRow,
+          importantForAccessibility: "no-hide-descendants",
+          accessibilityElementsHidden: true,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.danger }),
+            /* @__PURE__ */ jsx(Text, { nativeID: errorId, style: styles.errorText, children: errorMessage })
+          ]
+        }
+      )
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { alignSelf: "flex-start", gap: theme.space.s2 },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  // Field helper / error: 12, the same step as Input's hint and error.
+  errorText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.danger
+  },
+  row: {
+    position: "relative",
+    alignSelf: "flex-start",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    variants: {
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  boxes: {
+    flexDirection: "row",
+    gap: theme.space.s2
+  },
+  // `borderColor` / `backgroundColor` are supplied at the use site as animated
+  // values so a box can travel between states over `duration.base`.
+  box: {
+    // The lg field shell: 40 × 44 (F68; was 48 × 58).
+    width: theme.space[40],
+    height: theme.ctl.lg,
+    alignItems: "center",
+    justifyContent: "center",
+    // The reference draws a `1.5px` cell edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderRadius: theme.ctl.r.lg,
+    variants: {
+      disabled: { true: {}, false: {} }
+    }
+  },
+  // 22 tabular at the label weight in the system face: 600 on iOS, 500 on
+  // Android (F68; was 26 bold).
+  digit: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[22],
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontWeight: theme.fontWeight.semibold },
+        android: { fontWeight: theme.fontWeight.medium }
+      }
+    }
+  },
+  // 2 × 22, accent.
+  caret: {
+    width: theme.space[2],
+    height: theme.space[22],
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.color.accent
+  },
+  // Transparent overlay: fills the row so any tap focuses it and the OS can
+  // route autofill/paste here, while the visible UI is the boxes underneath.
+  hiddenInput: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    opacity: 0,
+    color: "transparent"
+  }
+}));
+
+export { OTP };