@castui/cast-ui 4.1.1 → 4.2.1

package/README.md

@@ -1,8 +1,14 @@
 # Cast UI
 
-A cross-platform component library for React Native (iOS, Android, Web).
+A cross-platform component library for React Native. One set of components
+that works on iOS, Android, and the web.
 
-> Components are currently being built. Check back soon.
+Every colour, size, and spacing value in Cast UI comes from design tokens
+kept in sync with the
+[cast-ui-kit Figma file](https://www.figma.com/design/JGtlpxLPJMZcwvQ3UZ9ZUl/cast-ui-kit),
+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.
 
 ## Installation
 
@@ -10,36 +16,140 @@ A cross-platform component library for React Native (iOS, Android, Web).
 npm install @castui/cast-ui
 ```
 
-**Peer dependencies:** `react` (>=18), `react-native` (>=0.72)
+**Peer dependencies:** `react` (>=18) and `react-native` (>=0.72). Nothing
+else is installed alongside the package.
+
+```tsx
+import { ThemeProvider, Button } from '@castui/cast-ui';
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <Button intent="brand" prominence="bold" onPress={save}>
+        Save changes
+      </Button>
+    </ThemeProvider>
+  );
+}
+```
 
-## Development
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| **Alert** | Inline message with neutral, brand, and danger intents, an intent-matched icon, and optional close button |
+| **Avatar** | User representation as an image, initials, or icon |
+| **Badge** | Compact pill for labels, counts, and status, with optional status dot |
+| **Button** | Action button with three intents, three prominences, and icon support |
+| **Card** | Content container with optional image, icon, and actions |
+| **Checkbox** | Form control with checked, unchecked, and indeterminate states |
+| **Chip** | Compact element for filters, selections, and tags |
+| **Dialog** | Modal overlay for confirmations, alerts, and focused tasks |
+| **Divider** | Horizontal or vertical separator line |
+| **Icon** | Material Symbols Outlined icon, rendered via font ligatures |
+| **Input** | Single-line text field with label, helper text, and error state |
+| **List** | Item list with selection, icons, subheaders, and dividers |
+| **Popover** | Anchored floating panel for contextual content |
+| **Radio** | Single-choice control, with `RadioGroup` for managing a set |
+| **Select** | Dropdown with single, multi (tag pills), and combobox (search) modes |
+| **Skeleton** | Loading placeholder in text, circle, and rectangle shapes |
+| **Toast** | Brief notification with icon and optional close button |
+| **Toggle** | On/off switch with label |
+| **Tooltip** | Short hint shown on hover or focus |
+
+Components share a common prop vocabulary, mirrored from the Figma kit:
+
+- `intent` — what it means: `neutral`, `brand`, or `danger`
+- `prominence` — how visually heavy it is: `default` (outlined), `bold`
+  (filled), or `subtle` (ghost)
+- `size` — `small`, `default`, or `large`
+
+## Customising
+
+Wrap your app in `ThemeProvider`. It controls three independent settings:
+
+**Density** — how tight or roomy spacing feels: `compact`, `default`, or
+`comfortable`. Changing it scales padding and spacing across every component
+at once. Colours and typography never change with density, so your brand
+looks the same at any setting.
+
+```tsx
+<ThemeProvider density="compact">
+```
 
-### Prerequisites
+**Colour mode** — `light` or `dark`. Switches every colour in the library:
+buttons, surfaces, text, and form controls.
 
-- Node.js >= 18
-- npm
+```tsx
+import { useColorScheme } from 'react-native';
 
-### Install Dependencies
+const scheme = useColorScheme();
+<ThemeProvider colorMode={scheme === 'dark' ? 'dark' : 'light'}>
+```
 
-```bash
-npm install
+**Colour overrides** — pass a `colors` prop to use your own brand colours.
+You only write the colours you want to change; everything else keeps its
+default:
+
+```tsx
+<ThemeProvider
+  colors={{
+    brand: {
+      bold: {
+        default: { bg: '#7C3AED', fg: '#FFFFFF', border: '#7C3AED' },
+      },
+    },
+  }}
+>
 ```
 
-### Start Storybook
+ThemeProviders can be nested — for example, a compact data table inside a
+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.
 
