@castui/cast-ui 4.4.0 → 4.6.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/Progress/Progress.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Progress — linear progress indicator (determinate + indeterminate).
+ *
+ * Maps 1:1 to the Figma <Progress> component:
+ *   intent → neutral | brand | danger   (fill colour)
+ *   size   → small | default | large    (track thickness)
+ *   value  → 0–100                       (determinate fill; omit for indeterminate)
+ *
+ * The track thickness is the one genuinely new token this component introduces
+ * (`progress/{size}/track-height`): it is keyed by the `size` prop and is
+ * constant across the three densities — like Badge's dot-size or Toggle's
+ * track. The pill radius is constant. Progress therefore reads no
+ * density-varying spacing.
+ *
+ * Colours: the fill binds to the intent system
+ * (`colors[intent].bold.default.bg`) so it tracks the host intent and any
+ * ThemeProvider colour overrides; the track background is the dedicated
+ * `control/progress/track/bg` semantic (cool-grey/200 light, cool-grey/700
+ * dark, matching the Toggle off-track), so it follows light/dark colour mode.
+ *
+ * When `value` is omitted (or null) the bar renders an indeterminate sweep.
+ */
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type ProgressSize = 'small' | 'default' | 'large';
+export type ProgressProps = {
+    /**
+     * Completion percentage (0–100). Omit (or pass null) for an indeterminate
+     * animated sweep.
+     */
+    value?: number | null;
+    /** Semantic intent — drives the fill colour. */
+    intent?: IntentName;
+    /** Size variant — controls track thickness. */
+    size?: ProgressSize;
+    /** Outer style — use for positioning (margin, width, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — describes what is loading. */
+    accessibilityLabel?: string;
+};
+export declare function Progress({ value, intent, size, style, accessibilityLabel, }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = Progress;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Progress — linear progress indicator (determinate + indeterminate).
+ *
+ * Maps 1:1 to the Figma <Progress> component:
+ *   intent → neutral | brand | danger   (fill colour)
+ *   size   → small | default | large    (track thickness)
+ *   value  → 0–100                       (determinate fill; omit for indeterminate)
+ *
+ * The track thickness is the one genuinely new token this component introduces
+ * (`progress/{size}/track-height`): it is keyed by the `size` prop and is
+ * constant across the three densities — like Badge's dot-size or Toggle's
+ * track. The pill radius is constant. Progress therefore reads no
+ * density-varying spacing.
+ *
+ * Colours: the fill binds to the intent system
+ * (`colors[intent].bold.default.bg`) so it tracks the host intent and any
+ * ThemeProvider colour overrides; the track background is the dedicated
+ * `control/progress/track/bg` semantic (cool-grey/200 light, cool-grey/700
+ * dark, matching the Toggle off-track), so it follows light/dark colour mode.
+ *
+ * When `value` is omitted (or null) the bar renders an indeterminate sweep.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Fraction of the track the indeterminate sweep bar occupies. */
+const INDETERMINATE_BAR_FRACTION = 0.4;
+const clamp = (n) => Math.max(0, Math.min(100, n));
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Progress({ value, intent = 'brand', size = 'default', style, accessibilityLabel = 'Loading', }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const { trackHeight } = components.progress[size];
+    const borderRadius = components.progress.borderRadius;
+    const fill = colors[intent].bold.default.bg;
+    const trackBg = scheme.progress.track;
+    const isIndeterminate = value === undefined || value === null;
+    const pct = isIndeterminate ? 0 : clamp(value);
+    // Track width is needed to drive the indeterminate translateX in px
+    // (useNativeDriver can't animate a percentage width).
+    const [trackWidth, setTrackWidth] = (0, react_1.useState)(0);
+    const onLayout = (e) => setTrackWidth(e.nativeEvent.layout.width);
+    const slide = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (!isIndeterminate || trackWidth === 0)
+            return;
+        slide.setValue(0);
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.timing(slide, {
+            toValue: 1,
+            duration: 1200,
+            easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+            useNativeDriver: true,
+        }));
+        loop.start();
+        return () => loop.stop();
+    }, [isIndeterminate, trackWidth, slide]);
+    const barWidth = trackWidth * INDETERMINATE_BAR_FRACTION;
+    const translateX = slide.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-barWidth, trackWidth],
+    });
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { onLayout: onLayout, accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel, accessibilityValue: isIndeterminate ? undefined : { min: 0, max: 100, now: Math.round(pct) }, accessibilityState: isIndeterminate ? { busy: true } : undefined, style: [
+            {
+                width: '100%',
+                height: trackHeight,
+                borderRadius,
+                backgroundColor: trackBg,
+                overflow: 'hidden',
+            },
+            style,
+        ], children: isIndeterminate ? ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                width: barWidth,
+                borderRadius,
+                backgroundColor: fill,
+                transform: [{ translateX }],
+            } })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                width: `${pct}%`,
+                height: '100%',
+                borderRadius,
+                backgroundColor: fill,
+            } })) }));
+}

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

