clava 0.2.4 → 0.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 //#region src/utils.ts
-const hasOwn$1 = Object.prototype.hasOwnProperty;
+const hasOwn = Object.prototype.hasOwnProperty;
 function isAsciiLetter(code) {
 	if (code >= 65 && code <= 90) return true;
 	return code >= 97 && code <= 122;
@@ -137,7 +137,7 @@ function htmlStyleToStyleValue(styleString) {
 function htmlObjStyleToStyleValue(style) {
 	const result = {};
 	for (const key in style) {
-		if (!hasOwn$1.call(style, key)) continue;
+		if (!hasOwn.call(style, key)) continue;
 		const value = style[key];
 		if (value == null) continue;
 		result[hyphenToCamel(key)] = parseLengthValue(value);
@@ -153,7 +153,7 @@ function htmlObjStyleToStyleValue(style) {
 function jsxStyleToStyleValue(style) {
 	const result = {};
 	for (const key in style) {
-		if (!hasOwn$1.call(style, key)) continue;
+		if (!hasOwn.call(style, key)) continue;
 		const value = style[key];
 		if (value == null) continue;
 		result[key] = parseLengthValue(value);
@@ -169,7 +169,7 @@ function jsxStyleToStyleValue(style) {
 function styleValueToHTMLStyle(style) {
 	let result = "";
 	for (const key in style) {
-		if (!hasOwn$1.call(style, key)) continue;
+		if (!hasOwn.call(style, key)) continue;
 		const value = style[key];
 		if (value == null) continue;
 		if (result) result += "; ";
@@ -189,7 +189,7 @@ function styleValueToHTMLStyle(style) {
 function styleValueToHTMLObjStyle(style) {
 	const result = {};
 	for (const key in style) {
-		if (!hasOwn$1.call(style, key)) continue;
+		if (!hasOwn.call(style, key)) continue;
 		const value = style[key];
 		if (value == null) continue;
 		result[camelToHyphen(key)] = value;
@@ -213,7 +213,7 @@ function styleValueToJSXStyle(style) {
 */
 function isHTMLObjStyle(style) {
 	for (const key in style) {
-		if (!hasOwn$1.call(style, key)) continue;
+		if (!hasOwn.call(style, key)) continue;
 		if (key.length >= 2 && key.charCodeAt(0) === 45 && key.charCodeAt(1) === 45) continue;
 		if (key.indexOf("-") !== -1) return true;
 	}
@@ -222,8 +222,51 @@ function isHTMLObjStyle(style) {
 //#endregion
 //#region src/index.ts
 const META_KEY = "__meta";
-const hasOwn = Object.prototype.hasOwnProperty;
 const EMPTY_DEFAULTS = Object.freeze({});
+const MAX_REFINE_RUNS = 50;
+function areVariantsEqual(a, b) {
+	for (const key in a) {
+		if (!Object.hasOwn(a, key)) continue;
+		if (!Object.is(a[key], b[key])) return false;
+	}
+	for (const key in b) {
+		if (!Object.hasOwn(b, key)) continue;
+		if (!Object.hasOwn(a, key)) return false;
+	}
+	return true;
+}
+function warnRefineLimit(runState) {
+	if (runState.warned) return;
+	runState.warned = true;
+	if (process.env.NODE_ENV !== "production") console.warn("Clava: Maximum refine iterations exceeded. This can happen when a refine callback calls setVariants or setDefaultVariants, but one of the variants changes on every run.");
+}
+function getExtUserVariantProps(userVariantProps, protectedVariants, changedVariants) {
+	const extUserVariantProps = {};
+	Object.assign(extUserVariantProps, userVariantProps);
+	if (protectedVariants) Object.assign(extUserVariantProps, protectedVariants);
+	if (changedVariants) Object.assign(extUserVariantProps, changedVariants);
+	return extUserVariantProps;
+}
+function mergeVariants(target, source, skipKeys) {
+	let changed = false;
+	if (!skipKeys || skipKeys.size === 0) {
+		for (const key in source) {
+			if (!Object.hasOwn(source, key)) continue;
+			const value = source[key];
+			if (!Object.is(target[key], value)) changed = true;
+			target[key] = value;
+		}
+		return changed;
+	}
+	for (const key in source) {
+		if (!Object.hasOwn(source, key)) continue;
+		if (skipKeys.has(key)) continue;
+		const value = source[key];
+		if (!Object.is(target[key], value)) changed = true;
+		target[key] = value;
+	}
+	return changed;
+}
 function getComponentMeta(component) {
 	return component[META_KEY];
 }
@@ -284,17 +327,13 @@ function collectVariantKeys(config) {
 		for (let i = 0; i < extKeys.length; i++) keys.add(extKeys[i]);
 	}
 	if (config.variants) for (const key in config.variants) {
-		if (!hasOwn.call(config.variants, key)) continue;
+		if (!Object.hasOwn(config.variants, key)) continue;
 		if (config.variants[key] === null) {
 			keys.delete(key);
 			continue;
 		}
 		keys.add(key);
 	}
-	if (config.computedVariants) for (const key in config.computedVariants) {
-		if (!hasOwn.call(config.computedVariants, key)) continue;
-		keys.add(key);
-	}
 	return Array.from(keys);
 }
 function isVariantDisabled(config, key) {
@@ -316,7 +355,7 @@ function collectDisabledVariantKeys(config) {
 	const keys = /* @__PURE__ */ new Set();
 	if (!config.variants) return keys;
 	for (const key in config.variants) {
-		if (!hasOwn.call(config.variants, key)) continue;
+		if (!Object.hasOwn(config.variants, key)) continue;
 		if (config.variants[key] === null) keys.add(key);
 	}
 	return keys;
@@ -325,12 +364,12 @@ function collectDisabledVariantValues(config) {
 	const values = {};
 	if (!config.variants) return values;
 	for (const key in config.variants) {
-		if (!hasOwn.call(config.variants, key)) continue;
+		if (!Object.hasOwn(config.variants, key)) continue;
 		const variant = config.variants[key];
 		if (!isRecordObject(variant)) continue;
 		let bucket;
 		for (const variantValue in variant) {
-			if (!hasOwn.call(variant, variantValue)) continue;
+			if (!Object.hasOwn(variant, variantValue)) continue;
 			if (variant[variantValue] !== null) continue;
 			if (!bucket) {
 				bucket = /* @__PURE__ */ new Set();
@@ -342,23 +381,24 @@ function collectDisabledVariantValues(config) {
 	return values;
 }
 const EMPTY_SOURCE = {
-	keys: [],
+	propKeys: [],
 	variantKeys: [],
 	isComponent: false
 };
 function normalizeKeySource(source) {
 	if (Array.isArray(source)) return {
-		keys: source,
+		propKeys: source,
 		variantKeys: source,
 		isComponent: false
 	};
 	if (!source) return EMPTY_SOURCE;
 	if (typeof source !== "object" && typeof source !== "function") return EMPTY_SOURCE;
-	if (!("keys" in source)) return EMPTY_SOURCE;
-	if (!("variantKeys" in source)) return EMPTY_SOURCE;
 	const typed = source;
+	if (typeof typed.getVariants !== "function") return EMPTY_SOURCE;
+	if (!Array.isArray(typed.propKeys)) return EMPTY_SOURCE;
+	if (!Array.isArray(typed.variantKeys)) return EMPTY_SOURCE;
 	return {
-		keys: typed.keys,
+		propKeys: typed.propKeys,
 		variantKeys: typed.variantKeys,
 		isComponent: true
 	};
@@ -384,7 +424,7 @@ function splitPropsImpl(selfKeys, selfIsComponent, props, sources) {
 	for (let s = 0; s < sourcesLength; s++) {
 		const source = normalizeKeySource(sources[s]);
 		const sourceResult = {};
-		const effectiveKeys = source.isComponent && stylingClaimed ? source.variantKeys : source.keys;
+		const effectiveKeys = source.isComponent && stylingClaimed ? source.variantKeys : source.propKeys;
 		const effectiveKeysLength = effectiveKeys.length;
 		for (let i = 0; i < effectiveKeysLength; i++) {
 			const key = effectiveKeys[i];
@@ -422,7 +462,7 @@ function splitPropsImpl(selfKeys, selfIsComponent, props, sources) {
 */
 const splitProps = ((props, source1, ...sources) => {
 	const normalizedSource1 = normalizeKeySource(source1);
-	return splitPropsImpl(normalizedSource1.keys, normalizedSource1.isComponent, props, sources);
+	return splitPropsImpl(normalizedSource1.propKeys, normalizedSource1.isComponent, props, sources);
 });
 function buildPrebuiltVariant(variantDef) {
 	if (!isRecordObject(variantDef)) return {
@@ -433,7 +473,7 @@ function buildPrebuiltVariant(variantDef) {
 	const values = {};
 	let disabledValues = null;
 	for (const key in variantDef) {
-		if (!hasOwn.call(variantDef, key)) continue;
+		if (!Object.hasOwn(variantDef, key)) continue;
 		const value = variantDef[key];
 		if (value === null) {
 			if (!disabledValues) disabledValues = /* @__PURE__ */ new Set();
@@ -470,42 +510,41 @@ function create({ transformClass = (className) => className } = {}) {
 		const extend = config.extend;
 		const hasExtend = !!extend && extend.length > 0;
 		const variants = config.variants;
-		const computedVariantsCfg = config.computedVariants;
-		const computed = config.computed;
+		const refine = config.refine;
 		const baseStyle = config.style;
 		const hasBaseStyle = !!baseStyle;
 		const variantEntryNames = [];
 		const variantEntryDefs = [];
+		const functionVariantNames = [];
+		const functionVariantFns = [];
 		if (variants) for (const name in variants) {
-			if (!hasOwn.call(variants, name)) continue;
+			if (!Object.hasOwn(variants, name)) continue;
 			const variant = variants[name];
 			if (variant === null) continue;
+			if (typeof variant === "function") {
+				functionVariantNames.push(name);
+				functionVariantFns.push(variant);
+				continue;
+			}
 			variantEntryNames.push(name);
 			variantEntryDefs.push(buildPrebuiltVariant(variant));
 		}
 		const variantEntryCount = variantEntryNames.length;
-		const computedVariantNames = [];
-		const computedVariantFns = [];
-		if (computedVariantsCfg) for (const name in computedVariantsCfg) {
-			if (!hasOwn.call(computedVariantsCfg, name)) continue;
-			computedVariantNames.push(name);
-			computedVariantFns.push(computedVariantsCfg[name]);
-		}
-		const computedVariantCount = computedVariantNames.length;
+		const functionVariantCount = functionVariantNames.length;
 		const staticDefaults = {};
 		if (extend) for (const ext of extend) {
 			const meta = getComponentMeta(ext);
 			if (meta) Object.assign(staticDefaults, meta.staticDefaults);
 		}
 		if (variants) for (const name in variants) {
-			if (!hasOwn.call(variants, name)) continue;
+			if (!Object.hasOwn(variants, name)) continue;
 			const variantDef = variants[name];
 			if (!isRecordObject(variantDef)) continue;
-			if (hasOwn.call(variantDef, "false") && staticDefaults[name] === void 0) staticDefaults[name] = false;
+			if (Object.hasOwn(variantDef, "false") && staticDefaults[name] === void 0) staticDefaults[name] = false;
 		}
 		if (config.defaultVariants) Object.assign(staticDefaults, config.defaultVariants);
 		if (hasAnyDisabled) for (const key in staticDefaults) {
-			if (!hasOwn.call(staticDefaults, key)) continue;
+			if (!Object.hasOwn(staticDefaults, key)) continue;
 			if (disabledVariantKeys.has(key)) {
 				delete staticDefaults[key];
 				continue;
@@ -520,7 +559,7 @@ function create({ transformClass = (className) => className } = {}) {
 		const extBaseClassesArr = [];
 		const extIsolated = [];
 		let hasIsolatedExt = false;
-		if (extend) for (const ext of extend) {
+		if (hasExtend) for (const ext of extend) {
 			const meta = getComponentMeta(ext);
 			if (!meta) continue;
 			extMetas.push(meta);
@@ -532,23 +571,47 @@ function create({ transformClass = (className) => className } = {}) {
 			} 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;
+		const extMetasWithRefine = [];
+		for (let i = 0; i < extCount; i++) {
+			const meta = extMetas[i];
+			if (meta.resolveDefaults) extMetasWithRefine.push(meta);
+		}
+		const extMetasWithRefineCount = extMetasWithRefine.length;
+		const shouldCollectChangedVariants = extMetasWithRefineCount > 0;
+		const functionVariantKeys = /* @__PURE__ */ new Set();
+		for (let i = 0; i < extCount; i++) {
+			const fnKeys = extMetas[i].functionVariantKeys;
+			for (const k of fnKeys) {
+				if (disabledVariantKeys.has(k)) continue;
+				functionVariantKeys.add(k);
+			}
+		}
+		for (let i = 0; i < functionVariantCount; i++) functionVariantKeys.add(functionVariantNames[i]);
+		for (let i = 0; i < variantEntryCount; i++) functionVariantKeys.delete(variantEntryNames[i]);
+		let staticVariantsOverridingExtFn = null;
+		if (variantEntryCount > 0 && extCount > 0) for (let i = 0; i < variantEntryCount; i++) {
+			const name = variantEntryNames[i];
+			for (let j = 0; j < extCount; j++) if (extMetas[j].functionVariantKeys.has(name)) {
+				if (!staticVariantsOverridingExtFn) staticVariantsOverridingExtFn = [];
+				staticVariantsOverridingExtFn.push(name);
+				break;
+			}
+		}
 		let staticExtSkipKeys = null;
-		if (hasDisabledVariantKeys || computedVariantCount > 0) {
+		if (hasDisabledVariantKeys || functionVariantCount > 0 || staticVariantsOverridingExtFn !== null) {
 			staticExtSkipKeys = /* @__PURE__ */ new Set();
 			for (const k of disabledVariantKeys) staticExtSkipKeys.add(k);
-			for (let i = 0; i < computedVariantCount; i++) staticExtSkipKeys.add(computedVariantNames[i]);
+			for (let i = 0; i < functionVariantCount; i++) staticExtSkipKeys.add(functionVariantNames[i]);
+			if (staticVariantsOverridingExtFn) for (const k of staticVariantsOverridingExtFn) staticExtSkipKeys.add(k);
 		}
 		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];
+				for (const key in input) if (Object.hasOwn(input, key)) out[key] = input[key];
 				return;
 			}
 			for (const key in input) {
-				if (!hasOwn.call(input, key)) continue;
+				if (!Object.hasOwn(input, key)) continue;
 				if (disabledVariantKeys.has(key)) continue;
 				const value = input[key];
 				if (hasDisabledVariantValues) {
@@ -558,66 +621,66 @@ function create({ transformClass = (className) => className } = {}) {
 				out[key] = value;
 			}
 		}
-		const resolveDefaultsFn = computed || extMetasWithResolveDefaultsCount > 0 ? (childDefaults, userProps = EMPTY_DEFAULTS) => {
+		const resolveDefaultsFn = refine || extMetasWithRefineCount > 0 ? (childDefaults, userProps = EMPTY_DEFAULTS) => {
 			const resolvedVariants = {};
 			Object.assign(resolvedVariants, staticDefaults);
 			for (const key in childDefaults) {
-				if (!hasOwn.call(childDefaults, key)) continue;
+				if (!Object.hasOwn(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;
+				if (!Object.hasOwn(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);
+			const refineDefaults = {};
+			for (let i = 0; i < extMetasWithRefineCount; i++) {
+				const extDefaults = extMetasWithRefine[i].resolveDefaults(childDefaults, userProps);
 				for (const k in extDefaults) {
-					if (!hasOwn.call(extDefaults, k)) continue;
-					computedDefaults[k] = extDefaults[k];
+					if (!Object.hasOwn(extDefaults, k)) continue;
+					refineDefaults[k] = extDefaults[k];
 				}
 			}
-			if (computed) {
+			if (refine) {
 				const ownVariants = {};
 				for (let i = 0; i < variantKeysLength; i++) {
 					const k = variantKeys[i];
-					if (hasOwn.call(resolvedVariants, k)) ownVariants[k] = resolvedVariants[k];
+					if (Object.hasOwn(resolvedVariants, k)) ownVariants[k] = resolvedVariants[k];
 				}
-				computed({
+				refine({
 					variants: ownVariants,
 					setVariants: noop,
 					setDefaultVariants: (newDefaults) => {
 						for (const key in newDefaults) {
-							if (!hasOwn.call(newDefaults, key)) continue;
+							if (!Object.hasOwn(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;
+							refineDefaults[key] = value;
 						}
 					},
 					addClass: noop,
 					addStyle: noop
 				});
 			}
-			return computedDefaults;
+			return refineDefaults;
 		} : null;
 		function resolveVariantsHot(propsVariants) {
 			const defaults = {};
 			Object.assign(defaults, staticDefaults);
-			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 (let i = 0; i < extMetasWithRefineCount; i++) {
+				const extDefaults = extMetasWithRefine[i].resolveDefaults(defaults, propsVariants);
+				for (const k in extDefaults) {
+					if (!Object.hasOwn(extDefaults, k)) continue;
+					defaults[k] = extDefaults[k];
 				}
 			}
 			for (const k in propsVariants) {
-				if (!hasOwn.call(propsVariants, k)) continue;
+				if (!Object.hasOwn(propsVariants, k)) continue;
 				const v = propsVariants[k];
 				if (v === void 0) continue;
 				defaults[k] = v;
@@ -627,18 +690,23 @@ function create({ transformClass = (className) => className } = {}) {
 			filterDisabledInto(defaults, result);
 			return result;
 		}
-		const compute = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut) => {
+		const runRefineContext = (resolved, userVariantProps, filterOwnVariants, collectOutput, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
 			let workingResolved = resolved;
 			let cClasses = null;
 			let cStyle = null;
-			if (computed) {
-				const ownVariants = {};
-				for (let i = 0; i < variantKeysLength; i++) {
-					const k = variantKeys[i];
-					if (hasOwn.call(resolved, k)) ownVariants[k] = resolved[k];
+			let changedVariants = null;
+			if (refine) {
+				let ownVariants = resolved;
+				if (filterOwnVariants) {
+					const filteredVariants = {};
+					for (let i = 0; i < variantKeysLength; i++) {
+						const k = variantKeys[i];
+						if (Object.hasOwn(resolved, k)) filteredVariants[k] = resolved[k];
+					}
+					ownVariants = filteredVariants;
 				}
 				let updatedVariants = null;
-				const localCClasses = [];
+				const localCClasses = collectOutput ? [] : null;
 				let localCStyle = null;
 				const ensureUpdated = () => {
 					if (updatedVariants) return updatedVariants;
@@ -647,48 +715,74 @@ function create({ transformClass = (className) => className } = {}) {
 					updatedVariants = u;
 					return u;
 				};
-				const result = computed({
+				const setChangedVariant = (key, value, protect = false) => {
+					if (shouldCollectChangedVariants) {
+						if (!changedVariants) changedVariants = {};
+						changedVariants[key] = value;
+					}
+					if (protect && protectedVariants) {
+						protectedVariants[key] = value;
+						protectedVariantKeys?.add(key);
+					}
+				};
+				const getCurrentVariantValue = (key) => {
+					return updatedVariants ? updatedVariants[key] : ownVariants[key];
+				};
+				const result = refine({
 					variants: ownVariants,
 					setVariants: (newVariants) => {
 						if (!hasAnyDisabled) {
-							Object.assign(ensureUpdated(), newVariants);
+							for (const key in newVariants) {
+								if (!Object.hasOwn(newVariants, key)) continue;
+								const value = newVariants[key];
+								setChangedVariant(key, value, true);
+								if (getCurrentVariantValue(key) === value) continue;
+								ensureUpdated()[key] = value;
+							}
 							return;
 						}
 						for (const key in newVariants) {
-							if (!hasOwn.call(newVariants, key)) continue;
+							if (!Object.hasOwn(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;
 							}
+							setChangedVariant(key, value, true);
+							if (getCurrentVariantValue(key) === value) continue;
 							ensureUpdated()[key] = value;
 						}
 					},
 					setDefaultVariants: (newDefaults) => {
 						for (const key in newDefaults) {
-							if (!hasOwn.call(newDefaults, key)) continue;
+							if (!Object.hasOwn(newDefaults, key)) continue;
 							if (userVariantProps[key] !== void 0) continue;
+							if (protectedVariantKeys?.has(key)) continue;
 							const value = newDefaults[key];
 							if (hasAnyDisabled) {
 								if (disabledVariantKeys.has(key)) continue;
 								const valueKey = getVariantValueKey(value);
 								if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
 							}
+							setChangedVariant(key, value);
+							if (pendingProtectedVariants) pendingProtectedVariants[key] = value;
+							if (getCurrentVariantValue(key) === value) continue;
 							ensureUpdated()[key] = value;
 						}
 					},
 					addClass: (className) => {
-						localCClasses.push(className);
+						localCClasses?.push(className);
 					},
 					addStyle: (newStyle) => {
+						if (!collectOutput) return;
 						if (!localCStyle) localCStyle = {};
 						Object.assign(localCStyle, newStyle);
 					}
 				});
-				if (result != null) {
+				if (collectOutput && result != null) {
 					const r = extractClassAndStylePrebuilt(result);
-					if (r.class != null) localCClasses.push(r.class);
+					if (r.class != null) localCClasses?.push(r.class);
 					if (r.style) {
 						if (!localCStyle) localCStyle = {};
 						Object.assign(localCStyle, r.style);
@@ -696,42 +790,72 @@ function create({ transformClass = (className) => className } = {}) {
 				}
 				cClasses = localCClasses;
 				cStyle = localCStyle;
-				if (updatedVariants) if (hasAnyDisabled) {
-					const filteredUpdated = {};
-					filterDisabledInto(updatedVariants, filteredUpdated);
-					workingResolved = filteredUpdated;
-				} else workingResolved = updatedVariants;
+				if (updatedVariants) {
+					const nextResolved = {};
+					Object.assign(nextResolved, workingResolved);
+					if (hasAnyDisabled) {
+						const filteredUpdated = {};
+						filterDisabledInto(updatedVariants, filteredUpdated);
+						Object.assign(nextResolved, filteredUpdated);
+					} else Object.assign(nextResolved, updatedVariants);
+					workingResolved = nextResolved;
+				}
 			}
-			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);
+			return {
+				workingResolved,
+				changedVariants,
+				classes: cClasses,
+				style: cStyle
+			};
+		};
+		const computeOnce = (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+			let workingResolved = resolved;
+			let cClasses = null;
+			let cStyle = null;
+			let changedVariants = null;
+			if (refine) {
+				const refineResult = runRefineContext(resolved, userVariantProps, true, true, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+				workingResolved = refineResult.workingResolved;
+				cClasses = refineResult.classes;
+				cStyle = refineResult.style;
+				changedVariants = refineResult.changedVariants;
 			}
-			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];
+			if (hasExtend) {
+				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);
 				}
-			}
-			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));
+				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];
+					}
 				}
-			} else extMetas[i].compute(workingResolved, workingResolved, extSkipKeys, extSkipVals, classesOut, styleOut);
+				const extUserVariantProps = extMetasWithRefineCount > 0 ? getExtUserVariantProps(userVariantProps, protectedVariants ?? null, changedVariants) : userVariantProps;
+				for (let i = 0; i < extCount; i++) {
+					if (hasIsolatedExt && extIsolated[i]) {
+						const extClasses = [];
+						workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, extClasses, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+						if (extClasses.length > 0) {
+							const joined = clsx(extClasses);
+							if (joined.length > 0) classesOut.push(extMetas[i].transformClass(joined));
+						}
+					} else workingResolved = extMetas[i].compute(workingResolved, extUserVariantProps, extSkipKeys, extSkipVals, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+					if (protectedVariants && extMetasWithRefineCount > 0) Object.assign(extUserVariantProps, protectedVariants);
+				}
+			}
 			if (hasBaseStyle) Object.assign(styleOut, baseStyle);
 			const ownSkipKeys = skipKeys;
 			const ownSkipValues = skipValues;
@@ -756,14 +880,14 @@ function create({ transformClass = (className) => className } = {}) {
 					if (v.style) Object.assign(styleOut, v.style);
 				}
 			}
-			for (let i = 0; i < computedVariantCount; i++) {
-				const variantName = computedVariantNames[i];
+			for (let i = 0; i < functionVariantCount; i++) {
+				const variantName = functionVariantNames[i];
 				if (ownSkipKeys && ownSkipKeys.has(variantName)) continue;
 				const selectedValue = workingResolved[variantName];
 				if (selectedValue === void 0) continue;
 				const selectedKey = getVariantValueKey(selectedValue);
 				if (ownSkipValues && selectedKey != null && ownSkipValues[variantName]?.has(selectedKey)) continue;
-				const fn = computedVariantFns[i];
+				const fn = functionVariantFns[i];
 				const computedResult = fn(selectedValue);
 				if (computedResult == null) continue;
 				const r = extractClassAndStylePrebuilt(computedResult);
@@ -772,27 +896,129 @@ function create({ transformClass = (className) => className } = {}) {
 			}
 			if (cClasses) for (let i = 0; i < cClasses.length; i++) classesOut.push(cClasses[i]);
 			if (cStyle) Object.assign(styleOut, cStyle);
+			return workingResolved;
 		};
+		const compute = !refine && extMetasWithRefineCount === 0 ? (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+			return computeOnce(resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+		} : (resolved, userVariantProps, skipKeys, skipValues, classesOut, styleOut, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+			runState ??= {
+				remaining: MAX_REFINE_RUNS,
+				warned: false
+			};
+			protectedVariants ??= {};
+			protectedVariantKeys ??= /* @__PURE__ */ new Set();
+			let workingResolved = resolved;
+			let lastClasses = [];
+			let lastStyle = {};
+			let isFirstRun = true;
+			while (runState.remaining > 0) {
+				runState.remaining -= 1;
+				let useDirectOutput = isFirstRun;
+				if (useDirectOutput) {
+					for (const key in styleOut) if (Object.hasOwn(styleOut, key)) {
+						useDirectOutput = false;
+						break;
+					}
+				}
+				const classCount = classesOut.length;
+				const nextPendingProtectedVariants = {};
+				const nextClasses = useDirectOutput ? classesOut : [];
+				const nextStyle = useDirectOutput ? styleOut : {};
+				const nextResolved = computeOnce(workingResolved, userVariantProps, skipKeys, skipValues, nextClasses, nextStyle, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				let protectedChanged;
+				if (pendingProtectedVariants) protectedChanged = mergeVariants(pendingProtectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				else protectedChanged = mergeVariants(protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				if (!protectedChanged && (nextResolved === workingResolved || areVariantsEqual(workingResolved, nextResolved))) {
+					if (!useDirectOutput) {
+						for (let i = 0; i < nextClasses.length; i++) classesOut.push(nextClasses[i]);
+						Object.assign(styleOut, nextStyle);
+					}
+					return nextResolved;
+				}
+				if (useDirectOutput && runState.remaining === 0) {
+					warnRefineLimit(runState);
+					return nextResolved;
+				}
+				if (useDirectOutput) {
+					classesOut.length = classCount;
+					for (const key in styleOut) if (Object.hasOwn(styleOut, key)) Reflect.deleteProperty(styleOut, key);
+				} else {
+					lastClasses = nextClasses;
+					lastStyle = nextStyle;
+				}
+				workingResolved = nextResolved;
+				isFirstRun = false;
+			}
+			warnRefineLimit(runState);
+			for (let i = 0; i < lastClasses.length; i++) classesOut.push(lastClasses[i]);
+			Object.assign(styleOut, lastStyle);
+			return workingResolved;
+		};
+		const resolveRefineOnce = (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+			let workingResolved = resolved;
+			let changedVariants = null;
+			if (refine) {
+				const refineResult = runRefineContext(resolved, userVariantProps, filterOwnVariants, false, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+				workingResolved = refineResult.workingResolved;
+				changedVariants = refineResult.changedVariants;
+			}
+			if (extMetasWithRefineCount > 0) {
+				const extUserVariantProps = getExtUserVariantProps(userVariantProps, protectedVariants ?? null, changedVariants);
+				for (let i = 0; i < extMetasWithRefineCount; i++) {
+					const resolveRefine = extMetasWithRefine[i].resolveRefine;
+					if (!resolveRefine) continue;
+					workingResolved = resolveRefine(workingResolved, extUserVariantProps, true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys);
+					if (protectedVariants) Object.assign(extUserVariantProps, protectedVariants);
+				}
+			}
+			return workingResolved;
+		};
+		const resolveRefine = refine || extMetasWithRefineCount > 0 ? (resolved, userVariantProps, filterOwnVariants = true, runState, protectedVariants, pendingProtectedVariants, protectedVariantKeys) => {
+			runState ??= {
+				remaining: MAX_REFINE_RUNS,
+				warned: false
+			};
+			protectedVariants ??= {};
+			protectedVariantKeys ??= /* @__PURE__ */ new Set();
+			let workingResolved = resolved;
+			let reachedLimit = true;
+			while (runState.remaining > 0) {
+				runState.remaining -= 1;
+				const nextPendingProtectedVariants = {};
+				const nextResolved = resolveRefineOnce(workingResolved, userVariantProps, filterOwnVariants, runState, protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				let protectedChanged;
+				if (pendingProtectedVariants) protectedChanged = mergeVariants(pendingProtectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				else protectedChanged = mergeVariants(protectedVariants, nextPendingProtectedVariants, protectedVariantKeys);
+				if (!protectedChanged && (nextResolved === workingResolved || areVariantsEqual(workingResolved, nextResolved))) {
+					workingResolved = nextResolved;
+					reachedLimit = false;
+					break;
+				}
+				workingResolved = nextResolved;
+			}
+			if (reachedLimit) warnRefineLimit(runState);
+			return workingResolved;
+		} : null;
 		const computeResult = (props = EMPTY_DEFAULTS) => {
 			const propsRecord = props;
 			let resolved = {};
 			Object.assign(resolved, staticDefaults);
 			let userVariantProps;
-			if (extMetasWithResolveDefaultsCount > 0) {
+			if (extMetasWithRefineCount > 0) {
 				const variantProps = {};
 				for (let i = 0; i < variantKeysLength; i++) {
 					const key = variantKeys[i];
-					if (hasOwn.call(propsRecord, key)) variantProps[key] = propsRecord[key];
+					if (Object.hasOwn(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 (let i = 0; i < extMetasWithRefineCount; i++) {
+					const extDefaults = extMetasWithRefine[i].resolveDefaults(resolved, variantProps);
+					for (const k in extDefaults) {
+						if (!Object.hasOwn(extDefaults, k)) continue;
+						resolved[k] = extDefaults[k];
 					}
 				}
 				for (const k in variantProps) {
-					if (!hasOwn.call(variantProps, k)) continue;
+					if (!Object.hasOwn(variantProps, k)) continue;
 					const v = variantProps[k];
 					if (v === void 0) continue;
 					resolved[k] = v;
@@ -801,7 +1027,7 @@ function create({ transformClass = (className) => className } = {}) {
 			} else {
 				for (let i = 0; i < variantKeysLength; i++) {
 					const key = variantKeys[i];
-					if (!hasOwn.call(propsRecord, key)) continue;
+					if (!Object.hasOwn(propsRecord, key)) continue;
 					const v = propsRecord[key];
 					if (v === void 0) continue;
 					resolved[key] = v;
@@ -839,52 +1065,10 @@ function create({ transformClass = (className) => className } = {}) {
 		const getVariants = (variants) => {
 			const variantProps = variants ?? EMPTY_DEFAULTS;
 			let resolvedVariants = resolveVariantsHot(variantProps);
-			if (computed) {
-				const updatedVariants = {};
-				Object.assign(updatedVariants, resolvedVariants);
-				computed({
-					variants: resolvedVariants,
-					setVariants: (newVariants) => {
-						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) => {
-						for (const key in newDefaults) {
-							if (!hasOwn.call(newDefaults, key)) continue;
-							if (variantProps[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;
-						}
-					},
-					addClass: noop,
-					addStyle: noop
-				});
-				if (hasAnyDisabled) {
-					const filteredUpdated = {};
-					filterDisabledInto(updatedVariants, filteredUpdated);
-					resolvedVariants = filteredUpdated;
-				} else resolvedVariants = updatedVariants;
-			}
+			if (resolveRefine) resolvedVariants = resolveRefine(resolvedVariants, variantProps, false);
 			return resolvedVariants;
 		};
-		const computedBaseClass = clsx(...extBaseClassesArr, config.class);
+		const computedBaseClass = hasExtend ? clsx(...extBaseClassesArr, config.class) : clsx(config.class);
 		const classFn = (props = {}) => {
 			return computeResult(props).className;
 		};
@@ -893,15 +1077,16 @@ function create({ transformClass = (className) => className } = {}) {
 			staticDefaults,
 			resolveDefaults: resolveDefaultsFn,
 			compute,
-			transformClass
+			resolveRefine,
+			transformClass,
+			functionVariantKeys
 		};
-		const initComponent = (c, keys, style) => {
+		const initComponent = (c, propKeys, style) => {
 			c.class = classFn;
 			c.style = style;
 			c.getVariants = getVariants;
-			c.keys = keys;
 			c.variantKeys = variantKeys;
-			c.propKeys = keys;
+			c.propKeys = propKeys;
 			setComponentMeta(c, meta);
 			return c;
 		};