@castui/cast-ui 4.2.2 → 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.
@@ -95,6 +97,7 @@ the icons you use (e.g. `pyftsubset` from
 | **Radio** | Single-choice control, with `RadioGroup` for managing a set |
 | **Select** | Dropdown with single, multi (tag pills), and combobox (search) modes |
 | **Skeleton** | Loading placeholder in text, circle, and rectangle shapes |
+| **Text** | Typographic primitive rendering the full type ramp, from caption to display |
 | **Toast** | Brief notification with icon and optional close button |
 | **Toggle** | On/off switch with label |
 | **Tooltip** | Short hint shown on hover or focus |

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/components/Text/Text.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Text — the typographic primitive of Cast UI, rendering the full type ramp.
+ *
+ * Maps to the Figma <Text> component (node 769:2710):
+ *   type → caption | label-sm/md/lg | body-sm/md/lg | title-sm/md/lg |
+ *          heading-sm/md/lg | display-sm/md/lg
+ *
+ * Each `type` applies the matching Figma Text Style — Inter at the scale's
+ * size/line-height/tracking, weighted per family: label and title render
+ * medium (500), heading renders semibold (600), body, caption, and display
+ * render regular (400).
+ *
+ * Colour defaults to the active scheme's text/primary variable (cool-grey/700
+ * in light mode, cool-grey/200 in dark) so text follows `colorMode`
+ * automatically; pass `color` to override. Typography is constant across
+ * densities — Text reads no density tokens.
+ *
+ * Requires the Inter font to be loaded — see the README "Fonts" section.
+ */
+import { type StyleProp, type TextStyle } from 'react-native';
+export type TextType = 'caption' | 'label-sm' | 'label-md' | 'label-lg' | 'body-sm' | 'body-md' | 'body-lg' | 'title-sm' | 'title-md' | 'title-lg' | 'heading-sm' | 'heading-md' | 'heading-lg' | 'display-sm' | 'display-md' | 'display-lg';
+export type TextProps = {
+    /** The text content. */
+    children: string;
+    /** Type ramp entry — mirrors the Figma `type` variant. Defaults to "body-md". */
+    type?: TextType;
+    /** Text colour. Defaults to the active scheme's text/primary. */
+    color?: string;
+    /** Truncate to this many lines with an ellipsis. */
+    numberOfLines?: number;
+    /** Whether the text can be selected/copied. Defaults to the platform default. */
+    selectable?: boolean;
+    /** Style overrides — applied after the type ramp styles. */
+    style?: StyleProp<TextStyle>;
+    /** Accessibility label — falls back to the text content. */
+    accessibilityLabel?: string;
+};
+export declare function Text({ children, type, color, numberOfLines, selectable, style, accessibilityLabel, }: TextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Text/Text.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = Text;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+/** type → resolved scale + per-family weight (matches the Figma Text Styles) */
+const TYPE_STYLES = {
+    caption: { ...tokens_1.caption, fontWeight: tokens_1.fontWeight.regular },
+    'label-sm': { ...tokens_1.label.sm, fontWeight: tokens_1.fontWeight.medium },
+    'label-md': { ...tokens_1.label.md, fontWeight: tokens_1.fontWeight.medium },
+    'label-lg': { ...tokens_1.label.lg, fontWeight: tokens_1.fontWeight.medium },
+    'body-sm': { ...tokens_1.body.sm, fontWeight: tokens_1.fontWeight.regular },
+    'body-md': { ...tokens_1.body.md, fontWeight: tokens_1.fontWeight.regular },
+    'body-lg': { ...tokens_1.body.lg, fontWeight: tokens_1.fontWeight.regular },
+    'title-sm': { ...tokens_1.title.sm, fontWeight: tokens_1.fontWeight.medium },
+    'title-md': { ...tokens_1.title.md, fontWeight: tokens_1.fontWeight.medium },
+    'title-lg': { ...tokens_1.title.lg, fontWeight: tokens_1.fontWeight.medium },
+    'heading-sm': { ...tokens_1.heading.sm, fontWeight: tokens_1.fontWeight.semibold },
+    'heading-md': { ...tokens_1.heading.md, fontWeight: tokens_1.fontWeight.semibold },
+    'heading-lg': { ...tokens_1.heading.lg, fontWeight: tokens_1.fontWeight.semibold },
+    'display-sm': { ...tokens_1.display.sm, fontWeight: tokens_1.fontWeight.regular },
+    'display-md': { ...tokens_1.display.md, fontWeight: tokens_1.fontWeight.regular },
+    'display-lg': { ...tokens_1.display.lg, fontWeight: tokens_1.fontWeight.regular },
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Text({ children, type = 'body-md', color, numberOfLines, selectable, style, accessibilityLabel, }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const typeStyle = TYPE_STYLES[type];
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, selectable: selectable, accessibilityRole: type.startsWith('heading') ? 'header' : undefined, accessibilityLabel: accessibilityLabel, style: [
+            {
+                fontFamily: tokens_1.fontFamily.sans,
+                color: color ?? scheme.text.primary,
+                ...typeStyle,
+            },
+            style,
+        ], children: children }));
+}

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

