@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-VEAYTRPX.js

@@ -0,0 +1,414 @@
+import { Card, CardContent } from './chunk-KMI5ML5I.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, ScrollView, Text, Pressable, Animated } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function Board({
+  columns,
+  renderCard,
+  onMoveCard,
+  onToggleColumn,
+  label = "Board",
+  motion = "full",
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const [cols, setCols] = React.useState(columns);
+  React.useEffect(() => setCols(columns), [columns]);
+  const [collapsed, setCollapsed] = React.useState(
+    () => Object.fromEntries(columns.map((c) => [c.id, c.collapsed ?? false]))
+  );
+  React.useEffect(() => {
+    setCollapsed((prev) => {
+      const next = {};
+      for (const c of columns) next[c.id] = prev[c.id] ?? c.collapsed ?? false;
+      return next;
+    });
+  }, [columns]);
+  const [pageW, setPageW] = React.useState(theme.breakpoint.phone);
+  const onLayout = (event) => {
+    const w = event.nativeEvent.layout.width;
+    if (w > 0) setPageW(w);
+  };
+  const [message, setMessage] = React.useState("");
+  const lift = motion === "full" && !theme.reduceMotion;
+  const locate = (cardId) => {
+    for (let c = 0; c < cols.length; c += 1) {
+      const r = cols[c].items.findIndex((it) => it.id === cardId);
+      if (r >= 0) return { col: c, row: r };
+    }
+    return null;
+  };
+  const moveCard = (cardId, toColumnId, index) => {
+    const from = locate(cardId);
+    const toCol = cols.findIndex((c) => c.id === toColumnId);
+    if (!from || toCol < 0) return;
+    const card = cols[from.col].items[from.row];
+    const fromColumnId = cols[from.col].id;
+    const sameCol = from.col === toCol;
+    const next = cols.map((c) => ({ ...c, items: [...c.items] }));
+    next[from.col].items.splice(from.row, 1);
+    const dest = next[toCol].items;
+    const target = clamp(sameCol && index > from.row ? index - 1 : index, 0, dest.length);
+    if (sameCol && target === from.row) return;
+    dest.splice(target, 0, card);
+    setCols(next);
+    onMoveCard?.(cardId, fromColumnId, toColumnId, target);
+    const destCol = next[toCol];
+    const over = destCol.wipLimit !== void 0 && destCol.items.length > destCol.wipLimit ? ` ${destCol.title} is over its limit, ${destCol.items.length} of ${destCol.wipLimit}.` : "";
+    setMessage(
+      `Moved ${card.title} to ${destCol.title}, position ${target + 1} of ${destCol.items.length}.${over}`
+    );
+  };
+  const toggleCollapsed = (columnId) => {
+    setCollapsed((prev) => {
+      const nextVal = !prev[columnId];
+      onToggleColumn?.(columnId, nextVal);
+      return { ...prev, [columnId]: nextVal };
+    });
+  };
+  const adjacentColumn = (colIndex, dir) => {
+    for (let c = colIndex + dir; c >= 0 && c < cols.length; c += dir) {
+      if (!collapsed[cols[c].id]) return c;
+    }
+    return -1;
+  };
+  const handleCardKey = (event, cardId) => {
+    const at = locate(cardId);
+    if (!at) return;
+    const { col, row } = at;
+    if (event.key === "ArrowUp") {
+      event.preventDefault?.();
+      moveCard(cardId, cols[col].id, row - 1);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault?.();
+      moveCard(cardId, cols[col].id, row + 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      const dir = event.key === "ArrowLeft" !== theme.rtl ? -1 : 1;
+      const dest = adjacentColumn(col, dir);
+      if (dest < 0) return;
+      event.preventDefault?.();
+      moveCard(cardId, cols[dest].id, Math.min(row, cols[dest].items.length));
+    }
+  };
+  return /* @__PURE__ */ jsxs(View, { role: "group", accessibilityLabel: label, onLayout, style: [styles.root, style], children: [
+    /* @__PURE__ */ jsx(
+      ScrollView,
+      {
+        horizontal: true,
+        pagingEnabled: true,
+        showsHorizontalScrollIndicator: false,
+        snapToInterval: pageW,
+        decelerationRate: "fast",
+        contentContainerStyle: styles.track,
+        children: cols.map((column) => /* @__PURE__ */ jsx(
+          Column,
+          {
+            column,
+            width: pageW,
+            collapsed: collapsed[column.id] ?? false,
+            lift,
+            renderCard,
+            onToggle: () => toggleCollapsed(column.id),
+            onCardKey: handleCardKey
+          },
+          column.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        role: "status",
+        style: styles.srOnly,
+        accessibilityLabel: message,
+        ...{ "aria-live": "polite" },
+        children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+      }
+    )
+  ] });
+}
+function Column({
+  column,
+  width,
+  collapsed,
+  lift,
+  renderCard,
+  onToggle,
+  onCardKey
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const count = column.items.length;
+  const over = column.wipLimit !== void 0 && count > column.wipLimit;
+  const countLabel = column.wipLimit !== void 0 ? `${count} / ${column.wipLimit}` : `${count}`;
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(View, { style: [styles.page, { width }], children: /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: `Expand ${column.title}, ${count} cards`,
+        accessibilityState: { expanded: false },
+        ...expandedProps(false),
+        onPress: onToggle,
+        style: ({ pressed }) => [
+          styles.rail,
+          pressed && { backgroundColor: theme.state.pressed }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.sm, color: theme.color.text3 }),
+          /* @__PURE__ */ jsx(Text, { style: styles.railTitle, children: column.title }),
+          /* @__PURE__ */ jsx(View, { style: styles.countNeutral, children: /* @__PURE__ */ jsx(Text, { style: styles.countNeutralText, children: count }) })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(View, { style: [styles.page, { width }], children: /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: `${column.title}, ${count} cards`,
+      style: styles.column,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: `Collapse ${column.title}`,
+              accessibilityState: { expanded: true },
+              ...expandedProps(true),
+              onPress: onToggle,
+              hitSlop: 8,
+              style: ({ pressed }) => [
+                styles.toggle,
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: theme.icon.sm, color: theme.color.text2 })
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, numberOfLines: 1, children: column.title }),
+          over ? /* @__PURE__ */ jsxs(View, { style: styles.countWarn, children: [
+            /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.xs, color: theme.color.warnOnSoft }),
+            /* @__PURE__ */ jsx(Text, { style: styles.countWarnText, children: countLabel })
+          ] }) : /* @__PURE__ */ jsx(View, { style: styles.countNeutral, children: /* @__PURE__ */ jsx(Text, { style: styles.countNeutralText, children: countLabel }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ScrollView,
+          {
+            role: "list",
+            contentContainerStyle: styles.list,
+            showsVerticalScrollIndicator: false,
+            ...{ "aria-label": `${column.title} cards` },
+            children: count === 0 ? (
+              // The empty placeholder is the sole child of the `role="list"`, so it
+              // is a `listitem` too (a list may contain only listitems).
+              /* @__PURE__ */ jsx(View, { role: "listitem", style: styles.empty, children: /* @__PURE__ */ jsx(Text, { style: styles.emptyText, children: "No cards" }) })
+            ) : column.items.map((card, row) => /* @__PURE__ */ jsx(
+              CardCell,
+              {
+                card,
+                column,
+                index: row,
+                total: count,
+                lift,
+                renderCard,
+                onCardKey
+              },
+              card.id
+            ))
+          }
+        )
+      ]
+    }
+  ) });
+}
+function CardCell({
+  card,
+  column,
+  index,
+  total,
+  lift,
+  renderCard,
+  onCardKey
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const [grabbed, setGrabbed] = React.useState(false);
+  const progress = React.useRef(new Animated.Value(0)).current;
+  const spring = (to) => {
+    Animated.spring(progress, {
+      toValue: to,
+      useNativeDriver: true,
+      speed: 40,
+      bounciness: 6
+    }).start();
+  };
+  const scale = lift ? progress.interpolate({ inputRange: [0, 1], outputRange: [1, 1.022] }) : 1;
+  const rotate = lift ? progress.interpolate({
+    inputRange: [0, 1],
+    // `--mo-tilt` is 1.2deg; mirror its sign under RTL.
+    outputRange: ["0deg", theme.rtl ? "-1.2deg" : "1.2deg"]
+  }) : "0deg";
+  const keyProps = {
+    onKeyDown: (event) => onCardKey(event, card.id)
+  };
+  return (
+    // The card cell is the list item — the column body is a `role="list"`, so its
+    // direct children must each be a `listitem` (aria-required-children).
+    /* @__PURE__ */ jsx(Animated.View, { role: "listitem", style: { transform: [{ scale }, { rotate }] }, children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: card.title,
+        accessibilityHint: "Use the arrow keys to move this card between and within columns",
+        onPressIn: () => {
+          setGrabbed(true);
+          spring(1);
+        },
+        onPressOut: () => {
+          setGrabbed(false);
+          spring(0);
+        },
+        style: [styles.card, grabbed && styles.cardGrabbed],
+        ...keyProps,
+        children: renderCard ? renderCard(card, column) : (
+          // `dragging` is what actually paints the grabbed state: `Card` renders
+          // `theme.state.dragged` as an `absoluteFill` overlay ON TOP of its own
+          // opaque surface, which a `backgroundColor` on this wrapper could never
+          // do (the Card paints straight over it) — the same reason the web twin
+          // uses an overlay span. `motion="none"` because the lift/tilt is already
+          // animated by the `Animated.View` above; `Card`'s own would double it.
+          /* @__PURE__ */ jsx(Card, { variant: "default", dragging: grabbed, motion: "none", children: /* @__PURE__ */ jsxs(CardContent, { style: styles.cardBody, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, children: card.title }),
+            card.description ? /* @__PURE__ */ jsx(Text, { style: styles.cardDesc, children: card.description }) : null
+          ] }) })
+        )
+      }
+    ) })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { flex: 1, alignSelf: "stretch" },
+  track: { gap: theme.space.s3 },
+  page: { paddingVertical: theme.space.s2 },
+  column: {
+    flex: 1,
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    padding: theme.space.s3,
+    gap: theme.space.s3
+  },
+  header: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  toggle: { borderRadius: theme.radius.sm, padding: theme.space.s1 },
+  headerTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  countNeutral: {
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.surface3,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2]
+  },
+  countNeutralText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    // Primary ink: `text2` is only ~4.4:1 on the pill's surface-3 fill, short of
+    // AA; primary `text` clears it (~12.7:1 light / ~11.6:1 dark).
+    color: theme.color.text
+  },
+  countWarn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.warn,
+    backgroundColor: theme.color.warnSoft,
+    paddingHorizontal: theme.space.s2,
+    paddingVertical: theme.space[2]
+  },
+  countWarnText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.warnOnSoft
+  },
+  list: { gap: theme.space.s2, paddingBottom: theme.space.s1 },
+  empty: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    borderStyle: "dashed",
+    paddingVertical: theme.space.s5,
+    alignItems: "center"
+  },
+  emptyText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text3
+  },
+  card: { borderRadius: theme.radius.lg },
+  // The grabbed card raises to the stronger shadow — the "picked up" read. The
+  // `--state-dragged` tint is NOT set here: this wrapper sits behind the card,
+  // whose surface is opaque, so a `backgroundColor` on it was never visible.
+  // `Card`'s `dragging` prop composites the tint over the surface instead.
+  // Under reduced motion there is no scale/tilt, but the state still changes so
+  // the gesture is not silent.
+  cardGrabbed: {
+    ...theme.shadow.lg,
+    borderRadius: theme.radius.lg
+  },
+  cardBody: { padding: theme.space.s3, gap: theme.space.s1 },
+  cardTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  cardDesc: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    // Secondary ink on the card surface (#fffef9): text2 clears AA there (~5.6:1).
+    color: theme.color.text2
+  },
+  rail: {
+    flex: 1,
+    alignItems: "center",
+    gap: theme.space.s3,
+    borderRadius: theme.radius.xl,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    paddingVertical: theme.space.s3
+  },
+  railTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+
+export { Board };

