@soroush.tech/styled-system 6.0.0-alpha.2 → 6.0.0-alpha.3

package/dist/grid-CAuvylKs.mjs

@@ -1,158 +0,0 @@
-import { o as responsiveQueries } from "./media-Bho3l7WK.mjs";
-import { get, system } from "./core.mjs";
-//#region src/grid/grid.ts
-const spaceScale = [
-	0,
-	4,
-	8,
-	16,
-	32,
-	64,
-	128,
-	256,
-	512
-];
-const grid = system({
-	gridGap: {
-		property: "gridGap",
-		scale: "space",
-		defaultScale: spaceScale
-	},
-	gridColumnGap: {
-		property: "gridColumnGap",
-		scale: "space",
-		defaultScale: spaceScale
-	},
-	gridRowGap: {
-		property: "gridRowGap",
-		scale: "space",
-		defaultScale: spaceScale
-	},
-	gridColumn: true,
-	gridRow: true,
-	gridAutoFlow: true,
-	gridAutoColumns: true,
-	gridAutoRows: true,
-	gridTemplateColumns: true,
-	gridTemplateRows: true,
-	gridTemplateAreas: true,
-	gridArea: true
-});
-//#endregion
-//#region src/grid/layoutGrid.ts
-const spaceValue = (theme, value) => {
-	const resolved = get(theme, `space.${value}`, value);
-	return typeof resolved === "number" ? `${resolved}px` : resolved;
-};
-const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
-	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
-	return {
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: width ?? "none",
-		marginInline: width === void 0 ? 0 : `max(0px, calc((100% - ${width}) / 2))`
-	};
-};
-const columnDeclarations = (theme, display, { columns, gutter }) => {
-	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	return {
-		"--layout-columns": columns,
-		"--layout-gutter": gap,
-		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap
-	};
-};
-const declarations = (theme, parts, entry) => {
-	const styles = Object.assign({}, ...parts.map((part) => part === "frame" ? frameDeclarations(theme, entry) : columnDeclarations(theme, part, entry)));
-	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
-};
-const DISPLAY = {
-	frame: {},
-	grid: { display: "grid" },
-	flex: {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	}
-};
-const layoutStyles = (theme, value, parts) => {
-	if (!value) return {};
-	const breakpoints = get(theme, "breakpoints", {});
-	const layout = get(theme, "layout", {});
-	const fields = typeof value === "object" ? Object.entries(value) : [];
-	const everywhere = Object.fromEntries(fields.filter(([, field]) => typeof field !== "object"));
-	const overrides = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
-	const hasEverywhere = Object.keys(everywhere).length > 0;
-	const { keyed } = responsiveQueries(breakpoints);
-	const styles = Object.assign({}, ...parts.map((part) => DISPLAY[part]));
-	let themed = {};
-	let overridden = false;
-	for (const key of Object.keys(breakpoints)) {
-		const layer = layout[key]?.content;
-		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
-		const override = hasEverywhere || named ? {
-			...everywhere,
-			...named
-		} : void 0;
-		themed = {
-			...themed,
-			...layer
-		};
-		if (layer || override || overridden) {
-			const block = declarations(theme, parts, {
-				...themed,
-				...override
-			});
-			const media = keyed.get(key);
-			if (media) styles[media] = block;
-			else Object.assign(styles, block);
-		}
-		overridden = override !== void 0;
-	}
-	return styles;
-};
-/**
-* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
-* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
-* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
-* breakpoint is back to the theme. Every written block carries the full set, so no block
-* inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
-* `maxWidth` on the same element does not override it; rows take `rowGap`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => layoutStyles(theme, value, [display, "frame"]);
-const layoutParser = (part) => Object.assign((props) => layoutStyles(props.theme, props.layout, [part]), {
-	config: {},
-	propNames: ["layout"],
-	cache: {}
-});
-/**
-* The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
-* width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
-* or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
-*/
-const layoutFrame = layoutParser("frame");
-/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
-const layoutGrid = layoutParser("grid");
-/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
-const layoutFlex = layoutParser("flex");
-const flexSpan = (n) => {
-	const columns = "var(--layout-columns)";
-	const gutter = "var(--layout-gutter)";
-	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
-};
-/**
-* The `span` prop: how many layout-grid columns an element takes. It writes both
-* `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
-* `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
-* other's property. `span="full"` takes the whole row whatever the column count - in any grid,
-* layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
-*/
-const span = system({ span: (n) => n === "full" ? {
-	gridColumn: "1 / -1",
-	flex: "0 0 100%"
-} : {
-	gridColumn: `span ${n}`,
-	flex: flexSpan(n)
-} });
-//#endregion
-export { span as a, layoutGridStyles as i, layoutFrame as n, grid as o, layoutGrid as r, layoutFlex as t };

