@castui/cast-ui 4.5.0 → 4.7.0

package/README.md

@@ -209,7 +209,6 @@ npm run build        # compile to dist/
 | Workflow | Trigger | Purpose |
 |----------|---------|---------|
 | Chromatic | Every push | Visual regression testing via Storybook snapshots |
-| Adoption Tracking | Push to `main` | Registers package version with Zeroheight |
 | Publish to npm | Push to `main` | Builds and publishes to npm (only when the version changes) |
 
 ## License

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Spinner — indeterminate circular loading indicator.
+ *
+ * Maps 1:1 to the Figma <Spinner> component:
+ *   intent → neutral | brand | danger   (arc colour)
+ *   size   → small | default | large    (diameter + ring stroke)
+ *
+ * A Spinner is always indeterminate: it shows that work is happening, not how
+ * much is left. For a known percentage use <Progress> instead.
+ *
+ * Geometry. The diameter and ring stroke are the two tokens this component
+ * introduces (`spinner/{size}/diameter`, `spinner/{size}/stroke`). Both are
+ * keyed by the `size` prop and constant across the three densities, like
+ * <Progress> track-height. So Spinner reads no density-varying spacing. The
+ * ring radius is half the diameter, computed here.
+ *
+ * The ring is drawn with borders: all four sides take the faint track colour,
+ * then the top border takes the intent colour to form one visible arc. The
+ * whole ring rotates, so the arc sweeps around. This needs no SVG and keeps the
+ * zero-dependency contract.
+ *
+ * Colours. The arc binds to the intent system
+ * (`colors[intent].bold.default.bg`) so it tracks the host intent and any
+ * ThemeProvider colour overrides. The track ring is the dedicated
+ * `control/spinner/track/bg` semantic (cool-grey/200 light, cool-grey/700
+ * dark, matching the <Progress> track), mirrored as `scheme.spinner.track`, so
+ * it follows light/dark colour mode.
+ */
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type SpinnerSize = 'small' | 'default' | 'large';
+export type SpinnerProps = {
+    /** Semantic intent — drives the arc colour. */
+    intent?: IntentName;
+    /** Size variant — controls diameter and ring stroke. */
+    size?: SpinnerSize;
+    /** Outer style — use for positioning (margin, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — describes what is loading. */
+    accessibilityLabel?: string;
+};
+export declare function Spinner({ intent, size, style, accessibilityLabel, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Spinner — indeterminate circular loading indicator.
+ *
+ * Maps 1:1 to the Figma <Spinner> component:
+ *   intent → neutral | brand | danger   (arc colour)
+ *   size   → small | default | large    (diameter + ring stroke)
+ *
+ * A Spinner is always indeterminate: it shows that work is happening, not how
+ * much is left. For a known percentage use <Progress> instead.
+ *
+ * Geometry. The diameter and ring stroke are the two tokens this component
+ * introduces (`spinner/{size}/diameter`, `spinner/{size}/stroke`). Both are
+ * keyed by the `size` prop and constant across the three densities, like
+ * <Progress> track-height. So Spinner reads no density-varying spacing. The
+ * ring radius is half the diameter, computed here.
+ *
+ * The ring is drawn with borders: all four sides take the faint track colour,
+ * then the top border takes the intent colour to form one visible arc. The
+ * whole ring rotates, so the arc sweeps around. This needs no SVG and keeps the
+ * zero-dependency contract.
+ *
+ * Colours. The arc binds to the intent system
+ * (`colors[intent].bold.default.bg`) so it tracks the host intent and any
+ * ThemeProvider colour overrides. The track ring is the dedicated
+ * `control/spinner/track/bg` semantic (cool-grey/200 light, cool-grey/700
+ * dark, matching the <Progress> track), mirrored as `scheme.spinner.track`, so
+ * it follows light/dark colour mode.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** One full rotation, in milliseconds. */
+const ROTATION_DURATION = 800;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Spinner({ intent = 'brand', size = 'default', style, accessibilityLabel = 'Loading', }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const { diameter, stroke } = components.spinner[size];
+    const arc = colors[intent].bold.default.bg;
+    const trackColor = scheme.spinner.track;
+    const spin = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        spin.setValue(0);
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.timing(spin, {
+            toValue: 1,
+            duration: ROTATION_DURATION,
+            easing: react_native_1.Easing.linear,
+            useNativeDriver: true,
+        }));
+        loop.start();
+        return () => loop.stop();
+    }, [spin]);
+    const rotate = spin.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel, accessibilityState: { busy: true }, style: [
+            {
+                width: diameter,
+                height: diameter,
+                borderRadius: diameter / 2,
+                borderWidth: stroke,
+                borderColor: trackColor,
+                borderTopColor: arc,
+                transform: [{ rotate }],
+            },
+            style,
+        ] }));
+}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps, type SpinnerSize } from './Spinner';

