@castui/cast-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cast UI Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,352 @@
+# Cast UI
+
+A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support. Components are built with vanilla React Native primitives and themed via design tokens exported from Figma.
+
+## Architecture
+
+```
+Figma Variables (JSON)
+        |
+   Token Build Script          src/tokens/build.ts
+        |
+   TypeScript Theme Objects    src/tokens/generated/*.ts
+        |
+   ThemeProvider               React Context (src/theme/)
+        |
+   RN Components               Pressable, View, Text (src/components/)
+        |
+   +-----------+-----------+
+   |           |           |
+  iOS      Android       Web (via React Native Web)
+```
+
+**Token tiers** follow a three-layer alias chain. Changing a value at any tier cascades automatically:
+
+```
+Primitive  -->  Semantic  -->  Component
+
+Example:
+  Primitive.Colour.Blue-600
+    --> Semantic.Colour.Primary
+      --> Component.Button.Filled.Background
+```
+
+See [`design-tokens/DESIGN-TOKENS-SUMMARY.md`](design-tokens/DESIGN-TOKENS-SUMMARY.md) for the full token reference.
+
+## Project Structure
+
+```
+cast-ui/
+  src/
+    components/
+      Button/
+        Button.tsx              RN Pressable + Text, theme-aware
+        Button.stories.tsx      Storybook stories
+    theme/
+      types.ts                  CastTheme TypeScript interface
+      ThemeProvider.tsx          React Context provider + useTheme hook
+      fonts.ts                  Per-theme font family helpers
+      index.ts                  Barrel export
+    tokens/
+      build.ts                  Reads Figma JSON, generates TS theme objects
+      generated/                Auto-generated (gitignored)
+        white-label.ts
+        consumer.ts
+        corporate.ts
+        luxury.ts
+        index.ts
+    index.ts                    Public API
+  design-tokens/                Source of truth (Figma export)
+    White label.tokens.json     Default theme (system-ui, slate neutrals)
+    Consumer.tokens.json        Vibrant violet, Poppins
+    Corporate.tokens.json       Professional blue, Merriweather + Inter
+    Luxury.tokens.json          Dark gold, Playfair Display + Cormorant Garamond
+    DESIGN-TOKENS-SUMMARY.md    Complete token reference
+  .storybook/
+    main.ts                     Webpack config with react-native-web alias
+    preview.ts                  Theme switcher toolbar + decorator
+    preview-head.html           Google Fonts <link> tags
+  .github/workflows/
+    chromatic.yml               Visual regression testing on push
+  dist/                         Build output (gitignored)
+  tsconfig.json                 Development TypeScript config
+  tsconfig.build.json           Library build config (excludes stories)
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js >= 18
+- npm
+
+### Install Dependencies
+
+```bash
+npm install
+```
+
+### Build Tokens
+
+Generates TypeScript theme objects from the Figma JSON files in `design-tokens/`:
+
+```bash
+npm run build:tokens
+```
+
+This writes to `src/tokens/generated/` (gitignored). Runs automatically before Storybook and library builds.
+
+### Start Storybook
+
+```bash
+npm run storybook
+```
+
+Opens at `http://localhost:6006`. Use the paintbrush icon in the toolbar to switch between all four themes.
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run build:tokens` | Generate TypeScript theme files from Figma token JSON |
+| `npm run storybook` | Start Storybook dev server (auto-runs `build:tokens`) |
+| `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`) |
+
+## Themes
+
+Four themes share the same component API but produce completely different visual identities:
+
+| Theme | Primary Colour | Typography | Border Radius | Character |
+|-------|---------------|------------|---------------|-----------|
+| **White Label** (default) | Slate-900 | system-ui | Moderate (8px buttons) | Neutral, adaptable |
+| **Consumer** | Violet-600 | Poppins | Rounded (24px pill buttons) | Vibrant, friendly |
+| **Corporate** | Blue-600 | Merriweather + Inter | Crisp (4px buttons) | Professional, structured |
+| **Luxury** | Gold-400 on Black | Playfair Display + Cormorant Garamond | Zero (sharp edges) | Premium, elegant |
+
+When themes switch, **all of the following change simultaneously**: colour palette, font families, border radius, spacing rhythm, elevation, font weight, paragraph spacing, and paragraph indent.
+
+## Theme System
+
+### ThemeProvider
+
+Wrap your app in `CastThemeProvider`. Defaults to White Label:
+
+```tsx
+import { CastThemeProvider, consumer } from '@castui/cast-ui';
+
+export default function App() {
+  return (
+    <CastThemeProvider theme={consumer}>
+      {/* components here */}
+    </CastThemeProvider>
+  );
+}
+```
+
+### useTheme
+
+Access the current theme inside any component:
+
+```tsx
+import { useTheme } from '@castui/cast-ui';
+
+function MyComponent() {
+  const theme = useTheme();
+
+  return (
+    <View style={{ backgroundColor: theme.semantic.color.surface }}>
+      <Text style={{
+        color: theme.semantic.color.onSurface,
+        fontSize: theme.semantic.fontSize.body,
+      }}>
+        Themed text
+      </Text>
+    </View>
+  );
+}
+```
+
+### Theme Object Shape
+
+Every theme conforms to the `CastTheme` interface (see `src/theme/types.ts`):
+
+```
+theme.name                          'white-label' | 'consumer' | 'corporate' | 'luxury'
+theme.semantic.color.*              30 semantic colours (surface, primary, error, etc.)
+theme.semantic.fontFamily.*         brand, interface, data
+theme.semantic.fontSize.*           display, h1, h2, h3, body, small, button
+theme.semantic.fontWeight.*         heading, body, button
+theme.semantic.lineHeight.*         heading, body, uiLabel
+theme.semantic.letterSpacing.*      heading, body, label
+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)
+```
+
+## Components
+
+### Button
+
+React Native `Pressable` + `Text`. Consumes all tokens from `theme.component.button`.
+
+```tsx
+import { Button } from '@castui/cast-ui';
+
+<Button label="Get started" variant="filled" />
+<Button label="Learn more" variant="outline" />
+<Button label="Cancel" variant="text" disabled />
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | required | Button text |
+| `variant` | `'filled' \| 'outline' \| 'text'` | `'filled'` | Visual variant |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `backgroundColor` | `string` | - | Override background colour |
+
+## Font Handling
+
+Components reference font families from the theme tokens. Font **loading** is the consumer's responsibility.
+
+### Web
+
+Load fonts via a `<link>` tag or use the helper:
+
+```ts
+import { googleFontsUrl } from '@castui/cast-ui';
+
+const url = googleFontsUrl('luxury');
+// "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700&family=Cormorant+Garamond:wght@400;500;700&display=swap"
+```
+
+### React Native / Expo
+
+Load fonts with `expo-font` before rendering:
+
+```ts
+import { useFonts } from 'expo-font';
+import { THEME_FONT_FAMILIES } from '@castui/cast-ui';
+// THEME_FONT_FAMILIES.luxury = ['Playfair Display', 'Cormorant Garamond']
+```
+
+The **White Label** theme uses `system-ui` (platform default) and requires no font loading.
+
+| Theme | Fonts to Load |
+|-------|---------------|
+| White Label | None (system default) |
+| Consumer | Poppins |
+| Corporate | Inter, Merriweather |
+| Luxury | Playfair Display, Cormorant Garamond |
+
+## Consumer Installation
+
+```bash
+npm install @castui/cast-ui
+```
+
+Peer dependencies: `react` (>=18), `react-native` (>=0.72).
+
+```tsx
+import {
+  CastThemeProvider,
+  useTheme,
+  Button,
+  whiteLabel,
+  consumer,
+  corporate,
+  luxury,
+} from '@castui/cast-ui';
+```
+
+## Storybook
+
+Storybook runs React Native components in the browser via React Native Web. The webpack config in `.storybook/main.ts` aliases `react-native` to `react-native-web`.
+
+### Theme Switcher
+
+The toolbar provides a paintbrush dropdown to switch between all four themes live. This is configured via `globalTypes` and a decorator in `.storybook/preview.ts` that wraps every story in `CastThemeProvider`.
+
+### Chromatic
+
+Visual regression testing runs on every push via the GitHub Actions workflow at `.github/workflows/chromatic.yml`. Requires a `CHROMATIC_PROJECT_TOKEN` repository secret.
+
+## Token Build Pipeline
+
+The build script (`src/tokens/build.ts`) reads Figma-exported JSON from `design-tokens/` and generates fully-resolved TypeScript theme objects.
+
+**What it does:**
+
+1. Reads each `*.tokens.json` file
+2. Recursively resolves all `{Primitive.Colour.Slate-900}` style alias references through the three-tier chain
+3. Extracts hex values from Figma's colour object format (`{ colorSpace, components, hex }`)
+4. Outputs typed TypeScript files to `src/tokens/generated/`
+
+**When to re-run:** After updating any `design-tokens/*.tokens.json` file. The script runs automatically before Storybook and library builds.
+
+**Adding a new theme:** Add a new `.tokens.json` file to `design-tokens/`, add an entry to the `THEMES` array in `src/tokens/build.ts`, add the theme name to the `ThemeName` union in `src/theme/types.ts`, and update the toolbar items in `.storybook/preview.ts`.
+
+## Adding a New Component
+
+1. Create `src/components/ComponentName/ComponentName.tsx`
+2. Import `useTheme` and consume tokens from the theme object
+3. Use only React Native primitives (`View`, `Text`, `Pressable`, `ScrollView`, etc.)
+4. Create `ComponentName.stories.tsx` alongside the component
+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`
+
+## npm Publishing
+
+The package is configured for public npm publishing:
+
+- **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
+
+```bash
+npm login
+npm publish
+```
+
+The `prepublishOnly` hook runs the full build automatically.
+
+## Security
+
+This repository uses a **whitelist-based `.gitignore`**. Everything is ignored by default (`*`), and only explicitly allowed paths are tracked. This prevents accidental exposure of secrets, logs, or environment files.
+
+**Never tracked:** `.env`, `.env.*`, `*.log`, `*.local`, `.DS_Store`, `dist/`, `src/tokens/generated/`, `storybook-static/`.
+
+When adding new top-level files or directories, you must add a `!path` entry to `.gitignore` for them to be tracked by git.
+
+## CI/CD
+
+| Workflow | Trigger | Purpose |
+|----------|---------|---------|
+| Chromatic (`.github/workflows/chromatic.yml`) | Every push | Visual regression testing via Storybook snapshots |
+
+**Required secrets:** `CHROMATIC_PROJECT_TOKEN` (repository secret).
+
+## Dependencies
+
+### Runtime (peer)
+
+| Package | Version | Purpose |
+|---------|---------|---------|
+| `react` | >=18 | React core |
+| `react-native` | >=0.72 | Cross-platform UI primitives |
+
+### Development only
+
+| Package | Purpose |
+|---------|---------|
+| `react-native-web` | Renders RN components in browser for Storybook |
+| `@storybook/react-webpack5` | Storybook framework |
+| `chromatic` | Visual regression testing |
+| `style-dictionary` | Installed for future token transforms (current build uses custom script) |
+| `ts-node` | Runs the TypeScript token build script |
+| `typescript` | Type checking and compilation |
+
+None of the dev dependencies ship to consumers.

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

@@ -0,0 +1,18 @@
+import { type PressableProps } from 'react-native';
+export type ButtonVariant = 'filled' | 'outline' | 'text';
+export interface ButtonProps extends Omit<PressableProps, 'style'> {
+    /** Button label text. */
+    label: string;
+    /** Visual variant. @default 'filled' */
+    variant?: ButtonVariant;
+    /** Override background color. */
+    backgroundColor?: string;
+}
+/**
+ * Primary UI component for user interaction.
+ *
+ * Renders as a React Native `Pressable` with `Text` – works identically
+ * on iOS, Android, and Web (via React Native Web).
+ */
+export declare function Button({ label, variant, backgroundColor, disabled, ...pressableProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Button/Button.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pressable, Text, } from 'react-native';
+import { useTheme } from '../../theme';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Primary UI component for user interaction.
+ *
+ * Renders as a React Native `Pressable` with `Text` – works identically
+ * on iOS, Android, and Web (via React Native Web).
+ */
+export function Button({ label, variant = 'filled', backgroundColor, disabled = false, ...pressableProps }) {
+    const theme = useTheme();
+    const bt = theme.component.button;
+    const [hovered, setHovered] = useState(false);
+    // --- resolve colours per variant + state -----------------------------------
+    const resolveBackground = () => {
+        if (disabled)
+            return bt.state.disabledBackground;
+        if (backgroundColor)
+            return backgroundColor;
+        const variantTokens = bt[variant];
+        const base = variantTokens.background;
+        if (hovered)
+            return bt.state.hoverBackground;
+        return base;
+    };
+    const resolveContent = () => {
+        if (disabled)
+            return bt.state.disabledContent;
+        return bt[variant].content;
+    };
+    const resolveBorder = () => {
+        if (variant !== 'outline')
+            return undefined;
+        if (disabled)
+            return bt.state.disabledContent;
+        return bt.outline.border;
+    };
+    // --- build styles ----------------------------------------------------------
+    const containerStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: bt.gap,
+        paddingHorizontal: bt.paddingHorizontal,
+        paddingVertical: bt.paddingVertical,
+        borderRadius: bt.cornerRadius,
+        backgroundColor: resolveBackground(),
+        ...(variant === 'outline' && {
+            borderWidth: bt.borderWidth,
+            borderColor: resolveBorder(),
+        }),
+        ...(variant === 'text' && {
+            backgroundColor: 'transparent',
+        }),
+        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 } : {}),
+    };
+    return (_jsx(Pressable, { ...pressableProps, disabled: disabled, style: containerStyle, ...{
+            onHoverIn: () => setHovered(true),
+            onHoverOut: () => setHovered(false),
+        }, accessibilityRole: "button", children: _jsx(Text, { style: textStyle, children: label }) }));
+}
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,18 @@
+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. */
+    body?: string;
+    /** Override card content with arbitrary children. */
+    children?: React.ReactNode;
+}
+/**
+ * Themed container for grouping related content.
+ *
+ * Renders as a React Native `View` – 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;
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Card/Card.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, } from 'react-native';
+import { useTheme } from '../../theme';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Themed container for grouping related content.
+ *
+ * Renders as a React Native `View` – works identically on iOS, Android,
+ * and Web (via React Native Web).
+ */
+export function Card({ heading, body, children, ...viewProps }) {
+    const theme = useTheme();
+    const ct = theme.component.card;
+    // --- container styles ------------------------------------------------------
+    const containerStyle = {
+        padding: ct.padding,
+        gap: ct.gap,
+        backgroundColor: ct.background,
+        borderRadius: ct.cornerRadius,
+        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,
+        }),
+    };
+    // --- typography styles -----------------------------------------------------
+    const headingFontFamily = ct.headingFontFamily === 'system-ui' ? undefined : ct.headingFontFamily;
+    const bodyFontFamily = ct.bodyFontFamily === 'system-ui' ? undefined : ct.bodyFontFamily;
+    const headingStyle = {
+        fontSize: ct.headingSize,
+        fontWeight: String(ct.headingWeight),
+        color: theme.semantic.color.onSurface,
+        ...(headingFontFamily ? { fontFamily: headingFontFamily } : {}),
+    };
+    const bodyStyle = {
+        fontSize: ct.bodySize,
+        fontWeight: String(ct.bodyWeight),
+        color: theme.semantic.color.onSurfaceMuted,
+        lineHeight: ct.bodySize * theme.semantic.lineHeight.body,
+        ...(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] }));
+}
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+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 { whiteLabel, consumer, corporate, luxury, } from './tokens/generated';
+export { Button } from './components/Button/Button';
+export type { ButtonProps, ButtonVariant } from './components/Button/Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,11 @@
+// ---------------------------------------------------------------------------
+// Cast Design System – Public API
+// ---------------------------------------------------------------------------
+// Theme system
+export { CastThemeProvider, useTheme } from './theme';
+export { THEME_FONT_FAMILIES, googleFontsUrl } from './theme';
+// Theme objects
+export { whiteLabel, consumer, corporate, luxury, } from './tokens/generated';
+// Components
+export { Button } from './components/Button/Button';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { CastTheme } from './types';
+export interface CastThemeProviderProps {
+    /** The theme object to provide. Defaults to White Label. */
+    theme?: CastTheme;
+    children: React.ReactNode;
+}
+/**
+ * Wraps the component tree with the selected Cast theme.
+ *
+ * ```tsx
+ * import { CastThemeProvider } from '@castui/cast-ui';
+ * import { consumer } from '@castui/cast-ui/tokens/generated';
+ *
+ * <CastThemeProvider theme={consumer}>
+ *   <App />
+ * </CastThemeProvider>
+ * ```
+ */
+export declare function CastThemeProvider({ theme, children, }: CastThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the current Cast theme object.
+ *
+ * Must be called inside an `<CastThemeProvider>`.
+ *
+ * ```tsx
+ * const theme = useTheme();
+ * <View style={{ backgroundColor: theme.semantic.color.surface }} />
+ * ```
+ */
+export declare function useTheme(): CastTheme;
+//# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAazC,MAAM,WAAW,sBAAsB;IACrC,4DAA4D;IAC5D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAkB,EAClB,QAAQ,GACT,EAAE,sBAAsB,2CAIxB;AAMD;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,IAAI,SAAS,CAEpC"}

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { whiteLabel } from '../tokens/generated';
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+const ThemeContext = createContext(whiteLabel);
+/**
+ * Wraps the component tree with the selected Cast theme.
+ *
+ * ```tsx
+ * import { CastThemeProvider } from '@castui/cast-ui';
+ * import { consumer } from '@castui/cast-ui/tokens/generated';
+ *
+ * <CastThemeProvider theme={consumer}>
+ *   <App />
+ * </CastThemeProvider>
+ * ```
+ */
+export function CastThemeProvider({ theme = whiteLabel, children, }) {
+    return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
+}
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+/**
+ * Returns the current Cast theme object.
+ *
+ * Must be called inside an `<CastThemeProvider>`.
+ *
+ * ```tsx
+ * const theme = useTheme();
+ * <View style={{ backgroundColor: theme.semantic.color.surface }} />
+ * ```
+ */
+export function useTheme() {
+    return useContext(ThemeContext);
+}
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,YAAY,GAAG,aAAa,CAAY,UAAU,CAAC,CAAC;AAY1D;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,KAAK,GAAG,UAAU,EAClB,QAAQ,GACe;IACvB,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAyB,CACxE,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E;;;;;;;;;GASG;AACH,MAAM,UAAU,QAAQ;IACtB,OAAO,UAAU,CAAC,YAAY,CAAC,CAAC;AAClC,CAAC"}