@castui/cast-ui 4.7.0 → 4.8.0

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 SpinnerSizeTokens, type SpinnerThemeTokens, 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';
@@ -22,4 +22,18 @@ export { Tooltip, type TooltipProps, type TooltipSize, type TooltipDirection, }
 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.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 = 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; } });
@@ -95,6 +99,49 @@ 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,
+    };
+}

package/dist/theme/index.d.ts

@@ -1,3 +1,4 @@
 export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
 export { themes } from './themes';
-export type { DensityTheme, ComponentTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, SpinnerSizeTokens, SpinnerThemeTokens, DeepPartial, } from './types';
+export { applyCastTheme, type CastThemeFile, type CastThemeProps, } from './applyCastTheme';
+export type { DensityTheme, ComponentTokens, AccordionSizeTokens, AccordionThemeTokens, ButtonSizeTokens, ButtonThemeTokens, DialogSizeTokens, DialogThemeTokens, InputSizeTokens, InputThemeTokens, SelectContentTokens, SelectOptionTokens, SelectGroupTokens, SelectSeparatorTokens, SelectThemeTokens, ListItemTokens, ListSubheaderTokens, ListThemeTokens, CheckboxSizeTokens, CheckboxThemeTokens, AlertSizeTokens, AlertThemeTokens, ToggleSizeTokens, ToggleThemeTokens, CardSizeTokens, CardThemeTokens, BadgeSizeTokens, BadgeThemeTokens, RadioSizeTokens, RadioThemeTokens, ToastSizeTokens, ToastThemeTokens, ChipSizeTokens, ChipThemeTokens, AvatarSizeTokens, AvatarThemeTokens, PopoverSizeTokens, PopoverThemeTokens, TooltipSizeTokens, TooltipThemeTokens, ProgressSizeTokens, ProgressThemeTokens, TabsSizeTokens, TabsThemeTokens, SpinnerSizeTokens, SpinnerThemeTokens, BottomSheetThemeTokens, LinkSizeTokens, LinkThemeTokens, BreadcrumbsSizeTokens, BreadcrumbsThemeTokens, CodeBlockSizeTokens, CodeBlockThemeTokens, DrawerThemeTokens, MenuItemTokens, MenuGroupTokens, MenuThemeTokens, ToggleButtonGroupSizeTokens, ToggleButtonGroupThemeTokens, AppBarSizeTokens, AppBarThemeTokens, SliderSizeTokens, SliderThemeTokens, SpeedDialSizeTokens, SpeedDialThemeTokens, TableSizeTokens, TableThemeTokens, DeepPartial, } from './types';

package/dist/theme/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themes = exports.useTheme = exports.ThemeProvider = void 0;
+exports.applyCastTheme = exports.themes = exports.useTheme = exports.ThemeProvider = void 0;
 var ThemeContext_1 = require("./ThemeContext");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeContext_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeContext_1.useTheme; } });
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "themes", { enumerable: true, get: function () { return themes_1.themes; } });
+var applyCastTheme_1 = require("./applyCastTheme");
+Object.defineProperty(exports, "applyCastTheme", { enumerable: true, get: function () { return applyCastTheme_1.applyCastTheme; } });