@colixsystems/widget-sdk 0.162.0 → 0.163.0

package/README.md

@@ -73,7 +73,21 @@ See the design reference for the full architecture: [`docs/architecture/widget-m
 
 ## Status
 
-`v0.162.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+`v0.163.0` — pre-publish. The package surface (types, function names, export paths) is the v1 contract; runtime behaviour for some hooks is stubbed (each hook documents what's wired and what isn't). It is **not yet published to npm**.
+
+### What's new in 0.163.0 (contract 1.126.0)
+
+**A themed tab strip: `Tabs`, and the `tabs` theme scope.** `<Tabs items={[{ key, label, icon? }]} value={tab} onChange={setTab} />` draws a strip whose look — a segmented control, pills, or an underline — and whose colours and corners come from **Theme Settings > Tabs** (`themeConfig.components.tabs`). It draws the strip only; render the selected panel yourself. The page Tabs container now renders through the same component on the web Player and in the exported app, so a page's tabs and a widget's tabs match, and the two hosts no longer draw different strips. Unthemed, the strip is the segmented control the exported app always drew.
+
+```jsx
+const [tab, setTab] = useState("open");
+<Tabs items={[{ key: "open", label: "Open" }, { key: "done", label: "Done", icon: "check" }]} value={tab} onChange={setTab} />
+{tab === "open" ? <OpenOrders /> : <DoneOrders />}
+```
+
+Pass `variant` ("segmented" | "pill" | "underline"), `activeColor`, `activeTextColor`, `textColor` or `radius` to override one strip, or declare the style fields `tabsStyle`, `tabsActiveColor`, `tabsActiveTextColor`, `tabsTextColor` and `tabsRadius` so an author can.
+
+The component-token vocabulary gains an **`enum`** type (`{ type: "enum", values }`), first used by `tabs.style`; `CONTRACT.themeComponentTabStyles` lists the styles.
 
 ### What's new in 0.162.0 (contract 1.125.0)
 
@@ -1787,6 +1801,7 @@ import { defineWidget, validateManifest, useDatastoreQuery, Text, View } from "@
 - `parseMarkdown`, `markdownToPlainText`, `parseMarkdownImage`, `formatMarkdownImage`, `stripHtmlToMarkdown`, `MARKDOWN_IMAGE_SIZES` — the same grammar as pure helpers, for content you inspect rather than render: the block list, a marker-free projection (list previews, search, a11y labels), the one-line image form read and written, a legacy-HTML row normalised to markdown on read, and the closed size list (`small` | `medium` | `large` | `full`).
 - `isSafeMarkdownImageSrc`, `isHttpImageSrc`, `normaliseMarkdownImageSize`, `readMarkdownAlt` — the image half of that grammar, for a widget rendering images itself via `renderImage`. `isSafeMarkdownImageSrc` is the same allowlist the parser applies (an `http(s)` URL or a filestore id; a `javascript:` scheme is refused), so the widget and the parser cannot disagree about which src is renderable.
 - `List`, `ListRow`, `EmptyState` — the themed list building blocks. `<ListRow title subtitle leading trailing onPress selected divider>` draws one record row from the theme's `list` scope (padding, height, gap, radius, background, divider); `<List>` spaces its rows and hands overrides down; `<EmptyState icon title message>` is the "nothing here" panel. Never hand-roll a row from `View` + `Pressable`.
+- `Tabs` — the themed tab strip. `<Tabs items value onChange>` draws a segmented control, pills or an underline as the theme's `tabs` scope says; render the selected panel yourself. Never hand-roll tabs from `Pressable` chips.
 - `textRoleStyle(role, typography, colors)`, `TEXT_ROLES` — the style of a semantic text tier, shared with the built-in widgets.
 - `WidgetContextProvider` — React context provider that the host (Studio, Player, exported app) wraps widgets with.
 

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
@@ -445,6 +448,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",
@@ -614,6 +627,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 +2253,13 @@ 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,
+  },
 ];
 
 const CATEGORIES = [
@@ -4413,7 +4449,12 @@ 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.
+  version: "1.126.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -4426,6 +4467,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
@@ -445,6 +448,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",
@@ -614,6 +627,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 +2253,13 @@ 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,
+  },
 ];
 
 const CATEGORIES = [
@@ -4409,7 +4445,12 @@ 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.
+  version: "1.126.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,
@@ -4422,6 +4463,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/index.d.ts

@@ -2615,6 +2615,35 @@ export const EmptyState: (props: {
   children?: ReactNode;
 }) => 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,8 @@ 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";
+// 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,8 @@ 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";
+// 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;
+}

package/dist/tabs-view.js

