@castui/cast-ui 4.3.0 → 4.4.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/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,4 +1,4 @@
-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 { 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 { Button, type ButtonProps, type ButtonSize } from './components/Button';
 export { Icon, type IconProps } from './components/Icon';

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.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;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -32,6 +32,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; } });

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,
@@ -137,9 +137,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,
@@ -231,9 +231,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,

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 { 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.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; } });
@@ -29,3 +29,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.4.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",