-```bash
-npm run storybook
+The full guide lives in Storybook under **Guides → Customisation**.
+
+## Theming from Figma — the cast-sync plugin
+
+[`cast-sync/`](./cast-sync) is a Figma plugin that turns the Figma file's
+colour variables into a theme file for this package. Run it inside the Cast
+Design System file and it shows a preview, then downloads a
+`cast-theme.json` you pass straight to `ThemeProvider`:
+
+```tsx
+import theme from './cast-theme.json';
+
+<ThemeProvider colorMode="light" colors={theme.colors.light}>
 ```
 
-Opens at `http://localhost:6006`.
+The workflow: recolour the variables in Figma → run the plugin → swap in the
+new file. No code changes. Setup instructions are in
+[cast-sync/README.md](./cast-sync/README.md).
 
-### Build
+## How the tokens work
 
-```bash
-npm run build
+Cast UI's values come from three layers of design tokens:
+
+```
+Component tokens     button.default.paddingX = 14      → changes with density
+Semantic tokens      intent/brand/bold/default/bg      → changes with colour mode
+Primitive tokens     blue/600 = #2563EB                → the raw palette
 ```
 
-## Scripts
+The raw token JSON exported from Figma lives in
+[`design-tokens/`](./design-tokens). The library ships a lean TypeScript
+version of the same values, so nothing is parsed at runtime.
+
+## Development
+
+Requires Node.js >= 18.
+
+```bash
+npm install
+npm run storybook    # component workshop at http://localhost:6006
+npm run build        # compile to dist/
+```
 
 | Script | Description |
 |--------|-------------|
@@ -53,7 +163,7 @@ npm run build
 |----------|---------|---------|
 | Chromatic | Every push | Visual regression testing via Storybook snapshots |
 | Adoption Tracking | Push to `main` | Registers package version with Zeroheight |
-| Publish to npm | Push to `main` | Builds and publishes package to npm (only if version changed) |
+| Publish to npm | Push to `main` | Builds and publishes to npm (only when the version changes) |
 
 ## License
 

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Alert — inline message banner for notes, info, and errors.
+ *
+ * Maps to the Figma <Alert> component (node 307:3283):
+ *   intent  → neutral | brand | danger  (drives colour)
+ *   size    → small | default | large   (drives padding, gap, type scale)
+ *   variant → subtle (no fill/border) | outline (white fill + intent border)
+ *
+ * Padding + gap come from the density theme's `alert` tokens (size × density).
+ * Icon/close sizes track the `size` prop. Colours reuse the intent system.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type AlertSize = 'small' | 'default' | 'large';
+export type AlertVariant = 'subtle' | 'outline';
+export type AlertProps = {
+    /** Semantic intent — drives colour scheme. */
+    intent?: IntentName;
+    /** Size variant — controls padding, gap, and typography scale. */
+    size?: AlertSize;
+    /** Visual style — subtle (no fill) or outline (white fill + border). */
+    variant?: AlertVariant;
+    /** Bold title line. */
+    title?: string;
+    /** Supporting description text. */
+    description?: string;
+    /**
+     * Leading icon — Material Symbols name string or a ReactNode.
+     * Pass `null` to hide. Defaults to an intent-appropriate symbol.
+     */
+    icon?: string | React.ReactNode | null;
+    /** When provided, renders a close button that calls this handler. */
+    onClose?: () => void;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the title text. */
+    accessibilityLabel?: string;
+};
+export declare function Alert({ intent, size, variant, title: titleText, description, icon, onClose, style, accessibilityLabel, }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = Alert;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Icon_1 = require("../Icon");
+const tokens_1 = require("../../tokens");
+/** Maps alert size → title typography scale */
+const TITLE_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Maps alert size → body (description) typography scale */
+const BODY_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Default leading icon per intent */
+const DEFAULT_ICON = {
+    neutral: 'info',
+    brand: 'info',
+    danger: 'error',
+};
+function Alert({ intent = 'neutral', size = 'default', variant = 'subtle', title: titleText, description, icon, onClose, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const intentColors = scheme.intents;
+    const tokens = components.alert;
+    const sizeTokens = tokens[size];
+    const titleTokens = tokens_1.title[TITLE_SCALE[size]];
+    const bodyTokens = tokens_1.body[BODY_SCALE[size]];
+    // Colours derive from the intent system. Outline uses the white fill +
+    // intent border; subtle is transparent. Foreground is the intent fg.
+    const intentClr = intentColors[intent].default.default;
+    const bg = variant === 'outline' ? intentClr.bg : 'transparent';
+    const borderColor = variant === 'outline' ? intentClr.border : 'transparent';
+    const fg = intentClr.fg;
+    // Resolve leading icon — undefined uses the intent default, null hides it.
+    const iconNode = icon === null
+        ? null
+        : icon === undefined ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: DEFAULT_ICON[intent], size: sizeTokens.iconSize, color: fg })) : typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: sizeTokens.iconSize, color: fg })) : (icon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || titleText, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: sizeTokens.gap,
+                padding: sizeTokens.padding,
+                borderRadius: tokens.borderRadius,
+                borderWidth: tokens_1.controlTokens.borderWidth,
+                borderColor,
+                backgroundColor: bg,
+            },
+            style,
+        ], children: [iconNode ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: iconNode })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [titleText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.medium,
+                            fontSize: titleTokens.fontSize,
+                            lineHeight: titleTokens.lineHeight,
+                            letterSpacing: titleTokens.letterSpacing,
+                            color: fg,
+                        }, selectable: false, children: titleText })) : null, description ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.regular,
+                            fontSize: bodyTokens.fontSize,
+                            lineHeight: bodyTokens.lineHeight,
+                            letterSpacing: bodyTokens.letterSpacing,
+                            color: fg,
+                        }, selectable: false, children: description })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
+}

package/dist/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export { Alert, type AlertProps, type AlertSize, type AlertVariant, } from './Alert';

package/dist/components/Alert/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+var Alert_1 = require("./Alert");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Avatar — a circular representation of a user or entity.
+ *
+ * Maps to the Figma <Avatar> component (node 307:4153):
+ *   size → small | default | large   (drives diameter, glyph + initials scale)
+ *   type → image | initials | icon   (inferred from the props you pass)
+ *
+ * The frame diameter comes from the `avatar` density theme (size × density);
+ * the circle radius is constant (full pill). Initials use the label scale
+ * matched to the size; the icon glyph and initials colour are the neutral
+ * foreground. Image avatars fill the frame and have no background.
+ */
+import React from 'react';
+import { type ImageSourcePropType, type ViewStyle, type StyleProp } from 'react-native';
+export type AvatarSize = 'small' | 'default' | 'large';
+export type AvatarType = 'image' | 'initials' | 'icon';
+export type AvatarProps = {
+    /** Size variant — controls diameter, initials, and glyph scale. */
+    size?: AvatarSize;
+    /** Image source — when set, renders an image avatar filling the frame. */
+    source?: ImageSourcePropType;
+    /** Initials to display (e.g. "AB"). Used when no `source` is provided. */
+    initials?: string;
+    /** Fallback icon — Material Symbols name string or a ReactNode. */
+    icon?: string | React.ReactNode;
+    /** Outer style — use for positioning (margin, flex, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to initials, else "Avatar". */
+    accessibilityLabel?: string;
+};
+export declare function Avatar({ size, source, initials, icon, style, accessibilityLabel, }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = Avatar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Icon_1 = require("../Icon");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps avatar size → initials typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Default fallback glyph when no source/initials/icon is supplied. */
+const FALLBACK_ICON = 'person';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function resolveType(props) {
+    if (props.source)
+        return 'image';
+    if (props.initials)
+        return 'initials';
+    return 'icon';
+}
+function Avatar({ size = 'default', source, initials, icon, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const avatarColors = scheme.avatar;
+    const tokens = components.avatar;
+    const sizeTokens = tokens[size];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
+    const type = resolveType({ source, initials, icon });
+    const frameStyle = {
+        width: sizeTokens.size,
+        height: sizeTokens.size,
+        borderRadius: tokens.borderRadius,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        backgroundColor: type === 'image' ? undefined : avatarColors.bg,
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel || initials || 'Avatar', style: [frameStyle, style], children: type === 'image' ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: source, resizeMode: "cover", style: { width: '100%', height: '100%' } })) : type === 'initials' ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { selectable: false, style: {
+                fontFamily: tokens_1.fontFamily.sans,
+                fontWeight: tokens_1.fontWeight.medium,
+                fontSize: labelTokens.fontSize,
+                lineHeight: labelTokens.lineHeight,
+                letterSpacing: labelTokens.letterSpacing,
+                color: avatarColors.fg,
+                textAlign: 'center',
+            }, children: initials })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", children: typeof icon === 'string' || icon == null ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: typeof icon === 'string' ? icon : FALLBACK_ICON, size: sizeTokens.iconSize, color: avatarColors.fg })) : (icon) })) }));
+}

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarType } from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Badge — a compact pill for labels, counts, and status indicators.
+ *
+ * Maps to the Figma <Badge> component (node 307:3354):
+ *   intent  → neutral | brand | danger   (Figma "default" === neutral)
+ *   variant → solid | subtle | outline   (Figma surface treatment)
+ *   size    → small | default | large    (Figma "neutral" === default)
+ *
+ * Spacing/sizing comes from the `badge` theme tokens (keyed by size; constant
+ * across density). Colours map directly onto the semantic intent system:
+ *   solid   → intent bold     (filled, white text)
+ *   subtle  → intent subtle   (transparent fill, coloured text)
+ *   outline → intent bold border + intent default text (transparent fill)
+ * Typography uses the label scale (sm/md/lg) matched to the badge size.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type BadgeSize = 'small' | 'default' | 'large';
+export type BadgeVariant = 'solid' | 'subtle' | 'outline';
+export type BadgeProps = {
+    /** The badge label text. */
+    children: string;
+    /** Semantic intent — drives the colour scheme. */
+    intent?: IntentName;
+    /** Surface treatment — solid (filled), subtle (tinted), or outline (bordered). */
+    variant?: BadgeVariant;
+    /** Size variant — controls padding, gap, and typography scale. */
+    size?: BadgeSize;
+    /** Shows a leading status dot in the foreground colour. */
+    dot?: boolean;
+    /** Icon before the label — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Icon after the label — Material Symbols name string or a ReactNode. */
+    trailingIcon?: string | React.ReactNode;
+    /** Outer style — use for positioning (margin, flex, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to children text if not provided. */
+    accessibilityLabel?: string;
+};
+export declare function Badge({ children, intent, variant, size, dot, leadingIcon, trailingIcon, style, accessibilityLabel, }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Icon_1 = require("../Icon");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps badge size → label typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Icon size — fixed at 16px, matched to the label baseline. */
+const ICON_SIZE = 16;
+function resolveColors(intent, variant, intentColors) {
+    const clrs = intentColors[intent];
+    switch (variant) {
+        case 'subtle':
+            return clrs.subtle.default;
+        case 'outline':
+            return {
+                bg: 'transparent',
+                fg: clrs.default.default.fg,
+                border: clrs.bold.default.border,
+            };
+        case 'solid':
+        default:
+            return clrs.bold.default;
+    }
+}
+function Badge({ children, intent = 'neutral', variant = 'solid', size = 'default', dot = false, leadingIcon, trailingIcon, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const sizeTokens = components.badge[size];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
+    const colors = resolveColors(intent, variant, scheme.intents);
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: colors.fg })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: colors.fg })) : (trailingIcon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "text", accessibilityLabel: accessibilityLabel || children, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                alignSelf: 'flex-start',
+                gap: sizeTokens.gap,
+                paddingHorizontal: sizeTokens.paddingX,
+                paddingVertical: sizeTokens.paddingY,
+                borderRadius: components.badge.borderRadius,
+                borderWidth: tokens_1.controlTokens.borderWidth,
+                borderColor: colors.border,
+                backgroundColor: colors.bg,
+            },
+            style,
+        ], children: [dot ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
+                    width: sizeTokens.dotSize,
+                    height: sizeTokens.dotSize,
+                    borderRadius: sizeTokens.dotSize / 2,
+                    backgroundColor: colors.fg,
+                } })) : null, resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                    fontFamily: tokens_1.fontFamily.sans,
+                    fontWeight: tokens_1.fontWeight.medium,
+                    fontSize: labelTokens.fontSize,
+                    lineHeight: labelTokens.lineHeight,
+                    letterSpacing: labelTokens.letterSpacing,
+                    color: colors.fg,
+                }, selectable: false, children: children }), resolvedTrailing ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }));
+}

package/dist/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant } from './Badge';

package/dist/components/Badge/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+var Badge_1 = require("./Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });

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

@@ -37,4 +37,3 @@ export type ButtonProps = {
     accessibilityLabel?: string;
 };
 export declare function Button({ children, intent, prominence, size, disabled, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.js

@@ -1,4 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Button — the foundational interactive component of Cast UI.
  *
@@ -11,11 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Colours come from the semantic intent system (constant across densities).
  * Typography uses the label scale (sm/md/lg) matched to the button size.
  */
-import { useState, useCallback } from 'react';
-import { Pressable, Text, View, } from 'react-native';
-import { useTheme } from '../../theme';
-import { fontFamily, fontWeight, label, controlTokens } from '../../tokens';
-import { Icon } from '../Icon';
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Icon_1 = require("../Icon");
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -30,15 +33,15 @@ const ICON_SIZE = 16;
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function Button({ children, intent = 'neutral', prominence = 'default', size = 'default', disabled = false, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }) {
-    const { components, colors } = useTheme();
-    const [isHovered, setIsHovered] = useState(false);
+function Button({ children, intent = 'neutral', prominence = 'default', size = 'default', disabled = false, leadingIcon, trailingIcon, onPress, style, accessibilityLabel, }) {
+    const { components, colors } = (0, theme_1.useTheme)();
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     // Resolve tokens for current size + density
     const sizeTokens = components.button[size];
-    const labelTokens = label[LABEL_SCALE[size]];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
     const intentClrs = colors[intent];
     // Resolve colours based on interaction state
-    const getStateColors = useCallback((pressed, hovered) => {
+    const getStateColors = (0, react_1.useCallback)((pressed, hovered) => {
         if (disabled) {
             return {
                 bg: '#F3F4F6',
@@ -52,7 +55,7 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
             return intentClrs[prominence].hover;
         return intentClrs[prominence].default;
     }, [disabled, intentClrs, prominence]);
-    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled }, style: style, children: ({ pressed }) => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled }, style: style, children: ({ pressed }) => {
             const stateColors = getStateColors(pressed, isHovered);
             const containerStyle = {
                 flexDirection: 'row',
@@ -63,16 +66,16 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
                 paddingHorizontal: sizeTokens.paddingX,
                 paddingVertical: sizeTokens.paddingY,
                 borderRadius: sizeTokens.borderRadius,
-                borderWidth: controlTokens.borderWidth,
+                borderWidth: tokens_1.controlTokens.borderWidth,
                 borderColor: stateColors.border,
                 backgroundColor: stateColors.bg,
             };
             // Resolve icon props — strings become <Icon> with auto-matched colour
-            const resolvedLeading = typeof leadingIcon === 'string' ? (_jsx(Icon, { name: leadingIcon, size: ICON_SIZE, color: stateColors.fg })) : (leadingIcon);
-            const resolvedTrailing = typeof trailingIcon === 'string' ? (_jsx(Icon, { name: trailingIcon, size: ICON_SIZE, color: stateColors.fg })) : (trailingIcon);
-            return (_jsxs(View, { style: containerStyle, children: [resolvedLeading, _jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.medium,
+            const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: ICON_SIZE, color: stateColors.fg })) : (leadingIcon);
+            const resolvedTrailing = typeof trailingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: trailingIcon, size: ICON_SIZE, color: stateColors.fg })) : (trailingIcon);
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: containerStyle, children: [resolvedLeading, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            fontFamily: tokens_1.fontFamily.sans,
+                            fontWeight: tokens_1.fontWeight.medium,
                             fontSize: labelTokens.fontSize,
                             lineHeight: labelTokens.lineHeight,
                             letterSpacing: labelTokens.letterSpacing,
@@ -80,4 +83,3 @@ export function Button({ children, intent = 'neutral', prominence = 'default', s
                         }, selectable: false, children: children }), resolvedTrailing] }));
         } }));
 }
-//# sourceMappingURL=Button.js.map

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

@@ -1,2 +1 @@
 export { Button, type ButtonProps, type ButtonSize } from './Button';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.js

@@ -1,2 +1,5 @@
-export { Button } from './Button';
-//# sourceMappingURL=index.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var Button_1 = require("./Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });