@castui/cast-ui 4.1.1 → 4.2.1

package/dist/theme/ThemeContext.d.ts

@@ -1,5 +1,6 @@
 /**
- * ThemeProvider — wraps your app to enable density theming and colour customisation.
+ * ThemeProvider — wraps your app to enable density theming, light/dark colour
+ * modes, and colour customisation.
  *
  * @example Basic usage — switch density
  * ```tsx
@@ -10,6 +11,13 @@
  * </ThemeProvider>
  * ```
  *
+ * @example Dark mode
+ * ```tsx
+ * <ThemeProvider colorMode="dark">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
  * @example Rebrand — override intent colours
  * ```tsx
  * <ThemeProvider
@@ -29,31 +37,39 @@
  * ```
  */
 import React from 'react';
-import { intentColors as defaultIntentColors, disabledColors as defaultDisabledColors } from '../tokens/colors';
-import type { IntentName } from '../tokens/colors';
+import { intentColors as defaultIntentColors } from '../tokens/colors';
+import type { ColorMode, ColorScheme, IntentName } from '../tokens/colors';
 import type { DensityTheme, ComponentTokens, DeepPartial } from './types';
 type IntentColorMap = typeof defaultIntentColors;
 export type Theme = {
     density: DensityTheme;
     components: ComponentTokens;
+    /** Active colour mode — light or dark. */
+    colorMode: ColorMode;
+    /** Full resolved colour scheme for the active mode (overrides applied). */
+    scheme: ColorScheme;
+    /** Intent colours of the active scheme — kept for backwards compatibility. */
     colors: IntentColorMap;
-    disabledColors: typeof defaultDisabledColors;
+    /** Disabled colours of the active scheme — kept for backwards compatibility. */
+    disabledColors: ColorScheme['disabled'];
 };
 export type ThemeProviderProps = {
     /** Density theme — controls spacing and padding across all components. */
     density?: DensityTheme;
+    /** Colour mode — switches between the light and dark colour schemes. */
+    colorMode?: ColorMode;
     /**
-     * Partial colour overrides — deep-merged with the default intent colours.
-     * Only provide the values you want to change; everything else stays default.
+     * Partial colour overrides — deep-merged with the active scheme's intent
+     * colours. Only provide the values you want to change; everything else
+     * stays default.
      */
     colors?: Partial<Record<IntentName, DeepPartial<IntentColorMap[IntentName]>>>;
     children: React.ReactNode;
 };