package/dist/grid-Cv-XGWcr.cjs

@@ -1,194 +0,0 @@
-const require_media = require("./media-DSJdRy_k.cjs");
-const require_core = require("./core.cjs");
-//#region src/grid/grid.ts
-const spaceScale = [
-	0,
-	4,
-	8,
-	16,
-	32,
-	64,
-	128,
-	256,
-	512
-];
-const config = {
-	gridGap: {
-		property: "gridGap",
-		scale: "space",
-		defaultScale: spaceScale
-	},
-	gridColumnGap: {
-		property: "gridColumnGap",
-		scale: "space",
-		defaultScale: spaceScale
-	},
-	gridRowGap: {
-		property: "gridRowGap",
-		scale: "space",
-		defaultScale: spaceScale
-	},
-	gridColumn: true,
-	gridRow: true,
-	gridAutoFlow: true,
-	gridAutoColumns: true,
-	gridAutoRows: true,
-	gridTemplateColumns: true,
-	gridTemplateRows: true,
-	gridTemplateAreas: true,
-	gridArea: true
-};
-const grid = require_core.system(config);
-//#endregion
-//#region src/grid/layoutGrid.ts
-const spaceValue = (theme, value) => {
-	const resolved = require_core.get(theme, `space.${value}`, value);
-	return typeof resolved === "number" ? `${resolved}px` : resolved;
-};
-const frameDeclarations = (theme, { margin, mode, maxWidth }) => {
-	const width = mode === "fixed" && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : void 0;
-	return {
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: width ?? "none",
-		marginInline: width === void 0 ? 0 : `max(0px, calc((100% - ${width}) / 2))`
-	};
-};
-const columnDeclarations = (theme, display, { columns, gutter }) => {
-	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	return {
-		"--layout-columns": columns,
-		"--layout-gutter": gap,
-		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap
-	};
-};
-const declarations = (theme, parts, entry) => {
-	const styles = Object.assign({}, ...parts.map((part) => part === "frame" ? frameDeclarations(theme, entry) : columnDeclarations(theme, part, entry)));
-	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
-};
-const DISPLAY = {
-	frame: {},
-	grid: { display: "grid" },
-	flex: {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	}
-};
-const layoutStyles = (theme, value, parts) => {
-	if (!value) return {};
-	const breakpoints = require_core.get(theme, "breakpoints", {});
-	const layout = require_core.get(theme, "layout", {});
-	const fields = typeof value === "object" ? Object.entries(value) : [];
-	const everywhere = Object.fromEntries(fields.filter(([, field]) => typeof field !== "object"));
-	const overrides = Object.fromEntries(fields.filter(([, field]) => typeof field === "object"));
-	const hasEverywhere = Object.keys(everywhere).length > 0;
-	const { keyed } = require_media.responsiveQueries(breakpoints);
-	const styles = Object.assign({}, ...parts.map((part) => DISPLAY[part]));
-	let themed = {};
-	let overridden = false;
-	for (const key of Object.keys(breakpoints)) {
-		const layer = layout[key]?.content;
-		const named = Object.hasOwn(overrides, key) ? overrides[key] : void 0;
-		const override = hasEverywhere || named ? {
-			...everywhere,
-			...named
-		} : void 0;
-		themed = {
-			...themed,
-			...layer
-		};
-		if (layer || override || overridden) {
-			const block = declarations(theme, parts, {
-				...themed,
-				...override
-			});
-			const media = keyed.get(key);
-			if (media) styles[media] = block;
-			else Object.assign(styles, block);
-		}
-		overridden = override !== void 0;
-	}
-	return styles;
-};
-/**
-* The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
-* margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
-* theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
-* there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
-* breakpoint is back to the theme. Every written block carries the full set, so no block
-* inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
-* `maxWidth` on the same element does not override it; rows take `rowGap`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => layoutStyles(theme, value, [display, "frame"]);
-const layoutParser = (part) => Object.assign((props) => layoutStyles(props.theme, props.layout, [part]), {
-	config: {},
-	propNames: ["layout"],
-	cache: {}
-});
-/**
-* The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
-* width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
-* or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
-*/
-const layoutFrame = layoutParser("frame");
-/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
-const layoutGrid = layoutParser("grid");
-/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
-const layoutFlex = layoutParser("flex");
-const flexSpan = (n) => {
-	const columns = "var(--layout-columns)";
-	const gutter = "var(--layout-gutter)";
-	return `0 0 calc((100% - (${columns} - 1) * ${gutter}) / ${columns} * ${n} + ${n - 1} * ${gutter})`;
-};
-/**
-* The `span` prop: how many layout-grid columns an element takes. It writes both
-* `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
-* `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
-* other's property. `span="full"` takes the whole row whatever the column count - in any grid,
-* layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
-*/
-const span = require_core.system({ span: (n) => n === "full" ? {
-	gridColumn: "1 / -1",
-	flex: "0 0 100%"
-} : {
-	gridColumn: `span ${n}`,
-	flex: flexSpan(n)
-} });
-//#endregion
-Object.defineProperty(exports, "grid", {
-	enumerable: true,
-	get: function() {
-		return grid;
-	}
-});
-Object.defineProperty(exports, "layoutFlex", {
-	enumerable: true,
-	get: function() {
-		return layoutFlex;
-	}
-});
-Object.defineProperty(exports, "layoutFrame", {
-	enumerable: true,
-	get: function() {
-		return layoutFrame;
-	}
-});
-Object.defineProperty(exports, "layoutGrid", {
-	enumerable: true,
-	get: function() {
-		return layoutGrid;
-	}
-});
-Object.defineProperty(exports, "layoutGridStyles", {
-	enumerable: true,
-	get: function() {
-		return layoutGridStyles;
-	}
-});
-Object.defineProperty(exports, "span", {
-	enumerable: true,
-	get: function() {
-		return span;
-	}
-});