@@ -0,0 +1 @@
+export { Text, type TextProps, type TextType } from './Text';

package/dist/components/Text/index.js

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

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, 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';
@@ -19,3 +19,4 @@ export { Avatar, type AvatarProps, type AvatarSize, type AvatarType, } from './c
 export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, } from './components/Popover';
 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';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toast = exports.RadioGroup = 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.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.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = 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
@@ -29,7 +29,10 @@ Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function (
 Object.defineProperty(exports, "label", { enumerable: true, get: function () { return tokens_1.label; } });
 Object.defineProperty(exports, "title", { enumerable: true, get: function () { return tokens_1.title; } });
 Object.defineProperty(exports, "body", { enumerable: true, get: function () { return tokens_1.body; } });
+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; } });
@@ -84,3 +87,5 @@ var Skeleton_1 = require("./components/Skeleton");
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
 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; } });

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/colors.d.ts

@@ -79,6 +79,8 @@ export type ColorScheme = {
     };
     /** Semantic text tokens */
     text: {
+        /** Default foreground for standalone text — text/primary (Text component default) */
+        primary: string;
         description: string;
         /** Placeholder text in form fields — intent/neutral/placeholder */
         placeholder: string;
@@ -237,6 +239,8 @@ export declare const surfaceTokens: {
 };
 /** Semantic text tokens */
 export declare const textTokens: {
+    /** Default foreground for standalone text — text/primary (Text component default) */
+    primary: string;
     description: string;
     /** Placeholder text in form fields — intent/neutral/placeholder */
     placeholder: string;

package/dist/tokens/colors.js

@@ -81,6 +81,7 @@ exports.lightColors = {
         overlay: { bg: '#FFFFFF', border: '#E5E7EB', borderRadius: 8 },
     },
     text: {
+        primary: '#374151', // cool-grey/700
         description: '#6B7280',
         placeholder: '#9CA3AF',
     },
@@ -221,6 +222,7 @@ exports.darkColors = {
         overlay: { bg: '#1F2937', border: '#374151', borderRadius: 8 },
     },
     text: {
+        primary: '#E5E7EB', // cool-grey/200
         description: '#9CA3AF',
         placeholder: '#6B7280',
     },

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, caption, type LabelSize } from './typography';
+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.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; } });
@@ -26,4 +26,8 @@ Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function (
 Object.defineProperty(exports, "label", { enumerable: true, get: function () { return typography_1.label; } });
 Object.defineProperty(exports, "title", { enumerable: true, get: function () { return typography_1.title; } });
 Object.defineProperty(exports, "body", { enumerable: true, get: function () { return typography_1.body; } });
+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/dist/tokens/typography.d.ts

@@ -27,6 +27,10 @@ type TypographyScale = Record<'sm' | 'md' | 'lg', {
 export declare const label: TypographyScale;
 export declare const title: TypographyScale;
 export declare const body: TypographyScale;
+/** Heading scale — heading/{sm|md|lg}, rendered semibold */
+export declare const heading: TypographyScale;
+/** Display scale — display/{sm|md|lg}, hero/marketing sizes, rendered regular */
+export declare const display: TypographyScale;
 /** Caption scale — helper text, group labels, tags */
 export declare const caption: {
     readonly fontSize: 11;

package/dist/tokens/typography.js

@@ -8,7 +8,7 @@
  *   label/{sm|md|lg}, title/{sm|md|lg}, body/{sm|md|lg} → fontSize, lineHeight, letterSpacing
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.caption = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = void 0;
+exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = void 0;
 const react_native_1 = require("react-native");
 exports.fontFamily = {
     sans: react_native_1.Platform.select({ web: 'Inter, system-ui, sans-serif', default: 'Inter' }),
@@ -40,5 +40,17 @@ exports.body = {
     md: { fontSize: 14, lineHeight: 20, letterSpacing: 0 },
     lg: { fontSize: 16, lineHeight: 24, letterSpacing: 0 },
 };
+/** Heading scale — heading/{sm|md|lg}, rendered semibold */
+exports.heading = {
+    sm: { fontSize: 24, lineHeight: 32, letterSpacing: 0 },
+    md: { fontSize: 30, lineHeight: 36, letterSpacing: -0.25 },
+    lg: { fontSize: 36, lineHeight: 40, letterSpacing: -0.25 },
+};
+/** Display scale — display/{sm|md|lg}, hero/marketing sizes, rendered regular */
+exports.display = {
+    sm: { fontSize: 48, lineHeight: 56, letterSpacing: -0.25 },
+    md: { fontSize: 60, lineHeight: 64, letterSpacing: -0.5 },
+    lg: { fontSize: 72, lineHeight: 80, letterSpacing: -0.5 },
+};
 /** Caption scale — helper text, group labels, tags */
 exports.caption = { fontSize: 11, lineHeight: 16, letterSpacing: 0.5 };

package/package.json

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