@castui/cast-ui 4.8.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
 
@@ -163,6 +173,61 @@ The full guide lives in the
 [hosted Storybook](https://main--6990f00d7b8682c18d2ed5f3.chromatic.com)
 under **Guides → Customisation**.
 
+## Responsive layout
+
+Cast UI ships a set of breakpoints and hooks for building layouts that adapt
+across phones, tablets, and desktops. The values follow the Material 3 window
+size classes, so the same numbers hold up across watches, phones, foldables,
+tablets, and large screens.
+
+| Tier | Range (dp) | Typical devices |
+|------|-----------|-----------------|
+| `base` | `< 600` | Watches and every phone in portrait. Your default layout. |
+| `sm` | `>= 600` | Large phones in landscape, foldables unfolded, small tablets |
+| `md` | `>= 840` | Tablets |
+| `lg` | `>= 1200` | Laptops and desktops |
+| `xl` | `>= 1600` | Large desktops and TVs |
+
+The hooks read the live window width, so they update on resize, rotation, and
+foldables, and they behave the same on the web. The most common one picks a
+value per tier:
+
+```tsx
+import { useResponsiveValue, useBreakpoint, useMinWidth } from '@castui/cast-ui';
+
+function Gallery() {
+  const columns = useResponsiveValue({ base: 1, md: 2, xl: 4 });
+  // 1 column on phones, 2 on tablets, 4 on large desktops
+  ...
+}
+```
+
+`useResponsiveValue` is mobile-first: a tier with no value falls back to the
+nearest one below it, so `{ base: 1, md: 2 }` gives 1 up to `md` and 2 from
+`md` on. The other two hooks cover the rest:
+
+```tsx
+const tier = useBreakpoint();     // 'base' | 'sm' | 'md' | 'lg' | 'xl'
+const isWide = useMinWidth('lg'); // true from 1200dp up
+```
+
+The raw thresholds are also exported as `breakpoints` if you need a number
+directly.
+
+A few things worth knowing. React Native has no CSS media queries, so a
+breakpoint here is a width threshold you compare against, not automatic
+restyling. `base` is the mobile-first default: you write the phone layout with
+no breakpoint, then add overrides for larger screens. The gap between a small
+and a large phone is better handled with flexible layout (flex, percentages,
+`maxWidth`) than with a breakpoint.
+
+Breakpoints are a fixed foundation, which sets them apart from the rest of the
+theme. They are not part of `ThemeProvider`: they do not change with density,
+they are not touched by brand colour overrides, and they are not carried in
+`cast-theme.json`. The scale stays identical in every app, so layouts stay
+predictable. The same values live as the `breakpoint/*` primitive variables in
+the [cast-ui-kit Figma file](https://www.figma.com/design/JGtlpxLPJMZcwvQ3UZ9ZUl/cast-ui-kit).
+
 ## Theming from Figma — the cast-sync plugin
 
 [`cast-sync/`](./cast-sync) is a Figma plugin that turns the Figma file's
@@ -210,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/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useBreakpoint, useMinWidth, useResponsiveValue } from './useBreakpoint';

package/dist/hooks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResponsiveValue = exports.useMinWidth = exports.useBreakpoint = void 0;
+var useBreakpoint_1 = require("./useBreakpoint");
+Object.defineProperty(exports, "useBreakpoint", { enumerable: true, get: function () { return useBreakpoint_1.useBreakpoint; } });
+Object.defineProperty(exports, "useMinWidth", { enumerable: true, get: function () { return useBreakpoint_1.useMinWidth; } });
+Object.defineProperty(exports, "useResponsiveValue", { enumerable: true, get: function () { return useBreakpoint_1.useResponsiveValue; } });

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,22 @@
+import { type Breakpoint, type BreakpointKey } from '../tokens/breakpoints';
+/**
+ * The active breakpoint tier for the current window width. Mobile-first:
+ * 'base' below `sm`, then 'sm' | 'md' | 'lg' | 'xl' as the width grows.
+ *
+ *   const bp = useBreakpoint(); // 'base' | 'sm' | 'md' | 'lg' | 'xl'
+ */
+export declare function useBreakpoint(): BreakpointKey;
+/**
+ * True when the window is at or above the given breakpoint.
+ *
+ *   const isWide = useMinWidth('lg'); // true from 1024dp up
+ */
+export declare function useMinWidth(breakpoint: Breakpoint): boolean;
+/**
+ * Pick a value for the current breakpoint, mobile-first. Supply values for any
+ * subset of tiers; the value at the current tier wins, falling back to the
+ * nearest defined tier below it.
+ *
+ *   const columns = useResponsiveValue({ base: 1, md: 2, xl: 4 });
+ */
+export declare function useResponsiveValue<T>(values: Partial<Record<BreakpointKey, T>>): T | undefined;

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = useBreakpoint;
+exports.useMinWidth = useMinWidth;
+exports.useResponsiveValue = useResponsiveValue;
+/**
+ * Responsive hooks built on the breakpoint scale.
+ *
+ * These read the live window width via react-native's useWindowDimensions, so
+ * they recompute on resize, rotation, and foldable changes, and they work the
+ * same on web (react-native-web). Breakpoints are a standalone foundation: they
+ * are not part of the theme and do not change with density.
+ */
+const react_native_1 = require("react-native");
+const breakpoints_1 = require("../tokens/breakpoints");
+/**
+ * The active breakpoint tier for the current window width. Mobile-first:
+ * 'base' below `sm`, then 'sm' | 'md' | 'lg' | 'xl' as the width grows.
+ *
+ *   const bp = useBreakpoint(); // 'base' | 'sm' | 'md' | 'lg' | 'xl'
+ */
+function useBreakpoint() {
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    return (0, breakpoints_1.resolveBreakpoint)(width);
+}
+/**
+ * True when the window is at or above the given breakpoint.
+ *
+ *   const isWide = useMinWidth('lg'); // true from 1024dp up
+ */
+function useMinWidth(breakpoint) {
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    return width >= breakpoints_1.breakpoints[breakpoint];
+}
+/**
+ * Pick a value for the current breakpoint, mobile-first. Supply values for any
+ * subset of tiers; the value at the current tier wins, falling back to the
+ * nearest defined tier below it.
+ *
+ *   const columns = useResponsiveValue({ base: 1, md: 2, xl: 4 });
+ */
+function useResponsiveValue(values) {
+    const current = useBreakpoint();
+    return (0, breakpoints_1.resolveResponsiveValue)(values, current);
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { lightColors, darkColors, colorSchemes, intentColors, disabledColors, controlTokens, surfaceTokens, textTokens, overlayTokens, selectColors, menuColors, tagTokens, errorTokens, listColors, checkboxColors, toggleColors, progressColors, tabsColors, radioColors, avatarColors, skeletonColors, sliderColors, tableColors, fontFamily, fontWeight, label, title, body, heading, display, caption, type IntentName, type ProminenceName, type StateName, type ColorMode, type ColorScheme, type LabelSize, iconSize, type IconSize, } from './tokens';
-export { ThemeProvider, useTheme, themes, applyCastTheme, type Theme, type ThemeProviderProps, type CastThemeFile, type CastThemeProps, type DensityTheme, type ComponentTokens, type ButtonSizeTokens, type ButtonThemeTokens, type DialogSizeTokens, type DialogThemeTokens, type InputSizeTokens, type InputThemeTokens, type SelectContentTokens, type SelectOptionTokens, type SelectGroupTokens, type SelectSeparatorTokens, type SelectThemeTokens, type ListItemTokens, type ListSubheaderTokens, type ListThemeTokens, type CheckboxSizeTokens, type CheckboxThemeTokens, type AlertSizeTokens, type AlertThemeTokens, type ToggleSizeTokens, type ToggleThemeTokens, type CardSizeTokens, type CardThemeTokens, type BadgeSizeTokens, type BadgeThemeTokens, type RadioSizeTokens, type RadioThemeTokens, type ToastSizeTokens, type ToastThemeTokens, type ChipSizeTokens, type ChipThemeTokens, type AvatarSizeTokens, type AvatarThemeTokens, type PopoverSizeTokens, type PopoverThemeTokens, type TooltipSizeTokens, type TooltipThemeTokens, type ProgressSizeTokens, type ProgressThemeTokens, type TabsSizeTokens, type TabsThemeTokens, type SpinnerSizeTokens, type SpinnerThemeTokens, type BottomSheetThemeTokens, type LinkSizeTokens, type LinkThemeTokens, type BreadcrumbsSizeTokens, type BreadcrumbsThemeTokens, type CodeBlockSizeTokens, type CodeBlockThemeTokens, type DrawerThemeTokens, type MenuItemTokens, type MenuGroupTokens, type MenuThemeTokens, type ToggleButtonGroupSizeTokens, type ToggleButtonGroupThemeTokens, type AppBarSizeTokens, type AppBarThemeTokens, type SliderSizeTokens, type SliderThemeTokens, type SpeedDialSizeTokens, type SpeedDialThemeTokens, type TableSizeTokens, type TableThemeTokens, type DeepPartial, } from './theme';
+export { 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';
 export { Dialog, DialogContent, type DialogProps, type DialogContentProps, type DialogAction, type DialogSize, } from './components/Dialog';

package/dist/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListDivider = exports.ListSubheader = exports.ListItem = exports.List = exports.SelectDropdown = exports.SelectTag = exports.SelectSeparator = exports.SelectGroup = exports.SelectOption = exports.Select = exports.DialogContent = exports.Dialog = exports.Icon = exports.Button = exports.applyCastTheme = exports.themes = exports.useTheme = exports.ThemeProvider = exports.iconSize = exports.caption = exports.display = exports.heading = exports.body = exports.title = exports.label = exports.fontWeight = exports.fontFamily = exports.tableColors = exports.sliderColors = exports.skeletonColors = exports.avatarColors = exports.radioColors = exports.tabsColors = exports.progressColors = exports.toggleColors = exports.checkboxColors = exports.listColors = exports.errorTokens = exports.tagTokens = exports.menuColors = exports.selectColors = exports.overlayTokens = exports.textTokens = exports.surfaceTokens = exports.controlTokens = exports.disabledColors = exports.intentColors = exports.colorSchemes = exports.darkColors = exports.lightColors = void 0;
-exports.Autocomplete = exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = exports.SpeedDialAction = exports.SpeedDial = exports.Slider = exports.AppBar = exports.ToggleButton = exports.ToggleButtonGroup = exports.MenuContent = exports.MenuLabel = exports.MenuDivider = exports.MenuItem = exports.Menu = exports.DrawerContent = exports.Drawer = exports.CodeBlock = exports.Breadcrumb = exports.Breadcrumbs = exports.Backdrop = exports.Link = exports.AccordionItem = exports.Accordion = exports.Tab = exports.Tabs = exports.BottomSheetContent = exports.BottomSheet = exports.Spinner = exports.Progress = exports.Text = exports.Tooltip = exports.Skeleton = exports.Popover = exports.Avatar = exports.Divider = exports.Chip = exports.Toast = exports.RadioGroup = exports.Radio = exports.Input = exports.Badge = exports.Card = exports.Toggle = exports.Alert = exports.Checkbox = void 0;
+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
@@ -38,12 +39,32 @@ Object.defineProperty(exports, "heading", { enumerable: true, get: function () {
 Object.defineProperty(exports, "display", { enumerable: true, get: function () { return tokens_1.display; } });
 Object.defineProperty(exports, "caption", { enumerable: true, get: function () { return tokens_1.caption; } });
 Object.defineProperty(exports, "iconSize", { enumerable: true, get: function () { return tokens_1.iconSize; } });
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
+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
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useBreakpoint", { enumerable: true, get: function () { return hooks_1.useBreakpoint; } });
+Object.defineProperty(exports, "useMinWidth", { enumerable: true, get: function () { return hooks_1.useMinWidth; } });
+Object.defineProperty(exports, "useResponsiveValue", { enumerable: true, get: function () { return hooks_1.useResponsiveValue; } });
 // Components
 var Button_1 = require("./components/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });

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.