@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-VEAYTRPX.js

@@ -1,414 +0,0 @@
-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-VQHPQEUH.js

@@ -1,273 +0,0 @@
-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 };