clava 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # clava
 
+## 0.2.3
+
+### Improved runtime performance of `extend` chains and `getVariants` in `cv`
+
+Extending components no longer round-trips through the public component (`clsx` join → regex split to recover variant classes) — extends now contribute classes and styles directly via an internal compute path, avoiding intermediate string parsing and array allocations on every render.
+
+Per-render benchmarks improve roughly 2.5× for extended components and 2.7× for `getVariants`, with no public API changes.
+
+### Fixed `computed`'s `ctx.variants` leaking foreign variant keys when extended
+
+When the same `cv` was used as an `extend` by a parent component that defined additional variant keys, the `computed` callback's `ctx.variants` could include those parent-only keys. It is now filtered to the component's own `variantKeys`, matching the public `VariantValues<V>` contract — both during render and during the `setDefaultVariants` pass that backs `getVariants`.
+
+### Fixed non-idempotent `transformClass` compounding across `extend` chains
+
+A non-idempotent `transformClass` (e.g. one that prefixes every class word) was applied multiple times to base classes contributed by extended components — once per level in the extend chain. It now runs exactly once per render, so prefixing transforms no longer compound across `extend`. The fix also covers cross-factory extends: when a component from one `create()` factory is extended by a component from another, the extend's transform applies to its own contribution before the parent's transform runs on the joined string.
+
 ## 0.2.2
 
 - Improved runtime prop resolution, style normalization, and [`splitProps`](https://clava.style/docs/reference/split-props) performance.

package/dist/index.js

@@ -222,25 +222,14 @@ function isHTMLObjStyle(style) {
 //#endregion
 //#region src/index.ts
 const META_KEY = "__meta";
-const SKIP_STYLE_KEYS = Symbol("skipStyleKeys");
-const SKIP_STYLE_VARIANT_VALUES = Symbol("skipStyleVariantValues");
 const hasOwn = Object.prototype.hasOwnProperty;
+const EMPTY_DEFAULTS = Object.freeze({});
 function getComponentMeta(component) {
 	return component[META_KEY];
 }
 function setComponentMeta(component, meta) {
 	component[META_KEY] = meta;
 }
-/**
-* Mutates target by assigning all properties from source. Avoids object spread
-* overhead in hot paths where we're building up a result object.
-*/
-function assign(target, source) {
-	for (const key in source) {
-		if (!hasOwn.call(source, key)) continue;
-		target[key] = source[key];
-	}
-}
 function isRecordObject(value) {
 	if (typeof value !== "object") return false;
 	if (value == null) return false;
@@ -352,18 +341,6 @@ function collectDisabledVariantValues(config) {
 	}
 	return values;
 }
-/**
-* Extracts classes from fullClass that are not in baseClass. Uses string
-* comparison optimization: if fullClass starts with baseClass, just take the
-* suffix.
-*/
-function extractVariantClasses(fullClass, baseClass) {
-	if (!fullClass) return "";
-	if (!baseClass) return fullClass;
-	if (fullClass.startsWith(baseClass)) return fullClass.slice(baseClass.length).trim();
-	const baseClassSet = new Set(baseClass.split(" ").filter(Boolean));
-	return fullClass.split(" ").filter((c) => c && !baseClassSet.has(c)).join(" ");
-}
 const EMPTY_SOURCE = {
 	keys: [],
 	variantKeys: [],
@@ -472,66 +449,17 @@ function buildPrebuiltVariant(variantDef) {
 	};
 }
 /**
-* Creates the resolveDefaults function for a component. This function returns
-* only the variants set via setDefaultVariants in the computed function. Used
-* by child components to get parent's computed defaults.
-*/
-function createResolveDefaults(config, staticDefaults) {
-	const computed = config.computed;
-	const extend = config.extend;
-	return (childDefaults, userProps = {}) => {
-		const resolvedVariants = {};
-		Object.assign(resolvedVariants, staticDefaults);
-		for (const key in childDefaults) {
-			if (!hasOwn.call(childDefaults, key)) continue;
-			const v = childDefaults[key];
-			if (v === void 0) continue;
-			resolvedVariants[key] = v;
-		}
-		for (const key in userProps) {
-			if (!hasOwn.call(userProps, key)) continue;
-			const v = userProps[key];
-			if (v === void 0) continue;
-			resolvedVariants[key] = v;
-		}
-		const computedDefaults = {};
-		if (extend) for (const ext of extend) {
-			const meta = getComponentMeta(ext);
-			if (!meta) continue;
-			const extDefaults = meta.resolveDefaults(childDefaults, userProps);
-			for (const k in extDefaults) if (hasOwn.call(extDefaults, k)) computedDefaults[k] = extDefaults[k];
-		}
-		if (computed) computed({
-			variants: resolvedVariants,
-			setVariants: () => {},
-			setDefaultVariants: (newDefaults) => {
-				for (const key in newDefaults) {
-					if (!hasOwn.call(newDefaults, key)) continue;
-					const value = newDefaults[key];
-					if (userProps[key] !== void 0) continue;
-					if (isVariantDisabled(config, key)) continue;
-					if (isVariantValueDisabled(config, key, value)) continue;
-					computedDefaults[key] = value;
-				}
-			},
-			addClass: () => {},
-			addStyle: () => {}
-		});
-		return computedDefaults;
-	};
-}
-/**
 * Creates the cv and cx functions.
 */
 function create({ transformClass = (className) => className } = {}) {
 	const cx = (...classes) => transformClass(clsx(...classes));
 	const cv = (config = {}) => {
 		const variantKeys = collectVariantKeys(config);
+		const variantKeysLength = variantKeys.length;
 		const disabledVariantKeys = collectDisabledVariantKeys(config);
 		const disabledVariantValues = collectDisabledVariantValues(config);
 		const hasDisabledVariantKeys = disabledVariantKeys.size > 0;
-		const disabledVariantValueKeys = Object.keys(disabledVariantValues);
-		const hasDisabledVariantValues = disabledVariantValueKeys.length > 0;
+		const hasDisabledVariantValues = Object.keys(disabledVariantValues).length > 0;
 		const hasAnyDisabled = hasDisabledVariantKeys || hasDisabledVariantValues;
 		const inputPropsKeys = [
 			"class",
@@ -545,7 +473,7 @@ function create({ transformClass = (className) => className } = {}) {
 		const computedVariantsCfg = config.computedVariants;
 		const computed = config.computed;
 		const baseStyle = config.style;
-		const baseClass = config.class === void 0 ? null : config.class;
+		const hasBaseStyle = !!baseStyle;
 		const variantEntryNames = [];
 		const variantEntryDefs = [];
 		if (variants) for (const name in variants) {
@@ -588,15 +516,32 @@ function create({ transformClass = (className) => className } = {}) {
 				if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) delete staticDefaults[key];
 			}
 		}
-		const extEntries = extend ? extend : [];
-		const extBaseClassesArr = [];
 		const extMetas = [];
+		const extBaseClassesArr = [];
+		const extIsolated = [];
+		let hasIsolatedExt = false;
 		if (extend) for (const ext of extend) {
 			const meta = getComponentMeta(ext);
+			if (!meta) continue;
 			extMetas.push(meta);
-			extBaseClassesArr.push(meta?.baseClass ?? "");
+			const isolated = meta.transformClass !== transformClass;
+			extIsolated.push(isolated);
+			if (isolated) {
+				hasIsolatedExt = true;
+				extBaseClassesArr.push(meta.transformClass(meta.baseClass));
+			} else extBaseClassesArr.push(meta.baseClass);
+		}
+		const extCount = extMetas.length;
+		const extMetasWithResolveDefaults = [];
+		for (let i = 0; i < extCount; i++) if (extMetas[i].resolveDefaults) extMetasWithResolveDefaults.push(extMetas[i]);
+		const extMetasWithResolveDefaultsCount = extMetasWithResolveDefaults.length;
+		let staticExtSkipKeys = null;
+		if (hasDisabledVariantKeys || computedVariantCount > 0) {
+			staticExtSkipKeys = /* @__PURE__ */ new Set();
+			for (const k of disabledVariantKeys) staticExtSkipKeys.add(k);
+			for (let i = 0; i < computedVariantCount; i++) staticExtSkipKeys.add(computedVariantNames[i]);
 		}
-		const extCount = extEntries.length;
+		const staticExtSkipValues = hasDisabledVariantValues ? disabledVariantValues : null;
 		function filterDisabledInto(input, out) {
 			if (!hasAnyDisabled) {
 				for (const key in input) if (hasOwn.call(input, key)) out[key] = input[key];
@@ -613,15 +558,63 @@ function create({ transformClass = (className) => className } = {}) {
 				out[key] = value;
 			}
 		}
-		const resolveDefaultsFn = createResolveDefaults(config, staticDefaults);
+		const resolveDefaultsFn = computed || extMetasWithResolveDefaultsCount > 0 ? (childDefaults, userProps = EMPTY_DEFAULTS) => {
+			const resolvedVariants = {};
+			Object.assign(resolvedVariants, staticDefaults);
+			for (const key in childDefaults) {
+				if (!hasOwn.call(childDefaults, key)) continue;
+				const v = childDefaults[key];
+				if (v === void 0) continue;
+				resolvedVariants[key] = v;
+			}
+			for (const key in userProps) {
+				if (!hasOwn.call(userProps, key)) continue;
+				const v = userProps[key];
+				if (v === void 0) continue;
+				resolvedVariants[key] = v;
+			}
+			const computedDefaults = {};
+			for (let i = 0; i < extMetasWithResolveDefaultsCount; i++) {
+				const extDefaults = extMetasWithResolveDefaults[i].resolveDefaults(childDefaults, userProps);
+				for (const k in extDefaults) {
+					if (!hasOwn.call(extDefaults, k)) continue;
+					computedDefaults[k] = extDefaults[k];
+				}
+			}
+			if (computed) {
+				const ownVariants = {};
+				for (let i = 0; i < variantKeysLength; i++) {
+					const k = variantKeys[i];
+					if (hasOwn.call(resolvedVariants, k)) ownVariants[k] = resolvedVariants[k];
+				}
+				computed({
+					variants: ownVariants,
+					setVariants: noop,
+					setDefaultVariants: (newDefaults) => {
+						for (const key in newDefaults) {
+							if (!hasOwn.call(newDefaults, key)) continue;
+							const value = newDefaults[key];
+							if (userProps[key] !== void 0) continue;
+							if (isVariantDisabled(config, key)) continue;
+							if (isVariantValueDisabled(config, key, value)) continue;
+							computedDefaults[key] = value;
+						}
+					},
+					addClass: noop,
+					addStyle: noop
+				});
+			}
+			return computedDefaults;
+		} : null;
 		function resolveVariantsHot(propsVariants) {
 			const defaults = {};
 			Object.assign(defaults, staticDefaults);
-			if (hasExtend) for (let i = 0; i < extCount; i++) {
-				const meta = extMetas[i];
-				if (!meta) continue;
-				const extComputed = meta.resolveDefaults(defaults, propsVariants);
-				for (const k in extComputed) if (hasOwn.call(extComputed, k)) defaults[k] = extComputed[k];
+			for (let i = 0; i < extMetasWithResolveDefaultsCount; i++) {
+				const extComputed = extMetasWithResolveDefaults[i].resolveDefaults(defaults, propsVariants);
+				for (const k in extComputed) {
+					if (!hasOwn.call(extComputed, k)) continue;
+					defaults[k] = extComputed[k];
+				}
 			}
 			for (const k in propsVariants) {
 				if (!hasOwn.call(propsVariants, k)) continue;
@@ -634,195 +627,217 @@ function create({ transformClass = (className) => className } = {}) {
 			filterDisabledInto(defaults, result);
 			return result;
 		}
-		const computeResult = (props = {}) => {
-			const skipStyleKeysIn = props[SKIP_STYLE_KEYS];
-			const skipStyleVariantValuesIn = props[SKIP_STYLE_VARIANT_VALUES];
-			const variantProps = {};
-			for (let i = 0; i < variantKeys.length; i++) {
-				const key = variantKeys[i];
-				if (key in props) variantProps[key] = props[key];
-			}
-			let resolvedVariants = resolveVariantsHot(variantProps);
-			let computedClassesArr = null;
-			let computedStyleObj = null;
+		const compute = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut) => {
+			let workingResolved = resolved;
+			let cClasses = null;
+			let cStyle = null;
 			if (computed) {
-				const updatedVariants = {};
-				Object.assign(updatedVariants, resolvedVariants);
-				const cClasses = [];
-				let cStyle = null;
+				const ownVariants = {};
+				for (let i = 0; i < variantKeysLength; i++) {
+					const k = variantKeys[i];
+					if (hasOwn.call(resolved, k)) ownVariants[k] = resolved[k];
+				}
+				let updatedVariants = null;
+				const localCClasses = [];
+				let localCStyle = null;
+				const ensureUpdated = () => {
+					if (updatedVariants) return updatedVariants;
+					const u = {};
+					Object.assign(u, ownVariants);
+					updatedVariants = u;
+					return u;
+				};
 				const result = computed({
-					variants: resolvedVariants,
+					variants: ownVariants,
 					setVariants: (newVariants) => {
-						if (!hasAnyDisabled) Object.assign(updatedVariants, newVariants);
-						else {
-							const filtered = {};
-							filterDisabledInto(newVariants, filtered);
-							Object.assign(updatedVariants, filtered);
+						if (!hasAnyDisabled) {
+							Object.assign(ensureUpdated(), newVariants);
+							return;
+						}
+						for (const key in newVariants) {
+							if (!hasOwn.call(newVariants, key)) continue;
+							if (disabledVariantKeys.has(key)) continue;
+							const value = newVariants[key];
+							if (hasDisabledVariantValues) {
+								const valueKey = getVariantValueKey(value);
+								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+							}
+							ensureUpdated()[key] = value;
 						}
 					},
 					setDefaultVariants: (newDefaults) => {
 						for (const key in newDefaults) {
 							if (!hasOwn.call(newDefaults, key)) continue;
-							if (variantProps[key] !== void 0) continue;
+							if (userVariantProps[key] !== void 0) continue;
 							const value = newDefaults[key];
 							if (hasAnyDisabled) {
 								if (disabledVariantKeys.has(key)) continue;
 								const valueKey = getVariantValueKey(value);
 								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
 							}
-							updatedVariants[key] = value;
+							ensureUpdated()[key] = value;
 						}
 					},
 					addClass: (className) => {
-						cClasses.push(className);
+						localCClasses.push(className);
 					},
 					addStyle: (newStyle) => {
-						if (!cStyle) cStyle = {};
-						assign(cStyle, newStyle);
+						if (!localCStyle) localCStyle = {};
+						Object.assign(localCStyle, newStyle);
 					}
 				});
 				if (result != null) {
 					const r = extractClassAndStylePrebuilt(result);
-					if (r.class != null) cClasses.push(r.class);
+					if (r.class != null) localCClasses.push(r.class);
 					if (r.style) {
-						if (!cStyle) cStyle = {};
-						assign(cStyle, r.style);
+						if (!localCStyle) localCStyle = {};
+						Object.assign(localCStyle, r.style);
 					}
 				}
-				if (hasAnyDisabled) {
+				cClasses = localCClasses;
+				cStyle = localCStyle;
+				if (updatedVariants) if (hasAnyDisabled) {
 					const filteredUpdated = {};
 					filterDisabledInto(updatedVariants, filteredUpdated);
-					resolvedVariants = filteredUpdated;
-				} else resolvedVariants = updatedVariants;
-				computedClassesArr = cClasses;
-				computedStyleObj = cStyle;
-			}
-			const hasSkipKeys = !!skipStyleKeysIn || hasDisabledVariantKeys;
-			let currentVariantKeys = null;
-			if (hasSkipKeys) {
-				currentVariantKeys = /* @__PURE__ */ new Set();
-				if (skipStyleKeysIn) for (const k of skipStyleKeysIn) currentVariantKeys.add(k);
-				for (const k of disabledVariantKeys) currentVariantKeys.add(k);
+					workingResolved = filteredUpdated;
+				} else workingResolved = updatedVariants;
 			}
-			let computedVariantKeysSet = null;
-			if (hasExtend) {
-				if (currentVariantKeys || computedVariantNames.length > 0) {
-					computedVariantKeysSet = /* @__PURE__ */ new Set();
-					if (currentVariantKeys) for (const k of currentVariantKeys) computedVariantKeysSet.add(k);
-					for (let i = 0; i < computedVariantNames.length; i++) computedVariantKeysSet.add(computedVariantNames[i]);
-				}
+			let extSkipKeys;
+			if (skipKeys === null) extSkipKeys = staticExtSkipKeys;
+			else if (staticExtSkipKeys === null) extSkipKeys = skipKeys;
+			else {
+				extSkipKeys = new Set(skipKeys);
+				for (const k of staticExtSkipKeys) extSkipKeys.add(k);
 			}
-			let computedVariantValues = null;
-			const hasInValues = !!skipStyleVariantValuesIn;
-			if (hasExtend && (hasInValues || hasDisabledVariantValues)) {
-				computedVariantValues = {};
-				if (hasInValues) for (const k in skipStyleVariantValuesIn) {
-					if (!hasOwn.call(skipStyleVariantValuesIn, k)) continue;
-					const set = /* @__PURE__ */ new Set();
-					for (const v of skipStyleVariantValuesIn[k]) set.add(v);
-					computedVariantValues[k] = set;
-				}
-				for (let i = 0; i < disabledVariantValueKeys.length; i++) {
-					const k = disabledVariantValueKeys[i];
-					let bucket = computedVariantValues[k];
-					if (!bucket) {
-						bucket = /* @__PURE__ */ new Set();
-						computedVariantValues[k] = bucket;
-					}
-					for (const v of disabledVariantValues[k]) bucket.add(v);
+			let extSkipVals;
+			if (skipValues === null) extSkipVals = staticExtSkipValues;
+			else if (staticExtSkipValues === null) extSkipVals = skipValues;
+			else {
+				extSkipVals = {};
+				for (const k in skipValues) extSkipVals[k] = skipValues[k];
+				for (const k in staticExtSkipValues) {
+					const existing = extSkipVals[k];
+					if (existing) {
+						const merged = new Set(existing);
+						for (const v of staticExtSkipValues[k]) merged.add(v);
+						extSkipVals[k] = merged;
+					} else extSkipVals[k] = staticExtSkipValues[k];
 				}
 			}
-			const allClasses = [];
-			const allStyle = {};
-			if (hasExtend) {
-				const hasComputedVariantKeysSet = !!computedVariantKeysSet && computedVariantKeysSet.size > 0;
-				const hasComputedVariantValues = !!computedVariantValues && Object.keys(computedVariantValues).length > 0;
-				const hasSkipForExt = hasComputedVariantKeysSet || hasComputedVariantValues;
-				const extVariantClasses = [];
-				for (let i = 0; i < extCount; i++) {
-					const ext = extEntries[i];
-					const extBaseClass = extBaseClassesArr[i];
-					let propsForExt;
-					if (hasSkipForExt) {
-						propsForExt = {};
-						for (const k in resolvedVariants) if (hasOwn.call(resolvedVariants, k)) propsForExt[k] = resolvedVariants[k];
-						if (hasComputedVariantKeysSet) propsForExt[SKIP_STYLE_KEYS] = computedVariantKeysSet;
-						if (hasComputedVariantValues) propsForExt[SKIP_STYLE_VARIANT_VALUES] = computedVariantValues;
-					} else propsForExt = resolvedVariants;
-					const extResult = ext(propsForExt);
-					if (extResult.style != null) assign(allStyle, normalizeStyle(extResult.style));
-					allClasses.push(extBaseClass);
-					const variantPortion = extractVariantClasses("className" in extResult ? extResult.className : extResult.class, extBaseClass);
-					if (variantPortion) extVariantClasses.push(variantPortion);
+			if (hasExtend) for (let i = 0; i < extCount; i++) if (hasIsolatedExt && extIsolated[i]) {
+				const extClasses = [];
+				extMetas[i].compute(workingResolved, workingResolved, extSkipKeys, extSkipVals, extClasses, styleOut);
+				if (extClasses.length > 0) {
+					const joined = clsx(extClasses);
+					if (joined.length > 0) classesOut.push(extMetas[i].transformClass(joined));
 				}
-				allClasses.push(baseClass);
-				if (baseStyle) assign(allStyle, baseStyle);
-				for (let i = 0; i < extVariantClasses.length; i++) allClasses.push(extVariantClasses[i]);
-			} else {
-				allClasses.push(baseClass);
-				if (baseStyle) assign(allStyle, baseStyle);
-			}
+			} else extMetas[i].compute(workingResolved, workingResolved, extSkipKeys, extSkipVals, classesOut, styleOut);
+			if (hasBaseStyle) Object.assign(styleOut, baseStyle);
+			const ownSkipKeys = skipKeys;
+			const ownSkipValues = skipValues;
 			for (let i = 0; i < variantEntryCount; i++) {
 				const variantName = variantEntryNames[i];
-				const variant = variantEntryDefs[i];
-				if (currentVariantKeys && currentVariantKeys.has(variantName)) continue;
-				const selectedValue = resolvedVariants[variantName];
+				if (ownSkipKeys && ownSkipKeys.has(variantName)) continue;
+				const selectedValue = workingResolved[variantName];
 				if (selectedValue === void 0) continue;
 				const selectedKey = getVariantValueKey(selectedValue);
+				const variant = variantEntryDefs[i];
 				if (variant.disabledValues && selectedKey != null && variant.disabledValues.has(selectedKey)) continue;
-				if (skipStyleVariantValuesIn && selectedKey != null && skipStyleVariantValuesIn[variantName]?.has(selectedKey)) continue;
+				if (ownSkipValues && selectedKey != null && ownSkipValues[variantName]?.has(selectedKey)) continue;
 				if (variant.values) {
 					if (selectedKey == null) continue;
 					const v = variant.values[selectedKey];
 					if (!v) continue;
-					if (v.class != null) allClasses.push(v.class);
-					if (v.style) assign(allStyle, v.style);
-				} else if (variant.shorthand) {
-					if (selectedValue === true) {
-						const v = variant.shorthand;
-						if (v.class != null) allClasses.push(v.class);
-						if (v.style) assign(allStyle, v.style);
-					}
+					if (v.class != null) classesOut.push(v.class);
+					if (v.style) Object.assign(styleOut, v.style);
+				} else if (variant.shorthand && selectedValue === true) {
+					const v = variant.shorthand;
+					if (v.class != null) classesOut.push(v.class);
+					if (v.style) Object.assign(styleOut, v.style);
 				}
 			}
 			for (let i = 0; i < computedVariantCount; i++) {
 				const variantName = computedVariantNames[i];
-				const fn = computedVariantFns[i];
-				if (currentVariantKeys && currentVariantKeys.has(variantName)) continue;
-				const selectedValue = resolvedVariants[variantName];
+				if (ownSkipKeys && ownSkipKeys.has(variantName)) continue;
+				const selectedValue = workingResolved[variantName];
 				if (selectedValue === void 0) continue;
 				const selectedKey = getVariantValueKey(selectedValue);
-				if (skipStyleVariantValuesIn && selectedKey != null && skipStyleVariantValuesIn[variantName]?.has(selectedKey)) continue;
+				if (ownSkipValues && selectedKey != null && ownSkipValues[variantName]?.has(selectedKey)) continue;
+				const fn = computedVariantFns[i];
 				const computedResult = fn(selectedValue);
 				if (computedResult == null) continue;
 				const r = extractClassAndStylePrebuilt(computedResult);
-				if (r.class != null) allClasses.push(r.class);
-				if (r.style) assign(allStyle, r.style);
+				if (r.class != null) classesOut.push(r.class);
+				if (r.style) Object.assign(styleOut, r.style);
+			}
+			if (cClasses) for (let i = 0; i < cClasses.length; i++) classesOut.push(cClasses[i]);
+			if (cStyle) Object.assign(styleOut, cStyle);
+		};
+		const computeResult = (props = EMPTY_DEFAULTS) => {
+			const propsRecord = props;
+			let resolved = {};
+			Object.assign(resolved, staticDefaults);
+			let userVariantProps;
+			if (extMetasWithResolveDefaultsCount > 0) {
+				const variantProps = {};
+				for (let i = 0; i < variantKeysLength; i++) {
+					const key = variantKeys[i];
+					if (hasOwn.call(propsRecord, key)) variantProps[key] = propsRecord[key];
+				}
+				for (let i = 0; i < extMetasWithResolveDefaultsCount; i++) {
+					const extComputed = extMetasWithResolveDefaults[i].resolveDefaults(resolved, variantProps);
+					for (const k in extComputed) {
+						if (!hasOwn.call(extComputed, k)) continue;
+						resolved[k] = extComputed[k];
+					}
+				}
+				for (const k in variantProps) {
+					if (!hasOwn.call(variantProps, k)) continue;
+					const v = variantProps[k];
+					if (v === void 0) continue;
+					resolved[k] = v;
+				}
+				userVariantProps = variantProps;
+			} else {
+				for (let i = 0; i < variantKeysLength; i++) {
+					const key = variantKeys[i];
+					if (!hasOwn.call(propsRecord, key)) continue;
+					const v = propsRecord[key];
+					if (v === void 0) continue;
+					resolved[key] = v;
+				}
+				userVariantProps = propsRecord;
 			}
-			if (computedClassesArr) for (let i = 0; i < computedClassesArr.length; i++) allClasses.push(computedClassesArr[i]);
-			if (computedStyleObj) assign(allStyle, computedStyleObj);
-			if ("class" in props) allClasses.push(props.class);
-			if ("className" in props) allClasses.push(props.className);
-			const psv = props.style;
+			if (hasAnyDisabled) {
+				const filtered = {};
+				filterDisabledInto(resolved, filtered);
+				resolved = filtered;
+			}
+			const allClasses = [computedBaseClass];
+			const style = {};
+			compute(resolved, userVariantProps, null, null, allClasses, style);
+			if ("class" in propsRecord) allClasses.push(propsRecord.class);
+			if ("className" in propsRecord) allClasses.push(propsRecord.className);
+			const psv = propsRecord.style;
 			if (psv != null) {
 				if (typeof psv === "string") {
-					if (psv.length > 0) assign(allStyle, htmlStyleToStyleValue(psv));
+					if (psv.length > 0) Object.assign(style, htmlStyleToStyleValue(psv));
 				} else if (typeof psv === "object") {
 					let hasAnyKey = false;
 					for (const _ in psv) {
 						hasAnyKey = true;
 						break;
 					}
-					if (hasAnyKey) assign(allStyle, normalizeStyle(psv));
+					if (hasAnyKey) Object.assign(style, normalizeStyle(psv));
 				}
 			}
 			return {
-				className: cx(...allClasses),
-				style: allStyle
+				className: transformClass(clsx(allClasses)),
+				style
 			};
 		};
 		const getVariants = (variants) => {
-			const variantProps = variants ?? {};
+			const variantProps = variants ?? EMPTY_DEFAULTS;
 			let resolvedVariants = resolveVariantsHot(variantProps);
 			if (computed) {
 				const updatedVariants = {};
@@ -830,11 +845,19 @@ function create({ transformClass = (className) => className } = {}) {
 				computed({
 					variants: resolvedVariants,
 					setVariants: (newVariants) => {
-						if (!hasAnyDisabled) Object.assign(updatedVariants, newVariants);
-						else {
-							const filtered = {};
-							filterDisabledInto(newVariants, filtered);
-							Object.assign(updatedVariants, filtered);
+						if (!hasAnyDisabled) {
+							Object.assign(updatedVariants, newVariants);
+							return;
+						}
+						for (const key in newVariants) {
+							if (!hasOwn.call(newVariants, key)) continue;
+							if (disabledVariantKeys.has(key)) continue;
+							const value = newVariants[key];
+							if (hasDisabledVariantValues) {
+								const valueKey = getVariantValueKey(value);
+								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+							}
+							updatedVariants[key] = value;
 						}
 					},
 					setDefaultVariants: (newDefaults) => {
@@ -850,8 +873,8 @@ function create({ transformClass = (className) => className } = {}) {
 							updatedVariants[key] = value;
 						}
 					},
-					addClass: () => {},
-					addStyle: () => {}
+					addClass: noop,
+					addStyle: noop
 				});
 				if (hasAnyDisabled) {
 					const filteredUpdated = {};
@@ -861,14 +884,16 @@ function create({ transformClass = (className) => className } = {}) {
 			}
 			return resolvedVariants;
 		};
-		const computedBaseClass = cx(...extBaseClassesArr, config.class);
+		const computedBaseClass = clsx(...extBaseClassesArr, config.class);
 		const classFn = (props = {}) => {
 			return computeResult(props).className;
 		};
 		const meta = {
 			baseClass: computedBaseClass,
 			staticDefaults,
-			resolveDefaults: resolveDefaultsFn
+			resolveDefaults: resolveDefaultsFn,
+			compute,
+			transformClass
 		};
 		const initComponent = (c, keys, style) => {
 			c.class = classFn;
@@ -936,6 +961,7 @@ function create({ transformClass = (className) => className } = {}) {
 		cx
 	};
 }
+function noop() {}
 const { cv, cx } = create();
 //#endregion
 export { create, cv, cx, splitProps };