@animus-ui/system 0.1.0-next.17 → 0.1.0-next.21

package/dist/index.js

@@ -1,10 +1,9 @@
 import { a as borderShorthand, c as numericOrStringScale, i as gridItemRatio, l as numericScale, n as size, o as createTransform, r as gridItem, s as createScale, t as percentageOrAbsolute, u as stringScale } from "./size-Dge_rsuz.js";
-import { createElement, forwardRef, useRef } from "react";
-//#region src/runtime/index.ts
+import { createContext, createElement, forwardRef, useContext, useRef } from "react";
+//#region src/runtime/resolveClasses.ts
 /**
 * CSS properties that accept unitless numeric values.
 * Bare numerics on properties NOT in this set receive `px`.
-* Matches @emotion/unitless and React DOM's style handling.
 */
 const UNITLESS_PROPERTIES = new Set([
 	"animation-iteration-count",
@@ -52,7 +51,6 @@ const UNITLESS_PROPERTIES = new Set([
 ]);
 /**
 * Apply unit fallback to a value for a given CSS property.
-* Unitless numeric values on properties that expect length units receive `px`.
 */
 function applyUnitFallback(value, cssProperty) {
 	if (typeof value === "number") {
@@ -63,9 +61,7 @@ function applyUnitFallback(value, cssProperty) {
 }
 /**
 * Serialize a system prop value to a lookup key matching the Rust
-* css_generator's serialize_value_key output format:
-* - Numbers and strings → their string representation
-* - Responsive objects → sorted "key:value" pairs joined by "|"
+* css_generator's serialize_value_key output format.
 */
 function serializeValueKey(value) {
 	if (typeof value === "number" || typeof value === "string") return String(value);
@@ -74,7 +70,6 @@ function serializeValueKey(value) {
 }
 /**
 * Resolve a dynamic prop value through scale lookup → transform → unit fallback.
-* Scale lookup uses pre-resolved values shipped from the extraction pipeline.
 */
 function resolveValue(value, dc) {
 	const key = String(value);
@@ -86,6 +81,74 @@ function resolveValue(value, dc) {
 	return applyUnitFallback(dc.transform ? dc.transform(value) : value, dc.varName);
 }
 /**
+* 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;
+	if (config.variants) for (const [prop, vc] of Object.entries(config.variants)) {
+		const value = props[prop] ?? vc.default;
+		if (value != null) classes.push(`${baseClassName}--${prop}-${value}`);
+	}
+	if (config.compounds) 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;
+			if (Array.isArray(expected) ? !expected.includes(current) : current !== expected) {
+				match = false;
+				break;
+			}
+		}
+		if (match) classes.push(compound.className);
+	}
+	if (config.states) {
+		for (const state of config.states) if (props[state]) classes.push(`${baseClassName}--${state}`);
+	}
+	const systemPropNames = config.systemPropNames || [];
+	if (systemPropNames.length > 0) {
+		const { customPropMap, customDynamicConfig } = config;
+		for (const propName of systemPropNames) {
+			if (!(propName in props)) continue;
+			const propValue = props[propName];
+			if (propValue == null) continue;
+			const key = serializeValueKey(propValue);
+			const cls = customPropMap?.[propName]?.[key] ?? systemPropMap?.[propName]?.[key];
+			if (cls) classes.push(cls);
+			else {
+				const dc = customDynamicConfig?.[propName] ?? dynamicPropConfig?.[propName];
+				if (dc) {
+					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;
+					}
+				}
+			}
+		}
+	}
+	return {
+		classes,
+		dynamicStyle: dynStyle
+	};
+}
+//#endregion
+//#region src/runtime/index.ts
+/**
 * Create a lightweight component that applies extracted CSS class names.
 * Replaces Emotion's styled() for extracted components.
 *
@@ -105,74 +168,17 @@ function createComponent(element, className, config, systemPropMap, dynamicPropC
 	const stateProps = config.states || [];
 	const systemPropNames = config.systemPropNames || [];
 	const filterProps = new Set([
+		"as",
 		...variantProps,
 		...stateProps,
 		...systemPropNames
 	]);
-	const isComponentElement = typeof element !== "string";
 	const Component = forwardRef((props, ref) => {
-		const classes = [className];
+		const renderElement = props.as || element;
+		const isComponentElement = typeof renderElement !== "string";
 		const prevDynKey = useRef("");
 		const prevDynStyle = useRef(null);
-		if (config.variants) for (const [prop, vc] of Object.entries(config.variants)) {
-			const value = props[prop] ?? vc.default;
-			if (value != null) classes.push(`${className}--${prop}-${value}`);
-		}
-		if (config.compounds) 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;
-				if (Array.isArray(expected) ? !expected.includes(current) : current !== expected) {
-					match = false;
-					break;
-				}
-			}
-			if (match) classes.push(compound.className);
-		}
-		if (config.states) {
-			for (const state of config.states) if (props[state]) classes.push(`${className}--${state}`);
-		}
-		let dynKeyParts;
-		let dynStyle;
-		if (systemPropNames.length > 0) {
-			const { customPropMap, customDynamicConfig } = config;
-			for (const propName of systemPropNames) {
-				if (!(propName in props)) continue;
-				const propValue = props[propName];
-				if (propValue == null) continue;
-				const key = serializeValueKey(propValue);
-				const cls = customPropMap?.[propName]?.[key] ?? systemPropMap?.[propName]?.[key];
-				if (cls) classes.push(cls);
-				else {
-					const dc = customDynamicConfig?.[propName] ?? dynamicPropConfig?.[propName];
-					if (dc) {
-						if (!dynKeyParts) dynKeyParts = [];
-						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;
-								dynKeyParts.push(`${dc.varName}:${finalVal}`);
-							} else {
-								classes.push(`${dc.slotClass}-${bp}`);
-								const varName = `${dc.varName}-${bp}`;
-								const finalVal = resolveValue(bpVal, dc);
-								dynStyle[varName] = finalVal;
-								dynKeyParts.push(`${varName}:${finalVal}`);
-							}
-						}
-						else {
-							classes.push(dc.slotClass);
-							const finalVal = resolveValue(propValue, dc);
-							dynStyle[dc.varName] = finalVal;
-							dynKeyParts.push(`${dc.varName}:${finalVal}`);
-						}
-					}
-				}
-			}
-		}
+		const { classes, dynamicStyle } = resolveClasses(className, props, config, systemPropMap, dynamicPropConfig);
 		if (props.className) classes.push(props.className);
 		const domProps = {
 			ref,
@@ -184,25 +190,41 @@ function createComponent(element, className, config, systemPropMap, dynamicPropC
 			if (!isComponentElement) {}
 			domProps[key] = value;
 		}
-		if (dynKeyParts && dynStyle) {
-			const dynKey = dynKeyParts.join("|");
+		if (dynamicStyle) {
+			const dynKey = Object.entries(dynamicStyle).map(([k, v]) => `${k}:${v}`).join("|");
 			if (dynKey !== prevDynKey.current) {
 				prevDynKey.current = dynKey;
-				prevDynStyle.current = dynStyle;
+				prevDynStyle.current = dynamicStyle;
 			}
 			domProps.style = props.style ? {
 				...props.style,
 				...prevDynStyle.current
 			} : prevDynStyle.current;
 		}
-		return createElement(element, domProps);
+		return createElement(renderElement, domProps);
 	});
 	Component.displayName = className;
+	Component.__variantKeys = new Set(variantProps);
 	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.`);
 	} });
 }
 //#endregion
+//#region src/runtime/createClassResolver.ts
+/**
+* createClassResolver — framework-agnostic className resolution.
+*
+* Produced by .asClass() terminal. Same resolution logic as createComponent
+* (variants, states, compounds, system props) but returns a className string
+* instead of a React element.
+*/
+function createClassResolver(className, config, systemPropMap, dynamicPropConfig) {
+	return (props) => {
+		const { classes } = resolveClasses(className, props || {}, config, systemPropMap, dynamicPropConfig);
+		return classes.join(" ");
+	};
+}
+//#endregion
 //#region src/AnimusExtended.ts
 function deepMerge$1(target, source) {
 	const result = { ...target };
@@ -242,6 +264,9 @@ var AnimusExtendedWithAll = class {
 		const extendFn = this.extend.bind(this);
 		return Object.assign(Component, { extend: extendFn });
 	}
+	asClass() {
+		return createClassResolver("", this._buildComponentConfig());
+	}
 	build() {
 		return Object.assign((() => ({})), { extend: this.extend.bind(this) });
 	}
@@ -350,6 +375,9 @@ var AnimusWithAll = class {
 		const extendFn = this.extend.bind(this);
 		return Object.assign(Component, { extend: extendFn });
 	}
+	asClass() {
+		return createClassResolver("", this._buildComponentConfig());
+	}
 	build() {
 		return Object.assign((() => ({})), { extend: this.extend.bind(this) });
 	}
@@ -434,6 +462,67 @@ var Animus = class extends AnimusWithBase {
 	}
 };
 //#endregion
+//#region src/compose.ts
+const EMPTY_SHARED = {};
+/**
+* Compose independently-authored Animus components into a sealed,
+* namespaced component family with shared variant propagation via
+* React context.
+*
+* - **Enforce**: TypeScript ensures shared keys exist on Root (the
+*   provider). Non-Root slots that have the key consume it from
+*   context; slots without the key are unaffected.
+* - **Wire**: Root provides shared variant values via context.
+*   Child slots consume from context. Direct props override context.
+* - **Seal**: Output components are plain ForwardRefExoticComponent —
+*   no `.extend()`, no builder methods. One-way door from builder-land
+*   to component-land.
+*/
+function compose(slots, options) {
+	const sharedKeys = Object.keys(options.shared);
+	const FamilyContext = createContext(EMPTY_SHARED);
+	const rootSlot = slots.Root ?? slots.root;
+	const familyName = rootSlot?.displayName ? rootSlot.displayName.replace(/[-_].*$/, "") : "Composed";
+	const result = {};
+	for (const [name, SourceComponent] of Object.entries(slots)) {
+		const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
+		if (name.toLowerCase() === "root") {
+			const RootWrapper = forwardRef((props, ref) => {
+				const sharedValues = {};
+				for (const key of sharedKeys) if (key in props) sharedValues[key] = props[key];
+				return createElement(FamilyContext.Provider, { value: sharedKeys.length > 0 ? sharedValues : EMPTY_SHARED }, createElement(SourceComponent, {
+					...props,
+					ref
+				}));
+			});
+			RootWrapper.displayName = `${familyName}.${capitalizedName}`;
+			result[capitalizedName] = RootWrapper;
+		} else {
+			const knownKeys = SourceComponent.__variantKeys;
+			const ChildWrapper = forwardRef((props, ref) => {
+				const shared = useContext(FamilyContext);
+				let merged;
+				if (knownKeys && sharedKeys.length > 0) {
+					const filtered = {};
+					for (const key of sharedKeys) if (knownKeys.has(key) && key in shared) filtered[key] = shared[key];
+					merged = {
+						...filtered,
+						...props,
+						ref
+					};
+				} else merged = {
+					...props,
+					ref
+				};
+				return createElement(SourceComponent, merged);
+			});
+			ChildWrapper.displayName = `${familyName}.${capitalizedName}`;
+			result[capitalizedName] = ChildWrapper;
+		}
+	}
+	return result;
+}
+//#endregion
 //#region src/PropertyBuilder.ts
 var PropertyBuilder = class PropertyBuilder {
 	#props;
@@ -770,46 +859,39 @@ function validateColors(colors) {
 	for (const [key, value] of Object.entries(colors)) if (isObject(value)) validateColors(value);
 	else if (!isValidCSSColor(value)) throw new Error(`addColors: '${String(value)}' is not a valid CSS <color> value for key '${key}'. Expected hex (#fff), rgb(), hsl(), oklch(), named color, transparent, or currentColor.`);
 }
-var ThemeBuilder = class {
+var ThemeBuilder = class ThemeBuilder {
 	#theme = {};
+	#emittedScales = /* @__PURE__ */ new Set();
 	constructor(baseTheme) {
 		this.#theme = baseTheme;
 	}
-	/**
-	*
-	* @param key A key of the current theme to transform into CSS Variables and Variable References
-	* @example .createScaleVariables('fontSize')
-	*/
-	createScaleVariables(key) {
-		const { variables, tokens } = serializeTokens(this.#theme[key], key, this.#theme);
-		this.#theme = merge({}, this.#theme, {
-			[key]: tokens,
-			_variables: { [key]: variables },
-			_tokens: { [key]: this.#theme[key] }
-		});
-		return this;
+	/** Create a new builder checkpoint, carrying forward emittedScales state. */
+	#checkpoint(nextTheme) {
+		const next = new ThemeBuilder(nextTheme);
+		for (const s of this.#emittedScales) next.#emittedScales.add(s);
+		return next;
 	}
 	/**
-	*
-	* @param colors A map of color tokens to add to the theme. These tokens are immediately converted to CSS Variables `--color-${key}`.
+	* @param colors A map of color tokens. Immediately converted to CSS variables `--color-${key}`.
 	* @example .addColors({ navy: 'navy', hyper: 'purple' })
 	*/
 	addColors(colors) {
 		validateColors(colors);
 		const flatColors = flattenScale(colors);
 		const { variables, tokens } = serializeTokens(flatColors, "color", this.#theme);
-		this.#theme = merge({}, this.#theme, {
+		const nextTheme = merge({}, this.#theme, {
 			colors: tokens,
 			_variables: { root: variables },
 			_tokens: { colors: flatColors }
 		});
-		return this;
+		const next = this.#checkpoint(nextTheme);
+		next.#emittedScales.add("colors");
+		return next;
 	}
 	/**
-	*
-	* @param initialMode A key of the object passed for modes.  This sets the default state for the theme and transforms the correct variables.
-	* @param modes A map of color modes with keys of each possible mode with a value of alias to color keys.  This must be called after `addColors`
-	* @example .addColorModes('light', { light: { primary: 'hyper' }, { dark: { primary: 'navy' } } })
+	* @param initialMode Default color mode key.
+	* @param modeConfig Map of color modes with semantic aliases pointing to palette keys.
+	* @example .addColorModes('dark', { dark: { primary: 'ember' }, light: { primary: 'void' } })
 	*/
 	addColorModes(initialMode, modeConfig) {
 		const availableColors = this.#theme._tokens?.colors ? Object.keys(this.#theme._tokens.colors) : Object.keys(this.#theme.colors || {});
@@ -818,7 +900,7 @@ var ThemeBuilder = class {
 		const modes = mapValues(modeConfig, (mode) => flattenScale(mode));
 		const { tokens: colors, variables } = serializeTokens(mapValues(merge({}, this.#theme.modes?.[initialMode], modes[initialMode]), (color) => this.#theme.colors[color]), "color", this.#theme);
 		const getColorValue = (color) => this.#theme._tokens?.colors?.[color];
-		this.#theme = merge({}, this.#theme, {
+		const nextTheme = merge({}, this.#theme, {
 			colors,
 			modes,
 			mode: initialMode,
@@ -826,36 +908,46 @@ var ThemeBuilder = class {
 			_variables: { mode: variables },
 			_tokens: { modes: mapValues(modes, (mode) => mapValues(mode, getColorValue)) }
 		});
-		return this;
+		return this.#checkpoint(nextTheme);
 	}
 	/**
+	* Add a named scale to the theme.
+	*
+	* @param config.name - Scale name (e.g. 'space', 'sizes')
+	* @param config.values - Scale value map
+	* @param config.emit - When true, generates CSS variables (default: false)
 	*
-	* @param key A new key of theme
-	* @param createScale A function that accepts the current theme and returns a new object of scale values.
-	* @example .addScale('fonts', () => ({ basic: 'Gotham', cool: 'Wingdings' }))
+	* @example
+	* .addScale({ name: 'space', values: { 0: '0', 8: '0.5rem', 16: '1rem' } })
+	* .addScale({ name: 'sizes', emit: true, values: { navHeight: '48px' } })
 	*/
-	addScale(key, createScale) {
-		this.#theme = merge({}, this.#theme, { [key]: flattenScale(createScale(this.#theme)) });
-		return this;
+	addScale(config) {
+		const { name, values, emit } = config;
+		const flattened = flattenScale(values);
+		let nextTheme;
+		if (emit) {
+			const { variables, tokens } = serializeTokens(flattened, name, this.#theme);
+			nextTheme = merge({}, this.#theme, {
+				[name]: tokens,
+				_variables: { [name]: variables },
+				_tokens: { [name]: flattened }
+			});
+		} else nextTheme = merge({}, this.#theme, { [name]: flattened });
+		const next = this.#checkpoint(nextTheme);
+		if (emit) next.#emittedScales.add(name);
+		return next;
 	}
 	/**
-	*
-	* @param key A current key of theme to be updated with new or computed values
-	* @param updateFn A function that accepts an argument of the current values at the specified keys an returns a map of new values to merge.
-	* @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `{basic}, Montserrat` }))
+	* @param key A current key of theme to update with computed values.
+	* @example .updateScale('fonts', ({ basic }) => ({ basicFallback: `${basic}, Montserrat` }))
 	*/
 	updateScale(key, updateFn) {
-		this.#theme = merge({}, this.#theme, { [key]: updateFn(this.#theme[key]) });
-		return this;
+		const nextTheme = merge({}, this.#theme, { [key]: updateFn(this.#theme[key]) });
+		return this.#checkpoint(nextTheme);
 	}
-	/**
-	* This finalizes the theme build and returns the final theme and variables to be provided.
-	* Simplify flattens the deeply nested MergeTheme chain into a shallow object type.
-	*
-	* The returned theme object also has a non-enumerable `.manifest` property containing
-	* a structured ThemeManifest for plugin consumption.
-	*/
+	/** Finalize the theme build. Returns the theme with a non-enumerable `.manifest` property. */
 	build() {
+		resolveThemeTokenRefs(this.#theme, this.#emittedScales);
 		const { variables } = serializeTokens(mapValues(this.#theme.breakpoints, (val) => `${val}px`), "breakpoint", this.#theme);
 		const theme = merge({}, this.#theme, {
 			_variables: { breakpoints: variables },
@@ -874,6 +966,54 @@ var ThemeBuilder = class {
 function createTheme(base) {
 	return new ThemeBuilder(base);
 }
+/** Token ref pattern: {scale.key} */
+const TOKEN_REF_RE = /\{([^}]+)\}/g;
+/**
+* Resolve token refs ({scale.key}) in all scale values.
+* Only refs to emitted scales (those with CSS variables) are valid.
+* Runs once at build() time after all scales have been collected.
+*/
+function resolveThemeTokenRefs(theme, emittedScales) {
+	for (const [scaleName, scaleValue] of Object.entries(theme)) {
+		if (scaleName.startsWith("_")) continue;
+		if (scaleName === "breakpoints" || scaleName === "mode" || scaleName === "modes") continue;
+		if (typeof scaleValue === "function") continue;
+		if (!isObject(scaleValue)) continue;
+		for (const [key, value] of Object.entries(scaleValue)) {
+			if (typeof value !== "string") continue;
+			if (!value.includes("{")) continue;
+			const resolved = value.replace(TOKEN_REF_RE, (match, ref) => {
+				const dotIdx = ref.indexOf(".");
+				if (dotIdx === -1) return match;
+				const refScale = ref.slice(0, dotIdx);
+				const refKey = ref.slice(dotIdx + 1);
+				if (refScale === scaleName) {
+					console.warn(`[animus] Self-referential token ref {${ref}} in scale '${scaleName}' — skipped`);
+					return match;
+				}
+				const targetScale = theme[refScale];
+				if (!targetScale || !isObject(targetScale)) {
+					console.warn(`[animus] Token ref {${ref}} references unknown scale '${refScale}'`);
+					return match;
+				}
+				const resolvedValue = targetScale[refKey];
+				if (resolvedValue === void 0) {
+					console.warn(`[animus] Token ref {${ref}} — key '${refKey}' not found in scale '${refScale}'`);
+					return match;
+				}
+				return String(resolvedValue);
+			});
+			if (resolved !== value) {
+				scaleValue[key] = resolved;
+				if (theme._tokens?.[scaleName]) theme._tokens[scaleName][key] = resolved;
+				if (theme._variables?.[scaleName]) {
+					const varName = `--${scaleName}-${key.replace("$", "")}`;
+					if (theme._variables[scaleName][varName] !== void 0) theme._variables[scaleName][varName] = resolved;
+				}
+			}
+		}
+	}
+}
 /**
 * Assemble a ThemeManifest from the built theme object.
 *
@@ -952,4 +1092,4 @@ function flattenModeTokensCss(lines, obj, prefix) {
 	}
 }
 //#endregion
-export { Animus, AnimusExtended, AnimusExtendedWithAll, AnimusWithAll, PropertyBuilder, SystemBuilder, ThemeBuilder, borderShorthand, createComponent, createScale, createSystem, createTheme, createTransform, flattenScale, gridItem, gridItemRatio, numericOrStringScale, numericScale, percentageOrAbsolute, serializeTokens, size, stringScale };
+export { Animus, AnimusExtended, AnimusExtendedWithAll, AnimusWithAll, PropertyBuilder, SystemBuilder, ThemeBuilder, borderShorthand, compose, createClassResolver, createComponent, createScale, createSystem, createTheme, createTransform, flattenScale, gridItem, gridItemRatio, numericOrStringScale, numericScale, percentageOrAbsolute, serializeTokens, size, stringScale };

package/dist/runtime/createClassResolver.d.ts

@@ -0,0 +1,10 @@
+/**
+ * createClassResolver — framework-agnostic className resolution.
+ *
+ * Produced by .asClass() terminal. Same resolution logic as createComponent
+ * (variants, states, compounds, system props) but returns a className string
+ * instead of a React element.
+ */
+import { type ClassResolverConfig, type DynamicPropConfig, type SystemPropMap } from './resolveClasses';
+export declare function createClassResolver(className: string, config: ClassResolverConfig, systemPropMap?: SystemPropMap, dynamicPropConfig?: DynamicPropConfig): (props?: Record<string, unknown>) => string;
+//# sourceMappingURL=createClassResolver.d.ts.map

package/dist/runtime/createClassResolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createClassResolver.d.ts","sourceRoot":"","sources":["../../src/runtime/createClassResolver.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EAEtB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,mBAAmB,EAC3B,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAW7C"}

package/dist/runtime/index.d.ts

@@ -1,28 +1,7 @@
 import { forwardRef } from 'react';
-interface VariantConfig {
-    options: string[];
-    default?: string;
+import { type ClassResolverConfig, type DynamicPropConfig, type SystemPropMap } from './resolveClasses';
+interface ComponentConfig extends ClassResolverConfig {
 }
-interface CompoundConfig {
-    conditions: Record<string, string | string[]>;
-    className: string;
-}
-interface ComponentConfig {
-    variants?: Record<string, VariantConfig>;
-    compounds?: CompoundConfig[];
-    states?: string[];
-    systemPropNames?: string[];
-    customPropMap?: Record<string, Record<string, string>>;
-    customDynamicConfig?: DynamicPropConfig;
-}
-type SystemPropMap = Record<string, Record<string, string>>;
-type DynamicPropConfig = Record<string, {
-    varName: string;
-    slotClass: string;
-    transformName?: string;
-    transform?: (value: string | number) => string | number;
-    scaleValues?: Record<string, string>;
-}>;
 type ElementType = string | React.ComponentType<any>;
 type AnimusComponent = ReturnType<typeof forwardRef> & {
     extend: () => never;

package/dist/runtime/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,UAAU,EAAU,MAAM,OAAO,CAAC;AAE1D,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,eAAe;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACzC;AAED,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAE5D,KAAK,iBAAiB,GAAG,MAAM,CAC7B,MAAM,EACN;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC,CACF,CAAC;AAIF,KAAK,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAErD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,MAAM,EAAE,MAAM,KAAK,CAAC;CACrB,CAAC;AAwHF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,eAAe,EACvB,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,eAAe,CAuLjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/runtime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,UAAU,EAAU,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EAEtB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAE1B,UAAU,eAAgB,SAAQ,mBAAmB;CAAG;AAIxD,KAAK,WAAW,GAAG,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAErD,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,GAAG;IACrD,MAAM,EAAE,MAAM,KAAK,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,eAAe,EACvB,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,eAAe,CAoFjB"}

package/dist/runtime/resolveClasses.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared className resolution logic used by both createComponent (React)
+ * and createClassResolver (framework-agnostic).
+ *
+ * Factored to ensure behavioral parity between .asElement() and .asClass() outputs.
+ */
+interface VariantConfig {
+    options: string[];
+    default?: string;
+}
+interface CompoundConfig {
+    conditions: Record<string, string | string[]>;
+    className: string;
+}
+export interface ClassResolverConfig {
+    variants?: Record<string, VariantConfig>;
+    compounds?: CompoundConfig[];
+    states?: string[];
+    systemPropNames?: string[];
+    customPropMap?: Record<string, Record<string, string>>;
+    customDynamicConfig?: DynamicPropConfig;
+}
+export type SystemPropMap = Record<string, Record<string, string>>;
+export type DynamicPropConfig = Record<string, {
+    varName: string;
+    slotClass: string;
+    transformName?: string;
+    transform?: (value: string | number) => string | number;
+    scaleValues?: Record<string, string>;
+}>;
+/**
+ * Apply unit fallback to a value for a given CSS property.
+ */
+export declare function applyUnitFallback(value: string | number, cssProperty: string): string;
+/**
+ * Serialize a system prop value to a lookup key matching the Rust
+ * css_generator's serialize_value_key output format.
+ */
+export declare function serializeValueKey(value: unknown): string;
+/**
+ * Resolve a dynamic prop value through scale lookup → transform → unit fallback.
+ */
+export declare function resolveValue(value: unknown, dc: {
+    varName: string;
+    transform?: (value: string | number) => string | number;
+    scaleValues?: Record<string, string>;
+}): string;
+export interface ClassResolution {
+    classes: string[];
+    dynamicStyle?: Record<string, string>;
+}
+/**
+ * Resolve className parts from props, using extracted configuration.
+ * This is the shared logic between createComponent and createClassResolver.
+ */
+export declare function resolveClasses(baseClassName: string, props: Record<string, any>, config: ClassResolverConfig, systemPropMap?: SystemPropMap, dynamicPropConfig?: DynamicPropConfig): ClassResolution;
+export {};
+//# sourceMappingURL=resolveClasses.d.ts.map

package/dist/runtime/resolveClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveClasses.d.ts","sourceRoot":"","sources":["../../src/runtime/resolveClasses.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,cAAc,EAAE,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACvD,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,CACpC,MAAM,EACN;IACE,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC,CACF,CAAC;AAmDF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,WAAW,EAAE,MAAM,GAClB,MAAM,CAQR;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAWxD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,OAAO,EACd,EAAE,EAAE;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC,GACA,MAAM,CAaR;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,MAAM,EAAE,mBAAmB,EAC3B,aAAa,CAAC,EAAE,aAAa,EAC7B,iBAAiB,CAAC,EAAE,iBAAiB,GACpC,eAAe,CAgGjB"}