@olympusoss/canvas 3.2.1 → 5.0.0

package/src/organisms/tabs/tabs.shared.tsx

@@ -0,0 +1,281 @@
+import { View, Pressable, Text, useTheme, type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
+import * as s from "./tabs.styles.js";
+import { type Variant } from "./tabs.styles.js";
+
+// Shared Tabs shell. The structure (the three looks, their layout, the active
+// selection, the optional count badge), the accessibility, the look precedence,
+// and the press handlers live here once; a platform file supplies only its skin
+// (the native row/trigger shape, selected-tab treatment, indicator, label color,
+// press feedback) and calls createTabs.
+//
+// Tabs are a horizontal row of pressable triggers above panel content, with the
+// active trigger emphasized so the current view is unmistakable.
+//
+// Three looks, picked by boolean prop (first match wins):
+//   - underline (default): each trigger is muted text; the active one gets the
+//     foreground/brand color and an indicator beneath it. The native shape
+//     differs per OS: web/Android draw an underline rule (Android = a 3px brand
+//     `primary` bar with muted inactive labels); iOS draws a gray segmented
+//     track with a raised white pill on the selected tab (no underline).
+//   - `pills`: the row is a muted track; the active trigger is an elevated/tonal
+//     background pill while the rest sit flat and muted.
+//   - `vertical`: the triggers stack into a left-aligned column rail; the active
+//     one is filled with an accent/tonal background while the rest sit flat and
+//     muted. Use it as a settings-style side rail.
+//
+// Orthogonal layout modifier:
+//   - `block`: triggers share the row equally (each flex-1) and the labels
+//     center, so the group spans the full available width. Omit for triggers
+//     that hug their labels at the leading edge.
+//
+// Each tab may carry an optional count badge (the `{ label, badge }` item
+// shape), rendered as a small secondary pill after the label.
+//
+// The active underline is drawn as an explicit indicator View under the trigger
+// rather than as a bottom border in markup (mirroring how ButtonGroup hand-rolls
+// its hairline divider).
+
+// The platform-varying surface. Everything color/shape-bearing the three looks
+// need lives here, built from the active tokens (so each follows light/dark/glass).
+export interface TabsSkin {
+  /** iOS/web dim the trigger on press; Android uses a ripple instead (null). */
+  pressedOpacity: number | null;
+  /** Android ripple over a pressed trigger; null on iOS/web. */
+  ripple: ((t: ColorTokens) => { color: string; borderless: boolean }) | null;
+
+  // --- underline ---
+  underlineRow: (t: ColorTokens) => ViewStyle;
+  underlineTrigger: (t: ColorTokens, selected: boolean) => ViewStyle;
+  underlineIndicator: (t: ColorTokens, selected: boolean) => ViewStyle;
+  underlineLabel: (t: ColorTokens, selected: boolean) => TextStyle;
+
+  // --- pills ---
+  pillsRow: (t: ColorTokens) => ViewStyle;
+  pillsTrigger: (t: ColorTokens, selected: boolean) => ViewStyle;
+  pillsFill: (t: ColorTokens, selected: boolean) => ViewStyle;
+  pillsLabel: (t: ColorTokens, selected: boolean) => TextStyle;
+
+  // --- vertical ---
+  verticalTrigger: (t: ColorTokens, selected: boolean) => ViewStyle;
+  verticalFill: (t: ColorTokens, selected: boolean) => ViewStyle;
+  verticalLabel: (t: ColorTokens, selected: boolean) => TextStyle;
+
+  // --- count badge ---
+  countBadgeBox: (t: ColorTokens) => ViewStyle;
+  countBadgeLabel: (t: ColorTokens, muted: boolean) => TextStyle;
+}
+
+/** A tab is either a bare label or a label paired with a count badge. */
+export type TabItem = string | { label: string; badge?: string };
+
+export interface TabsProps {
+  /** Triggers, left to right. Strings, or `{ label, badge }` for a count. */
+  tabs?: TabItem[];
+  /** Index of the active trigger. */
+  active?: number;
+  /** Called with the pressed trigger's index. */
+  onChange?: (index: number) => void;
+
+  // Look (pick one; default is the underline look). Precedence when more than
+  // one is passed: pills, then vertical, then underline.
+  pills?: boolean;
+  vertical?: boolean;
+  underline?: boolean;
+
+  // Layout: equal full-width triggers vs. leading-aligned hugging triggers.
+  block?: boolean;
+
+  disabled?: boolean;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Variant precedence when more than one is passed: first match wins.
+function variantOf(p: TabsProps): Variant {
+  if (p.pills) return "pills";
+  if (p.vertical) return "vertical";
+  if (p.underline) return "underline";
+  return "underline";
+}
+
+const DEFAULT_TABS: TabItem[] = ["General", "Security", "Notifications", "Billing"];
+
+function labelOf(item: TabItem): string {
+  return typeof item === "string" ? item : item.label;
+}
+
+function badgeOf(item: TabItem): string | undefined {
+  return typeof item === "string" ? undefined : item.badge;
+}
+
+// vertical: flex-col items-stretch gap-1; width w-full (block) or w-[180px].
+function verticalRail(block: boolean): ViewStyle {
+  return {
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 4,
+    width: block ? "100%" : 180,
+  };
+}
+
+/** Build a Tabs component from a platform skin. */
+export function createTabs(skin: TabsSkin) {
+  const ripple = skin.ripple;
+
+  // A small secondary count pill shown after a trigger label.
+  function CountBadge({ children, muted }: { children: string; muted: boolean }) {
+    const { tokens } = useTheme();
+    return (
+      <View style={skin.countBadgeBox(tokens)}>
+        <Text style={skin.countBadgeLabel(tokens, muted)}>{children}</Text>
+      </View>
+    );
+  }
+
+  interface TriggerProps {
+    label: string;
+    badge?: string;
+    selected: boolean;
+    variant: Variant;
+    block?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+  }
+
+  function Trigger({ label, badge, selected, variant, block, disabled, onPress }: TriggerProps) {
+    const { tokens } = useTheme();
+
+    if (variant === "vertical") {
+      // Vertical rail: a full-width, left-aligned row; the active item is filled
+      // with an accent/tonal background.
+      const container: StyleProp<ViewStyle> = [
+        skin.verticalTrigger(tokens, selected),
+        skin.verticalFill(tokens, selected),
+        disabled ? s.disabledDim : null,
+      ];
+      return (
+        <Pressable
+          onPress={onPress}
+          disabled={disabled}
+          android_ripple={ripple ? ripple(tokens) : undefined}
+          accessibilityRole="tab"
+          accessibilityState={{ selected, disabled: !!disabled }}
+          style={({ pressed }) => [container, skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null]}
+        >
+          <Text style={skin.verticalLabel(tokens, selected)}>{label}</Text>
+          {badge != null ? <CountBadge muted={!selected}>{badge}</CountBadge> : null}
+        </Pressable>
+      );
+    }
+
+    if (variant === "pills") {
+      const container: StyleProp<ViewStyle> = [
+        skin.pillsTrigger(tokens, selected),
+        block ? s.flex1 : null,
+        skin.pillsFill(tokens, selected),
+        disabled ? s.disabledDim : null,
+      ];
+      return (
+        <Pressable
+          onPress={onPress}
+          disabled={disabled}
+          android_ripple={ripple ? ripple(tokens) : undefined}
+          accessibilityRole="tab"
+          accessibilityState={{ selected, disabled: !!disabled }}
+          style={({ pressed }) => [container, skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null]}
+        >
+          <Text style={skin.pillsLabel(tokens, selected)}>{label}</Text>
+          {badge != null ? <CountBadge muted={!selected}>{badge}</CountBadge> : null}
+        </Pressable>
+      );
+    }
+
+    // Underline: the active trigger gets the emphasized label and an indicator
+    // drawn as an explicit sliver pinned to the trigger's bottom edge (iOS draws
+    // a raised pill instead, supplied through underlineTrigger).
+    const container: StyleProp<ViewStyle> = [
+      skin.underlineTrigger(tokens, selected),
+      block ? s.flex1 : null,
+      disabled ? s.disabledDim : null,
+    ];
+    return (
+      <Pressable
+        onPress={onPress}
+        disabled={disabled}
+        android_ripple={ripple ? ripple(tokens) : undefined}
+        accessibilityRole="tab"
+        accessibilityState={{ selected, disabled: !!disabled }}
+        style={({ pressed }) => [container, skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null]}
+      >
+        <Text style={skin.underlineLabel(tokens, selected)}>{label}</Text>
+        {badge != null ? <CountBadge muted={!selected}>{badge}</CountBadge> : null}
+        <View style={skin.underlineIndicator(tokens, selected)} />
+      </Pressable>
+    );
+  }
+
+  return function Tabs(props: TabsProps) {
+    const { tabs = DEFAULT_TABS, active = 0, onChange, disabled, style } = props;
+    const variant = variantOf(props);
+    const { tokens } = useTheme();
+
+    if (variant === "vertical") {
+      // A left-aligned column rail of stacked triggers; width hugs its content
+      // unless `block` stretches it to fill the available column.
+      return (
+        <View style={[verticalRail(!!props.block), style]}>
+          {tabs.map((item, i) => (
+            <Trigger
+              key={`${labelOf(item)}-${i}`}
+              label={labelOf(item)}
+              badge={badgeOf(item)}
+              selected={i === active}
+              variant="vertical"
+              block={props.block}
+              disabled={disabled}
+              onPress={() => onChange?.(i)}
+            />
+          ))}
+        </View>
+      );
+    }
+
+    if (variant === "pills") {
+      return (
+        <View style={[skin.pillsRow(tokens), s.blockWidth(!!props.block), style]}>
+          {tabs.map((item, i) => (
+            <Trigger
+              key={`${labelOf(item)}-${i}`}
+              label={labelOf(item)}
+              badge={badgeOf(item)}
+              selected={i === active}
+              variant="pills"
+              block={props.block}
+              disabled={disabled}
+              onPress={() => onChange?.(i)}
+            />
+          ))}
+        </View>
+      );
+    }
+
+    // Underline: the row sits on a hairline bottom border (web/Android) or a gray
+    // segmented track (iOS).
+    return (
+      <View style={[skin.underlineRow(tokens), s.blockWidth(!!props.block), style]}>
+        {tabs.map((item, i) => (
+          <Trigger
+            key={`${labelOf(item)}-${i}`}
+            label={labelOf(item)}
+            badge={badgeOf(item)}
+            selected={i === active}
+            variant="underline"
+            block={props.block}
+            disabled={disabled}
+            onPress={() => onChange?.(i)}
+          />
+        ))}
+      </View>
+    );
+  };
+}

package/src/organisms/tabs/tabs.styles.ts

@@ -0,0 +1,398 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow, alpha } from "../../style/index.js";
+import { type TabsSkin } from "./tabs.shared.js";
+
+// Co-located Tabs skins, one per platform. The shell resolves the look axis
+// (underline / pills / vertical), the selection/block/disabled state, and the
+// badges; the skin supplies only the native SHAPE, sizing, label weight, fill,
+// indicator, and press feedback. The BRAND survives on every platform (the
+// indigo `primary` token and the semantic tokens, never a platform default), so
+// each follows light/dark and the glass surface.
+//
+//   iOS (iOS 27 / Liquid Glass segmented control): the default underline look
+//     becomes a CAPSULE gray track (radius 9999, muted fill, 3px inset); the
+//     SELECTED tab is a raised white/elevated CAPSULE pill (radius 9999, small
+//     shadow); labels ~13pt; no underline rule. Both labels stay on-foreground
+//     (the white pill is the selected affordance, not a brand fill), mirroring
+//     the button-group iOS 27 segmented treatment. Press = dim.
+//   Android (M3 underline tabs): no container; each tab is text with a 3px brand
+//     `primary` indicator bar under the active tab; inactive labels read in
+//     `muted-foreground`; title-case ~14sp; press = android_ripple.
+//   Web: the established Canvas look (underline rule / muted pill track / accent
+//     rail), lifted verbatim from the original file.
+
+export type Variant = "underline" | "pills" | "vertical";
+
+// --- shared layout fragments (color-free; identical across platforms) --------
+
+// flex-1: an equal-flex trigger in block mode (shares the row width).
+export const flex1: ViewStyle = { flexGrow: 1, flexShrink: 1, flexBasis: "0%" };
+
+// opacity-50: the dimmed disabled look the component applies per trigger.
+export const disabledDim: ViewStyle = { opacity: 0.5 };
+
+// w-full vs self-start: in block mode the row fills the available width so
+// equal-flex triggers stretch it; otherwise the row hugs its triggers.
+export function blockWidth(block: boolean): ViewStyle {
+  return block ? { width: "100%" } : { alignSelf: "flex-start" };
+}
+
+// =============================================================================
+// Web: the established Canvas look (lifted verbatim from the original file).
+// =============================================================================
+
+export const webSkin: TabsSkin = {
+  // The selected underline tab carries no track ripple; press dims the trigger.
+  pressedOpacity: 0.9,
+  ripple: null,
+
+  // --- underline ---
+  underlineRow(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      borderBottomWidth: 1,
+      borderColor: tokens.border,
+    };
+  },
+  underlineTrigger() {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      paddingHorizontal: 16,
+      paddingVertical: 10,
+    };
+  },
+  // A 2px primary rule drawn as an explicit sliver pinned to the trigger's
+  // bottom edge (absolute bottom-0 left-0 right-0 h-0.5 rounded-full).
+  underlineIndicator(tokens, selected) {
+    return {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 2,
+      borderRadius: 9999,
+      backgroundColor: selected ? tokens.primary : "transparent",
+    };
+  },
+  underlineLabel(tokens, selected) {
+    return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: selected ? tokens.foreground : tokens["muted-foreground"] };
+  },
+
+  // --- pills ---
+  pillsRow(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      alignSelf: "flex-start",
+      borderRadius: 8,
+      backgroundColor: tokens.muted,
+      padding: 4,
+    };
+  },
+  pillsTrigger() {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+    };
+  },
+  pillsFill(tokens, selected) {
+    return selected
+      ? { backgroundColor: tokens.background, ...shadow("sm") }
+      : { backgroundColor: "transparent" };
+  },
+  pillsLabel(tokens, selected) {
+    return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: selected ? tokens.foreground : tokens["muted-foreground"] };
+  },
+
+  // --- vertical ---
+  verticalTrigger() {
+    return {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+    };
+  },
+  verticalFill(tokens, selected) {
+    return { backgroundColor: selected ? tokens.accent : "transparent" };
+  },
+  verticalLabel(tokens, selected) {
+    return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: selected ? tokens["accent-foreground"] : tokens["muted-foreground"] };
+  },
+
+  // --- count badge ---
+  countBadgeBox(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      borderRadius: 6,
+      borderWidth: 1,
+      borderColor: "transparent",
+      backgroundColor: tokens.secondary,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+    };
+  },
+  countBadgeLabel(tokens, muted) {
+    return { fontSize: 12, lineHeight: 16, fontWeight: "500", color: muted ? tokens["muted-foreground"] : tokens["secondary-foreground"] };
+  },
+};
+
+// =============================================================================
+// iOS (iOS 27 / Liquid Glass segmented control): the in-page tab strip is a
+// CAPSULE segmented control (mirroring button-group's iOS 27 treatment). A
+// capsule gray track (radius 9999) holds raised white CAPSULE pills (radius
+// 9999); the pills look stays a segmented track too; vertical stays a left
+// rail. Press = opacity dim.
+// =============================================================================
+
+const IOS_PILL_SHADOW: ViewStyle = {
+  shadowColor: "#000000",
+  shadowOffset: { width: 0, height: 1 },
+  shadowOpacity: 0.18,
+  shadowRadius: 2,
+  elevation: 2,
+};
+
+export const iosSkin: TabsSkin = {
+  pressedOpacity: 0.8, // HIG: dim on press
+  ripple: null,
+
+  // --- underline -> capsule segmented control (gray track + raised pill) ---
+  underlineRow(tokens) {
+    // The capsule gray track (radius 9999, muted fill, 3px inset).
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 0,
+      padding: 3,
+      borderRadius: 9999,
+      backgroundColor: tokens.muted,
+    };
+  },
+  underlineTrigger(tokens, selected) {
+    // Each tab is an independent capsule pill (radius 9999) inside the track;
+    // the selected one is raised white/elevated.
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      borderRadius: 9999,
+      paddingHorizontal: 14,
+      paddingVertical: 7,
+      ...(selected ? { ...IOS_PILL_SHADOW, backgroundColor: tokens.background } : { backgroundColor: "transparent" }),
+    };
+  },
+  // No underline rule on iOS: the raised capsule pill is the selected affordance.
+  underlineIndicator() {
+    return { display: "none" };
+  },
+  underlineLabel(tokens, selected) {
+    // ~13pt SF label; selected reads slightly heavier. Both stay on-foreground
+    // (the white pill is the selected affordance, not a brand fill).
+    return { fontSize: 13, lineHeight: 18, fontWeight: selected ? "600" : "500", color: tokens.foreground };
+  },
+
+  // --- pills (capsule segmented track, same gray-track + raised pill) ---
+  pillsRow(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 0,
+      alignSelf: "flex-start",
+      borderRadius: 9999,
+      backgroundColor: tokens.muted,
+      padding: 3,
+    };
+  },
+  pillsTrigger() {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      borderRadius: 9999,
+      paddingHorizontal: 14,
+      paddingVertical: 7,
+    };
+  },
+  pillsFill(tokens, selected) {
+    return selected
+      ? { ...IOS_PILL_SHADOW, backgroundColor: tokens.background }
+      : { backgroundColor: "transparent" };
+  },
+  pillsLabel(tokens, selected) {
+    return { fontSize: 13, lineHeight: 18, fontWeight: selected ? "600" : "500", color: tokens.foreground };
+  },
+
+  // --- vertical (HIG grouped rail; active item is an accent-filled row) ---
+  verticalTrigger() {
+    return {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 9,
+    };
+  },
+  verticalFill(tokens, selected) {
+    return { backgroundColor: selected ? tokens.accent : "transparent" };
+  },
+  verticalLabel(tokens, selected) {
+    return { fontSize: 15, lineHeight: 20, fontWeight: selected ? "600" : "400", color: selected ? tokens["accent-foreground"] : tokens.foreground };
+  },
+
+  // --- count badge ---
+  countBadgeBox(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      borderRadius: 9999,
+      borderWidth: 0,
+      borderColor: "transparent",
+      backgroundColor: tokens.secondary,
+      paddingHorizontal: 7,
+      paddingVertical: 1,
+    };
+  },
+  countBadgeLabel(tokens, muted) {
+    return { fontSize: 12, lineHeight: 16, fontWeight: "600", color: muted ? tokens["muted-foreground"] : tokens["secondary-foreground"] };
+  },
+};
+
+// =============================================================================
+// Android (Material 3): underline tabs. No container; each tab is text with a
+// 3px brand `primary` indicator bar under the active tab; inactive labels read
+// muted; press = android_ripple.
+// =============================================================================
+
+export const androidSkin: TabsSkin = {
+  pressedOpacity: null, // Android uses a ripple instead
+  ripple: (tokens) => ({ color: alpha(tokens.primary, 0.12), borderless: false }),
+
+  // --- underline (M3 primary tabs) ---
+  underlineRow(tokens) {
+    // M3 tabs sit on a hairline divider; no track fill.
+    return {
+      flexDirection: "row",
+      alignItems: "stretch",
+      borderBottomWidth: 1,
+      borderColor: tokens.border,
+    };
+  },
+  underlineTrigger() {
+    // Taller M3 tab target; the indicator hugs the bottom edge.
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+    };
+  },
+  // M3 indicator: a 3px brand `primary` bar with a slight top rounding under
+  // the active tab.
+  underlineIndicator(tokens, selected) {
+    return {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: 3,
+      borderTopLeftRadius: 3,
+      borderTopRightRadius: 3,
+      backgroundColor: selected ? tokens.primary : "transparent",
+    };
+  },
+  underlineLabel(tokens, selected) {
+    // M3 titleSmall ~14sp; active label carries the brand indigo, inactive muted.
+    return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: selected ? tokens.primary : tokens["muted-foreground"] };
+  },
+
+  // --- pills (M3 keeps the muted-track + tonal selected fill) ---
+  pillsRow(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      alignSelf: "flex-start",
+      borderRadius: 9999,
+      backgroundColor: tokens.muted,
+      padding: 4,
+    };
+  },
+  pillsTrigger() {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      borderRadius: 9999,
+      paddingHorizontal: 14,
+      paddingVertical: 7,
+    };
+  },
+  pillsFill(tokens, selected) {
+    // Tonal selected fill (secondaryContainer ~ alpha(primary, .12)).
+    return selected ? { backgroundColor: alpha(tokens.primary, 0.12) } : { backgroundColor: "transparent" };
+  },
+  pillsLabel(tokens, selected) {
+    return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: selected ? tokens.primary : tokens["muted-foreground"] };
+  },
+
+  // --- vertical (M3 navigation rail row; active item is a tonal pill) ---
+  verticalTrigger() {
+    return {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      borderRadius: 9999,
+      paddingHorizontal: 14,
+      paddingVertical: 9,
+    };
+  },
+  verticalFill(tokens, selected) {
+    return { backgroundColor: selected ? alpha(tokens.primary, 0.12) : "transparent" };
+  },
+  verticalLabel(tokens, selected) {
+    return { fontSize: 14, lineHeight: 20, fontWeight: "500", color: selected ? tokens.primary : tokens["muted-foreground"] };
+  },
+
+  // --- count badge ---
+  countBadgeBox(tokens) {
+    return {
+      flexDirection: "row",
+      alignItems: "center",
+      alignSelf: "flex-start",
+      borderRadius: 9999,
+      borderWidth: 0,
+      borderColor: "transparent",
+      backgroundColor: tokens.secondary,
+      paddingHorizontal: 7,
+      paddingVertical: 1,
+    };
+  },
+  countBadgeLabel(tokens, muted) {
+    return { fontSize: 12, lineHeight: 16, fontWeight: "500", color: muted ? tokens["muted-foreground"] : tokens["secondary-foreground"] };
+  },
+};

package/src/organisms/tabs/tabs.tsx

@@ -0,0 +1,6 @@
+import { createTabs } from "./tabs.shared.js";
+import { webSkin } from "./tabs.styles.js";
+
+// Web Tabs (the base; Metro falls back to it on native, web bundlers resolve it).
+export const Tabs = createTabs(webSkin);
+export type { TabsProps, TabItem } from "./tabs.shared.js";