@soroush.tech/styled-system 5.1.6

package/dist/core.cjs

@@ -0,0 +1,144 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/core/core.ts
+const merge = (a, b) => {
+	const result = Object.assign({}, a, b);
+	for (const key in a) {
+		if (!a[key] || typeof b[key] !== "object") continue;
+		Object.assign(result, { [key]: Object.assign(a[key], b[key]) });
+	}
+	return result;
+};
+const sort = (obj) => {
+	const next = {};
+	Object.keys(obj).sort((a, b) => a.localeCompare(b, void 0, {
+		numeric: true,
+		sensitivity: "base"
+	})).forEach((key) => {
+		next[key] = obj[key];
+	});
+	return next;
+};
+const defaults = { breakpoints: [
+	40,
+	52,
+	64
+].map((n) => n + "em") };
+const createMediaQuery = (n) => `@media screen and (min-width: ${n})`;
+const getValue = (n, scale) => get(scale, n, n);
+const get = (obj, key, def, p, undef) => {
+	const path = typeof key === "string" ? key.split(".") : [key];
+	let value = obj;
+	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	return value === undef ? def : value;
+};
+const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
+	const styles = {};
+	raw.slice(0, mediaQueries.length).forEach((value, i) => {
+		const media = mediaQueries[i];
+		const style = sx(value, scale, props);
+		if (!media) Object.assign(styles, style);
+		else Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
+	});
+	return styles;
+};
+const parseResponsiveObject = (breakpoints, sx, scale, raw, props) => {
+	const styles = {};
+	for (const key in raw) {
+		const breakpoint = breakpoints[key];
+		const value = raw[key];
+		const style = sx(value, scale, props);
+		if (!breakpoint) Object.assign(styles, style);
+		else {
+			const media = createMediaQuery(breakpoint);
+			Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
+		}
+	}
+	return styles;
+};
+const createParser = (config) => {
+	const cache = {};
+	const parse = ((props) => {
+		let styles = {};
+		let shouldSort = false;
+		const isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+		for (const key in props) {
+			if (!config[key]) continue;
+			const sx = config[key];
+			const raw = props[key];
+			const scale = get(props.theme, sx.scale, sx.defaults);
+			if (typeof raw === "object") {
+				cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+				if (Array.isArray(raw)) {
+					cache.media = !isCacheDisabled && cache.media || [null, ...cache.breakpoints.map(createMediaQuery)];
+					styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+					continue;
+				}
+				if (raw !== null) {
+					styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+					shouldSort = true;
+				}
+				continue;
+			}
+			Object.assign(styles, sx(raw, scale, props));
+		}
+		if (shouldSort) styles = sort(styles);
+		return styles;
+	});
+	parse.config = config;
+	parse.propNames = Object.keys(config);
+	parse.cache = cache;
+	const keys = Object.keys(config).filter((k) => k !== "config");
+	if (keys.length > 1) keys.forEach((key) => {
+		Object.assign(parse, { [key]: createParser({ [key]: config[key] }) });
+	});
+	return parse;
+};
+const createStyleFunction = ({ properties, property, scale, transform = getValue, defaultScale }) => {
+	const props = properties || [property];
+	const sx = (value, scaleArg, styleProps) => {
+		const result = {};
+		const n = transform(value, scaleArg, styleProps);
+		if (n === null) return;
+		props.forEach((prop) => {
+			result[prop] = n;
+		});
+		return result;
+	};
+	sx.scale = scale;
+	sx.defaults = defaultScale;
+	return sx;
+};
+const system = (args = {}) => {
+	const config = {};
+	Object.keys(args).forEach((key) => {
+		const conf = args[key];
+		if (conf === true) {
+			config[key] = createStyleFunction({
+				property: key,
+				scale: key
+			});
+			return;
+		}
+		if (typeof conf === "function") {
+			config[key] = conf;
+			return;
+		}
+		config[key] = createStyleFunction(conf);
+	});
+	return createParser(config);
+};
+const compose = (...parsers) => {
+	const config = {};
+	parsers.forEach((parser) => {
+		if (!parser || !parser.config) return;
+		Object.assign(config, parser.config);
+	});
+	return createParser(config);
+};
+//#endregion
+exports.compose = compose;
+exports.createParser = createParser;
+exports.createStyleFunction = createStyleFunction;
+exports.get = get;
+exports.merge = merge;
+exports.system = system;

