@castui/cast-ui 0.1.0 → 0.3.0

package/README.md

@@ -33,6 +33,12 @@ Example:
 
 See [`design-tokens/DESIGN-TOKENS-SUMMARY.md`](design-tokens/DESIGN-TOKENS-SUMMARY.md) for the full token reference.
 
+## Examples
+
+For live examples showing Cast UI components and theming in action, see the companion repo:
+
+**[Connagh/cast-ui-examples](https://github.com/Connagh/cast-ui-examples)** (in progress)
+
 ## Project Structure
 
 ```
@@ -42,6 +48,9 @@ cast-ui/
       Button/
         Button.tsx              RN Pressable + Text, theme-aware
         Button.stories.tsx      Storybook stories
+      Card/
+        Card.tsx                RN View + Text, theme-aware
+        Card.stories.tsx        Storybook stories
     theme/
       types.ts                  CastTheme TypeScript interface
       ThemeProvider.tsx          React Context provider + useTheme hook
@@ -68,6 +77,8 @@ cast-ui/
     preview-head.html           Google Fonts <link> tags
   .github/workflows/
     chromatic.yml               Visual regression testing on push
+    adoption.yml                Zeroheight adoption tracking on push to main
+    publish.yml                 Publish to npm on push to main
   dist/                         Build output (gitignored)
   tsconfig.json                 Development TypeScript config
   tsconfig.build.json           Library build config (excludes stories)
@@ -113,6 +124,7 @@ Opens at `http://localhost:6006`. Use the paintbrush icon in the toolbar to swit
 | `npm run build-storybook` | Build static Storybook (auto-runs `build:tokens`) |
 | `npm run build` | Full library build: tokens + TypeScript compilation to `dist/` |
 | `npm publish` | Publish to npm (auto-runs `build` via `prepublishOnly`) |
+| `npm run zh:track-package` | Register/update package info with Zeroheight (runs automatically via CI) |
 
 ## Themes
 
@@ -184,6 +196,7 @@ theme.semantic.paragraphSpacing.*   body, editorial
 theme.semantic.paragraphIndent.*    editorial
 theme.semantic.borderRadius.*       small, medium, large
 theme.component.button.*            All button tokens (padding, colours, variants, states)
+theme.component.card.*              All card tokens (padding, colours, typography, elevation)
 ```
 
 ## Components
@@ -207,6 +220,33 @@ import { Button } from '@castui/cast-ui';
 | `disabled` | `boolean` | `false` | Disabled state |
 | `backgroundColor` | `string` | - | Override background colour |
 
+### Card
+
+React Native `View` + `Text`. Consumes tokens from `theme.component.card` and `theme.semantic`.
+
+```tsx
+import { Card, Button } from '@castui/cast-ui';
+
+<Card
+  title="Title"
+  subtitle="Subtitle"
+  body="Body"
+  actions={
+    <>
+      <Button label="Action 1" variant="filled" />
+      <Button label="Action 2" variant="outline" />
+    </>
+  }
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | required | Card heading text |
+| `subtitle` | `string` | - | Optional subtitle below the title |
+| `body` | `string` | - | Optional body text |
+| `actions` | `React.ReactNode` | - | Optional actions row (e.g. Button components) |
+
 ## Font Handling
 
 Components reference font families from the theme tokens. Font **loading** is the consumer's responsibility.
@@ -224,14 +264,41 @@ const url = googleFontsUrl('luxury');
 
 ### React Native / Expo
 
-Load fonts with `expo-font` before rendering:
+Load fonts with `expo-font` before rendering. On **Android**, each weight must
+be registered under a distinct name (the Expo Google Fonts convention) because
+Android cannot combine a generic `fontFamily` with a numeric `fontWeight` for
+custom fonts.
 
 ```ts
 import { useFonts } from 'expo-font';
-import { THEME_FONT_FAMILIES } from '@castui/cast-ui';
-// THEME_FONT_FAMILIES.luxury = ['Playfair Display', 'Cormorant Garamond']
+import {
+  Poppins_400Regular,
+  Poppins_500Medium,
+  Poppins_700Bold,
+} from '@expo-google-fonts/poppins';
+
+const [loaded] = useFonts({
+  Poppins: Poppins_400Regular,           // weight 400 → bare name
+  Poppins_500Medium: Poppins_500Medium,  // weight 500
+  Poppins_700Bold: Poppins_700Bold,      // weight 700
+});
 ```
 
+The naming convention is:
+
+| Weight | Registration Key |
+|--------|-----------------|
+| 400 | `"FontName"` |
+| 500 | `"FontName_500Medium"` |
+| 700 | `"FontName_700Bold"` |
+
+Components use `resolveFont()` internally so the correct font name is selected
+automatically on each platform:
+
+- **iOS / Web** — `{ fontFamily, fontWeight }` passed through unchanged.
+- **Android** — maps to the weight-specific registered name (e.g. `"Poppins_700Bold"`) and sets `fontWeight: 'normal'`.
+- **system-ui** — omits `fontFamily` (platform default) on all platforms.
+
 The **White Label** theme uses `system-ui` (platform default) and requires no font loading.
 
 | Theme | Fonts to Load |
@@ -241,6 +308,11 @@ The **White Label** theme uses `system-ui` (platform default) and requires no fo
 | Corporate | Inter, Merriweather |
 | Luxury | Playfair Display, Cormorant Garamond |
 
+> **Custom Themes:** The convention works for any font — register each weight
+> under `FontName`, `FontName_500Medium`, and `FontName_700Bold` and
+> `resolveFont()` will handle the rest. The `ANDROID_WEIGHT_SUFFIX` map is
+> exported if you need to build registration keys programmatically.
+
 ## Consumer Installation
 
 ```bash
@@ -258,6 +330,8 @@ import {
   consumer,
   corporate,
   luxury,
+  resolveFont,
+  ANDROID_WEIGHT_SUFFIX,
 } from '@castui/cast-ui';
 ```
 
@@ -297,15 +371,111 @@ The build script (`src/tokens/build.ts`) reads Figma-exported JSON from `design-
 5. Export the component and its types from `src/index.ts`
 6. If the component needs new design tokens, add them to all four `*.tokens.json` files and update `src/theme/types.ts`
 
+## Adoption Tracking
+
+Design system adoption is measured via [Zeroheight](https://zeroheight.com/). There are two sides to the setup: **this design system repo** and the **consumer app repos** that install it.
+
+### This repo (design system)
+
+The only command relevant here is `track-package`. It registers `@castui/cast-ui` and its current version with Zeroheight so the dashboard knows what the latest release is.
+
+This runs automatically on every push to `main` via the GitHub Actions workflow at `.github/workflows/adoption.yml`. You can also run it locally:
+
+```bash
+npm run zh:track-package
+```
+
+### Consumer app repos
+
+The adoption CLI is designed to be run **in the repositories that consume this design system**. These are the commands consumers (or their CI pipelines) should run:
+
+| Command | What it measures |
+|---------|-----------------|
+| `npx @zeroheight/adoption-cli analyze --component-usage` | Which Cast UI components are imported and how their props are used |
+| `npx @zeroheight/adoption-cli analyze --color-usage` | Hardcoded color values (`#hex`, `rgb()`, etc.) that should be replaced with theme tokens |
+| `npx @zeroheight/adoption-cli monitor-repo` | Which version of `@castui/cast-ui` the consumer app is on |
+
+**How color tracking works:** The `--color-usage` flag scans for *non-token* color values — raw hex, rgb, or hsl strings that a developer hardcoded instead of using `theme.semantic.color.*`. A high count means developers are bypassing the design system; a count trending to zero means strong token adoption. Running this in the design system repo itself correctly returns zero results because components only reference theme tokens, never hardcoded colours.
+
+### Consumer CI example
+
+Consumer teams can automate adoption reporting by adding a workflow to their repos:
+
+```yaml
+# .github/workflows/design-system-adoption.yml
+name: "Design System Adoption"
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  adoption:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 20
+      - run: npm ci
+      - name: Report adoption to Zeroheight
+        env:
+          ZEROHEIGHT_CLIENT_ID: ${{ secrets.ZEROHEIGHT_CLIENT_ID }}
+          ZEROHEIGHT_ACCESS_TOKEN: ${{ secrets.ZEROHEIGHT_ACCESS_TOKEN }}
+        run: |
+          npx @zeroheight/adoption-cli analyze --component-usage --interactive false -r "${{ github.repository }}"
+          npx @zeroheight/adoption-cli analyze --color-usage --interactive false -r "${{ github.repository }}"
+          npx @zeroheight/adoption-cli monitor-repo --interactive false
+```
+
+### Required secrets
+
+All Zeroheight CLI commands in CI require two repository secrets:
+
+| Secret | Description |
+|--------|-------------|
+| `ZEROHEIGHT_CLIENT_ID` | OAuth client ID from your Zeroheight account |
+| `ZEROHEIGHT_ACCESS_TOKEN` | Access token from your Zeroheight account |
+
+Generate these at **Zeroheight > Account Settings > Access Tokens**.
+
 ## npm Publishing
 
-The package is configured for public npm publishing:
+The publish workflow (`.github/workflows/publish.yml`) runs on every push to `main`. It **automatically checks** whether the `version` in `package.json` has changed compared to what's already on npm. If the version is the same, the workflow skips silently — no build, no publish. If the version is new, it builds and publishes.
+
+This means merging a PR to `main` does **not** automatically publish to npm. Only PRs that include a version bump in `package.json` will trigger a release.
+
+**To publish a new version:**
+
+1. Create a feature branch and make your changes
+2. Update the `version` field in `package.json` (e.g. `0.1.0` → `0.1.1`)
+3. Push the branch and open a PR to `main`
+4. Chromatic runs and creates status checks on the PR
+5. Review and accept any visual changes in the Chromatic UI
+6. Once Chromatic checks pass, merge the PR
+7. The publish workflow detects the new version, builds tokens + TypeScript, and publishes to npm
+
+**If you don't bump the version:** The PR merges normally, Chromatic still runs, but the publish step is skipped. Your code is on `main` but no new npm version is created. This is useful for documentation changes, CI updates, or batching multiple changes before a release.
+
+**If Chromatic changes are rejected:** Fix the code on your feature branch, push again. Chromatic re-runs with the new changes. Repeat until the visuals are right, then accept and merge.
+
+**Version numbering guide:**
+
+| Change type | Bump | Example |
+|-------------|------|---------|
+| Bug fix or minor tweak | Patch | `0.1.0` → `0.1.1` |
+| New component or feature | Minor | `0.1.0` → `0.2.0` |
+| Breaking API change | Major | `0.1.0` → `1.0.0` |
+
+**Package details:**
 
 - **Entry point:** `dist/index.js` (CJS) with `dist/index.d.ts` type declarations
 - **Included files:** `dist/`, `README.md`, `LICENSE`
 - **Peer dependencies:** `react` (>=18), `react-native` (>=0.72)
 - **License:** MIT
 
+You can still publish manually if needed:
+
 ```bash
 npm login
 npm publish
@@ -326,8 +496,34 @@ When adding new top-level files or directories, you must add a `!path` entry to
 | Workflow | Trigger | Purpose |
 |----------|---------|---------|
 | Chromatic (`.github/workflows/chromatic.yml`) | Every push | Visual regression testing via Storybook snapshots |
+| Adoption Tracking (`.github/workflows/adoption.yml`) | Push to `main` | Registers package version with Zeroheight |
+| Publish to npm (`.github/workflows/publish.yml`) | Push to `main` | Builds and publishes package to npm |
+
+**Required secrets:**
+
+| Secret | Used by |
+|--------|---------|
+| `CHROMATIC_PROJECT_TOKEN` | Chromatic workflow |
+| `ZEROHEIGHT_CLIENT_ID` | Adoption Tracking workflow |
+| `ZEROHEIGHT_ACCESS_TOKEN` | Adoption Tracking workflow |
+
+The Publish workflow authenticates to npm via **OpenID Connect (OIDC)** using npm's Trusted Publishers feature — no `NPM_TOKEN` secret is needed. The trust relationship is configured at [npmjs.com](https://www.npmjs.com/) under **Package Settings → Trusted Publishers**. The `--provenance` flag attaches a verified build attestation to each published version.
+
+### Branch Protection
+
+Branch protection on `main` ensures that **no code is merged without passing Chromatic visual checks**. This is what prevents unreviewed visual changes from being published to npm.
+
+**To set up (one-time, on GitHub):**
+
+1. Go to **Settings → Branches** in your repository
+2. Click **Add branch protection rule**
+3. Set **Branch name pattern** to `main`
+4. Enable **Require a pull request before merging**
+5. Enable **Require status checks to pass before merging**
+6. Search for and add **Run Chromatic** (GitHub Actions) and **UI Tests** (any source) as required checks
+7. Click **Save changes**
 
-**Required secrets:** `CHROMATIC_PROJECT_TOKEN` (repository secret).
+Once enabled, you can no longer push directly to `main`. All changes go through feature branches and PRs, with Chromatic as a mandatory gate.
 
 ## Dependencies
 

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAChE,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAMD;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAkB,EAClB,eAAe,EACf,QAAgB,EAChB,GAAG,cAAc,EAClB,EAAE,WAAW,2CA0Eb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAChE,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAMD;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAkB,EAClB,eAAe,EACf,QAAgB,EAChB,GAAG,cAAc,EAClB,EAAE,WAAW,2CAuEb"}

package/dist/components/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Pressable, Text, } from 'react-native';
-import { useTheme } from '../../theme';
+import { useTheme, resolveFont } from '../../theme';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -58,13 +58,11 @@ export function Button({ label, variant = 'filled', backgroundColor, disabled =
         }),
         opacity: disabled ? 0.6 : 1,
     };
-    const fontFamily = bt.fontFamily === 'system-ui' ? undefined : bt.fontFamily;
     const textStyle = {
         color: resolveContent(),
         fontSize: bt.textSize,
-        fontWeight: String(bt.fontWeight),
         lineHeight: bt.textSize * bt.lineHeight,
-        ...(fontFamily ? { fontFamily } : {}),
+        ...resolveFont(bt.fontFamily, bt.fontWeight),
     };
     return (_jsx(Pressable, { ...pressableProps, disabled: disabled, style: containerStyle, ...{
             onHoverIn: () => setHovered(true),

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/Card/Card.d.ts

@@ -2,17 +2,19 @@ import React from 'react';
 import { type ViewProps } from 'react-native';
 export interface CardProps extends Omit<ViewProps, 'style'> {
     /** Card title text. */
-    heading?: string;
-    /** Card body text. */
+    title: string;
+    /** Optional subtitle displayed below the title. */
+    subtitle?: string;
+    /** Optional body text. */
     body?: string;
-    /** Override card content with arbitrary children. */
-    children?: React.ReactNode;
+    /** Optional actions row (e.g. Button components). */
+    actions?: React.ReactNode;
 }
 /**
- * Themed container for grouping related content.
+ * Card container for grouping related content.
  *
- * Renders as a React Native `View` – works identically on iOS, Android,
- * and Web (via React Native Web).
+ * Renders as a React Native `View` with `Text` children – works identically
+ * on iOS, Android, and Web (via React Native Web).
  */
-export declare function Card({ heading, body, children, ...viewProps }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ title, subtitle, body, actions, ...viewProps }: CardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACzD,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,SAAS,2CAqDxE"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IACzD,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,GAAG,SAAS,EACb,EAAE,SAAS,2CA0DX"}

package/dist/components/Card/Card.js

@@ -1,53 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View, Text, } from 'react-native';
-import { useTheme } from '../../theme';
+import { useTheme, resolveFont } from '../../theme';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 /**
- * Themed container for grouping related content.
+ * Card container for grouping related content.
  *
- * Renders as a React Native `View` – works identically on iOS, Android,
- * and Web (via React Native Web).
+ * Renders as a React Native `View` with `Text` children – works identically
+ * on iOS, Android, and Web (via React Native Web).
  */
-export function Card({ heading, body, children, ...viewProps }) {
+export function Card({ title, subtitle, body, actions, ...viewProps }) {
     const theme = useTheme();
     const ct = theme.component.card;
-    // --- container styles ------------------------------------------------------
+    const sem = theme.semantic;
+    // --- build styles ----------------------------------------------------------
     const containerStyle = {
         padding: ct.padding,
         gap: ct.gap,
-        backgroundColor: ct.background,
         borderRadius: ct.cornerRadius,
+        backgroundColor: ct.background,
         borderWidth: ct.strokeWidth,
         borderColor: ct.stroke,
-        // Elevation / shadow
-        ...(ct.elevation > 0 && {
-            // iOS shadows
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: ct.elevation },
-            shadowOpacity: 0.08 * ct.elevation,
-            shadowRadius: ct.elevation * 2,
-            // Android elevation
-            elevation: ct.elevation,
-        }),
+        elevation: ct.elevation,
+        // Web shadow for elevation (React Native Web doesn't map elevation to CSS)
+        ...(ct.elevation > 0
+            ? { boxShadow: '0 1px 3px rgba(0,0,0,0.12)' }
+            : {}),
     };
-    // --- typography styles -----------------------------------------------------
-    const headingFontFamily = ct.headingFontFamily === 'system-ui' ? undefined : ct.headingFontFamily;
-    const bodyFontFamily = ct.bodyFontFamily === 'system-ui' ? undefined : ct.bodyFontFamily;
-    const headingStyle = {
+    const titleStyle = {
         fontSize: ct.headingSize,
-        fontWeight: String(ct.headingWeight),
-        color: theme.semantic.color.onSurface,
-        ...(headingFontFamily ? { fontFamily: headingFontFamily } : {}),
+        lineHeight: ct.headingSize * sem.lineHeight.body,
+        letterSpacing: sem.letterSpacing.heading,
+        color: sem.color.onSurface,
+        ...resolveFont(ct.headingFontFamily, ct.headingWeight),
+    };
+    const subtitleStyle = {
+        fontSize: sem.fontSize.small,
+        lineHeight: sem.fontSize.small * sem.lineHeight.body,
+        letterSpacing: sem.letterSpacing.body,
+        color: sem.color.onSurfaceMuted,
+        ...resolveFont(sem.fontFamily.interface, sem.fontWeight.body),
     };
     const bodyStyle = {
         fontSize: ct.bodySize,
-        fontWeight: String(ct.bodyWeight),
-        color: theme.semantic.color.onSurfaceMuted,
-        lineHeight: ct.bodySize * theme.semantic.lineHeight.body,
-        ...(bodyFontFamily ? { fontFamily: bodyFontFamily } : {}),
+        lineHeight: ct.bodySize * sem.lineHeight.body,
+        letterSpacing: sem.letterSpacing.body,
+        color: sem.color.onSurfaceMuted,
+        ...resolveFont(ct.bodyFontFamily, ct.bodyWeight),
+    };
+    const actionsStyle = {
+        flexDirection: 'row',
+        gap: ct.gap,
     };
-    return (_jsxs(View, { ...viewProps, style: containerStyle, children: [heading != null && _jsx(Text, { style: headingStyle, children: heading }), body != null && _jsx(Text, { style: bodyStyle, children: body }), children] }));
+    return (_jsxs(View, { ...viewProps, style: containerStyle, accessibilityRole: "summary", children: [_jsx(Text, { style: titleStyle, children: title }), subtitle ? _jsx(Text, { style: subtitleStyle, children: subtitle }) : null, body ? _jsx(Text, { style: bodyStyle, children: body }) : null, actions ? _jsx(View, { style: actionsStyle, children: actions }) : null] }));
 }
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,IAAI,EACJ,IAAI,GAIL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAevC,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E;;;;;GAKG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAa;IACvE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;IAEhC,8EAA8E;IAC9E,MAAM,cAAc,GAAc;QAChC,OAAO,EAAE,EAAE,CAAC,OAAO;QACnB,GAAG,EAAE,EAAE,CAAC,GAAG;QACX,eAAe,EAAE,EAAE,CAAC,UAAU;QAC9B,YAAY,EAAE,EAAE,CAAC,YAAY;QAC7B,WAAW,EAAE,EAAE,CAAC,WAAW;QAC3B,WAAW,EAAE,EAAE,CAAC,MAAM;QACtB,qBAAqB;QACrB,GAAG,CAAC,EAAE,CAAC,SAAS,GAAG,CAAC,IAAI;YACtB,cAAc;YACd,WAAW,EAAE,MAAM;YACnB,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,SAAS,EAAE;YAChD,aAAa,EAAE,IAAI,GAAG,EAAE,CAAC,SAAS;YAClC,YAAY,EAAE,EAAE,CAAC,SAAS,GAAG,CAAC;YAC9B,oBAAoB;YACpB,SAAS,EAAE,EAAE,CAAC,SAAS;SACxB,CAAC;KACH,CAAC;IAEF,8EAA8E;IAC9E,MAAM,iBAAiB,GACrB,EAAE,CAAC,iBAAiB,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,iBAAiB,CAAC;IAE1E,MAAM,cAAc,GAClB,EAAE,CAAC,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC;IAEpE,MAAM,YAAY,GAAc;QAC9B,QAAQ,EAAE,EAAE,CAAC,WAAW;QACxB,UAAU,EAAE,MAAM,CAAC,EAAE,CAAC,aAAa,CAA4B;QAC/D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,SAAS;QACrC,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAChE,CAAC;IAEF,MAAM,SAAS,GAAc;QAC3B,QAAQ,EAAE,EAAE,CAAC,QAAQ;QACrB,UAAU,EAAE,MAAM,CAAC,EAAE,CAAC,UAAU,CAA4B;QAC5D,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc;QAC1C,UAAU,EAAE,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI;QACxD,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC1D,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,KAAK,EAAE,cAAc,aACvC,OAAO,IAAI,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,YAAY,YAAG,OAAO,GAAQ,EAC9D,IAAI,IAAI,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAE,SAAS,YAAG,IAAI,GAAQ,EACrD,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export { CastThemeProvider, useTheme } from './theme';
 export type { CastThemeProviderProps } from './theme';
-export type { CastTheme, ThemeName, SemanticTokens, ComponentTokens, ButtonTokens, } from './theme';
-export { THEME_FONT_FAMILIES, googleFontsUrl } from './theme';
+export type { CastTheme, ThemeName, SemanticTokens, ComponentTokens, ButtonTokens, CardTokens, } from './theme';
+export { THEME_FONT_FAMILIES, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './theme';
 export { whiteLabel, consumer, corporate, luxury, } from './tokens/generated';
 export { Button } from './components/Button/Button';
 export type { ButtonProps, ButtonVariant } from './components/Button/Button';
+export { Card } from './components/Card/Card';
+export type { CardProps } from './components/Card/Card';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,GACb,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,UAAU,GACX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGlG,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE7E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -3,9 +3,10 @@
 // ---------------------------------------------------------------------------
 // Theme system
 export { CastThemeProvider, useTheme } from './theme';
-export { THEME_FONT_FAMILIES, googleFontsUrl } from './theme';
+export { THEME_FONT_FAMILIES, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './theme';
 // Theme objects
 export { whiteLabel, consumer, corporate, luxury, } from './tokens/generated';
 // Components
 export { Button } from './components/Button/Button';
+export { Card } from './components/Card/Card';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,kCAAkC;AAClC,8EAA8E;AAE9E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAStD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9D,gBAAgB;AAChB,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,oBAAoB,CAAC;AAE5B,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,kCAAkC;AAClC,8EAA8E;AAE9E,eAAe;AACf,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAUtD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAElG,gBAAgB;AAChB,OAAO,EACL,UAAU,EACV,QAAQ,EACR,SAAS,EACT,MAAM,GACP,MAAM,oBAAoB,CAAC;AAE5B,aAAa;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/theme/fonts.d.ts

@@ -17,7 +17,23 @@
  *
  * **Web / Storybook** – fonts are loaded via `<link>` tags in
  * `.storybook/preview-head.html`.  No runtime font loading is needed.
+ *
+ * ### Android font registration convention
+ *
+ * Android cannot combine a generic `fontFamily` with a numeric `fontWeight`
+ * for custom fonts — it silently falls back to the system font.  Instead,
+ * each weight must be registered under a distinct name that matches the Expo
+ * Google Fonts convention:
+ *
+ * | Weight | Registration key             |
+ * |--------|------------------------------|
+ * | 400    | `"FontName"`                 |
+ * | 500    | `"FontName_500Medium"`       |
+ * | 700    | `"FontName_700Bold"`         |
+ *
+ * Use {@link resolveFont} in component styles to transparently handle this.
  */
+import { type TextStyle } from 'react-native';
 import type { ThemeName } from './types';
 /**
  * Map of Google Fonts family names used by each theme.
@@ -30,4 +46,22 @@ export declare const THEME_FONT_FAMILIES: Record<ThemeName, string[]>;
  * Useful if you need to programmatically inject font links on the web.
  */
 export declare function googleFontsUrl(themeName: ThemeName): string | null;
+/**
+ * Suffix appended to a font family name on Android to select a specific
+ * weight.  Matches the Expo Google Fonts registration convention.
+ *
+ * Weight 400 maps to the bare family name (empty suffix).
+ */
+export declare const ANDROID_WEIGHT_SUFFIX: Record<number, string>;
+/**
+ * Return the correct `fontFamily` / `fontWeight` style props for the
+ * current platform.
+ *
+ * - **iOS / Web** — returns `{ fontFamily, fontWeight }` unchanged.
+ * - **Android** — maps to a weight-specific registered font name
+ *   (e.g. `"Poppins_700Bold"`) and resets `fontWeight` to `'normal'`.
+ * - **system-ui** — omits `fontFamily` entirely (platform default)
+ *   and passes `fontWeight` through on all platforms.
+ */
+export declare function resolveFont(fontFamily: string, fontWeight: number): Pick<TextStyle, 'fontFamily' | 'fontWeight'>;
 //# sourceMappingURL=fonts.d.ts.map

package/dist/theme/fonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,CAK3D,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,CASlE"}
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,CAK3D,CAAC;AAEF;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,GAAG,IAAI,CASlE;AAMD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAIxD,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CACzB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,YAAY,CAAC,CAmB9C"}

package/dist/theme/fonts.js

@@ -17,7 +17,23 @@
  *
  * **Web / Storybook** – fonts are loaded via `<link>` tags in
  * `.storybook/preview-head.html`.  No runtime font loading is needed.
+ *
+ * ### Android font registration convention
+ *
+ * Android cannot combine a generic `fontFamily` with a numeric `fontWeight`
+ * for custom fonts — it silently falls back to the system font.  Instead,
+ * each weight must be registered under a distinct name that matches the Expo
+ * Google Fonts convention:
+ *
+ * | Weight | Registration key             |
+ * |--------|------------------------------|
+ * | 400    | `"FontName"`                 |
+ * | 500    | `"FontName_500Medium"`       |
+ * | 700    | `"FontName_700Bold"`         |
+ *
+ * Use {@link resolveFont} in component styles to transparently handle this.
  */
+import { Platform } from 'react-native';
 /**
  * Map of Google Fonts family names used by each theme.
  * The `system-ui` entry means "use the platform default" and requires
@@ -42,4 +58,45 @@ export function googleFontsUrl(themeName) {
         .join('&');
     return `https://fonts.googleapis.com/css2?${params}&display=swap`;
 }
+// ---------------------------------------------------------------------------
+// Android font-weight resolution
+// ---------------------------------------------------------------------------
+/**
+ * Suffix appended to a font family name on Android to select a specific
+ * weight.  Matches the Expo Google Fonts registration convention.
+ *
+ * Weight 400 maps to the bare family name (empty suffix).
+ */
+export const ANDROID_WEIGHT_SUFFIX = {
+    400: '',
+    500: '_500Medium',
+    700: '_700Bold',
+};
+/**
+ * Return the correct `fontFamily` / `fontWeight` style props for the
+ * current platform.
+ *
+ * - **iOS / Web** — returns `{ fontFamily, fontWeight }` unchanged.
+ * - **Android** — maps to a weight-specific registered font name
+ *   (e.g. `"Poppins_700Bold"`) and resets `fontWeight` to `'normal'`.
+ * - **system-ui** — omits `fontFamily` entirely (platform default)
+ *   and passes `fontWeight` through on all platforms.
+ */
+export function resolveFont(fontFamily, fontWeight) {
+    const weight = String(fontWeight);
+    // system-ui → platform default; just pass through fontWeight
+    if (fontFamily === 'system-ui') {
+        return { fontWeight: weight };
+    }
+    // Android needs a weight-specific registered name
+    if (Platform.OS === 'android') {
+        const suffix = ANDROID_WEIGHT_SUFFIX[fontWeight] ?? '';
+        return {
+            fontFamily: `${fontFamily}${suffix}`,
+            fontWeight: 'normal',
+        };
+    }
+    // iOS / Web – pass through unchanged
+    return { fontFamily, fontWeight: weight };
+}
 //# sourceMappingURL=fonts.js.map

package/dist/theme/fonts.js.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgC;IAC9D,aAAa,EAAE,EAAE,EAA8C,iBAAiB;IAChF,QAAQ,EAAE,CAAC,SAAS,CAAC,EAA0C,iBAAiB;IAChF,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,EAA2B,wBAAwB;IACvF,MAAM,EAAE,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,EAAa,kBAAkB;CAClF,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,SAAoB;IACjD,MAAM,QAAQ,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAChD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvC,MAAM,MAAM,GAAG,QAAQ;SACpB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC;SAC9D,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,qCAAqC,MAAM,eAAe,CAAC;AACpE,CAAC"}
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../src/theme/fonts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAE,QAAQ,EAAkB,MAAM,cAAc,CAAC;AAGxD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgC;IAC9D,aAAa,EAAE,EAAE,EAA8C,iBAAiB;IAChF,QAAQ,EAAE,CAAC,SAAS,CAAC,EAA0C,iBAAiB;IAChF,SAAS,EAAE,CAAC,OAAO,EAAE,cAAc,CAAC,EAA2B,wBAAwB;IACvF,MAAM,EAAE,CAAC,kBAAkB,EAAE,oBAAoB,CAAC,EAAa,kBAAkB;CAClF,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,SAAoB;IACjD,MAAM,QAAQ,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IAChD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvC,MAAM,MAAM,GAAG,QAAQ;SACpB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC;SAC9D,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,qCAAqC,MAAM,eAAe,CAAC;AACpE,CAAC;AAED,8EAA8E;AAC9E,iCAAiC;AACjC,8EAA8E;AAE9E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA2B;IAC3D,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,YAAY;IACjB,GAAG,EAAE,UAAU;CAChB,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACzB,UAAkB,EAClB,UAAkB;IAElB,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAA4B,CAAC;IAE7D,6DAA6D;IAC7D,IAAI,UAAU,KAAK,WAAW,EAAE,CAAC;QAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAChC,CAAC;IAED,kDAAkD;IAClD,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC9B,MAAM,MAAM,GAAG,qBAAqB,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvD,OAAO;YACL,UAAU,EAAE,GAAG,UAAU,GAAG,MAAM,EAAE;YACpC,UAAU,EAAE,QAAQ;SACrB,CAAC;IACJ,CAAC;IAED,qCAAqC;IACrC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC;AAC5C,CAAC"}

