@castui/cast-ui 4.6.0 → 4.8.0

package/dist/components/Table/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = void 0;
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
+Object.defineProperty(exports, "TableHead", { enumerable: true, get: function () { return Table_1.TableHead; } });
+Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return Table_1.TableBody; } });
+Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return Table_1.TableRow; } });
+Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return Table_1.TableCell; } });

package/dist/components/Tabs/Tabs.d.ts

@@ -26,7 +26,7 @@
  * `components.tabs`; `indicatorHeight` is keyed by `size` and constant across
  * density (like Progress's track-height); `indicatorRadius` is the pill radius.
  * Colours: the selected indicator and selected label bind to the intent system
- * (`colors[intent].bold.default.bg`); unselected labels use
+ * (`colors[intent].default.default.fg`); unselected labels use
  * `scheme.text.description`, hovered use `scheme.text.primary`, disabled use
  * `scheme.disabled.fg`; the baseline divider is the dedicated
  * `scheme.tabs.track` semantic (cool-grey/200 light, cool-grey/700 dark).

package/dist/components/Tabs/Tabs.js

@@ -31,7 +31,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `components.tabs`; `indicatorHeight` is keyed by `size` and constant across
  * density (like Progress's track-height); `indicatorRadius` is the pill radius.
  * Colours: the selected indicator and selected label bind to the intent system
- * (`colors[intent].bold.default.bg`); unselected labels use
+ * (`colors[intent].default.default.fg`); unselected labels use
  * `scheme.text.description`, hovered use `scheme.text.primary`, disabled use
  * `scheme.disabled.fg`; the baseline divider is the dedicated
  * `scheme.tabs.track` semantic (cool-grey/200 light, cool-grey/700 dark).
@@ -69,7 +69,10 @@ function Tab({ value, children, leadingIcon, disabled = false, style, accessibil
     const sizeTokens = components.tabs[size];
     const { indicatorRadius } = components.tabs;
     const isSelected = selectedValue === value;
-    const accent = colors[intent].bold.default.bg;
+    // Selected label + indicator track the intent *fg* (text/line colour), mirroring
+    // the Figma binding intent/{intent}/default/default/fg — same hex as bold/bg in
+    // light, but correctly the text colour (not the solid fill) in dark mode.
+    const accent = colors[intent].default.default.fg;
     // Resolve the label/icon colour from interaction + selection state.
     const fg = disabled
         ? scheme.disabled.fg

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,69 @@
+/**
+ * ToggleButtonGroup — a segmented row of buttons for picking one or more values.
+ *
+ * Compound component. <ToggleButtonGroup> owns the selection and lays the
+ * buttons out joined in a row; <ToggleButton> is one segment.
+ *
+ *   <ToggleButtonGroup value={align} onValueChange={setAlign}>
+ *     <ToggleButton value="left" leadingIcon="format_align_left">Left</ToggleButton>
+ *     <ToggleButton value="center" leadingIcon="format_align_center">Center</ToggleButton>
+ *     <ToggleButton value="right" leadingIcon="format_align_right">Right</ToggleButton>
+ *   </ToggleButtonGroup>
+ *
+ * Maps 1:1 to the Figma <Toggle Button Group> component:
+ *   intent → neutral | brand | danger   (selected fill)
+ *   size   → small | default | large    (padding, gap, typography)
+ *   exclusive → single-select (string | null) vs multi-select (string[])
+ *   ToggleButton state → default | hover | selected | disabled
+ *
+ * A toggle button is its own component, not the Button set, so it has dedicated
+ * tokens (toggle-button-group/*). Selected segments fill with the intent bold
+ * colour; unselected segments are transparent with neutral text and a neutral
+ * hover. The group draws one neutral border with dividers between segments.
+ * Spacing varies by density; typography by the size prop. Fonts are
+ * consumer-loaded.
+ */
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IntentName } from '../../tokens';
+export type ToggleButtonGroupSize = 'small' | 'default' | 'large';
+export type ToggleButtonGroupProps = {
+    /** Single-select (true, default) or multi-select (false). */
+    exclusive?: boolean;
+    /** Selected value (exclusive mode). null = nothing selected. */
+    value?: string | null;
+    /** Selection handler (exclusive mode). */
+    onValueChange?: (value: string | null) => void;
+    /** Selected values (multi mode). */
+    values?: string[];
+    /** Selection handler (multi mode). */
+    onValuesChange?: (values: string[]) => void;
+    /** Semantic intent — drives the selected fill colour. */
+    intent?: IntentName;
+    /** Size variant — padding, gap, and typography. */
+    size?: ToggleButtonGroupSize;
+    /** Disables every segment. */
+    disabled?: boolean;
+    /** `<ToggleButton>` children. */
+    children: React.ReactNode;
+    /** Outer style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the group. */
+    accessibilityLabel?: string;
+};
+export type ToggleButtonProps = {
+    /** Unique value identifying this segment. */
+    value: string;
+    /** The segment label. */
+    children?: string;
+    /** Icon before the label — Material Symbols name string or a ReactNode. */
+    leadingIcon?: string | React.ReactNode;
+    /** Disables this segment. */
+    disabled?: boolean;
+    /** Accessibility label — falls back to the label text. */
+    accessibilityLabel?: string;
+    /** Internal: set by <ToggleButtonGroup> on the first segment. */
+    __first?: boolean;
+};
+export declare function ToggleButton({ value, children, leadingIcon, disabled, accessibilityLabel, __first, }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleButtonGroup({ exclusive, value, onValueChange, values, onValuesChange, intent, size, disabled, children, style, accessibilityLabel, }: ToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,158 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleButton = ToggleButton;
+exports.ToggleButtonGroup = ToggleButtonGroup;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ToggleButtonGroup — a segmented row of buttons for picking one or more values.
+ *
+ * Compound component. <ToggleButtonGroup> owns the selection and lays the
+ * buttons out joined in a row; <ToggleButton> is one segment.
+ *
+ *   <ToggleButtonGroup value={align} onValueChange={setAlign}>
+ *     <ToggleButton value="left" leadingIcon="format_align_left">Left</ToggleButton>
+ *     <ToggleButton value="center" leadingIcon="format_align_center">Center</ToggleButton>
+ *     <ToggleButton value="right" leadingIcon="format_align_right">Right</ToggleButton>
+ *   </ToggleButtonGroup>
+ *
+ * Maps 1:1 to the Figma <Toggle Button Group> component:
+ *   intent → neutral | brand | danger   (selected fill)
+ *   size   → small | default | large    (padding, gap, typography)
+ *   exclusive → single-select (string | null) vs multi-select (string[])
+ *   ToggleButton state → default | hover | selected | disabled
+ *
+ * A toggle button is its own component, not the Button set, so it has dedicated
+ * tokens (toggle-button-group/*). Selected segments fill with the intent bold
+ * colour; unselected segments are transparent with neutral text and a neutral
+ * hover. The group draws one neutral border with dividers between segments.
+ * Spacing varies by density; typography by the size prop. Fonts are
+ * consumer-loaded.
+ */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../../theme");
+const tokens_1 = require("../../tokens");
+const Text_1 = require("../Text");
+const Icon_1 = require("../Icon");
+const ToggleButtonGroupCtx = (0, react_1.createContext)(null);
+function useToggleButtonGroupContext() {
+    const ctx = (0, react_1.useContext)(ToggleButtonGroupCtx);
+    if (!ctx)
+        throw new Error('<ToggleButton> must be used within <ToggleButtonGroup>');
+    return ctx;
+}
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+/** Maps size → label typography scale (Text component `type`). */
+const LABEL_TYPE = {
+    small: 'label-sm',
+    default: 'label-md',
+    large: 'label-lg',
+};
+// ---------------------------------------------------------------------------
+// ToggleButton
+// ---------------------------------------------------------------------------
+function ToggleButton({ value, children, leadingIcon, disabled = false, accessibilityLabel, __first = false, }) {
+    const { intent, size, groupDisabled, isSelected, onItemPress } = useToggleButtonGroupContext();
+    const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const sizeTokens = components.toggleButtonGroup[size];
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const isDisabled = disabled || groupDisabled;
+    const selected = isSelected(value);
+    // Selected segments fill with the intent bold colour; unselected are
+    // transparent with neutral text and a neutral hover.
+    const colorset = isDisabled
+        ? { bg: scheme.disabled.bg, fg: scheme.disabled.fg }
+        : selected
+            ? isHovered
+                ? { bg: colors[intent].bold.hover.bg, fg: colors[intent].bold.hover.fg }
+                : { bg: colors[intent].bold.default.bg, fg: colors[intent].bold.default.fg }
+            : isHovered
+                ? { bg: colors.neutral.subtle.hover.bg, fg: colors.neutral.subtle.hover.fg }
+                : { bg: 'transparent', fg: colors.neutral.default.default.fg };
+    const resolvedLeading = typeof leadingIcon === 'string' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: leadingIcon, size: size, color: colorset.fg })) : (leadingIcon);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => {
+            if (!isDisabled)
+                onItemPress(value);
+        }, disabled: isDisabled, onHoverIn: () => setIsHovered(true), onHoverOut: () => setIsHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel || children || value, accessibilityState: { selected, disabled: isDisabled }, style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: sizeTokens.gap,
+            paddingHorizontal: sizeTokens.paddingX,
+            paddingVertical: sizeTokens.paddingY,
+            backgroundColor: colorset.bg,
+            borderLeftWidth: __first ? 0 : tokens_1.controlTokens.borderWidth,
+            borderLeftColor: colors.neutral.default.default.border,
+        }, children: [resolvedLeading, children ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { type: LABEL_TYPE[size], color: colorset.fg, selectable: false, children: children })) : null] }));
+}
+// ---------------------------------------------------------------------------
+// ToggleButtonGroup
+// ---------------------------------------------------------------------------
+function ToggleButtonGroup({ exclusive = true, value, onValueChange, values, onValuesChange, intent = 'brand', size = 'default', disabled = false, children, style, accessibilityLabel, }) {
+    const { components, colors } = (0, theme_1.useTheme)();
+    const radius = components.toggleButtonGroup.borderRadius;
+    const isSelected = (v) => exclusive ? value === v : (values ?? []).includes(v);
+    const onItemPress = (v) => {
+        if (exclusive) {
+            onValueChange?.(value === v ? null : v);
+        }
+        else {
+            const current = values ?? [];
+            const next = current.includes(v)
+                ? current.filter((x) => x !== v)
+                : [...current, v];
+            onValuesChange?.(next);
+        }
+    };
+    const items = react_1.default.Children.toArray(children).filter(Boolean);
+    const rendered = items.map((child, i) => react_1.default.cloneElement(child, {
+        key: `tb-${i}`,
+        __first: i === 0,
+    }));
+    return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupCtx.Provider, { value: { intent, size, groupDisabled: disabled, isSelected, onItemPress }, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityRole: "radiogroup", accessibilityLabel: accessibilityLabel, style: [
+                {
+                    flexDirection: 'row',
+                    alignSelf: 'flex-start',
+                    borderWidth: tokens_1.controlTokens.borderWidth,
+                    borderColor: colors.neutral.default.default.border,
+                    borderRadius: radius,
+                    overflow: 'hidden',
+                },
+                style,
+            ], children: rendered }) }));
+}

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

