@marigold/system 16.0.1 → 17.0.0

package/dist/{index.js → index.cjs}

@@ -1,40 +1,10 @@
-//#region rolldown:runtime
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-		key = keys[i];
-		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-			get: ((k) => from[k]).bind(null, key),
-			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-		});
-	}
-	return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-	value: mod,
-	enumerable: true
-}) : target, mod));
-
-//#endregion
 let react = require("react");
-react = __toESM(react);
 let class_variance_authority = require("class-variance-authority");
-class_variance_authority = __toESM(class_variance_authority);
 let tailwind_merge = require("tailwind-merge");
-tailwind_merge = __toESM(tailwind_merge);
 let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = __toESM(react_jsx_runtime);
 let __react_aria_i18n = require("@react-aria/i18n");
-__react_aria_i18n = __toESM(__react_aria_i18n);
-let react_fast_compare = require("react-fast-compare");
-react_fast_compare = __toESM(react_fast_compare);
 
-//#region src/utils.ts
+//#region src/utils/className.utils.ts
 const cva = (base, config) => {
 	function styles(props) {
 		return (0, tailwind_merge.twMerge)((0, class_variance_authority.cva)(base, config)(props));
@@ -43,23 +13,26 @@ const cva = (base, config) => {
 	return styles;
 };
 const cn = (...inputs) => (0, tailwind_merge.twMerge)((0, class_variance_authority.cx)(inputs));
-const createVar = (o) => Object.fromEntries(Object.entries(o).map(([name, val]) => [`--${name}`, val]));
+
+//#endregion
+//#region src/utils/css-variables.utils.ts
 /**
-* Safely get a dot-notated path within a nested object, with ability
-* to return a default if the full key path does not exist or
-* the value is undefined
+* Checks if the provided string represents a numeric scale value.
 *
-* Based on: https://github.com/developit/dlv
+* A scale value is defined as a string containing only digits,
+* optionally followed by a decimal point and more digits (e.g., "1", "2.5").
+*
+* @param value - The string to test for scale format.
+* @returns `true` if the string is a valid scale value, otherwise `false`.
 */
-const get = (obj, path, fallback) => {
-	const key = path.split(".");
-	let result = obj;
-	for (let i = 0, length = key.length; i < length; i++) {
-		if (!result) break;
-		result = result[key[i]];
-	}
-	return result === void 0 ? fallback : result;
-};
+const isScale = (value) => /^[0-9]+(\.[0-9]+)?$/.test(value);
+/**
+* Checks if a value represents a fraction (e.g., "1/2", "2/3").
+*
+* @param value - The string to test for fraction format.
+* @returns `true` if the string is a valid fraction, otherwise `false`.
+*/
+const isFraction = (value) => /^[0-9]+\/[0-9]+$/.test(value);
 /**
 * Checks if a given string is a valid CSS custom property name (without the leading `--`).
 *
@@ -79,10 +52,58 @@ const isValidCssCustomPropertyName = (val) => /^[A-Za-z0-9_-]+$/.test(val);
 * If the value is not a valid custom property name, the function returns the original value.
 */
 const ensureCssVar = (val, prefix) => isValidCssCustomPropertyName(val) ? `var(--${prefix ? `${prefix}-` : ""}${val}, ${val})` : val;
+/**
+* Creates a CSS custom properties object from the given key-value pairs.
+*
+* @param o - An object with string keys and string/number/undefined values
+* @returns A CSSProperties object with `--` prefixed keys
+*/
+const createVar = (o) => Object.fromEntries(Object.entries(o).map(([name, val]) => [`--${name}`, val]));
+/**
+* Generates a CSS custom property for spacing that uses either a calc expression or a
+* spacing variable reference.
+*
+* If `value` is a number (integer or decimal), uses the `--spacing` scale from Tailwind with calc().
+* Otherwise, references a specific spacing variable (e.g., `--spacing-group`).
+*
+* @param name - The custom property name for spacing.
+* @param value - Spacing value as a string (number or scale key).
+* @returns Object with the CSS custom property for spacing.
+*/
+const createSpacingVar = (name, value) => {
+	return { [`--${name}`]: isScale(value) ? `calc(var(--spacing) * ${value})` : `var(--spacing-${value})` };
+};
+/**
+* Generates a CSS custom property for width that uses either a calc expression or a
+* fraction percentage.
+*
+* Supports:
+* - Numeric scale (e.g., "4", "2.5"): Uses `--spacing` scale with calc() → `w-4`, `w-2.5`
+* - Fractions (e.g., "1/2", "2/3"): Converts to percentage → `w-1/2`, `w-2/3`
+* - CSS keywords (e.g., "fit", "min", "max"): Uses corresponding CSS values → `w-fit`, `w-min`, `w-max`
+*
+* @param name - The custom property name for width.
+* @param value - Width value as a string (number, fraction, or keyword).
+* @returns Object with the CSS custom property for width.
+*
+*/
+const createWidthVar = (name, value) => {
+	const widthKeywords = {
+		fit: "fit-content",
+		min: "min-content",
+		max: "max-content",
+		full: "100%",
+		screen: "100vw",
+		auto: "auto"
+	};
+	const resolvedValue = widthKeywords[value] || isScale(value) && `calc(var(--spacing) * ${value})` || isFraction(value) && `calc((${value.split("/").join(" / ")}) * 100%)`;
+	if (!resolvedValue) throw new Error(`Unsupported width value: "${value}". Expected a keyword (${Object.keys(widthKeywords).join(", ")}), a scale number, or a fraction (e.g., "1/2").`);
+	return { [`--${name}`]: resolvedValue };
+};
 
 //#endregion
 //#region src/components/SVG/SVG.tsx
-const SVG = (0, react.forwardRef)(({ size = 24, children, className, color,...props }, ref) => {
+const SVG = (0, react.forwardRef)(({ size = 24, children, className, color, ...props }, ref) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		...props,
 		ref,
@@ -96,7 +117,7 @@ const SVG = (0, react.forwardRef)(({ size = 24, children, className, color,...pr
 
 //#endregion
 //#region src/components/Formatters/DateFormat.tsx
-const DateFormat = ({ value, tabular,...props }) => {
+const DateFormat = ({ value, tabular, ...props }) => {
 	const formatter = (0, __react_aria_i18n.useDateFormatter)({ ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: tabular ? "tabular-nums" : "",
@@ -106,7 +127,7 @@ const DateFormat = ({ value, tabular,...props }) => {
 
 //#endregion
 //#region src/components/Formatters/NumericFormat.tsx
-const NumericFormat = ({ value, tabular = true,...props }) => {
+const NumericFormat = ({ value, tabular = true, ...props }) => {
 	const formatter = (0, __react_aria_i18n.useNumberFormatter)({ ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: tabular ? "tabular-nums" : void 0,
@@ -175,6 +196,14 @@ const useClassNames = ({ component, className, variant, size, context: Component
 //#endregion
 //#region src/hooks/useResponsiveValue.ts
 /**
+* Based on https://theme-ui.com/packages/match-media/
+*/
+/**
+* Hardcode fallback breakpoints, not make sure `useEffect`
+* doesn't trigger on every render. Since it is part of the
+* dependency array.
+*/
+/**
 * Hook that can be used to return values based on the current screen size,
 * using breakpoints from the theme (`theme.breakpoints`). Note that this
 * hook is client.side only.
@@ -210,14 +239,14 @@ const toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleL
 * (e.g. `[data-hover]` and `[data-focus]`).
 */
 const useStateProps = (states) => {
-	const statePropsRef = (0, react.useRef)({});
-	let stateProps = {};
-	for (let state in states) if (states[state]) {
-		const key = `data-${toKebap(state)}`;
-		stateProps[key] = "";
-	}
-	if (!(0, react_fast_compare.default)(statePropsRef.current, stateProps)) statePropsRef.current = stateProps;
-	return statePropsRef.current;
+	return (0, react.useMemo)(() => {
+		const stateProps = {};
+		for (const state in states) if (states[state]) {
+			const key = `data-${toKebap(state)}`;
+			stateProps[key] = "";
+		}
+		return stateProps;
+	}, [states]);
 };
 
 //#endregion
@@ -227,12 +256,11 @@ const useSmallScreen = () => {
 		if (typeof window == "undefined") return false;
 		return window.matchMedia("(max-width: 600px)").matches;
 	};
-	const [matches, setMatches] = (0, react.useState)(getMatches());
+	const [matches, setMatches] = (0, react.useState)(getMatches);
 	const handleResize = (0, react.useCallback)(() => {
 		setMatches(getMatches());
 	}, []);
 	(0, react.useEffect)(() => {
-		handleResize();
 		if (typeof window == "undefined") return;
 		window.addEventListener("resize", handleResize);
 		return () => window.removeEventListener("resize", handleResize);
@@ -545,6 +573,14 @@ const whiteSpace = {
 	preWrap: "whitespace-pre-wrap",
 	breakSpaces: "whitespace-break-spaces"
 };
+const lineHeight = {
+	none: "leading-none",
+	tight: "leading-tight",
+	snug: "leading-snug",
+	normal: "leading-normal",
+	relaxed: "leading-relaxed",
+	loose: "leading-loose"
+};
 const gapSpace = {
 	0: "gap-0",
 	"0.5": "gap-0.5",
@@ -581,8 +617,8 @@ const gapSpace = {
 	80: "gap-80",
 	96: "gap-96",
 	section: "gap-[var(--spacing-section)]",
-	fieldY: "gap-[var(--spacing-field-Y)]",
-	fieldX: "gap-[var(--spacing-field-X)]",
+	fieldY: "gap-[var(--spacing-fieldY)]",
+	fieldX: "gap-[var(--spacing-fieldX)]",
 	container: "gap-[var(--spacing-container)]",
 	group: "gap-[var(--spacing-group)]"
 };
@@ -848,7 +884,8 @@ const alignment = {
 		alignmentX: {
 			left: "items-start",
 			center: "items-center",
-			right: "items-end"
+			right: "items-end",
+			stretch: "items-stretch"
 		},
 		alignmentY: {
 			top: "justify-start",
@@ -882,11 +919,16 @@ const placeItems = {
 	right: "place-items-end"
 };
 const textAlign = {
-	none: void 0,
 	left: "text-left",
 	center: "text-center",
 	right: "text-right"
 };
+const verticalAlign = {
+	top: "align-top",
+	middle: "align-middle",
+	bottom: "align-bottom",
+	baseline: "align-baseline"
+};
 const aspect = {
 	square: "aspect-[1]",
 	landscape: "aspect-4/3",
@@ -923,6 +965,25 @@ const cursorStyle = {
 	zoomOut: "cursor-zoom-out"
 };
 
+//#endregion
+//#region src/utils/object.utils.ts
+/**
+* Safely get a dot-notated path within a nested object, with ability
+* to return a default if the full key path does not exist or
+* the value is undefined
+*
+* Based on: https://github.com/developit/dlv
+*/
+const get = (obj, path, fallback) => {
+	const key = path.split(".");
+	let result = obj;
+	for (let i = 0, length = key.length; i < length; i++) {
+		if (!result) break;
+		result = result[key[i]];
+	}
+	return result === void 0 ? fallback : result;
+};
+
 //#endregion
 exports.DateFormat = DateFormat;
 exports.NumericFormat = NumericFormat;
@@ -931,7 +992,9 @@ exports.ThemeProvider = ThemeProvider;
 exports.alignment = alignment;
 exports.aspect = aspect;
 exports.cn = cn;
+exports.createSpacingVar = createSpacingVar;
 exports.createVar = createVar;
+exports.createWidthVar = createWidthVar;
 exports.cursorStyle = cursorStyle;
 exports.cva = cva;
 exports.defaultTheme = defaultTheme;
@@ -941,7 +1004,10 @@ exports.fontWeight = fontWeight;
 exports.gapSpace = gapSpace;
 exports.get = get;
 exports.height = height;
+exports.isFraction = isFraction;
+exports.isScale = isScale;
 exports.isValidCssCustomPropertyName = isValidCssCustomPropertyName;
+exports.lineHeight = lineHeight;
 exports.maxWidth = maxWidth;
 exports.paddingBottom = paddingBottom;
 exports.paddingLeft = paddingLeft;
@@ -960,5 +1026,6 @@ exports.useResponsiveValue = useResponsiveValue;
 exports.useSmallScreen = useSmallScreen;
 exports.useStateProps = useStateProps;
 exports.useTheme = useTheme;
+exports.verticalAlign = verticalAlign;
 exports.whiteSpace = whiteSpace;
 exports.width = width;