@castui/cast-ui 4.1.1 → 4.2.1

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Skeleton — a placeholder block shown while content loads.
+ *
+ * Maps to the Figma <Skeleton> component (node 307:4191):
+ *   shape → text | circle | rectangle
+ *
+ * Each shape sets a sensible default size and corner radius (text: 12×120,
+ * 4px radius; circle: 40×40, full radius; rectangle: 80×120, 8px radius). Pass
+ * `width`/`height`/`radius` to override. The fill is the cool-grey/100 surface;
+ * a subtle opacity pulse runs by default and can be disabled with `animated`.
+ *
+ * Sizing is intentionally constant across densities — skeletons mirror the
+ * layout of the real content they stand in for.
+ */
+import { type ViewStyle, type StyleProp, type DimensionValue } from 'react-native';
+export type SkeletonShape = 'text' | 'circle' | 'rectangle';
+export type SkeletonProps = {
+    /** Shape preset — sets default size and corner radius. */
+    shape?: SkeletonShape;
+    /** Width override (number of px or a percentage string). */
+    width?: DimensionValue;
+    /** Height override (number of px or a percentage string). */
+    height?: DimensionValue;
+    /** Corner radius override. */
+    radius?: number;
+    /** Run the opacity pulse animation. Defaults to true. */
+    animated?: boolean;
+    /** Outer style — use for positioning (margin, flex, alignSelf). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. Defaults to "Loading". */
+    accessibilityLabel?: string;
+};
+export declare function Skeleton({ shape, width, height, radius, animated, style, accessibilityLabel, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Skeleton — a placeholder block shown while content loads.
+ *
+ * Maps to the Figma <Skeleton> component (node 307:4191):
+ *   shape → text | circle | rectangle
+ *
+ * Each shape sets a sensible default size and corner radius (text: 12×120,
+ * 4px radius; circle: 40×40, full radius; rectangle: 80×120, 8px radius). Pass
+ * `width`/`height`/`radius` to override. The fill is the cool-grey/100 surface;
+ * a subtle opacity pulse runs by default and can be disabled with `animated`.
+ *
+ * Sizing is intentionally constant across densities — skeletons mirror the
+ * layout of the real content they stand in for.
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+/** Default size + corner radius per shape (radius/2, surface/overlay/radius, radius/full). */
+const SHAPE_DEFAULTS = {
+    text: { width: 120, height: 12, radius: 4 },
+    circle: { width: 40, height: 40, radius: 9999 },
+    rectangle: { width: 120, height: 80, radius: 8 },
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Skeleton({ shape = 'text', width, height, radius, animated = true, style, accessibilityLabel = 'Loading', }) {
+    const { scheme } = (0, theme_1.useTheme)();
+    const skeletonColors = scheme.skeleton;
+    const defaults = SHAPE_DEFAULTS[shape];
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        if (!animated) {
+            opacity.setValue(1);
+            return;
+        }
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(opacity, {
+                toValue: 0.5,
+                duration: 700,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: 700,
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [animated, opacity]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel, style: [
+            {
+                width: width ?? defaults.width,
+                height: height ?? defaults.height,
+                borderRadius: radius ?? defaults.radius,
+                backgroundColor: skeletonColors.bg,
+                opacity,
+            },
+            style,
+        ] }));
+}

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

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps, type SkeletonShape } from './Skeleton';

package/dist/components/Skeleton/index.js

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Toast — transient notification surface with title, description, and dismiss.
+ *
+ * Maps to the Figma <Toast> component (node 307:3478):
+ *   intent → neutral | brand | danger   (colours the icon + text)
+ *   size   → small | default | large
+ *
+ * Padding/gap come from the density theme's `toast` tokens (vary by size AND
+ * density); icon/close sizes track the `size` prop. The surface uses the
+ * overlay tokens (white bg, subtle border, 8px radius); the intent system
+ * colours the leading icon, title, description, and close affordance.
+ */
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type ToastSize = 'small' | 'default' | 'large';
+export type ToastProps = {
+    /** Heading text. */
+    title: string;
+    /** Supporting description text below the title. */
+    children?: string;
+    /** Semantic intent — colours the icon and text. */
+    intent?: IntentName;
+    /** Size variant — controls padding, gap, and typography scale. */
+    size?: ToastSize;
+    /** Leading icon — Material Symbols name string or a ReactNode. */
+    icon?: string | React.ReactNode;
+    /** Dismiss handler — renders a close button when provided. */
+    onClose?: () => void;
+    /** Style override for the outer surface. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the title text. */
+    accessibilityLabel?: string;
+};
+export declare function Toast({ title, children, intent, size, icon, onClose, style, accessibilityLabel, }: ToastProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toast/Toast.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = Toast;
+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");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps toast size → title typography scale */
+const TITLE_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Maps toast size → body typography scale (description) */
+const BODY_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+/** Shadow for web — matches Figma shadow/md */
+const SHADOW_WEB = {
+    boxShadow: '0px 2px 4px -2px rgba(0,0,0,0.05), 0px 4px 6px -1px rgba(0,0,0,0.07)',
+};
+/** Shadow for native */
+const SHADOW_NATIVE = {
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.07,
+    shadowRadius: 6,
+    elevation: 4,
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+function Toast({ title, children, intent = 'neutral', size = 'default', icon, onClose, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const intentColors = scheme.intents;
+    const surfaceTokens = scheme.surface;
+    const tokens = components.toast;
+    const sizeTokens = tokens[size];
+    const titleTokens = tokens_1.title[TITLE_SCALE[size]];
+    const bodyTokens = tokens_1.body[BODY_SCALE[size]];
+    const fg = intentColors[intent].default.default.fg;
+    const resolvedIcon = 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 || title, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: sizeTokens.gap,
+                padding: sizeTokens.padding,
+                minWidth: tokens.minWidth,
+                maxWidth: tokens.maxWidth,
+                borderRadius: tokens.borderRadius,
+                borderWidth: tokens_1.controlTokens.borderWidth,
+                borderColor: surfaceTokens.overlay.border,
+                backgroundColor: surfaceTokens.overlay.bg,
+                ...(react_native_1.Platform.OS === 'web' ? SHADOW_WEB : SHADOW_NATIVE),
+            },
+            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, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(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: title }), children ? ((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: children })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onClose, hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Dismiss", style: { width: sizeTokens.closeSize, height: sizeTokens.closeSize }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", size: sizeTokens.closeSize, color: fg }) })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Toast, type ToastProps, type ToastSize } from './Toast';

