@castui/cast-ui 4.2.0 → 4.2.2

package/README.md

@@ -10,6 +10,9 @@ 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.
 
+Browse every component live in the
+[hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com).
+
 ## Installation
 
 ```bash
@@ -33,6 +36,45 @@ export function App() {
 }
 ```
 
+## Fonts
+
+Cast UI ships no font files. Typography asks for **Inter** and the Icon
+component asks for **Material Symbols Outlined** — if a font isn't loaded
+there is no error: text quietly falls back to the system font, and icons
+render as their literal names ("star" instead of the glyph). Load both once
+at app start-up.
+
+**Expo (iOS, Android, and web)** — one `useFonts` call covers all three
+platforms:
+
+```tsx
+import { useFonts } from 'expo-font';
+
+const [fontsLoaded] = useFonts({
+  Inter: require('./assets/Inter.ttf'),
+  MaterialSymbolsOutlined: require('./assets/MaterialSymbolsOutlined.ttf'),
+});
+```
+
+**Plain web** — add the Google Fonts stylesheets to your HTML head:
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap" rel="stylesheet" />
+```
+
+**Bare React Native** — link the `.ttf` files as font assets
+(`react-native.config.js` + `npx react-native-asset`), keeping the family
+names `Inter` and `MaterialSymbolsOutlined`.
+
+Download both from Google Fonts:
+[Inter](https://fonts.google.com/specimen/Inter) and
+[Material Symbols](https://fonts.google.com/icons). The Material Symbols
+variable font is ~10 MB — fine for web, where it's served from a CDN and
+cached, but worth slimming for production native builds by subsetting it to
+the icons you use (e.g. `pyftsubset` from
+[fonttools](https://github.com/fonttools/fonttools)).
+
 ## Components
 
 | Component | Description |
@@ -108,7 +150,9 @@ 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.
 
-The full guide lives in Storybook under **Guides → Customisation**.
+The full guide lives in the
+[hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com)
+under **Guides → Customisation**.
 
 ## Theming from Figma — the cast-sync plugin
 

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

@@ -38,4 +38,3 @@ export type AlertProps = {
     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.js

@@ -1,8 +1,11 @@
-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';
+"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',
@@ -21,13 +24,13 @@ const DEFAULT_ICON = {
     brand: 'info',
     danger: 'error',
 };
-export function Alert({ intent = 'neutral', size = 'default', variant = 'subtle', title: titleText, description, icon, onClose, style, accessibilityLabel, }) {
-    const { components, scheme } = useTheme();
+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 = title[TITLE_SCALE[size]];
-    const bodyTokens = body[BODY_SCALE[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;
@@ -37,33 +40,32 @@ export function Alert({ intent = 'neutral', size = 'default', variant = 'subtle'
     // 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: [
+        : 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: controlTokens.borderWidth,
+                borderWidth: tokens_1.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,
+        ], 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 ? (_jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.regular,
+                        }, 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 ? (_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] }));
+                        }, 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] }));
 }
-//# sourceMappingURL=Alert.js.map

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

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

package/dist/components/Alert/index.js

@@ -1,2 +1,5 @@
-export { Alert, } from './Alert';
-//# sourceMappingURL=index.js.map
+"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

@@ -29,4 +29,3 @@ export type AvatarProps = {
     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.js

@@ -1,8 +1,11 @@
-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';
+"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
 // ---------------------------------------------------------------------------
@@ -24,12 +27,12 @@ function resolveType(props) {
         return 'initials';
     return 'icon';
 }
-export function Avatar({ size = 'default', source, initials, icon, style, accessibilityLabel, }) {
-    const { components, scheme } = useTheme();
+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 = label[LABEL_SCALE[size]];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
     const type = resolveType({ source, initials, icon });
     const frameStyle = {
         width: sizeTokens.size,
@@ -40,14 +43,13 @@ export function Avatar({ size = 'default', source, initials, icon, style, access
         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,
+    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 })) : (_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) })) }));
+            }, 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) })) }));
 }
-//# sourceMappingURL=Avatar.js.map

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

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

package/dist/components/Avatar/index.js

@@ -1,2 +1,5 @@
-export { Avatar } from './Avatar';
-//# sourceMappingURL=index.js.map
+"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

@@ -39,4 +39,3 @@ export type BadgeProps = {
     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.js

@@ -1,8 +1,11 @@
-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';
+"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
 // ---------------------------------------------------------------------------
@@ -30,14 +33,14 @@ function resolveColors(intent, variant, intentColors) {
             return clrs.bold.default;
     }
 }
-export function Badge({ children, intent = 'neutral', variant = 'solid', size = 'default', dot = false, leadingIcon, trailingIcon, style, accessibilityLabel, }) {
-    const { components, scheme } = useTheme();
+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 = label[LABEL_SCALE[size]];
+    const labelTokens = tokens_1.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: [
+    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',
@@ -47,23 +50,22 @@ export function Badge({ children, intent = 'neutral', variant = 'solid', size =
                 paddingHorizontal: sizeTokens.paddingX,
                 paddingVertical: sizeTokens.paddingY,
                 borderRadius: components.badge.borderRadius,
-                borderWidth: controlTokens.borderWidth,
+                borderWidth: tokens_1.controlTokens.borderWidth,
                 borderColor: colors.border,
                 backgroundColor: colors.bg,
             },
             style,
-        ], children: [dot ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", 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 ? (_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,
+                } })) : 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 ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: ICON_SIZE, height: ICON_SIZE }, children: resolvedTrailing })) : null] }));
+                }, 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] }));
 }
-//# sourceMappingURL=Badge.js.map

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

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

package/dist/components/Badge/index.js

@@ -1,2 +1,5 @@
-export { Badge } from './Badge';
-//# sourceMappingURL=index.js.map
+"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; } });

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

@@ -39,4 +39,3 @@ export type CardProps = {
     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.js

@@ -1,8 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { View, Text, Platform, } from 'react-native';
-import { useTheme } from '../../theme';
-import { Icon } from '../Icon';
-import { fontFamily, fontWeight, title, body, } from '../../tokens';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = Card;
+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 card size → title typography scale */
 const TITLE_SCALE = {
     small: 'sm',
@@ -26,18 +29,18 @@ const SHADOW_NATIVE = {
     shadowRadius: 15,
     elevation: 8,
 };
-export function Card({ size = 'default', variant = 'outline', image, icon, title: titleText, subtitle, body: bodyText, actions, children, style, accessibilityLabel, }) {
-    const { components, scheme } = useTheme();
+function Card({ size = 'default', variant = 'outline', image, icon, title: titleText, subtitle, body: bodyText, actions, children, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
     const surfaceTokens = scheme.surface;
     const textTokens = scheme.text;
     const TITLE_FG = scheme.intents.neutral.default.default.fg;
     const tokens = components.card;
     const sizeTokens = tokens[size];
-    const titleTokens = title[TITLE_SCALE[size]];
-    const bodyTokens = body[BODY_SCALE[size]];
-    const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: TITLE_FG })) : (icon);
+    const titleTokens = tokens_1.title[TITLE_SCALE[size]];
+    const bodyTokens = tokens_1.body[BODY_SCALE[size]];
+    const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: sizeTokens.iconSize, color: TITLE_FG })) : (icon);
     const hasHeader = !!(resolvedIcon || titleText || subtitle);
-    return (_jsxs(View, { accessibilityLabel: accessibilityLabel, style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel, style: [
             {
                 backgroundColor: surfaceTokens.overlay.bg,
                 borderRadius: tokens.borderRadius,
@@ -45,45 +48,44 @@ export function Card({ size = 'default', variant = 'outline', image, icon, title
                 borderColor: surfaceTokens.overlay.border,
                 overflow: 'hidden',
                 ...(variant === 'elevated'
-                    ? Platform.OS === 'web'
+                    ? react_native_1.Platform.OS === 'web'
                         ? SHADOW_WEB
                         : SHADOW_NATIVE
                     : {}),
             },
             style,
-        ], children: [image ? (_jsx(View, { style: { height: sizeTokens.imageHeight, width: '100%' }, children: image })) : null, _jsxs(View, { style: { padding: sizeTokens.padding, gap: sizeTokens.gap }, children: [hasHeader ? (_jsxs(View, { style: {
+        ], children: [image ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { height: sizeTokens.imageHeight, width: '100%' }, children: image })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { padding: sizeTokens.padding, gap: sizeTokens.gap }, children: [hasHeader ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                             flexDirection: 'row',
                             alignItems: 'flex-start',
                             gap: sizeTokens.gap,
-                        }, children: [resolvedIcon ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
+                        }, children: [resolvedIcon ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: {
                                     width: sizeTokens.iconSize,
                                     height: sizeTokens.iconSize,
-                                }, children: resolvedIcon })) : null, titleText || subtitle ? (_jsxs(View, { style: { flex: 1 }, children: [titleText ? (_jsx(Text, { style: {
-                                            fontFamily: fontFamily.sans,
-                                            fontWeight: fontWeight.medium,
+                                }, children: resolvedIcon })) : null, titleText || subtitle ? ((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: TITLE_FG,
-                                        }, selectable: false, children: titleText })) : null, subtitle ? (_jsx(Text, { style: {
-                                            fontFamily: fontFamily.sans,
-                                            fontWeight: fontWeight.regular,
+                                        }, selectable: false, children: titleText })) : null, subtitle ? ((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: textTokens.description,
-                                        }, selectable: false, children: subtitle })) : null] })) : null] })) : null, bodyText ? (_jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.regular,
+                                        }, selectable: false, children: subtitle })) : null] })) : null] })) : null, bodyText ? ((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: textTokens.description,
-                        }, selectable: false, children: bodyText })) : null, children, actions ? (_jsx(View, { style: {
+                        }, selectable: false, children: bodyText })) : null, children, actions ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                             flexDirection: 'row',
                             justifyContent: 'flex-end',
                             alignItems: 'center',
                             gap: sizeTokens.gap,
                         }, children: actions })) : null] })] }));
 }
-//# sourceMappingURL=Card.js.map

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

@@ -1,2 +1 @@
 export { Card, type CardProps, type CardSize, type CardVariant } from './Card';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Card/index.js

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -30,4 +30,3 @@ export type CheckboxProps = {
     accessibilityLabel?: string;
 };
 export declare function Checkbox({ checked, onChange, children, size, disabled, style, accessibilityLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Checkbox.d.ts.map