@marigold/system 16.0.1 → 16.1.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,19 @@ 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 given string is a valid CSS custom property name (without the leading `--`).
 *
@@ -79,10 +45,31 @@ 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})` };
+};
 
 //#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 +83,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 +93,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 +162,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 +205,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 +222,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);
@@ -581,8 +575,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 +842,8 @@ const alignment = {
 		alignmentX: {
 			left: "items-start",
 			center: "items-center",
-			right: "items-end"
+			right: "items-end",
+			stretch: "items-stretch"
 		},
 		alignmentY: {
 			top: "justify-start",
@@ -923,6 +918,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,6 +945,7 @@ exports.ThemeProvider = ThemeProvider;
 exports.alignment = alignment;
 exports.aspect = aspect;
 exports.cn = cn;
+exports.createSpacingVar = createSpacingVar;
 exports.createVar = createVar;
 exports.cursorStyle = cursorStyle;
 exports.cva = cva;
@@ -941,6 +956,7 @@ exports.fontWeight = fontWeight;
 exports.gapSpace = gapSpace;
 exports.get = get;
 exports.height = height;
+exports.isScale = isScale;
 exports.isValidCssCustomPropertyName = isValidCssCustomPropertyName;
 exports.maxWidth = maxWidth;
 exports.paddingBottom = paddingBottom;

package/dist/{index.d.ts → index.d.cts}

@@ -61,51 +61,21 @@ declare const NumericFormat: ({
   ...props
 }: NumericFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/utils.d.ts
+//#region src/utils/className.utils.d.ts
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
-type ConfigVariants<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | null | undefined };
-type ConfigVariantsMulti<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | StringToBoolean<keyof T$1[Variant]>[] | undefined };
-type Config<T$1> = T$1 extends ConfigSchema ? {
-  variants?: T$1;
-  defaultVariants?: ConfigVariants<T$1>;
-  compoundVariants?: (T$1 extends ConfigSchema ? (ConfigVariants<T$1> | ConfigVariantsMulti<T$1>) & ClassProp : ClassProp)[];
+type ConfigVariants<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined };
+type ConfigVariantsMulti<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined };
+type Config<T> = T extends ConfigSchema ? {
+  variants?: T;
+  defaultVariants?: ConfigVariants<T>;
+  compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
 } : never;
-type Props<T$1> = T$1 extends ConfigSchema ? ConfigVariants<T$1> & ClassProp : ClassProp;
+type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
 declare const cva: <T>(base?: ClassValue, config?: Config<T>) => {
   (props?: Props<T>): string;
   variants: T | undefined;
 };
 declare const cn: (...inputs: ClassValue[]) => string;
-declare const createVar: (o: {
-  [key: string]: string | number | undefined;
-}) => CSSProperties;
-/**
- * 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
- */
-declare const get: (obj: object, path: string, fallback?: any) => any;
-/**
- * Checks if a given string is a valid CSS custom property name (without the leading `--`).
- *
- * This simplified check ensures:
- * - The name does not start with a digit.
- * - It contains only word characters (letters, digits, underscore) or hyphens.
- * - It must include at least one hyphen to be considered a custom property name.
- */
-declare const isValidCssCustomPropertyName: (val: string) => boolean;
-/**
- * Ensures that the given value is formatted as a CSS variable reference.
- *
- * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
- * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
- * `prefix` is provided, it is prepended to the custom property name with a hyphen.
- *
- * If the value is not a valid custom property name, the function returns the original value.
- */
-declare const ensureCssVar: (val: string, prefix?: string) => string;
 //#endregion
 //#region src/types/theme.d.ts
 interface NestedStringObject {
@@ -181,8 +151,8 @@ type Theme = {
   };
 };
 type ComponentNames = keyof Theme['components'];
-type ThemeComponent<C$1 extends ComponentNames> = NonNullable<Theme['components'][C$1]>;
-type ThemeComponentParts<C$1 extends ComponentNames> = keyof ThemeComponent<C$1>;
+type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
+type ThemeComponentParts<C extends ComponentNames> = keyof ThemeComponent<C>;
 //#endregion
 //#region src/hooks/useClassNames.d.ts
 interface ComponentContextProps {
@@ -190,14 +160,14 @@ interface ComponentContextProps {
   variant?: string;
   [key: string]: any;
 }
-interface UseClassNamesProps<C$1 extends ComponentNames> {
-  component: C$1;
+interface UseClassNamesProps<C extends ComponentNames> {
+  component: C;
   variant?: string;
   size?: string;
-  className?: ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]?: string };
+  className?: ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]?: string };
   context?: Context<ComponentContextProps>;
 }
-type ComponentClassNames<C$1 extends ComponentNames> = ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]: string };
+type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]: string };
 declare const useClassNames: <C extends ComponentNames>({
   component,
   className,
@@ -228,11 +198,11 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 //#endregion
 //#region src/hooks/useTheme.d.ts
 declare const useTheme: () => Theme;
-interface ThemeProviderProps<T$1 extends Theme> {
+interface ThemeProviderProps<T extends Theme> {
   /**
    * The theme that should be used within the provider context.
    */
-  theme: T$1;
+  theme: T;
   /**
    * The children of the component.
    */
@@ -242,11 +212,11 @@ interface ThemeProviderProps<T$1 extends Theme> {
    */
   className?: string;
 }
-declare function ThemeProvider<T$1 extends Theme>({
+declare function ThemeProvider<T extends Theme>({
   theme,
   children,
   className
-}: ThemeProviderProps<T$1>): react_jsx_runtime0.JSX.Element;
+}: ThemeProviderProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/useSmallScreen.d.ts
 declare const useSmallScreen: () => boolean;
@@ -326,6 +296,76 @@ declare const defaultTheme: {
   components: {};
 };
 //#endregion
+//#region src/utils/css-variables.utils.d.ts
+/**
+ * Checks if the provided string represents a numeric scale value.
+ *
+ * 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`.
+ */
+declare const isScale: (value: string) => boolean;
+/**
+ * Represents the numeric values found in the default Tailwind CSS spacing scale.
+ *
+ * Includes:
+ * - Fractional steps: 0.5, 1.5, 2.5, 3.5
+ * - Integer steps: 0–12
+ * - Extended spacing steps: 14, 16, 20... up to 96
+ */
+type ScaleValue = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+/**
+ * A strictly typed union of valid Tailwind CSS spacing keys.
+ * Accepts both the raw numbers (e.g., `4`, `2.5`) and their string equivalents (e.g., `"4"`, `"2.5"`).
+ *
+ * @example
+ * const spacing: Scale = 4;      // Valid (matches w-4)
+ * const padding: Scale = "2.5";  // Valid (matches p-2.5)
+ */
+type Scale = ScaleValue | `${ScaleValue}`;
+/**
+ * Checks if a given string is a valid CSS custom property name (without the leading `--`).
+ *
+ * This simplified check ensures:
+ * - The name does not start with a digit.
+ * - It contains only word characters (letters, digits, underscore) or hyphens.
+ * - It must include at least one hyphen to be considered a custom property name.
+ */
+declare const isValidCssCustomPropertyName: (val: string) => boolean;
+/**
+ * Ensures that the given value is formatted as a CSS variable reference.
+ *
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
+ *
+ * If the value is not a valid custom property name, the function returns the original value.
+ */
+declare const ensureCssVar: (val: string, prefix?: string) => string;
+/**
+ * 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
+ */
+declare const createVar: (o: {
+  [key: string]: string | number | undefined;
+}) => CSSProperties;
+/**
+ * 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.
+ */
+declare const createSpacingVar: (name: string, value: string) => CSSProperties;
+//#endregion
 //#region src/style-props.d.ts
 declare const width: {
   readonly auto: "w-auto";
@@ -622,8 +662,8 @@ declare const gapSpace: {
   readonly 80: "gap-80";
   readonly 96: "gap-96";
   readonly section: "gap-[var(--spacing-section)]";
-  readonly fieldY: "gap-[var(--spacing-field-Y)]";
-  readonly fieldX: "gap-[var(--spacing-field-X)]";
+  readonly fieldY: "gap-[var(--spacing-fieldY)]";
+  readonly fieldX: "gap-[var(--spacing-fieldX)]";
   readonly container: "gap-[var(--spacing-container)]";
   readonly group: "gap-[var(--spacing-group)]";
 };
@@ -890,6 +930,7 @@ declare const alignment: {
       readonly left: "items-start";
       readonly center: "items-center";
       readonly right: "items-end";
+      readonly stretch: "items-stretch";
     };
     readonly alignmentY: {
       readonly top: "justify-start";
@@ -1092,5 +1133,26 @@ type HeightProp = {
    */
   height?: keyof typeof height;
 };
+/**
+ * Defines spacing properties for managing space between child elements.
+ * @template T - A string type parameter that allows extending the base spacing
+ *               scale with custom values. Defaults to an empty string.
+ */
+type SpaceProp<T extends string = ''> = {
+  /**
+   * Set the spacing between child elements.
+   */
+  space?: Scale | T;
+};
+//#endregion
+//#region src/utils/object.utils.d.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
+ */
+declare const get: (obj: object, path: string, fallback?: any) => any;
 //#endregion
-export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };
+export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isScale, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };

package/dist/index.d.mts

@@ -61,51 +61,21 @@ declare const NumericFormat: ({
   ...props
 }: NumericFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-//#region src/utils.d.ts
+//#region src/utils/className.utils.d.ts
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
-type ConfigVariants<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | null | undefined };
-type ConfigVariantsMulti<T$1 extends ConfigSchema> = { [Variant in keyof T$1]?: StringToBoolean<keyof T$1[Variant]> | StringToBoolean<keyof T$1[Variant]>[] | undefined };
-type Config<T$1> = T$1 extends ConfigSchema ? {
-  variants?: T$1;
-  defaultVariants?: ConfigVariants<T$1>;
-  compoundVariants?: (T$1 extends ConfigSchema ? (ConfigVariants<T$1> | ConfigVariantsMulti<T$1>) & ClassProp : ClassProp)[];
+type ConfigVariants<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined };
+type ConfigVariantsMulti<T extends ConfigSchema> = { [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined };
+type Config<T> = T extends ConfigSchema ? {
+  variants?: T;
+  defaultVariants?: ConfigVariants<T>;
+  compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
 } : never;
-type Props<T$1> = T$1 extends ConfigSchema ? ConfigVariants<T$1> & ClassProp : ClassProp;
+type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
 declare const cva: <T>(base?: ClassValue, config?: Config<T>) => {
   (props?: Props<T>): string;
   variants: T | undefined;
 };
 declare const cn: (...inputs: ClassValue[]) => string;
-declare const createVar: (o: {
-  [key: string]: string | number | undefined;
-}) => CSSProperties;
-/**
- * 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
- */
-declare const get: (obj: object, path: string, fallback?: any) => any;
-/**
- * Checks if a given string is a valid CSS custom property name (without the leading `--`).
- *
- * This simplified check ensures:
- * - The name does not start with a digit.
- * - It contains only word characters (letters, digits, underscore) or hyphens.
- * - It must include at least one hyphen to be considered a custom property name.
- */
-declare const isValidCssCustomPropertyName: (val: string) => boolean;
-/**
- * Ensures that the given value is formatted as a CSS variable reference.
- *
- * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
- * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
- * `prefix` is provided, it is prepended to the custom property name with a hyphen.
- *
- * If the value is not a valid custom property name, the function returns the original value.
- */
-declare const ensureCssVar: (val: string, prefix?: string) => string;
 //#endregion
 //#region src/types/theme.d.ts
 interface NestedStringObject {
@@ -181,8 +151,8 @@ type Theme = {
   };
 };
 type ComponentNames = keyof Theme['components'];
-type ThemeComponent<C$1 extends ComponentNames> = NonNullable<Theme['components'][C$1]>;
-type ThemeComponentParts<C$1 extends ComponentNames> = keyof ThemeComponent<C$1>;
+type ThemeComponent<C extends ComponentNames> = NonNullable<Theme['components'][C]>;
+type ThemeComponentParts<C extends ComponentNames> = keyof ThemeComponent<C>;
 //#endregion
 //#region src/hooks/useClassNames.d.ts
 interface ComponentContextProps {
@@ -190,14 +160,14 @@ interface ComponentContextProps {
   variant?: string;
   [key: string]: any;
 }
-interface UseClassNamesProps<C$1 extends ComponentNames> {
-  component: C$1;
+interface UseClassNamesProps<C extends ComponentNames> {
+  component: C;
   variant?: string;
   size?: string;
-  className?: ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]?: string };
+  className?: ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]?: string };
   context?: Context<ComponentContextProps>;
 }