package/dist/index-C0X-fL6a.d.mts

@@ -1,55 +0,0 @@
-import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
-import "./types-Cj6Jx5LX.mjs";
-//#region src/grid/grid.d.ts
-declare const grid: Parser;
-//#endregion
-//#region src/grid/layoutGrid.d.ts
-/** The layout grid at one breakpoint - the `content` part of a `theme.layout` entry. */
-interface LayoutGridEntry {
-  /** Equal columns. */
-  columns?: number;
-  /** Inline padding - a `theme.space` key or a CSS length. */
-  margin?: string | number;
-  /** Gap between columns - a `theme.space` key or a CSS length. */
-  gutter?: string | number;
-  /** `fluid` spans the space; `fixed` is a container centred at `maxWidth`. */
-  mode?: 'fluid' | 'fixed';
-  maxWidth?: string | number;
-}
-/**
- * `true` for the theme's layout grid, or an entry: its fields replace the theme's at every
- * breakpoint, and entries under breakpoint names replace it at that breakpoint only.
- */
-type LayoutGridValue = boolean | Record<string, LayoutGridEntry | LayoutGridEntry[keyof LayoutGridEntry]>;
-/** The container a layout grid is drawn on: column tracks, or a wrapping flex row. */
-type LayoutGridDisplay = 'grid' | 'flex';
-/**
- * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
- * margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
- * theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
- * there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
- * breakpoint is back to the theme. Every written block carries the full set, so no block
- * inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
- * `maxWidth` on the same element does not override it; rows take `rowGap`.
- */
-declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
-/**
- * The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
- * width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
- * or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
- */
-declare const layoutFrame: Parser;
-/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
-declare const layoutGrid: Parser;
-/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
-declare const layoutFlex: Parser;
-/**
- * The `span` prop: how many layout-grid columns an element takes. It writes both
- * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
- * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
- * other's property. `span="full"` takes the whole row whatever the column count - in any grid,
- * layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
- */
-declare const span: Parser;
-//#endregion
-export { layoutFrame as a, span as c, layoutFlex as i, grid as l, LayoutGridEntry as n, layoutGrid as o, LayoutGridValue as r, layoutGridStyles as s, LayoutGridDisplay as t };

package/dist/index-DHAamdKa.d.cts

@@ -1,55 +0,0 @@
-import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
-import "./types-Cj6Jx5LX.cjs";
-//#region src/grid/grid.d.ts
-declare const grid: Parser;
-//#endregion
-//#region src/grid/layoutGrid.d.ts
-/** The layout grid at one breakpoint - the `content` part of a `theme.layout` entry. */
-interface LayoutGridEntry {
-  /** Equal columns. */
-  columns?: number;
-  /** Inline padding - a `theme.space` key or a CSS length. */
-  margin?: string | number;
-  /** Gap between columns - a `theme.space` key or a CSS length. */
-  gutter?: string | number;
-  /** `fluid` spans the space; `fixed` is a container centred at `maxWidth`. */
-  mode?: 'fluid' | 'fixed';
-  maxWidth?: string | number;
-}
-/**
- * `true` for the theme's layout grid, or an entry: its fields replace the theme's at every
- * breakpoint, and entries under breakpoint names replace it at that breakpoint only.
- */
-type LayoutGridValue = boolean | Record<string, LayoutGridEntry | LayoutGridEntry[keyof LayoutGridEntry]>;
-/** The container a layout grid is drawn on: column tracks, or a wrapping flex row. */
-type LayoutGridDisplay = 'grid' | 'flex';
-/**
- * The layout grid from `theme.layout`, per breakpoint: each breakpoint's `content` (columns,
- * margin, gutter, fluid or fixed), inherited mobile-first. A field in `value` replaces the
- * theme's at every breakpoint (`{ gutter: 8 }`); an entry under a breakpoint name replaces it
- * there only, on top of those fields (`{ gutter: 8, md: { columns: 6 } }`), and the next
- * breakpoint is back to the theme. Every written block carries the full set, so no block
- * inherits a stale `max-width`. The layout owns what it writes - an explicit `gap`, padding or
- * `maxWidth` on the same element does not override it; rows take `rowGap`.
- */
-declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
-/**
- * The `layout` prop as the page frame alone: the margin and, in fixed mode, the centred max
- * width per breakpoint - no columns, and `display` is left alone. Compose it with `layoutGrid`
- * or `layoutFlex` for the columns; {@link layoutGridStyles} writes both in a style function.
- */
-declare const layoutFrame: Parser;
-/** The `layout` prop's columns on a grid container: tracks, gutter, `--layout-*` variables. */
-declare const layoutGrid: Parser;
-/** The `layout` prop's columns on a flex container: a wrapping row with the same gutter. */
-declare const layoutFlex: Parser;
-/**
- * The `span` prop: how many layout-grid columns an element takes. It writes both
- * `grid-column: span N` (read by a Grid parent) and a flex basis from the parent's
- * `--layout-columns` / `--layout-gutter` (read by a Flex parent); each container ignores the
- * other's property. `span="full"` takes the whole row whatever the column count - in any grid,
- * layout grid or not. Responsive like any prop: `span={{ xs: 'full', md: 6 }}`.
- */
-declare const span: Parser;
-//#endregion
-export { layoutFrame as a, span as c, layoutFlex as i, grid as l, LayoutGridEntry as n, layoutGrid as o, LayoutGridValue as r, layoutGridStyles as s, LayoutGridDisplay as t };