package/dist/components/Spinner/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var Spinner_1 = require("./Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Tabs — a horizontal, underline-style tab bar for switching between views.
+ *
+ * Compound component. `<Tabs>` is the container that owns the selected `value`
+ * and `onValueChange`; `<Tab>` is an individual tab. They communicate through
+ * context, so a consumer writes:
+ *
+ *   <Tabs value={tab} onValueChange={setTab}>
+ *     <Tab value="overview">Overview</Tab>
+ *     <Tab value="activity" leadingIcon="bolt">Activity</Tab>
+ *     <Tab value="settings" disabled>Settings</Tab>
+ *   </Tabs>
+ *
+ * Maps 1:1 to the Figma <Tabs> component set:
+ *   intent → neutral | brand | danger   (selected indicator + selected label)
+ *   size   → small | default | large    (padding, gap, typography, indicator)
+ *   Tab state=Selected → the active tab; state=Disabled → disabled
+ *
+ * Labels render through the shared <Text> component (label scale, medium
+ * weight) and optional leading icons through <Icon>, so Tabs inherits the
+ * type ramp and the Material Symbols slot architecture rather than restyling
+ * text itself. Tabs switch views in place, so each tab is a `tab` role (not a
+ * link — there is no <Link> in Cast UI, and a tab is not navigation).
+ *
+ * Tokens: `gap` / `paddingX` / `paddingY` / `listGap` are density spacing from
+ * `components.tabs`; `indicatorHeight` is keyed by `size` and constant across
+ * density (like Progress's track-height); `indicatorRadius` is the pill radius.
+ * Colours: the selected indicator and selected label bind to the intent system
+ * (`colors[intent].default.default.fg`); unselected labels use
+ * `scheme.text.description`, hovered use `scheme.text.primary`, disabled use
+ * `scheme.disabled.fg`; the baseline divider is the dedicated
+ * `scheme.tabs.track` semantic (cool-grey/200 light, cool-grey/700 dark).
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type TabsSize = 'small' | 'default' | 'large';
+export type TabsProps = {
+    /** The currently selected tab's `value`. */
+    value?: string;
+    /** Called with the next tab's `value` when a tab is pressed. */
+    onValueChange?: (value: string) => void;
+    /** Semantic intent — drives the selected indicator + selected label colour. */
+    intent?: IntentName;
+    /** Size variant — controls padding, gap, typography, and indicator height. */
+    size?: TabsSize;
+    /** `<Tab>` children. */
+    children: React.ReactNode;
+    /** Outer style — use for positioning (margin, width, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the tab list. */
+    accessibilityLabel?: string;
+};
+export type TabProps = {
+    /** Unique value identifying this tab — matched against `Tabs.value`. */
+    value: string;
+    /** The tab label text. */
+    children: string;
+    /** Icon before the label — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Outer style — applied to the tab pressable. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+};
+export declare function Tab({ value, children, leadingIcon, disabled, style, accessibilityLabel, }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ value, onValueChange, intent, size, children, style, accessibilityLabel, }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Tabs — a horizontal, underline-style tab bar for switching between views.
+ *
+ * Compound component. `<Tabs>` is the container that owns the selected `value`
+ * and `onValueChange`; `<Tab>` is an individual tab. They communicate through
+ * context, so a consumer writes:
+ *
+ *   <Tabs value={tab} onValueChange={setTab}>
+ *     <Tab value="overview">Overview</Tab>
+ *     <Tab value="activity" leadingIcon="bolt">Activity</Tab>
+ *     <Tab value="settings" disabled>Settings</Tab>
+ *   </Tabs>
+ *
+ * Maps 1:1 to the Figma <Tabs> component set:
+ *   intent → neutral | brand | danger   (selected indicator + selected label)
+ *   size   → small | default | large    (padding, gap, typography, indicator)
+ *   Tab state=Selected → the active tab; state=Disabled → disabled
+ *
+ * Labels render through the shared <Text> component (label scale, medium
+ * weight) and optional leading icons through <Icon>, so Tabs inherits the
+ * type ramp and the Material Symbols slot architecture rather than restyling
+ * text itself. Tabs switch views in place, so each tab is a `tab` role (not a
+ * link — there is no <Link> in Cast UI, and a tab is not navigation).
+ *
+ * Tokens: `gap` / `paddingX` / `paddingY` / `listGap` are density spacing from
+ * `components.tabs`; `indicatorHeight` is keyed by `size` and constant across
+ * density (like Progress's track-height); `indicatorRadius` is the pill radius.
+ * Colours: the selected indicator and selected label bind to the intent system
+ * (`colors[intent].default.default.fg`); unselected labels use
+ * `scheme.text.description`, hovered use `scheme.text.primary`, disabled use
+ * `scheme.disabled.fg`; the baseline divider is the dedicated
+ * `scheme.tabs.track` semantic (cool-grey/200 light, cool-grey/700 dark).
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Text_1 = require("../Text");
+const Icon_1 = require("../Icon");
+const TabsCtx = (0, react_1.createContext)(null);
+function useTabsContext(component) {
+    const ctx = (0, react_1.useContext)(TabsCtx);
+    if (!ctx) {
+        throw new Error(`<${component}> must be used within <Tabs>`);
+    }
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps tab size → label typography scale (Text component `type`). */
+const LABEL_TYPE = {
+    small: 'label-sm',
+    default: 'label-md',
+    large: 'label-lg',
+};
+// ---------------------------------------------------------------------------
+// Tab
+// ---------------------------------------------------------------------------
+function Tab({ value, children, leadingIcon, disabled = false, style, accessibilityLabel, }) {
+    const { value: selectedValue, onValueChange, size, intent } = useTabsContext('Tab');
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const sizeTokens = components.tabs[size];
+    const { indicatorRadius } = components.tabs;
+    const isSelected = selectedValue === value;
+    // Selected label + indicator track the intent *fg* (text/line colour), mirroring
+    // the Figma binding intent/{intent}/default/default/fg — same hex as bold/bg in
+    // light, but correctly the text colour (not the solid fill) in dark mode.
+    const accent = colors[intent].default.default.fg;
+    // Resolve the label/icon colour from interaction + selection state.
+    const fg = disabled
+        ? scheme.disabled.fg
+        : isSelected
+            ? accent
+            : isHovered
+                ? scheme.text.primary
+                : scheme.text.description;
+    const indicatorColor = isSelected ? accent : 'transparent';
+    const handlePress = (_e) => {
+        if (!disabled && !isSelected)
+            onValueChange?.(value);
+    };
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: fg })) : (leadingIcon);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handlePress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "tab", accessibilityLabel: accessibilityLabel || children, accessibilityState: { selected: isSelected, disabled }, style: style, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: sizeTokens.gap,
+                paddingHorizontal: sizeTokens.paddingX,
+                paddingVertical: sizeTokens.paddingY,
+            }, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(Text_1.Text, { type: LABEL_TYPE[size], color: fg, selectable: false, children: children }), (0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: {
+                        position: 'absolute',
+                        left: 0,
+                        right: 0,
+                        bottom: -tokens_1.controlTokens.borderWidth,
+                        height: sizeTokens.indicatorHeight,
+                        borderRadius: indicatorRadius,
+                        backgroundColor: indicatorColor,
+                    } })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Tabs
+// ---------------------------------------------------------------------------
+function Tabs({ value, onValueChange, intent = 'brand', size = 'default', children, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const { listGap } = components.tabs;
+    return ((0, jsx_runtime_1.jsx)(TabsCtx.Provider, { value: { value, onValueChange, size, intent }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "tablist", accessibilityLabel: accessibilityLabel, style: [
+                {
+                    flexDirection: 'row',
+                    alignSelf: 'flex-start',
+                    gap: listGap,
+                    borderBottomWidth: tokens_1.controlTokens.borderWidth,
+                    borderBottomColor: scheme.tabs.track,
+                },
+                style,
+            ], children: children }) }));
+}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { Tabs, Tab, type TabsProps, type TabProps, type TabsSize, } from './Tabs';