@@ -0,0 +1 @@
+export { Progress, type ProgressProps, type ProgressSize } from './Progress';

package/dist/components/Progress/index.js

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

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].bold.default.bg`); 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,120 @@
+"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].bold.default.bg`); 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;
+    const accent = colors[intent].bold.default.bg;
+    // 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, 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 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 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';
@@ -20,3 +20,5 @@ export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, }
 export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/Skeleton';
 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 { 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.Input = 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.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.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = 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.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
@@ -21,6 +21,8 @@ Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function
 Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return tokens_1.listColors; } });
 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; } });
@@ -89,3 +91,8 @@ var Tooltip_1 = require("./components/Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
 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 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, 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, DeepPartial, } from './types';

package/dist/theme/themes.js

@@ -106,6 +106,18 @@ exports.themes = {
             small: { paddingX: 4, paddingY: 1 },
             default: { paddingX: 6, paddingY: 2 },
         },
+        progress: {
+            borderRadius: 9999,
+            small: { trackHeight: 4 },
+            default: { trackHeight: 8 },
+            large: { trackHeight: 12 },
+        },
+        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: {
@@ -200,6 +212,18 @@ exports.themes = {
             small: { paddingX: 6, paddingY: 2 },
             default: { paddingX: 8, paddingY: 4 },
         },
+        progress: {
+            borderRadius: 9999,
+            small: { trackHeight: 4 },
+            default: { trackHeight: 8 },
+            large: { trackHeight: 12 },
+        },
+        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: {
@@ -294,5 +318,17 @@ exports.themes = {
             small: { paddingX: 8, paddingY: 4 },
             default: { paddingX: 10, paddingY: 6 },
         },
+        progress: {
+            borderRadius: 9999,
+            small: { trackHeight: 4 },
+            default: { trackHeight: 8 },
+            large: { trackHeight: 12 },
+        },
+        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

@@ -242,6 +242,38 @@ export type TooltipThemeTokens = {
     small: TooltipSizeTokens;
     default: TooltipSizeTokens;
 };
+/** Progress track thickness for one size variant (constant across density,
+ * keyed by the `size` prop like Badge dot-size / Toggle track). */
+export type ProgressSizeTokens = {
+    trackHeight: number;
+};
+/** Progress tokens — track thickness varies by the `size` prop; the pill
+ * radius is constant. No density-varying spacing. */
+export type ProgressThemeTokens = {
+    borderRadius: number;
+    small: ProgressSizeTokens;
+    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;
+};
 /**
  * Component-level tokens that vary by density theme.
  * Extended as new components are added to the library.
@@ -263,6 +295,8 @@ export type ComponentTokens = {
     avatar: AvatarThemeTokens;
     popover: PopoverThemeTokens;
     tooltip: TooltipThemeTokens;
+    progress: ProgressThemeTokens;
+    tabs: TabsThemeTokens;
 };
 /** Utility type for partial overrides at any depth */
 export type DeepPartial<T> = {

package/dist/tokens/colors.d.ts

@@ -188,6 +188,18 @@ export type ColorScheme = {
             disabled: string;
         };
     };
+    /** Progress colours — track background (the fill uses the intent system) */
+    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;
+    };
     /** Avatar colours — initials/icon fallback surface + foreground */
     avatar: {
         bg: string;
@@ -348,6 +360,14 @@ export declare const toggleColors: {
         disabled: string;
     };
 };
+/** Progress colours — track background (fill comes from the intent system) */
+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.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
 // ---------------------------------------------------------------------------
@@ -139,6 +139,8 @@ exports.lightColors = {
         thumb: '#FFFFFF',
         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
     avatar: { bg: '#F3F4F6', fg: '#374151' },
     skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
     list: {
@@ -280,6 +282,8 @@ exports.darkColors = {
         thumb: '#FFFFFF',
         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
     avatar: { bg: '#374151', fg: '#E5E7EB' },
     skeleton: { bg: '#1F2937', highlight: '#374151' },
     list: {
@@ -338,6 +342,10 @@ exports.checkboxColors = exports.lightColors.checkbox;
 exports.radioColors = exports.lightColors.radio;
 /** Toggle colours — track (on/off/disabled) + thumb + label */
 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, 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.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; } });
@@ -17,6 +17,8 @@ Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function
 Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return colors_1.listColors; } });
 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.4.0",
+  "version": "4.6.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"
   }
 }