@castui/cast-ui 4.2.1 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +46 -1
  2. package/dist/components/Icon/Icon.d.ts +5 -2
  3. package/dist/components/Icon/Icon.js +5 -1
  4. package/dist/components/Skeleton/Skeleton.js +7 -2
  5. package/dist/components/Text/Text.d.ts +38 -0
  6. package/dist/components/Text/Text.js +41 -0
  7. package/dist/components/Text/index.d.ts +1 -0
  8. package/dist/components/Text/index.js +5 -0
  9. package/dist/index.d.ts +2 -1
  10. package/dist/index.js +6 -2
  11. package/dist/tokens/colors.d.ts +4 -0
  12. package/dist/tokens/colors.js +2 -0
  13. package/dist/tokens/index.d.ts +1 -1
  14. package/dist/tokens/index.js +3 -1
  15. package/dist/tokens/typography.d.ts +4 -0
  16. package/dist/tokens/typography.js +13 -1
  17. package/package.json +1 -1
package/README.md CHANGED
@@ -10,6 +10,9 @@ so what designers see in Figma is what ships in the app. Every component
10
10
  supports light and dark mode, three spacing densities, and your own brand
11
11
  colours — all switchable while the app is running, with no rebuild.
12
12
 
13
+ Browse every component live in the
14
+ [hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com).
15
+
13
16
  ## Installation
14
17
 
15
18
  ```bash
@@ -33,6 +36,45 @@ export function App() {
33
36
  }
34
37
  ```
35
38
 
