@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-2ZZ7TDJ4.js

@@ -1,324 +0,0 @@
-import { resolveStepState } from './chunk-YLLCXTMC.js';
-import { NumberRoll } from './chunk-CUMUNPXY.js';
-import * as React from 'react';
-import { Animated, Easing, View, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LATE_LABEL = "Still working\u2026";
-var INDETERMINATE_SPAN = 0.4;
-var INDETERMINATE_CYCLES = 2;
-var INDETERMINATE_REST = 0.5;
-function clamp(n, lo, hi) {
-  return Math.max(lo, Math.min(hi, n));
-}
-function useFillColor(tone) {
-  const theme = useLoamTheme();
-  switch (tone) {
-    case "good":
-      return theme.color.good;
-    case "warn":
-      return theme.color.warn;
-    case "danger":
-      return theme.color.danger;
-    default:
-      return theme.color.accent;
-  }
-}
-function Progress({
-  value,
-  max = 100,
-  size = "md",
-  tone = "accent",
-  showValue = false,
-  label,
-  late = false,
-  lateLabel = DEFAULT_LATE_LABEL,
-  motion = "full",
-  animateValue = false,
-  accessibilityLabel
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { size });
-  const fillColor = useFillColor(tone);
-  const indeterminate = value === void 0;
-  const fraction = indeterminate || max <= 0 ? 0 : clamp(value / max, 0, 1);
-  const now = Math.round(fraction * 100);
-  const animateSweep = motion === "full" && !theme.reduceMotion;
-  const showHeader = late || label !== void 0;
-  const progress = React.useRef(new Animated.Value(fraction)).current;
-  React.useEffect(() => {
-    if (indeterminate) return;
-    Animated.timing(progress, {
-      toValue: fraction,
-      duration: theme.duration.base,
-      easing: Easing.bezier(...theme.easing.base),
-      // Layout (width) interpolation can't run on the native driver.
-      useNativeDriver: false
-    }).start();
-  }, [indeterminate, fraction, progress, theme.duration.base, theme.easing.base]);
-  const slide = React.useRef(new Animated.Value(0)).current;
-  React.useEffect(() => {
-    if (!indeterminate) return;
-    if (!animateSweep) {
-      slide.setValue(INDETERMINATE_REST);
-      return;
-    }
-    slide.setValue(0);
-    const loop = Animated.loop(
-      Animated.timing(slide, {
-        toValue: 1,
-        duration: theme.loop.spin * INDETERMINATE_CYCLES,
-        easing: Easing.bezier(...theme.easing.base),
-        // `left` is a layout prop, so this one can't run on the native driver.
-        useNativeDriver: false
-      })
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [indeterminate, slide, theme.loop.spin, theme.easing.base, animateSweep]);
-  const width = progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] });
-  const left = slide.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["-40%", "100%"]
-  });
-  return /* @__PURE__ */ jsxs(View, { style: styles.outer, children: [
-    showHeader ? /* @__PURE__ */ jsx(View, { style: styles.header, children: late ? (
-      // `role="status"` (aria-live: polite on rn-web) announces the copy
-      // swap when work goes late, rather than silently sweeping on.
-      /* @__PURE__ */ jsx(View, { accessibilityRole: "text", role: "status", style: styles.latePill, children: /* @__PURE__ */ jsx(Text, { style: styles.lateText, children: lateLabel }) })
-    ) : label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.wrap, children: [
-      /* @__PURE__ */ jsx(
-        View,
-        {
-          accessibilityRole: "progressbar",
-          accessibilityLabel,
-          accessibilityValue: indeterminate ? void 0 : { min: 0, max, now },
-          accessibilityState: indeterminate ? { busy: true } : void 0,
-          "aria-valuemin": 0,
-          "aria-valuemax": max,
-          "aria-valuenow": indeterminate ? void 0 : now,
-          style: styles.track,
-          children: indeterminate ? /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              style: [
-                styles.fill,
-                { backgroundColor: fillColor, width: `${INDETERMINATE_SPAN * 100}%`, left }
-              ]
-            }
-          ) : /* @__PURE__ */ jsx(Animated.View, { style: [styles.fill, { backgroundColor: fillColor, left: 0, width }] })
-        }
-      ),
-      showValue && !indeterminate ? animateValue ? /* @__PURE__ */ jsx(
-        NumberRoll,
-        {
-          value: now,
-          formatValue: (n) => `${n}%`,
-          textStyle: {
-            fontFamily: theme.font.mono,
-            fontSize: theme.fontSize[14],
-            color: theme.color.text2
-          },
-          motion,
-          style: styles.valueRoll
-        }
-      ) : /* @__PURE__ */ jsxs(Text, { style: styles.value, children: [
-        now,
-        "%"
-      ] }) : null
-    ] })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  // Column that stacks the optional header (late chip / caption) over the bar.
-  // With no header it wraps a single child, so the bar's layout is unchanged.
-  outer: {
-    flexDirection: "column",
-    gap: theme.space.s2,
-    alignSelf: "stretch"
-  },
-  header: { flexDirection: "row", alignItems: "center" },
-  // Warn-toned "still working" chip: soft tint + tone edge (which becomes the
-  // full tone and carries the meaning when the tint collapses under high
-  // contrast), with the AA-safe on-soft ink.
-  latePill: {
-    alignSelf: "flex-start",
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: theme.color.warnSoft,
-    borderColor: theme.edge.warn,
-    borderWidth: theme.borderWidth.base,
-    borderRadius: theme.radius.full,
-    paddingHorizontal: theme.space.s2,
-    paddingVertical: theme.space[2]
-  },
-  lateText: {
-    fontFamily: theme.font.sans,
-    color: theme.color.warnOnSoft,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    letterSpacing: theme.type.caption1.letterSpacing
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    color: theme.color.text2,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing
-  },
-  wrap: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    alignSelf: "stretch"
-  },
-  track: {
-    flex: 1,
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface3,
-    overflow: "hidden",
-    variants: {
-      size: {
-        sm: { height: theme.space[4] },
-        md: { height: theme.space[8] }
-      }
-    }
-  },
-  fill: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    borderRadius: theme.radius.full
-  },
-  value: {
-    minWidth: theme.space[40],
-    textAlign: "right",
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
-  },
-  // Same reserved width as the static read-out, right-aligned, for the roll.
-  valueRoll: { minWidth: theme.space[40], justifyContent: "flex-end" }
-}));
-var STEP_WORD = {
-  working: "in progress",
-  waiting: "waiting",
-  done: "done",
-  crashed: "failed",
-  conflict: "conflict",
-  pending: "pending"
-};
-function stepFill(theme, state) {
-  switch (state) {
-    case "working":
-      return theme.status.working;
-    case "waiting":
-      return theme.status.waiting;
-    case "done":
-      return theme.status.done;
-    case "crashed":
-      return theme.status.crashed;
-    case "conflict":
-      return theme.status.conflict;
-    default:
-      return theme.color.surface3;
-  }
-}
-function StepProgress({
-  total,
-  current,
-  states,
-  size = "md",
-  label,
-  accessibilityLabel,
-  style,
-  testID
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(stepSheet, { size });
-  const count = Math.max(1, Math.trunc(total));
-  const cur = Math.min(Math.max(Math.trunc(current), 1), count);
-  const curIndex = cur - 1;
-  const curState = resolveStepState(curIndex, curIndex, states);
-  const readout = `Step ${cur} of ${count}`;
-  const valueText = curState === "working" ? readout : `${readout}, ${STEP_WORD[curState]}`;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      accessibilityRole: "progressbar",
-      accessibilityLabel,
-      accessibilityValue: { min: 1, max: count, now: cur, text: valueText },
-      "aria-valuemin": 1,
-      "aria-valuemax": count,
-      "aria-valuenow": cur,
-      "aria-valuetext": valueText,
-      testID,
-      style: [styles.outer, style],
-      children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-          label !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.caption, children: label }) : null,
-          /* @__PURE__ */ jsx(Text, { style: [styles.readout, label === void 0 && styles.readoutLead], children: readout })
-        ] }),
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            accessibilityElementsHidden: true,
-            importantForAccessibility: "no-hide-descendants",
-            style: styles.segRow,
-            children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
-              View,
-              {
-                style: [
-                  styles.seg,
-                  { backgroundColor: stepFill(theme, resolveStepState(i, curIndex, states)) }
-                ]
-              },
-              i
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
-var stepSheet = createStyleSheet((theme) => ({
-  outer: { flexDirection: "column", gap: theme.space.s2, alignSelf: "stretch" },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: theme.space.s2
-  },
-  caption: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    color: theme.color.text,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing
-  },
-  readout: {
-    fontFamily: theme.font.sans,
-    color: theme.color.text2,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing
-  },
-  // With no caption the read-out leads on its own, in primary ink.
-  readoutLead: { color: theme.color.text, fontWeight: theme.fontWeight.semibold },
-  segRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1, alignSelf: "stretch" },
-  seg: {
-    flex: 1,
-    borderRadius: theme.radius.full,
-    variants: {
-      size: {
-        sm: { height: theme.space[4] },
-        md: { height: theme.space[8] }
-      }
-    }
-  }
-}));
-
-export { Progress, StepProgress };

