@marigold/system 17.1.0 → 17.2.1

package/dist/index.cjs

@@ -1,18 +1,12 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 let react = require("react");
-let class_variance_authority = require("class-variance-authority");
+let cva = require("cva");
 let tailwind_merge = require("tailwind-merge");
 let react_jsx_runtime = require("react/jsx-runtime");
-let __react_aria_i18n = require("@react-aria/i18n");
+let _react_aria_i18n = require("@react-aria/i18n");
 
 //#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));
-	}
-	styles.variants = config?.variants;
-	return styles;
-};
-const cn = (...inputs) => (0, tailwind_merge.twMerge)((0, class_variance_authority.cx)(inputs));
+const { cva: cva$1, cx: cn, compose } = (0, cva.defineConfig)({ hooks: { onComplete: (className) => (0, tailwind_merge.twMerge)(className) } });
 
 //#endregion
 //#region src/utils/css-variables.utils.ts
@@ -118,7 +112,7 @@ const SVG = (0, react.forwardRef)(({ size = 24, children, className, color, ...p
 //#endregion
 //#region src/components/Formatters/DateFormat.tsx
 const DateFormat = ({ value, tabular, ...props }) => {
-	const formatter = (0, __react_aria_i18n.useDateFormatter)({ ...props });
+	const formatter = (0, _react_aria_i18n.useDateFormatter)({ ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: tabular ? "tabular-nums" : "",
 		children: Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value)
@@ -128,7 +122,7 @@ const DateFormat = ({ value, tabular, ...props }) => {
 //#endregion
 //#region src/components/Formatters/NumericFormat.tsx
 const NumericFormat = ({ value, tabular = true, ...props }) => {
-	const formatter = (0, __react_aria_i18n.useNumberFormatter)({ ...props });
+	const formatter = (0, _react_aria_i18n.useNumberFormatter)({ ...props });
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: tabular ? "tabular-nums" : void 0,
 		children: Array.isArray(value) ? formatter.formatRange(value[0], value[1]) : formatter.format(value)
@@ -251,64 +245,53 @@ const useStateProps = (states) => {
 
 //#endregion
 //#region src/hooks/useSmallScreen.ts
+/**
+* Uses CSS Media Queries Level 4 range syntax, matching Tailwind v4's
+* `max-sm:` variant. This ensures the hook returns `true` for exactly
+* the screen widths where `max-sm:` styles apply.
+*/
+const smallScreenQuery = `(width < ${defaultTheme.screens.sm})`;
 const useSmallScreen = () => {
-	const getMatches = () => {
+	const [matches, setMatches] = (0, react.useState)(() => {
 		if (typeof window == "undefined") return false;
-		return window.matchMedia("(max-width: 600px)").matches;
-	};
-	const [matches, setMatches] = (0, react.useState)(getMatches);
-	const handleResize = (0, react.useCallback)(() => {
-		setMatches(getMatches());
-	}, []);
+		return window.matchMedia(smallScreenQuery).matches;
+	});
 	(0, react.useEffect)(() => {
 		if (typeof window == "undefined") return;
-		window.addEventListener("resize", handleResize);
-		return () => window.removeEventListener("resize", handleResize);
-	}, [handleResize]);
+		const mediaQuery = window.matchMedia(smallScreenQuery);
+		const handler = (e) => setMatches(e.matches);
+		mediaQuery.addEventListener("change", handler);
+		return () => mediaQuery.removeEventListener("change", handler);
+	}, []);
 	return matches;
 };
 
 //#endregion
 //#region src/hooks/extendTheme.tsx
+/**
+* Compose two style functions into one. The new function's styles
+* are applied on top of the existing function's styles via `cn` (twMerge),
+* so Tailwind conflicts are resolved with "new wins".
+*/
+const composeStyleFns = (newFn, existingFn) => (props) => cn(existingFn(props), newFn(props));
 const extendTheme = (newStyles, theme) => {
-	const mergedStyles = { ...theme.components };
-	Object.keys(newStyles).forEach((component) => {
-		const componentStyles = newStyles[component];
-		const mergedComponentStyles = mergedStyles[component];
-		if (!mergedComponentStyles) return mergedStyles;
-		if (typeof newStyles[component] !== "function") mergedStyles[component] = Object.keys(componentStyles).reduce((acc, slot) => {
-			const newSlot = componentStyles[slot];
-			const mergedSlot = mergedComponentStyles[slot];
-			const variants = ["size", "variant"].reduce((acc$1, variantItem) => {
-				acc$1[variantItem] = {
-					...newSlot?.variants?.[variantItem],
-					...mergedSlot?.variants?.[variantItem]
-				};
-				return acc$1;
-			}, {});
-			acc[slot] = cva([mergedSlot(), newSlot()], { variants });
-			return acc;
-		}, { ...mergedComponentStyles });
+	const mergedComponents = { ...theme.components };
+	for (const key of Object.keys(newStyles)) {
+		const component = key;
+		const existing = mergedComponents[component];
+		if (!existing) continue;
+		const incoming = newStyles[component];
+		if (typeof incoming === "function") mergedComponents[component] = composeStyleFns(incoming, existing);
 		else {
-			const variants = ["size", "variant"].reduce((acc, variantItem) => {
-				const newStylesVariants = newStyles[component].variants?.[variantItem];
-				const mergedStylesVariants = mergedStyles[component].variants?.[variantItem];
-				if (newStylesVariants && mergedStylesVariants) {
-					const dupVariants = Object.keys(newStylesVariants).filter((variant) => Object.keys(mergedStylesVariants).includes(variant));
-					if (dupVariants.length) throw new Error(dupVariants.join() + " already exists!");
-				}
-				acc[variantItem] = {
-					...newStyles[component].variants?.[variantItem],
-					...mergedStyles[component].variants?.[variantItem]
-				};
-				return acc;
-			}, {});
-			mergedStyles[component] = cva([mergedComponentStyles(), componentStyles()], { variants });
+			const existingSlots = existing;
+			const merged = { ...existingSlots };
+			for (const slot of Object.keys(incoming)) merged[slot] = composeStyleFns(incoming[slot], existingSlots[slot]);
+			mergedComponents[component] = merged;
 		}
-	});
+	}
 	return {
 		...theme,
-		components: { ...mergedStyles }
+		components: { ...mergedComponents }
 	};
 };
 
@@ -615,12 +598,7 @@ const gapSpace = {
 	64: "gap-64",
 	72: "gap-72",
 	80: "gap-80",
-	96: "gap-96",
-	section: "gap-[var(--spacing-section)]",
-	fieldY: "gap-[var(--spacing-fieldY)]",
-	fieldX: "gap-[var(--spacing-fieldX)]",
-	container: "gap-[var(--spacing-container)]",
-	group: "gap-[var(--spacing-group)]"
+	96: "gap-96"
 };
 const paddingSpace = {
 	0: "p-0",
@@ -728,12 +706,7 @@ const paddingSpaceY = {
 	64: "py-64",
 	72: "py-72",
 	80: "py-80",
-	96: "py-96",
-	section: "py-[var(--spacing-section)]",
-	fieldY: "py-[var(--spacing-field-Y)]",
-	fieldX: "py-[var(--spacing-field-X)]",
-	container: "py-[var(--spacing-container)]",
-	group: "py-[var(--spacing-group)]"
+	96: "py-96"
 };
 const paddingRight = {
 	0: "pr-0",
@@ -996,7 +969,7 @@ exports.createSpacingVar = createSpacingVar;
 exports.createVar = createVar;
 exports.createWidthVar = createWidthVar;
 exports.cursorStyle = cursorStyle;
-exports.cva = cva;
+exports.cva = cva$1;
 exports.defaultTheme = defaultTheme;
 exports.ensureCssVar = ensureCssVar;
 exports.extendTheme = extendTheme;

package/dist/index.d.cts

@@ -1,10 +1,9 @@
-import * as react0 from "react";
+import * as react from "react";
 import { CSSProperties, Context, ReactNode } from "react";
 import { HtmlProps, KebabCase } from "@marigold/types";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DateFormatterOptions, useNumberFormatter } from "@react-aria/i18n";
-import { ClassProp, ClassValue, StringToBoolean } from "class-variance-authority/dist/types";
-import { VariantProps } from "class-variance-authority";
+import { ClassValue, VariantProps } from "cva";
 
 //#region src/components/SVG/SVG.d.ts
 interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
@@ -17,7 +16,7 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
    */
   className?: string;
 }
-declare const SVG: react0.ForwardRefExoticComponent<SVGProps & react0.RefAttributes<SVGSVGElement>>;
+declare const SVG: react.ForwardRefExoticComponent<SVGProps & react.RefAttributes<SVGSVGElement>>;
 //#endregion
 //#region src/components/Formatters/DateFormat.d.ts
 interface DateFormatProps extends DateFormatterOptions {
@@ -62,20 +61,7 @@ declare const NumericFormat: ({
 }: NumericFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/utils/className.utils.d.ts
-type ConfigSchema = Record<string, Record<string, ClassValue>>;
-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> = 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 cva: cva.CVA, cn: cva.CX, compose: cva.Compose;
 //#endregion
 //#region src/types/theme.d.ts
 interface NestedStringObject {
@@ -89,7 +75,6 @@ interface ComponentStyleFunction<Variants extends string = never, Sizes extends
     size?: Sizes | null;
     className?: ClassValue;
   } & Partial<Additional>): string;
-  variants: ConfigSchema | undefined;
 }
 type Theme = {
   name: string;
@@ -102,7 +87,7 @@ type Theme = {
   root?: ComponentStyleFunction;
   components: {
     Accordion?: Record<'container' | 'item' | 'header' | 'panel' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
-    ActionBar?: Record<'container' | 'count' | 'actions' | 'clearButton', ComponentStyleFunction<string, string>>;
+    ActionBar?: Record<'container' | 'selection' | 'count' | 'toolbar' | 'clearButton' | 'actionButton', ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<'container' | 'item' | 'link' | 'current', ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -145,7 +130,7 @@ type Theme = {
     TextArea?: ComponentStyleFunction<string, string>;
     Tooltip?: Record<'container' | 'arrow', ComponentStyleFunction<string, string>>;
     Toast?: Record<'toast' | 'title' | 'description' | 'closeButton' | 'icon' | 'content' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'top' | 'bottom' | 'action', ComponentStyleFunction<string, string>>;
-    Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab', ComponentStyleFunction<string, string>>;
+    Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab' | 'tabIndicator', ComponentStyleFunction<string, string>>;
     Underlay?: ComponentStyleFunction<string, string>;
     Calendar?: Record<'calendar' | 'calendarContainer' | 'calendarMonth' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
@@ -155,6 +140,8 @@ type Theme = {
     FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription' | 'itemRemove', ComponentStyleFunction<string, string>>;
     EmptyState?: Record<'container' | 'title' | 'description' | 'action', ComponentStyleFunction<string, string>>;
     ToggleButton?: Record<'group' | 'button', ComponentStyleFunction<string, string>>;
+    Sidebar?: Record<'root' | 'overlay' | 'modal' | 'closeButton' | 'header' | 'nav' | 'footer' | 'toggle' | 'separator' | 'groupLabel' | 'navPanel' | 'navLink' | 'backButton' | 'content', ComponentStyleFunction<string, string>>;
+    TopNavigation?: Record<'container' | 'start' | 'middle' | 'end', ComponentStyleFunction<string, string>>;
   };
 };
 type ComponentNames = keyof Theme['components'];
@@ -233,7 +220,7 @@ type StylesProps = { [K in keyof Theme['components']]: Partial<Theme['components
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
   components: {
     Accordion?: Record<"container" | "item" | "header" | "panel" | "content" | "icon", ComponentStyleFunction<string, string>>;
-    ActionBar?: Record<"container" | "count" | "actions" | "clearButton", ComponentStyleFunction<string, string>>;
+    ActionBar?: Record<"container" | "selection" | "count" | "toolbar" | "clearButton" | "actionButton", ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<"container" | "item" | "link" | "current", ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -276,7 +263,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     TextArea?: ComponentStyleFunction<string, string>;
     Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
     Toast?: Record<"toast" | "title" | "description" | "closeButton" | "icon" | "content" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "top" | "bottom" | "action", ComponentStyleFunction<string, string>>;
-    Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
+    Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab" | "tabIndicator", ComponentStyleFunction<string, string>>;
     Underlay?: ComponentStyleFunction<string, string>;
     Calendar?: Record<"calendar" | "calendarContainer" | "calendarMonth" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
@@ -286,6 +273,8 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription" | "itemRemove", ComponentStyleFunction<string, string>>;
     EmptyState?: Record<"container" | "title" | "description" | "action", ComponentStyleFunction<string, string>>;
     ToggleButton?: Record<"group" | "button", ComponentStyleFunction<string, string>>;
+    Sidebar?: Record<"root" | "overlay" | "modal" | "closeButton" | "header" | "nav" | "footer" | "toggle" | "separator" | "groupLabel" | "navPanel" | "navLink" | "backButton" | "content", ComponentStyleFunction<string, string>>;
+    TopNavigation?: Record<"container" | "start" | "middle" | "end", ComponentStyleFunction<string, string>>;
   };
   name: string;
   screens?: {
@@ -306,7 +295,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
  * arbitrary pixel values, allowing interfaces to adapt gracefully across different
  * contexts and density settings.
  */
-type SpacingTokens = 'joined' | 'tight' | 'related' | 'peer' | 'group' | 'section' | 'context';
+type SpacingTokens = 'tight' | 'related' | 'regular' | 'group' | 'section';
 //#endregion
 //#region src/defaultTheme.d.ts
 declare const defaultTheme: {
@@ -716,11 +705,6 @@ declare const gapSpace: {
   readonly 72: "gap-72";
   readonly 80: "gap-80";
   readonly 96: "gap-96";
-  readonly section: "gap-[var(--spacing-section)]";
-  readonly fieldY: "gap-[var(--spacing-fieldY)]";
-  readonly fieldX: "gap-[var(--spacing-fieldX)]";
-  readonly container: "gap-[var(--spacing-container)]";
-  readonly group: "gap-[var(--spacing-group)]";
 };
 declare const paddingSpace: {
   readonly 0: "p-0";
@@ -829,11 +813,6 @@ declare const paddingSpaceY: {
   readonly 72: "py-72";
   readonly 80: "py-80";
   readonly 96: "py-96";
-  readonly section: "py-[var(--spacing-section)]";
-  readonly fieldY: "py-[var(--spacing-field-Y)]";
-  readonly fieldX: "py-[var(--spacing-field-X)]";
-  readonly container: "py-[var(--spacing-container)]";
-  readonly group: "py-[var(--spacing-group)]";
 };
 declare const paddingRight: {
   readonly 0: "pr-0";
@@ -1227,4 +1206,4 @@ type SpaceProp<T extends string = ''> = {
  */
 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 DateFormatProps, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type LineHeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type NumericFormatProps, 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 SpacingTokens, 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 VerticalAlignProp, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };
+export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type CursorProp, DateFormat, type DateFormatProps, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type LineHeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type NumericFormatProps, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type SpacingTokens, 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 VerticalAlignProp, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };

package/dist/index.d.mts

@@ -1,10 +1,9 @@
-import * as react0 from "react";
+import * as react from "react";
 import { CSSProperties, Context, ReactNode } from "react";
-import { VariantProps } from "class-variance-authority";
+import { ClassValue, VariantProps } from "cva";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { DateFormatterOptions, useNumberFormatter } from "@react-aria/i18n";
 import { HtmlProps, KebabCase } from "@marigold/types";
-import { ClassProp, ClassValue, StringToBoolean } from "class-variance-authority/dist/types";
 
 //#region src/components/SVG/SVG.d.ts
 interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
@@ -17,7 +16,7 @@ interface SVGProps extends Omit<HtmlProps<'svg'>, 'fill' | 'style'> {
    */
   className?: string;
 }
-declare const SVG: react0.ForwardRefExoticComponent<SVGProps & react0.RefAttributes<SVGSVGElement>>;
+declare const SVG: react.ForwardRefExoticComponent<SVGProps & react.RefAttributes<SVGSVGElement>>;
 //#endregion
 //#region src/components/Formatters/DateFormat.d.ts
 interface DateFormatProps extends DateFormatterOptions {
@@ -62,20 +61,7 @@ declare const NumericFormat: ({
 }: NumericFormatProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/utils/className.utils.d.ts
-type ConfigSchema = Record<string, Record<string, ClassValue>>;
-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> = 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 cva: cva.CVA, cn: cva.CX, compose: cva.Compose;
 //#endregion
 //#region src/types/theme.d.ts
 interface NestedStringObject {
@@ -89,7 +75,6 @@ interface ComponentStyleFunction<Variants extends string = never, Sizes extends
     size?: Sizes | null;
     className?: ClassValue;
   } & Partial<Additional>): string;
-  variants: ConfigSchema | undefined;
 }
 type Theme = {
   name: string;
@@ -102,7 +87,7 @@ type Theme = {
   root?: ComponentStyleFunction;
   components: {
     Accordion?: Record<'container' | 'item' | 'header' | 'panel' | 'content' | 'icon', ComponentStyleFunction<string, string>>;
-    ActionBar?: Record<'container' | 'count' | 'actions' | 'clearButton', ComponentStyleFunction<string, string>>;
+    ActionBar?: Record<'container' | 'selection' | 'count' | 'toolbar' | 'clearButton' | 'actionButton', ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<'container' | 'item' | 'link' | 'current', ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -145,7 +130,7 @@ type Theme = {
     TextArea?: ComponentStyleFunction<string, string>;
     Tooltip?: Record<'container' | 'arrow', ComponentStyleFunction<string, string>>;
     Toast?: Record<'toast' | 'title' | 'description' | 'closeButton' | 'icon' | 'content' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'top' | 'bottom' | 'action', ComponentStyleFunction<string, string>>;
-    Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab', ComponentStyleFunction<string, string>>;
+    Tabs?: Record<'container' | 'tabsList' | 'tabpanel' | 'tab' | 'tabIndicator', ComponentStyleFunction<string, string>>;
     Underlay?: ComponentStyleFunction<string, string>;
     Calendar?: Record<'calendar' | 'calendarContainer' | 'calendarMonth' | 'calendarListboxButton' | 'calendarCell' | 'calendarControllers' | 'calendarHeader' | 'calendarGrid' | 'select', ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
@@ -155,6 +140,8 @@ type Theme = {
     FileField?: Record<'container' | 'dropZone' | 'dropZoneContent' | 'dropZoneLabel' | 'item' | 'itemLabel' | 'itemDescription' | 'itemRemove', ComponentStyleFunction<string, string>>;
     EmptyState?: Record<'container' | 'title' | 'description' | 'action', ComponentStyleFunction<string, string>>;
     ToggleButton?: Record<'group' | 'button', ComponentStyleFunction<string, string>>;
+    Sidebar?: Record<'root' | 'overlay' | 'modal' | 'closeButton' | 'header' | 'nav' | 'footer' | 'toggle' | 'separator' | 'groupLabel' | 'navPanel' | 'navLink' | 'backButton' | 'content', ComponentStyleFunction<string, string>>;
+    TopNavigation?: Record<'container' | 'start' | 'middle' | 'end', ComponentStyleFunction<string, string>>;
   };
 };
 type ComponentNames = keyof Theme['components'];
@@ -233,7 +220,7 @@ type StylesProps = { [K in keyof Theme['components']]: Partial<Theme['components
 declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
   components: {
     Accordion?: Record<"container" | "item" | "header" | "panel" | "content" | "icon", ComponentStyleFunction<string, string>>;
-    ActionBar?: Record<"container" | "count" | "actions" | "clearButton", ComponentStyleFunction<string, string>>;
+    ActionBar?: Record<"container" | "selection" | "count" | "toolbar" | "clearButton" | "actionButton", ComponentStyleFunction<string, string>>;
     Badge?: ComponentStyleFunction<string, string>;
     Breadcrumbs?: Record<"container" | "item" | "link" | "current", ComponentStyleFunction<string, string>>;
     Button?: ComponentStyleFunction<string, string>;
@@ -276,7 +263,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     TextArea?: ComponentStyleFunction<string, string>;
     Tooltip?: Record<"container" | "arrow", ComponentStyleFunction<string, string>>;
     Toast?: Record<"toast" | "title" | "description" | "closeButton" | "icon" | "content" | "bottom-left" | "bottom-right" | "top-left" | "top-right" | "top" | "bottom" | "action", ComponentStyleFunction<string, string>>;
-    Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab", ComponentStyleFunction<string, string>>;
+    Tabs?: Record<"container" | "tabsList" | "tabpanel" | "tab" | "tabIndicator", ComponentStyleFunction<string, string>>;
     Underlay?: ComponentStyleFunction<string, string>;
     Calendar?: Record<"calendar" | "calendarContainer" | "calendarMonth" | "calendarListboxButton" | "calendarCell" | "calendarControllers" | "calendarHeader" | "calendarGrid" | "select", ComponentStyleFunction<string, string>>;
     DatePicker?: ComponentStyleFunction<string, string>;
@@ -286,6 +273,8 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
     FileField?: Record<"container" | "dropZone" | "dropZoneContent" | "dropZoneLabel" | "item" | "itemLabel" | "itemDescription" | "itemRemove", ComponentStyleFunction<string, string>>;
     EmptyState?: Record<"container" | "title" | "description" | "action", ComponentStyleFunction<string, string>>;
     ToggleButton?: Record<"group" | "button", ComponentStyleFunction<string, string>>;
+    Sidebar?: Record<"root" | "overlay" | "modal" | "closeButton" | "header" | "nav" | "footer" | "toggle" | "separator" | "groupLabel" | "navPanel" | "navLink" | "backButton" | "content", ComponentStyleFunction<string, string>>;
+    TopNavigation?: Record<"container" | "start" | "middle" | "end", ComponentStyleFunction<string, string>>;
   };
   name: string;
   screens?: {
@@ -306,7 +295,7 @@ declare const extendTheme: (newStyles: StylesProps, theme: Theme) => {
  * arbitrary pixel values, allowing interfaces to adapt gracefully across different
  * contexts and density settings.
  */
-type SpacingTokens = 'joined' | 'tight' | 'related' | 'peer' | 'group' | 'section' | 'context';
+type SpacingTokens = 'tight' | 'related' | 'regular' | 'group' | 'section';
 //#endregion
 //#region src/defaultTheme.d.ts
 declare const defaultTheme: {
@@ -716,11 +705,6 @@ declare const gapSpace: {
   readonly 72: "gap-72";
   readonly 80: "gap-80";
   readonly 96: "gap-96";
-  readonly section: "gap-[var(--spacing-section)]";
-  readonly fieldY: "gap-[var(--spacing-fieldY)]";
-  readonly fieldX: "gap-[var(--spacing-fieldX)]";
-  readonly container: "gap-[var(--spacing-container)]";
-  readonly group: "gap-[var(--spacing-group)]";
 };
 declare const paddingSpace: {
   readonly 0: "p-0";
@@ -829,11 +813,6 @@ declare const paddingSpaceY: {
   readonly 72: "py-72";
   readonly 80: "py-80";
   readonly 96: "py-96";
-  readonly section: "py-[var(--spacing-section)]";
-  readonly fieldY: "py-[var(--spacing-field-Y)]";
-  readonly fieldX: "py-[var(--spacing-field-X)]";
-  readonly container: "py-[var(--spacing-container)]";
-  readonly group: "py-[var(--spacing-group)]";
 };
 declare const paddingRight: {
   readonly 0: "pr-0";
@@ -1227,4 +1206,4 @@ type SpaceProp<T extends string = ''> = {
  */
 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 DateFormatProps, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type LineHeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type NumericFormatProps, 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 SpacingTokens, 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 VerticalAlignProp, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };
+export { type AlignmentProp, type AspectProp, type ClassValue, type ComponentClassNames, type ComponentNames, type ComponentState, type ComponentStyleFunction, type CursorProp, DateFormat, type DateFormatProps, type FontSizeProp, type FontStyleProp, type FontWeightProp, type GapSpaceProp, type HeightProp, type LineHeightProp, type MaxWidthProp, type NestedStringObject, type NumerFormatterOptions, NumericFormat, type NumericFormatProps, type PaddingBottomProp, type PaddingLeftProp, type PaddingRightProp, type PaddingSpaceProp, type PaddingSpacePropX, type PaddingSpacePropY, type PaddingTopProp, type PlaceItemsProp, SVG, type SVGProps, type Scale, type ScaleValue, type SpaceProp, type SpacingTokens, 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 VerticalAlignProp, type WhiteSpaceProps, type WidthProp, alignment, aspect, cn, createSpacingVar, createVar, createWidthVar, cursorStyle, cva, defaultTheme, ensureCssVar, extendTheme, fontWeight, gapSpace, get, height, isFraction, isScale, isValidCssCustomPropertyName, lineHeight, maxWidth, paddingBottom, paddingLeft, paddingRight, paddingSpace, paddingSpaceX, paddingSpaceY, paddingTop, placeItems, textAlign, textSize, textStyle, textWrap, useClassNames, useResponsiveValue, useSmallScreen, useStateProps, useTheme, verticalAlign, whiteSpace, width };

package/dist/index.mjs

@@ -1,18 +1,11 @@
-import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { cva as cva$1, cx } from "class-variance-authority";
+import { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
+import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import { jsx } from "react/jsx-runtime";
 import { useDateFormatter, useNumberFormatter } from "@react-aria/i18n";
 
 //#region src/utils/className.utils.ts
-const cva = (base, config) => {
-	function styles(props) {
-		return twMerge(cva$1(base, config)(props));
-	}
-	styles.variants = config?.variants;
-	return styles;
-};
-const cn = (...inputs) => twMerge(cx(inputs));
+const { cva, cx: cn, compose } = defineConfig({ hooks: { onComplete: (className) => twMerge(className) } });
 
 //#endregion
 //#region src/utils/css-variables.utils.ts
@@ -251,64 +244,53 @@ const useStateProps = (states) => {
 
 //#endregion
 //#region src/hooks/useSmallScreen.ts
+/**
+* Uses CSS Media Queries Level 4 range syntax, matching Tailwind v4's
+* `max-sm:` variant. This ensures the hook returns `true` for exactly
+* the screen widths where `max-sm:` styles apply.
+*/
+const smallScreenQuery = `(width < ${defaultTheme.screens.sm})`;
 const useSmallScreen = () => {
-	const getMatches = () => {
+	const [matches, setMatches] = useState(() => {
 		if (typeof window == "undefined") return false;
-		return window.matchMedia("(max-width: 600px)").matches;
-	};
-	const [matches, setMatches] = useState(getMatches);
-	const handleResize = useCallback(() => {
-		setMatches(getMatches());
-	}, []);
+		return window.matchMedia(smallScreenQuery).matches;
+	});
 	useEffect(() => {
 		if (typeof window == "undefined") return;
-		window.addEventListener("resize", handleResize);
-		return () => window.removeEventListener("resize", handleResize);
-	}, [handleResize]);
+		const mediaQuery = window.matchMedia(smallScreenQuery);
+		const handler = (e) => setMatches(e.matches);
+		mediaQuery.addEventListener("change", handler);
+		return () => mediaQuery.removeEventListener("change", handler);
+	}, []);
 	return matches;
 };
 
 //#endregion
 //#region src/hooks/extendTheme.tsx
+/**
+* Compose two style functions into one. The new function's styles
+* are applied on top of the existing function's styles via `cn` (twMerge),
+* so Tailwind conflicts are resolved with "new wins".
+*/
+const composeStyleFns = (newFn, existingFn) => (props) => cn(existingFn(props), newFn(props));
 const extendTheme = (newStyles, theme) => {
-	const mergedStyles = { ...theme.components };
-	Object.keys(newStyles).forEach((component) => {
-		const componentStyles = newStyles[component];
-		const mergedComponentStyles = mergedStyles[component];
-		if (!mergedComponentStyles) return mergedStyles;
-		if (typeof newStyles[component] !== "function") mergedStyles[component] = Object.keys(componentStyles).reduce((acc, slot) => {
-			const newSlot = componentStyles[slot];
-			const mergedSlot = mergedComponentStyles[slot];
-			const variants = ["size", "variant"].reduce((acc$1, variantItem) => {
-				acc$1[variantItem] = {
-					...newSlot?.variants?.[variantItem],
-					...mergedSlot?.variants?.[variantItem]
-				};
-				return acc$1;
-			}, {});
-			acc[slot] = cva([mergedSlot(), newSlot()], { variants });
-			return acc;
-		}, { ...mergedComponentStyles });
+	const mergedComponents = { ...theme.components };
+	for (const key of Object.keys(newStyles)) {
+		const component = key;
+		const existing = mergedComponents[component];
+		if (!existing) continue;
+		const incoming = newStyles[component];
+		if (typeof incoming === "function") mergedComponents[component] = composeStyleFns(incoming, existing);
 		else {
-			const variants = ["size", "variant"].reduce((acc, variantItem) => {
-				const newStylesVariants = newStyles[component].variants?.[variantItem];
-				const mergedStylesVariants = mergedStyles[component].variants?.[variantItem];
-				if (newStylesVariants && mergedStylesVariants) {
-					const dupVariants = Object.keys(newStylesVariants).filter((variant) => Object.keys(mergedStylesVariants).includes(variant));
-					if (dupVariants.length) throw new Error(dupVariants.join() + " already exists!");
-				}
-				acc[variantItem] = {
-					...newStyles[component].variants?.[variantItem],
-					...mergedStyles[component].variants?.[variantItem]
-				};
-				return acc;
-			}, {});
-			mergedStyles[component] = cva([mergedComponentStyles(), componentStyles()], { variants });
+			const existingSlots = existing;
+			const merged = { ...existingSlots };
+			for (const slot of Object.keys(incoming)) merged[slot] = composeStyleFns(incoming[slot], existingSlots[slot]);
+			mergedComponents[component] = merged;
 		}
-	});
+	}
 	return {
 		...theme,
-		components: { ...mergedStyles }
+		components: { ...mergedComponents }
 	};
 };
 
@@ -615,12 +597,7 @@ const gapSpace = {
 	64: "gap-64",
 	72: "gap-72",
 	80: "gap-80",
-	96: "gap-96",
-	section: "gap-[var(--spacing-section)]",
-	fieldY: "gap-[var(--spacing-fieldY)]",
-	fieldX: "gap-[var(--spacing-fieldX)]",
-	container: "gap-[var(--spacing-container)]",
-	group: "gap-[var(--spacing-group)]"
+	96: "gap-96"
 };
 const paddingSpace = {
 	0: "p-0",
@@ -728,12 +705,7 @@ const paddingSpaceY = {
 	64: "py-64",
 	72: "py-72",
 	80: "py-80",
-	96: "py-96",
-	section: "py-[var(--spacing-section)]",
-	fieldY: "py-[var(--spacing-field-Y)]",
-	fieldX: "py-[var(--spacing-field-X)]",
-	container: "py-[var(--spacing-container)]",
-	group: "py-[var(--spacing-group)]"
+	96: "py-96"
 };
 const paddingRight = {
 	0: "pr-0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "17.1.0",
+  "version": "17.2.1",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -16,6 +16,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.mts",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
@@ -34,11 +35,11 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.12.15",
-    "class-variance-authority": "0.7.1",
+    "@react-aria/i18n": "^3.12.16",
+    "cva": "^1.0.0-beta.1",
     "deepmerge": "4.3.1",
     "react-fast-compare": "3.2.2",
-    "tailwind-merge": "3.4.0",
+    "tailwind-merge": "3.5.0",
     "@marigold/types": "1.4.0"
   },
   "peerDependencies": {
@@ -50,8 +51,8 @@
     "@types/react": "19.2.14",
     "postcss": "8.5.6",
     "react": "19.2.4",
-    "tailwindcss": "4.1.18",
-    "tsdown": "0.16.8",
+    "tailwindcss": "4.2.1",
+    "tsdown": "0.20.3",
     "@marigold/tsconfig": "0.4.2"
   },
   "scripts": {