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

package/dist/grid-BdKZQBHF.mjs

@@ -1,135 +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 declarations = (theme, display, entry) => {
-	const { columns, margin, gutter, mode, maxWidth } = entry;
-	const isFixed = mode === "fixed";
-	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	const styles = {
-		"--layout-columns": columns,
-		"--layout-gutter": gap,
-		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap,
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: isFixed && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : "none",
-		marginInline: isFixed ? "auto" : 0
-	};
-	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
-};
-/**
-* 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`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => {
-	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 = display === "grid" ? { display: "grid" } : {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	};
-	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, display, {
-				...themed,
-				...override
-			});
-			const media = keyed.get(key);
-			if (media) styles[media] = block;
-			else Object.assign(styles, block);
-		}
-		overridden = override !== void 0;
-	}
-	return styles;
-};
-const layoutParser = (display) => Object.assign((props) => layoutGridStyles(props.theme, props.layout, display), {
-	config: {},
-	propNames: ["layout"],
-	cache: {}
-});
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
-const layoutGrid = layoutParser("grid");
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
-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. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
-*/
-const span = system({ span: (n) => ({
-	gridColumn: `span ${n}`,
-	flex: flexSpan(n)
-}) });
-//#endregion
-export { grid as a, span as i, layoutGrid as n, layoutGridStyles as r, layoutFlex as t };

package/dist/grid-CAlwl8LZ.cjs

@@ -1,165 +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 declarations = (theme, display, entry) => {
-	const { columns, margin, gutter, mode, maxWidth } = entry;
-	const isFixed = mode === "fixed";
-	const gap = gutter === void 0 ? void 0 : spaceValue(theme, gutter);
-	const styles = {
-		"--layout-columns": columns,
-		"--layout-gutter": gap,
-		gridTemplateColumns: display === "grid" && columns !== void 0 ? `repeat(${columns}, minmax(0, 1fr))` : void 0,
-		columnGap: gap,
-		paddingInline: margin === void 0 ? void 0 : spaceValue(theme, margin),
-		maxWidth: isFixed && maxWidth !== void 0 ? spaceValue(theme, maxWidth) : "none",
-		marginInline: isFixed ? "auto" : 0
-	};
-	return Object.fromEntries(Object.entries(styles).filter(([, value]) => value !== void 0));
-};
-/**
-* 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`.
-*/
-const layoutGridStyles = (theme, value, display = "grid") => {
-	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 = display === "grid" ? { display: "grid" } : {
-		display: "flex",
-		flexDirection: "row",
-		flexWrap: "wrap"
-	};
-	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, display, {
-				...themed,
-				...override
-			});
-			const media = keyed.get(key);
-			if (media) styles[media] = block;
-			else Object.assign(styles, block);
-		}
-		overridden = override !== void 0;
-	}
-	return styles;
-};
-const layoutParser = (display) => Object.assign((props) => layoutGridStyles(props.theme, props.layout, display), {
-	config: {},
-	propNames: ["layout"],
-	cache: {}
-});
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
-const layoutGrid = layoutParser("grid");
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
-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. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
-*/
-const span = require_core.system({ span: (n) => ({
-	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, "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-Cy51GZK8.d.mts

@@ -1,47 +0,0 @@
-import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
-import "./types-C4ogGxde.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`.
- */
-declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
-declare const layoutGrid: Parser;
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
-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. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
- */
-declare const span: Parser;
-//#endregion
-export { layoutGrid as a, grid as c, layoutFlex as i, LayoutGridEntry as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridDisplay as t };

package/dist/index-DrwsZZkS.d.cts

@@ -1,47 +0,0 @@
-import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
-import "./types-C4ogGxde.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`.
- */
-declare const layoutGridStyles: (theme: unknown, value: LayoutGridValue | undefined, display?: LayoutGridDisplay) => StyleObject;
-/** The `layout` prop on a grid container - see {@link layoutGridStyles}. */
-declare const layoutGrid: Parser;
-/** The `layout` prop on a flex container: a wrapping row with the same gutter and margin. */
-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. Responsive like any prop: `span={{ xs: 4, md: 6 }}`.
- */
-declare const span: Parser;
-//#endregion
-export { layoutGrid as a, grid as c, layoutFlex as i, LayoutGridEntry as n, layoutGridStyles as o, LayoutGridValue as r, span as s, LayoutGridDisplay as t };