package/dist/components/Toast/index.js

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

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Toggle — on/off switch control.
+ *
+ * Maps to the Figma <Toggle> component (node 275:9974):
+ *   checked → boolean
+ *   size    → small | default | large
+ *   state   → default | hover | focus | disabled (interaction-driven)
+ *
+ * Track/thumb sizes come from the density theme's `toggle` tokens (sizes track
+ * the `size` prop; gap tracks density). Colours come from the theme's colour
+ * scheme (`scheme.toggle` + `scheme.focusRing`).
+ */
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type ToggleSize = 'small' | 'default' | 'large';
+export type ToggleProps = {
+    /** On/off state. */
+    checked?: boolean;
+    /** Change handler — receives the next checked value. */
+    onChange?: (checked: boolean) => void;
+    /** Optional label rendered beside the switch. */
+    children?: string;
+    /** Size variant — controls track + thumb size. */
+    size?: ToggleSize;
+    /** 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 Toggle({ checked, onChange, children, size, disabled, style, accessibilityLabel, }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = Toggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Toggle — on/off switch control.
+ *
+ * Maps to the Figma <Toggle> component (node 275:9974):
+ *   checked → boolean
+ *   size    → small | default | large
+ *   state   → default | hover | focus | disabled (interaction-driven)
+ *
+ * Track/thumb sizes come from the density theme's `toggle` tokens (sizes track
+ * the `size` prop; gap tracks density). Colours come from the theme's colour
+ * scheme (`scheme.toggle` + `scheme.focusRing`).
+ */
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+/** Maps toggle size → label typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+    large: 'lg',
+};
+function Toggle({ checked = false, onChange, children, size = 'default', disabled = false, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const toggleColors = scheme.toggle;
+    const tokens = components.toggle;
+    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 handlePress = (0, react_1.useCallback)(() => {
+        if (!disabled)
+            onChange?.(!checked);
+    }, [disabled, onChange, checked]);
+    // Resolve track fill.
+    let trackBg;
+    if (disabled) {
+        trackBg = checked
+            ? toggleColors.track.disabledOn
+            : toggleColors.track.disabledOff;
+    }
+    else if (checked) {
+        trackBg = isHovered ? toggleColors.track.onHover : toggleColors.track.on;
+    }
+    else {
+        trackBg =
+            isHovered || isFocused
+                ? toggleColors.track.offHover
+                : toggleColors.track.off;
+    }
+    const showFocusRing = isFocused && !disabled;
+    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: "switch", accessibilityLabel: accessibilityLabel || children, accessibilityState: { checked, disabled }, style: [
+            {
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: tokens.gap,
+            },
+            style,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    width: sizeTokens.trackWidth,
+                    height: sizeTokens.trackHeight,
+                    borderRadius: sizeTokens.trackHeight / 2,
+                    backgroundColor: trackBg,
+                    padding: tokens.thumbOffset,
+                    flexDirection: 'row',
+                    justifyContent: checked ? 'flex-end' : 'flex-start',
+                    alignItems: 'center',
+                    borderWidth: showFocusRing ? tokens.focusRingWidth : 0,
+                    borderColor: showFocusRing
+                        ? scheme.focusRing.color
+                        : 'transparent',
+                }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        width: sizeTokens.thumbSize,
+                        height: sizeTokens.thumbSize,
+                        borderRadius: sizeTokens.thumbSize / 2,
+                        backgroundColor: toggleColors.thumb,
+                    } }) }), 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
+                        ? toggleColors.label.disabled
+                        : toggleColors.label.default,
+                }, selectable: false, children: children })) : null] }));
+}

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

@@ -0,0 +1 @@
+export { Toggle, type ToggleProps, type ToggleSize } from './Toggle';

package/dist/components/Toggle/index.js

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Tooltip — a small dark label that points at an anchor with an arrow.
+ *
+ * Maps to the Figma <Tooltip> component (node 307:4225):
+ *   direction → top | bottom | left | right   (the edge the arrow sits on)
+ *   size      → small | default               (drives padding + type scale)
+ *   hasArrow  → toggles the directional arrow
+ *
+ * This is the presentational bubble only: it renders the dark surface
+ * (neutral/bold) with white text and an optional arrow. Positioning relative
+ * to a trigger is the caller's job — wrap it in a positioned container or pass
+ * a `style` with absolute coordinates.
+ *
+ * Padding comes from the `tooltip` density theme (size × density); the radius
+ * and arrow size are constant across densities.
+ */
+import { type ViewStyle, type StyleProp } from 'react-native';
+export type TooltipSize = 'small' | 'default';
+export type TooltipDirection = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipProps = {
+    /** The tooltip label text. */
+    children: string;
+    /** The edge the arrow sits on (points away from the bubble). */
+    direction?: TooltipDirection;
+    /** Size variant — controls padding and typography scale. */
+    size?: TooltipSize;
+    /** Show the directional arrow. Defaults to true. */
+    hasArrow?: boolean;
+    /** Outer style — use for positioning (absolute coords, margin). */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label — falls back to the children text. */
+    accessibilityLabel?: string;
+};
+export declare function Tooltip({ children, direction, size, hasArrow, style, accessibilityLabel, }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = Tooltip;
+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");
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps tooltip size → label typography scale */
+const LABEL_SCALE = {
+    small: 'sm',
+    default: 'md',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/** Positions the rotated-square arrow on the requested edge, centred. */
+function arrowStyle(direction, arrowSize, backgroundColor) {
+    const half = arrowSize / 2;
+    const base = {
+        position: 'absolute',
+        width: arrowSize,
+        height: arrowSize,
+        backgroundColor,
+        transform: [{ rotate: '45deg' }],
+    };
+    switch (direction) {
+        case 'top':
+            return { ...base, top: -half, left: '50%', marginLeft: -half };
+        case 'left':
+            return { ...base, left: -half, top: '50%', marginTop: -half };
+        case 'right':
+            return { ...base, right: -half, top: '50%', marginTop: -half };
+        case 'bottom':
+        default:
+            return { ...base, bottom: -half, left: '50%', marginLeft: -half };
+    }
+}
+function Tooltip({ children, direction = 'bottom', size = 'small', hasArrow = true, style, accessibilityLabel, }) {
+    const { components, scheme } = (0, theme_1.useTheme)();
+    const tokens = components.tooltip;
+    const sizeTokens = tokens[size];
+    const labelTokens = tokens_1.label[LABEL_SCALE[size]];
+    /** Surface = neutral/bold (dark) — bg #374151, fg #FFFFFF. */
+    const SURFACE = scheme.intents.neutral.bold.default;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityRole: "text", accessibilityLabel: accessibilityLabel || children, style: [
+            {
+                alignSelf: 'flex-start',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: SURFACE.bg,
+                borderRadius: tokens.borderRadius,
+                paddingHorizontal: sizeTokens.paddingX,
+                paddingVertical: sizeTokens.paddingY,
+            },
+            style,
+        ], children: [hasArrow ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: arrowStyle(direction, tokens.arrowSize, SURFACE.bg) })) : null, (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: SURFACE.fg,
+                }, children: children })] }));
+}

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

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './Tooltip';

