@colixsystems/widget-sdk 0.162.0 → 0.164.0

package/dist/contract.cjs

@@ -228,6 +228,9 @@ function isThemeColorTokenRef(value) {
 // Single source for four consumers — the build runner's set_theme coercion, the
 // shared host resolver, the planner prompt, and the SDK docs — so the vocabulary
 // cannot drift between what Mason may emit and what a host actually applies.
+// The looks a `tabs.style` token may name; `<Tabs>` draws each.
+const THEME_TAB_STYLES = Object.freeze(["segmented", "pill", "underline"]);
+
 const THEME_COMPONENT_SHADOWS = Object.freeze(["none", "sm", "md", "lg"]);
 
 // sc-3857 — the `textTransform` token's closed enum, matching the per-instance
@@ -413,6 +416,7 @@ const MUTED_INPUT_FIELDS = Object.freeze({
   textColor: "inputTextColor",
   borderColor: "inputBorderColor",
   radius: "inputRadius",
+  height: "inputHeight",
 });
 
 // The Form widgets' choice-field option list -- the closest thing this
@@ -445,6 +449,16 @@ const LIST_ROW_FIELDS = Object.freeze({
   dividerWidth: "listDividerWidth",
 });
 
+// The tab-strip vocabulary. Bound by name as well as onto User Management,
+// whose Users / Groups / Invites strip is drawn by the SDK <Tabs>.
+const TABS_FIELDS = Object.freeze({
+  style: "tabsStyle",
+  activeColor: "tabsActiveColor",
+  activeTextColor: "tabsActiveTextColor",
+  textColor: "tabsTextColor",
+  radius: "tabsRadius",
+});
+
 const THEME_COMPONENTS = Object.freeze({
   button: Object.freeze({
     label: "Buttons",
@@ -563,6 +577,8 @@ const THEME_COMPONENTS = Object.freeze({
       textColor: Object.freeze({ type: "color", uiDefault: "colors.onSurfaceMuted" }),
       borderColor: Object.freeze({ type: "color", uiDefault: "colors.border" }),
       radius: Object.freeze({ type: "size", min: 0, max: 48, uiDefault: "radii.sm" }),
+      // The field's minimum height; `<TextField>` reads it directly too.
+      height: Object.freeze({ type: "size", min: 32, max: 72 }),
     }),
     targets: Object.freeze({
       "appstudio.form-input": MUTED_INPUT_FIELDS,
@@ -614,6 +630,22 @@ const THEME_COMPONENTS = Object.freeze({
       "appstudio.data-list": LIST_ROW_FIELDS,
     }),
   }),
+  // Tab strips: `<Tabs>` and the page Tabs container read this scope directly;
+  // the fields bind it onto widgets. `style` is the first `enum` token.
+  tabs: Object.freeze({
+    label: "Tabs",
+    universalFields: TABS_FIELDS,
+    tokens: Object.freeze({
+      style: Object.freeze({ type: "enum", values: THEME_TAB_STYLES }),
+      activeColor: Object.freeze({ type: "color", uiDefault: "colors.primary" }),
+      activeTextColor: Object.freeze({ type: "color" }),
+      textColor: Object.freeze({ type: "color", uiDefault: "colors.onSurfaceMuted" }),
+      radius: Object.freeze({ type: "size", min: 0, max: 24 }),
+    }),
+    targets: Object.freeze({
+      "appstudio.user-management": TABS_FIELDS,
+    }),
+  }),
 });
 
 // sc-4505 — the value types a widget event payload field may declare. Narrower
@@ -2224,6 +2256,34 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
+  {
+    name: "Tabs",
+    description:
+      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. THE way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Never hand-roll tabs from `Pressable` chips. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. The strip scrolls sideways when the tabs overflow. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "Card",
+    description:
+      'Themed card surface. `<Card>…</Card>` — THE way to draw a card, panel or tile: with no props it takes the app\'s card look (Theme Settings > Cards: background, border, corner radius, padding, shadow, gradient) so it matches every built-in card. Override one card with `background`, `borderColor`, `radius`, `padding` (a number or `{ top, right, bottom, left }`), `shadow` ("none" | "sm" | "md" | "lg") or `gradient` (`{ from, to, angle }`), or pass `style={props.style}` when your widget declares the `cardBackground` / `cardBorderColor` / `cardRadius` / `cardPadding` / `cardGradient` / `shadow` / `margin` style fields, so an author can restyle it. A gradient paints on both hosts. `as` renders the card as another container (e.g. `Pressable`, `ScrollView`) and every other prop lands on it. Never hand-roll a card from `View` + border + radius.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "Button",
+    description:
+      'Themed button. `<Button title="Save" onPress={save} />` — THE way to draw a button: its fill, label colour, border, corner radius, padding, weight, shadow and gradient come from the app\'s button look (Theme Settings > Buttons, and Destructive / Focus ring for the danger variant and emphasis border), so it matches the built-in Button widget. Props: `title`, `onPress` (omit it for a purely visual button inside something else that is pressable), `variant` ("primary" default | "secondary" | "outlined" | "danger"), `icon` (a lucide name) with `iconPosition` ("leading" | "trailing"), `disabled`, `accessibilityLabel`, `testID`, `style` (extra container style, e.g. `alignSelf`) and `labelStyle`. Pass `fields` — `{ background, textColor, borderColor, borderWidth, paddingX, paddingY, radius, fontWeight, fontSize, shadow, gradient }` — to override one button, e.g. from style fields your widget declares. Never hand-roll a button from `Pressable` + background + radius.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "TextField",
+    description:
+      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works, and its background, text colour, border, corner radius and height come from the app\'s input look (Theme Settings > Muted), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. Use it instead of styling a bare `TextInput`.',
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -4413,7 +4473,17 @@ const CONTRACT = deepFreeze({
   //    primitives that read it, plus `textRoleStyle` and its role helpers.
   //    Widgets each hand-rolled their rows, so two lists in one app disagreed.
   //    Additive: a theme without `list` paints the rows exactly as before.
-  version: "1.125.0",
+  // 1.126.0: additive — the `tabs` component scope and the `Tabs` primitive
+  //    that reads it, and the `enum` component-token type (`values`), first
+  //    used by `tabs.style`. The page Tabs container renders through `Tabs` on
+  //    both hosts. Additive: an unthemed strip is the segmented control the
+  //    export always drew.
+  // 1.127.0: additive — the `Card`, `Button` and `TextField` primitives,
+  //    lifted from the built-in widgets' shared card surface, button surface
+  //    and form field so every widget draws them from one implementation, plus
+  //    a `height` token on the `muted` scope. Additive: the built-ins render
+  //    exactly as before.
+  version: "1.127.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -4426,6 +4496,7 @@ const CONTRACT = deepFreeze({
   themeTokens: DEFAULT_THEME_TOKENS,
   themeColorTokens: THEME_COLOR_TOKENS,
   themeComponents: THEME_COMPONENTS,
+  themeComponentTabStyles: THEME_TAB_STYLES,
   themeComponentShadows: THEME_COMPONENT_SHADOWS,
   themeComponentTextTransforms: THEME_COMPONENT_TEXT_TRANSFORMS,
   themeComponentGradient: THEME_COMPONENT_GRADIENT,

package/dist/contract.js

@@ -228,6 +228,9 @@ function isThemeColorTokenRef(value) {
 // Single source for four consumers — the build runner's set_theme coercion, the
 // shared host resolver, the planner prompt, and the SDK docs — so the vocabulary
 // cannot drift between what Mason may emit and what a host actually applies.
+// The looks a `tabs.style` token may name; `<Tabs>` draws each.
+const THEME_TAB_STYLES = Object.freeze(["segmented", "pill", "underline"]);
+
 const THEME_COMPONENT_SHADOWS = Object.freeze(["none", "sm", "md", "lg"]);
 
 // sc-3857 — the `textTransform` token's closed enum, matching the per-instance
@@ -413,6 +416,7 @@ const MUTED_INPUT_FIELDS = Object.freeze({
   textColor: "inputTextColor",
   borderColor: "inputBorderColor",
   radius: "inputRadius",
+  height: "inputHeight",
 });
 
 // The Form widgets' choice-field option list -- the closest thing this
@@ -445,6 +449,16 @@ const LIST_ROW_FIELDS = Object.freeze({
   dividerWidth: "listDividerWidth",
 });
 
+// The tab-strip vocabulary. Bound by name as well as onto User Management,
+// whose Users / Groups / Invites strip is drawn by the SDK <Tabs>.
+const TABS_FIELDS = Object.freeze({
+  style: "tabsStyle",
+  activeColor: "tabsActiveColor",
+  activeTextColor: "tabsActiveTextColor",
+  textColor: "tabsTextColor",
+  radius: "tabsRadius",
+});
+
 const THEME_COMPONENTS = Object.freeze({
   button: Object.freeze({
     label: "Buttons",
@@ -563,6 +577,8 @@ const THEME_COMPONENTS = Object.freeze({
       textColor: Object.freeze({ type: "color", uiDefault: "colors.onSurfaceMuted" }),
       borderColor: Object.freeze({ type: "color", uiDefault: "colors.border" }),
       radius: Object.freeze({ type: "size", min: 0, max: 48, uiDefault: "radii.sm" }),
+      // The field's minimum height; `<TextField>` reads it directly too.
+      height: Object.freeze({ type: "size", min: 32, max: 72 }),
     }),
     targets: Object.freeze({
       "appstudio.form-input": MUTED_INPUT_FIELDS,
@@ -614,6 +630,22 @@ const THEME_COMPONENTS = Object.freeze({
       "appstudio.data-list": LIST_ROW_FIELDS,
     }),
   }),
+  // Tab strips: `<Tabs>` and the page Tabs container read this scope directly;
+  // the fields bind it onto widgets. `style` is the first `enum` token.
+  tabs: Object.freeze({
+    label: "Tabs",
+    universalFields: TABS_FIELDS,
+    tokens: Object.freeze({
+      style: Object.freeze({ type: "enum", values: THEME_TAB_STYLES }),
+      activeColor: Object.freeze({ type: "color", uiDefault: "colors.primary" }),
+      activeTextColor: Object.freeze({ type: "color" }),
+      textColor: Object.freeze({ type: "color", uiDefault: "colors.onSurfaceMuted" }),
+      radius: Object.freeze({ type: "size", min: 0, max: 24 }),
+    }),
+    targets: Object.freeze({
+      "appstudio.user-management": TABS_FIELDS,
+    }),
+  }),
 });
 
 // sc-4505 — the value types a widget event payload field may declare. Narrower
@@ -2224,6 +2256,34 @@ const PRIMITIVES = [
     rnComponent: null,
     docsUrl: null,
   },
+  {
+    name: "Tabs",
+    description:
+      'Themed tab strip. `<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />`. THE way to switch between views inside a widget: its look (a segmented control, pills, or an underline — Theme Settings > Tabs) and its colours and corner radius come from the theme, so every tab strip in the app matches, including the page Tabs container. It draws the strip only; render the selected panel yourself below it. Never hand-roll tabs from `Pressable` chips. Props: `items` (`[{ key, label, icon?, disabled?, testID? }]`, icon is a lucide name), `value` (the selected key), `onChange(key)`, `accessibilityLabel`, `style`, `testID`, and the overrides `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor`, `radius`. The strip scrolls sideways when the tabs overflow. Declare `tabsStyle` / `tabsActiveColor` / `tabsActiveTextColor` / `tabsTextColor` / `tabsRadius` style fields and pass them through to let an author override one widget.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "Card",
+    description:
+      'Themed card surface. `<Card>…</Card>` — THE way to draw a card, panel or tile: with no props it takes the app\'s card look (Theme Settings > Cards: background, border, corner radius, padding, shadow, gradient) so it matches every built-in card. Override one card with `background`, `borderColor`, `radius`, `padding` (a number or `{ top, right, bottom, left }`), `shadow` ("none" | "sm" | "md" | "lg") or `gradient` (`{ from, to, angle }`), or pass `style={props.style}` when your widget declares the `cardBackground` / `cardBorderColor` / `cardRadius` / `cardPadding` / `cardGradient` / `shadow` / `margin` style fields, so an author can restyle it. A gradient paints on both hosts. `as` renders the card as another container (e.g. `Pressable`, `ScrollView`) and every other prop lands on it. Never hand-roll a card from `View` + border + radius.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "Button",
+    description:
+      'Themed button. `<Button title="Save" onPress={save} />` — THE way to draw a button: its fill, label colour, border, corner radius, padding, weight, shadow and gradient come from the app\'s button look (Theme Settings > Buttons, and Destructive / Focus ring for the danger variant and emphasis border), so it matches the built-in Button widget. Props: `title`, `onPress` (omit it for a purely visual button inside something else that is pressable), `variant` ("primary" default | "secondary" | "outlined" | "danger"), `icon` (a lucide name) with `iconPosition` ("leading" | "trailing"), `disabled`, `accessibilityLabel`, `testID`, `style` (extra container style, e.g. `alignSelf`) and `labelStyle`. Pass `fields` — `{ background, textColor, borderColor, borderWidth, paddingX, paddingY, radius, fontWeight, fontSize, shadow, gradient }` — to override one button, e.g. from style fields your widget declares. Never hand-roll a button from `Pressable` + background + radius.',
+    rnComponent: null,
+    docsUrl: null,
+  },
+  {
+    name: "TextField",
+    description:
+      'Themed text-entry field. `<TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />` — every `TextInput` prop works, and its background, text colour, border, corner radius and height come from the app\'s input look (Theme Settings > Muted), so a widget\'s fields match the built-in forms. `multiline` grows the field to a ceiling and then scrolls inside it. Override one field with `background`, `textColor`, `borderColor`, `radius` or `height`; `style` is merged last. Use it instead of styling a bare `TextInput`.',
+    rnComponent: null,
+    docsUrl: null,
+  },
 ];
 
 const CATEGORIES = [
@@ -4409,7 +4469,17 @@ const CONTRACT = deepFreeze({
   //    primitives that read it, plus `textRoleStyle` and its role helpers.
   //    Widgets each hand-rolled their rows, so two lists in one app disagreed.
   //    Additive: a theme without `list` paints the rows exactly as before.
-  version: "1.125.0",
+  // 1.126.0: additive — the `tabs` component scope and the `Tabs` primitive
+  //    that reads it, and the `enum` component-token type (`values`), first
+  //    used by `tabs.style`. The page Tabs container renders through `Tabs` on
+  //    both hosts. Additive: an unthemed strip is the segmented control the
+  //    export always drew.
+  // 1.127.0: additive — the `Card`, `Button` and `TextField` primitives,
+  //    lifted from the built-in widgets' shared card surface, button surface
+  //    and form field so every widget draws them from one implementation, plus
+  //    a `height` token on the `muted` scope. Additive: the built-ins render
+  //    exactly as before.
+  version: "1.127.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -4422,6 +4492,7 @@ const CONTRACT = deepFreeze({
   themeTokens: DEFAULT_THEME_TOKENS,
   themeColorTokens: THEME_COLOR_TOKENS,
   themeComponents: THEME_COMPONENTS,
+  themeComponentTabStyles: THEME_TAB_STYLES,
   themeComponentShadows: THEME_COMPONENT_SHADOWS,
   themeComponentTextTransforms: THEME_COMPONENT_TEXT_TRANSFORMS,
   themeComponentGradient: THEME_COMPONENT_GRADIENT,

package/dist/icon.js

@@ -18,10 +18,14 @@ import React from "react";
 import * as LucideIcons from "lucide-react-native";
 import { normalizeLucideIconName } from "./lucideIconName.js";
 
-export function Icon({ name, size, color }) {
+/** The lucide component a name resolves to, or null for an unknown name. */
+export function lucideGlyph(name) {
   const resolved = normalizeLucideIconName(name);
-  const candidate = resolved ? LucideIcons[resolved] : null;
-  const Component = candidate || LucideIcons.Square;
+  return (resolved && LucideIcons[resolved]) || null;
+}
+
+export function Icon({ name, size, color }) {
+  const Component = lucideGlyph(name) || LucideIcons.Square;
   const pixelSize = Number.isFinite(size) && size > 0 ? size : 24;
   return React.createElement(Component, {
     size: pixelSize,

package/dist/index.d.ts

@@ -2615,6 +2615,118 @@ export const EmptyState: (props: {
   children?: ReactNode;
 }) => any;
 
+/**
+ * Themed card surface. With no props it takes the app's card look (Theme
+ * Settings > Cards). Props override one card; `style` takes the `card*` style
+ * fields a widget declares; `as` renders it as another container.
+ *
+ * @example
+ *   <Card><Text>…</Text></Card>
+ *   <Card as={Pressable} onPress={open} radius={12} shadow="md">…</Card>
+ */
+export const Card: (props: {
+  background?: string;
+  borderColor?: string;
+  radius?: number | { topLeft?: number; topRight?: number; bottomRight?: number; bottomLeft?: number };
+  padding?: number | { top?: number; right?: number; bottom?: number; left?: number };
+  shadow?: "none" | "sm" | "md" | "lg";
+  gradient?: { from: string; to: string; angle?: number };
+  /** `card*` style fields, `shadow`, `margin` — a widget's per-instance style. */
+  style?: Record<string, any>;
+  /** The caller's own base style; a card given none starts from the theme. */
+  baseStyle?: any;
+  as?: any;
+  fillInGradient?: boolean;
+  containerStyle?: any;
+  withoutMargin?: boolean;
+  children?: ReactNode;
+  [prop: string]: any;
+}) => any;
+
+export type ButtonVariant = "primary" | "secondary" | "outlined" | "danger";
+export const BUTTON_VARIANTS: readonly ButtonVariant[];
+
+/**
+ * Themed button (Theme Settings > Buttons, Destructive, Focus ring). Omit
+ * `onPress` for a purely visual button inside something pressable.
+ *
+ * @example
+ *   <Button title="Save" onPress={save} />
+ *   <Button title="Delete" variant="danger" icon="trash-2" onPress={remove} />
+ */
+export const Button: (props: {
+  title: ReactNode;
+  variant?: ButtonVariant;
+  icon?: string;
+  iconPosition?: "leading" | "trailing";
+  onPress?: () => void;
+  disabled?: boolean;
+  /** Per-button surface fields; unset ones follow the theme. */
+  fields?: {
+    background?: string;
+    textColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    paddingX?: number;
+    paddingY?: number;
+    radius?: number;
+    fontWeight?: string;
+    fontSize?: number;
+    shadow?: "none" | "sm" | "md" | "lg";
+    gradient?: { from: string; to: string; angle?: number };
+  };
+  style?: any;
+  labelStyle?: any;
+  accessibilityLabel?: string;
+  testID?: string;
+}) => any;
+
+/**
+ * Themed text-entry field (Theme Settings > Muted). Every TextInput prop works.
+ *
+ * @example
+ *   <TextField value={name} onChangeText={setName} placeholder="Your name" accessibilityLabel="Name" />
+ */
+export const TextField: (props: {
+  background?: string;
+  textColor?: string;
+  borderColor?: string;
+  radius?: number;
+  height?: number;
+  multiline?: boolean;
+  style?: any;
+  [prop: string]: any;
+}) => any;
+
+export type TabStyle = "segmented" | "pill" | "underline";
+
+/**
+ * Themed tab strip. Its look (segmented, pills or underline), colours and
+ * corners come from the theme's `tabs` scope, so every strip in the app —
+ * including the page Tabs container — matches. Draws the strip only; render
+ * the selected panel yourself.
+ *
+ * @example
+ *   const [tab, setTab] = useState("open");
+ *   <Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done" }]} value={tab} onChange={setTab} />
+ */
+export const Tabs: (props: {
+  items: Array<{ key: string; label: ReactNode; icon?: string; disabled?: boolean; testID?: string }>;
+  value?: string;
+  onChange?: (key: string) => void;
+  /** Overrides the theme's tab style for this strip. */
+  variant?: TabStyle;
+  activeColor?: string;
+  activeTextColor?: string;
+  textColor?: string;
+  radius?: number;
+  /** For hosts rendering outside a widget context; widgets omit it. */
+  theme?: any;
+  accessibilityLabel?: string;
+  style?: any;
+  testID?: string;
+}) => any;
+
 export type TextRole = "display" | "title" | "subtitle" | "body" | "caption" | "overline";
 export const TEXT_ROLES: readonly TextRole[];
 export const TEXT_TRANSFORMS: readonly string[];

package/dist/index.js

@@ -191,6 +191,36 @@ export {
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 // Themed list building blocks; rows follow the theme's `list` scope.
 export { List, ListRow, EmptyState } from "./list.js";
+// The one card surface: the theme's `card` scope, a gradient fill, margin.
+export { Card } from "./card.js";
+export {
+  SHADOW_PRESETS,
+  shadowStyle,
+  SPACING_MAX_PX,
+  CARD_RADIUS_MAX_PX,
+  FRAME_RADIUS_MAX_PX,
+  marginStyle,
+  spacingOverlay,
+  cornerRadiusOverlay,
+  cardSurfaceStyle,
+  cardOverlay,
+  gradientProps,
+  cardGradientProps,
+} from "./card-style.js";
+// The themed button; follows the theme's button, destructive and ring scopes.
+export { Button, BUTTON_VARIANTS } from "./button.js";
+export {
+  BUTTON_PADDING_MAX,
+  BUTTON_BORDER_WIDTH_MAX,
+  SELF_ALIGNMENTS,
+  buttonSurfaceOverlay,
+  buttonSurfaceTextOverlay,
+  selfAlignStyle,
+} from "./button-style.js";
+// The themed text-entry field; follows the theme's `muted` scope.
+export { TextField } from "./text-field.js";
+// A themed tab strip; follows the theme's `tabs` scope.
+export { Tabs } from "./tabs.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/index.native.js

@@ -184,6 +184,36 @@ export {
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 // Themed list building blocks; rows follow the theme's `list` scope.
 export { List, ListRow, EmptyState } from "./list.native.js";
+// The one card surface: the theme's `card` scope, a gradient fill, margin.
+export { Card } from "./card.native.js";
+export {
+  SHADOW_PRESETS,
+  shadowStyle,
+  SPACING_MAX_PX,
+  CARD_RADIUS_MAX_PX,
+  FRAME_RADIUS_MAX_PX,
+  marginStyle,
+  spacingOverlay,
+  cornerRadiusOverlay,
+  cardSurfaceStyle,
+  cardOverlay,
+  gradientProps,
+  cardGradientProps,
+} from "./card-style.js";
+// The themed button; follows the theme's button, destructive and ring scopes.
+export { Button, BUTTON_VARIANTS } from "./button.native.js";
+export {
+  BUTTON_PADDING_MAX,
+  BUTTON_BORDER_WIDTH_MAX,
+  SELF_ALIGNMENTS,
+  buttonSurfaceOverlay,
+  buttonSurfaceTextOverlay,
+  selfAlignStyle,
+} from "./button-style.js";
+// The themed text-entry field; follows the theme's `muted` scope.
+export { TextField } from "./text-field.native.js";
+// A themed tab strip; follows the theme's `tabs` scope.
+export { Tabs } from "./tabs.native.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/tabs-tokens.js

@@ -0,0 +1,75 @@
+// The values `<Tabs>` paints with, resolved from the theme's `tabs` component
+// scope. Platform-free, like list-tokens.js, so both hosts draw one strip from
+// the same numbers and tests can pin them without a renderer.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { CONTRACT, contrastRatio } from "./contract.js";
+
+export const TAB_STYLES = CONTRACT.themeComponentTabStyles;
+
+// Segmented is the strip the exported app's Tabs container always drew.
+export const DEFAULT_TAB_STYLE = "segmented";
+export const DEFAULT_TAB_RADIUS = 6;
+
+// Per-strip overrides a widget may pass, named as the theme tokens are.
+export const TAB_TOKEN_NAMES = Object.freeze([
+  "style",
+  "activeColor",
+  "activeTextColor",
+  "textColor",
+  "radius",
+]);
+
+function isSet(value) {
+  return value !== undefined && value !== null && value !== "";
+}
+
+function pick(overrides, scope, name) {
+  if (overrides && isSet(overrides[name])) return overrides[name];
+  if (scope && isSet(scope[name])) return scope[name];
+  return undefined;
+}
+
+/**
+ * Resolve one tab strip: explicit override, then the theme's `tabs` scope,
+ * then the widget's `defaultStyle`, then the tokens. The active label is the
+ * accent on the surface styles, and readable on the accent for a pill.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ * @param {object} [overrides] — per-strip values keyed by TAB_TOKEN_NAMES.
+ */
+export function resolveTabsTokens(theme, overrides) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const colors = base.colors || DEFAULT_THEME_TOKENS.colors;
+  const scope = base.components && base.components.tabs;
+
+  // The widget's own default sits BELOW the theme: a look still wins.
+  const requested =
+    pick(overrides, scope, "style") ?? (overrides && overrides.defaultStyle);
+  const style = TAB_STYLES.includes(requested) ? requested : DEFAULT_TAB_STYLE;
+  const ownAccent = pick(overrides, scope, "activeColor");
+  const activeColor = ownAccent ?? colors.primary;
+  return {
+    style,
+    activeColor,
+    activeTextColor:
+      pick(overrides, scope, "activeTextColor") ??
+      (style === "pill"
+        ? ownAccent
+          ? readableOn(ownAccent, colors)
+          : colors.onPrimary
+        : activeColor),
+    textColor: pick(overrides, scope, "textColor") ?? colors.onSurfaceMuted,
+    radius: pick(overrides, scope, "radius") ?? DEFAULT_TAB_RADIUS,
+    barBackground: colors.surfaceMuted,
+    activeSurface: colors.surface,
+    rule: colors.border,
+  };
+}
+
+// A chosen accent carries the label that reads best on it, dark or light.
+function readableOn(fill, colors) {
+  const dark = colors.onSurface;
+  const light = "#ffffff";
+  return contrastRatio(fill, dark) >= contrastRatio(fill, light) ? dark : light;
+}