39
+ ## Fonts
40
+
41
+ Cast UI ships no font files. Typography asks for **Inter** and the Icon
42
+ component asks for **Material Symbols Outlined** — if a font isn't loaded
43
+ there is no error: text quietly falls back to the system font, and icons
44
+ render as their literal names ("star" instead of the glyph). Load both once
45
+ at app start-up.
46
+
47
+ **Expo (iOS, Android, and web)** — one `useFonts` call covers all three
48
+ platforms:
49
+
50
+ ```tsx
51
+ import { useFonts } from 'expo-font';
52
+
53
+ const [fontsLoaded] = useFonts({
54
+ Inter: require('./assets/Inter.ttf'),
55
+ MaterialSymbolsOutlined: require('./assets/MaterialSymbolsOutlined.ttf'),
56
+ });
57
+ ```
58
+
59
+ **Plain web** — add the Google Fonts stylesheets to your HTML head:
60
+
61
+ ```html
62
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
63
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet" />
64
+ ```
65
+
66
+ **Bare React Native** — link the `.ttf` files as font assets
67
+ (`react-native.config.js` + `npx react-native-asset`), keeping the family
68
+ names `Inter` and `MaterialSymbolsOutlined`.
69
+
70
+ Download both from Google Fonts:
71
+ [Inter](https://fonts.google.com/specimen/Inter) and
72
+ [Material Symbols](https://fonts.google.com/icons). The Material Symbols
73
+ variable font is ~10 MB — fine for web, where it's served from a CDN and
74
+ cached, but worth slimming for production native builds by subsetting it to
75
+ the icons you use (e.g. `pyftsubset` from
76
+ [fonttools](https://github.com/fonttools/fonttools)).
77
+
36
78
  ## Components
37
79
 
38
80
  | Component | Description |
@@ -53,6 +95,7 @@ export function App() {
53
95
  | **Radio** | Single-choice control, with `RadioGroup` for managing a set |
54
96
  | **Select** | Dropdown with single, multi (tag pills), and combobox (search) modes |
55
97
  | **Skeleton** | Loading placeholder in text, circle, and rectangle shapes |
98
+ | **Text** | Typographic primitive rendering the full type ramp, from caption to display |
56
99
  | **Toast** | Brief notification with icon and optional close button |
57
100
  | **Toggle** | On/off switch with label |
58
101
  | **Tooltip** | Short hint shown on hover or focus |
@@ -108,7 +151,9 @@ comfortable app. Your own components can read the active theme with the
108
151
  `useTheme` hook, and all the underlying values (colours, typography scales,
109
152
  density spacing) are exported for direct use.
110
153
 
111
- The full guide lives in Storybook under **Guides → Customisation**.
154
+ The full guide lives in the
155
+ [hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com)
156
+ under **Guides → Customisation**.
112
157
 
113
158
  ## Theming from Figma — the cast-sync plugin
114
159
 
package/dist/components/Icon/Icon.d.ts CHANGED
@@ -10,10 +10,13 @@
10
10
  * runtime dependencies (no per-icon SVG packages, no vector-icons dep).
11
11
  *
12
12
  * Rendering uses font ligatures: the `name` text (e.g. "chevron_right") is
13
- * shaped into the glyph by the font. Requires the font to be loaded:
13
+ * shaped into the glyph by the font. Requires the font to be loaded — on web
14
+ * both the `MaterialSymbolsOutlined` and `Material Symbols Outlined` family
15
+ * names are accepted, so any one of these paths works:
14
16
  * - Web: Google Fonts CSS import (see .storybook/preview-head.html), or
15
17
  * self-host the same `Material Symbols Outlined` family.
16
- * - Expo: load `MaterialSymbolsOutlined` via expo-font / useFonts.
18
+ * - Expo (iOS, Android, and web): load `MaterialSymbolsOutlined` via
19
+ * expo-font / useFonts — one registration covers all three platforms.
17
20
  * - Bare RN: link the .ttf as a font asset (react-native.config.js / Xcode).
18
21
  *
19
22
  * The fill / weight / grade / opticalSize axes are applied via CSS
package/dist/components/Icon/Icon.js CHANGED
@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Icon = Icon;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_native_1 = require("react-native");
6
+ // Web accepts both family names so the Google-Fonts CSS path (spaced name)
7
+ // and the expo-font/useFonts path (unspaced key) work without consumer
8
+ // configuration. Fonts registered via expo-font on web keep their object key
9
+ // as the family name.
6
10
  const FONT_FAMILY = react_native_1.Platform.select({
7
- web: '"Material Symbols Outlined", sans-serif',
11
+ web: 'MaterialSymbolsOutlined, "Material Symbols Outlined", sans-serif',
8
12
  default: 'MaterialSymbolsOutlined',
9
13
  });
10
14
  function Icon({ name, size = 20, color = '#374151', fill = false, weight = 400, grade = 0, opticalSize, style, }) {
package/dist/components/Skeleton/Skeleton.js CHANGED
@@ -19,6 +19,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
19
19
  const react_1 = require("react");
20
20
  const react_native_1 = require("react-native");
21
21
  const theme_1 = require("../../theme");
22
+ // ---------------------------------------------------------------------------
23
+ // Constants
24
+ // ---------------------------------------------------------------------------
25
+ // react-native-web has no native driver and warns if asked for one.
26
+ const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
22
27
  /** Default size + corner radius per shape (radius/2, surface/overlay/radius, radius/full). */
23
28
  const SHAPE_DEFAULTS = {
24
29
  text: { width: 120, height: 12, radius: 4 },
@@ -42,12 +47,12 @@ function Skeleton({ shape = 'text', width, height, radius, animated = true, styl
42
47
  react_native_1.Animated.timing(opacity, {
43
48
  toValue: 0.5,
44
49
  duration: 700,
45
- useNativeDriver: true,
50
+ useNativeDriver: USE_NATIVE_DRIVER,
46
51
  }),
47
52
  react_native_1.Animated.timing(opacity, {
48
53
  toValue: 1,
49
54
  duration: 700,
50
- useNativeDriver: true,
55
+ useNativeDriver: USE_NATIVE_DRIVER,
51
56
  }),
52
57
  ]));
53
58
  loop.start();
package/dist/components/Text/Text.d.ts ADDED
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Text — the typographic primitive of Cast UI, rendering the full type ramp.
3
+ *
4
+ * Maps to the Figma <Text> component (node 769:2710):
5
+ * type → caption | label-sm/md/lg | body-sm/md/lg | title-sm/md/lg |
6
+ * heading-sm/md/lg | display-sm/md/lg
7
+ *
8
+ * Each `type` applies the matching Figma Text Style — Inter at the scale's
9
+ * size/line-height/tracking, weighted per family: label and title render
10
+ * medium (500), heading renders semibold (600), body, caption, and display
11
+ * render regular (400).
12
+ *
13
+ * Colour defaults to the active scheme's text/primary variable (cool-grey/700
14
+ * in light mode, cool-grey/200 in dark) so text follows `colorMode`
15
+ * automatically; pass `color` to override. Typography is constant across
16
+ * densities — Text reads no density tokens.
17
+ *
18
+ * Requires the Inter font to be loaded — see the README "Fonts" section.
19
+ */
20
+ import { type StyleProp, type TextStyle } from 'react-native';
21
+ 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';
22
+ export type TextProps = {
23
+ /** The text content. */
24
+ children: string;
25
+ /** Type ramp entry — mirrors the Figma `type` variant. Defaults to "body-md". */
26
+ type?: TextType;
27
+ /** Text colour. Defaults to the active scheme's text/primary. */
28
+ color?: string;
29
+ /** Truncate to this many lines with an ellipsis. */
30
+ numberOfLines?: number;
31
+ /** Whether the text can be selected/copied. Defaults to the platform default. */
32
+ selectable?: boolean;
33
+ /** Style overrides — applied after the type ramp styles. */
34
+ style?: StyleProp<TextStyle>;
35
+ /** Accessibility label — falls back to the text content. */
36
+ accessibilityLabel?: string;
37
+ };
38
+ export declare function Text({ children, type, color, numberOfLines, selectable, style, accessibilityLabel, }: TextProps): import("react/jsx-runtime").JSX.Element;
package/dist/components/Text/Text.js ADDED
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Text = Text;
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const react_native_1 = require("react-native");
6
+ const theme_1 = require("../../theme");
7
+ const tokens_1 = require("../../tokens");
8
+ /** type → resolved scale + per-family weight (matches the Figma Text Styles) */
9
+ const TYPE_STYLES = {
10
+ caption: { ...tokens_1.caption, fontWeight: tokens_1.fontWeight.regular },
11
+ 'label-sm': { ...tokens_1.label.sm, fontWeight: tokens_1.fontWeight.medium },
12
+ 'label-md': { ...tokens_1.label.md, fontWeight: tokens_1.fontWeight.medium },
13
+ 'label-lg': { ...tokens_1.label.lg, fontWeight: tokens_1.fontWeight.medium },
14
+ 'body-sm': { ...tokens_1.body.sm, fontWeight: tokens_1.fontWeight.regular },
15
+ 'body-md': { ...tokens_1.body.md, fontWeight: tokens_1.fontWeight.regular },
16
+ 'body-lg': { ...tokens_1.body.lg, fontWeight: tokens_1.fontWeight.regular },
17
+ 'title-sm': { ...tokens_1.title.sm, fontWeight: tokens_1.fontWeight.medium },
18
+ 'title-md': { ...tokens_1.title.md, fontWeight: tokens_1.fontWeight.medium },
19
+ 'title-lg': { ...tokens_1.title.lg, fontWeight: tokens_1.fontWeight.medium },
20
+ 'heading-sm': { ...tokens_1.heading.sm, fontWeight: tokens_1.fontWeight.semibold },
21
+ 'heading-md': { ...tokens_1.heading.md, fontWeight: tokens_1.fontWeight.semibold },
22
+ 'heading-lg': { ...tokens_1.heading.lg, fontWeight: tokens_1.fontWeight.semibold },
23
+ 'display-sm': { ...tokens_1.display.sm, fontWeight: tokens_1.fontWeight.regular },
24
+ 'display-md': { ...tokens_1.display.md, fontWeight: tokens_1.fontWeight.regular },
25
+ 'display-lg': { ...tokens_1.display.lg, fontWeight: tokens_1.fontWeight.regular },
26
+ };
27
+ // ---------------------------------------------------------------------------
28
+ // Component
29
+ // ---------------------------------------------------------------------------
30
+ function Text({ children, type = 'body-md', color, numberOfLines, selectable, style, accessibilityLabel, }) {
31
+ const { scheme } = (0, theme_1.useTheme)();
32
+ const typeStyle = TYPE_STYLES[type];
33
+ return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: numberOfLines, selectable: selectable, accessibilityRole: type.startsWith('heading') ? 'header' : undefined, accessibilityLabel: accessibilityLabel, style: [
34
+ {
35
+ fontFamily: tokens_1.fontFamily.sans,
36
+ color: color ?? scheme.text.primary,
37
+ ...typeStyle,
38
+ },
39
+ style,
40
+ ], children: children }));
41
+ }
package/dist/components/Text/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Text, type TextProps, type TextType } from './Text';
package/dist/components/Text/index.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Text = void 0;
4
+ var Text_1 = require("./Text");
5
+ Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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';
2
2
  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';
3
3
  export { Button, type ButtonProps, type ButtonSize } from './components/Button';
4
4
  export { Icon, type IconProps } from './components/Icon';
@@ -19,3 +19,4 @@ export { Avatar, type AvatarProps, type AvatarSize, type AvatarType, } from './c
19
19
  export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, } from './components/Popover';