-type ComponentClassNames<C$1 extends ComponentNames> = ThemeComponent<C$1> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C$1>]: string };
+type ComponentClassNames<C extends ComponentNames> = ThemeComponent<C> extends ((...args: any) => any) ? string : { [slot in keyof ThemeComponent<C>]: string };
 declare const useClassNames: <C extends ComponentNames>({
   component,
   className,
@@ -228,11 +198,11 @@ declare const useStateProps: (states: UseStateProps) => StateAttrProps;
 //#endregion
 //#region src/hooks/useTheme.d.ts
 declare const useTheme: () => Theme;
-interface ThemeProviderProps<T$1 extends Theme> {
+interface ThemeProviderProps<T extends Theme> {
   /**
    * The theme that should be used within the provider context.
    */
-  theme: T$1;
+  theme: T;
   /**
    * The children of the component.
    */
@@ -242,11 +212,11 @@ interface ThemeProviderProps<T$1 extends Theme> {
    */
   className?: string;
 }
-declare function ThemeProvider<T$1 extends Theme>({
+declare function ThemeProvider<T extends Theme>({
   theme,
   children,
   className
-}: ThemeProviderProps<T$1>): react_jsx_runtime0.JSX.Element;
+}: ThemeProviderProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/useSmallScreen.d.ts
 declare const useSmallScreen: () => boolean;
@@ -326,6 +296,76 @@ declare const defaultTheme: {
   components: {};
 };
 //#endregion
+//#region src/utils/css-variables.utils.d.ts
+/**
+ * Checks if the provided string represents a numeric scale value.
+ *
+ * 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`.
+ */
+declare const isScale: (value: string) => boolean;
+/**
+ * Represents the numeric values found in the default Tailwind CSS spacing scale.
+ *
+ * Includes:
+ * - Fractional steps: 0.5, 1.5, 2.5, 3.5
+ * - Integer steps: 0–12
+ * - Extended spacing steps: 14, 16, 20... up to 96
+ */
+type ScaleValue = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
+/**
+ * A strictly typed union of valid Tailwind CSS spacing keys.
+ * Accepts both the raw numbers (e.g., `4`, `2.5`) and their string equivalents (e.g., `"4"`, `"2.5"`).
+ *
+ * @example
+ * const spacing: Scale = 4;      // Valid (matches w-4)
+ * const padding: Scale = "2.5";  // Valid (matches p-2.5)
+ */
+type Scale = ScaleValue | `${ScaleValue}`;
+/**
+ * Checks if a given string is a valid CSS custom property name (without the leading `--`).
+ *
+ * This simplified check ensures:
+ * - The name does not start with a digit.
+ * - It contains only word characters (letters, digits, underscore) or hyphens.
+ * - It must include at least one hyphen to be considered a custom property name.
+ */
+declare const isValidCssCustomPropertyName: (val: string) => boolean;
+/**
+ * Ensures that the given value is formatted as a CSS variable reference.
+ *
+ * If the provided value (`val`) is a valid CSS custom property name (without the leading `--`),
+ * the function returns a string in the form of `var(--<prefix-if-provided><val>, <val>)`. When a
+ * `prefix` is provided, it is prepended to the custom property name with a hyphen.
+ *
+ * If the value is not a valid custom property name, the function returns the original value.
+ */
+declare const ensureCssVar: (val: string, prefix?: string) => string;
+/**
+ * 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
+ */
+declare const createVar: (o: {
+  [key: string]: string | number | undefined;
+}) => CSSProperties;
+/**
+ * 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.
+ */
+declare const createSpacingVar: (name: string, value: string) => CSSProperties;
+//#endregion
 //#region src/style-props.d.ts
 declare const width: {
   readonly auto: "w-auto";
@@ -622,8 +662,8 @@ declare const gapSpace: {
   readonly 80: "gap-80";
   readonly 96: "gap-96";
   readonly section: "gap-[var(--spacing-section)]";
-  readonly fieldY: "gap-[var(--spacing-field-Y)]";
-  readonly fieldX: "gap-[var(--spacing-field-X)]";
+  readonly fieldY: "gap-[var(--spacing-fieldY)]";
+  readonly fieldX: "gap-[var(--spacing-fieldX)]";
   readonly container: "gap-[var(--spacing-container)]";
   readonly group: "gap-[var(--spacing-group)]";
 };
@@ -890,6 +930,7 @@ declare const alignment: {
       readonly left: "items-start";
       readonly center: "items-center";
       readonly right: "items-end";
+      readonly stretch: "items-stretch";
     };
     readonly alignmentY: {
       readonly top: "justify-start";
@@ -1092,5 +1133,26 @@ type HeightProp = {
    */
   height?: keyof typeof height;
 };
+/**
+ * Defines spacing properties for managing space between child elements.
+ * @template T - A string type parameter that allows extending the base spacing
+ *               scale with custom values. Defaults to an empty string.
+ */
+type SpaceProp<T extends string = ''> = {
+  /**
+   * Set the spacing between child elements.
+   */
+  space?: Scale | T;
+};
+//#endregion
+//#region src/utils/object.utils.d.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
+ */
+declare const get: (obj: object, path: string, fallback?: any) => any;
 //#endregion
-export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };
+export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type Config, type ConfigSchema, type ConfigVariants, type ConfigVariantsMulti, type CursorProp, DateFormat, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, type Props, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type StateAttrKeyProps, type StateAttrProps, type StylesProps, type TextAlignProp, type TextWrapProp, type Theme, type ThemeComponent, type ThemeComponentParts, ThemeProvider, type ThemeProviderProps, type UseClassNamesProps, type UseStateProps, type VariantProps, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isScale, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };

package/dist/index.mjs

@@ -1,11 +1,10 @@
-import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { cva as cva$1, cx } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 import { jsx } from "react/jsx-runtime";
 import { useDateFormatter, useNumberFormatter } from "@react-aria/i18n";
-import isEqual from "react-fast-compare";
 
-//#region src/utils.ts
+//#region src/utils/className.utils.ts
 const cva = (base, config) => {
 	function styles(props) {
 		return twMerge(cva$1(base, config)(props));
@@ -14,23 +13,19 @@ const cva = (base, config) => {
 	return styles;
 };
 const cn = (...inputs) => twMerge(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 given string is a valid CSS custom property name (without the leading `--`).
 *
@@ -50,10 +45,31 @@ 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})` };
+};
 
 //#endregion
 //#region src/components/SVG/SVG.tsx
-const SVG = forwardRef(({ size = 24, children, className, color,...props }, ref) => {
+const SVG = forwardRef(({ size = 24, children, className, color, ...props }, ref) => {
 	return /* @__PURE__ */ jsx("svg", {
 		...props,
 		ref,
@@ -67,7 +83,7 @@ const SVG = forwardRef(({ size = 24, children, className, color,...props }, ref)
 
 //#endregion
 //#region src/components/Formatters/DateFormat.tsx
-const DateFormat = ({ value, tabular,...props }) => {
+const DateFormat = ({ value, tabular, ...props }) => {
 	const formatter = useDateFormatter({ ...props });
 	return /* @__PURE__ */ jsx("span", {
 		className: tabular ? "tabular-nums" : "",
@@ -77,7 +93,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 = useNumberFormatter({ ...props });
 	return /* @__PURE__ */ jsx("span", {
 		className: tabular ? "tabular-nums" : void 0,
@@ -146,6 +162,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.
@@ -181,14 +205,14 @@ const toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleL
 * (e.g. `[data-hover]` and `[data-focus]`).
 */
 const useStateProps = (states) => {
-	const statePropsRef = useRef({});
-	let stateProps = {};
-	for (let state in states) if (states[state]) {
-		const key = `data-${toKebap(state)}`;
-		stateProps[key] = "";
-	}
-	if (!isEqual(statePropsRef.current, stateProps)) statePropsRef.current = stateProps;
-	return statePropsRef.current;
+	return useMemo(() => {
+		const stateProps = {};
+		for (const state in states) if (states[state]) {
+			const key = `data-${toKebap(state)}`;
+			stateProps[key] = "";
+		}
+		return stateProps;
+	}, [states]);
 };
 
 //#endregion
@@ -198,12 +222,11 @@ const useSmallScreen = () => {
 		if (typeof window == "undefined") return false;
 		return window.matchMedia("(max-width: 600px)").matches;
 	};
-	const [matches, setMatches] = useState(getMatches());
+	const [matches, setMatches] = useState(getMatches);
 	const handleResize = useCallback(() => {
 		setMatches(getMatches());
 	}, []);
 	useEffect(() => {
-		handleResize();
 		if (typeof window == "undefined") return;
 		window.addEventListener("resize", handleResize);
 		return () => window.removeEventListener("resize", handleResize);
@@ -552,8 +575,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)]"
 };
@@ -819,7 +842,8 @@ const alignment = {
 		alignmentX: {
 			left: "items-start",
 			center: "items-center",
-			right: "items-end"
+			right: "items-end",
+			stretch: "items-stretch"
 		},
 		alignmentY: {
 			top: "justify-start",
@@ -895,4 +919,23 @@ const cursorStyle = {
 };
 
 //#endregion
-export { DateFormat, NumericFormat, SVG, ThemeProvider, alignment, aspect, cn, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };
+//#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
+export { DateFormat, NumericFormat, SVG, ThemeProvider, alignment, aspect, cn, createSpacingVar, createVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isScale, isValidCssCustomPropertyName, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, whiteSpace, width };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "16.0.1",
+  "version": "16.1.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -51,7 +51,7 @@
     "postcss": "8.5.6",
     "react": "19.2.0",
     "tailwindcss": "4.1.17",
-    "tsdown": "0.15.9",
+    "tsdown": "0.16.8",
     "@marigold/tsconfig": "0.4.2"
   },
   "scripts": {