@castui/cast-ui 4.3.0 → 4.5.0

package/README.md

@@ -1,4 +1,6 @@
-# Cast UI
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Connagh/cast-ui/main/logo.png" alt="Cast UI" width="300" />
+</p>
 
 A cross-platform component library for React Native. One set of components
 that works on iOS, Android, and the web.

package/dist/components/Badge/Badge.js

@@ -15,8 +15,6 @@ const LABEL_SCALE = {
     default: 'md',
     large: 'lg',
 };
-/** Icon size — fixed at 16px, matched to the label baseline. */
-const ICON_SIZE = 16;
 function resolveColors(intent, variant, intentColors) {
     const clrs = intentColors[intent];
     switch (variant) {
@@ -38,8 +36,8 @@ function Badge({ children, intent = 'neutral', variant = 'solid', size = 'defaul
     const sizeTokens = components.badge[size];
     const labelTokens = tokens_1.label[LABEL_SCALE[size]];
     const colors = resolveColors(intent, variant, scheme.intents);
-    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: colors.fg })) : (leadingIcon);
-    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: colors.fg })) : (trailingIcon);
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: colors.fg })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: size, color: colors.fg })) : (trailingIcon);
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "text", accessibilityLabel: accessibilityLabel || children, style: [
             {
                 flexDirection: 'row',
@@ -60,12 +58,12 @@ function Badge({ children, intent = 'neutral', variant = 'solid', size = 'defaul
                     height: sizeTokens.dotSize,
                     borderRadius: sizeTokens.dotSize / 2,
                     backgroundColor: colors.fg,
-                } })) : null, resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                } })) : null, resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
                     fontFamily: tokens_1.fontFamily.sans,
                     fontWeight: tokens_1.fontWeight.medium,
                     fontSize: labelTokens.fontSize,
                     lineHeight: labelTokens.lineHeight,
                     letterSpacing: labelTokens.letterSpacing,
                     color: colors.fg,
-                }, selectable: false, children: children }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }));
+                }, selectable: false, children: children }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedTrailing })) : null] }));
 }

package/dist/components/Button/Button.d.ts

@@ -36,4 +36,9 @@ export type ButtonProps = {
     /** Accessibility label — falls back to children text if not provided. */
     accessibilityLabel?: string;
 };
+/**
+ * Icon size scales with the button size, matching the Figma <Icon> size
+ * variant 1:1 (small→16, default→20, large→24). Button's size names
+ * are a subset of the Icon named scale, so `size` is passed straight through.
+ */
 export declare function Button({ children, intent, prominence, size, disabled, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.js

@@ -28,8 +28,11 @@ const LABEL_SCALE = {
     default: 'md',
     large: 'lg',
 };
-/** Icon size — fixed at 16px per Figma spec, all button sizes. */
-const ICON_SIZE = 16;
+/**
+ * Icon size scales with the button size, matching the Figma <Icon> size
+ * variant 1:1 (small→16, default→20, large→24). Button's size names
+ * are a subset of the Icon named scale, so `size` is passed straight through.
+ */
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -71,8 +74,8 @@ function Button({ children, intent = 'neutral', prominence = 'default', size = '
                 backgroundColor: stateColors.bg,
             };
             // Resolve icon props — strings become <Icon> with auto-matched colour
-            const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: stateColors.fg })) : (leadingIcon);
-            const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: stateColors.fg })) : (trailingIcon);
+            const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: stateColors.fg })) : (leadingIcon);
+            const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: size, color: stateColors.fg })) : (trailingIcon);
             return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: containerStyle, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
                             fontFamily: tokens_1.fontFamily.sans,
                             fontWeight: tokens_1.fontWeight.medium,

package/dist/components/Icon/Icon.d.ts

@@ -24,11 +24,12 @@
  * font is loaded). On native they require a matching static/variable font cut.
  */
 import { type TextStyle, type StyleProp } from 'react-native';