-export declare function ThemeProvider({ density, colors, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ density, colorMode, colors, 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.
  */
 export declare function useTheme(): Theme;
 export {};
-//# sourceMappingURL=ThemeContext.d.ts.map

package/dist/theme/ThemeContext.js

@@ -1,6 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * ThemeProvider — wraps your app to enable density theming and colour customisation.
+ * ThemeProvider — wraps your app to enable density theming, light/dark colour
+ * modes, and colour customisation.
  *
  * @example Basic usage — switch density
  * ```tsx
@@ -11,6 +16,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * </ThemeProvider>
  * ```
  *
+ * @example Dark mode
+ * ```tsx
+ * <ThemeProvider colorMode="dark">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ *
  * @example Rebrand — override intent colours
  * ```tsx
  * <ThemeProvider
@@ -29,9 +41,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * </ThemeProvider>
  * ```
  */
-import { createContext, useContext, useMemo } from 'react';
-import { themes } from './themes';
-import { intentColors as defaultIntentColors, disabledColors as defaultDisabledColors, } from '../tokens/colors';
+const react_1 = require("react");
+const themes_1 = require("./themes");
+const colors_1 = require("../tokens/colors");
 // ---------------------------------------------------------------------------
 // Deep merge utility (for partial colour overrides)
 // ---------------------------------------------------------------------------
@@ -60,24 +72,32 @@ function deepMerge(base, overrides) {
 // ---------------------------------------------------------------------------
 const defaultTheme = {
     density: 'default',
-    components: themes.default,
-    colors: defaultIntentColors,
-    disabledColors: defaultDisabledColors,
+    components: themes_1.themes.default,
+    colorMode: 'light',
+    scheme: colors_1.colorSchemes.light,
+    colors: colors_1.colorSchemes.light.intents,
+    disabledColors: colors_1.colorSchemes.light.disabled,
 };
-const ThemeContext = createContext(defaultTheme);
-export function ThemeProvider({ density = 'default', colors, children, }) {
-    const theme = useMemo(() => {
-        const resolvedColors = colors
-            ? deepMerge(defaultIntentColors, colors)
-            : defaultIntentColors;
+const ThemeContext = (0, react_1.createContext)(defaultTheme);
+function ThemeProvider({ density = 'default', colorMode = 'light', colors, 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
+            ? { ...baseScheme, intents: resolvedIntents }
+            : baseScheme;
         return {
             density,
-            components: themes[density],
-            colors: resolvedColors,
-            disabledColors: defaultDisabledColors,
+            components: themes_1.themes[density],
+            colorMode,
+            scheme,
+            colors: resolvedIntents,
+            disabledColors: scheme.disabled,
         };
-    }, [density, colors]);
-    return (_jsx(ThemeContext.Provider, { value: theme, children: children }));
+    }, [density, colorMode, colors]);
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: theme, children: children }));
 }
 // ---------------------------------------------------------------------------
 // Hook
@@ -86,7 +106,6 @@ export function ThemeProvider({ density = 'default', colors, children, }) {
  * 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.
  */
-export function useTheme() {
-    return useContext(ThemeContext);
+function useTheme() {
+    return (0, react_1.useContext)(ThemeContext);
 }
-//# sourceMappingURL=ThemeContext.js.map

package/dist/theme/index.d.ts

@@ -1,4 +1,3 @@
 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, DeepPartial, } from './types';
-//# sourceMappingURL=index.d.ts.map
+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, DeepPartial, } from './types';

package/dist/theme/index.js

@@ -1,3 +1,8 @@
-export { ThemeProvider, useTheme } from './ThemeContext';
-export { themes } from './themes';
-//# sourceMappingURL=index.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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; } });

package/dist/theme/themes.d.ts

@@ -11,4 +11,3 @@
  */
 import type { DensityTheme, ComponentTokens } from './types';
 export declare const themes: Record<DensityTheme, ComponentTokens>;
-//# sourceMappingURL=themes.d.ts.map

package/dist/theme/themes.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
  * Density theme definitions — extracted from component token files.
  *
@@ -9,7 +10,9 @@
  * Values verified against Figma variable defs.
  * Only spacing/sizing tokens live here — colours are constant across densities.
  */
-export const themes = {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themes = void 0;
+exports.themes = {
     compact: {
         dialog: {
             small: { padding: 16, gap: 12, iconSize: 24 },
@@ -33,6 +36,76 @@ export const themes = {
             group: { paddingX: 8, labelPaddingY: 6 },
             separator: { marginY: 4 },
         },
+        list: {
+            sectionGap: 1,
+            item: { gap: 8, paddingX: 8, paddingY: 4, borderRadius: 4, iconSize: 16 },
+            subheader: { paddingX: 8, paddingY: 4 },
+        },
+        checkbox: {
+            gap: 4, borderRadius: 4, focusRingWidth: 2,
+            small: { indicatorSize: 16, iconSize: 10 },
+            default: { indicatorSize: 20, iconSize: 12 },
+            large: { indicatorSize: 24, iconSize: 14 },
+        },
+        alert: {
+            borderRadius: 8,
+            small: { padding: 8, gap: 8, iconSize: 16, closeSize: 16 },
+            default: { padding: 12, gap: 12, iconSize: 20, closeSize: 16 },
+            large: { padding: 16, gap: 16, iconSize: 24, closeSize: 20 },
+        },
+        toggle: {
+            gap: 4, thumbOffset: 2, focusRingWidth: 2,
+            small: { trackWidth: 32, trackHeight: 16, thumbSize: 12 },
+            default: { trackWidth: 40, trackHeight: 20, thumbSize: 16 },
+            large: { trackWidth: 48, trackHeight: 24, thumbSize: 20 },
+        },
+        card: {
+            borderRadius: 8,
+            small: { padding: 8, gap: 8, iconSize: 16, imageHeight: 120 },
+            default: { padding: 12, gap: 12, iconSize: 20, imageHeight: 160 },
+            large: { padding: 16, gap: 16, iconSize: 24, imageHeight: 200 },
+        },
+        badge: {
+            borderRadius: 9999,
+            small: { gap: 2, paddingX: 4, paddingY: 0, dotSize: 6 },
+            default: { gap: 4, paddingX: 6, paddingY: 1, dotSize: 6 },
+            large: { gap: 4, paddingX: 8, paddingY: 2, dotSize: 8 },
+        },
+        radio: {
+            gap: 4, borderRadius: 9999, focusRingWidth: 2,
+            small: { indicatorSize: 16, dotSize: 6 },
+            default: { indicatorSize: 20, dotSize: 8 },
+            large: { indicatorSize: 24, dotSize: 10 },
+        },
+        toast: {
+            borderRadius: 8, minWidth: 280, maxWidth: 420,
+            small: { padding: 8, gap: 8, iconSize: 16, closeSize: 16 },
+            default: { padding: 12, gap: 12, iconSize: 20, closeSize: 16 },
+            large: { padding: 16, gap: 16, iconSize: 24, closeSize: 20 },
+        },
+        chip: {
+            borderRadius: 9999,
+            small: { gap: 2, paddingX: 4, paddingY: 1, iconSize: 12 },
+            default: { gap: 4, paddingX: 6, paddingY: 2, iconSize: 14 },
+            large: { gap: 4, paddingX: 8, paddingY: 4, iconSize: 16 },
+        },
+        avatar: {
+            borderRadius: 9999,
+            small: { size: 24, iconSize: 12 },
+            default: { size: 40, iconSize: 16 },
+            large: { size: 64, iconSize: 24 },
+        },
+        popover: {
+            borderRadius: 8, arrowSize: 8,
+            small: { padding: 8 },
+            default: { padding: 12 },
+            large: { padding: 16 },
+        },
+        tooltip: {
+            borderRadius: 4, arrowSize: 6,
+            small: { paddingX: 4, paddingY: 1 },
+            default: { paddingX: 6, paddingY: 2 },
+        },
     },
     default: {
         dialog: {
@@ -57,6 +130,76 @@ export const themes = {
             group: { paddingX: 12, labelPaddingY: 6 },
             separator: { marginY: 4 },
         },
+        list: {
+            sectionGap: 1,
+            item: { gap: 12, paddingX: 12, paddingY: 6, borderRadius: 4, iconSize: 20 },
+            subheader: { paddingX: 12, paddingY: 6 },
+        },
+        checkbox: {
+            gap: 8, borderRadius: 4, focusRingWidth: 2,
+            small: { indicatorSize: 16, iconSize: 10 },
+            default: { indicatorSize: 20, iconSize: 12 },
+            large: { indicatorSize: 24, iconSize: 14 },
+        },
+        alert: {
+            borderRadius: 8,
+            small: { padding: 12, gap: 12, iconSize: 16, closeSize: 16 },
+            default: { padding: 16, gap: 16, iconSize: 20, closeSize: 16 },
+            large: { padding: 24, gap: 24, iconSize: 24, closeSize: 20 },
+        },
+        toggle: {
+            gap: 8, thumbOffset: 2, focusRingWidth: 2,
+            small: { trackWidth: 32, trackHeight: 16, thumbSize: 12 },
+            default: { trackWidth: 40, trackHeight: 20, thumbSize: 16 },
+            large: { trackWidth: 48, trackHeight: 24, thumbSize: 20 },
+        },
+        card: {
+            borderRadius: 8,
+            small: { padding: 12, gap: 12, iconSize: 16, imageHeight: 120 },
+            default: { padding: 16, gap: 16, iconSize: 20, imageHeight: 160 },
+            large: { padding: 24, gap: 24, iconSize: 24, imageHeight: 200 },
+        },
+        badge: {
+            borderRadius: 9999,
+            small: { gap: 2, paddingX: 4, paddingY: 0, dotSize: 6 },
+            default: { gap: 4, paddingX: 6, paddingY: 1, dotSize: 6 },
+            large: { gap: 4, paddingX: 8, paddingY: 2, dotSize: 8 },
+        },
+        radio: {
+            gap: 8, borderRadius: 9999, focusRingWidth: 2,
+            small: { indicatorSize: 16, dotSize: 6 },
+            default: { indicatorSize: 20, dotSize: 8 },
+            large: { indicatorSize: 24, dotSize: 10 },
+        },
+        toast: {
+            borderRadius: 8, minWidth: 280, maxWidth: 420,
+            small: { padding: 12, gap: 12, iconSize: 16, closeSize: 16 },
+            default: { padding: 16, gap: 16, iconSize: 20, closeSize: 16 },
+            large: { padding: 24, gap: 24, iconSize: 24, closeSize: 20 },
+        },
+        chip: {
+            borderRadius: 9999,
+            small: { gap: 4, paddingX: 6, paddingY: 2, iconSize: 12 },
+            default: { gap: 4, paddingX: 8, paddingY: 4, iconSize: 14 },
+            large: { gap: 8, paddingX: 10, paddingY: 6, iconSize: 16 },
+        },
+        avatar: {
+            borderRadius: 9999,
+            small: { size: 32, iconSize: 12 },
+            default: { size: 48, iconSize: 16 },
+            large: { size: 80, iconSize: 24 },
+        },
+        popover: {
+            borderRadius: 8, arrowSize: 8,
+            small: { padding: 12 },
+            default: { padding: 16 },
+            large: { padding: 24 },
+        },
+        tooltip: {
+            borderRadius: 4, arrowSize: 6,
+            small: { paddingX: 6, paddingY: 2 },
+            default: { paddingX: 8, paddingY: 4 },
+        },
     },
     comfortable: {
         dialog: {
@@ -81,6 +224,75 @@ export const themes = {
             group: { paddingX: 16, labelPaddingY: 6 },
             separator: { marginY: 4 },
         },
+        list: {
+            sectionGap: 1,
+            item: { gap: 16, paddingX: 16, paddingY: 8, borderRadius: 4, iconSize: 24 },
+            subheader: { paddingX: 16, paddingY: 8 },
+        },
+        checkbox: {
+            gap: 12, borderRadius: 4, focusRingWidth: 2,
+            small: { indicatorSize: 16, iconSize: 10 },
+            default: { indicatorSize: 20, iconSize: 12 },
+            large: { indicatorSize: 24, iconSize: 14 },
+        },
+        alert: {
+            borderRadius: 8,
+            small: { padding: 16, gap: 16, iconSize: 16, closeSize: 16 },
+            default: { padding: 24, gap: 24, iconSize: 20, closeSize: 16 },
+            large: { padding: 40, gap: 40, iconSize: 24, closeSize: 20 },
+        },
+        toggle: {
+            gap: 12, thumbOffset: 2, focusRingWidth: 2,
+            small: { trackWidth: 32, trackHeight: 16, thumbSize: 12 },
+            default: { trackWidth: 40, trackHeight: 20, thumbSize: 16 },
+            large: { trackWidth: 48, trackHeight: 24, thumbSize: 20 },
+        },
+        card: {
+            borderRadius: 8,
+            small: { padding: 16, gap: 16, iconSize: 16, imageHeight: 120 },
+            default: { padding: 24, gap: 24, iconSize: 20, imageHeight: 160 },
+            large: { padding: 40, gap: 40, iconSize: 24, imageHeight: 200 },
+        },
+        badge: {
+            borderRadius: 9999,
+            small: { gap: 2, paddingX: 4, paddingY: 0, dotSize: 6 },
+            default: { gap: 4, paddingX: 6, paddingY: 1, dotSize: 6 },
+            large: { gap: 4, paddingX: 8, paddingY: 2, dotSize: 8 },
+        },
+        radio: {
+            gap: 12, borderRadius: 9999, focusRingWidth: 2,
+            small: { indicatorSize: 16, dotSize: 6 },
+            default: { indicatorSize: 20, dotSize: 8 },
+            large: { indicatorSize: 24, dotSize: 10 },
+        },
+        toast: {
+            borderRadius: 8, minWidth: 280, maxWidth: 420,
+            small: { padding: 16, gap: 16, iconSize: 16, closeSize: 16 },
+            default: { padding: 24, gap: 24, iconSize: 20, closeSize: 16 },
+            large: { padding: 40, gap: 40, iconSize: 24, closeSize: 20 },
+        },
+        chip: {
+            borderRadius: 9999,
+            small: { gap: 4, paddingX: 8, paddingY: 4, iconSize: 12 },
+            default: { gap: 8, paddingX: 10, paddingY: 6, iconSize: 14 },
+            large: { gap: 8, paddingX: 12, paddingY: 8, iconSize: 16 },
+        },
+        avatar: {
+            borderRadius: 9999,
+            small: { size: 40, iconSize: 12 },
+            default: { size: 64, iconSize: 16 },
+            large: { size: 96, iconSize: 24 },
+        },
+        popover: {
+            borderRadius: 8, arrowSize: 8,
+            small: { padding: 16 },
+            default: { padding: 24 },
+            large: { padding: 40 },
+        },
+        tooltip: {
+            borderRadius: 4, arrowSize: 6,
+            small: { paddingX: 8, paddingY: 4 },
+            default: { paddingX: 10, paddingY: 6 },
+        },
     },
 };
-//# sourceMappingURL=themes.js.map

package/dist/theme/types.d.ts

@@ -71,6 +71,177 @@ export type SelectThemeTokens = {
     group: SelectGroupTokens;
     separator: SelectSeparatorTokens;
 };
+/** List item tokens (icon size varies by density, unlike Button/Select) */
+export type ListItemTokens = {
+    gap: number;
+    paddingX: number;
+    paddingY: number;
+    borderRadius: number;
+    iconSize: number;
+};
+/** List subheader tokens */
+export type ListSubheaderTokens = {
+    paddingX: number;
+    paddingY: number;
+};
+/** Combined list tokens */
+export type ListThemeTokens = {
+    sectionGap: number;
+    item: ListItemTokens;
+    subheader: ListSubheaderTokens;
+};
+/** Checkbox indicator/icon sizes for one size variant (constant across density) */
+export type CheckboxSizeTokens = {
+    indicatorSize: number;
+    iconSize: number;
+};
+/** Checkbox tokens — gap varies by density; sizes vary by the `size` prop */
+export type CheckboxThemeTokens = {
+    gap: number;
+    borderRadius: number;
+    focusRingWidth: number;
+    small: CheckboxSizeTokens;
+    default: CheckboxSizeTokens;
+    large: CheckboxSizeTokens;
+};
+/** Alert tokens for a single size variant (padding/gap vary by size AND density) */
+export type AlertSizeTokens = {
+    padding: number;
+    gap: number;
+    iconSize: number;
+    closeSize: number;
+};
+/** All three alert sizes + constant radius */
+export type AlertThemeTokens = {
+    borderRadius: number;
+    small: AlertSizeTokens;
+    default: AlertSizeTokens;
+    large: AlertSizeTokens;
+};
+/** Toggle track/thumb sizes for one size variant (constant across density) */
+export type ToggleSizeTokens = {
+    trackWidth: number;
+    trackHeight: number;
+    thumbSize: number;
+};
+/** Toggle tokens — gap varies by density; track sizes vary by the `size` prop */
+export type ToggleThemeTokens = {
+    gap: number;
+    thumbOffset: number;
+    focusRingWidth: number;
+    small: ToggleSizeTokens;
+    default: ToggleSizeTokens;
+    large: ToggleSizeTokens;
+};
+/** Card tokens for one size variant (padding/gap vary by size AND density) */
+export type CardSizeTokens = {
+    padding: number;
+    gap: number;
+    iconSize: number;
+    imageHeight: number;
+};
+/** All three card sizes + constant radius */
+export type CardThemeTokens = {
+    borderRadius: number;
+    small: CardSizeTokens;
+    default: CardSizeTokens;
+    large: CardSizeTokens;
+};
+/** Badge spacing/sizing tokens for one size variant (constant across density) */
+export type BadgeSizeTokens = {
+    gap: number;
+    paddingX: number;
+    paddingY: number;
+    dotSize: number;
+};
+/** Badge tokens — spacing varies by the `size` prop; pill radius is constant */
+export type BadgeThemeTokens = {
+    borderRadius: number;
+    small: BadgeSizeTokens;
+    default: BadgeSizeTokens;
+    large: BadgeSizeTokens;
+};
+/** Radio indicator/dot sizes for one size variant (constant across density) */
+export type RadioSizeTokens = {
+    indicatorSize: number;
+    dotSize: number;
+};
+/** Radio tokens — gap varies by density; sizes vary by the `size` prop */
+export type RadioThemeTokens = {
+    gap: number;
+    borderRadius: number;
+    focusRingWidth: number;
+    small: RadioSizeTokens;
+    default: RadioSizeTokens;
+    large: RadioSizeTokens;
+};
+/** Toast tokens for a single size variant (padding/gap vary by size AND density) */
+export type ToastSizeTokens = {
+    padding: number;
+    gap: number;
+    iconSize: number;
+    closeSize: number;
+};
+/** All three toast sizes + constant radius and width bounds */
+export type ToastThemeTokens = {
+    borderRadius: number;
+    minWidth: number;
+    maxWidth: number;
+    small: ToastSizeTokens;
+    default: ToastSizeTokens;
+    large: ToastSizeTokens;
+};
+/** Chip spacing/sizing tokens for one size variant (padding/gap vary by density) */
+export type ChipSizeTokens = {
+    gap: number;
+    paddingX: number;
+    paddingY: number;
+    iconSize: number;
+};
+/** Chip tokens — spacing varies by size + density; pill radius is constant */
+export type ChipThemeTokens = {
+    borderRadius: number;
+    small: ChipSizeTokens;
+    default: ChipSizeTokens;
+    large: ChipSizeTokens;
+};
+/** Avatar tokens for one size variant. `size` varies by density; `iconSize` is
+ * constant across density (keyed by the `size` prop, like List/Checkbox). */
+export type AvatarSizeTokens = {
+    size: number;
+    iconSize: number;
+};
+/** Avatar tokens — diameter varies by size AND density; pill radius is constant */
+export type AvatarThemeTokens = {
+    borderRadius: number;
+    small: AvatarSizeTokens;
+    default: AvatarSizeTokens;
+    large: AvatarSizeTokens;
+};
+/** Popover tokens for one size variant (padding varies by size AND density) */
+export type PopoverSizeTokens = {
+    padding: number;
+};
+/** All three popover sizes + constant radius and arrow size */
+export type PopoverThemeTokens = {
+    borderRadius: number;
+    arrowSize: number;
+    small: PopoverSizeTokens;
+    default: PopoverSizeTokens;
+    large: PopoverSizeTokens;
+};
+/** Tooltip tokens for one size variant (padding varies by size AND density) */
+export type TooltipSizeTokens = {
+    paddingX: number;
+    paddingY: number;
+};
+/** Tooltip sizes (small + default only) + constant radius and arrow size */
+export type TooltipThemeTokens = {
+    borderRadius: number;
+    arrowSize: number;
+    small: TooltipSizeTokens;
+    default: TooltipSizeTokens;
+};
 /**
  * Component-level tokens that vary by density theme.
  * Extended as new components are added to the library.
@@ -80,9 +251,20 @@ export type ComponentTokens = {
     dialog: DialogThemeTokens;
     input: InputThemeTokens;
     select: SelectThemeTokens;
+    list: ListThemeTokens;
+    checkbox: CheckboxThemeTokens;
+    alert: AlertThemeTokens;
+    toggle: ToggleThemeTokens;
+    card: CardThemeTokens;
+    badge: BadgeThemeTokens;
+    radio: RadioThemeTokens;
+    toast: ToastThemeTokens;
+    chip: ChipThemeTokens;
+    avatar: AvatarThemeTokens;
+    popover: PopoverThemeTokens;
+    tooltip: TooltipThemeTokens;
 };
 /** Utility type for partial overrides at any depth */
 export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/theme/types.js

@@ -1,8 +1,8 @@
+"use strict";
 /**
  * Theme type definitions for the Cast UI density system.
  *
  * The density axis controls spacing/sizing tokens only.
  * Colours and typography are constants — they don't change with density.
  */
-export {};
-//# sourceMappingURL=types.js.map
+Object.defineProperty(exports, "__esModule", { value: true });