@castui/cast-ui 4.8.0 → 4.10.0

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),
     };
 }

package/dist/theme/index.d.ts

@@ -1,4 +1,5 @@
 export { ThemeProvider, useTheme, type ThemeProviderProps, type Theme } from './ThemeContext';
 export { themes } from './themes';
+export { useMotion, type Motion } from './useMotion';
 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,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyCastTheme = exports.themes = exports.useTheme = exports.ThemeProvider = void 0;
+exports.applyCastTheme = exports.useMotion = 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 useMotion_1 = require("./useMotion");
+Object.defineProperty(exports, "useMotion", { enumerable: true, get: function () { return useMotion_1.useMotion; } });
 var applyCastTheme_1 = require("./applyCastTheme");
 Object.defineProperty(exports, "applyCastTheme", { enumerable: true, get: function () { return applyCastTheme_1.applyCastTheme; } });

package/dist/theme/useMotion.d.ts

@@ -0,0 +1,32 @@
+/**
+ * useMotion — the single access point for animation in Cast UI.
+ *
+ * Returns the theme's motion tokens plus three runtime helpers:
+ *   reduceMotion     true when the OS "reduce motion" setting is on.
+ *   useNativeDriver  the Animated.timing native-driver flag (false on web).
+ *   scale(ms)        a duration in ms, collapsed to 0 when reduceMotion is on.
+ *
+ * Components read a semantic role for the value and wrap durations in scale(),
+ * so the whole library honours reduce-motion from one place:
+ *
+ *   const motion = useMotion();
+ *   Animated.timing(v, {
+ *     toValue: 1,
+ *     duration: motion.scale(motion.transition.standard.duration),
+ *     easing: motion.transition.standard.easing,
+ *     useNativeDriver: motion.useNativeDriver,
+ *   });
+ *
+ * For continuous loops (spinner, skeleton, progress), check reduceMotion and
+ * skip starting the loop.
+ */
+import type { MotionTokens } from '../tokens/motion';
+export type Motion = MotionTokens & {
+    /** True when the OS "reduce motion" accessibility setting is enabled. */
+    reduceMotion: boolean;
+    /** Animated useNativeDriver value. False on web (the web driver can't animate layout). */
+    useNativeDriver: boolean;
+    /** Returns the given duration, or 0 when reduce-motion is on. */
+    scale: (ms: number) => number;
+};
+export declare function useMotion(): Motion;

package/dist/theme/useMotion.js

