@castui/cast-ui 4.2.1 → 4.2.2

package/README.md

@@ -10,6 +10,9 @@ so what designers see in Figma is what ships in the app. Every component
 supports light and dark mode, three spacing densities, and your own brand
 colours — all switchable while the app is running, with no rebuild.
 
+Browse every component live in the
+[hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com).
+
 ## Installation
 
 ```bash
@@ -33,6 +36,45 @@ export function App() {
 }
 ```
 
+## Fonts
+
+Cast UI ships no font files. Typography asks for **Inter** and the Icon
+component asks for **Material Symbols Outlined** — if a font isn't loaded
+there is no error: text quietly falls back to the system font, and icons
+render as their literal names ("star" instead of the glyph). Load both once
+at app start-up.
+
+**Expo (iOS, Android, and web)** — one `useFonts` call covers all three
+platforms:
+
+```tsx
+import { useFonts } from 'expo-font';
+
+const [fontsLoaded] = useFonts({
+  Inter: require('./assets/Inter.ttf'),
+  MaterialSymbolsOutlined: require('./assets/MaterialSymbolsOutlined.ttf'),
+});
+```
+
+**Plain web** — add the Google Fonts stylesheets to your HTML head:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+<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" />
+```
+
+**Bare React Native** — link the `.ttf` files as font assets
+(`react-native.config.js` + `npx react-native-asset`), keeping the family
+names `Inter` and `MaterialSymbolsOutlined`.
+
+Download both from Google Fonts:
+[Inter](https://fonts.google.com/specimen/Inter) and
+[Material Symbols](https://fonts.google.com/icons). The Material Symbols
+variable font is ~10 MB — fine for web, where it's served from a CDN and
+cached, but worth slimming for production native builds by subsetting it to
+the icons you use (e.g. `pyftsubset` from
+[fonttools](https://github.com/fonttools/fonttools)).
+
 ## Components
 
 | Component | Description |
@@ -108,7 +150,9 @@ comfortable app. Your own components can read the active theme with the
 `useTheme` hook, and all the underlying values (colours, typography scales,
 density spacing) are exported for direct use.
 
-The full guide lives in Storybook under **Guides → Customisation**.
+The full guide lives in the
+[hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com)
+under **Guides → Customisation**.
 
 ## Theming from Figma — the cast-sync plugin
 

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

@@ -10,10 +10,13 @@
  *     runtime dependencies (no per-icon SVG packages, no vector-icons dep).
  *
  * Rendering uses font ligatures: the `name` text (e.g. "chevron_right") is
- * shaped into the glyph by the font. Requires the font to be loaded:
+ * shaped into the glyph by the font. Requires the font to be loaded — on web
+ * both the `MaterialSymbolsOutlined` and `Material Symbols Outlined` family
+ * names are accepted, so any one of these paths works:
  *   - Web: Google Fonts CSS import (see .storybook/preview-head.html), or
  *     self-host the same `Material Symbols Outlined` family.
- *   - Expo: load `MaterialSymbolsOutlined` via expo-font / useFonts.
+ *   - Expo (iOS, Android, and web): load `MaterialSymbolsOutlined` via
+ *     expo-font / useFonts — one registration covers all three platforms.
  *   - Bare RN: link the .ttf as a font asset (react-native.config.js / Xcode).
  *
  * The fill / weight / grade / opticalSize axes are applied via CSS

package/dist/components/Icon/Icon.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = Icon;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_native_1 = require("react-native");
+// 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
+// as the family name.
 const FONT_FAMILY = react_native_1.Platform.select({
-    web: '"Material Symbols Outlined", sans-serif',
+    web: 'MaterialSymbolsOutlined, "Material Symbols Outlined", sans-serif',
     default: 'MaterialSymbolsOutlined',
 });
 function Icon({ name, size = 20, color = '#374151', fill = false, weight = 400, grade = 0, opticalSize, style, }) {

package/dist/components/Skeleton/Skeleton.js

@@ -19,6 +19,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const theme_1 = require("../../theme");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+// react-native-web has no native driver and warns if asked for one.
+const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 /** Default size + corner radius per shape (radius/2, surface/overlay/radius, radius/full). */
 const SHAPE_DEFAULTS = {
     text: { width: 120, height: 12, radius: 4 },
@@ -42,12 +47,12 @@ function Skeleton({ shape = 'text', width, height, radius, animated = true, styl
             react_native_1.Animated.timing(opacity, {
                 toValue: 0.5,
                 duration: 700,
-                useNativeDriver: true,
+                useNativeDriver: USE_NATIVE_DRIVER,
             }),
             react_native_1.Animated.timing(opacity, {
                 toValue: 1,
                 duration: 700,
-                useNativeDriver: true,
+                useNativeDriver: USE_NATIVE_DRIVER,
             }),
         ]));
         loop.start();

package/package.json

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