@castui/cast-ui 4.8.0 → 4.9.0

package/README.md

@@ -163,6 +163,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

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 { 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 { 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.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;
 // Cast UI — Cross-platform design system component library
 //
 // Tokens
@@ -38,12 +39,21 @@ 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; } });
 // 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, "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/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,4 @@
 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';

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castui/cast-ui",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "A cross-platform design system for React Native (iOS, Android, Web) with multi-theme support.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",