@@ -0,0 +1,55 @@
+"use strict";
+/**
+ * useMotion — the single access point for animation in Cast UI.
+ *
+ * Returns the theme's motion tokens plus three runtime helpers:
+ *   reduceMotion     true when the OS "reduce motion" setting is on.
+ *   useNativeDriver  the Animated.timing native-driver flag (false on web).
+ *   scale(ms)        a duration in ms, collapsed to 0 when reduceMotion is on.
+ *
+ * Components read a semantic role for the value and wrap durations in scale(),
+ * so the whole library honours reduce-motion from one place:
+ *
+ *   const motion = useMotion();
+ *   Animated.timing(v, {
+ *     toValue: 1,
+ *     duration: motion.scale(motion.transition.standard.duration),
+ *     easing: motion.transition.standard.easing,
+ *     useNativeDriver: motion.useNativeDriver,
+ *   });
+ *
+ * For continuous loops (spinner, skeleton, progress), check reduceMotion and
+ * skip starting the loop.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMotion = useMotion;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const ThemeContext_1 = require("./ThemeContext");
+function useMotion() {
+    const { motion } = (0, ThemeContext_1.useTheme)();
+    const [reduceMotion, setReduceMotion] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        let active = true;
+        const read = react_native_1.AccessibilityInfo.isReduceMotionEnabled;
+        if (typeof read === 'function') {
+            read()
+                .then((value) => {
+                if (active)
+                    setReduceMotion(!!value);
+            })
+                .catch(() => { });
+        }
+        const sub = react_native_1.AccessibilityInfo.addEventListener?.('reduceMotionChanged', (value) => setReduceMotion(!!value));
+        return () => {
+            active = false;
+            sub?.remove?.();
+        };
+    }, []);
+    return {
+        ...motion,
+        reduceMotion,
+        useNativeDriver: react_native_1.Platform.OS !== 'web',
+        scale: (ms) => (reduceMotion ? 0 : ms),
+    };
+}

package/dist/tokens/breakpoints.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Breakpoint scale — named min-width thresholds in density-independent pixels.
+ *
+ * Mirrors the Figma `breakpoint/{sm,md,lg,xl}` primitive variables. This is a
+ * foundation reference scale, not a runtime theme value. The numbers do not
+ * change with density, they are not part of the ThemeProvider theme, and
+ * cast-sync does not export them. Read them with the useBreakpoint /
+ * useResponsiveValue hooks, which watch the live window width.
+ *
+ * Values follow Material 3 window size classes, which are derived from real
+ * device-width data across the whole spectrum. The scale is mobile-first: a
+ * width is "at" a breakpoint when it is greater than or equal to that
+ * breakpoint's value, and anything below `sm` is the implicit `base` tier.
+ *
+ * Device mapping (width in dp):
+ *
+ *   base  < 600   Watches, and every phone in portrait. iPhone SE 320,
+ *                 iPhone 15 390, Pro Max 430, Pixel 7 412, Apple Watch
+ *                 136-205. This is your default, design-here-first layout.
+ *   sm    >= 600  Large phones in landscape, foldables unfolded, small
+ *                 tablets in portrait.
+ *   md    >= 840  Tablets. iPad portrait ~768-834 (sits at the top of sm),
+ *                 iPad landscape and larger tablets land here and up.
+ *   lg    >= 1200 Laptops and desktops.
+ *   xl    >= 1600 Large desktops and TVs.
+ *
+ * React Native has no CSS media queries, so a breakpoint here is a width
+ * threshold you compare the window against at runtime. It does not restyle
+ * anything on its own. Small-vs-large phone differences belong to fluid layout
+ * (flex, percentages, maxWidth), not breakpoints. A watch is its own surface,
+ * not a tier: it falls into `base` and shares the default layout, which is the
+ * safe behaviour for a kit that does not target watchOS.
+ */
+/** The named breakpoint tiers. */
+export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
+/** A breakpoint tier including the implicit below-`sm` base tier. */
+export type BreakpointKey = 'base' | Breakpoint;
+/** Min-width thresholds in dp (Material 3 window size classes). */
+export declare const breakpoints: Record<Breakpoint, number>;
+/** Tiers ordered smallest to largest, base first. */
+export declare const breakpointOrder: readonly BreakpointKey[];
+/**
+ * Resolve a raw window width (dp) to its active breakpoint tier. Mobile-first:
+ * returns the largest tier whose threshold the width has reached, or `base`
+ * below `sm`.
+ */
+export declare function resolveBreakpoint(width: number): BreakpointKey;
+/**
+ * Pick a value for a tier, mobile-first. Supply values for any subset of tiers.
+ * The chosen value is the one at the current tier or, if that tier has none,
+ * the nearest defined tier below it. If nothing is defined at or below the
+ * current tier, the smallest defined tier above is used. Returns undefined when
+ * `values` is empty.
+ *
+ *   resolveResponsiveValue({ base: 1, md: 2, xl: 4 }, 'lg') // => 2
+ */
+export declare function resolveResponsiveValue<T>(values: Partial<Record<BreakpointKey, T>>, current: BreakpointKey): T | undefined;

package/dist/tokens/breakpoints.js