package/dist/components/Tooltip/index.js

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

package/dist/index.d.ts

@@ -1,7 +1,21 @@
-export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, fontFamily, fontWeight, label, title, body, caption, type IntentName, type ProminenceName, type StateName, type LabelSize, } from './tokens';
-export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type DeepPartial, } from './theme';
+export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, } from './tokens';
+export { ThemeProvider, useTheme, themes, type Theme, type ThemeProviderProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type DeepPartial, } from './theme';
 export { Button, type ButtonProps, type ButtonSize } from './components/Button';
 export { Icon, type IconProps } from './components/Icon';
 export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';
 export { Select, SelectOption, SelectGroup, SelectSeparator, SelectTag, SelectContent as SelectDropdown, type SelectProps, type SelectSize, type SelectType, type SelectOptionProps, type SelectGroupProps, type SelectTagProps, type SelectContentProps, } from './components/Select';
-//# sourceMappingURL=index.d.ts.map
+export { List, ListItem, ListSubheader, ListDivider, type ListProps, type ListItemProps, type ListSubheaderProps, type ListDividerProps, } from './components/List';
+export { Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxChecked, } from './components/Checkbox';
+export { Alert, type AlertProps, type AlertSize, type AlertVariant, } from './components/Alert';
+export { Toggle, type ToggleProps, type ToggleSize } from './components/Toggle';
+export { Card, type CardProps, type CardSize, type CardVariant, } from './components/Card';
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, } from './components/Badge';
+export { Input, type InputProps, type InputSize } from './components/Input';
+export { Radio, RadioGroup, type RadioProps, type RadioGroupProps, type RadioSize, } from './components/Radio';
+export { Toast, type ToastProps, type ToastSize, } from './components/Toast';
+export { Chip, type ChipProps, type ChipSize, type ChipVariant, } from './components/Chip';
+export { Divider, type DividerProps, type DividerOrientation, } from './components/Divider';
+export { Avatar, type AvatarProps, type AvatarSize, type AvatarType, } from './components/Avatar';
+export { Popover, type PopoverProps, type PopoverSize, type PopoverDirection, } from './components/Popover';
+export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/Skeleton';
+export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';