20
20
  export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/Skeleton';
21
21
  export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';
22
+ export { Text, type TextProps, type TextType } from './components/Text';
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
4
- exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = void 0;
3
+ 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;
4
+ exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = void 0;
5
5
  // Cast UI — Cross-platform design system component library
6
6
  //
7
7
  // Tokens
@@ -29,6 +29,8 @@ Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function (
29
29
  Object.defineProperty(exports, "label", { enumerable: true, get: function () { return tokens_1.label; } });
30
30
  Object.defineProperty(exports, "title", { enumerable: true, get: function () { return tokens_1.title; } });
31
31
  Object.defineProperty(exports, "body", { enumerable: true, get: function () { return tokens_1.body; } });
32
+ Object.defineProperty(exports, "heading", { enumerable: true, get: function () { return tokens_1.heading; } });
33
+ Object.defineProperty(exports, "display", { enumerable: true, get: function () { return tokens_1.display; } });
32
34
  Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return tokens_1.caption; } });
33
35
  // Theme
34
36
  var theme_1 = require("./theme");
@@ -84,3 +86,5 @@ var Skeleton_1 = require("./components/Skeleton");
84
86
  Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
85
87
  var Tooltip_1 = require("./components/Tooltip");
86
88
  Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
89
+ var Text_1 = require("./components/Text");
90
+ Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
package/dist/tokens/colors.d.ts CHANGED
@@ -79,6 +79,8 @@ export type ColorScheme = {
79
79
  };
