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

package/dist/{themes-CUV79qWU.d.cts → themes-9YNnlVyY.d.cts}

@@ -13,19 +13,19 @@ type ThemeOverride = DeepPartial<Theme>;
  *
  * - Recurses only where both sides are plain objects; arrays (`shadows`,
  *   `fontSizes`) and functions replace wholesale.
- * - `undefined` override values are ignored — a key can be added or replaced,
+ * - `undefined` override values are ignored - a key can be added or replaced,
  *   never removed.
  * - Neither argument is mutated; untouched branches keep referential identity.
  */
 declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
 //#endregion
 //#region src/theme/themes.d.ts
-/** Design-system's own style-object shape — Emotion stays an internal implementation detail. */
+/** Design-system's own style-object shape - Emotion stays an internal implementation detail. */
 type CSSObject$1 = CSSObject;
 /**
  * Re-opens a named scale interface as an anonymous mapped type. Named
  * interfaces have no implicit index signature, which styled-system's
- * Record-based `Theme` constraint requires — the mapped copy restores it
+ * Record-based `Theme` constraint requires - the mapped copy restores it
  * while keeping the literal keys (and any consumer-augmented keys).
  */
 type OpenScale<T> = { [K in keyof T]: T[K]; };
@@ -91,7 +91,7 @@ interface ThemeSwitch {
   thumb: string;
 }
 /**
- * Shadow tokens — the single base color every shadow composites from
+ * Shadow tokens - the single base color every shadow composites from
  * (the `theme.shadows` elevation array and component shadows alike).
  */
 interface ThemeShadow {
@@ -100,7 +100,7 @@ interface ThemeShadow {
   /** Alpha applied per elevation step in the default `theme.shadows` array. */
   opacity: number;
 }
-/** Stacking order for layered UI — ascending: appBar < drawer < modal. */
+/** Stacking order for layered UI - ascending: appBar < drawer < modal. */
 interface ThemeZOrder {
   appBar: number;
   drawer: number;
@@ -182,11 +182,74 @@ interface ThemeSizes {
   lg: SizeEntry;
 }
 /**
- * Square glyph dimension per density key — Icon token sizes and the
+ * Square glyph dimension per density key - Icon token sizes and the
  * Checkbox/Radio glyphs. Mapped over `ThemeSizes` so augmenting a size key
  * forces the matching icon size to be supplied.
  */
 type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/**
+ * `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.
+ */
+interface ThemeBreakpoints {
+  tablet: string;
+  web: string;
+  wide: 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`: 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.
+ */
+type ThemeLayout = {
+  base: LayoutEntry;
+} & { [K in keyof ThemeBreakpoints]?: {
+  bars?: LayoutBars;
+  panels?: { [P in keyof LayoutPanels]?: Partial<LayoutPanel>; };
+  content?: Partial<LayoutContent>;
+}; };
 /** Style of one typography variant. */
 interface TypographyVariantStyle {
   element: ElementType;
@@ -213,8 +276,8 @@ interface ThemeTypographyVariants {
 }
 /**
  * Optional theme-driven component defaults. Components carry their own
- * literal fallbacks (`size = 'md'`, `variant = 'outside'`, …) and resolve
- * them through `themeDefault(theme, key, fallback)` — set any key here (or
+ * literal fallbacks (`size = 'md'`, `variant = 'outside'`, ...) and resolve
+ * them through `themeDefault(theme, key, fallback)` - set any key here (or
  * via `ThemeProvider`'s `defaults` prop) to override that fallback globally,
  * e.g. when your theme uses entirely different size or palette keys.
  */
@@ -223,9 +286,9 @@ interface ThemeDefaults {
   size?: keyof ThemeSizes;
   /** Compact density for dense secondary UI (table pagination actions). Fallback: `'sm'`. */
   compactSize?: keyof ThemeSizes;
-  /** Accent palette color (buttons, links, progress, pagination…). Fallback: `'primary'`. */
+  /** Accent palette color (buttons, links, progress, pagination...). Fallback: `'primary'`. */
   color?: keyof ThemePalette;
-  /** Neutral palette color for toggle controls (checkbox, radio, switch…). Fallback: `'default'`. */
+  /** Neutral palette color for toggle controls (checkbox, radio, switch...). Fallback: `'default'`. */
   neutralColor?: keyof ThemePalette;
   /** Body text color. Fallback: `'initial'`. */
   textColor?: keyof ThemeText;
@@ -267,7 +330,7 @@ interface ThemeDefaults {
   paginationShape?: 'circular' | 'rounded';
 }
 /**
- * A style contributed from `theme.components` — a plain CSS object, or a
+ * A style contributed from `theme.components` - a plain CSS object, or a
  * callback receiving the theme and the styled root's resolved props
  * (`ownerState`) for conditional styling.
  */
@@ -282,20 +345,20 @@ interface ComponentVariant<OwnerState> {
 }
 /** Per-component customization: default prop values, per-slot CSS, extra variants. */
 interface ComponentConfig<OwnerState = Record<string, unknown>, Slot extends string = 'root'> {
-  /** Default prop values — explicit props and group context always win. */
+  /** Default prop values - explicit props and group context always win. */
   defaultProps?: Partial<OwnerState>;
   /** Per-slot CSS merged after the component's own styles (theme wins). */
   styleOverrides?: Partial<Record<Slot, ComponentStyle<OwnerState>>>;
   /** Extra variants matched by props. Replaced wholesale by `createTheme`, never merged. */
   variants?: ReadonlyArray<ComponentVariant<OwnerState>>;
 }
-/** Button's variant values — augment to register new ones (then style them via `variants`). */
+/** Button's variant values - augment to register new ones (then style them via `variants`). */
 interface ButtonVariants {
   contained: true;
   outlined: true;
   text: true;
 }
-/** The resolved props Button's styled roots receive — what `ownerState` exposes. */
+/** The resolved props Button's styled roots receive - what `ownerState` exposes. */
 interface ButtonOwnerState {
   variant?: keyof ButtonVariants;
   color?: keyof ThemePalette;
@@ -328,7 +391,7 @@ interface CardOwnerState {
 }
 /**
  * Pressable's resolved props / theme-settable defaults. Only the three keys it
- * actually resolves through `useDefaultProps` — the disabled state reaches the
+ * actually resolves through `useDefaultProps` - the disabled state reaches the
  * styled root as `isDisabled` and is never read from here, so exposing it would
  * promise theme authors an override that does nothing.
  */
@@ -363,12 +426,14 @@ 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>;
@@ -397,11 +462,13 @@ interface ThemeComponents {
 }
 interface Theme {
   name: string;
-  /** Optional overrides for component default token/variant keys — see `ThemeDefaults`. */
+  /** Optional overrides for component default token/variant keys - see `ThemeDefaults`. */
   defaults?: OpenScale<ThemeDefaults>;
-  /** Optional per-component customization — see `ThemeComponents`. */
+  /** Optional per-component customization - see `ThemeComponents`. */
   components?: OpenScale<ThemeComponents>;
   space: OpenScale<ThemeSpace>;
+  breakpoints: OpenScale<ThemeBreakpoints>;
+  layout: ThemeLayout;
   border: OpenScale<ThemeBorder>;
   text: OpenScale<ThemeText>;
   background: OpenScale<ThemeBackground>;
@@ -421,7 +488,7 @@ interface Theme {
   colorScheme: 'light' | 'dark';
   blur: string;
   logoFilter: string;
-  /** mix-blend-mode for the AboutHero portrait — screen on dark, multiply on light. */
+  /** mix-blend-mode for the AboutHero portrait - screen on dark, multiply on light. */
   portraitBlend: string;
   /** opacity for the AboutHero portrait. */
   portraitOpacity: number;
@@ -493,11 +560,13 @@ declare const avatar: {
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
 declare const space: ThemeSpace;
+declare const breakpoints: ThemeBreakpoints;
+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, …)`.
+ * 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;
 //#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 { 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 };

package/dist/{themes-CUV79qWU.d.mts → themes-9YNnlVyY.d.mts}

@@ -13,19 +13,19 @@ type ThemeOverride = DeepPartial<Theme>;
  *
  * - Recurses only where both sides are plain objects; arrays (`shadows`,
  *   `fontSizes`) and functions replace wholesale.
- * - `undefined` override values are ignored — a key can be added or replaced,
+ * - `undefined` override values are ignored - a key can be added or replaced,
  *   never removed.
  * - Neither argument is mutated; untouched branches keep referential identity.
  */
 declare const createTheme: (base: Theme, overrides: ThemeOverride) => Theme;
 //#endregion
 //#region src/theme/themes.d.ts
-/** Design-system's own style-object shape — Emotion stays an internal implementation detail. */
+/** Design-system's own style-object shape - Emotion stays an internal implementation detail. */
 type CSSObject$1 = CSSObject;
 /**
  * Re-opens a named scale interface as an anonymous mapped type. Named
  * interfaces have no implicit index signature, which styled-system's
- * Record-based `Theme` constraint requires — the mapped copy restores it
+ * Record-based `Theme` constraint requires - the mapped copy restores it
  * while keeping the literal keys (and any consumer-augmented keys).
  */
 type OpenScale<T> = { [K in keyof T]: T[K]; };
@@ -91,7 +91,7 @@ interface ThemeSwitch {
   thumb: string;
 }
 /**
- * Shadow tokens — the single base color every shadow composites from
+ * Shadow tokens - the single base color every shadow composites from
  * (the `theme.shadows` elevation array and component shadows alike).
  */
 interface ThemeShadow {
@@ -100,7 +100,7 @@ interface ThemeShadow {
   /** Alpha applied per elevation step in the default `theme.shadows` array. */
   opacity: number;
 }
-/** Stacking order for layered UI — ascending: appBar < drawer < modal. */
+/** Stacking order for layered UI - ascending: appBar < drawer < modal. */
 interface ThemeZOrder {
   appBar: number;
   drawer: number;
@@ -182,11 +182,74 @@ interface ThemeSizes {
   lg: SizeEntry;
 }
 /**
- * Square glyph dimension per density key — Icon token sizes and the
+ * Square glyph dimension per density key - Icon token sizes and the
  * Checkbox/Radio glyphs. Mapped over `ThemeSizes` so augmenting a size key
  * forces the matching icon size to be supplied.
  */
 type ThemeIconSizes = { [K in keyof ThemeSizes]: string; };
+/**
+ * `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.
+ */
+interface ThemeBreakpoints {
+  tablet: string;
+  web: string;
+  wide: 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`: 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.
+ */
+type ThemeLayout = {
+  base: LayoutEntry;
+} & { [K in keyof ThemeBreakpoints]?: {
+  bars?: LayoutBars;
+  panels?: { [P in keyof LayoutPanels]?: Partial<LayoutPanel>; };
+  content?: Partial<LayoutContent>;
+}; };
 /** Style of one typography variant. */
 interface TypographyVariantStyle {
   element: ElementType;
@@ -213,8 +276,8 @@ interface ThemeTypographyVariants {
 }
 /**
  * Optional theme-driven component defaults. Components carry their own
- * literal fallbacks (`size = 'md'`, `variant = 'outside'`, …) and resolve
- * them through `themeDefault(theme, key, fallback)` — set any key here (or
+ * literal fallbacks (`size = 'md'`, `variant = 'outside'`, ...) and resolve
+ * them through `themeDefault(theme, key, fallback)` - set any key here (or
  * via `ThemeProvider`'s `defaults` prop) to override that fallback globally,
  * e.g. when your theme uses entirely different size or palette keys.
  */
@@ -223,9 +286,9 @@ interface ThemeDefaults {
   size?: keyof ThemeSizes;
   /** Compact density for dense secondary UI (table pagination actions). Fallback: `'sm'`. */
   compactSize?: keyof ThemeSizes;
-  /** Accent palette color (buttons, links, progress, pagination…). Fallback: `'primary'`. */
+  /** Accent palette color (buttons, links, progress, pagination...). Fallback: `'primary'`. */
   color?: keyof ThemePalette;
-  /** Neutral palette color for toggle controls (checkbox, radio, switch…). Fallback: `'default'`. */
+  /** Neutral palette color for toggle controls (checkbox, radio, switch...). Fallback: `'default'`. */
   neutralColor?: keyof ThemePalette;
   /** Body text color. Fallback: `'initial'`. */
   textColor?: keyof ThemeText;
@@ -267,7 +330,7 @@ interface ThemeDefaults {
   paginationShape?: 'circular' | 'rounded';
 }
 /**
- * A style contributed from `theme.components` — a plain CSS object, or a
+ * A style contributed from `theme.components` - a plain CSS object, or a
  * callback receiving the theme and the styled root's resolved props
  * (`ownerState`) for conditional styling.
  */
@@ -282,20 +345,20 @@ interface ComponentVariant<OwnerState> {
 }
 /** Per-component customization: default prop values, per-slot CSS, extra variants. */
 interface ComponentConfig<OwnerState = Record<string, unknown>, Slot extends string = 'root'> {
-  /** Default prop values — explicit props and group context always win. */
+  /** Default prop values - explicit props and group context always win. */
   defaultProps?: Partial<OwnerState>;
   /** Per-slot CSS merged after the component's own styles (theme wins). */
   styleOverrides?: Partial<Record<Slot, ComponentStyle<OwnerState>>>;
   /** Extra variants matched by props. Replaced wholesale by `createTheme`, never merged. */
   variants?: ReadonlyArray<ComponentVariant<OwnerState>>;
 }
-/** Button's variant values — augment to register new ones (then style them via `variants`). */
+/** Button's variant values - augment to register new ones (then style them via `variants`). */
 interface ButtonVariants {
   contained: true;
   outlined: true;
   text: true;
 }
-/** The resolved props Button's styled roots receive — what `ownerState` exposes. */
+/** The resolved props Button's styled roots receive - what `ownerState` exposes. */
 interface ButtonOwnerState {
   variant?: keyof ButtonVariants;
   color?: keyof ThemePalette;
@@ -328,7 +391,7 @@ interface CardOwnerState {
 }
 /**
  * Pressable's resolved props / theme-settable defaults. Only the three keys it
- * actually resolves through `useDefaultProps` — the disabled state reaches the
+ * actually resolves through `useDefaultProps` - the disabled state reaches the
  * styled root as `isDisabled` and is never read from here, so exposing it would
  * promise theme authors an override that does nothing.
  */
@@ -363,12 +426,14 @@ 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>;
@@ -397,11 +462,13 @@ interface ThemeComponents {
 }
 interface Theme {
   name: string;
-  /** Optional overrides for component default token/variant keys — see `ThemeDefaults`. */
+  /** Optional overrides for component default token/variant keys - see `ThemeDefaults`. */
   defaults?: OpenScale<ThemeDefaults>;
-  /** Optional per-component customization — see `ThemeComponents`. */
+  /** Optional per-component customization - see `ThemeComponents`. */
   components?: OpenScale<ThemeComponents>;
   space: OpenScale<ThemeSpace>;
+  breakpoints: OpenScale<ThemeBreakpoints>;
+  layout: ThemeLayout;
   border: OpenScale<ThemeBorder>;
   text: OpenScale<ThemeText>;
   background: OpenScale<ThemeBackground>;
@@ -421,7 +488,7 @@ interface Theme {
   colorScheme: 'light' | 'dark';
   blur: string;
   logoFilter: string;
-  /** mix-blend-mode for the AboutHero portrait — screen on dark, multiply on light. */
+  /** mix-blend-mode for the AboutHero portrait - screen on dark, multiply on light. */
   portraitBlend: string;
   /** opacity for the AboutHero portrait. */
   portraitOpacity: number;
@@ -493,11 +560,13 @@ declare const avatar: {
 declare const icon: ThemeIconSizes;
 declare const sizes: ThemeSizes;
 declare const space: ThemeSpace;
+declare const breakpoints: ThemeBreakpoints;
+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, …)`.
+ * 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;
 //#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 { 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 };

package/dist/{useTablePagination--XtCc2YL.d.cts → useTablePagination-CLoac5oX.d.cts}

@@ -1,6 +1,6 @@
-import { n as TableSortLabelDirection } from "./index-DkPJUFzd.cjs";
+import { n as TableSortLabelDirection } from "./index-DNNg9RoR.cjs";
 //#region src/Table/hooks/useTableSort.d.ts
-/** One column's sort state — spreads directly onto `TableSortLabel`. */
+/** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {
   isActive: boolean;
   direction: TableSortLabelDirection;
@@ -11,13 +11,13 @@ type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
 /**
  * Column-keyed sort state for sortable tables. Each column remembers its own
  * direction (initially `'asc'`); clicking a column activates it AND flips its
- * stored direction — so the first click on a column sorts `'desc'`.
+ * stored direction - so the first click on a column sorts `'desc'`.
  * `keys` is read once on mount.
  *
  * ```tsx
  * const sort = useTableSort(['name', 'latency'])
  * <TableSortLabel {...sort.name}>Service</TableSortLabel>
- * <TableControl data={rows} sort={sort}>{(row) => …}</TableControl>
+ * <TableControl data={rows} sort={sort}>{(row) => ...}</TableControl>
  * ```
  */
 declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
@@ -29,7 +29,7 @@ interface UseTablePaginationOptions {
   /** Initial rows per page; `-1` shows all rows. Default: `10`. */
   defaultRowsPerPage?: number;
 }
-/** Paging state — property names mirror `TablePagination`'s props so it spreads in one go. */
+/** Paging state - property names mirror `TablePagination`'s props so it spreads in one go. */
 interface TablePaginationState {
   page: number;
   rowsPerPage: number;
@@ -43,7 +43,7 @@ interface TablePaginationState {
  * ```tsx
  * const pagination = useTablePagination({ defaultRowsPerPage: 10 })
  * <TablePagination count={data.length} {...pagination} />
- * <TableControl data={data} pagination={pagination}>{(row) => …}</TableControl>
+ * <TableControl data={data} pagination={pagination}>{(row) => ...}</TableControl>
  * ```
  */
 declare function useTablePagination({ defaultPage, defaultRowsPerPage }?: UseTablePaginationOptions): TablePaginationState;

package/dist/{useTablePagination-RgVhJs-7.d.mts → useTablePagination-RelVsdMR.d.mts}

@@ -1,6 +1,6 @@
-import { n as TableSortLabelDirection } from "./index-hcZwhQmR.mjs";
+import { n as TableSortLabelDirection } from "./index-IEvuh6Cd.mjs";
 //#region src/Table/hooks/useTableSort.d.ts
-/** One column's sort state — spreads directly onto `TableSortLabel`. */
+/** One column's sort state - spreads directly onto `TableSortLabel`. */
 interface TableSortEntry {
   isActive: boolean;
   direction: TableSortLabelDirection;
@@ -11,13 +11,13 @@ type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
 /**
  * Column-keyed sort state for sortable tables. Each column remembers its own
  * direction (initially `'asc'`); clicking a column activates it AND flips its
- * stored direction — so the first click on a column sorts `'desc'`.
+ * stored direction - so the first click on a column sorts `'desc'`.
  * `keys` is read once on mount.
  *
  * ```tsx
  * const sort = useTableSort(['name', 'latency'])
  * <TableSortLabel {...sort.name}>Service</TableSortLabel>
- * <TableControl data={rows} sort={sort}>{(row) => …}</TableControl>
+ * <TableControl data={rows} sort={sort}>{(row) => ...}</TableControl>
  * ```
  */
 declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
@@ -29,7 +29,7 @@ interface UseTablePaginationOptions {
   /** Initial rows per page; `-1` shows all rows. Default: `10`. */
   defaultRowsPerPage?: number;
 }
-/** Paging state — property names mirror `TablePagination`'s props so it spreads in one go. */
+/** Paging state - property names mirror `TablePagination`'s props so it spreads in one go. */
 interface TablePaginationState {
   page: number;
   rowsPerPage: number;
@@ -43,7 +43,7 @@ interface TablePaginationState {
  * ```tsx
  * const pagination = useTablePagination({ defaultRowsPerPage: 10 })
  * <TablePagination count={data.length} {...pagination} />
- * <TableControl data={data} pagination={pagination}>{(row) => …}</TableControl>
+ * <TableControl data={data} pagination={pagination}>{(row) => ...}</TableControl>
  * ```
  */
 declare function useTablePagination({ defaultPage, defaultRowsPerPage }?: UseTablePaginationOptions): TablePaginationState;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "1.3.2",
-  "description": "Emotion + @soroush.tech/styled-system React component library — token-driven light/dark themes, layout primitives, forms, and overlays.",
+  "version": "2.0.0-alpha.0",
+  "description": "Emotion + @soroush.tech/styled-system React component library - token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
     "react",
@@ -16,11 +16,11 @@
   "homepage": "https://soroush.tech/design-system",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/soroush-tech/core.git",
+    "url": "git+https://github.com/soroush-tech/design-system.git",
     "directory": "packages/design-system"
   },
   "bugs": {
-    "url": "https://github.com/soroush-tech/core/issues"
+    "url": "https://github.com/soroush-tech/design-system/issues"
   },
   "type": "module",
   "sideEffects": false,
@@ -278,6 +278,16 @@
         "default": "./dist/Pagination.cjs"
       }
     },
+    "./PageLayout": {
+      "import": {
+        "types": "./dist/PageLayout.d.mts",
+        "default": "./dist/PageLayout.mjs"
+      },
+      "require": {
+        "types": "./dist/PageLayout.d.cts",
+        "default": "./dist/PageLayout.cjs"
+      }
+    },
     "./Paper": {
       "import": {
         "types": "./dist/Paper.d.mts",
@@ -477,7 +487,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@soroush.tech/styled-system": "^5.8.2"
+    "@soroush.tech/styled-system": "^5.9.0-alpha.0"
   },
   "peerDependencies": {
     "react": "^19.2.8",