@@ -0,0 +1 @@
+export { ToggleButtonGroup, ToggleButton, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleButtonGroupSize, } from './ToggleButtonGroup';

package/dist/components/ToggleButtonGroup/index.js

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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } 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 ProgressSizeTokens, type ProgressThemeTokens, type TabsSizeTokens, type TabsThemeTokens, type DeepPartial, } from './theme';
+export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, menuColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, sliderColors, tableColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
+export { ThemeProvider, useTheme, themes, applyCastTheme, type Theme, type ThemeProviderProps, type CastThemeFile, type CastThemeProps, 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 ProgressSizeTokens, type ProgressThemeTokens, type TabsSizeTokens, type TabsThemeTokens, type SpinnerSizeTokens, type SpinnerThemeTokens, type BottomSheetThemeTokens, type LinkSizeTokens, type LinkThemeTokens, type BreadcrumbsSizeTokens, type BreadcrumbsThemeTokens, type CodeBlockSizeTokens, type CodeBlockThemeTokens, type DrawerThemeTokens, type MenuItemTokens, type MenuGroupTokens, type MenuThemeTokens, type ToggleButtonGroupSizeTokens, type ToggleButtonGroupThemeTokens, type AppBarSizeTokens, type AppBarThemeTokens, type SliderSizeTokens, type SliderThemeTokens, type SpeedDialSizeTokens, type SpeedDialThemeTokens, type TableSizeTokens, type TableThemeTokens, 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';
@@ -21,4 +21,19 @@ export { Skeleton, type SkeletonProps, type SkeletonShape, } from './components/
 export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, } from './components/Tooltip';
 export { Text, type TextProps, type TextType } from './components/Text';
 export { Progress, type ProgressProps, type ProgressSize } from './components/Progress';
+export { Spinner, type SpinnerProps, type SpinnerSize } from './components/Spinner';
+export { BottomSheet, BottomSheetContent, type BottomSheetProps, type BottomSheetContentProps, } from './components/BottomSheet';
 export { Tabs, Tab, type TabsProps, type TabProps, type TabsSize, } from './components/Tabs';
+export { Accordion, AccordionItem, type AccordionProps, type AccordionItemProps, type AccordionSize, type AccordionType, } from './components/Accordion';
+export { Link, type LinkProps, type LinkSize, type LinkUnderline, } from './components/Link';
+export { Backdrop, type BackdropProps } from './components/Backdrop';
+export { Breadcrumbs, Breadcrumb, type BreadcrumbsProps, type BreadcrumbProps, type BreadcrumbsSize, } from './components/Breadcrumbs';
+export { CodeBlock, type CodeBlockProps, type CodeBlockSize, } from './components/CodeBlock';
+export { Drawer, DrawerContent, type DrawerProps, type DrawerContentProps, type DrawerAnchor, } from './components/Drawer';
+export { Menu, MenuItem, MenuDivider, MenuLabel, MenuContent, type MenuProps, type MenuItemProps, type MenuLabelProps, type MenuContentProps, type MenuSize, type MenuPlacement, } from './components/Menu';
+export { ToggleButtonGroup, ToggleButton, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleButtonGroupSize, } from './components/ToggleButtonGroup';
+export { AppBar, type AppBarProps, type AppBarSize, type AppBarAlign, } from './components/AppBar';
+export { Slider, type SliderProps, type SliderSize } from './components/Slider';
+export { SpeedDial, SpeedDialAction, type SpeedDialProps, type SpeedDialActionProps, type SpeedDialSize, type SpeedDialDirection, } from './components/SpeedDial';
+export { Table, TableHead, TableBody, TableRow, TableCell, type TableProps, type TableSectionProps, type TableRowProps, type TableCellProps, type TableSize, type TableCellAlign, } from './components/Table';
+export { Autocomplete, type AutocompleteProps, type AutocompleteOption, type AutocompleteSize, } from './components/Autocomplete';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = 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.Tab = exports.Tabs = exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = void 0;
+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.applyCastTheme = exports.themes = exports.useTheme = exports.ThemeProvider = exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
+exports.Autocomplete = exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = exports.SpeedDialAction = exports.SpeedDial = exports.Slider = exports.AppBar = exports.ToggleButton = exports.ToggleButtonGroup = exports.MenuContent = exports.MenuLabel = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.DrawerContent = exports.Drawer = exports.CodeBlock = exports.Breadcrumb = exports.Breadcrumbs = exports.Backdrop = exports.Link = exports.AccordionItem = exports.Accordion = exports.Tab = exports.Tabs = exports.BottomSheetContent = exports.BottomSheet = exports.Spinner = exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = void 0;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -16,6 +16,7 @@ Object.defineProperty(exports, "surfaceTokens", { enumerable: true, get: functio
 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, "menuColors", { enumerable: true, get: function () { return tokens_1.menuColors; } });
 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; } });
