@soroush.tech/design-system 1.3.3 → 2.0.0-alpha.1

package/dist/{theme-Bnc03K83.cjs → theme-DfAqr7qo.cjs}

@@ -1,10 +1,31 @@
 const require_utils = require("./utils.cjs");
+let _soroush_tech_styled_system = require("@soroush.tech/styled-system");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
 //#region src/theme/utils/spacing.ts
 const spacing = (units) => `${8 * units}px`;
 //#endregion
+//#region src/theme/breakpoints.ts
+/**
+* The scale with its helpers attached as non-enumerable methods: the engine, the theme's JSON
+* and a spread see only the sizes, while `theme.breakpoints.up('md')` works. `createTheme`
+* and `ThemeProvider` re-attach them after a merge, so they always follow the theme's own
+* breakpoints.
+*/
+const withBreakpointHelpers = (scale) => {
+	const sizes = { ...scale };
+	const helpers = {
+		...(0, _soroush_tech_styled_system.createMediaHelpers)(sizes),
+		containerQueries: (0, _soroush_tech_styled_system.createContainerQueries)(sizes)
+	};
+	for (const [name, helper] of Object.entries(helpers)) Object.defineProperty(sizes, name, {
+		value: helper,
+		enumerable: false
+	});
+	return sizes;
+};
+//#endregion
 //#region src/theme/utils/createTheme.ts
 const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 const deepMerge = (base, overrides) => {
@@ -24,8 +45,17 @@ const deepMerge = (base, overrides) => {
 * - `undefined` override values are ignored - a key can be added or replaced,
 *   never removed.
 * - Neither argument is mutated; untouched branches keep referential identity.
+* - `breakpoints` gets its query helpers back, built from the merged sizes.
 */
-const createTheme = (base, overrides) => deepMerge(base, overrides);
+const createTheme = (base, overrides) => {
+	const theme = deepMerge(base, overrides);
+	return withHelpers(theme);
+};
+/** A theme whose `breakpoints` carry the query helpers - added when a hand-built theme lacks them. */
+const withHelpers = (theme) => theme.breakpoints && !("up" in theme.breakpoints) ? {
+	...theme,
+	breakpoints: withBreakpointHelpers(theme.breakpoints)
+} : theme;
 //#endregion
 //#region src/theme/themes.ts
 const shadow = {
@@ -141,6 +171,65 @@ const space = {
 	10: spacing(10),
 	auto: "auto"
 };
+const breakpoints = withBreakpointHelpers({
+	xs: "0px",
+	sm: "600px",
+	md: "840px",
+	lg: "1200px",
+	xl: "1600px"
+});
+const layout = {
+	xs: {
+		bars: { top: 8 },
+		panels: {
+			start: {
+				mode: "hidden",
+				width: "280px",
+				railWidth: 9
+			},
+			end: {
+				mode: "hidden",
+				width: "360px",
+				railWidth: 9
+			}
+		},
+		content: {
+			columns: 4,
+			margin: 2,
+			gutter: 2,
+			mode: "fluid"
+		}
+	},
+	sm: {
+		panels: { start: { mode: "collapsed" } },
+		content: {
+			columns: 8,
+			margin: 4
+		}
+	},
+	md: {
+		panels: { end: { mode: "overlay" } },
+		content: {
+			columns: 12,
+			margin: 3,
+			gutter: 3
+		}
+	},
+	lg: {
+		panels: { end: { width: "412px" } },
+		content: {
+			mode: "fixed",
+			maxWidth: "1200px"
+		}
+	},
+	xl: {
+		panels: {
+			start: { mode: "inline" },
+			end: { mode: "inline" }
+		},
+		content: { maxWidth: "1600px" }
+	}
+};
 const typography = {
 	h1: {
 		element: "h1",
@@ -232,6 +321,8 @@ const baseTheme = {
 	icon,
 	sizes,
 	space,
+	breakpoints,
+	layout,
 	zOrder,
 	blur: "12px",
 	colorScheme: "dark",
@@ -316,10 +407,15 @@ const baseTheme = {
 	shadow,
 	shadows
 };
+/**
+* The query helpers for `baseTheme`'s breakpoints, as plain functions. A theme with its own
+* breakpoints has the same helpers on `theme.breakpoints`.
+*/
+const { up, down, only, between, not, containerQueries } = breakpoints;
 //#endregion
 //#region src/theme/ThemeProvider.tsx
 function ThemeProvider({ children, theme = baseTheme, defaults }) {
-	const value = (0, react.useMemo)(() => defaults ? createTheme(theme, { defaults }) : theme, [theme, defaults]);
+	const value = (0, react.useMemo)(() => defaults ? createTheme(theme, { defaults }) : withHelpers(theme), [theme, defaults]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
 		theme: value,
 		children
@@ -373,18 +469,42 @@ Object.defineProperty(exports, "baseTheme", {
 		return baseTheme;
 	}
 });
+Object.defineProperty(exports, "between", {
+	enumerable: true,
+	get: function() {
+		return between;
+	}
+});
 Object.defineProperty(exports, "borderWidths", {
 	enumerable: true,
 	get: function() {
 		return borderWidths;
 	}
 });
+Object.defineProperty(exports, "breakpoints", {
+	enumerable: true,
+	get: function() {
+		return breakpoints;
+	}
+});
+Object.defineProperty(exports, "containerQueries", {
+	enumerable: true,
+	get: function() {
+		return containerQueries;
+	}
+});
 Object.defineProperty(exports, "createTheme", {
 	enumerable: true,
 	get: function() {
 		return createTheme;
 	}
 });
+Object.defineProperty(exports, "down", {
+	enumerable: true,
+	get: function() {
+		return down;
+	}
+});
 Object.defineProperty(exports, "fontSizes", {
 	enumerable: true,
 	get: function() {
@@ -409,6 +529,12 @@ Object.defineProperty(exports, "icon", {
 		return icon;
 	}
 });
+Object.defineProperty(exports, "layout", {
+	enumerable: true,
+	get: function() {
+		return layout;
+	}
+});
 Object.defineProperty(exports, "letterSpacings", {
 	enumerable: true,
 	get: function() {
@@ -421,6 +547,18 @@ Object.defineProperty(exports, "lineHeights", {
 		return lineHeights;
 	}
 });
+Object.defineProperty(exports, "not", {
+	enumerable: true,
+	get: function() {
+		return not;
+	}
+});
+Object.defineProperty(exports, "only", {
+	enumerable: true,
+	get: function() {
+		return only;
+	}
+});
 Object.defineProperty(exports, "radii", {
 	enumerable: true,
 	get: function() {
@@ -445,6 +583,12 @@ Object.defineProperty(exports, "typography", {
 		return typography;
 	}
 });
+Object.defineProperty(exports, "up", {
+	enumerable: true,
+	get: function() {
+		return up;
+	}
+});
 Object.defineProperty(exports, "useDefaultProps", {
 	enumerable: true,
 	get: function() {
@@ -457,6 +601,12 @@ Object.defineProperty(exports, "useTheme", {
 		return useTheme;
 	}
 });
+Object.defineProperty(exports, "withBreakpointHelpers", {
+	enumerable: true,
+	get: function() {
+		return withBreakpointHelpers;
+	}
+});
 Object.defineProperty(exports, "withTheme", {
 	enumerable: true,
 	get: function() {

package/dist/theme.cjs

@@ -1,23 +1,32 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-DfAqr7qo.cjs");
 exports.ThemeProvider = require_theme.ThemeProvider;
 exports.avatar = require_theme.avatar;
 exports.baseTheme = require_theme.baseTheme;
+exports.between = require_theme.between;
 exports.borderWidths = require_theme.borderWidths;
+exports.breakpoints = require_theme.breakpoints;
+exports.containerQueries = require_theme.containerQueries;
 exports.createTheme = require_theme.createTheme;
+exports.down = require_theme.down;
 exports.fontSizes = require_theme.fontSizes;
 exports.fontWeights = require_theme.fontWeights;
 exports.fonts = require_theme.fonts;
 exports.icon = require_theme.icon;
+exports.layout = require_theme.layout;
 exports.letterSpacings = require_theme.letterSpacings;
 exports.lineHeights = require_theme.lineHeights;
+exports.not = require_theme.not;
+exports.only = require_theme.only;
 exports.radii = require_theme.radii;
 exports.sizes = require_theme.sizes;
 exports.space = require_theme.space;
 exports.themeDefault = require_themeDefault.themeDefault;
 exports.typography = require_theme.typography;
+exports.up = require_theme.up;
 exports.useDefaultProps = require_theme.useDefaultProps;
 exports.useTheme = require_theme.useTheme;
+exports.withBreakpointHelpers = require_theme.withBreakpointHelpers;
 exports.withTheme = require_theme.withTheme;
 exports.zOrder = require_theme.zOrder;

package/dist/theme.d.cts

@@ -1,3 +1,3 @@
-import { $ as DeepPartial, A as ThemeSizes, B as baseTheme, C as ThemeFonts, D as ThemePalette, E as ThemeLineHeights, F as ThemeTypographyVariants, G as icon, H as fontSizes, I as ThemeZOrder, J as radii, K as letterSpacings, L as TypographyVariant, M as ThemeSpace, N as ThemeSwitch, O as ThemeRadii, P as ThemeText, Q as zOrder, R as TypographyVariantStyle, S as ThemeFontWeights, T as ThemeLetterSpacings, U as fontWeights, V as borderWidths, W as fonts, X as space, Y as sizes, Z as typography, _ as ThemeBackground, a as CardSlotIconProps, b as ThemeComponents, c as ComponentStyle, d as PaletteColor, et as ThemeOverride, f as PaletteEntry, g as ThemeAvatarSizes, h as Theme, i as CardOwnerState, j as ThemeSkeleton, k as ThemeShadow, l as ComponentVariant, m as SizeEntry, n as ButtonVariants, o as CardSlotTypographyProps, p as PressableOwnerState, q as lineHeights, r as CSSObject, s as ComponentConfig, t as ButtonOwnerState, tt as createTheme, u as OpenScale, v as ThemeBorder, w as ThemeIconSizes, x as ThemeDefaults, y as ThemeBorderWidths, z as avatar } from "./themes-kbuYiwCi.cjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-D3iQQ0L3.cjs";
-export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };
+import { $ as between, A as ThemeBreakpoints, B as ThemeRadii, C as PressableOwnerState, Ct as withBreakpointHelpers, D as ThemeBackground, E as ThemeAvatarSizes, F as ThemeIconSizes, G as ThemeSwitch, H as ThemeSizes, I as ThemeLayout, J as ThemeZOrder, K as ThemeText, L as ThemeLetterSpacings, M as ThemeDefaults, N as ThemeFontWeights, O as ThemeBorder, P as ThemeFonts, Q as baseTheme, R as ThemeLineHeights, S as PaletteEntry, St as BreakpointHelpers, T as Theme, U as ThemeSkeleton, V as ThemeShadow, W as ThemeSpace, X as TypographyVariantStyle, Y as TypographyVariant, Z as avatar, _ as LayoutPanel, _t as up, a as CSSObject, at as fontWeights, b as OpenScale, bt as ThemeOverride, c as CardSlotTypographyProps, ct as layout, d as ComponentVariant, dt as not, et as borderWidths, f as DefaultBreakpoints, ft as only, g as LayoutLength, gt as typography, h as LayoutEntry, ht as space, i as ButtonVariants, it as fontSizes, j as ThemeComponents, k as ThemeBorderWidths, l as ComponentConfig, lt as letterSpacings, m as LayoutContent, mt as sizes, n as BreakpointOverrides, nt as containerQueries, o as CardOwnerState, ot as fonts, p as LayoutBars, pt as radii, q as ThemeTypographyVariants, r as ButtonOwnerState, rt as down, s as CardSlotIconProps, st as icon, t as BreakpointKey, tt as breakpoints, u as ComponentStyle, ut as lineHeights, v as LayoutPanels, vt as zOrder, w as SizeEntry, x as PaletteColor, xt as createTheme, y as LayoutSpace, yt as DeepPartial, z as ThemePalette } from "./themes-CtTQTVqe.cjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-C2e925FY.cjs";
+export { BreakpointHelpers, BreakpointKey, BreakpointOverrides, ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, DefaultBreakpoints, LayoutBars, LayoutContent, LayoutEntry, LayoutLength, LayoutPanel, LayoutPanels, LayoutSpace, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeBreakpoints, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLayout, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };

package/dist/theme.d.mts

@@ -1,3 +1,3 @@
-import { $ as DeepPartial, A as ThemeSizes, B as baseTheme, C as ThemeFonts, D as ThemePalette, E as ThemeLineHeights, F as ThemeTypographyVariants, G as icon, H as fontSizes, I as ThemeZOrder, J as radii, K as letterSpacings, L as TypographyVariant, M as ThemeSpace, N as ThemeSwitch, O as ThemeRadii, P as ThemeText, Q as zOrder, R as TypographyVariantStyle, S as ThemeFontWeights, T as ThemeLetterSpacings, U as fontWeights, V as borderWidths, W as fonts, X as space, Y as sizes, Z as typography, _ as ThemeBackground, a as CardSlotIconProps, b as ThemeComponents, c as ComponentStyle, d as PaletteColor, et as ThemeOverride, f as PaletteEntry, g as ThemeAvatarSizes, h as Theme, i as CardOwnerState, j as ThemeSkeleton, k as ThemeShadow, l as ComponentVariant, m as SizeEntry, n as ButtonVariants, o as CardSlotTypographyProps, p as PressableOwnerState, q as lineHeights, r as CSSObject, s as ComponentConfig, t as ButtonOwnerState, tt as createTheme, u as OpenScale, v as ThemeBorder, w as ThemeIconSizes, x as ThemeDefaults, y as ThemeBorderWidths, z as avatar } from "./themes-kbuYiwCi.mjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-NBVilQuP.mjs";
-export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };
+import { $ as between, A as ThemeBreakpoints, B as ThemeRadii, C as PressableOwnerState, Ct as withBreakpointHelpers, D as ThemeBackground, E as ThemeAvatarSizes, F as ThemeIconSizes, G as ThemeSwitch, H as ThemeSizes, I as ThemeLayout, J as ThemeZOrder, K as ThemeText, L as ThemeLetterSpacings, M as ThemeDefaults, N as ThemeFontWeights, O as ThemeBorder, P as ThemeFonts, Q as baseTheme, R as ThemeLineHeights, S as PaletteEntry, St as BreakpointHelpers, T as Theme, U as ThemeSkeleton, V as ThemeShadow, W as ThemeSpace, X as TypographyVariantStyle, Y as TypographyVariant, Z as avatar, _ as LayoutPanel, _t as up, a as CSSObject, at as fontWeights, b as OpenScale, bt as ThemeOverride, c as CardSlotTypographyProps, ct as layout, d as ComponentVariant, dt as not, et as borderWidths, f as DefaultBreakpoints, ft as only, g as LayoutLength, gt as typography, h as LayoutEntry, ht as space, i as ButtonVariants, it as fontSizes, j as ThemeComponents, k as ThemeBorderWidths, l as ComponentConfig, lt as letterSpacings, m as LayoutContent, mt as sizes, n as BreakpointOverrides, nt as containerQueries, o as CardOwnerState, ot as fonts, p as LayoutBars, pt as radii, q as ThemeTypographyVariants, r as ButtonOwnerState, rt as down, s as CardSlotIconProps, st as icon, t as BreakpointKey, tt as breakpoints, u as ComponentStyle, ut as lineHeights, v as LayoutPanels, vt as zOrder, w as SizeEntry, x as PaletteColor, xt as createTheme, y as LayoutSpace, yt as DeepPartial, z as ThemePalette } from "./themes-CCguU8uo.mjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-iHyGhLkM.mjs";
+export { BreakpointHelpers, BreakpointKey, BreakpointOverrides, ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, DefaultBreakpoints, LayoutBars, LayoutContent, LayoutEntry, LayoutLength, LayoutPanel, LayoutPanels, LayoutSpace, OpenScale, PaletteColor, PaletteEntry, PressableOwnerState, SizeEntry, Theme, ThemeAvatarSizes, ThemeBackground, ThemeBorder, ThemeBorderWidths, ThemeBreakpoints, ThemeComponents, ThemeDefaults, ThemeFontWeights, ThemeFonts, ThemeIconSizes, ThemeLayout, ThemeLetterSpacings, ThemeLineHeights, type ThemeOverride, ThemePalette, ThemeProvider, ThemeRadii, ThemeShadow, ThemeSizes, ThemeSkeleton, ThemeSpace, ThemeSwitch, ThemeText, ThemeTypographyVariants, ThemeZOrder, TypographyVariant, TypographyVariantStyle, avatar, baseTheme, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };

package/dist/theme.mjs

@@ -1,3 +1,3 @@
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { _ as typography, a as avatar, c as fontSizes, d as icon, f as letterSpacings, g as space, h as sizes, i as ThemeProvider, l as fontWeights, m as radii, n as useDefaultProps, o as baseTheme, p as lineHeights, r as useTheme, s as borderWidths, t as withTheme, u as fonts, v as zOrder, y as createTheme } from "./theme-BuqqFbsz.mjs";
-export { ThemeProvider, avatar, baseTheme, borderWidths, createTheme, fontSizes, fontWeights, fonts, icon, letterSpacings, lineHeights, radii, sizes, space, themeDefault, typography, useDefaultProps, useTheme, withTheme, zOrder };
+import { C as space, D as createTheme, E as zOrder, O as withBreakpointHelpers, S as sizes, T as up, _ as letterSpacings, a as avatar, b as only, c as borderWidths, d as down, f as fontSizes, g as layout, h as icon, i as ThemeProvider, l as breakpoints, m as fonts, n as useDefaultProps, o as baseTheme, p as fontWeights, r as useTheme, s as between, t as withTheme, u as containerQueries, v as lineHeights, w as typography, x as radii, y as not } from "./theme-C1o9qa2E.mjs";
+export { ThemeProvider, avatar, baseTheme, between, borderWidths, breakpoints, containerQueries, createTheme, down, fontSizes, fontWeights, fonts, icon, layout, letterSpacings, lineHeights, not, only, radii, sizes, space, themeDefault, typography, up, useDefaultProps, useTheme, withBreakpointHelpers, withTheme, zOrder };

package/dist/{themes-kbuYiwCi.d.mts → themes-CCguU8uo.d.mts}

@@ -1,5 +1,22 @@
 import { CSSObject } from "@emotion/react";
+import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
 import { ElementType } from "react";
+//#region src/theme/breakpoints.d.ts
+/**
+ * The query helpers a theme's breakpoint scale carries: `up` / `down` / `only` / `between` /
+ * `not` as `@media` rules, and `containerQueries` for the same sizes as `@container` rules.
+ */
+interface BreakpointHelpers extends QueryHelpers {
+  containerQueries: ContainerQueries;
+}
+/**
+ * The scale with its helpers attached as non-enumerable methods: the engine, the theme's JSON
+ * and a spread see only the sizes, while `theme.breakpoints.up('md')` works. `createTheme`
+ * and `ThemeProvider` re-attach them after a merge, so they always follow the theme's own
+ * breakpoints.
+ */
+declare const withBreakpointHelpers: <Scale extends Record<string, string | number>>(scale: Scale) => Scale & BreakpointHelpers;
+//#endregion
 //#region src/theme/utils/createTheme.d.ts
 /**
  * Recursive partial of a theme shape. Plain objects recurse; arrays and
@@ -16,6 +33,7 @@ type ThemeOverride = DeepPartial<Theme>;
  * - `undefined` override values are ignored - a key can be added or replaced,
  *   never removed.
  * - Neither argument is mutated; untouched branches keep referential identity.
+ * - `breakpoints` gets its query helpers back, built from the merged sizes.
  */
 declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
 //#endregion
@@ -187,6 +205,89 @@ interface ThemeSizes {
  * forces the matching icon size to be supplied.
  */
 type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/** The default breakpoint names - Material 3's window classes. */
+interface DefaultBreakpoints {
+  /** compact: 0-599px - the base, applies everywhere until `sm` overrides it. */
+  xs: true;
+  /** medium: 600-839px. */
+  sm: true;
+  /** expanded: 840-1199px. */
+  md: true;
+  /** large: 1200-1599px. */
+  lg: true;
+  /** extra-large: 1600px and up. */
+  xl: true;
+}
+/**
+ * Add, rename or remove breakpoints by augmenting this interface: `true` adds a name, `false`
+ * removes a default one.
+ *
+ *   declare module '@soroush.tech/design-system/theme' {
+ *     interface BreakpointOverrides { mobile: true; tablet: true; xs: false; sm: false }
+ *   }
+ */
+interface BreakpointOverrides {}
+/** The theme's breakpoint names: the defaults, plus every override set to `true`, minus every one set to `false`. */
+type BreakpointKey = Exclude<keyof DefaultBreakpoints | keyof BreakpointOverrides, { [K in keyof BreakpointOverrides]: BreakpointOverrides[K] extends false ? K : never; }[keyof BreakpointOverrides]>;
+/**
+ * `theme.breakpoints`: where each window class starts, ascending, in declared order. A key holds
+ * from its value until the next key, so `xs: '0px'` applies everywhere until `sm` overrides it;
+ * media queries are min-width, which is why the theme writes the start of each range. Responsive
+ * props map onto the keys by name, or by position for an array. A value is a CSS length; a
+ * media condition or a full `@media` rule is passed through, without the range helpers.
+ * `createTheme` appends a breakpoint you add after the existing ones, so it must be larger.
+ */
+type ThemeBreakpoints = { [K in BreakpointKey]: string; };
+/** A `theme.space` key - layout margins and gutters step on the spacing scale. */
+type LayoutSpace = Exclude<keyof ThemeSpace, 'auto'>;
+/** A `theme.space` key or a CSS length (a 280px panel is a size, not a spacing step). */
+type LayoutLength = LayoutSpace | string;
+/** Bar heights at the top and bottom of the page; `0` removes an inherited bar. */
+interface LayoutBars {
+  top?: LayoutLength;
+  bottom?: LayoutLength;
+}
+/** A side panel: a track (`inline`), over the content (`overlay`), its rail (`collapsed`) or absent (`hidden`). */
+interface LayoutPanel {
+  mode: 'inline' | 'overlay' | 'collapsed' | 'hidden';
+  /** Open width. */
+  width: LayoutLength;
+  /** Collapsed width. */
+  railWidth: LayoutLength;
+}
+/** Side panels by logical side - `start` and `end` flip in RTL. */
+interface LayoutPanels {
+  start?: LayoutPanel;
+  end?: LayoutPanel;
+}
+/** The content columns, measured in the space the bars and inline panels leave. */
+interface LayoutContent {
+  columns: number;
+  /** Inline padding of the content. */
+  margin: LayoutSpace;
+  /** Gap between columns. */
+  gutter: LayoutSpace;
+  /** `fluid` spans the space; `fixed` is a container centred at `maxWidth`. */
+  mode: 'fluid' | 'fixed';
+  maxWidth?: LayoutLength;
+}
+/** The page layout at one breakpoint. */
+interface LayoutEntry {
+  bars: LayoutBars;
+  panels: LayoutPanels;
+  content: LayoutContent;
+}
+/**
+ * `theme.layout`: layout tokens per breakpoint, merged mobile-first in breakpoint order. The
+ * first breakpoint's entry (`xs`) is complete; every later one lists only what changes. A panel
+ * first declared at a later breakpoint needs its `mode`, `width` and `railWidth` there. These
+ * are tokens: apps (and the studio) read them; nothing in the design system lays a page out.
+ */
+type ThemeLayout = { [K in BreakpointKey]?: {
+  bars?: LayoutBars;
+  panels?: { [P in keyof LayoutPanels]?: Partial<LayoutPanel>; };
+  content?: Partial<LayoutContent>;
+}; };
 /** Style of one typography variant. */
 interface TypographyVariantStyle {
   element: ElementType;
@@ -402,6 +503,8 @@ interface Theme {
   /** Optional per-component customization - see `ThemeComponents`. */
   components?: OpenScale<ThemeComponents>;
   space: OpenScale<ThemeSpace>;
+  breakpoints: OpenScale<ThemeBreakpoints & BreakpointHelpers>;
+  layout: ThemeLayout;
   border: OpenScale<ThemeBorder>;
   text: OpenScale<ThemeText>;
   background: OpenScale<ThemeBackground>;
@@ -493,11 +596,18 @@ declare const avatar: {
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
 declare const space: ThemeSpace;
+declare const breakpoints: ThemeBreakpoints & BreakpointHelpers;
+declare const layout: ThemeLayout;
 declare const typography: ThemeTypographyVariants;
 /**
  * The package's complete default theme (dark-schemed). Raw hex only - palettes
  * belong to the consumer, who builds brand themes with `createTheme(baseTheme, ...)`.
  */
 declare const baseTheme: Theme;
+/**
+ * The query helpers for `baseTheme`'s breakpoints, as plain functions. A theme with its own
+ * breakpoints has the same helpers on `theme.breakpoints`.
+ */
+declare const up: (from: import("@soroush.tech/styled-system").BreakpointInput) => string, down: (to: import("@soroush.tech/styled-system").BreakpointInput) => string, only: (key: string) => string, between: (from: import("@soroush.tech/styled-system").BreakpointInput, to: import("@soroush.tech/styled-system").BreakpointInput) => string, not: (key: string) => string, containerQueries: import("@soroush.tech/styled-system").ContainerQueries;
 //#endregion
-export { DeepPartial as $, ThemeSizes as A, baseTheme as B, ThemeFonts as C, ThemePalette as D, ThemeLineHeights as E, ThemeTypographyVariants as F, icon as G, fontSizes as H, ThemeZOrder as I, radii as J, letterSpacings as K, TypographyVariant as L, ThemeSpace as M, ThemeSwitch as N, ThemeRadii as O, ThemeText as P, zOrder as Q, TypographyVariantStyle as R, ThemeFontWeights as S, ThemeLetterSpacings as T, fontWeights as U, borderWidths as V, fonts as W, space as X, sizes as Y, typography as Z, ThemeBackground as _, CardSlotIconProps as a, ThemeComponents as b, ComponentStyle as c, PaletteColor as d, ThemeOverride as et, PaletteEntry as f, ThemeAvatarSizes as g, Theme as h, CardOwnerState as i, ThemeSkeleton as j, ThemeShadow as k, ComponentVariant as l, SizeEntry as m, ButtonVariants as n, CardSlotTypographyProps as o, PressableOwnerState as p, lineHeights as q, CSSObject$1 as r, ComponentConfig as s, ButtonOwnerState as t, createTheme as tt, OpenScale as u, ThemeBorder as v, ThemeIconSizes as w, ThemeDefaults as x, ThemeBorderWidths as y, avatar as z };
+export { between as $, ThemeBreakpoints as A, ThemeRadii as B, PressableOwnerState as C, withBreakpointHelpers as Ct, ThemeBackground as D, ThemeAvatarSizes as E, ThemeIconSizes as F, ThemeSwitch as G, ThemeSizes as H, ThemeLayout as I, ThemeZOrder as J, ThemeText as K, ThemeLetterSpacings as L, ThemeDefaults as M, ThemeFontWeights as N, ThemeBorder as O, ThemeFonts as P, baseTheme as Q, ThemeLineHeights as R, PaletteEntry as S, BreakpointHelpers as St, Theme as T, ThemeSkeleton as U, ThemeShadow as V, ThemeSpace as W, TypographyVariantStyle as X, TypographyVariant as Y, avatar as Z, LayoutPanel as _, up as _t, CSSObject$1 as a, fontWeights as at, OpenScale as b, ThemeOverride as bt, CardSlotTypographyProps as c, layout as ct, ComponentVariant as d, not as dt, borderWidths as et, DefaultBreakpoints as f, only as ft, LayoutLength as g, typography as gt, LayoutEntry as h, space as ht, ButtonVariants as i, fontSizes as it, ThemeComponents as j, ThemeBorderWidths as k, ComponentConfig as l, letterSpacings as lt, LayoutContent as m, sizes as mt, BreakpointOverrides as n, containerQueries as nt, CardOwnerState as o, fonts as ot, LayoutBars as p, radii as pt, ThemeTypographyVariants as q, ButtonOwnerState as r, down as rt, CardSlotIconProps as s, icon as st, BreakpointKey as t, breakpoints as tt, ComponentStyle as u, lineHeights as ut, LayoutPanels as v, zOrder as vt, SizeEntry as w, PaletteColor as x, createTheme as xt, LayoutSpace as y, DeepPartial as yt, ThemePalette as z };

package/dist/{themes-kbuYiwCi.d.cts → themes-CtTQTVqe.d.cts}

@@ -1,5 +1,22 @@
 import { CSSObject } from "@emotion/react";
 import { ElementType } from "react";
+import { ContainerQueries, QueryHelpers } from "@soroush.tech/styled-system";
+//#region src/theme/breakpoints.d.ts
+/**
+ * The query helpers a theme's breakpoint scale carries: `up` / `down` / `only` / `between` /
+ * `not` as `@media` rules, and `containerQueries` for the same sizes as `@container` rules.
+ */
+interface BreakpointHelpers extends QueryHelpers {
+  containerQueries: ContainerQueries;
+}
+/**
+ * The scale with its helpers attached as non-enumerable methods: the engine, the theme's JSON
+ * and a spread see only the sizes, while `theme.breakpoints.up('md')` works. `createTheme`
+ * and `ThemeProvider` re-attach them after a merge, so they always follow the theme's own
+ * breakpoints.
+ */
+declare const withBreakpointHelpers: <Scale extends Record<string, string | number>>(scale: Scale) => Scale & BreakpointHelpers;
+//#endregion
 //#region src/theme/utils/createTheme.d.ts
 /**
  * Recursive partial of a theme shape. Plain objects recurse; arrays and
@@ -16,6 +33,7 @@ type ThemeOverride = DeepPartial<Theme>;
  * - `undefined` override values are ignored - a key can be added or replaced,
  *   never removed.
  * - Neither argument is mutated; untouched branches keep referential identity.
+ * - `breakpoints` gets its query helpers back, built from the merged sizes.
  */
 declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
 //#endregion
@@ -187,6 +205,89 @@ interface ThemeSizes {
  * forces the matching icon size to be supplied.
  */
 type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/** The default breakpoint names - Material 3's window classes. */
+interface DefaultBreakpoints {
+  /** compact: 0-599px - the base, applies everywhere until `sm` overrides it. */
+  xs: true;
+  /** medium: 600-839px. */
+  sm: true;
+  /** expanded: 840-1199px. */
+  md: true;
+  /** large: 1200-1599px. */
+  lg: true;
+  /** extra-large: 1600px and up. */
+  xl: true;
+}
+/**
+ * Add, rename or remove breakpoints by augmenting this interface: `true` adds a name, `false`
+ * removes a default one.
+ *
+ *   declare module '@soroush.tech/design-system/theme' {
+ *     interface BreakpointOverrides { mobile: true; tablet: true; xs: false; sm: false }
+ *   }
+ */
+interface BreakpointOverrides {}
+/** The theme's breakpoint names: the defaults, plus every override set to `true`, minus every one set to `false`. */
+type BreakpointKey = Exclude<keyof DefaultBreakpoints | keyof BreakpointOverrides, { [K in keyof BreakpointOverrides]: BreakpointOverrides[K] extends false ? K : never; }[keyof BreakpointOverrides]>;
+/**
+ * `theme.breakpoints`: where each window class starts, ascending, in declared order. A key holds
+ * from its value until the next key, so `xs: '0px'` applies everywhere until `sm` overrides it;
+ * media queries are min-width, which is why the theme writes the start of each range. Responsive
+ * props map onto the keys by name, or by position for an array. A value is a CSS length; a
+ * media condition or a full `@media` rule is passed through, without the range helpers.
+ * `createTheme` appends a breakpoint you add after the existing ones, so it must be larger.
+ */
+type ThemeBreakpoints = { [K in BreakpointKey]: string; };
+/** A `theme.space` key - layout margins and gutters step on the spacing scale. */
+type LayoutSpace = Exclude<keyof ThemeSpace, 'auto'>;
+/** A `theme.space` key or a CSS length (a 280px panel is a size, not a spacing step). */
+type LayoutLength = LayoutSpace | string;
+/** Bar heights at the top and bottom of the page; `0` removes an inherited bar. */
+interface LayoutBars {
+  top?: LayoutLength;
+  bottom?: LayoutLength;
+}
+/** A side panel: a track (`inline`), over the content (`overlay`), its rail (`collapsed`) or absent (`hidden`). */
+interface LayoutPanel {
+  mode: 'inline' | 'overlay' | 'collapsed' | 'hidden';
+  /** Open width. */
+  width: LayoutLength;
+  /** Collapsed width. */
+  railWidth: LayoutLength;
+}
+/** Side panels by logical side - `start` and `end` flip in RTL. */
+interface LayoutPanels {
+  start?: LayoutPanel;
+  end?: LayoutPanel;
+}
+/** The content columns, measured in the space the bars and inline panels leave. */
+interface LayoutContent {
+  columns: number;
+  /** Inline padding of the content. */
+  margin: LayoutSpace;
+  /** Gap between columns. */
+  gutter: LayoutSpace;
+  /** `fluid` spans the space; `fixed` is a container centred at `maxWidth`. */
+  mode: 'fluid' | 'fixed';
+  maxWidth?: LayoutLength;
+}
+/** The page layout at one breakpoint. */
+interface LayoutEntry {
+  bars: LayoutBars;
+  panels: LayoutPanels;
+  content: LayoutContent;
+}
+/**
+ * `theme.layout`: layout tokens per breakpoint, merged mobile-first in breakpoint order. The
+ * first breakpoint's entry (`xs`) is complete; every later one lists only what changes. A panel
+ * first declared at a later breakpoint needs its `mode`, `width` and `railWidth` there. These
+ * are tokens: apps (and the studio) read them; nothing in the design system lays a page out.
+ */
+type ThemeLayout = { [K in BreakpointKey]?: {
+  bars?: LayoutBars;
+  panels?: { [P in keyof LayoutPanels]?: Partial<LayoutPanel>; };
+  content?: Partial<LayoutContent>;
+}; };
 /** Style of one typography variant. */
 interface TypographyVariantStyle {
   element: ElementType;
@@ -402,6 +503,8 @@ interface Theme {
   /** Optional per-component customization - see `ThemeComponents`. */
   components?: OpenScale<ThemeComponents>;
   space: OpenScale<ThemeSpace>;
+  breakpoints: OpenScale<ThemeBreakpoints & BreakpointHelpers>;
+  layout: ThemeLayout;
   border: OpenScale<ThemeBorder>;
   text: OpenScale<ThemeText>;
   background: OpenScale<ThemeBackground>;
@@ -493,11 +596,18 @@ declare const avatar: {
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
 declare const space: ThemeSpace;
+declare const breakpoints: ThemeBreakpoints & BreakpointHelpers;
+declare const layout: ThemeLayout;
 declare const typography: ThemeTypographyVariants;
 /**
  * The package's complete default theme (dark-schemed). Raw hex only - palettes
  * belong to the consumer, who builds brand themes with `createTheme(baseTheme, ...)`.
  */
 declare const baseTheme: Theme;
+/**
+ * The query helpers for `baseTheme`'s breakpoints, as plain functions. A theme with its own
+ * breakpoints has the same helpers on `theme.breakpoints`.
+ */
+declare const up: (from: import("@soroush.tech/styled-system").BreakpointInput) => string, down: (to: import("@soroush.tech/styled-system").BreakpointInput) => string, only: (key: string) => string, between: (from: import("@soroush.tech/styled-system").BreakpointInput, to: import("@soroush.tech/styled-system").BreakpointInput) => string, not: (key: string) => string, containerQueries: import("@soroush.tech/styled-system").ContainerQueries;
 //#endregion
-export { DeepPartial as $, ThemeSizes as A, baseTheme as B, ThemeFonts as C, ThemePalette as D, ThemeLineHeights as E, ThemeTypographyVariants as F, icon as G, fontSizes as H, ThemeZOrder as I, radii as J, letterSpacings as K, TypographyVariant as L, ThemeSpace as M, ThemeSwitch as N, ThemeRadii as O, ThemeText as P, zOrder as Q, TypographyVariantStyle as R, ThemeFontWeights as S, ThemeLetterSpacings as T, fontWeights as U, borderWidths as V, fonts as W, space as X, sizes as Y, typography as Z, ThemeBackground as _, CardSlotIconProps as a, ThemeComponents as b, ComponentStyle as c, PaletteColor as d, ThemeOverride as et, PaletteEntry as f, ThemeAvatarSizes as g, Theme as h, CardOwnerState as i, ThemeSkeleton as j, ThemeShadow as k, ComponentVariant as l, SizeEntry as m, ButtonVariants as n, CardSlotTypographyProps as o, PressableOwnerState as p, lineHeights as q, CSSObject$1 as r, ComponentConfig as s, ButtonOwnerState as t, createTheme as tt, OpenScale as u, ThemeBorder as v, ThemeIconSizes as w, ThemeDefaults as x, ThemeBorderWidths as y, avatar as z };
+export { between as $, ThemeBreakpoints as A, ThemeRadii as B, PressableOwnerState as C, withBreakpointHelpers as Ct, ThemeBackground as D, ThemeAvatarSizes as E, ThemeIconSizes as F, ThemeSwitch as G, ThemeSizes as H, ThemeLayout as I, ThemeZOrder as J, ThemeText as K, ThemeLetterSpacings as L, ThemeDefaults as M, ThemeFontWeights as N, ThemeBorder as O, ThemeFonts as P, baseTheme as Q, ThemeLineHeights as R, PaletteEntry as S, BreakpointHelpers as St, Theme as T, ThemeSkeleton as U, ThemeShadow as V, ThemeSpace as W, TypographyVariantStyle as X, TypographyVariant as Y, avatar as Z, LayoutPanel as _, up as _t, CSSObject$1 as a, fontWeights as at, OpenScale as b, ThemeOverride as bt, CardSlotTypographyProps as c, layout as ct, ComponentVariant as d, not as dt, borderWidths as et, DefaultBreakpoints as f, only as ft, LayoutLength as g, typography as gt, LayoutEntry as h, space as ht, ButtonVariants as i, fontSizes as it, ThemeComponents as j, ThemeBorderWidths as k, ComponentConfig as l, letterSpacings as lt, LayoutContent as m, sizes as mt, BreakpointOverrides as n, containerQueries as nt, CardOwnerState as o, fonts as ot, LayoutBars as p, radii as pt, ThemeTypographyVariants as q, ButtonOwnerState as r, down as rt, CardSlotIconProps as s, icon as st, BreakpointKey as t, breakpoints as tt, ComponentStyle as u, lineHeights as ut, LayoutPanels as v, zOrder as vt, SizeEntry as w, PaletteColor as x, createTheme as xt, LayoutSpace as y, DeepPartial as yt, ThemePalette as z };

package/dist/{useTablePagination-BpMOVLsR.d.cts → useTablePagination-BG93T2Od.d.cts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-vuPAf55D.cjs";
+import { n as TableSortLabelDirection } from "./index-BAb24XNa.cjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {

package/dist/{useTablePagination-DebYZ6vN.d.mts → useTablePagination-jBWK8cmx.d.mts}

@@ -1,4 +1,4 @@
-import { n as TableSortLabelDirection } from "./index-ggLhNdZV.mjs";
+import { n as TableSortLabelDirection } from "./index-Fcf_SOl_.mjs";
 //#region src/Table/hooks/useTableSort.d.ts
 /** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {