@castui/cast-ui 4.1.1 → 4.2.1

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

@@ -0,0 +1,41 @@
+/**
+ * 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;

package/dist/components/Card/Card.js

@@ -0,0 +1,91 @@
+"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',
+    default: 'md',
+    large: 'lg',
+};
+/** Maps card size → body/subtitle typography scale */
+const BODY_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** shadow/lg — elevated card drop shadow */
+const SHADOW_WEB = {
+    boxShadow: '0px 10px 15px -3px rgba(0,0,0,0.08), 0px 4px 6px -4px rgba(0,0,0,0.04)',
+};
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.08,
+    shadowRadius: 15,
+    elevation: 8,
+};
+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 = 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 ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityLabel: accessibilityLabel, style: [
+            {
+                backgroundColor: surfaceTokens.overlay.bg,
+                borderRadius: tokens.borderRadius,
+                borderWidth: 1,
+                borderColor: surfaceTokens.overlay.border,
+                overflow: 'hidden',
+                ...(variant === 'elevated'
+                    ? react_native_1.Platform.OS === 'web'
+                        ? SHADOW_WEB
+                        : SHADOW_NATIVE
+                    : {}),
+            },
+            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 ? ((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 ? ((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 ? ((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 ? ((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 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            flexDirection: 'row',
+                            justifyContent: 'flex-end',
+                            alignItems: 'center',
+                            gap: sizeTokens.gap,
+                        }, children: actions })) : null] })] }));
+}

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

@@ -0,0 +1 @@
+export { Card, type CardProps, type CardSize, type CardVariant } from './Card';

package/dist/components/Card/index.js

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

