@castui/cast-ui 4.1.1 → 4.2.0

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,41 @@
+/**
+ * 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;
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,UAAU,GAAG;IACvB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wEAAwE;IACxE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACvC,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAuBF,wBAAgB,KAAK,CAAC,EACpB,MAAkB,EAClB,IAAgB,EAChB,OAAkB,EAClB,KAAK,EAAE,SAAS,EAChB,WAAW,EACX,IAAI,EACJ,OAAO,EACP,KAAK,EACL,kBAAkB,GACnB,EAAE,UAAU,2CAqGZ"}

package/dist/components/Alert/Alert.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View, Text, } from 'react-native';
+import { useTheme } from '../../theme';
+import { Icon } from '../Icon';
+import { fontFamily, fontWeight, title, body, controlTokens, } from '../../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',
+};
+export function Alert({ intent = 'neutral', size = 'default', variant = 'subtle', title: titleText, description, icon, onClose, style, accessibilityLabel, }) {
+    const { components, scheme } = useTheme();
+    const intentColors = scheme.intents;
+    const tokens = components.alert;
+    const sizeTokens = tokens[size];
+    const titleTokens = title[TITLE_SCALE[size]];
+    const bodyTokens = 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 ? (_jsx(Icon, { name: DEFAULT_ICON[intent], size: sizeTokens.iconSize, color: fg })) : typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: fg })) : (icon);
+    return (_jsxs(View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || titleText, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: sizeTokens.gap,
+                padding: sizeTokens.padding,
+                borderRadius: tokens.borderRadius,
+                borderWidth: controlTokens.borderWidth,
+                borderColor,
+                backgroundColor: bg,
+            },
+            style,
+        ], children: [iconNode ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: iconNode })) : null, _jsxs(View, { style: { flex: 1 }, children: [titleText ? (_jsx(Text, { style: {
+                            fontFamily: fontFamily.sans,
+                            fontWeight: fontWeight.medium,
+                            fontSize: titleTokens.fontSize,
+                            lineHeight: titleTokens.lineHeight,
+                            letterSpacing: titleTokens.letterSpacing,
+                            color: fg,
+                        }, selectable: false, children: titleText })) : null, description ? (_jsx(Text, { style: {
+                            fontFamily: fontFamily.sans,
+                            fontWeight: fontWeight.regular,
+                            fontSize: bodyTokens.fontSize,
+                            lineHeight: bodyTokens.lineHeight,
+                            letterSpacing: bodyTokens.letterSpacing,
+                            color: fg,
+                        }, selectable: false, children: description })) : null] }), onClose ? (_jsx(Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: _jsx(Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
+}
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

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

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

@@ -0,0 +1,2 @@
+export { Alert, type AlertProps, type AlertSize, type AlertVariant, } from './Alert';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,KAAK,UAAU,EACf,KAAK,SAAS,EACd,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC"}

package/dist/components/Alert/index.js

@@ -0,0 +1,2 @@
+export { Alert, } from './Alert';
+//# sourceMappingURL=index.js.map

package/dist/components/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,GAIN,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,32 @@
+/**
+ * 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;
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,mEAAmE;IACnE,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mEAAmE;IACnE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AA0BF,wBAAgB,MAAM,CAAC,EACrB,IAAgB,EAChB,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,kBAAkB,GACnB,EAAE,WAAW,2CA4Db"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, Text, Image, } from 'react-native';
+import { useTheme } from '../../theme';
+import { fontFamily, fontWeight, label } from '../../tokens';
+import { Icon } from '../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';
+}
+export function Avatar({ size = 'default', source, initials, icon, style, accessibilityLabel, }) {
+    const { components, scheme } = useTheme();
+    const avatarColors = scheme.avatar;
+    const tokens = components.avatar;
+    const sizeTokens = tokens[size];
+    const labelTokens = 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 (_jsx(View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel || initials || 'Avatar', style: [frameStyle, style], children: type === 'image' ? (_jsx(Image, { source: source, resizeMode: "cover", style: { width: '100%', height: '100%' } })) : type === 'initials' ? (_jsx(Text, { selectable: false, style: {
+                fontFamily: fontFamily.sans,
+                fontWeight: fontWeight.medium,
+                fontSize: labelTokens.fontSize,
+                lineHeight: labelTokens.lineHeight,
+                letterSpacing: labelTokens.letterSpacing,
+                color: avatarColors.fg,
+                textAlign: 'center',
+            }, children: initials })) : (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", children: typeof icon === 'string' || icon == null ? (_jsx(Icon, { name: typeof icon === 'string' ? icon : FALLBACK_ICON, size: sizeTokens.iconSize, color: avatarColors.fg })) : (icon) })) }));
+}
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

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

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

@@ -0,0 +1,2 @@
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarType } from './Avatar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+//# sourceMappingURL=index.js.map

package/dist/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAsD,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,42 @@
+/**
+ * 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;
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB,4BAA4B;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,kFAAkF;IAClF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACxC,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AA2CF,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,MAAkB,EAClB,OAAiB,EACjB,IAAgB,EAChB,GAAW,EACX,WAAW,EACX,YAAY,EACZ,KAAK,EACL,kBAAkB,GACnB,EAAE,UAAU,2CAyFZ"}

package/dist/components/Badge/Badge.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, Text, } from 'react-native';
+import { useTheme } from '../../theme';
+import { fontFamily, fontWeight, label, controlTokens } from '../../tokens';
+import { Icon } from '../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;
+    }
+}
+export function Badge({ children, intent = 'neutral', variant = 'solid', size = 'default', dot = false, leadingIcon, trailingIcon, style, accessibilityLabel, }) {
+    const { components, scheme } = useTheme();
+    const sizeTokens = components.badge[size];
+    const labelTokens = label[LABEL_SCALE[size]];
+    const colors = resolveColors(intent, variant, scheme.intents);
+    const resolvedLeading = typeof leadingIcon === 'string' ? (_jsx(Icon, { name: leadingIcon, size: ICON_SIZE, color: colors.fg })) : (leadingIcon);
+    const resolvedTrailing = typeof trailingIcon === 'string' ? (_jsx(Icon, { name: trailingIcon, size: ICON_SIZE, color: colors.fg })) : (trailingIcon);
+    return (_jsxs(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: controlTokens.borderWidth,
+                borderColor: colors.border,
+                backgroundColor: colors.bg,
+            },
+            style,
+        ], children: [dot ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
+                    width: sizeTokens.dotSize,
+                    height: sizeTokens.dotSize,
+                    borderRadius: sizeTokens.dotSize / 2,
+                    backgroundColor: colors.fg,
+                } })) : null, resolvedLeading ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedLeading })) : null, _jsx(Text, { style: {
+                    fontFamily: fontFamily.sans,
+                    fontWeight: fontWeight.medium,
+                    fontSize: labelTokens.fontSize,
+                    lineHeight: labelTokens.lineHeight,
+                    letterSpacing: labelTokens.letterSpacing,
+                    color: colors.fg,
+                }, selectable: false, children: children }), resolvedTrailing ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }));
+}
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

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

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

@@ -0,0 +1,2 @@
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant } from './Badge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/Badge/index.js

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+//# sourceMappingURL=index.js.map

package/dist/components/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAsD,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,42 @@
+/**
+ * Card — surface container for grouped content with optional media, header,
+ * body, and actions.
+ *
+ * Maps to the Figma <Card> component (node 307:3346):
+ *   size    → small | default | large   (drives padding, gap, type scale)
+ *   variant → outline (1px border) | elevated (border + drop shadow)
+ *
+ * Each content slot mirrors a Figma boolean (hasImage / hasIcon / hasSubtitle
+ * / hasBody / hasActions): the slot renders only when its prop is provided.
+ * Padding + gap come from the density theme's `card` tokens (size × density).
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type CardSize = 'small' | 'default' | 'large';
+export type CardVariant = 'outline' | 'elevated';
+export type CardProps = {
+    /** Size variant — controls padding, gap, and typography scale. */
+    size?: CardSize;
+    /** Visual style — outline (border) or elevated (border + shadow). */
+    variant?: CardVariant;
+    /** Media area rendered at the top (e.g. an <Image>). */
+    image?: React.ReactNode;
+    /** Header leading icon — Material Symbols name string or a ReactNode. */
+    icon?: string | React.ReactNode;
+    /** Card title. */
+    title?: string;
+    /** Supporting subtitle below the title. */
+    subtitle?: string;
+    /** Body description text. */
+    body?: string;
+    /** Action row content (e.g. Buttons), right-aligned at the bottom. */
+    actions?: React.ReactNode;
+    /** Additional custom content rendered in the body, after `body`. */
+    children?: React.ReactNode;
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+};
+export declare function Card({ size, variant, image, icon, title: titleText, subtitle, body: bodyText, actions, children, style, accessibilityLabel, }: 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;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAEjD,MAAM,MAAM,SAAS,GAAG;IACtB,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,qEAAqE;IACrE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AA6BF,wBAAgB,IAAI,CAAC,EACnB,IAAgB,EAChB,OAAmB,EACnB,KAAK,EACL,IAAI,EACJ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,QAAQ,EACR,KAAK,EACL,kBAAkB,GACnB,EAAE,SAAS,2CAwIX"}