@castui/cast-ui 0.1.0 → 0.2.0

package/README.md

@@ -68,6 +68,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 +115,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
 
@@ -297,15 +300,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 +425,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/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,2CAsEX"}

package/dist/components/Card/Card.js

@@ -5,49 +5,60 @@ import { useTheme } 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,
+        lineHeight: ct.headingSize * sem.lineHeight.body,
+        letterSpacing: sem.letterSpacing.heading,
+        color: sem.color.onSurface,
         ...(headingFontFamily ? { fontFamily: headingFontFamily } : {}),
     };
+    const subtitleFontFamily = sem.fontFamily.interface === 'system-ui' ? undefined : sem.fontFamily.interface;
+    const subtitleStyle = {
+        fontSize: sem.fontSize.small,
+        fontWeight: String(sem.fontWeight.body),
+        lineHeight: sem.fontSize.small * sem.lineHeight.body,
+        letterSpacing: sem.letterSpacing.body,
+        color: sem.color.onSurfaceMuted,
+        ...(subtitleFontFamily ? { fontFamily: subtitleFontFamily } : {}),
+    };
+    const bodyFontFamily = ct.bodyFontFamily === 'system-ui' ? undefined : ct.bodyFontFamily;
     const bodyStyle = {
         fontSize: ct.bodySize,
         fontWeight: String(ct.bodyWeight),
-        color: theme.semantic.color.onSurfaceMuted,
-        lineHeight: ct.bodySize * theme.semantic.lineHeight.body,
+        lineHeight: ct.bodySize * sem.lineHeight.body,
+        letterSpacing: sem.letterSpacing.body,
+        color: sem.color.onSurfaceMuted,
         ...(bodyFontFamily ? { fontFamily: bodyFontFamily } : {}),
     };
-    return (_jsxs(View, { ...viewProps, style: containerStyle, children: [heading != null && _jsx(Text, { style: headingStyle, children: heading }), body != null && _jsx(Text, { style: bodyStyle, children: body }), children] }));
+    const actionsStyle = {
+        flexDirection: 'row',
+        gap: ct.gap,
+    };
+    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 type { CastTheme, ThemeName, SemanticTokens, ComponentTokens, ButtonTokens, CardTokens, } from './theme';
 export { THEME_FONT_FAMILIES, googleFontsUrl } 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,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;AAE7E,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -8,4 +8,5 @@ export { THEME_FONT_FAMILIES, googleFontsUrl } from './theme';
 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,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;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

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