package/dist/components/Tabs/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = exports.Tabs = void 0;
+var Tabs_1 = require("./Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
-export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type ProgressSizeTokens, type ProgressThemeTokens, type DeepPartial, } from './theme';
+export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
+export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type ProgressSizeTokens, type ProgressThemeTokens, type TabsSizeTokens, type TabsThemeTokens, type SpinnerSizeTokens, type SpinnerThemeTokens, type DeepPartial, } from './theme';
 export { Button, type ButtonProps, type ButtonSize } from './components/Button';
 export { Icon, type IconProps } from './components/Icon';
 export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';
@@ -21,3 +21,5 @@ export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/
 export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';
 export { Text, type TextProps, type TextType } from './components/Text';
 export { Progress, type ProgressProps, type ProgressSize } from './components/Progress';
+export { Spinner, type SpinnerProps, type SpinnerSize } from './components/Spinner';
+export { Tabs, Tab, type TabsProps, type TabProps, type TabsSize, } from './components/Tabs';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.themes = exports.useTheme = exports.ThemeProvider = exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
-exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = void 0;
+exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.themes = exports.useTheme = exports.ThemeProvider = exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
+exports.Tab = exports.Tabs = exports.Spinner = exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = void 0;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -22,6 +22,7 @@ Object.defineProperty(exports, "listColors", { enumerable: true, get: function (
 Object.defineProperty(exports, "checkboxColors", { enumerable: true, get: function () { return tokens_1.checkboxColors; } });
 Object.defineProperty(exports, "toggleColors", { enumerable: true, get: function () { return tokens_1.toggleColors; } });
 Object.defineProperty(exports, "progressColors", { enumerable: true, get: function () { return tokens_1.progressColors; } });
+Object.defineProperty(exports, "tabsColors", { enumerable: true, get: function () { return tokens_1.tabsColors; } });
 Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return tokens_1.radioColors; } });
 Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return tokens_1.avatarColors; } });
 Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return tokens_1.skeletonColors; } });