package/dist/index.js

@@ -1,12 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.themes = exports.useTheme = exports.ThemeProvider = exports.caption = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
+exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = void 0;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
-export { intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, fontFamily, fontWeight, label, title, body, caption, } from './tokens';
+var tokens_1 = require("./tokens");
+Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return tokens_1.lightColors; } });
+Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return tokens_1.darkColors; } });
+Object.defineProperty(exports, "colorSchemes", { enumerable: true, get: function () { return tokens_1.colorSchemes; } });
+Object.defineProperty(exports, "intentColors", { enumerable: true, get: function () { return tokens_1.intentColors; } });
+Object.defineProperty(exports, "disabledColors", { enumerable: true, get: function () { return tokens_1.disabledColors; } });
+Object.defineProperty(exports, "controlTokens", { enumerable: true, get: function () { return tokens_1.controlTokens; } });
+Object.defineProperty(exports, "surfaceTokens", { enumerable: true, get: function () { return tokens_1.surfaceTokens; } });
+Object.defineProperty(exports, "textTokens", { enumerable: true, get: function () { return tokens_1.textTokens; } });
+Object.defineProperty(exports, "overlayTokens", { enumerable: true, get: function () { return tokens_1.overlayTokens; } });
+Object.defineProperty(exports, "selectColors", { enumerable: true, get: function () { return tokens_1.selectColors; } });
+Object.defineProperty(exports, "tagTokens", { enumerable: true, get: function () { return tokens_1.tagTokens; } });
+Object.defineProperty(exports, "errorTokens", { enumerable: true, get: function () { return tokens_1.errorTokens; } });
+Object.defineProperty(exports, "listColors", { enumerable: true, get: function () { return tokens_1.listColors; } });
+Object.defineProperty(exports, "checkboxColors", { enumerable: true, get: function () { return tokens_1.checkboxColors; } });
+Object.defineProperty(exports, "toggleColors", { enumerable: true, get: function () { return tokens_1.toggleColors; } });
+Object.defineProperty(exports, "radioColors", { enumerable: true, get: function () { return tokens_1.radioColors; } });
+Object.defineProperty(exports, "avatarColors", { enumerable: true, get: function () { return tokens_1.avatarColors; } });
+Object.defineProperty(exports, "skeletonColors", { enumerable: true, get: function () { return tokens_1.skeletonColors; } });
+Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return tokens_1.fontFamily; } });
+Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return tokens_1.fontWeight; } });
+Object.defineProperty(exports, "label", { enumerable: true, get: function () { return tokens_1.label; } });
+Object.defineProperty(exports, "title", { enumerable: true, get: function () { return tokens_1.title; } });
+Object.defineProperty(exports, "body", { enumerable: true, get: function () { return tokens_1.body; } });
+Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return tokens_1.caption; } });
 // Theme