80
80
  /** Semantic text tokens */
81
81
  text: {
82
+ /** Default foreground for standalone text — text/primary (Text component default) */
83
+ primary: string;
82
84
  description: string;
83
85
  /** Placeholder text in form fields — intent/neutral/placeholder */
84
86
  placeholder: string;
@@ -237,6 +239,8 @@ export declare const surfaceTokens: {
237
239
  };
238
240
  /** Semantic text tokens */
239
241
  export declare const textTokens: {
242
+ /** Default foreground for standalone text — text/primary (Text component default) */
243
+ primary: string;
240
244
  description: string;
241
245
  /** Placeholder text in form fields — intent/neutral/placeholder */
242
246
  placeholder: string;
package/dist/tokens/colors.js CHANGED
@@ -81,6 +81,7 @@ exports.lightColors = {
81
81
  overlay: { bg: '#FFFFFF', border: '#E5E7EB', borderRadius: 8 },
82
82
  },
83
83
  text: {
84
+ primary: '#374151', // cool-grey/700
84
85
  description: '#6B7280',
85
86
  placeholder: '#9CA3AF',
86
87
  },
@@ -221,6 +222,7 @@ exports.darkColors = {
221
222
  overlay: { bg: '#1F2937', border: '#374151', borderRadius: 8 },
222
223
  },
223
224
  text: {
225
+ primary: '#E5E7EB', // cool-grey/200
224
226
  description: '#9CA3AF',
225
227
  placeholder: '#6B7280',
226
228
  },
package/dist/tokens/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  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';
2
- export { fontFamily, fontWeight, label, title, body, caption, type LabelSize } from './typography';
2
+ export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
package/dist/tokens/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
3
+ 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;
4
4
  var colors_1 = require("./colors");
5
5
  Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return colors_1.lightColors; } });