@@ -26,6 +27,8 @@ Object.defineProperty(exports, "tabsColors", { enumerable: true, get: function (
 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, "sliderColors", { enumerable: true, get: function () { return tokens_1.sliderColors; } });
+Object.defineProperty(exports, "tableColors", { enumerable: true, get: function () { return tokens_1.tableColors; } });
 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; } });
@@ -40,6 +43,7 @@ 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; } });
+Object.defineProperty(exports, "applyCastTheme", { enumerable: true, get: function () { return theme_1.applyCastTheme; } });
 // Components
 var Button_1 = require("./components/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
@@ -93,6 +97,51 @@ var Text_1 = require("./components/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 var Progress_1 = require("./components/Progress");
 Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return Progress_1.Progress; } });
+var Spinner_1 = require("./components/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+var BottomSheet_1 = require("./components/BottomSheet");
+Object.defineProperty(exports, "BottomSheet", { enumerable: true, get: function () { return BottomSheet_1.BottomSheet; } });
+Object.defineProperty(exports, "BottomSheetContent", { enumerable: true, get: function () { return BottomSheet_1.BottomSheetContent; } });
 var Tabs_1 = require("./components/Tabs");
 Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });
+var Accordion_1 = require("./components/Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return Accordion_1.AccordionItem; } });
+// --- Batch: MUI-aligned components ---
+var Link_1 = require("./components/Link");
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
+var Backdrop_1 = require("./components/Backdrop");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return Backdrop_1.Backdrop; } });
+var Breadcrumbs_1 = require("./components/Breadcrumbs");
+Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumbs; } });
+Object.defineProperty(exports, "Breadcrumb", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumb; } });
+var CodeBlock_1 = require("./components/CodeBlock");
+Object.defineProperty(exports, "CodeBlock", { enumerable: true, get: function () { return CodeBlock_1.CodeBlock; } });
+var Drawer_1 = require("./components/Drawer");
+Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
+Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });
+var Menu_1 = require("./components/Menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return Menu_1.Menu; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return Menu_1.MenuItem; } });
+Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return Menu_1.MenuDivider; } });
+Object.defineProperty(exports, "MenuLabel", { enumerable: true, get: function () { return Menu_1.MenuLabel; } });
+Object.defineProperty(exports, "MenuContent", { enumerable: true, get: function () { return Menu_1.MenuContent; } });
+var ToggleButtonGroup_1 = require("./components/ToggleButtonGroup");
+Object.defineProperty(exports, "ToggleButtonGroup", { enumerable: true, get: function () { return ToggleButtonGroup_1.ToggleButtonGroup; } });
+Object.defineProperty(exports, "ToggleButton", { enumerable: true, get: function () { return ToggleButtonGroup_1.ToggleButton; } });
+var AppBar_1 = require("./components/AppBar");
+Object.defineProperty(exports, "AppBar", { enumerable: true, get: function () { return AppBar_1.AppBar; } });
+var Slider_1 = require("./components/Slider");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var SpeedDial_1 = require("./components/SpeedDial");
+Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return SpeedDial_1.SpeedDial; } });
+Object.defineProperty(exports, "SpeedDialAction", { enumerable: true, get: function () { return SpeedDial_1.SpeedDialAction; } });
+var Table_1 = require("./components/Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
+Object.defineProperty(exports, "TableHead", { enumerable: true, get: function () { return Table_1.TableHead; } });
+Object.defineProperty(exports, "TableBody", { enumerable: true, get: function () { return Table_1.TableBody; } });
+Object.defineProperty(exports, "TableRow", { enumerable: true, get: function () { return Table_1.TableRow; } });
+Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return Table_1.TableCell; } });
+var Autocomplete_1 = require("./components/Autocomplete");
+Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return Autocomplete_1.Autocomplete; } });