package/dist/chunk-3ARE4TES.js

@@ -1,195 +0,0 @@
-import { HoldToConfirm } from './chunk-AWJOCGFZ.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Animated, Pressable, ActivityIndicator, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function holdSizeFor(size) {
-  return size === "xs" ? "sm" : size;
-}
-function useForeground(variant, disabled) {
-  const theme = useLoamTheme();
-  if (disabled) return theme.color.text3;
-  switch (variant) {
-    case "primary":
-      return theme.color.accentInk;
-    case "tonal":
-      return theme.color.accentOnSoft;
-    // v2 on-inks: measured against the danger fill instead of assuming white.
-    case "danger":
-      return theme.color.dangerInk;
-    default:
-      return theme.color.text;
-  }
-}
-function Button({
-  children,
-  variant = "primary",
-  size = "md",
-  loading = false,
-  disabled = false,
-  fullWidth = false,
-  leadingIcon,
-  trailingIcon,
-  onPress,
-  accessibilityLabel,
-  motion = "full",
-  hold = false,
-  onConfirm,
-  holdDuration,
-  confirmingLabel
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { variant, size, disabled, fullWidth });
-  const fg = useForeground(variant, disabled);
-  const scale = React.useRef(new Animated.Value(1)).current;
-  if (hold && variant === "danger") {
-    return /* @__PURE__ */ jsx(
-      HoldToConfirm,
-      {
-        variant: "danger",
-        size: holdSizeFor(size),
-        fullWidth,
-        disabled,
-        leadingIcon,
-        motion,
-        duration: holdDuration,
-        confirmingLabel,
-        accessibilityLabel,
-        onConfirm: onConfirm ?? (() => {
-        }),
-        children
-      }
-    );
-  }
-  const busy = loading;
-  const interactive = !disabled && !busy;
-  const iconSize = theme.ctl.icon[size];
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const animatePress = motion === "full" && !theme.reduceMotion;
-  const spring = (to) => Animated.spring(scale, {
-    toValue: to,
-    useNativeDriver: true,
-    speed: 40,
-    bounciness: 6
-  }).start();
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityState: { disabled, busy },
-      disabled,
-      onPress: interactive ? onPress : void 0,
-      onPressIn: interactive && animatePress ? () => spring(0.97) : void 0,
-      onPressOut: interactive && animatePress ? () => spring(1) : void 0,
-      hitSlop: { top: slopY, bottom: slopY },
-      style: fullWidth ? fullWidthStyle : void 0,
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, { transform: [{ scale }] }], children: [
-        loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: fg, accessibilityLabel: "Loading" }) : leadingIcon ? /* @__PURE__ */ jsx(Icon, { name: leadingIcon, size: iconSize, color: fg }) : null,
-        typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children }) : children,
-        !loading && trailingIcon ? /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: iconSize, color: fg }) : null
-      ] })
-    }
-  );
-}
-var fullWidthStyle = { alignSelf: "stretch" };
-var sheet = createStyleSheet((theme) => ({
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    variants: {
-      variant: {
-        primary: { backgroundColor: theme.color.accent },
-        // `accentSoft` collapses to the plain surface under high contrast, which
-        // would leave a tonal button indistinguishable from a ghost one. The
-        // accent edge is what separates them there; it is `transparent` at
-        // normal contrast, and gives `tonal` the same bordered box as `outline`.
-        tonal: {
-          backgroundColor: theme.color.accentSoft,
-          borderWidth: theme.borderWidth.base,
-          borderColor: theme.edge.accent
-        },
-        outline: {
-          backgroundColor: "transparent",
-          borderWidth: theme.borderWidth.thin,
-          borderColor: theme.color.borderStrong
-        },
-        ghost: { backgroundColor: "transparent" },
-        danger: { backgroundColor: theme.color.danger }
-      },
-      // Height, horizontal padding, gap and radius all resolve from the same
-      // control-size tier — one ramp, four steps (26 / 30 / 36 / 44).
-      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
-        }
-      },
-      // Only a real `disabled` greys the fill — `loading` keeps the variant
-      // colour (R8: busy ≠ disabled).
-      disabled: {
-        true: { backgroundColor: theme.color.surface3, borderWidth: 0 },
-        false: {}
-      },
-      fullWidth: { true: { alignSelf: "stretch" }, false: {} }
-    }
-  },
-  // Bold sans label; size/line-height/tracking come from the overhauled
-  // semantic ramp (footnote → subheadline → body as the button grows).
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    variants: {
-      size: {
-        xs: {
-          fontSize: theme.type.caption1.fontSize,
-          lineHeight: theme.type.caption1.lineHeight,
-          letterSpacing: theme.type.caption1.letterSpacing
-        },
-        sm: {
-          fontSize: theme.type.footnote.fontSize,
-          lineHeight: theme.type.footnote.lineHeight,
-          letterSpacing: theme.type.footnote.letterSpacing
-        },
-        md: {
-          fontSize: theme.type.subheadline.fontSize,
-          lineHeight: theme.type.subheadline.lineHeight,
-          letterSpacing: theme.type.subheadline.letterSpacing
-        },
-        lg: {
-          fontSize: theme.type.body.fontSize,
-          lineHeight: theme.type.body.lineHeight,
-          letterSpacing: theme.type.body.letterSpacing
-        }
-      },
-      variant: {},
-      disabled: {},
-      fullWidth: {}
-    }
-  }
-}));
-
-export { Button };