6
6
  Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return colors_1.darkColors; } });
@@ -26,4 +26,6 @@ Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function (
26
26
  Object.defineProperty(exports, "label", { enumerable: true, get: function () { return typography_1.label; } });
27
27
  Object.defineProperty(exports, "title", { enumerable: true, get: function () { return typography_1.title; } });
28
28
  Object.defineProperty(exports, "body", { enumerable: true, get: function () { return typography_1.body; } });
29
+ Object.defineProperty(exports, "heading", { enumerable: true, get: function () { return typography_1.heading; } });
30
+ Object.defineProperty(exports, "display", { enumerable: true, get: function () { return typography_1.display; } });
29
31
  Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return typography_1.caption; } });
package/dist/tokens/typography.d.ts CHANGED
@@ -27,6 +27,10 @@ type TypographyScale = Record<'sm' | 'md' | 'lg', {
27
27
  export declare const label: TypographyScale;
28
28
  export declare const title: TypographyScale;
29
29
  export declare const body: TypographyScale;
30
+ /** Heading scale — heading/{sm|md|lg}, rendered semibold */
31
+ export declare const heading: TypographyScale;
32
+ /** Display scale — display/{sm|md|lg}, hero/marketing sizes, rendered regular */
33
+ export declare const display: TypographyScale;
30
34
  /** Caption scale — helper text, group labels, tags */
31
35
  export declare const caption: {
32
36
  readonly fontSize: 11;
package/dist/tokens/typography.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * label/{sm|md|lg}, title/{sm|md|lg}, body/{sm|md|lg} → fontSize, lineHeight, letterSpacing
9
9
  */
10
10
  Object.defineProperty(exports, "__esModule", { value: true });
11
- exports.caption = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = void 0;
11
+ exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = void 0;
12
12
  const react_native_1 = require("react-native");
13
13
  exports.fontFamily = {
14
14
  sans: react_native_1.Platform.select({ web: 'Inter, system-ui, sans-serif', default: 'Inter' }),
@@ -40,5 +40,17 @@ exports.body = {
40
40
  md: { fontSize: 14, lineHeight: 20, letterSpacing: 0 },
41
41
  lg: { fontSize: 16, lineHeight: 24, letterSpacing: 0 },
42
42
  };
43
+ /** Heading scale — heading/{sm|md|lg}, rendered semibold */
44
+ exports.heading = {
45
+ sm: { fontSize: 24, lineHeight: 32, letterSpacing: 0 },
46
+ md: { fontSize: 30, lineHeight: 36, letterSpacing: -0.25 },
47
+ lg: { fontSize: 36, lineHeight: 40, letterSpacing: -0.25 },
48
+ };
49
+ /** Display scale — display/{sm|md|lg}, hero/marketing sizes, rendered regular */
50
+ exports.display = {
51
+ sm: { fontSize: 48, lineHeight: 56, letterSpacing: -0.25 },
52
+ md: { fontSize: 60, lineHeight: 64, letterSpacing: -0.5 },
53
+ lg: { fontSize: 72, lineHeight: 80, letterSpacing: -0.5 },
54
+ };
43
55
  /** Caption scale — helper text, group labels, tags */
44
56
  exports.caption = { fontSize: 11, lineHeight: 16, letterSpacing: 0.5 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@castui/cast-ui",
3
- "version": "4.2.1",
3
+ "version": "4.3.0",
4
4
  "description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",