package/dist/theme/index.d.ts

@@ -1,5 +1,5 @@
 export { CastThemeProvider, useTheme } from './ThemeProvider';
 export type { CastThemeProviderProps } from './ThemeProvider';
-export { THEME_FONT_FAMILIES, googleFontsUrl } from './fonts';
+export { THEME_FONT_FAMILIES, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './fonts';
 export type { CastTheme, ThemeName, SemanticTokens, SemanticColors, SemanticFontFamily, SemanticFontSize, SemanticFontWeight, SemanticLineHeight, SemanticLetterSpacing, SemanticParagraphSpacing, SemanticParagraphIndent, SemanticBorderRadius, ComponentTokens, ButtonTokens, ButtonVariantTokens, ButtonOutlineTokens, ButtonStateTokens, CardTokens, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9D,YAAY,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,GACX,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC9D,YAAY,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClG,YAAY,EACV,SAAS,EACT,SAAS,EACT,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EACf,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,GACX,MAAM,SAAS,CAAC"}

package/dist/theme/index.js

@@ -1,3 +1,3 @@
 export { CastThemeProvider, useTheme } from './ThemeProvider';
-export { THEME_FONT_FAMILIES, googleFontsUrl } from './fonts';
+export { THEME_FONT_FAMILIES, googleFontsUrl, resolveFont, ANDROID_WEIGHT_SUFFIX } from './fonts';
 //# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "0.1.0",
+  "version": "0.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",
@@ -17,7 +17,8 @@
     "build-storybook": "STORYBOOK_DISABLE_TELEMETRY=1 storybook build",
     "build": "npm run build:tokens && tsc --project tsconfig.build.json",
     "prepublishOnly": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "zh:track-package": "zh-adoption track-package"
   },
   "repository": {
     "type": "git",
@@ -32,7 +33,7 @@
     "cross-platform",
     "ui-components"
   ],
-  "author": "Connagh <connagh@live.com>",
+  "author": "Connagh <connagh@users.noreply.github.com>",
   "license": "MIT",
   "type": "commonjs",
   "bugs": {