package/dist/core.d.cts

@@ -0,0 +1,2 @@
+import { a as Props, c as SystemConfig, d as compose, f as createParser, g as system, h as merge, i as ParserConfig, l as Theme, m as get, n as ConfigStyle, o as StyleFn, p as createStyleFunction, r as Parser, s as StyleObject, t as CSSObject, u as Transform } from "./index-D8EyRZ5p.cjs";
+export { CSSObject, ConfigStyle, Parser, ParserConfig, Props, StyleFn, StyleObject, SystemConfig, Theme, Transform, compose, createParser, createStyleFunction, get, merge, system };

package/dist/core.d.mts

@@ -0,0 +1,2 @@
+import { a as Props, c as SystemConfig, d as compose, f as createParser, g as system, h as merge, i as ParserConfig, l as Theme, m as get, n as ConfigStyle, o as StyleFn, p as createStyleFunction, r as Parser, s as StyleObject, t as CSSObject, u as Transform } from "./index-D8EyRZ5p.mjs";
+export { CSSObject, ConfigStyle, Parser, ParserConfig, Props, StyleFn, StyleObject, SystemConfig, Theme, Transform, compose, createParser, createStyleFunction, get, merge, system };

package/dist/core.mjs

@@ -0,0 +1,138 @@
+//#region src/core/core.ts
+const merge = (a, b) => {
+	const result = Object.assign({}, a, b);
+	for (const key in a) {
+		if (!a[key] || typeof b[key] !== "object") continue;
+		Object.assign(result, { [key]: Object.assign(a[key], b[key]) });
+	}
+	return result;
+};
+const sort = (obj) => {
+	const next = {};
+	Object.keys(obj).sort((a, b) => a.localeCompare(b, void 0, {
+		numeric: true,
+		sensitivity: "base"
+	})).forEach((key) => {
+		next[key] = obj[key];
+	});
+	return next;
+};
+const defaults = { breakpoints: [
+	40,
+	52,
+	64
+].map((n) => n + "em") };
+const createMediaQuery = (n) => `@media screen and (min-width: ${n})`;
+const getValue = (n, scale) => get(scale, n, n);
+const get = (obj, key, def, p, undef) => {
+	const path = typeof key === "string" ? key.split(".") : [key];
+	let value = obj;
+	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	return value === undef ? def : value;
+};
+const parseResponsiveStyle = (mediaQueries, sx, scale, raw, props) => {
+	const styles = {};
+	raw.slice(0, mediaQueries.length).forEach((value, i) => {
+		const media = mediaQueries[i];
+		const style = sx(value, scale, props);
+		if (!media) Object.assign(styles, style);
+		else Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
+	});
+	return styles;
+};
+const parseResponsiveObject = (breakpoints, sx, scale, raw, props) => {
+	const styles = {};
+	for (const key in raw) {
+		const breakpoint = breakpoints[key];
+		const value = raw[key];
+		const style = sx(value, scale, props);
+		if (!breakpoint) Object.assign(styles, style);
+		else {
+			const media = createMediaQuery(breakpoint);
+			Object.assign(styles, { [media]: Object.assign({}, styles[media], style) });
+		}
+	}
+	return styles;
+};
+const createParser = (config) => {
+	const cache = {};
+	const parse = ((props) => {
+		let styles = {};
+		let shouldSort = false;
+		const isCacheDisabled = props.theme && props.theme.disableStyledSystemCache;
+		for (const key in props) {
+			if (!config[key]) continue;
+			const sx = config[key];
+			const raw = props[key];
+			const scale = get(props.theme, sx.scale, sx.defaults);
+			if (typeof raw === "object") {
+				cache.breakpoints = !isCacheDisabled && cache.breakpoints || get(props.theme, "breakpoints", defaults.breakpoints);
+				if (Array.isArray(raw)) {
+					cache.media = !isCacheDisabled && cache.media || [null, ...cache.breakpoints.map(createMediaQuery)];
+					styles = merge(styles, parseResponsiveStyle(cache.media, sx, scale, raw, props));
+					continue;
+				}
+				if (raw !== null) {
+					styles = merge(styles, parseResponsiveObject(cache.breakpoints, sx, scale, raw, props));
+					shouldSort = true;
+				}
+				continue;
+			}
+			Object.assign(styles, sx(raw, scale, props));
+		}
+		if (shouldSort) styles = sort(styles);
+		return styles;
+	});
+	parse.config = config;
+	parse.propNames = Object.keys(config);
+	parse.cache = cache;
+	const keys = Object.keys(config).filter((k) => k !== "config");
+	if (keys.length > 1) keys.forEach((key) => {
+		Object.assign(parse, { [key]: createParser({ [key]: config[key] }) });
+	});
+	return parse;
+};
+const createStyleFunction = ({ properties, property, scale, transform = getValue, defaultScale }) => {
+	const props = properties || [property];
+	const sx = (value, scaleArg, styleProps) => {
+		const result = {};
+		const n = transform(value, scaleArg, styleProps);
+		if (n === null) return;
+		props.forEach((prop) => {
+			result[prop] = n;
+		});
+		return result;
+	};
+	sx.scale = scale;
+	sx.defaults = defaultScale;
+	return sx;
+};
+const system = (args = {}) => {
+	const config = {};
+	Object.keys(args).forEach((key) => {
+		const conf = args[key];
+		if (conf === true) {
+			config[key] = createStyleFunction({
+				property: key,
+				scale: key
+			});
+			return;
+		}
+		if (typeof conf === "function") {
+			config[key] = conf;
+			return;
+		}
+		config[key] = createStyleFunction(conf);
+	});
+	return createParser(config);
+};
+const compose = (...parsers) => {
+	const config = {};
+	parsers.forEach((parser) => {
+		if (!parser || !parser.config) return;
+		Object.assign(config, parser.config);
+	});
+	return createParser(config);
+};
+//#endregion
+export { compose, createParser, createStyleFunction, get, merge, system };