package/dist/chunk-VFCUIDRT.js

@@ -0,0 +1 @@
+

package/dist/chunk-VQHPQEUH.js

@@ -0,0 +1,273 @@
+import { NumberRoll } from './chunk-CUMUNPXY.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, View, Pressable, TextInput, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BUTTON_PRESS_SCALE = 0.88;
+var ROLL_H = { xs: 18, sm: 20, md: 24, lg: 28 };
+function clamp(n, lo, hi) {
+  const low = Math.max(lo, n);
+  return hi === void 0 ? low : Math.min(hi, low);
+}
+function tidy(n) {
+  return Number(n.toFixed(6));
+}
+function Stepper({
+  value,
+  defaultValue,
+  onValueChange,
+  min = 0,
+  max,
+  step = 1,
+  size = "md",
+  disabled = false,
+  editable = false,
+  accessibilityLabel,
+  pill = false,
+  motion = "full"
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue ?? min);
+  const current = clamp(isControlled ? value : internal, min, max);
+  const { styles } = useStyles(sheet, { size, pill });
+  const theme = useLoamTheme();
+  const atMin = current <= min;
+  const atMax = max !== void 0 && current >= max;
+  const setValue = React.useCallback(
+    (next) => {
+      const clamped = clamp(tidy(next), min, max);
+      if (clamped === current) return;
+      if (!isControlled) setInternal(clamped);
+      onValueChange?.(clamped);
+    },
+    [current, isControlled, max, min, onValueChange]
+  );
+  const rollH = ROLL_H[size];
+  const decrement = () => {
+    haptics.impact("light");
+    setValue(current - step);
+  };
+  const increment = () => {
+    haptics.impact("light");
+    setValue(current + step);
+  };
+  const minusScale = React.useRef(new Animated.Value(1)).current;
+  const plusScale = React.useRef(new Animated.Value(1)).current;
+  const press = (target, to) => Animated.timing(target, {
+    toValue: to,
+    duration: theme.duration.fast,
+    easing: Easing.bezier(...theme.easing.base),
+    useNativeDriver: true
+  }).start();
+  const [text, setText] = React.useState(String(current));
+  React.useEffect(() => {
+    setText(String(current));
+  }, [current]);
+  const commit = () => {
+    const parsed = Number(text);
+    if (text.trim() === "" || Number.isNaN(parsed)) {
+      setText(String(current));
+      return;
+    }
+    setValue(parsed);
+  };
+  const iconSize = theme.ctl.icon[size];
+  const iconColor = (dim) => disabled || dim ? theme.color.text3 : theme.color.text;
+  const slop = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
+  return (
+    // The adjustable/slider semantics live on the value readout (a sibling of
+    // the +/- buttons), never on this wrapper — a slider must not contain nested
+    // interactive controls (WCAG nested-interactive). The wrapper stays a plain
+    // container with no role/label so its `<div>` carries no prohibited aria-label.
+    /* @__PURE__ */ jsxs(View, { style: [styles.container, disabled && styles.containerDisabled], children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Decrement",
+          accessibilityState: { disabled: disabled || atMin },
+          disabled: disabled || atMin,
+          onPress: disabled || atMin ? void 0 : decrement,
+          onPressIn: disabled || atMin ? void 0 : () => press(minusScale, BUTTON_PRESS_SCALE),
+          onPressOut: disabled || atMin ? void 0 : () => press(minusScale, 1),
+          hitSlop: slop,
+          children: /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.button,
+                (disabled || atMin) && styles.buttonDim,
+                { transform: [{ scale: minusScale }] }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: iconSize, color: iconColor(atMin) })
+            }
+          )
+        }
+      ),
+      editable ? /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          accessibilityLabel,
+          editable: !disabled,
+          keyboardType: "numeric",
+          value: text,
+          onChangeText: setText,
+          onEndEditing: commit,
+          onBlur: commit,
+          style: styles.value
+        }
+      ) : (
+        // Clipping wrapper: overflow:hidden masks the rolling digits. This
+        // readout carries the adjustable/slider semantics (role + value) as a
+        // sibling of the buttons, so no interactive control is nested inside it,
+        // and the roll itself is decorative (the value lives on this wrapper).
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [styles.valueWrap, { height: rollH }],
+            accessibilityRole: "adjustable",
+            accessibilityLabel,
+            accessibilityValue: { min, max, now: current },
+            accessibilityState: { disabled },
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": current,
+            children: /* @__PURE__ */ jsx(NumberRoll, { value: current, textStyle: styles.valueText, motion, decorative: true })
+          }
+        )
+      ),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Increment",
+          accessibilityState: { disabled: disabled || atMax },
+          disabled: disabled || atMax,
+          onPress: disabled || atMax ? void 0 : increment,
+          onPressIn: disabled || atMax ? void 0 : () => press(plusScale, BUTTON_PRESS_SCALE),
+          onPressOut: disabled || atMax ? void 0 : () => press(plusScale, 1),
+          hitSlop: slop,
+          children: /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.button,
+                (disabled || atMax) && styles.buttonDim,
+                { transform: [{ scale: plusScale }] }
+              ],
+              children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: iconSize, color: iconColor(atMax) })
+            }
+          )
+        }
+      )
+    ] })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // A tinted tray, not an outlined box: the reference gives the wrapper a
+  // `surface2` fill, `radius.md` corners (or `radius.full` for pill), 4px
+  // padding and no border.
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s1,
+    padding: theme.space.s1,
+    backgroundColor: theme.color.surface2,
+    borderRadius: theme.radius.md,
+    variants: {
+      pill: {
+        true: { borderRadius: theme.radius.full },
+        false: {}
+      },
+      size: { xs: {}, sm: {}, md: {}, lg: {} }
+    }
+  },
+  containerDisabled: { opacity: theme.state.disabledOpacity },
+  // Each button is a raised `surface` card with `radius.sm` corners
+  // (or `radius.full` when pill — the reference uses `50%` for a square).
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.sm,
+    // `shadow.sm` is zeroed under high contrast and `surface` on the track it
+    // sits in is not a boundary, so the button needs a real edge there —
+    // `edge.neutral`, which is `transparent` until the preference flips.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.sm,
+    variants: {
+      // Square icon buttons sized off the control-size ramp (26 / 30 / 36 / 44).
+      size: {
+        xs: { width: theme.ctl.xs, height: theme.ctl.xs },
+        sm: { width: theme.ctl.sm, height: theme.ctl.sm },
+        md: { width: theme.ctl.md, height: theme.ctl.md },
+        lg: { width: theme.ctl.lg, height: theme.ctl.lg }
+      },
+      pill: {
+        true: { borderRadius: theme.radius.full },
+        false: {}
+      }
+    }
+  },
+  buttonDim: { opacity: theme.state.disabledOpacity },
+  // Editable case: TextInput shares font/size/minWidth.
+  value: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text,
+    variants: {
+      size: {
+        xs: { minWidth: theme.space[32], fontSize: theme.fontSize[12] },
+        sm: { minWidth: theme.space[36], fontSize: theme.fontSize[14] },
+        md: { minWidth: theme.space[44], fontSize: theme.fontSize[16] },
+        lg: { minWidth: theme.space[52], fontSize: theme.fontSize[20] }
+      },
+      pill: { true: {}, false: {} }
+    }
+  },
+  // Roll container: clips the entering/exiting digits.
+  valueWrap: {
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      size: {
+        xs: { height: theme.space[18], minWidth: theme.space[32] },
+        sm: { height: theme.space[20], minWidth: theme.space[36] },
+        md: { height: theme.space[24], minWidth: theme.space[44] },
+        lg: { height: theme.space[28], minWidth: theme.space[52] }
+      },
+      pill: { true: {}, false: {} }
+    }
+  },
+  // Text inside valueWrap (font only, no minWidth — that lives on valueWrap).
+  valueText: {
+    textAlign: "center",
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text,
+    variants: {
+      size: {
+        xs: { fontSize: theme.fontSize[12] },
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] },
+        lg: { fontSize: theme.fontSize[20] }
+      },
+      pill: { true: {}, false: {} }
+    }
+  },
+  // Absolutely-positioned overlay for the exiting digit.
+  valueAbsolute: {
+    position: "absolute",
+    left: 0,
+    right: 0
+  }
+}));
+
+export { Stepper };