@castui/cast-ui 4.2.2 → 4.3.0

package/README.md

@@ -95,6 +95,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/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, } 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.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;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -29,6 +29,8 @@ 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; } });
 // Theme
 var theme_1 = require("./theme");
@@ -84,3 +86,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/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/index.d.ts

@@ -1,2 +1,2 @@
 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';

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.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,6 @@ 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; } });

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.3.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",