@@ -0,0 +1,92 @@
+"use strict";
+/**
+ * Breakpoint scale — named min-width thresholds in density-independent pixels.
+ *
+ * Mirrors the Figma `breakpoint/{sm,md,lg,xl}` primitive variables. This is a
+ * foundation reference scale, not a runtime theme value. The numbers do not
+ * change with density, they are not part of the ThemeProvider theme, and
+ * cast-sync does not export them. Read them with the useBreakpoint /
+ * useResponsiveValue hooks, which watch the live window width.
+ *
+ * Values follow Material 3 window size classes, which are derived from real
+ * device-width data across the whole spectrum. The scale is mobile-first: a
+ * width is "at" a breakpoint when it is greater than or equal to that
+ * breakpoint's value, and anything below `sm` is the implicit `base` tier.
+ *
+ * Device mapping (width in dp):
+ *
+ *   base  < 600   Watches, and every phone in portrait. iPhone SE 320,
+ *                 iPhone 15 390, Pro Max 430, Pixel 7 412, Apple Watch
+ *                 136-205. This is your default, design-here-first layout.
+ *   sm    >= 600  Large phones in landscape, foldables unfolded, small
+ *                 tablets in portrait.
+ *   md    >= 840  Tablets. iPad portrait ~768-834 (sits at the top of sm),
+ *                 iPad landscape and larger tablets land here and up.
+ *   lg    >= 1200 Laptops and desktops.
+ *   xl    >= 1600 Large desktops and TVs.
+ *
+ * React Native has no CSS media queries, so a breakpoint here is a width
+ * threshold you compare the window against at runtime. It does not restyle
+ * anything on its own. Small-vs-large phone differences belong to fluid layout
+ * (flex, percentages, maxWidth), not breakpoints. A watch is its own surface,
+ * not a tier: it falls into `base` and shares the default layout, which is the
+ * safe behaviour for a kit that does not target watchOS.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakpointOrder = exports.breakpoints = void 0;
+exports.resolveBreakpoint = resolveBreakpoint;
+exports.resolveResponsiveValue = resolveResponsiveValue;
+/** Min-width thresholds in dp (Material 3 window size classes). */
+exports.breakpoints = {
+    sm: 600,
+    md: 840,
+    lg: 1200,
+    xl: 1600,
+};
+/** Tiers ordered smallest to largest, base first. */
+exports.breakpointOrder = [
+    'base',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+];
+/**
+ * Resolve a raw window width (dp) to its active breakpoint tier. Mobile-first:
+ * returns the largest tier whose threshold the width has reached, or `base`
+ * below `sm`.
+ */
+function resolveBreakpoint(width) {
+    if (width >= exports.breakpoints.xl)
+        return 'xl';
+    if (width >= exports.breakpoints.lg)
+        return 'lg';
+    if (width >= exports.breakpoints.md)
+        return 'md';
+    if (width >= exports.breakpoints.sm)
+        return 'sm';
+    return 'base';
+}
+/**
+ * Pick a value for a tier, mobile-first. Supply values for any subset of tiers.
+ * The chosen value is the one at the current tier or, if that tier has none,
+ * the nearest defined tier below it. If nothing is defined at or below the
+ * current tier, the smallest defined tier above is used. Returns undefined when
+ * `values` is empty.
+ *
+ *   resolveResponsiveValue({ base: 1, md: 2, xl: 4 }, 'lg') // => 2
+ */
+function resolveResponsiveValue(values, current) {
+    const idx = exports.breakpointOrder.indexOf(current);
+    for (let i = idx; i >= 0; i--) {
+        const v = values[exports.breakpointOrder[i]];
+        if (v !== undefined)
+            return v;
+    }
+    for (let i = idx + 1; i < exports.breakpointOrder.length; i++) {
+        const v = values[exports.breakpointOrder[i]];
+        if (v !== undefined)
+            return v;
+    }
+    return undefined;
+}

package/dist/tokens/index.d.ts

@@ -1,3 +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, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, } from './colors';
 export { fontFamily, fontWeight, label, title, body, heading, display, caption, type LabelSize, } from './typography';
 export { iconSize, type IconSize } from './icon';
+export { breakpoints, breakpointOrder, resolveBreakpoint, resolveResponsiveValue, type Breakpoint, type BreakpointKey, } from './breakpoints';
+export { 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 './motion';

package/dist/tokens/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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;
 var colors_1 = require("./colors");
 Object.defineProperty(exports, "lightColors", { enumerable: true, get: function () { return colors_1.lightColors; } });
 Object.defineProperty(exports, "darkColors", { enumerable: true, get: function () { return colors_1.darkColors; } });
@@ -36,3 +36,19 @@ Object.defineProperty(exports, "display", { enumerable: true, get: function () {
 Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return typography_1.caption; } });
 var icon_1 = require("./icon");
 Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return icon_1.iconSize; } });