package/dist/theme/ThemeContext.d.ts

@@ -64,9 +64,16 @@ export type ThemeProviderProps = {
      * stays default.
      */
     colors?: Partial<Record<IntentName, DeepPartial<IntentColorMap[IntentName]>>>;
+    /**
+     * Partial overrides for the rest of the colour scheme — surface, text,
+     * focusRing, overlay, etc. Deep-merged into the active scheme after `colors`.
+     * Forward-compatible: pass whatever sections a cast-theme file provides.
+     * Usually you don't set this by hand — `applyCastTheme` builds it for you.
+     */
+    scheme?: DeepPartial<ColorScheme>;
     children: React.ReactNode;
 };
-export declare function ThemeProvider({ density, colorMode, colors, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ density, colorMode, colors, scheme: schemeOverride, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Access the current theme — density tokens, intent colours, and component tokens.
  * Must be called within a ThemeProvider; falls back to the "default" density if not.

package/dist/theme/ThemeContext.js

@@ -79,24 +79,27 @@ const defaultTheme = {
     disabledColors: colors_1.colorSchemes.light.disabled,
 };
 const ThemeContext = (0, react_1.createContext)(defaultTheme);
-function ThemeProvider({ density = 'default', colorMode = 'light', colors, children, }) {
+function ThemeProvider({ density = 'default', colorMode = 'light', colors, scheme: schemeOverride, children, }) {
     const theme = (0, react_1.useMemo)(() => {
         const baseScheme = colors_1.colorSchemes[colorMode];
         const resolvedIntents = colors
             ? deepMerge(baseScheme.intents, colors)
             : baseScheme.intents;
-        const scheme = colors
+        let scheme = colors || schemeOverride
             ? { ...baseScheme, intents: resolvedIntents }
             : baseScheme;
+        if (schemeOverride) {
+            scheme = deepMerge(scheme, schemeOverride);
+        }
         return {
             density,
             components: themes_1.themes[density],
             colorMode,
             scheme,
-            colors: resolvedIntents,
+            colors: scheme.intents,
             disabledColors: scheme.disabled,
         };
-    }, [density, colorMode, colors]);
+    }, [density, colorMode, colors, schemeOverride]);
     return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: theme, children: children }));
 }
 // ---------------------------------------------------------------------------

