@soroush.tech/design-system 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/{theme-BQGlZoma.mjs → theme-C1o9qa2E.mjs}

@@ -1,10 +1,31 @@
 import { alpha, generateBoxShadow } from "./utils.mjs";
 import { a as useEmotionTheme, n as EmotionThemeContext, r as EmotionThemeProvider } from "./emotion-BAyqVw0c.mjs";
+import { createContainerQueries, createMediaHelpers } from "@soroush.tech/styled-system";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#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 = {
+		...createMediaHelpers(sizes),
+		containerQueries: 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,19 +171,28 @@ const space = {
 	10: spacing(10),
 	auto: "auto"
 };
-const breakpoints = {
-	tablet: "600px",
-	web: "1200px",
-	wide: "1600px"
-};
+const breakpoints = withBreakpointHelpers({
+	xs: "0px",
+	sm: "600px",
+	md: "840px",
+	lg: "1200px",
+	xl: "1600px"
+});
 const layout = {
-	base: {
-		bars: { bottom: 8 },
-		panels: { start: {
-			mode: "hidden",
-			width: "280px",
-			railWidth: 9
-		} },
+	xs: {
+		bars: { top: 8 },
+		panels: {
+			start: {
+				mode: "hidden",
+				width: "280px",
+				railWidth: 9
+			},
+			end: {
+				mode: "hidden",
+				width: "360px",
+				railWidth: 9
+			}
+		},
 		content: {
 			columns: 4,
 			margin: 2,
@@ -161,31 +200,35 @@ const layout = {
 			mode: "fluid"
 		}
 	},
-	tablet: {
+	sm: {
 		panels: { start: { mode: "collapsed" } },
 		content: {
 			columns: 8,
 			margin: 4
 		}
 	},
-	web: {
-		bars: {
-			top: 8,
-			bottom: 0
-		},
-		panels: { start: { mode: "inline" } },
+	md: {
+		panels: { end: { mode: "overlay" } },
 		content: {
 			columns: 12,
 			margin: 3,
-			gutter: 3,
+			gutter: 3
+		}
+	},
+	lg: {
+		panels: { end: { width: "412px" } },
+		content: {
 			mode: "fixed",
 			maxWidth: "1200px"
 		}
 	},
-	wide: { content: {
-		columns: 16,
-		maxWidth: "1600px"
-	} }
+	xl: {
+		panels: {
+			start: { mode: "inline" },
+			end: { mode: "inline" }
+		},
+		content: { maxWidth: "1600px" }
+	}
 };
 const typography = {
 	h1: {
@@ -364,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 = useMemo(() => defaults ? createTheme(theme, { defaults }) : theme, [theme, defaults]);
+	const value = useMemo(() => defaults ? createTheme(theme, { defaults }) : withHelpers(theme), [theme, defaults]);
 	return /* @__PURE__ */ jsx(EmotionThemeProvider, {
 		theme: value,
 		children
@@ -403,4 +451,4 @@ function withTheme(WrappedComponent) {
 	};
 }
 //#endregion
-export { sizes as _, avatar as a, zOrder as b, breakpoints as c, fonts as d, icon as f, radii as g, lineHeights as h, ThemeProvider as i, fontSizes as l, letterSpacings as m, useDefaultProps as n, baseTheme as o, layout as p, useTheme as r, borderWidths as s, withTheme as t, fontWeights as u, space as v, createTheme as x, typography as y };
+export { space as C, createTheme as D, zOrder as E, withBreakpointHelpers as O, sizes as S, up as T, letterSpacings as _, avatar as a, only as b, borderWidths as c, down as d, fontSizes as f, layout as g, icon as h, ThemeProvider as i, breakpoints as l, fonts as m, useDefaultProps as n, baseTheme as o, fontWeights as p, useTheme as r, between as s, withTheme as t, containerQueries as u, lineHeights as v, typography as w, radii as x, not as y };

package/dist/{theme-BmEAXmwh.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,19 +171,28 @@ const space = {
 	10: spacing(10),
 	auto: "auto"
 };
-const breakpoints = {
-	tablet: "600px",
-	web: "1200px",
-	wide: "1600px"
-};
+const breakpoints = withBreakpointHelpers({
+	xs: "0px",
+	sm: "600px",
+	md: "840px",
+	lg: "1200px",
+	xl: "1600px"
+});
 const layout = {
-	base: {
-		bars: { bottom: 8 },
-		panels: { start: {
-			mode: "hidden",
-			width: "280px",
-			railWidth: 9
-		} },
+	xs: {
+		bars: { top: 8 },
+		panels: {
+			start: {
+				mode: "hidden",
+				width: "280px",
+				railWidth: 9
+			},
+			end: {
+				mode: "hidden",
+				width: "360px",
+				railWidth: 9
+			}
+		},
 		content: {
 			columns: 4,
 			margin: 2,
@@ -161,31 +200,35 @@ const layout = {
 			mode: "fluid"
 		}
 	},
-	tablet: {
+	sm: {
 		panels: { start: { mode: "collapsed" } },
 		content: {
 			columns: 8,
 			margin: 4
 		}
 	},
-	web: {
-		bars: {
-			top: 8,
-			bottom: 0
-		},
-		panels: { start: { mode: "inline" } },
+	md: {
+		panels: { end: { mode: "overlay" } },
 		content: {
 			columns: 12,
 			margin: 3,
-			gutter: 3,
+			gutter: 3
+		}
+	},
+	lg: {
+		panels: { end: { width: "412px" } },
+		content: {
 			mode: "fixed",
 			maxWidth: "1200px"
 		}
 	},
-	wide: { content: {
-		columns: 16,
-		maxWidth: "1600px"
-	} }
+	xl: {
+		panels: {
+			start: { mode: "inline" },
+			end: { mode: "inline" }
+		},
+		content: { maxWidth: "1600px" }
+	}
 };
 const typography = {
 	h1: {
@@ -364,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
@@ -421,6 +469,12 @@ Object.defineProperty(exports, "baseTheme", {
 		return baseTheme;
 	}
 });
+Object.defineProperty(exports, "between", {
+	enumerable: true,
+	get: function() {
+		return between;
+	}
+});
 Object.defineProperty(exports, "borderWidths", {
 	enumerable: true,
 	get: function() {
@@ -433,12 +487,24 @@ Object.defineProperty(exports, "breakpoints", {
 		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() {
@@ -481,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() {
@@ -505,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() {
@@ -517,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,12 +1,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BmEAXmwh.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;
@@ -14,12 +17,16 @@ 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 fontWeights, A as ThemeFontWeights, B as ThemeSkeleton, C as ThemeAvatarSizes, D as ThemeBreakpoints, E as ThemeBorderWidths, F as ThemeLineHeights, G as ThemeZOrder, H as ThemeSwitch, I as ThemePalette, J as avatar, K as TypographyVariant, L as ThemeRadii, M as ThemeIconSizes, N as ThemeLayout, O as ThemeComponents, P as ThemeLetterSpacings, Q as fontSizes, R as ThemeShadow, S as Theme, T as ThemeBorder, U as ThemeText, V as ThemeSpace, W as ThemeTypographyVariants, X as borderWidths, Y as baseTheme, Z as breakpoints, _ as OpenScale, a as CardSlotIconProps, at as radii, b as PressableOwnerState, c as ComponentStyle, ct as typography, d as LayoutContent, dt as ThemeOverride, et as fonts, f as LayoutEntry, ft as createTheme, g as LayoutSpace, h as LayoutPanels, i as CardOwnerState, it as lineHeights, j as ThemeFonts, k as ThemeDefaults, l as ComponentVariant, lt as zOrder, m as LayoutPanel, n as ButtonVariants, nt as layout, o as CardSlotTypographyProps, ot as sizes, p as LayoutLength, q as TypographyVariantStyle, r as CSSObject, rt as letterSpacings, s as ComponentConfig, st as space, t as ButtonOwnerState, tt as icon, u as LayoutBars, ut as DeepPartial, v as PaletteColor, w as ThemeBackground, x as SizeEntry, y as PaletteEntry, z as ThemeSizes } from "./themes-9YNnlVyY.cjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BDD-L8uL.cjs";
-export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, 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, borderWidths, breakpoints, createTheme, fontSizes, fontWeights, fonts, icon, layout, 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-Dswy4M6B.cjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BO-vkjtm.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 fontWeights, A as ThemeFontWeights, B as ThemeSkeleton, C as ThemeAvatarSizes, D as ThemeBreakpoints, E as ThemeBorderWidths, F as ThemeLineHeights, G as ThemeZOrder, H as ThemeSwitch, I as ThemePalette, J as avatar, K as TypographyVariant, L as ThemeRadii, M as ThemeIconSizes, N as ThemeLayout, O as ThemeComponents, P as ThemeLetterSpacings, Q as fontSizes, R as ThemeShadow, S as Theme, T as ThemeBorder, U as ThemeText, V as ThemeSpace, W as ThemeTypographyVariants, X as borderWidths, Y as baseTheme, Z as breakpoints, _ as OpenScale, a as CardSlotIconProps, at as radii, b as PressableOwnerState, c as ComponentStyle, ct as typography, d as LayoutContent, dt as ThemeOverride, et as fonts, f as LayoutEntry, ft as createTheme, g as LayoutSpace, h as LayoutPanels, i as CardOwnerState, it as lineHeights, j as ThemeFonts, k as ThemeDefaults, l as ComponentVariant, lt as zOrder, m as LayoutPanel, n as ButtonVariants, nt as layout, o as CardSlotTypographyProps, ot as sizes, p as LayoutLength, q as TypographyVariantStyle, r as CSSObject, rt as letterSpacings, s as ComponentConfig, st as space, t as ButtonOwnerState, tt as icon, u as LayoutBars, ut as DeepPartial, v as PaletteColor, w as ThemeBackground, x as SizeEntry, y as PaletteEntry, z as ThemeSizes } from "./themes-9YNnlVyY.mjs";
-import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-CoHrw2p7.mjs";
-export { ButtonOwnerState, ButtonVariants, CSSObject, CardOwnerState, CardSlotIconProps, CardSlotTypographyProps, ComponentConfig, ComponentStyle, ComponentVariant, type DeepPartial, 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, borderWidths, breakpoints, createTheme, fontSizes, fontWeights, fonts, icon, layout, 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-C3RTORGO.mjs";
+import { a as ThemeProvider, i as themeDefault, n as useDefaultProps, r as useTheme, t as withTheme } from "./index-BHyJ6P_D.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 sizes, a as avatar, b as zOrder, c as breakpoints, d as fonts, f as icon, g as radii, h as lineHeights, i as ThemeProvider, l as fontSizes, m as letterSpacings, n as useDefaultProps, o as baseTheme, p as layout, r as useTheme, s as borderWidths, t as withTheme, u as fontWeights, v as space, x as createTheme, y as typography } from "./theme-BQGlZoma.mjs";
-export { ThemeProvider, avatar, baseTheme, borderWidths, breakpoints, createTheme, fontSizes, fontWeights, fonts, icon, layout, 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-9YNnlVyY.d.mts → themes-C3RTORGO.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,17 +205,40 @@ 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;
+}
 /**
- * `theme.breakpoints`, ascending, in declared order - responsive props map onto
- * them in this order. A value is a CSS length (a min-width), a media condition such
- * as `(600px <= width < 1200px)`, or a full `@media ...` rule, kept as written.
- * `createTheme` appends a consumer's new breakpoint after these, so it must be larger.
+ * 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 ThemeBreakpoints {
-  tablet: string;
-  web: string;
-  wide: string;
-}
+interface BreakpointOverrides {}
+type RemovedBreakpoints = keyof { [K in keyof BreakpointOverrides as BreakpointOverrides[K] extends false ? K : never]: true; };
+/** 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, RemovedBreakpoints>;
+/**
+ * `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). */
@@ -238,14 +279,12 @@ interface LayoutEntry {
   content: LayoutContent;
 }
 /**
- * `theme.layout`: the complete `base` entry (below the first breakpoint), then a
- * partial entry per breakpoint, merged mobile-first in `ThemeBreakpoints` order. A
- * panel first declared at a breakpoint needs its `mode`, `width` and `railWidth`
- * there; an incomplete one is left out.
+ * `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 = {
-  base: LayoutEntry;
-} & { [K in keyof ThemeBreakpoints]?: {
+type ThemeLayout = { [K in BreakpointKey]?: {
   bars?: LayoutBars;
   panels?: { [P in keyof LayoutPanels]?: Partial<LayoutPanel>; };
   content?: Partial<LayoutContent>;
@@ -426,14 +465,12 @@ interface ThemeComponents {
   Icon?: ComponentConfig;
   Image?: ComponentConfig;
   LinearProgress?: ComponentConfig<Record<string, unknown>, 'root' | 'track' | 'dash' | 'bar' | 'traveler' | 'segment' | 'secondaryBar'>;
-  LayoutGrid?: ComponentConfig;
   Link?: ComponentConfig;
   MenuItem?: ComponentConfig<Record<string, unknown>, 'root' | 'check'>;
   Modal?: ComponentConfig;
   NativeSelect?: ComponentConfig<Record<string, unknown>, 'root' | 'select' | 'icon'>;
   Pagination?: ComponentConfig<Record<string, unknown>, 'root' | 'list'>;
   PaginationItem?: ComponentConfig<Record<string, unknown>, 'root' | 'ellipsis'>;
-  PageLayout?: ComponentConfig<Record<string, unknown>, 'root' | 'bar' | 'panel' | 'content'>;
   Paper?: ComponentConfig;
   Popover?: ComponentConfig<Record<string, unknown>, 'root' | 'positioner'>;
   Pressable?: ComponentConfig<PressableOwnerState>;
@@ -467,7 +504,7 @@ interface Theme {
   /** Optional per-component customization - see `ThemeComponents`. */
   components?: OpenScale<ThemeComponents>;
   space: OpenScale<ThemeSpace>;
-  breakpoints: OpenScale<ThemeBreakpoints>;
+  breakpoints: OpenScale<ThemeBreakpoints & BreakpointHelpers>;
   layout: ThemeLayout;
   border: OpenScale<ThemeBorder>;
   text: OpenScale<ThemeText>;
@@ -560,7 +597,7 @@ declare const avatar: {
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
 declare const space: ThemeSpace;
-declare const breakpoints: ThemeBreakpoints;
+declare const breakpoints: ThemeBreakpoints & BreakpointHelpers;
 declare const layout: ThemeLayout;
 declare const typography: ThemeTypographyVariants;
 /**
@@ -568,5 +605,10 @@ declare const typography: ThemeTypographyVariants;
  * 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 { fontWeights as $, ThemeFontWeights as A, ThemeSkeleton as B, ThemeAvatarSizes as C, ThemeBreakpoints as D, ThemeBorderWidths as E, ThemeLineHeights as F, ThemeZOrder as G, ThemeSwitch as H, ThemePalette as I, avatar as J, TypographyVariant as K, ThemeRadii as L, ThemeIconSizes as M, ThemeLayout as N, ThemeComponents as O, ThemeLetterSpacings as P, fontSizes as Q, ThemeShadow as R, Theme as S, ThemeBorder as T, ThemeText as U, ThemeSpace as V, ThemeTypographyVariants as W, borderWidths as X, baseTheme as Y, breakpoints as Z, OpenScale as _, CardSlotIconProps as a, radii as at, PressableOwnerState as b, ComponentStyle as c, typography as ct, LayoutContent as d, ThemeOverride as dt, fonts as et, LayoutEntry as f, createTheme as ft, LayoutSpace as g, LayoutPanels as h, CardOwnerState as i, lineHeights as it, ThemeFonts as j, ThemeDefaults as k, ComponentVariant as l, zOrder as lt, LayoutPanel as m, ButtonVariants as n, layout as nt, CardSlotTypographyProps as o, sizes as ot, LayoutLength as p, TypographyVariantStyle as q, CSSObject$1 as r, letterSpacings as rt, ComponentConfig as s, space as st, ButtonOwnerState as t, icon as tt, LayoutBars as u, DeepPartial as ut, PaletteColor as v, ThemeBackground as w, SizeEntry as x, PaletteEntry as y, ThemeSizes 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 };