@@ -92,3 +93,8 @@ var Text_1 = require("./components/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 var Progress_1 = require("./components/Progress");
 Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return Progress_1.Progress; } });
+var Spinner_1 = require("./components/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+var Tabs_1 = require("./components/Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });

package/dist/theme/index.d.ts

@@ -1,3 +1,3 @@
 export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
 export { themes } from './themes';
-export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, DeepPartial, } from './types';
+export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, SpinnerSizeTokens, SpinnerThemeTokens, DeepPartial, } from './types';

package/dist/theme/themes.js

@@ -112,6 +112,17 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
+        tabs: {
+            listGap: 8, indicatorRadius: 9999,
+            small: { gap: 4, paddingX: 8, paddingY: 4, indicatorHeight: 2 },
+            default: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
+            large: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 4 },
+        },
     },
     default: {
         dialog: {
@@ -212,6 +223,17 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
+        tabs: {
+            listGap: 16, indicatorRadius: 9999,
+            small: { gap: 6, paddingX: 10, paddingY: 6, indicatorHeight: 2 },
+            default: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },
+            large: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 4 },
+        },
     },
     comfortable: {
         dialog: {
@@ -312,5 +334,16 @@ exports.themes = {
             default: { trackHeight: 8 },
             large: { trackHeight: 12 },
         },
+        spinner: {
+            small: { diameter: 16, stroke: 2 },
+            default: { diameter: 24, stroke: 2 },
+            large: { diameter: 32, stroke: 4 },
+        },
+        tabs: {
+            listGap: 24, indicatorRadius: 9999,
+            small: { gap: 8, paddingX: 12, paddingY: 8, indicatorHeight: 2 },
+            default: { gap: 8, paddingX: 16, paddingY: 10, indicatorHeight: 2 },
+            large: { gap: 12, paddingX: 20, paddingY: 12, indicatorHeight: 4 },
+        },
     },
 };

