@animus-ui/system 0.1.1 → 0.1.3

package/dist/{createComposedFamily-DSE2ZuRE.js → createComposedFamily-DJ2aqfqN.js}

@@ -57,13 +57,14 @@ function warnDroppedValue(baseClassName, propName, serializedValue) {
 	}
 }
 /**
-* Resolve className parts from props, using extracted configuration.
-* This is the shared logic between createComponent and createClassResolver.
+* Apply variant classes in declaration order, recording a static witness per
+* resolved variant. When a value comes from a defaultVariant fallback (prop not
+* passed), emit --{prop}-default instead of --{prop}-{value} so the compose
+* override rule cannot match, allowing inheritance from the parent to win.
 */
-function resolveClasses(baseClassName, props, config, systemPropMap, dynamicPropConfig) {
-	const classes = [baseClassName];
-	let dynStyle;
-	if (config.variants) for (const [prop, vc] of Object.entries(config.variants)) {
+function applyVariantClasses(classes, baseClassName, props, config) {
+	if (!config.variants) return;
+	for (const [prop, vc] of Object.entries(config.variants)) {
 		const value = props[prop] ?? vc.default;
 		if (value != null) {
 			const isDefault = !(prop in props) && vc.default != null;
@@ -71,7 +72,14 @@ function resolveClasses(baseClassName, props, config, systemPropMap, dynamicProp
 			recordWitness(baseClassName, prop, value, "static");
 		}
 	}
-	if (config.compounds) for (const compound of config.compounds) {
+}
+/**
+* Apply compound classes: push each compound's className when every condition
+* matches (against the prop value or its variant default). No witness records.
+*/
+function applyCompoundClasses(classes, props, config) {
+	if (!config.compounds) return;
+	for (const compound of config.compounds) {
 		let match = true;
 		for (const [prop, expected] of Object.entries(compound.conditions)) {
 			const current = props[prop] ?? config.variants?.[prop]?.default;
@@ -82,14 +90,54 @@ function resolveClasses(baseClassName, props, config, systemPropMap, dynamicProp
 		}
 		if (match) classes.push(compound.className);
 	}
-	const activeStates = [];
-	if (config.states) {
-		for (const state of config.states) if (props[state]) {
-			classes.push(`${baseClassName}--${state}`);
-			activeStates.push(state);
-			recordWitness(baseClassName, state, "true", "static");
+}
+/**
+* Apply state classes and track active states for data-attribute passthrough,
+* recording a static witness per active state.
+*/
+function applyStateClasses(classes, baseClassName, props, config, activeStates) {
+	if (!config.states) return;
+	for (const state of config.states) if (props[state]) {
+		classes.push(`${baseClassName}--${state}`);
+		activeStates.push(state);
+		recordWitness(baseClassName, state, "true", "static");
+	}
+}
+/**
+* Expand a resolved dynamic prop into slot classes and CSS-variable style
+* entries. Responsive objects expand per breakpoint: the `_` base breakpoint
+* uses the bare slotClass and varName; named breakpoints suffix both
+* (`${slotClass}-${bp}` and `${varName}-${bp}`). Scalar values push the bare
+* slotClass and set varName directly. Mutates `classes` (push order preserved)
+* and `dynStyle` in place; the caller records the dynamic witness beforehand.
+*/
+function applyDynamicProp(classes, dynStyle, propValue, dc) {
+	if (typeof propValue === "object" && propValue !== null && !Array.isArray(propValue)) for (const [bp, bpVal] of Object.entries(propValue)) {
+		if (bpVal == null) continue;
+		if (bp === "_") {
+			classes.push(dc.slotClass);
+			dynStyle[dc.varName] = resolveValue(bpVal, dc);
+		} else {
+			classes.push(`${dc.slotClass}-${bp}`);
+			dynStyle[`${dc.varName}-${bp}`] = resolveValue(bpVal, dc);
 		}
 	}
+	else {
+		classes.push(dc.slotClass);
+		dynStyle[dc.varName] = resolveValue(propValue, dc);
+	}
+}
+/**
+* Resolve className parts from props, using extracted configuration.
+* This is the shared logic between createComponent and createClassResolver.
+*/
+function resolveClasses(baseClassName, props, config, systemPropMap, dynamicPropConfig) {
+	const classes = [baseClassName];
+	let dynStyle;
+	applyVariantClasses(classes, baseClassName, props, config);
+	applyCompoundClasses(classes, props, config);
+	const activeStates = [];
+	applyStateClasses(classes, baseClassName, props, config, activeStates);
 	const systemPropNames = config.systemPropNames || [];
 	if (systemPropNames.length > 0) {
 		const { customPropMap, customDynamicConfig } = config;
@@ -107,24 +155,7 @@ function resolveClasses(baseClassName, props, config, systemPropMap, dynamicProp
 				if (dc) {
 					recordWitness(baseClassName, propName, key, "dynamic");
 					if (!dynStyle) dynStyle = {};
-					if (typeof propValue === "object" && propValue !== null && !Array.isArray(propValue)) for (const [bp, bpVal] of Object.entries(propValue)) {
-						if (bpVal == null) continue;
-						if (bp === "_") {
-							classes.push(dc.slotClass);
-							const finalVal = resolveValue(bpVal, dc);
-							dynStyle[dc.varName] = finalVal;
-						} else {
-							classes.push(`${dc.slotClass}-${bp}`);
-							const varName = `${dc.varName}-${bp}`;
-							const finalVal = resolveValue(bpVal, dc);
-							dynStyle[varName] = finalVal;
-						}
-					}
-					else {
-						classes.push(dc.slotClass);
-						const finalVal = resolveValue(propValue, dc);
-						dynStyle[dc.varName] = finalVal;
-					}
+					applyDynamicProp(classes, dynStyle, propValue, dc);
 				} else {
 					warnDroppedValue(baseClassName, propName, key);
 					recordWitness(baseClassName, propName, key, "drop");
@@ -152,6 +183,74 @@ function composeRefs(...refs) {
 	};
 }
 /**
+* Forward props to the underlying element, filtering out Animus-managed props.
+*
+* data-* and aria-* attributes always pass through to the DOM, even when used
+* as variant/state keys. This enables headless UI interop: the attribute is
+* consumed for styling AND forwarded to the element so external frameworks
+* (Radix, Ark-UI) see it.
+*
+* filterProps covers all Animus props, so unknown props pass through: for DOM
+* elements React handles any unknown-attribute warnings in dev mode, and for
+* component elements all non-filtered props are forwarded to the component.
+*/
+function forwardProps(props, filterProps, domProps) {
+	for (const [key, value] of Object.entries(props)) {
+		if (key === "className") continue;
+		if (!(key.startsWith("data-") || key.startsWith("aria-")) && filterProps.has(key)) continue;
+		domProps[key] = value;
+	}
+}
+/**
+* asChild render path: don't render our own element — merge the resolved
+* className/ref/style onto the single child element, plus the parent's own
+* forwardable props (event handlers, role, aria-*, data-*, id, tabIndex).
+*
+* Conflict rule is child-wins: the parent's props are spread UNDER the child's
+* own, so a handler or attribute declared on the child replaces the parent's
+* rather than chaining with it.
+*/
+function renderAsChild(className, filterProps, props, ref, classes, dynamicStyle) {
+	const child = Children.only(props.children);
+	if (!isValidElement(child)) throw new Error(`${className}: asChild requires a single React element as children`);
+	const childRef = child.ref;
+	const mergedClassName = [classes.join(" "), child.props.className].filter(Boolean).join(" ");
+	const mergedStyle = dynamicStyle || props.style || child.props.style ? {
+		...props.style,
+		...child.props.style,
+		...dynamicStyle
+	} : void 0;
+	const parentProps = {};
+	forwardProps(props, filterProps, parentProps);
+	delete parentProps.children;
+	delete parentProps.style;
+	delete parentProps.ref;
+	return cloneElement(child, {
+		...parentProps,
+		...child.props,
+		ref: composeRefs(ref, childRef),
+		className: mergedClassName,
+		...mergedStyle ? { style: mergedStyle } : {}
+	});
+}
+/**
+* Normal render path: render our own element (or the `as` override), forwarding
+* filtered props and applying any dynamic CSS-variable style.
+*/
+function renderElement(element, filterProps, props, ref, classes, dynamicStyle) {
+	const target = props.as || element;
+	const domProps = {
+		ref,
+		className: classes.join(" ")
+	};
+	forwardProps(props, filterProps, domProps);
+	if (dynamicStyle) domProps.style = props.style ? {
+		...props.style,
+		...dynamicStyle
+	} : dynamicStyle;
+	return createElement(target, domProps);
+}
+/**
 * Create a lightweight component that applies extracted CSS class names.
 * Replaces Emotion's styled() for extracted components.
 *
@@ -180,44 +279,19 @@ function createComponent(element, className, config, systemPropMap, dynamicPropC
 	const Component = forwardRef((props, ref) => {
 		const { classes, dynamicStyle } = resolveClasses(className, props, config, systemPropMap, dynamicPropConfig);
 		if (props.className) classes.push(props.className);
-		if (props.asChild) {
-			const child = Children.only(props.children);
-			if (!isValidElement(child)) throw new Error(`${className}: asChild requires a single React element as children`);
-			const childRef = child.ref;
-			const mergedClassName = [classes.join(" "), child.props.className].filter(Boolean).join(" ");
-			const mergedStyle = dynamicStyle || props.style || child.props.style ? {
-				...props.style,
-				...child.props.style,
-				...dynamicStyle
-			} : void 0;
-			return cloneElement(child, {
-				ref: composeRefs(ref, childRef),
-				className: mergedClassName,
-				...mergedStyle ? { style: mergedStyle } : {}
-			});
-		}
-		const renderElement = props.as || element;
-		const isComponentElement = typeof renderElement !== "string";
-		const domProps = {
-			ref,
-			className: classes.join(" ")
-		};
-		for (const [key, value] of Object.entries(props)) {
-			if (key === "className") continue;
-			if (!(key.startsWith("data-") || key.startsWith("aria-")) && filterProps.has(key)) continue;
-			if (!isComponentElement) {}
-			domProps[key] = value;
-		}
-		if (dynamicStyle) domProps.style = props.style ? {
-			...props.style,
-			...dynamicStyle
-		} : dynamicStyle;
-		return createElement(renderElement, domProps);
+		return props.asChild ? renderAsChild(className, filterProps, props, ref, classes, dynamicStyle) : renderElement(element, filterProps, props, ref, classes, dynamicStyle);
 	});
 	Component.displayName = className;
-	return Object.assign(Component, { extend: () => {
-		throw new Error(`Cannot extend extracted component "${className}" at runtime. Extensions must be authored in source code using the builder API (e.g. import the original component and call .extend() there) so the extraction pipeline can resolve them at build time.`);
-	} });
+	const variantDefaults = {};
+	if (config.variants) {
+		for (const [prop, vc] of Object.entries(config.variants)) if (vc.default != null) variantDefaults[prop] = vc.default;
+	}
+	return Object.assign(Component, {
+		variantDefaults: Object.freeze(variantDefaults),
+		extend: () => {
+			throw new Error(`Cannot extend extracted component "${className}" at runtime. Extensions must be authored in source code using the builder API (e.g. import the original component and call .extend() there) so the extraction pipeline can resolve them at build time.`);
+		}
+	});
 }
 //#endregion
 //#region src/runtime/createClassResolver.ts

package/dist/index.d.ts

@@ -5,10 +5,11 @@ export type { KeyframeFrameMap, KeyframeRef, Keyframes } from './keyframes';
 export { createComponent } from './runtime';
 export { createClassResolver } from './runtime/createClassResolver';
 export { createComposedFamily } from './runtime/createComposedFamily';
-export type { CreateKeyframesFactory, GlobalStyleBlock, GlobalStyleMap, GlobalStylesFactory, SerializedConfig, SystemInstance, } from './SystemBuilder';
+export type { CreateKeyframesFactory, FontFace, FontFaceSrc, GlobalStyleBlock, GlobalStyleMap, GlobalStylesFactory, SerializedConfig, SystemInstance, } from './SystemBuilder';
 export { createSystem, SystemBuilder } from './SystemBuilder';
 export { createScale, numericOrStringScale, numericScale, stringScale, } from './scales/createScale';
-export { BUILT_IN_SELECTORS, type SelectorAlias, type SelectorAliasMap, } from './selectors';
+export { BUILT_IN_CONDITIONS, type ConditionAlias, type ConditionAliasMap, type ConditionKind, type Conditions, type ConditionsOf, type RawAtRuleKey, type RegistryBrand, type SelectorsOf, type UnknownAtRule, type UnknownConditionAlias, } from './conditions.js';
+export { BUILT_IN_SELECTORS, type SelectorAlias, type SelectorAliasMap, type Selectors, } from './selectors';
 export type { Assign, AssignValueIfUnmergable, ColorModeConfig, FindPath, KeyAsVariable, LiteralPaths, Mergable, Merge, MergeTheme, Path, PathToLiteral, PathValue, PrivateThemeKeys, SanitizeKey, } from './theme';
 export { createTheme, ThemeBuilder } from './theme';
 export { borderShorthand } from './transforms/border';
@@ -16,9 +17,9 @@ export { createTransform, type NamedTransform, type TransformFn, } from './trans
 export { gridItem, gridItemRatio } from './transforms/grid';
 export { percentageOrAbsolute, size } from './transforms/size';
 export type { AnimusComponent, AnimusWrappedComponent, AnyBrandedComponent, ComposedFamily, SharedConfig, VariantPropsOf, } from './types/component';
-export type { AbstractParser, BuiltInSelectorAlias, CompoundEntry, CSSPropMap, CSSProps, CustomPropConfig, Parser, ParserProps, Prop, PropertyValues, Scale, ScaleValue, SelectorAliasProps, SystemProps, ThemedCSSPropMap, ThemedCSSProps, ThemedScale, ThemedScaleValue, VariantConfig, } from './types/config';
+export type { AbstractParser, BuiltInConditionAlias, BuiltInSelectorAlias, CompoundEntry, CSSPropMap, CSSProps, CustomPropConfig, Parser, ParserProps, Prop, PropertyValues, Scale, ScaleValue, SelectorAliasProps, SystemProps, ThemedCSSPropMap, ThemedCSSProps, ThemedScale, ThemedScaleValue, VariantConfig, } from './types/config';
 export type { AbstractProps, MediaQueryMap, ResponsiveProp, ThemeProps, } from './types/props';
 export type { ArrayScale, MapScale } from './types/scales';
 export type { CSSObject } from './types/shared';
-export type { AbstractTheme, BaseTheme, ColorTokenRef, CSSColorValue, EmittedScales, EmittedTokenPaths, ScaleTokenRef, SerializedTheme, Theme, ThemeManifest, TokenScales, } from './types/theme';
+export type { AbstractTheme, BaseTheme, BrowserColorSchemeConfig, ColorModeOptions, ColorTokenRef, ContextualVarRegistration, CSSColorValue, EmittedScales, EmittedTokenPaths, ScaleTokenRef, SerializedTheme, SystemPreferenceConfig, Theme, ThemeManifest, TokenScales, } from './types/theme';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAIzE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,YAAY,EACV,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACL,kBAAkB,EAClB,KAAK,aAAa,EAClB,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,MAAM,EACN,uBAAuB,EACvB,eAAe,EACf,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,GACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EACL,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,WAAW,GACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAE/D,YAAY,EACV,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,cAAc,EACd,oBAAoB,EACpB,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,KAAK,EACL,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,aAAa,GACd,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,UAAU,GACX,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,YAAY,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACb,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,KAAK,EACL,aAAa,EACb,WAAW,GACZ,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}