@castui/cast-ui 4.9.0 → 4.10.0

package/README.md

@@ -18,8 +18,18 @@ so what designers see in Figma is what ships in the app. Every component
 supports light and dark mode, three spacing densities, and your own brand
 colours — all switchable while the app is running, with no rebuild.
 
+Documentation site — live examples, patterns, templates, themes, motion,
+and the system graph: **https://connagh.github.io/cast-ui/**
+
 Browse every component live in the
-[hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com).
+[hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com),
+or grab the open source
+[Figma kit](https://www.figma.com/community/file/1648821010844688421/cast-ui-kit-for-react-native).
+
+Motion is part of the token system too: durations, easing curves, and
+springs live in the kit's `motion` variable collection, ship as
+`theme.motion`, honour the OS reduce-motion setting, and can be retimed at
+runtime like any colour.
 
 ## Installation
 
@@ -265,6 +275,18 @@ npm run build        # compile to dist/
 | `npm run build-storybook` | Build static Storybook |
 | `npm run build` | TypeScript compilation to `dist/` |
 
+### Documentation site
+
+```bash
+cd site
+npm install
+npm run dev     # local dev server
+npm run smoke   # render every route + evaluate every live example
+```
+
+The site aliases `@castui/cast-ui` to `../src`, so it always documents the
+code in your working tree.
+
 ## CI/CD
 
 | Workflow | Trigger | Purpose |

package/dist/components/Accordion/Accordion.js

@@ -81,6 +81,7 @@ function toOpenArray(v, type) {
 function AccordionItem({ value, title, leadingIcon, disabled = false, children, style, accessibilityLabel, }) {
     const { openValues, toggle, size } = useAccordionContext('AccordionItem');
     const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const sizeTokens = components.accordion[size];
     const isOpen = openValues.includes(value);
@@ -89,11 +90,11 @@ function AccordionItem({ value, title, leadingIcon, disabled = false, children,
     (0, react_1.useEffect)(() => {
         react_native_1.Animated.timing(spin, {
             toValue: isOpen ? 1 : 0,
-            duration: 160,
-            easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+            duration: motion.scale(motion.transition.expand.duration),
+            easing: motion.transition.expand.easing,
             useNativeDriver: true,
         }).start();
-    }, [isOpen, spin]);
+    }, [isOpen, spin, motion]);
     const rotate = spin.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '90deg'],

package/dist/components/Backdrop/Backdrop.js

@@ -23,15 +23,12 @@ const theme_1 = require("../../theme");
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
-/** Fade timing. */
-const DURATION = 220;
-/** react-native-web does not support the native animation driver. */
-const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 function Backdrop({ open, onPress, invisible = false, children, style, accessibilityLabel, }) {
     const { scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const targetOpacity = invisible ? 0 : scheme.overlay.scrimOpacity;
     const fade = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     const [mounted, setMounted] = (0, react_1.useState)(open);
@@ -40,15 +37,17 @@ function Backdrop({ open, onPress, invisible = false, children, style, accessibi
             setMounted(true);
             react_native_1.Animated.timing(fade, {
                 toValue: 1,
-                duration: DURATION,
-                useNativeDriver: USE_NATIVE_DRIVER,
+                duration: motion.scale(motion.transition.standard.duration),
+                easing: motion.transition.standard.easing,
+                useNativeDriver: motion.useNativeDriver,
             }).start();
         }
         else if (mounted) {
             react_native_1.Animated.timing(fade, {
                 toValue: 0,
-                duration: DURATION,
-                useNativeDriver: USE_NATIVE_DRIVER,
+                duration: motion.scale(motion.transition.standard.duration),
+                easing: motion.transition.standard.easing,
+                useNativeDriver: motion.useNativeDriver,
             }).start(({ finished }) => {
                 if (finished)
                     setMounted(false);

package/dist/components/BottomSheet/BottomSheet.js

@@ -34,10 +34,6 @@ const tokens_1 = require("../../tokens");
 // ---------------------------------------------------------------------------
 /** The sheet never grows past this share of the screen height. */
 const MAX_HEIGHT_RATIO = 0.9;
-/** Animation timing. */
-const DURATION = 220;
-/** react-native-web does not support the native animation driver. */
-const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 /** Upward shadow for web (matches Figma shadow/lg, cast above the sheet). */
 const SHADOW_WEB = {
     boxShadow: '0px -4px 6px rgba(0,0,0,0.04), 0px -10px 15px rgba(0,0,0,0.08)',
@@ -97,6 +93,7 @@ function BottomSheetContent({ title: titleText, showHandle = true, children, sty
 // ---------------------------------------------------------------------------
 function BottomSheet({ open, onClose, closeOnBackdropPress = true, ...contentProps }) {
     const { scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const scrimOpacity = scheme.overlay.scrimOpacity;
     const screenHeight = react_native_1.Dimensions.get('window').height;
     const translateY = (0, react_1.useRef)(new react_native_1.Animated.Value(screenHeight)).current;
@@ -108,15 +105,14 @@ function BottomSheet({ open, onClose, closeOnBackdropPress = true, ...contentPro
             react_native_1.Animated.parallel([
                 react_native_1.Animated.timing(backdrop, {
                     toValue: 1,
-                    duration: DURATION,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    duration: motion.scale(motion.transition.standard.duration),
+                    easing: motion.transition.standard.easing,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
                 react_native_1.Animated.spring(translateY, {
                     toValue: 0,
-                    damping: 22,
-                    stiffness: 220,
-                    mass: 0.9,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    ...motion.spring.overlay,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
             ]).start();
         }
@@ -124,13 +120,15 @@ function BottomSheet({ open, onClose, closeOnBackdropPress = true, ...contentPro
             react_native_1.Animated.parallel([
                 react_native_1.Animated.timing(backdrop, {
                     toValue: 0,
-                    duration: DURATION,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    duration: motion.scale(motion.transition.standard.duration),
+                    easing: motion.transition.standard.easing,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
                 react_native_1.Animated.timing(translateY, {
                     toValue: screenHeight,
-                    duration: DURATION,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    duration: motion.scale(motion.transition.standard.duration),
+                    easing: motion.transition.standard.easing,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
             ]).start(({ finished }) => {
                 if (finished)

package/dist/components/Drawer/Drawer.js

@@ -36,10 +36,6 @@ const tokens_1 = require("../../tokens");
 const DEFAULT_WIDTH = 320;
 /** Top/bottom panels never grow past this share of the screen height. */
 const MAX_HEIGHT_RATIO = 0.9;
-/** Animation timing. */
-const DURATION = 240;
-/** react-native-web does not support the native animation driver. */
-const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 const SHADOW_WEB = {
     boxShadow: '0px 0px 6px rgba(0,0,0,0.04), 0px 0px 15px rgba(0,0,0,0.08)',
 };
@@ -99,6 +95,7 @@ function DrawerContent({ anchor = 'left', title: titleText, children, style, acc
 // ---------------------------------------------------------------------------
 function Drawer({ open, onClose, closeOnBackdropPress = true, anchor = 'left', ...contentProps }) {
     const { scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const scrimOpacity = scheme.overlay.scrimOpacity;
     const screen = react_native_1.Dimensions.get('window');
     const horizontal = isHorizontal(anchor);
@@ -113,15 +110,14 @@ function Drawer({ open, onClose, closeOnBackdropPress = true, anchor = 'left', .
             react_native_1.Animated.parallel([
                 react_native_1.Animated.timing(backdrop, {
                     toValue: 1,
-                    duration: DURATION,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    duration: motion.scale(motion.transition.standard.duration),
+                    easing: motion.transition.standard.easing,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
                 react_native_1.Animated.spring(offset, {
                     toValue: 0,
-                    damping: 24,
-                    stiffness: 240,
-                    mass: 0.9,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    ...motion.spring.overlay,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
             ]).start();
         }
@@ -129,13 +125,15 @@ function Drawer({ open, onClose, closeOnBackdropPress = true, anchor = 'left', .
             react_native_1.Animated.parallel([
                 react_native_1.Animated.timing(backdrop, {
                     toValue: 0,
-                    duration: DURATION,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    duration: motion.scale(motion.transition.standard.duration),
+                    easing: motion.transition.standard.easing,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
                 react_native_1.Animated.timing(offset, {
                     toValue: distance * sign,
-                    duration: DURATION,
-                    useNativeDriver: USE_NATIVE_DRIVER,
+                    duration: motion.scale(motion.transition.standard.duration),
+                    easing: motion.transition.standard.easing,
+                    useNativeDriver: motion.useNativeDriver,
                 }),
             ]).start(({ finished }) => {
                 if (finished)

package/dist/components/Progress/Progress.js

@@ -38,6 +38,7 @@ const clamp = (n) => Math.max(0, Math.min(100, n));
 // ---------------------------------------------------------------------------
 function Progress({ value, intent = 'brand', size = 'default', style, accessibilityLabel = 'Loading', }) {
     const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const { trackHeight } = components.progress[size];
     const borderRadius = components.progress.borderRadius;
     const fill = colors[intent].bold.default.bg;
@@ -50,18 +51,18 @@ function Progress({ value, intent = 'brand', size = 'default', style, accessibil
     const onLayout = (e) => setTrackWidth(e.nativeEvent.layout.width);
     const slide = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
-        if (!isIndeterminate || trackWidth === 0)
+        if (!isIndeterminate || trackWidth === 0 || motion.reduceMotion)
             return;
         slide.setValue(0);
         const loop = react_native_1.Animated.loop(react_native_1.Animated.timing(slide, {
             toValue: 1,
-            duration: 1200,
-            easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+            duration: motion.loop.indeterminate.duration,
+            easing: motion.loop.indeterminate.easing,
             useNativeDriver: true,
         }));
         loop.start();
         return () => loop.stop();
-    }, [isIndeterminate, trackWidth, slide]);
+    }, [isIndeterminate, trackWidth, slide, motion]);
     const barWidth = trackWidth * INDETERMINATE_BAR_FRACTION;
     const translateX = slide.interpolate({
         inputRange: [0, 1],

package/dist/components/Skeleton/Skeleton.js

@@ -19,11 +19,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
 const theme_1 = require("../../theme");
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-// react-native-web has no native driver and warns if asked for one.
-const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 /** Default size + corner radius per shape (radius/2, surface/overlay/radius, radius/full). */
 const SHAPE_DEFAULTS = {
     text: { width: 120, height: 12, radius: 4 },
@@ -35,29 +30,32 @@ const SHAPE_DEFAULTS = {
 // ---------------------------------------------------------------------------
 function Skeleton({ shape = 'text', width, height, radius, animated = true, style, accessibilityLabel = 'Loading', }) {
     const { scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const skeletonColors = scheme.skeleton;
     const defaults = SHAPE_DEFAULTS[shape];
     const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     (0, react_1.useEffect)(() => {
-        if (!animated) {
+        if (!animated || motion.reduceMotion) {
             opacity.setValue(1);
             return;
         }
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
             react_native_1.Animated.timing(opacity, {
-                toValue: 0.5,
-                duration: 700,
-                useNativeDriver: USE_NATIVE_DRIVER,
+                toValue: motion.loop.pulse.to,
+                duration: motion.loop.pulse.duration,
+                easing: motion.loop.pulse.easing,
+                useNativeDriver: motion.useNativeDriver,
             }),
             react_native_1.Animated.timing(opacity, {
-                toValue: 1,
-                duration: 700,
-                useNativeDriver: USE_NATIVE_DRIVER,
+                toValue: motion.loop.pulse.from,
+                duration: motion.loop.pulse.duration,
+                easing: motion.loop.pulse.easing,
+                useNativeDriver: motion.useNativeDriver,
             }),
         ]));
         loop.start();
         return () => loop.stop();
-    }, [animated, opacity]);
+    }, [animated, opacity, motion]);
     return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { accessibilityRole: "image", accessibilityLabel: accessibilityLabel, style: [
             {
                 width: width ?? defaults.width,

package/dist/components/SpeedDial/SpeedDial.js

@@ -58,9 +58,6 @@ const ACTION_ICON = {
     default: 'default',
     large: 'default',
 };
-const DURATION_IN = 160;
-const DURATION_OUT = 140;
-const USE_NATIVE_DRIVER = react_native_1.Platform.OS !== 'web';
 const SHADOW_WEB = {
     boxShadow: '0px 4px 6px -1px rgba(0,0,0,0.12), 0px 2px 4px -2px rgba(0,0,0,0.1)',
 };
@@ -111,6 +108,7 @@ function SpeedDialAction({ icon, label, onPress, disabled = false }) {
 // ---------------------------------------------------------------------------
 function SpeedDial({ children, icon = 'add', openIcon = 'close', open: controlledOpen, onOpenChange, defaultOpen = false, direction = 'up', intent = 'brand', size = 'default', backdrop = true, style, accessibilityLabel, }) {
     const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const { fabSize, actionSize, gap } = components.speedDial[size];
     const fabColors = colors[intent].bold.default;
     const isControlled = controlledOpen !== undefined;
@@ -128,10 +126,10 @@ function SpeedDial({ children, icon = 'add', openIcon = 'close', open: controlle
     (0, react_1.useEffect)(() => {
         if (open) {
             setActionsMounted(true);
-            react_native_1.Animated.timing(anim, { toValue: 1, duration: DURATION_IN, useNativeDriver: USE_NATIVE_DRIVER }).start();
+            react_native_1.Animated.timing(anim, { toValue: 1, duration: motion.scale(motion.transition.enter.duration), easing: motion.transition.enter.easing, useNativeDriver: motion.useNativeDriver }).start();
         }
         else if (actionsMounted) {
-            react_native_1.Animated.timing(anim, { toValue: 0, duration: DURATION_OUT, useNativeDriver: USE_NATIVE_DRIVER }).start(({ finished }) => {
+            react_native_1.Animated.timing(anim, { toValue: 0, duration: motion.scale(motion.transition.exit.duration), easing: motion.transition.exit.easing, useNativeDriver: motion.useNativeDriver }).start(({ finished }) => {
                 if (finished)
                     setActionsMounted(false);
             });

package/dist/components/Spinner/Spinner.js

@@ -36,28 +36,29 @@ const theme_1 = require("../../theme");
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
-/** One full rotation, in milliseconds. */
-const ROTATION_DURATION = 800;
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 function Spinner({ intent = 'brand', size = 'default', style, accessibilityLabel = 'Loading', }) {
     const { components, colors, scheme } = (0, theme_1.useTheme)();
+    const motion = (0, theme_1.useMotion)();
     const { diameter, stroke } = components.spinner[size];
     const arc = colors[intent].bold.default.bg;
     const trackColor = scheme.spinner.track;
     const spin = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         spin.setValue(0);
+        if (motion.reduceMotion)
+            return;
         const loop = react_native_1.Animated.loop(react_native_1.Animated.timing(spin, {
             toValue: 1,
-            duration: ROTATION_DURATION,
-            easing: react_native_1.Easing.linear,
+            duration: motion.loop.spin.duration,
+            easing: motion.loop.spin.easing,
             useNativeDriver: true,
         }));
         loop.start();
         return () => loop.stop();
-    }, [spin]);
+    }, [spin, motion]);
     const rotate = spin.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg'],

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-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, breakpoints, breakpointOrder, resolveBreakpoint, resolveResponsiveValue, type Breakpoint, type BreakpointKey, } 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 { 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, breakpoints, breakpointOrder, resolveBreakpoint, resolveResponsiveValue, type Breakpoint, type BreakpointKey, duration, cycle, easing, easingBezier, spring, transition, feedback, loop, motionTokens, resolveMotion, type MotionTokens, type MotionTransition, type MotionOverrides, type MotionDurations, type MotionCycles, type EasingName, type EasingBezierPoints, type SpringConfig, } from './tokens';
+export { ThemeProvider, useTheme, useMotion, themes, applyCastTheme, type Theme, type Motion, 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 { useBreakpoint, useMinWidth, useResponsiveValue, } from './hooks';
 export { Button, type ButtonProps, type ButtonSize } from './components/Button';
 export { Icon, type IconProps } from './components/Icon';

package/dist/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.useResponsiveValue = exports.useMinWidth = exports.useBreakpoint = exports.applyCastTheme = exports.themes = exports.useTheme = exports.ThemeProvider = exports.resolveResponsiveValue = exports.resolveBreakpoint = exports.breakpointOrder = exports.breakpoints = 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.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 = exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = void 0;
-exports.Autocomplete = exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = void 0;
+exports.themes = exports.useMotion = exports.useTheme = exports.ThemeProvider = exports.resolveMotion = exports.motionTokens = exports.loop = exports.feedback = exports.transition = exports.spring = exports.easingBezier = exports.easing = exports.cycle = exports.duration = exports.resolveResponsiveValue = exports.resolveBreakpoint = exports.breakpointOrder = exports.breakpoints = 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.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 = 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.useResponsiveValue = exports.useMinWidth = exports.useBreakpoint = exports.applyCastTheme = 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 = void 0;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -43,10 +43,21 @@ Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function
 Object.defineProperty(exports, "breakpointOrder", { enumerable: true, get: function () { return tokens_1.breakpointOrder; } });
 Object.defineProperty(exports, "resolveBreakpoint", { enumerable: true, get: function () { return tokens_1.resolveBreakpoint; } });
 Object.defineProperty(exports, "resolveResponsiveValue", { enumerable: true, get: function () { return tokens_1.resolveResponsiveValue; } });
+Object.defineProperty(exports, "duration", { enumerable: true, get: function () { return tokens_1.duration; } });
+Object.defineProperty(exports, "cycle", { enumerable: true, get: function () { return tokens_1.cycle; } });
+Object.defineProperty(exports, "easing", { enumerable: true, get: function () { return tokens_1.easing; } });
+Object.defineProperty(exports, "easingBezier", { enumerable: true, get: function () { return tokens_1.easingBezier; } });
+Object.defineProperty(exports, "spring", { enumerable: true, get: function () { return tokens_1.spring; } });
+Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return tokens_1.transition; } });
+Object.defineProperty(exports, "feedback", { enumerable: true, get: function () { return tokens_1.feedback; } });
+Object.defineProperty(exports, "loop", { enumerable: true, get: function () { return tokens_1.loop; } });
+Object.defineProperty(exports, "motionTokens", { enumerable: true, get: function () { return tokens_1.motionTokens; } });
+Object.defineProperty(exports, "resolveMotion", { enumerable: true, get: function () { return tokens_1.resolveMotion; } });
 // Theme
 var theme_1 = require("./theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_1.useTheme; } });
+Object.defineProperty(exports, "useMotion", { enumerable: true, get: function () { return theme_1.useMotion; } });
 Object.defineProperty(exports, "themes", { enumerable: true, get: function () { return theme_1.themes; } });
 Object.defineProperty(exports, "applyCastTheme", { enumerable: true, get: function () { return theme_1.applyCastTheme; } });
 // Hooks

package/dist/theme/ThemeContext.d.ts

@@ -39,6 +39,7 @@
 import React from 'react';
 import { intentColors as defaultIntentColors } from '../tokens/colors';
 import type { ColorMode, ColorScheme, IntentName } from '../tokens/colors';
+import type { MotionTokens, MotionOverrides } from '../tokens/motion';
 import type { DensityTheme, ComponentTokens, DeepPartial } from './types';
 type IntentColorMap = typeof defaultIntentColors;
 export type Theme = {
@@ -52,6 +53,8 @@ export type Theme = {
     colors: IntentColorMap;
     /** Disabled colours of the active scheme — kept for backwards compatibility. */
     disabledColors: ColorScheme['disabled'];
+    /** Motion tokens — animation durations, easings, springs. Constant across density and colour mode. */
+    motion: MotionTokens;
 };
 export type ThemeProviderProps = {
     /** Density theme — controls spacing and padding across all components. */
@@ -71,9 +74,17 @@ export type ThemeProviderProps = {
      * Usually you don't set this by hand — `applyCastTheme` builds it for you.
      */
     scheme?: DeepPartial<ColorScheme>;
+    /**
+     * Primitive-level motion overrides — durations, cycle lengths, easing
+     * beziers, springs. Semantic roles (transition/feedback/loop) are rebuilt
+     * from these, so one duration change flows into every role that uses it.
+     * Usually you don't set this by hand — `applyCastTheme` maps a
+     * cast-theme.json `motion` block onto it.
+     */
+    motion?: MotionOverrides;
     children: React.ReactNode;
 };
-export declare function ThemeProvider({ density, colorMode, colors, scheme: schemeOverride, children, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ density, colorMode, colors, scheme: schemeOverride, motion: motionOverrides, 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

@@ -44,6 +44,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const themes_1 = require("./themes");
 const colors_1 = require("../tokens/colors");
+const motion_1 = require("../tokens/motion");
 // ---------------------------------------------------------------------------
 // Deep merge utility (for partial colour overrides)
 // ---------------------------------------------------------------------------
@@ -77,9 +78,10 @@ const defaultTheme = {
     scheme: colors_1.colorSchemes.light,
     colors: colors_1.colorSchemes.light.intents,
     disabledColors: colors_1.colorSchemes.light.disabled,
+    motion: motion_1.motionTokens,
 };
 const ThemeContext = (0, react_1.createContext)(defaultTheme);
-function ThemeProvider({ density = 'default', colorMode = 'light', colors, scheme: schemeOverride, children, }) {
+function ThemeProvider({ density = 'default', colorMode = 'light', colors, scheme: schemeOverride, motion: motionOverrides, children, }) {
     const theme = (0, react_1.useMemo)(() => {
         const baseScheme = colors_1.colorSchemes[colorMode];
         const resolvedIntents = colors
@@ -98,8 +100,9 @@ function ThemeProvider({ density = 'default', colorMode = 'light', colors, schem
             scheme,
             colors: scheme.intents,
             disabledColors: scheme.disabled,
+            motion: (0, motion_1.resolveMotion)(motionOverrides),
         };
-    }, [density, colorMode, colors, schemeOverride]);
+    }, [density, colorMode, colors, schemeOverride, motionOverrides]);
     return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: theme, children: children }));
 }
 // ---------------------------------------------------------------------------

package/dist/theme/applyCastTheme.d.ts

@@ -42,7 +42,7 @@ export type CastThemeFile = {
     name?: string;
     description?: string;
     generatedAt?: string;
-    /** Theme-file format version emitted by the plugin (currently 3). */
+    /** Theme-file format version emitted by the plugin (version 4 adds motion). */
     version?: number;
     /** Optional explicit schema version for consumer validation. */
     schemaVersion?: number;
@@ -61,10 +61,40 @@ export type CastThemeFile = {
     }>>;
     typography?: Record<string, unknown>;
     shadows?: Record<string, unknown>;
+    /**
+     * Motion block exported from the kit's `motion` variable collection
+     * (cast-theme version 4+). `easing` carries cubic-bezier control points
+     * as [x1, y1, x2, y2]. Motion is mode-independent, so this block is not
+     * keyed by colour mode.
+     */
+    motion?: {
+        duration?: Record<string, number>;
+        cycle?: Record<string, number>;
+        easing?: Record<string, readonly number[]>;
+        spring?: Record<string, {
+            damping?: number;
+            stiffness?: number;
+            mass?: number;
+        }>;
+        feedback?: {
+            press?: {
+                scale?: number;
+            };
+            shake?: {
+                amplitude?: number;
+            };
+        };
+        loop?: {
+            pulse?: {
+                from?: number;
+                to?: number;
+            };
+        };
+    };
     [key: string]: unknown;
 };
 /** The subset of ThemeProvider props this helper produces. */
-export type CastThemeProps = Pick<ThemeProviderProps, 'colorMode' | 'colors' | 'scheme'>;
+export type CastThemeProps = Pick<ThemeProviderProps, 'colorMode' | 'colors' | 'scheme' | 'motion'>;
 /**
  * Build ThemeProvider props from a cast-theme file for a given colour mode.
  *

package/dist/theme/applyCastTheme.js

@@ -33,6 +33,77 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyCastTheme = applyCastTheme;
+const EASING_NAMES = ['standard', 'entrance', 'exit', 'emphasized', 'linear'];
+const DURATION_KEYS = ['instant', 'fast', 'base', 'slow'];
+const CYCLE_KEYS = ['pulse', 'spin', 'sweep'];
+function pickNumbers(source, keys) {
+    if (!source)
+        return undefined;
+    const out = {};
+    for (const key of keys) {
+        const value = source[key];
+        if (typeof value === 'number' && Number.isFinite(value))
+            out[key] = value;
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+/** Map the file's `motion` block onto ThemeProvider motion overrides. */
+function mapMotion(fileMotion) {
+    if (!fileMotion || typeof fileMotion !== 'object')
+        return undefined;
+    const out = {};
+    const durations = pickNumbers(fileMotion.duration, DURATION_KEYS);
+    if (durations)
+        out.duration = durations;
+    const cycles = pickNumbers(fileMotion.cycle, CYCLE_KEYS);
+    if (cycles)
+        out.cycle = cycles;
+    if (fileMotion.easing) {
+        const beziers = {};
+        for (const name of EASING_NAMES) {
+            const pts = fileMotion.easing[name];
+            if (Array.isArray(pts) &&
+                pts.length === 4 &&
+                pts.every((n) => typeof n === 'number' && Number.isFinite(n))) {
+                beziers[name] = [pts[0], pts[1], pts[2], pts[3]];
+            }
+        }
+        if (Object.keys(beziers).length > 0)
+            out.easingBezier = beziers;
+    }
+    const overlay = fileMotion.spring?.overlay;
+    if (overlay && typeof overlay === 'object') {
+        const springOut = {};
+        if (typeof overlay.damping === 'number')
+            springOut.damping = overlay.damping;
+        if (typeof overlay.stiffness === 'number')
+            springOut.stiffness = overlay.stiffness;
+        if (typeof overlay.mass === 'number')
+            springOut.mass = overlay.mass;
+        if (Object.keys(springOut).length > 0)
+            out.spring = { overlay: springOut };
+    }
+    const press = fileMotion.feedback?.press;
+    const shake = fileMotion.feedback?.shake;
+    const fb = {};
+    if (press && typeof press.scale === 'number')
+        fb.press = { scale: press.scale };
+    if (shake && typeof shake.amplitude === 'number')
+        fb.shake = { amplitude: shake.amplitude };
+    if (Object.keys(fb).length > 0)
+        out.feedback = fb;
+    const pulse = fileMotion.loop?.pulse;
+    if (pulse && typeof pulse === 'object') {
+        const pulseOut = {};
+        if (typeof pulse.from === 'number')
+            pulseOut.from = pulse.from;
+        if (typeof pulse.to === 'number')
+            pulseOut.to = pulse.to;
+        if (Object.keys(pulseOut).length > 0)
+            out.loop = { pulse: pulseOut };
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}
 /** Map the file's `text` block onto the scheme's `text` slots (matching keys only). */
 function mapText(fileText) {
     if (!fileText)
@@ -91,5 +162,6 @@ function applyCastTheme(theme, mode = 'light') {
         colorMode: mode,
         colors: intents,
         scheme: Object.keys(schemeOverride).length > 0 ? schemeOverride : undefined,
+        motion: mapMotion(theme?.motion),
     };
 }