+var breakpoints_1 = require("./breakpoints");
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return breakpoints_1.breakpoints; } });
+Object.defineProperty(exports, "breakpointOrder", { enumerable: true, get: function () { return breakpoints_1.breakpointOrder; } });
+Object.defineProperty(exports, "resolveBreakpoint", { enumerable: true, get: function () { return breakpoints_1.resolveBreakpoint; } });
+Object.defineProperty(exports, "resolveResponsiveValue", { enumerable: true, get: function () { return breakpoints_1.resolveResponsiveValue; } });
+var motion_1 = require("./motion");
+Object.defineProperty(exports, "duration", { enumerable: true, get: function () { return motion_1.duration; } });
+Object.defineProperty(exports, "cycle", { enumerable: true, get: function () { return motion_1.cycle; } });
+Object.defineProperty(exports, "easing", { enumerable: true, get: function () { return motion_1.easing; } });
+Object.defineProperty(exports, "easingBezier", { enumerable: true, get: function () { return motion_1.easingBezier; } });
+Object.defineProperty(exports, "spring", { enumerable: true, get: function () { return motion_1.spring; } });
+Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return motion_1.transition; } });
+Object.defineProperty(exports, "feedback", { enumerable: true, get: function () { return motion_1.feedback; } });
+Object.defineProperty(exports, "loop", { enumerable: true, get: function () { return motion_1.loop; } });
+Object.defineProperty(exports, "motionTokens", { enumerable: true, get: function () { return motion_1.motionTokens; } });
+Object.defineProperty(exports, "resolveMotion", { enumerable: true, get: function () { return motion_1.resolveMotion; } });

package/dist/tokens/motion.d.ts