+import { type IconSize } from '../../tokens';
 export type IconProps = {
     /** Material Symbols icon name (e.g., "star", "close", "settings"). */
     name: string;
-    /** Icon size in pixels. Defaults to 20. */
-    size?: number;
+    /** Icon size — a named scale ('xs' | 'small' | 'default' | 'large' = 12/16/20/24) or an explicit pixel number. Defaults to 20. */
+    size?: IconSize | number;
     /** Icon colour. Defaults to "#374151" (neutral fg). */
     color?: string;
     /** Filled vs outlined glyph (FILL axis, 0–1). Defaults to false (outlined). */

package/dist/components/Icon/Icon.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = Icon;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
+const tokens_1 = require("../../tokens");
 // Web accepts both family names so the Google-Fonts CSS path (spaced name)
 // and the expo-font/useFonts path (unspaced key) work without consumer
 // configuration. Fonts registered via expo-font on web keep their object key
@@ -12,8 +13,9 @@ const FONT_FAMILY = react_native_1.Platform.select({
     default: 'MaterialSymbolsOutlined',
 });
 function Icon({ name, size = 20, color = '#374151', fill = false, weight = 400, grade = 0, opticalSize, style, }) {
+    const px = typeof size === 'number' ? size : tokens_1.iconSize[size];
     // Material Symbols variable-font axes — applied on web via fontVariationSettings.
-    const opsz = Math.min(48, Math.max(20, opticalSize ?? size));
+    const opsz = Math.min(48, Math.max(20, opticalSize ?? px));
     const variationStyle = react_native_1.Platform.OS === 'web'
         ? {
             fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opsz}`,
@@ -22,12 +24,12 @@ function Icon({ name, size = 20, color = '#374151', fill = false, weight = 400,
     return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, accessibilityElementsHidden: true, importantForAccessibility: "no", style: [
             {
                 fontFamily: FONT_FAMILY,
-                fontSize: size,
-                lineHeight: size,
+                fontSize: px,
+                lineHeight: px,
                 color,
                 // Prevent ligature text from taking extra space
-                width: size,
-                height: size,
+                width: px,
+                height: px,
                 textAlign: 'center',
                 // Reset any inherited text styles
                 fontWeight: '400',

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

@@ -1 +1,2 @@
 export { Icon, type IconProps } from './Icon';
+export { type IconSize } from '../../tokens';

package/dist/components/Input/Input.js

@@ -26,7 +26,8 @@ const tokens_1 = require("../../tokens");
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
-const ICON_SIZE = 16;
+/** Icon size scales with the input size, matching the Figma <Icon> size
+ * variant 1:1 (small→16, default→20, large→24) via the shared `iconSize` scale. */
 /** Maps input size → label typography scale (form label text) */
 const LABEL_SCALE = {
     small: 'sm',
@@ -90,8 +91,8 @@ function Input({ label: formLabel, helperText, placeholder, value, defaultValue,
             ? errorTokens.fg
             : textTokens.description;
     const iconColor = disabled ? disabledColors.fg : neutral.default.fg;
-    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: iconColor })) : (leadingIcon);
-    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: iconColor })) : (trailingIcon);
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: iconColor })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: size, color: iconColor })) : (trailingIcon);
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
             { alignSelf: 'stretch', gap: components.input.fieldGap },
             style,
@@ -112,7 +113,7 @@ function Input({ label: formLabel, helperText, placeholder, value, defaultValue,
                     borderWidth,
                     borderColor,
                     backgroundColor: bg,
-                }, children: [resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: textTokens.placeholder, editable: !disabled, secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoCapitalize: autoCapitalize, returnKeyType: returnKeyType, onSubmitEditing: onSubmitEditing, onFocus: () => {
+                }, children: [resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { value: value, defaultValue: defaultValue, onChangeText: onChangeText, placeholder: placeholder, placeholderTextColor: textTokens.placeholder, editable: !disabled, secureTextEntry: secureTextEntry, keyboardType: keyboardType, autoCapitalize: autoCapitalize, returnKeyType: returnKeyType, onSubmitEditing: onSubmitEditing, onFocus: () => {
                             setIsFocused(true);
                             onFocus?.();
                         }, onBlur: () => {
@@ -130,7 +131,7 @@ function Input({ label: formLabel, helperText, placeholder, value, defaultValue,
                             ...(react_native_1.Platform.OS === 'web'
                                 ? { outlineWidth: 0 }
                                 : {}),
-                        } }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }), helperText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                        } }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedTrailing })) : null] }), helperText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
                     fontFamily: tokens_1.fontFamily.sans,
                     fontWeight: tokens_1.fontWeight.regular,
                     fontSize: tokens_1.caption.fontSize,

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/Select/Select.js

@@ -41,8 +41,9 @@ function useSelectContext() {
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
-const ICON_SIZE = 16;
-const CHEVRON_SIZE = 16;
+/** Icon sizes scale with the select size via the shared `iconSize` scale
+ * (small→16, default→20, large→24): trigger leading icon, dropdown chevron,
+ * and option row icons all track the control size. Tag close uses `closeSize`. */
 const CONTENT_MAX_HEIGHT = 240;
 /** Maps select size → label typography scale (for form label text) */
 const LABEL_SCALE = {
@@ -153,7 +154,7 @@ function SelectOption({ value, children: optionLabel, description, icon, disable
                 : isHovered
                     ? selectColors.option.hover
                     : selectColors.option.default;
-    const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: ICON_SIZE, color: colors.fg })) : (icon);
+    const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: ctx.size, color: colors.fg })) : (icon);
     return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => {
             if (!disabled)
                 ctx.onSelect(value);
@@ -165,7 +166,7 @@ function SelectOption({ value, children: optionLabel, description, icon, disable
             paddingVertical: tokens.paddingY,
             borderRadius: tokens.borderRadius,
             backgroundColor: colors.bg,
-        }, children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedIcon })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+        }, children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[ctx.size], height: tokens_1.iconSize[ctx.size] }, children: resolvedIcon })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
                             fontFamily: tokens_1.fontFamily.sans,
                             fontWeight: tokens_1.fontWeight.medium,
                             fontSize: labelTokens.fontSize,
@@ -179,7 +180,7 @@ function SelectOption({ value, children: optionLabel, description, icon, disable
                             lineHeight: bodyTokens.lineHeight,
                             letterSpacing: bodyTokens.letterSpacing,
                             color: disabled ? colors.fg : textTokens.description,
-                        }, numberOfLines: 1, selectable: false, children: description })) : null] }), isSelected && !disabled ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: ICON_SIZE, color: colors.fg }) })) : null] }));
+                        }, numberOfLines: 1, selectable: false, children: description })) : null] }), isSelected && !disabled ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[ctx.size], height: tokens_1.iconSize[ctx.size] }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: ctx.size, color: colors.fg }) })) : null] }));
 }
 function SelectContent({ children, style }) {
     const { components, scheme } = (0, theme_1.useTheme)();
@@ -265,7 +266,7 @@ function Select({ type = 'single', size = 'default', label: formLabel, helperTex
         ? disabledColors.fg
         : intentColors.neutral.default.default.fg;
     // Resolve leading icon
-    const resolvedLeadingIcon = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: triggerFgColor })) : (leadingIcon);
+    const resolvedLeadingIcon = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: triggerFgColor })) : (leadingIcon);
     // Get display text for single select
     const getSelectedLabel = () => {
         if (type === 'single' || type === 'combobox') {
@@ -313,7 +314,7 @@ function Select({ type = 'single', size = 'default', label: formLabel, helperTex
                                 borderWidth: tokens_1.controlTokens.borderWidth,
                                 borderColor: triggerBorderColor,
                                 backgroundColor: triggerBgColor,
-                            }, children: [resolvedLeadingIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeadingIcon })) : null, type === 'multi' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            }, children: [resolvedLeadingIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: tokens_1.iconSize[size], height: tokens_1.iconSize[size] }, children: resolvedLeadingIcon })) : null, type === 'multi' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                         flex: 1,
                                         flexDirection: 'row',
                                         flexWrap: 'wrap',
@@ -359,7 +360,7 @@ function Select({ type = 'single', size = 'default', label: formLabel, helperTex
                                                 : textTokens.description,
                                         }, selectable: false, children: displayText ?? placeholder }) })), (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: isOpen
                                         ? { transform: [{ rotate: '180deg' }] }
-                                        : undefined, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "keyboard_arrow_down", size: CHEVRON_SIZE, color: triggerFgColor }) })] }), isOpen ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setIsOpen(false), accessibilityRole: "button", accessibilityLabel: "Close select", style: react_native_1.Platform.select({
+                                        : undefined, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow_drop_down", size: size, color: triggerFgColor }) })] }), isOpen ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setIsOpen(false), accessibilityRole: "button", accessibilityLabel: "Close select", style: react_native_1.Platform.select({
                                 web: {
                                     position: 'fixed',
                                     top: 0,

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, } 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, 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 { 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,4 @@ 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';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Radio = 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.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 = void 0;
+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;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -21,6 +21,7 @@ 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, "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; } });
@@ -32,6 +33,7 @@ Object.defineProperty(exports, "body", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "heading", { enumerable: true, get: function () { return tokens_1.heading; } });
 Object.defineProperty(exports, "display", { enumerable: true, get: function () { return tokens_1.display; } });
 Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return tokens_1.caption; } });
+Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return tokens_1.iconSize; } });
 // Theme
 var theme_1 = require("./theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
@@ -88,3 +90,5 @@ 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; } });

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, DeepPartial, } from './types';

package/dist/theme/themes.js

@@ -43,9 +43,9 @@ exports.themes = {
         },
         checkbox: {
             gap: 4, borderRadius: 4, focusRingWidth: 2,
-            small: { indicatorSize: 16, iconSize: 10 },
-            default: { indicatorSize: 20, iconSize: 12 },
-            large: { indicatorSize: 24, iconSize: 14 },
+            small: { indicatorSize: 16, iconSize: 16 },
+            default: { indicatorSize: 20, iconSize: 20 },
+            large: { indicatorSize: 24, iconSize: 24 },
         },
         alert: {
             borderRadius: 8,
@@ -106,6 +106,12 @@ exports.themes = {
             small: { paddingX: 4, paddingY: 1 },
             default: { paddingX: 6, paddingY: 2 },
         },
+        progress: {
+            borderRadius: 9999,
+            small: { trackHeight: 4 },
+            default: { trackHeight: 8 },
+            large: { trackHeight: 12 },
+        },
     },
     default: {
         dialog: {
@@ -137,9 +143,9 @@ exports.themes = {
         },
         checkbox: {
             gap: 8, borderRadius: 4, focusRingWidth: 2,
-            small: { indicatorSize: 16, iconSize: 10 },
-            default: { indicatorSize: 20, iconSize: 12 },
-            large: { indicatorSize: 24, iconSize: 14 },
+            small: { indicatorSize: 16, iconSize: 16 },
+            default: { indicatorSize: 20, iconSize: 20 },
+            large: { indicatorSize: 24, iconSize: 24 },
         },
         alert: {
             borderRadius: 8,
@@ -200,6 +206,12 @@ exports.themes = {
             small: { paddingX: 6, paddingY: 2 },
             default: { paddingX: 8, paddingY: 4 },
         },
+        progress: {
+            borderRadius: 9999,
+            small: { trackHeight: 4 },
+            default: { trackHeight: 8 },
+            large: { trackHeight: 12 },
+        },
     },
     comfortable: {
         dialog: {
@@ -231,9 +243,9 @@ exports.themes = {
         },
         checkbox: {
             gap: 12, borderRadius: 4, focusRingWidth: 2,
-            small: { indicatorSize: 16, iconSize: 10 },
-            default: { indicatorSize: 20, iconSize: 12 },
-            large: { indicatorSize: 24, iconSize: 14 },
+            small: { indicatorSize: 16, iconSize: 16 },
+            default: { indicatorSize: 20, iconSize: 20 },
+            large: { indicatorSize: 24, iconSize: 24 },
         },
         alert: {
             borderRadius: 8,
@@ -294,5 +306,11 @@ exports.themes = {
             small: { paddingX: 8, paddingY: 4 },
             default: { paddingX: 10, paddingY: 6 },
         },
+        progress: {
+            borderRadius: 9999,
+            small: { trackHeight: 4 },
+            default: { trackHeight: 8 },
+            large: { trackHeight: 12 },
+        },
     },
 };

package/dist/theme/types.d.ts

@@ -242,6 +242,19 @@ 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;
+};
 /**
  * Component-level tokens that vary by density theme.
  * Extended as new components are added to the library.
@@ -263,6 +276,7 @@ export type ComponentTokens = {
     avatar: AvatarThemeTokens;
     popover: PopoverThemeTokens;
     tooltip: TooltipThemeTokens;
+    progress: ProgressThemeTokens;
 };
 /** Utility type for partial overrides at any depth */
 export type DeepPartial<T> = {

package/dist/tokens/colors.d.ts

@@ -188,6 +188,10 @@ export type ColorScheme = {
             disabled: string;
         };
     };
+    /** Progress colours — track background (the fill uses the intent system) */
+    progress: {
+        track: string;
+    };
     /** Avatar colours — initials/icon fallback surface + foreground */
     avatar: {
         bg: string;
@@ -348,6 +352,10 @@ export declare const toggleColors: {
         disabled: string;
     };
 };
+/** Progress colours — track background (fill comes from the intent system) */
+export declare const progressColors: {
+    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.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,7 @@ exports.lightColors = {
         thumb: '#FFFFFF',
         label: { default: '#374151', disabled: '#9CA3AF' },
     },
+    progress: { track: '#E5E7EB' }, // control/progress/track/bg → cool-grey/200
     avatar: { bg: '#F3F4F6', fg: '#374151' },
     skeleton: { bg: '#F3F4F6', highlight: '#E5E7EB' },
     list: {
@@ -280,6 +281,7 @@ exports.darkColors = {
         thumb: '#FFFFFF',
         label: { default: '#E5E7EB', disabled: '#6B7280' },
     },
+    progress: { track: '#374151' }, // control/progress/track/bg → cool-grey/700
     avatar: { bg: '#374151', fg: '#E5E7EB' },
     skeleton: { bg: '#1F2937', highlight: '#374151' },
     list: {
@@ -338,6 +340,8 @@ 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;
 /** Avatar colours — initials/icon fallback surface + foreground */
 exports.avatarColors = exports.lightColors.avatar;
 /** Skeleton colours — placeholder surface for loading states */

package/dist/tokens/icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Icon size scale — mirrors the Figma `icon/{xs,small,default,large}/size`
+ * variables (component collection, aliasing the primitive size scale).
+ * Standalone/decorative icons use this named scale; control-embedded icons are
+ * sized by their host component's density tokens.
+ */
+export type IconSize = 'xs' | 'small' | 'default' | 'large';
+export declare const iconSize: Record<IconSize, number>;

package/dist/tokens/icon.js

@@ -0,0 +1,15 @@
+"use strict";
+/**
+ * Icon size scale — mirrors the Figma `icon/{xs,small,default,large}/size`
+ * variables (component collection, aliasing the primitive size scale).
+ * Standalone/decorative icons use this named scale; control-embedded icons are
+ * sized by their host component's density tokens.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.iconSize = void 0;
+exports.iconSize = {
+    xs: 12,
+    small: 16,
+    default: 20,
+    large: 24,
+};

package/dist/tokens/index.d.ts

@@ -1,2 +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, 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.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.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,7 @@ 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, "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; } });
@@ -29,3 +30,5 @@ Object.defineProperty(exports, "body", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "heading", { enumerable: true, get: function () { return typography_1.heading; } });
 Object.defineProperty(exports, "display", { enumerable: true, get: function () { return typography_1.display; } });
 Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return typography_1.caption; } });
+var icon_1 = require("./icon");
+Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return icon_1.iconSize; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "4.3.0",
+  "version": "4.5.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",