package/dist/css-nzeM_Xnf.cjs

@@ -0,0 +1,231 @@
+//#region src/css/css.ts
+const get = (obj, key, def, p, undef) => {
+	const path = typeof key === "string" ? key.split(".") : [key];
+	let value = obj;
+	for (p = 0; p < path.length; p++) value = value ? value[path[p]] : undef;
+	return value === undef ? def : value;
+};
+const defaultBreakpoints = [
+	40,
+	52,
+	64
+].map((n) => n + "em");
+const defaultTheme = {
+	space: [
+		0,
+		4,
+		8,
+		16,
+		32,
+		64,
+		128,
+		256,
+		512
+	],
+	fontSizes: [
+		12,
+		14,
+		16,
+		20,
+		24,
+		32,
+		48,
+		64,
+		72
+	]
+};
+const aliases = {
+	bg: "backgroundColor",
+	m: "margin",
+	mt: "marginTop",
+	mr: "marginRight",
+	mb: "marginBottom",
+	ml: "marginLeft",
+	mx: "marginX",
+	my: "marginY",
+	p: "padding",
+	pt: "paddingTop",
+	pr: "paddingRight",
+	pb: "paddingBottom",
+	pl: "paddingLeft",
+	px: "paddingX",
+	py: "paddingY"
+};
+const multiples = {
+	marginX: ["marginLeft", "marginRight"],
+	marginY: ["marginTop", "marginBottom"],
+	paddingX: ["paddingLeft", "paddingRight"],
+	paddingY: ["paddingTop", "paddingBottom"],
+	size: ["width", "height"]
+};
+const scales = {
+	color: "colors",
+	backgroundColor: "colors",
+	borderColor: "colors",
+	margin: "space",
+	marginTop: "space",
+	marginRight: "space",
+	marginBottom: "space",
+	marginLeft: "space",
+	marginX: "space",
+	marginY: "space",
+	padding: "space",
+	paddingTop: "space",
+	paddingRight: "space",
+	paddingBottom: "space",
+	paddingLeft: "space",
+	paddingX: "space",
+	paddingY: "space",
+	top: "space",
+	right: "space",
+	bottom: "space",
+	left: "space",
+	gridGap: "space",
+	gridColumnGap: "space",
+	gridRowGap: "space",
+	gap: "space",
+	columnGap: "space",
+	rowGap: "space",
+	fontFamily: "fonts",
+	fontSize: "fontSizes",
+	fontWeight: "fontWeights",
+	lineHeight: "lineHeights",
+	letterSpacing: "letterSpacings",
+	border: "borders",
+	borderTop: "borders",
+	borderRight: "borders",
+	borderBottom: "borders",
+	borderLeft: "borders",
+	borderWidth: "borderWidths",
+	borderStyle: "borderStyles",
+	borderRadius: "radii",
+	borderTopRightRadius: "radii",
+	borderTopLeftRadius: "radii",
+	borderBottomRightRadius: "radii",
+	borderBottomLeftRadius: "radii",
+	borderTopWidth: "borderWidths",
+	borderTopColor: "colors",
+	borderTopStyle: "borderStyles",
+	borderBottomWidth: "borderWidths",
+	borderBottomColor: "colors",
+	borderBottomStyle: "borderStyles",
+	borderLeftWidth: "borderWidths",
+	borderLeftColor: "colors",
+	borderLeftStyle: "borderStyles",
+	borderRightWidth: "borderWidths",
+	borderRightColor: "colors",
+	borderRightStyle: "borderStyles",
+	outlineColor: "colors",
+	boxShadow: "shadows",
+	textShadow: "shadows",
+	zIndex: "zIndices",
+	width: "sizes",
+	minWidth: "sizes",
+	maxWidth: "sizes",
+	height: "sizes",
+	minHeight: "sizes",
+	maxHeight: "sizes",
+	flexBasis: "sizes",
+	size: "sizes",
+	fill: "colors",
+	stroke: "colors"
+};
+const positiveOrNegative = (scale, value) => {
+	if (typeof value !== "number" || value >= 0) return get(scale, value, value);
+	const absolute = Math.abs(value);
+	const n = get(scale, absolute, absolute);
+	if (typeof n === "string") return "-" + n;
+	return n * -1;
+};
+const transforms = [
+	"margin",
+	"marginTop",
+	"marginRight",
+	"marginBottom",
+	"marginLeft",
+	"marginX",
+	"marginY",
+	"top",
+	"bottom",
+	"left",
+	"right"
+].reduce((acc, curr) => ({
+	...acc,
+	[curr]: positiveOrNegative
+}), {});
+const responsive = (styles) => (theme) => {
+	const next = {};
+	const mediaQueries = [null, ...get(theme, "breakpoints", defaultBreakpoints).map((n) => `@media screen and (min-width: ${n})`)];
+	for (const key in styles) {
+		const value = typeof styles[key] === "function" ? styles[key](theme) : styles[key];
+		if (value == null) continue;
+		if (!Array.isArray(value)) {
+			next[key] = value;
+			continue;
+		}
+		const slice = value.slice(0, mediaQueries.length);
+		for (let i = 0; i < slice.length; i++) {
+			const media = mediaQueries[i];
+			if (!media) {
+				next[key] = slice[i];
+				continue;
+			}
+			const block = next[media] || {};
+			next[media] = block;
+			if (slice[i] == null) continue;
+			block[key] = slice[i];
+		}
+	}
+	return next;
+};
+const css = (args) => (props = {}) => {
+	const theme = {
+		...defaultTheme,
+		...props.theme || props
+	};
+	let result = {};
+	const styles = responsive(typeof args === "function" ? args(theme) : args)(theme);
+	for (const key in styles) {
+		const x = styles[key];
+		const val = typeof x === "function" ? x(theme) : x;
+		if (key === "variant") {
+			const variant = css(get(theme, val))(theme);
+			result = {
+				...result,
+				...variant
+			};
+			continue;
+		}
+		if (val && typeof val === "object") {
+			result[key] = css(val)(theme);
+			continue;
+		}
+		const prop = get(aliases, key, key);
+		const scale = get(theme, get(scales, prop), get(theme, prop, {}));
+		const value = get(transforms, prop, get)(scale, val, val);
+		if (multiples[prop]) {
+			const dirs = multiples[prop];
+			for (let i = 0; i < dirs.length; i++) result[dirs[i]] = value;
+		} else result[prop] = value;
+	}
+	return result;
+};
+//#endregion
+Object.defineProperty(exports, "css", {
+	enumerable: true,
+	get: function() {
+		return css;
+	}
+});
+Object.defineProperty(exports, "get", {
+	enumerable: true,
+	get: function() {
+		return get;
+	}
+});
+Object.defineProperty(exports, "responsive", {
+	enumerable: true,
+	get: function() {
+		return responsive;
+	}
+});