package/dist/chunk-3NMD74ZU.js

@@ -1,4 +0,0 @@
-// src/lib/focus-ring.ts
-var NO_UA_FOCUS_RING = { outlineStyle: "none" };
-
-export { NO_UA_FOCUS_RING };

package/dist/chunk-3WPW4KUN.js

@@ -1,182 +0,0 @@
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { Animated, Easing, View, Pressable, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var INDICATOR_WIDTH = 28;
-var BADGE_MAX = 99;
-function Tab({
-  item,
-  selected,
-  onPress,
-  motion
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet);
-  const fg = selected ? theme.color.accentStrong : theme.color.text3;
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const spring = (to) => {
-    if (motion === "none") return;
-    Animated.spring(scale, {
-      toValue: to,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 4
-    }).start();
-  };
-  const showBadge = item.badge !== void 0 && item.badge > 0;
-  const badgeText = item.badge !== void 0 && item.badge > BADGE_MAX ? `${BADGE_MAX}+` : `${item.badge}`;
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "tab",
-      accessibilityLabel: item.label,
-      accessibilityState: { selected },
-      onPress,
-      onPressIn: () => spring(0.9),
-      onPressOut: () => spring(1),
-      style: styles.tab,
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.tabInner, { transform: [{ scale }] }], children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.iconWrap, children: [
-          /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 22, color: fg }),
-          showBadge ? /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(Text, { style: styles.badgeText, numberOfLines: 1, children: badgeText }) }) : null
-        ] }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, children: item.label })
-      ] })
-    }
-  );
-}
-function TabBar({
-  items,
-  value,
-  onValueChange,
-  bottomInset = 0,
-  showIndicator = true,
-  motion = "full",
-  accessibilityLabel
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet);
-  const activeIndex = Math.max(
-    0,
-    items.findIndex((item) => item.value === value)
-  );
-  const [barWidth, setBarWidth] = React.useState(0);
-  const onBarLayout = (e) => setBarWidth(e.nativeEvent.layout.width);
-  const segmentWidth = items.length > 0 ? barWidth / items.length : 0;
-  const animateIndicator = motion === "full" && !theme.reduceMotion;
-  const progress = React.useRef(new Animated.Value(activeIndex)).current;
-  React.useEffect(() => {
-    if (!animateIndicator) {
-      progress.setValue(activeIndex);
-      return;
-    }
-    Animated.timing(progress, {
-      toValue: activeIndex,
-      duration: theme.duration.base,
-      easing: Easing.bezier(
-        theme.easing.spring[0],
-        theme.easing.spring[1],
-        theme.easing.spring[2],
-        theme.easing.spring[3]
-      ),
-      useNativeDriver: true
-    }).start();
-  }, [activeIndex, animateIndicator, progress, theme.duration.base, theme.easing.spring]);
-  const translateX = Animated.add(
-    Animated.multiply(progress, segmentWidth),
-    (segmentWidth - theme.space[INDICATOR_WIDTH]) / 2
-  );
-  const select = (next) => onValueChange?.(next);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      accessibilityRole: "tablist",
-      accessibilityLabel,
-      onLayout: onBarLayout,
-      style: [styles.bar, { paddingBottom: bottomInset }],
-      children: [
-        showIndicator && segmentWidth > 0 ? /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            pointerEvents: "none",
-            style: [styles.indicator, { width: theme.space[INDICATOR_WIDTH], transform: [{ translateX }] }]
-          }
-        ) : null,
-        items.map((item) => /* @__PURE__ */ jsx(
-          Tab,
-          {
-            item,
-            selected: item.value === value,
-            onPress: () => select(item.value),
-            motion
-          },
-          item.value
-        ))
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  // `layout.tabbarH` branches on platform: 49 on iOS (UITabBar), 64 on Android
-  // (Material navigation bar). It is a floor rather than a fixed height so a
-  // large OS text size can still grow the labels instead of clipping them; the
-  // safe-area inset is added on top at the use site.
-  bar: {
-    flexDirection: "row",
-    alignItems: "stretch",
-    minHeight: theme.layout.tabbarH,
-    backgroundColor: theme.color.surface,
-    borderTopWidth: theme.borderWidth.thin,
-    borderTopColor: theme.color.border
-  },
-  indicator: {
-    position: "absolute",
-    top: 0,
-    height: theme.space[3],
-    backgroundColor: theme.color.accent,
-    borderRadius: theme.radius.full
-  },
-  tab: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: theme.space.s1
-  },
-  tabInner: {
-    alignItems: "center",
-    gap: theme.space.s1
-  },
-  iconWrap: {
-    position: "relative"
-  },
-  badge: {
-    position: "absolute",
-    top: -theme.space[6],
-    left: theme.space[12],
-    // Reference (buildIconButtons): `min-width:18px;height:18px;padding:0 5px`.
-    // 5px is a step of the spacing ramp.
-    minWidth: theme.space[18],
-    height: theme.space[18],
-    paddingHorizontal: theme.space[5],
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.danger,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  badgeText: {
-    color: theme.color.dangerInk,
-    fontFamily: theme.font.sans,
-    // Reference (buildIconButtons): `font-size:11px` — 11px, read from the ramp rather than hardcoded.
-    fontSize: theme.fontSize[11],
-    fontWeight: theme.fontWeight.bold
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[12],
-    fontWeight: theme.fontWeight.semibold
-  }
-}));
-
-export { TabBar };