package/dist/theme/applyCastTheme.d.ts

@@ -0,0 +1,75 @@
+/**
+ * applyCastTheme — turn a cast-sync `cast-theme.json` object into props for
+ * `ThemeProvider`.
+ *
+ * The cast-sync Figma plugin exports a theme file with the colour intents
+ * keyed by mode (`colors.light` / `colors.dark`) plus reference sections
+ * (`text`, `typography`, `shadows`). This helper does the wiring the consumer
+ * used to do by hand:
+ *
+ *   - **Mode pairing.** You pass the whole theme plus the mode you're
+ *     rendering; it pulls the matching intent block. No more pairing
+ *     `colors.light` with `colorMode="light"` yourself and risking a desync.
+ *   - **Scheme overrides.** The non-intent colour sections the file carries
+ *     (`text`, `surface`, `focusRing`) are mapped into the `scheme` override
+ *     prop, so they actually land instead of sitting inert. Forward-compatible:
+ *     new sections flow through here with no change at the call site.
+ *
+ * The plugin stays a pure exporter — all interpretation lives here, in one
+ * tested place, so old theme files keep working as cast-ui evolves.
+ *
+ * @example
+ * ```tsx
+ * import theme from './cast-theme.json';
+ * import { ThemeProvider, applyCastTheme } from '@castui/cast-ui';
+ *
+ * const [mode, setMode] = useState<'light' | 'dark'>('light');
+ *
+ * <ThemeProvider {...applyCastTheme(theme, mode)}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+import type { ThemeProviderProps } from './ThemeContext';
+import type { ColorMode, IntentName } from '../tokens/colors';
+/** intent → prominence → state → { bg, fg, border } */
+type FileIntentMap = Partial<Record<IntentName, Record<string, Record<string, Record<string, string>>>>>;
+/**
+ * The shape of a cast-sync `cast-theme.json`. Every section is optional so a
+ * partial or future-versioned file never throws — unknown keys are ignored.
+ */
+export type CastThemeFile = {
+    name?: string;
+    description?: string;
+    generatedAt?: string;
+    /** Theme-file format version emitted by the plugin (currently 3). */
+    version?: number;
+    /** Optional explicit schema version for consumer validation. */
+    schemaVersion?: number;
+    colors?: Partial<Record<ColorMode, FileIntentMap>>;
+    text?: Partial<Record<ColorMode, Record<string, string>>>;
+    surface?: Partial<Record<ColorMode, {
+        base?: string;
+        subtle?: string;
+        overlay?: {
+            bg?: string;
+            border?: string;
+        };
+    }>>;
+    focusRing?: Partial<Record<ColorMode, {
+        color?: string;
+    }>>;
+    typography?: Record<string, unknown>;
+    shadows?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+/** The subset of ThemeProvider props this helper produces. */
+export type CastThemeProps = Pick<ThemeProviderProps, 'colorMode' | 'colors' | 'scheme'>;
+/**
+ * Build ThemeProvider props from a cast-theme file for a given colour mode.
+ *
+ * @param theme  The parsed `cast-theme.json` object.
+ * @param mode   The colour mode to render — defaults to `'light'`.
+ */
+export declare function applyCastTheme(theme: CastThemeFile, mode?: ColorMode): CastThemeProps;
+export {};

package/dist/theme/applyCastTheme.js

@@ -0,0 +1,95 @@
+"use strict";
+/**
+ * applyCastTheme — turn a cast-sync `cast-theme.json` object into props for
+ * `ThemeProvider`.
+ *
+ * The cast-sync Figma plugin exports a theme file with the colour intents
+ * keyed by mode (`colors.light` / `colors.dark`) plus reference sections
+ * (`text`, `typography`, `shadows`). This helper does the wiring the consumer
+ * used to do by hand:
+ *
+ *   - **Mode pairing.** You pass the whole theme plus the mode you're
+ *     rendering; it pulls the matching intent block. No more pairing
+ *     `colors.light` with `colorMode="light"` yourself and risking a desync.
+ *   - **Scheme overrides.** The non-intent colour sections the file carries
+ *     (`text`, `surface`, `focusRing`) are mapped into the `scheme` override
+ *     prop, so they actually land instead of sitting inert. Forward-compatible:
+ *     new sections flow through here with no change at the call site.
+ *
+ * The plugin stays a pure exporter — all interpretation lives here, in one
+ * tested place, so old theme files keep working as cast-ui evolves.
+ *
+ * @example
+ * ```tsx
+ * import theme from './cast-theme.json';
+ * import { ThemeProvider, applyCastTheme } from '@castui/cast-ui';
+ *
+ * const [mode, setMode] = useState<'light' | 'dark'>('light');
+ *
+ * <ThemeProvider {...applyCastTheme(theme, mode)}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyCastTheme = applyCastTheme;
+/** Map the file's `text` block onto the scheme's `text` slots (matching keys only). */
+function mapText(fileText) {
+    if (!fileText)
+        return undefined;
+    const out = {};
+    // Only keys the runtime scheme actually has. `muted` has no scheme slot, so
+    // it's intentionally dropped rather than guessed.
+    if (typeof fileText.primary === 'string')
+        out.primary = fileText.primary;
+    if (typeof fileText.description === 'string')
+        out.description = fileText.description;
+    if (typeof fileText.placeholder === 'string')
+        out.placeholder = fileText.placeholder;
+    // `muted` has no runtime scheme slot, so it is intentionally dropped.
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+/** Map the file's `surface` block onto the scheme's surface colours. */
+function mapSurface(fileSurface) {
+    if (!fileSurface)
+        return undefined;
+    const out = {};
+    if (typeof fileSurface.base === 'string')
+        out.base = fileSurface.base;
+    if (typeof fileSurface.subtle === 'string')
+        out.subtle = fileSurface.subtle;
+    if (fileSurface.overlay) {
+        const overlay = {};
+        if (typeof fileSurface.overlay.bg === 'string')
+            overlay.bg = fileSurface.overlay.bg;
+        if (typeof fileSurface.overlay.border === 'string')
+            overlay.border = fileSurface.overlay.border;
+        if (Object.keys(overlay).length > 0)
+            out.overlay = overlay;
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+/**
+ * Build ThemeProvider props from a cast-theme file for a given colour mode.
+ *
+ * @param theme  The parsed `cast-theme.json` object.
+ * @param mode   The colour mode to render — defaults to `'light'`.
+ */
+function applyCastTheme(theme, mode = 'light') {
+    const intents = theme?.colors?.[mode];
+    const schemeOverride = {};
+    const text = mapText(theme?.text?.[mode]);
+    if (text)
+        schemeOverride.text = text;
+    const surface = mapSurface(theme?.surface?.[mode]);
+    if (surface)
+        schemeOverride.surface = surface;
+    const ring = theme?.focusRing?.[mode];
+    if (ring && typeof ring.color === 'string')
+        schemeOverride.focusRing = { color: ring.color };
+    return {
+        colorMode: mode,
+        colors: intents,
+        scheme: Object.keys(schemeOverride).length > 0 ? schemeOverride : undefined,
+    };
+}