-export { ThemeProvider, useTheme, themes, } from './theme';
+var theme_1 = require("./theme");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });
+Object.defineProperty(exports, "themes", { enumerable: true, get: function () { return theme_1.themes; } });
 // Components
-export { Button } from './components/Button';
-export { Icon } from './components/Icon';
-export { Dialog, DialogContent, } from './components/Dialog';
-export { Select, SelectOption, SelectGroup, SelectSeparator, SelectTag, SelectContent as SelectDropdown, } from './components/Select';
-//# sourceMappingURL=index.js.map
+var Button_1 = require("./components/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var Icon_1 = require("./components/Icon");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var Dialog_1 = require("./components/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; } });
+var Select_1 = require("./components/Select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+Object.defineProperty(exports, "SelectOption", { enumerable: true, get: function () { return Select_1.SelectOption; } });
+Object.defineProperty(exports, "SelectGroup", { enumerable: true, get: function () { return Select_1.SelectGroup; } });
+Object.defineProperty(exports, "SelectSeparator", { enumerable: true, get: function () { return Select_1.SelectSeparator; } });
+Object.defineProperty(exports, "SelectTag", { enumerable: true, get: function () { return Select_1.SelectTag; } });
+Object.defineProperty(exports, "SelectDropdown", { enumerable: true, get: function () { return Select_1.SelectContent; } });
+var List_1 = require("./components/List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return List_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return List_1.ListItem; } });
+Object.defineProperty(exports, "ListSubheader", { enumerable: true, get: function () { return List_1.ListSubheader; } });
+Object.defineProperty(exports, "ListDivider", { enumerable: true, get: function () { return List_1.ListDivider; } });
+var Checkbox_1 = require("./components/Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
+var Alert_1 = require("./components/Alert");
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.Alert; } });
+var Toggle_1 = require("./components/Toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return Toggle_1.Toggle; } });
+var Card_1 = require("./components/Card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
+var Badge_1 = require("./components/Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
+var Input_1 = require("./components/Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var Radio_1 = require("./components/Radio");
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return Radio_1.RadioGroup; } });
+var Toast_1 = require("./components/Toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
+var Chip_1 = require("./components/Chip");
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
+var Divider_1 = require("./components/Divider");
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
+var Avatar_1 = require("./components/Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
+var Popover_1 = require("./components/Popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
+var Skeleton_1 = require("./components/Skeleton");
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
+var Tooltip_1 = require("./components/Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });