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

package/dist/typography.d.cts

@@ -1,3 +1,3 @@
-import { Gt as TypographyProps, I as FontFamilyProps, L as FontSizeProps, R as FontStyleProps, Rt as TextOverflowProps, ct as LineHeightProps, jt as TextAlignProps, qt as WhiteSpaceProps, st as LetterSpacingProps, z as FontWeightProps } from "./types-Cv5WjcVA.cjs";
-import { t as typography } from "./index-BmyL5qR7.cjs";
+import { I as FontFamilyProps, Jt as WhiteSpaceProps, Kt as TypographyProps, L as FontSizeProps, Mt as TextAlignProps, R as FontStyleProps, ct as LetterSpacingProps, lt as LineHeightProps, z as FontWeightProps, zt as TextOverflowProps } from "./types-Cj6Jx5LX.cjs";
+import { t as typography } from "./index-PoT1oV9X.cjs";
 export { type FontFamilyProps, type FontSizeProps, type FontStyleProps, type FontWeightProps, type LetterSpacingProps, type LineHeightProps, type TextAlignProps, type TextOverflowProps, type TypographyProps, type WhiteSpaceProps, typography as default, typography };

package/dist/typography.d.mts

@@ -1,3 +1,3 @@
-import { Gt as TypographyProps, I as FontFamilyProps, L as FontSizeProps, R as FontStyleProps, Rt as TextOverflowProps, ct as LineHeightProps, jt as TextAlignProps, qt as WhiteSpaceProps, st as LetterSpacingProps, z as FontWeightProps } from "./types-Cv5WjcVA.mjs";
-import { t as typography } from "./index-nfjmLzHF.mjs";
+import { I as FontFamilyProps, Jt as WhiteSpaceProps, Kt as TypographyProps, L as FontSizeProps, Mt as TextAlignProps, R as FontStyleProps, ct as LetterSpacingProps, lt as LineHeightProps, z as FontWeightProps, zt as TextOverflowProps } from "./types-Cj6Jx5LX.mjs";
+import { t as typography } from "./index-BvyUTPw5.mjs";
 export { type FontFamilyProps, type FontSizeProps, type FontStyleProps, type FontWeightProps, type LetterSpacingProps, type LineHeightProps, type TextAlignProps, type TextOverflowProps, type TypographyProps, type WhiteSpaceProps, typography as default, typography };

package/dist/variant.d.cts

@@ -1,3 +1,3 @@
-import { Bt as TextStyleProps, C as ButtonStyleProps, T as ColorStyleProps } from "./types-Cv5WjcVA.cjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-Csbxj8Yo.cjs";
+import { C as ButtonStyleProps, T as ColorStyleProps, Vt as TextStyleProps } from "./types-Cj6Jx5LX.cjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-B7YL_4tg.cjs";
 export { type ButtonStyleProps, type ColorStyleProps, type TextStyleProps, VariantArgs, VariantOptions, buttonStyle, colorStyle, variant as default, variant, textStyle };

package/dist/variant.d.mts

@@ -1,3 +1,3 @@
-import { Bt as TextStyleProps, C as ButtonStyleProps, T as ColorStyleProps } from "./types-Cv5WjcVA.mjs";
-import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-ClbGlQxq.mjs";
+import { C as ButtonStyleProps, T as ColorStyleProps, Vt as TextStyleProps } from "./types-Cj6Jx5LX.mjs";
+import { a as textStyle, i as colorStyle, n as VariantOptions, o as variant, r as buttonStyle, t as VariantArgs } from "./index-4_E8pg8R.mjs";
 export { type ButtonStyleProps, type ColorStyleProps, type TextStyleProps, VariantArgs, VariantOptions, buttonStyle, colorStyle, variant as default, variant, textStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soroush.tech/styled-system",
-  "version": "6.0.0-alpha.0",
+  "version": "6.0.0-alpha.2",
   "description": "Maintained, first-class-TypeScript rewrite of styled-system - responsive, theme-aware style props for CSS-in-JS. Drop-in replacement for styled-system v5.",
   "keywords": [
     "styled-system",

package/dist/grid-CYjL4-gb.mjs

@@ -1,126 +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. An entry in `value` replaces the
-* theme's at the breakpoint it names only; 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 overrides = typeof value === "object" ? value : {};
-	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 override = Object.hasOwn(overrides, key) ? overrides[key] : 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, 1)";
-	const gutter = "var(--layout-gutter, 0px)";
-	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/index-CXK27dY_.d.cts

@@ -1,42 +0,0 @@
-import { a as Parser, l as StyleObject } from "./index-iVqAMF2L.cjs";
-import "./types-Cv5WjcVA.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 entries for named breakpoints that replace it there. */
-type LayoutGridValue = boolean | Record<string, 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. An entry in `value` replaces the
- * theme's at the breakpoint it names only; 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-D7IZ8-Zq.d.mts

@@ -1,42 +0,0 @@
-import { a as Parser, l as StyleObject } from "./index-IulNhyDt.mjs";
-import "./types-Cv5WjcVA.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 entries for named breakpoints that replace it there. */
-type LayoutGridValue = boolean | Record<string, 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. An entry in `value` replaces the
- * theme's at the breakpoint it names only; 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 };