@@ -0,0 +1,32 @@
+/**
+ * Checkbox — binary (or tri-state) choice control.
+ *
+ * Maps to the Figma <Checkbox> component (node 275:5919):
+ *   checked → false | true | indeterminate
+ *   size    → small | default | large
+ *   state   → default | hover | focus | disabled (interaction-driven)
+ *
+ * Indicator and icon sizes come from the density theme's `checkbox` tokens
+ * (sizes track the `size` prop; gap tracks density). Colours come from the
+ * active theme scheme's `checkbox` set + the focus-ring colour.
+ */
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type CheckboxSize = 'small' | 'default' | 'large';
+export type CheckboxChecked = boolean | 'indeterminate';
+export type CheckboxProps = {
+    /** Checked state — true, false, or 'indeterminate'. */
+    checked?: CheckboxChecked;
+    /** Change handler — receives the next boolean checked value. */
+    onChange?: (checked: boolean) => void;
+    /** Optional label rendered beside the indicator. */
+    children?: string;
+    /** Size variant — controls indicator + icon size. */
+    size?: CheckboxSize;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Style override for the outer row. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+};
+export declare function Checkbox({ checked, onChange, children, size, disabled, style, accessibilityLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = Checkbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Checkbox — binary (or tri-state) choice control.
+ *
+ * Maps to the Figma <Checkbox> component (node 275:5919):
+ *   checked → false | true | indeterminate
+ *   size    → small | default | large
+ *   state   → default | hover | focus | disabled (interaction-driven)
+ *
+ * Indicator and icon sizes come from the density theme's `checkbox` tokens
+ * (sizes track the `size` prop; gap tracks density). Colours come from the
+ * active theme scheme's `checkbox` set + the focus-ring colour.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Icon_1 = require("../Icon");
+const tokens_1 = require("../../tokens");
+/** Maps checkbox size → label typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+function Checkbox({ checked = false, onChange, children, size = 'default', disabled = false, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const checkboxColors = scheme.checkbox;
+    const tokens = components.checkbox;
+    const sizeTokens = tokens[size];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const isIndeterminate = checked === 'indeterminate';
+    const isChecked = checked === true;
+    const isOn = isChecked || isIndeterminate;
+    const handlePress = (0, react_1.useCallback)(() => {
+        if (!disabled)
+            onChange?.(!isChecked);
+    }, [disabled, onChange, isChecked]);
+    // Resolve indicator fill + border based on state.
+    // Priority: disabled > focus > (checked) > hover > default
+    let boxBg;
+    let boxBorderColor;
+    let boxBorderWidth;
+    if (disabled) {
+        boxBg = checkboxColors.box.disabled.bg;
+        boxBorderColor = checkboxColors.box.disabled.border;
+        boxBorderWidth = tokens_1.controlTokens.borderWidth;
+    }
+    else if (isOn) {
+        boxBg = checkboxColors.box.checked.bg;
+        boxBorderColor = isFocused
+            ? scheme.focusRing.color
+            : checkboxColors.box.checked.border;
+        boxBorderWidth = isFocused ? tokens.focusRingWidth : 0;
+    }
+    else {
+        boxBg = checkboxColors.box.uncheckedDefault.bg;
+        if (isFocused) {
+            boxBorderColor = scheme.focusRing.color;
+            boxBorderWidth = tokens.focusRingWidth;
+        }
+        else if (isHovered) {
+            boxBorderColor = checkboxColors.box.uncheckedHover.border;
+            boxBorderWidth = tokens_1.controlTokens.borderWidth;
+        }
+        else {
+            boxBorderColor = checkboxColors.box.uncheckedDefault.border;
+            boxBorderWidth = tokens_1.controlTokens.borderWidth;
+        }
+    }
+    const glyphColor = disabled
+        ? checkboxColors.icon.disabled
+        : checkboxColors.icon.default;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: handlePress, disabled: disabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), accessibilityRole: "checkbox", accessibilityLabel: accessibilityLabel || children, accessibilityState: {
+            checked: isIndeterminate ? 'mixed' : isChecked,
+            disabled,
+        }, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: tokens.gap,
+            },
+            style,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    width: sizeTokens.indicatorSize,
+                    height: sizeTokens.indicatorSize,
+                    borderRadius: tokens.borderRadius,
+                    backgroundColor: boxBg,
+                    borderWidth: boxBorderWidth,
+                    borderColor: boxBorderColor,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, children: isChecked ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: sizeTokens.iconSize, color: glyphColor })) : isIndeterminate ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "remove", size: sizeTokens.iconSize, color: glyphColor })) : null }), children ? ((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: disabled
+                        ? checkboxColors.label.disabled
+                        : checkboxColors.label.default,
+                }, selectable: false, children: children })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxChecked, } from './Checkbox';

package/dist/components/Checkbox/index.js

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

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Chip — compact, interactive pill for filters, selections, and tokens.
+ *
+ * Maps to the Figma <Chip> component (node 307:3479):
+ *   intent  → neutral | brand | danger
+ *   variant → outline (bordered) | subtle (tinted)
+ *   size    → small | default | large
+ *   state   → default | hover | active | disabled (interaction-driven)
+ *
+ * Spacing/icon sizes come from the density theme's `chip` tokens (padding/gap
+ * vary by size AND density; icon size tracks the `size` prop). Colours map
+ * directly onto the semantic intent system:
+ *   outline → intent default  (white/tinted bg + border)
+ *   subtle  → intent subtle   (transparent bg/border)
+ * The `selected` state renders the intent's active colours.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp, type GestureResponderEvent } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type ChipSize = 'small' | 'default' | 'large';
+export type ChipVariant = 'outline' | 'subtle';
+export type ChipProps = {
+    /** The chip label text. */
+    children: string;
+    /** Semantic intent — drives the colour scheme. */
+    intent?: IntentName;
+    /** Surface treatment — outline (bordered) or subtle (tinted). */
+    variant?: ChipVariant;
+    /** Size variant — controls padding, gap, and typography scale. */
+    size?: ChipSize;
+    /** Selected state — renders the intent's active colours. */
+    selected?: boolean;
+    /** Disables interaction and applies muted styling. */
+    disabled?: boolean;
+    /** Leading icon — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Press handler — makes the chip selectable. */
+    onPress?: (e: GestureResponderEvent) => void;
+    /** Remove handler — renders a trailing close button when provided. */
+    onRemove?: () => void;
+    /** Outer style — use for positioning (margin, flex, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+};
+export declare function Chip({ children, intent, variant, size, selected, disabled, leadingIcon, onPress, onRemove, style, accessibilityLabel, }: ChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Chip/Chip.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = Chip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Chip — compact, interactive pill for filters, selections, and tokens.
+ *
+ * Maps to the Figma <Chip> component (node 307:3479):
+ *   intent  → neutral | brand | danger
+ *   variant → outline (bordered) | subtle (tinted)
+ *   size    → small | default | large
+ *   state   → default | hover | active | disabled (interaction-driven)
+ *
+ * Spacing/icon sizes come from the density theme's `chip` tokens (padding/gap
+ * vary by size AND density; icon size tracks the `size` prop). Colours map
+ * directly onto the semantic intent system:
+ *   outline → intent default  (white/tinted bg + border)
+ *   subtle  → intent subtle   (transparent bg/border)
+ * The `selected` state renders the intent's active colours.
+ */
+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
+// ---------------------------------------------------------------------------
+/** Maps chip size → label typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Chip({ children, intent = 'neutral', variant = 'outline', size = 'default', selected = false, disabled = false, leadingIcon, onPress, onRemove, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const intentColors = scheme.intents;
+    const disabledColors = scheme.disabled;
+    const sizeTokens = components.chip[size];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const prominence = variant === 'outline' ? 'default' : 'subtle';
+    // Resolve colours. Priority: disabled > selected/pressed > hover > default
+    const resolveColors = (0, react_1.useCallback)((pressed) => {
+        if (disabled)
+            return disabledColors;
+        const states = intentColors[intent][prominence];
+        if (selected || pressed)
+            return states.active;
+        if (isHovered)
+            return states.hover;
+        return states.default;
+    }, [disabled, intent, prominence, selected, isHovered, intentColors, disabledColors]);
+    const isInteractive = !disabled && (onPress != null || onRemove != null);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onPress, disabled: disabled || onPress == null, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: onPress ? 'button' : 'text', accessibilityLabel: accessibilityLabel || children, accessibilityState: { disabled, selected }, style: style, children: ({ pressed }) => {
+            const colors = resolveColors(pressed && isInteractive);
+            const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: sizeTokens.iconSize, color: colors.fg })) : (leadingIcon);
+            return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    alignSelf: 'flex-start',
+                    gap: sizeTokens.gap,
+                    paddingHorizontal: sizeTokens.paddingX,
+                    paddingVertical: sizeTokens.paddingY,
+                    borderRadius: components.chip.borderRadius,
+                    borderWidth: tokens_1.controlTokens.borderWidth,
+                    borderColor: colors.border,
+                    backgroundColor: colors.bg,
+                }, children: [resolvedLeading ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, 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 }), onRemove ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: disabled ? undefined : onRemove, disabled: disabled, hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Remove ${children}`, style: { width: sizeTokens.iconSize, height: sizeTokens.iconSize }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: sizeTokens.iconSize, color: colors.fg }) })) : null] }));
+        } }));
+}

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

@@ -0,0 +1 @@
+export { Chip, type ChipProps, type ChipSize, type ChipVariant } from './Chip';

package/dist/components/Chip/index.js

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

package/dist/components/Dialog/Dialog.d.ts

@@ -54,4 +54,3 @@ export type DialogProps = DialogContentProps & {
  */
 export declare function DialogContent({ title: titleText, description, icon, size, children, primaryAction, secondaryAction, style, accessibilityLabel, }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
 export declare function Dialog({ open, onClose, ...contentProps }: DialogProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Dialog/Dialog.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, Pressable, View, Text, Platform, } from 'react-native';
-import { useTheme } from '../../theme';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import { fontFamily, fontWeight, title, body, surfaceTokens, textTokens, overlayTokens, controlTokens, } from '../../tokens';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContent = DialogContent;
+exports.Dialog = Dialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const Button_1 = require("../Button");
+const Icon_1 = require("../Icon");
+const tokens_1 = require("../../tokens");
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
@@ -48,57 +52,60 @@ const SHADOW_NATIVE = {
  * Use this for static display (e.g., Storybook visual stories)
  * or when building custom overlay implementations.
  */
-export function DialogContent({ title: titleText, description, icon, size = 'default', children, primaryAction, secondaryAction, style, accessibilityLabel, }) {
-    const { components, colors } = useTheme();
+function DialogContent({ title: titleText, description, icon, size = 'default', children, primaryAction, secondaryAction, style, accessibilityLabel, }) {
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const surfaceTokens = scheme.surface;
+    const textTokens = scheme.text;
     const sizeTokens = components.dialog[size];
-    const titleTokens = title[TYPO_SCALE[size]];
-    const bodyTokens = body[TYPO_SCALE[size]];
+    const titleTokens = tokens_1.title[TYPO_SCALE[size]];
+    const bodyTokens = tokens_1.body[TYPO_SCALE[size]];
     const buttonSize = BUTTON_SIZE[size];
     const fgColor = colors.neutral.default.default.fg;
-    const resolvedIcon = typeof icon === 'string' ? (_jsx(Icon, { name: icon, size: sizeTokens.iconSize, color: fgColor })) : (icon);
+    const resolvedIcon = typeof icon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: sizeTokens.iconSize, color: fgColor })) : (icon);
     const hasActions = primaryAction || secondaryAction;
-    return (_jsxs(View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || titleText, style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "alert", accessibilityLabel: accessibilityLabel || titleText, style: [
             {
                 width: DIALOG_WIDTH[size],
                 maxWidth: '100%',
                 backgroundColor: surfaceTokens.overlay.bg,
-                borderWidth: controlTokens.borderWidth,
+                borderWidth: tokens_1.controlTokens.borderWidth,
                 borderColor: surfaceTokens.overlay.border,
                 borderRadius: surfaceTokens.overlay.borderRadius,
                 padding: sizeTokens.padding,
                 gap: sizeTokens.gap,
-                ...(Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
             },
             style,
-        ], children: [_jsxs(View, { style: { gap: TITLE_DESC_GAP }, children: [_jsxs(View, { style: { gap: HEADER_ICON_GAP }, children: [resolvedIcon, _jsx(Text, { accessibilityRole: "header", style: {
-                                    fontFamily: fontFamily.sans,
-                                    fontWeight: fontWeight.medium,
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { gap: TITLE_DESC_GAP }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { gap: HEADER_ICON_GAP }, children: [resolvedIcon, (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "header", style: {
+                                    fontFamily: tokens_1.fontFamily.sans,
+                                    fontWeight: tokens_1.fontWeight.medium,
                                     fontSize: titleTokens.fontSize,
                                     lineHeight: titleTokens.lineHeight,
                                     letterSpacing: titleTokens.letterSpacing,
                                     color: fgColor,
-                                }, children: titleText })] }), description ? (_jsx(Text, { style: {
-                            fontFamily: fontFamily.sans,
-                            fontWeight: fontWeight.regular,
+                                }, children: titleText })] }), 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: textTokens.description,
-                        }, children: description })) : null] }), children, hasActions ? (_jsxs(View, { style: {
+                        }, children: description })) : null] }), children, hasActions ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                     flexDirection: 'row',
                     justifyContent: 'flex-end',
                     gap: sizeTokens.gap,
-                }, children: [secondaryAction ? (_jsx(Button, { intent: "neutral", prominence: "default", size: buttonSize, onPress: secondaryAction.onPress, children: secondaryAction.label })) : null, primaryAction ? (_jsx(Button, { intent: "brand", prominence: "bold", size: buttonSize, onPress: primaryAction.onPress, children: primaryAction.label })) : null] })) : null] }));
+                }, children: [secondaryAction ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { intent: "neutral", prominence: "default", size: buttonSize, onPress: secondaryAction.onPress, children: secondaryAction.label })) : null, primaryAction ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { intent: "brand", prominence: "bold", size: buttonSize, onPress: primaryAction.onPress, children: primaryAction.label })) : null] })) : null] }));
 }
 // ---------------------------------------------------------------------------
 // Dialog — full modal with backdrop
 // ---------------------------------------------------------------------------
-export function Dialog({ open, onClose, ...contentProps }) {
-    return (_jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose, children: _jsx(Pressable, { onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close dialog", style: {
+function Dialog({ open, onClose, ...contentProps }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const overlayTokens = scheme.overlay;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close dialog", style: {
                 flex: 1,
                 backgroundColor: `rgba(0, 0, 0, ${overlayTokens.scrimOpacity})`,
                 justifyContent: 'center',
                 alignItems: 'center',
-            }, children: _jsx(Pressable, { onPress: (e) => e.stopPropagation(), accessibilityRole: "none", style: { maxWidth: '90%' }, children: _jsx(DialogContent, { ...contentProps }) }) }) }));
+            }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: (e) => e.stopPropagation(), accessibilityRole: "none", style: { maxWidth: '90%' }, children: (0, jsx_runtime_1.jsx)(DialogContent, { ...contentProps }) }) }) }));
 }
-//# sourceMappingURL=Dialog.js.map

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

@@ -1,2 +1 @@
 export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './Dialog';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Dialog/index.js

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

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Divider — a thin rule separating content, horizontally or vertically.
+ *
+ * Maps to the Figma <Divider> component (node 307:3571):
+ *   orientation → horizontal | vertical
+ *
+ * The line uses the overlay border colour (surface/overlay/border) at the
+ * control border width (1px) — both constant across densities. A horizontal
+ * divider stretches to its container's width; a vertical divider stretches to
+ * its container's height (give the parent a defined cross-axis size).
+ */
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerProps = {
+    /** Line direction. */
+    orientation?: DividerOrientation;
+    /** Line colour — defaults to the overlay border token. */
+    color?: string;
+    /** Style override — e.g. margins or an explicit length. */
+    style?: StyleProp<ViewStyle>;
+};
+export declare function Divider({ orientation, color, style, }: DividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Divider/Divider.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = Divider;
+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");
+function Divider({ orientation = 'horizontal', color, style, }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const resolvedColor = color ?? scheme.surface.overlay.border;
+    const isVertical = orientation === 'vertical';
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: [
+            isVertical
+                ? { alignSelf: 'stretch', width: tokens_1.controlTokens.borderWidth }
+                : { alignSelf: 'stretch', height: tokens_1.controlTokens.borderWidth },
+            { backgroundColor: resolvedColor },
+            style,
+        ] }));
+}

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

@@ -0,0 +1 @@
+export { Divider, type DividerProps, type DividerOrientation } from './Divider';

package/dist/components/Divider/index.js

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