@@ -0,0 +1,196 @@
+/**
+ * Motion tokens — the single source for animation timing across Cast UI.
+ *
+ * Two layers, mirroring the colour and spacing token system:
+ *   Primitive  raw durations, cubic-bezier easings, spring configs.
+ *   Semantic   named roles (transition / feedback / loop) that components read.
+ *
+ * Motion is constant across density and colour mode. Density changes spacing
+ * only. Easings are real cubic-beziers, so the same numbers map 1:1 to the
+ * `motion` variable collection in the Figma kit and to CSS.
+ *
+ * Components never read a raw number. They read a semantic role through
+ * useMotion(), for example motion.transition.standard or motion.loop.spin.
+ *
+ * Theming: a cast-theme.json can carry a `motion` block (exported by the
+ * cast-sync plugin from the kit's `motion` variable collection). ThemeProvider
+ * accepts those primitive-level overrides via its `motion` prop and
+ * `resolveMotion` rebuilds every semantic role from them, so a brand can
+ * re-tune timing with no code changes.
+ */
+type EasingFn = (value: number) => number;
+export type EasingName = 'standard' | 'entrance' | 'exit' | 'emphasized' | 'linear';
+/** Cubic-bezier control points as [x1, y1, x2, y2]. */
+export type EasingBezierPoints = readonly [number, number, number, number];
+export type MotionDurations = {
+    /** Micro feedback, e.g. a press. */
+    instant: number;
+    /** Small enters/exits and expands. */
+    fast: number;
+    /** The general state-to-state duration. */
+    base: number;
+    /** Large surfaces or long distances. */
+    slow: number;
+};
+export type MotionCycles = {
+    /** Skeleton fade half-cycle. */
+    pulse: number;
+    /** Spinner full rotation. */
+    spin: number;
+    /** Progress indeterminate sweep. */
+    sweep: number;
+};
+export type SpringConfig = {
+    damping: number;
+    stiffness: number;
+    mass: number;
+};
+export type MotionTransition = {
+    duration: number;
+    easing: EasingFn;
+};
+export type MotionTokens = {
+    duration: MotionDurations;
+    cycle: MotionCycles;
+    easing: Record<EasingName, EasingFn>;
+    easingBezier: Record<EasingName, EasingBezierPoints>;
+    spring: {
+        overlay: SpringConfig;
+    };
+    transition: {
+        standard: MotionTransition;
+        enter: MotionTransition;
+        exit: MotionTransition;
+        expand: MotionTransition;
+    };
+    feedback: {
+        press: MotionTransition & {
+            scale: number;
+        };
+        shake: MotionTransition & {
+            amplitude: number;
+        };
+        pop: MotionTransition;
+    };
+    loop: {
+        spin: MotionTransition;
+        pulse: MotionTransition & {
+            from: number;
+            to: number;
+        };
+        indeterminate: MotionTransition;
+    };
+};
+/**
+ * Primitive-level motion overrides, the shape a cast-theme.json `motion`
+ * block maps onto. Only numbers and beziers — semantic roles are rebuilt
+ * from these by `resolveMotion`, never overridden directly.
+ */
+export type MotionOverrides = {
+    duration?: Partial<MotionDurations>;
+    cycle?: Partial<MotionCycles>;
+    easingBezier?: Partial<Record<EasingName, EasingBezierPoints>>;
+    spring?: {
+        overlay?: Partial<SpringConfig>;
+    };
+    feedback?: {
+        press?: {
+            scale?: number;
+        };
+        shake?: {
+            amplitude?: number;
+        };
+    };
+    loop?: {
+        pulse?: {
+            from?: number;
+            to?: number;
+        };
+    };
+};
+/** Primitive: transition durations in ms (state to state). */
+export declare const duration: MotionDurations;
+/** Primitive: loop cycle lengths in ms (continuous, not state to state). */
+export declare const cycle: MotionCycles;
+/**
+ * Primitive: easing control points as cubic-bezier [x1, y1, x2, y2].
+ * This is the design-side value. The `motion` collection in the Figma kit
+ * carries these exact numbers (easing/{name}/{x1,y1,x2,y2}).
+ */
+export declare const easingBezier: Record<EasingName, EasingBezierPoints>;
+/** Primitive: easing as runtime functions (the code-side value). */
+export declare const easing: Record<EasingName, EasingFn>;
+/** Primitive: spring configs for Animated.spring. */
+export declare const spring: {
+    overlay: SpringConfig;
+};
+export declare const transition: {
+    /** General state-to-state fade or slide. Backdrops, overlay fades. */
+    standard: {
+        duration: number;
+        easing: EasingFn;
+    };
+    /** Something appearing. Decelerates as it lands. */
+    enter: {
+        duration: number;
+        easing: EasingFn;
+    };
+    /** Something leaving. Accelerates as it goes. */
+    exit: {
+        duration: number;
+        easing: EasingFn;
+    };
+    /** Expand or collapse. Accordion chevron, height reveals. */
+    expand: {
+        duration: number;
+        easing: EasingFn;
+    };
+};
+export declare const feedback: {
+    /** Press-down scale on a pressable (reserved for future use). */
+    press: {
+        duration: number;
+        easing: EasingFn;
+        scale: number;
+    };
+    /** Error shake, e.g. input rejection. amplitude in px (future use). */
+    shake: {
+        duration: number;
+        easing: EasingFn;
+        amplitude: number;
+    };
+    /** Pop-in for a check, badge, or toast (future use). */
+    pop: {
+        duration: number;
+        easing: EasingFn;
+    };
+};
+export declare const loop: {
+    /** Spinner rotation. */
+    spin: {
+        duration: number;
+        easing: EasingFn;
+    };
+    /** Skeleton pulse. Fades opacity between from and to. */
+    pulse: {
+        duration: number;
+        easing: EasingFn;
+        from: number;
+        to: number;
+    };
+    /** Progress indeterminate sweep. */
+    indeterminate: {
+        duration: number;
+        easing: EasingFn;
+    };
+};
+/** The full default motion token set, exposed on the theme as `theme.motion`. */
+export declare const motionTokens: MotionTokens;
+/**
+ * Resolve a full motion token set from primitive-level overrides.
+ * With no overrides this returns the shared default set (no allocation).
+ * Semantic roles are always rebuilt from the merged primitives, so a
+ * duration override flows into every role that uses it.
+ */
+export declare function resolveMotion(overrides?: MotionOverrides): MotionTokens;
+export {};