package/dist/theme/types.d.ts

@@ -255,6 +255,39 @@ export type ProgressThemeTokens = {
     default: ProgressSizeTokens;
     large: ProgressSizeTokens;
 };
+/** Spacing/sizing tokens for a single tab size variant. `gap`, `paddingX`,
+ * and `paddingY` vary by density; `indicatorHeight` is keyed by the `size`
+ * prop and constant across density (like Toggle's track / Progress's
+ * track-height — bound to a primitive `size/*`). */
+export type TabsSizeTokens = {
+    gap: number;
+    paddingX: number;
+    paddingY: number;
+    indicatorHeight: number;
+};
+/** Tabs tokens — per-size tab spacing + the gap between tabs (`listGap`,
+ * density-varying) and the pill `indicatorRadius` (constant). */
+export type TabsThemeTokens = {
+    listGap: number;
+    indicatorRadius: number;
+    small: TabsSizeTokens;
+    default: TabsSizeTokens;
+    large: TabsSizeTokens;
+};
+/** Spinner geometry for one size variant. Both values are keyed by the `size`
+ * prop and constant across density (like Progress track-height / Tabs
+ * indicator-height — bound to a primitive `size/*`). */
+export type SpinnerSizeTokens = {
+    diameter: number;
+    stroke: number;
+};
+/** Spinner tokens — diameter + ring stroke vary by the `size` prop and are
+ * constant across density. No density-varying spacing. */
+export type SpinnerThemeTokens = {
+    small: SpinnerSizeTokens;
+    default: SpinnerSizeTokens;
+    large: SpinnerSizeTokens;
+};
 /**
  * Component-level tokens that vary by density theme.
  * Extended as new components are added to the library.
@@ -277,6 +310,8 @@ export type ComponentTokens = {
     popover: PopoverThemeTokens;
     tooltip: TooltipThemeTokens;
     progress: ProgressThemeTokens;
+    tabs: TabsThemeTokens;
+    spinner: SpinnerThemeTokens;
 };
 /** Utility type for partial overrides at any depth */
 export type DeepPartial<T> = {

package/dist/tokens/colors.d.ts

@@ -192,6 +192,18 @@ export type ColorScheme = {
     progress: {
         track: string;
     };
+    /**
+     * Tabs colours — the baseline divider under the tab strip. The selected
+     * indicator + selected label colour come from the intent system; the
+     * unselected / hover label colours come from text.description / text.primary.
+     */
+    tabs: {
+        track: string;
+    };
+    /** Spinner colours — track ring background (the arc uses the intent system) */
+    spinner: {
+        track: string;
+    };
     /** Avatar colours — initials/icon fallback surface + foreground */
     avatar: {
         bg: string;
@@ -356,6 +368,10 @@ export declare const toggleColors: {
 export declare const progressColors: {
     track: string;
 };
+/** Tabs colours — baseline track (indicator/label colours come from intents/text) */
+export declare const tabsColors: {
+    track: string;
+};
 /** Avatar colours — initials/icon fallback surface + foreground */
 export declare const avatarColors: {
     bg: string;

package/dist/tokens/colors.js

@@ -15,7 +15,7 @@
  * the light-scheme values, kept for backwards compatibility.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.listColors = exports.skeletonColors = exports.avatarColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
+exports.listColors = exports.skeletonColors = exports.avatarColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.radioColors = exports.checkboxColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
 // ---------------------------------------------------------------------------
 // Light scheme — semantic-light mode
 // ---------------------------------------------------------------------------
@@ -140,6 +140,8 @@ exports.lightColors = {
         label: { default: '#374151', disabled: '#9CA3AF' },
     },
     progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
+    tabs: { track: '#E5E7EB' }, // control/tabs/track/bg → cool-grey/200
+    spinner: { track: '#E5E7EB' }, // control/spinner/track/bg → cool-grey/200
     avatar: { bg: '#F3F4F6', fg: '#374151' },
     skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
     list: {
@@ -282,6 +284,8 @@ exports.darkColors = {
         label: { default: '#E5E7EB', disabled: '#6B7280' },
     },
     progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
+    tabs: { track: '#374151' }, // control/tabs/track/bg → cool-grey/700
+    spinner: { track: '#374151' }, // control/spinner/track/bg → cool-grey/700
     avatar: { bg: '#374151', fg: '#E5E7EB' },
     skeleton: { bg: '#1F2937', highlight: '#374151' },
     list: {
@@ -342,6 +346,8 @@ exports.radioColors = exports.lightColors.radio;
 exports.toggleColors = exports.lightColors.toggle;
 /** Progress colours — track background (fill comes from the intent system) */
 exports.progressColors = exports.lightColors.progress;
+/** Tabs colours — baseline track (indicator/label colours come from intents/text) */
+exports.tabsColors = exports.lightColors.tabs;
 /** Avatar colours — initials/icon fallback surface + foreground */
 exports.avatarColors = exports.lightColors.avatar;
 /** Skeleton colours — placeholder surface for loading states */

package/dist/tokens/index.d.ts

@@ -1,3 +1,3 @@
-export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, radioColors, avatarColors, skeletonColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
+export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
 export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
 export { iconSize, type IconSize } from './icon';

package/dist/tokens/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
+exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
 var colors_1 = require("./colors");
 Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return colors_1.lightColors; } });
 Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return colors_1.darkColors; } });
@@ -18,6 +18,7 @@ Object.defineProperty(exports, "listColors", { enumerable: true, get: function (
 Object.defineProperty(exports, "checkboxColors", { enumerable: true, get: function () { return colors_1.checkboxColors; } });
 Object.defineProperty(exports, "toggleColors", { enumerable: true, get: function () { return colors_1.toggleColors; } });
 Object.defineProperty(exports, "progressColors", { enumerable: true, get: function () { return colors_1.progressColors; } });
+Object.defineProperty(exports, "tabsColors", { enumerable: true, get: function () { return colors_1.tabsColors; } });
 Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return colors_1.radioColors; } });
 Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return colors_1.avatarColors; } });
 Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return colors_1.skeletonColors; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "4.5.0",
+  "version": "4.7.0",
   "description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,8 +22,7 @@
     "build-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook build",
     "build": "tsc --project tsconfig.build.json",
     "prepublishOnly": "npm run build",
-    "test": "npm run build && node scripts/smoke-test.js",
-    "zh:track-package": "zh-adoption track-package"
+    "test": "npm run build && node scripts/smoke-test.js"
   },
   "repository": {
     "type": "git",
@@ -67,5 +66,8 @@
     "react-native-web": "^0.21.2",
     "storybook": "^10.2.8",
     "typescript": "^5.9.3"
+  },
+  "overrides": {
+    "esbuild": ">=0.28.1"
   }
 }