@@ -0,0 +1,169 @@
+// The ONE implementation behind the `<Tabs>` SDK primitive. The platform
+// bindings (`tabs.js` / `tabs.native.js`) differ only in where the primitives
+// come from, so the hosts cannot drift.
+//
+// The page Tabs container, the built-in widgets and custom widgets each drew
+// their own tab strip, so an app's tabs looked different on every screen and
+// between web and native. This strip reads the theme's `tabs` scope.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { resolveTabsTokens } from "./tabs-tokens.js";
+
+const SEGMENT_INSET = 4;
+
+function stripStyles(t, theme) {
+  const spacing = theme.spacing || DEFAULT_THEME_TOKENS.spacing;
+  const elevation = theme.elevation || DEFAULT_THEME_TOKENS.elevation;
+  if (t.style === "pill") {
+    // An idle chip is outlined: a muted fill vanishes on a white card.
+    return {
+      bar: null,
+      content: { gap: spacing.sm },
+      item: (active) => ({
+        borderRadius: t.radius,
+        borderWidth: 1,
+        borderColor: active ? t.activeColor : t.rule,
+        backgroundColor: active ? t.activeColor : "transparent",
+      }),
+    };
+  }
+  if (t.style === "underline") {
+    // The rule sits on the content, so the scroller cannot clip the accent.
+    return {
+      bar: null,
+      content: { gap: spacing.lg, borderBottomWidth: 1, borderColor: t.rule },
+      item: (active) => ({
+        paddingHorizontal: 4,
+        borderBottomWidth: 2,
+        borderColor: active ? t.activeColor : "transparent",
+      }),
+    };
+  }
+  // A concentric outer radius keeps the inset chip's corners parallel. The
+  // bar hugs its segments, and the active one is outlined as well as lifted
+  // because a shadow alone disappears on a dark theme.
+  return {
+    bar: {
+      backgroundColor: t.barBackground,
+      borderRadius: t.radius + 2,
+      alignSelf: "flex-start",
+      maxWidth: "100%",
+    },
+    content: { padding: SEGMENT_INSET, gap: SEGMENT_INSET },
+    item: (active) => ({
+      borderRadius: t.radius,
+      borderWidth: 1,
+      borderColor: active ? t.rule : "transparent",
+      ...(active
+        ? { backgroundColor: t.activeSurface, ...(elevation.sm || {}) }
+        : null),
+    }),
+  };
+}
+
+/**
+ * Bind the shared tab strip to one platform's primitives.
+ *
+ * @param {{View: any, Text: any, Pressable: any, ScrollView: any}} rn
+ */
+export function makeTabs(rn) {
+  const { Text, Pressable, ScrollView } = rn;
+
+  function Tabs({
+    items = [],
+    value,
+    onChange,
+    variant,
+    defaultVariant,
+    activeColor,
+    activeTextColor,
+    textColor,
+    radius,
+    theme: explicitTheme,
+    accessibilityLabel,
+    style,
+    testID,
+  }) {
+    const hostTheme = useHostTheme();
+    // Layout containers render outside a widget context, so they pass theirs.
+    const theme = explicitTheme || hostTheme || DEFAULT_THEME_TOKENS;
+    const t = resolveTabsTokens(theme, {
+      defaultStyle: defaultVariant,
+      style: variant,
+      activeColor,
+      activeTextColor,
+      textColor,
+      radius,
+    });
+    const typography = theme.typography || DEFAULT_THEME_TOKENS.typography;
+    const strip = stripStyles(t, theme);
+
+    return React.createElement(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        // A strip never grows into, or shrinks away from, the panel below.
+        style: [{ flexGrow: 0, flexShrink: 0 }, strip.bar, style],
+        contentContainerStyle: [{ flexDirection: "row" }, strip.content],
+        accessibilityRole: "tablist",
+        accessibilityLabel,
+        testID,
+      },
+      ...items.map((item) => {
+        const active = item.key === value;
+        const ink = active ? t.activeTextColor : t.textColor;
+        return React.createElement(
+          Pressable,
+          {
+            key: item.key,
+            onPress: () => {
+              if (!active && typeof onChange === "function") onChange(item.key);
+            },
+            disabled: item.disabled,
+            // accessibilityRole + aria-*: the pair that announces on both hosts.
+            accessibilityRole: "tab",
+            "aria-selected": active,
+            "aria-disabled": !!item.disabled,
+            testID: item.testID,
+            style: [
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 6,
+                minHeight: 44,
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+              },
+              strip.item(active),
+              item.disabled ? { opacity: 0.5 } : null,
+            ],
+          },
+          item.icon
+            ? React.createElement(Icon, { name: item.icon, size: 16, color: ink })
+            : null,
+          React.createElement(
+            Text,
+            {
+              numberOfLines: 1,
+              style: {
+                fontFamily: typography.fontFamily,
+                fontSize: typography.sizes.sm,
+                fontWeight: active ? "600" : "500",
+                color: ink,
+              },
+            },
+            item.label,
+          ),
+        );
+      }),
+    );
+  }
+
+  Tabs.displayName = "Tabs";
+  return Tabs;
+}

package/dist/tabs.js

@@ -0,0 +1,7 @@
+// `<Tabs>` (web). Binds ./tabs-view.js to react-native-web; see
+// ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeTabs } from "./tabs-view.js";
+
+export const Tabs = makeTabs(ReactNative);

package/dist/tabs.native.js

@@ -0,0 +1,7 @@
+// `<Tabs>` (native). Binds ./tabs-view.js to React Native's own primitives;
+// only the import differs from ./tabs.js.
+
+import { View, Text, Pressable, ScrollView } from "react-native";
+import { makeTabs } from "./tabs-view.js";
+
+export const Tabs = makeTabs({ View, Text, Pressable, ScrollView });

package/dist/theme-components.cjs

@@ -65,6 +65,11 @@ function coerceToken(def, value) {
   if (def.type === "gradient") {
     return normaliseComponentGradient(value) || undefined;
   }
+  if (def.type === "enum") {
+    return Array.isArray(def.values) && def.values.includes(value)
+      ? value
+      : undefined;
+  }
   return undefined;
 }
 

package/dist/theme-components.js

@@ -57,6 +57,11 @@ function coerceToken(def, value) {
   if (def.type === "gradient") {
     return normaliseComponentGradient(value) || undefined;
   }
+  if (def.type === "enum") {
+    return Array.isArray(def.values) && def.values.includes(value)
+      ? value
+      : undefined;
+  }
   return undefined;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.162.0",
+  "version": "0.163.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",