clava 0.2.0 → 0.2.1

package/dist/index.js

@@ -1,14 +1,6 @@
 import clsx from "clsx";
 //#region src/utils.ts
-/**
-* Returns the appropriate class property name based on the mode.
-* @example
-* getClassPropertyName("jsx") // "className"
-* getClassPropertyName("html") // "class"
-*/
-function getClassPropertyName(mode) {
-	return mode === "jsx" ? "className" : "class";
-}
+const hasOwn$1 = Object.prototype.hasOwnProperty;
 /**
 * Converts a hyphenated CSS property name to camelCase.
 * @example
@@ -16,7 +8,8 @@ function getClassPropertyName(mode) {
 * hyphenToCamel("--custom-var") // "--custom-var" (CSS variables are preserved)
 */
 function hyphenToCamel(str) {
-	if (str.startsWith("--")) return str;
+	if (str.length >= 2 && str.charCodeAt(0) === 45 && str.charCodeAt(1) === 45) return str;
+	if (str.indexOf("-") === -1) return str;
 	return str.replace(/-([a-z])/gi, (_, letter) => letter.toUpperCase());
 }
 /**
@@ -26,7 +19,7 @@ function hyphenToCamel(str) {
 * camelToHyphen("--customVar") // "--customVar" (CSS variables are preserved)
 */
 function camelToHyphen(str) {
-	if (str.startsWith("--")) return str;
+	if (str.length >= 2 && str.charCodeAt(0) === 45 && str.charCodeAt(1) === 45) return str;
 	return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
 /**
@@ -48,16 +41,54 @@ function parseLengthValue(value) {
 function htmlStyleToStyleValue(styleString) {
 	if (!styleString) return {};
 	const result = {};
-	const declarations = styleString.split(";");
-	for (const declaration of declarations) {
-		const trimmed = declaration.trim();
-		if (!trimmed) continue;
-		const colonIndex = trimmed.indexOf(":");
-		if (colonIndex === -1) continue;
-		const property = trimmed.slice(0, colonIndex).trim();
-		const value = trimmed.slice(colonIndex + 1).trim();
-		if (!property) continue;
-		if (!value) continue;
+	const len = styleString.length;
+	let i = 0;
+	while (i < len) {
+		while (i < len) {
+			const c = styleString.charCodeAt(i);
+			if (c !== 32 && c !== 9 && c !== 10 && c !== 13 && c !== 59) break;
+			i++;
+		}
+		if (i >= len) break;
+		const propStart = i;
+		while (i < len) {
+			const c = styleString.charCodeAt(i);
+			if (c === 58 || c === 59) break;
+			i++;
+		}
+		if (i >= len || styleString.charCodeAt(i) === 59) {
+			if (i < len) i++;
+			continue;
+		}
+		let propEnd = i;
+		while (propEnd > propStart) {
+			const c = styleString.charCodeAt(propEnd - 1);
+			if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
+			propEnd--;
+		}
+		if (propEnd === propStart) {
+			while (i < len && styleString.charCodeAt(i) !== 59) i++;
+			if (i < len) i++;
+			continue;
+		}
+		const property = styleString.slice(propStart, propEnd);
+		i++;
+		while (i < len) {
+			const c = styleString.charCodeAt(i);
+			if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
+			i++;
+		}
+		const valStart = i;
+		while (i < len && styleString.charCodeAt(i) !== 59) i++;
+		let valEnd = i;
+		while (valEnd > valStart) {
+			const c = styleString.charCodeAt(valEnd - 1);
+			if (c !== 32 && c !== 9 && c !== 10 && c !== 13) break;
+			valEnd--;
+		}
+		if (i < len) i++;
+		if (valEnd === valStart) continue;
+		const value = styleString.slice(valStart, valEnd);
 		result[hyphenToCamel(property)] = value;
 	}
 	return result;
@@ -70,7 +101,9 @@ function htmlStyleToStyleValue(styleString) {
 */
 function htmlObjStyleToStyleValue(style) {
 	const result = {};
-	for (const [key, value] of Object.entries(style)) {
+	for (const key in style) {
+		if (!hasOwn$1.call(style, key)) continue;
+		const value = style[key];
 		if (value == null) continue;
 		result[hyphenToCamel(key)] = parseLengthValue(value);
 	}
@@ -84,7 +117,9 @@ function htmlObjStyleToStyleValue(style) {
 */
 function jsxStyleToStyleValue(style) {
 	const result = {};
-	for (const [key, value] of Object.entries(style)) {
+	for (const key in style) {
+		if (!hasOwn$1.call(style, key)) continue;
+		const value = style[key];
 		if (value == null) continue;
 		result[key] = parseLengthValue(value);
 	}
@@ -97,13 +132,18 @@ function jsxStyleToStyleValue(style) {
 * // "background-color: red; font-size: 16px;"
 */
 function styleValueToHTMLStyle(style) {
-	const parts = [];
-	for (const [key, value] of Object.entries(style)) {
+	let result = "";
+	for (const key in style) {
+		if (!hasOwn$1.call(style, key)) continue;
+		const value = style[key];
 		if (value == null) continue;
-		parts.push(`${camelToHyphen(key)}: ${value}`);
+		if (result) result += "; ";
+		result += camelToHyphen(key);
+		result += ": ";
+		result += value;
 	}
-	if (!parts.length) return "";
-	return `${parts.join("; ")};`;
+	if (!result) return "";
+	return `${result};`;
 }
 /**
 * Converts a StyleValue object to a hyphenated style object.
@@ -113,10 +153,11 @@ function styleValueToHTMLStyle(style) {
 */
 function styleValueToHTMLObjStyle(style) {
 	const result = {};
-	for (const [key, value] of Object.entries(style)) {
+	for (const key in style) {
+		if (!hasOwn$1.call(style, key)) continue;
+		const value = style[key];
 		if (value == null) continue;
-		const property = camelToHyphen(key);
-		result[property] = value;
+		result[camelToHyphen(key)] = value;
 	}
 	return result;
 }
@@ -136,13 +177,19 @@ function styleValueToJSXStyle(style) {
 * isHTMLObjStyle({ backgroundColor: "red" }); // false
 */
 function isHTMLObjStyle(style) {
-	return Object.keys(style).some((key) => key.includes("-") && !key.startsWith("--"));
+	for (const key in style) {
+		if (!hasOwn$1.call(style, key)) continue;
+		if (key.length >= 2 && key.charCodeAt(0) === 45 && key.charCodeAt(1) === 45) continue;
+		if (key.indexOf("-") !== -1) return true;
+	}
+	return false;
 }
 //#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;
 function getComponentMeta(component) {
 	return component[META_KEY];
 }
@@ -155,7 +202,7 @@ function setComponentMeta(component, meta) {
 */
 function assign(target, source) {
 	for (const key in source) {
-		if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
+		if (!hasOwn.call(source, key)) continue;
 		target[key] = source[key];
 	}
 }
@@ -184,28 +231,22 @@ function normalizeStyle(style) {
 	}
 	return {};
 }
-/**
-* Extracts class and style from a style-class value object.
-*/
-function extractStyleClass(value) {
+function extractStyleClassPrebuilt(value) {
+	const styleNorm = normalizeStyle(value.style);
 	return {
-		class: value.class,
-		style: normalizeStyle(value.style)
+		class: value.class ?? null,
+		style: styleNorm && Object.keys(styleNorm).length > 0 ? styleNorm : null
 	};
 }
-/**
-* Extracts class and style from a variant value (either a class value or a
-* style-class object).
-*/
-function extractClassAndStyle(value) {
-	if (isStyleClassValue(value)) return extractStyleClass(value);
+function extractClassAndStylePrebuilt(value) {
+	if (isStyleClassValue(value)) return extractStyleClassPrebuilt(value);
 	if (isRecordObject(value)) return {
 		class: null,
-		style: {}
+		style: null
 	};
 	return {
 		class: value,
-		style: {}
+		style: null
 	};
 }
 /**
@@ -214,15 +255,22 @@ function extractClassAndStyle(value) {
 */
 function collectVariantKeys(config) {
 	const keys = /* @__PURE__ */ new Set();
-	if (config.extend) for (const ext of config.extend) for (const key of ext.variantKeys) keys.add(key);
-	if (config.variants) for (const [key, variant] of Object.entries(config.variants)) {
-		if (variant === null) {
+	if (config.extend) for (const ext of config.extend) {
+		const extKeys = ext.variantKeys;
+		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 (config.variants[key] === null) {
 			keys.delete(key);
 			continue;
 		}
 		keys.add(key);
 	}
-	if (config.computedVariants) for (const key of Object.keys(config.computedVariants)) 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) {
@@ -240,118 +288,35 @@ function isVariantValueDisabled(config, key, value) {
 	if (!isRecordObject(variant)) return false;
 	return variant[valueKey] === null;
 }
-function filterDisabledVariants(config, variants) {
-	const filtered = {};
-	for (const [key, value] of Object.entries(variants)) {
-		if (isVariantDisabled(config, key)) continue;
-		if (isVariantValueDisabled(config, key, value)) continue;
-		filtered[key] = value;
-	}
-	return filtered;
-}
 function collectDisabledVariantKeys(config) {
 	const keys = /* @__PURE__ */ new Set();
 	if (!config.variants) return keys;
-	for (const [key, value] of Object.entries(config.variants)) if (value === null) keys.add(key);
+	for (const key in config.variants) {
+		if (!hasOwn.call(config.variants, key)) continue;
+		if (config.variants[key] === null) keys.add(key);
+	}
 	return keys;
 }
 function collectDisabledVariantValues(config) {
 	const values = {};
 	if (!config.variants) return values;
-	for (const [key, variant] of Object.entries(config.variants)) {
+	for (const key in config.variants) {
+		if (!hasOwn.call(config.variants, key)) continue;
+		const variant = config.variants[key];
 		if (!isRecordObject(variant)) continue;
-		for (const [variantValue, variantEntry] of Object.entries(variant)) {
-			if (variantEntry !== null) continue;
-			if (!values[key]) values[key] = /* @__PURE__ */ new Set();
-			values[key].add(variantValue);
+		let bucket;
+		for (const variantValue in variant) {
+			if (!hasOwn.call(variant, variantValue)) continue;
+			if (variant[variantValue] !== null) continue;
+			if (!bucket) {
+				bucket = /* @__PURE__ */ new Set();
+				values[key] = bucket;
+			}
+			bucket.add(variantValue);
 		}
 	}
 	return values;
 }
-function mergeDisabledVariantValues(base, override) {
-	const merged = {};
-	for (const [key, values] of Object.entries(base)) merged[key] = new Set(values);
-	for (const [key, values] of Object.entries(override)) {
-		if (!merged[key]) merged[key] = /* @__PURE__ */ new Set();
-		for (const value of values) merged[key].add(value);
-	}
-	return merged;
-}
-/**
-* Collects static default variants from extended components and the current
-* config. Also handles implicit boolean defaults (when only `false` key
-* exists). This does NOT trigger computed functions - use collectDefaultVariants
-* for that.
-*/
-function collectStaticDefaults(config) {
-	const defaults = {};
-	if (config.extend) for (const ext of config.extend) {
-		const meta = getComponentMeta(ext);
-		if (meta) Object.assign(defaults, meta.staticDefaults);
-	}
-	if (config.variants) for (const [variantName, variantDef] of Object.entries(config.variants)) {
-		if (!isRecordObject(variantDef)) continue;
-		if (Object.keys(variantDef).includes("false") && !defaults[variantName]) defaults[variantName] = false;
-	}
-	if (config.defaultVariants) Object.assign(defaults, config.defaultVariants);
-	return filterDisabledVariants(config, defaults);
-}
-/**
-* Collects default variants from extended components and the current config.
-* This includes both static defaults and computed defaults (from
-* setDefaultVariants in extended components' computed functions). Priority:
-* parent static < child static < parent computed < child computed.
-*/
-function collectDefaultVariants(config, propsVariants = {}) {
-	const defaults = collectStaticDefaults(config);
-	if (!config.extend) return defaults;
-	for (const ext of config.extend) {
-		const meta = getComponentMeta(ext);
-		if (!meta) continue;
-		Object.assign(defaults, meta.resolveDefaults(defaults, propsVariants));
-	}
-	return filterDisabledVariants(config, defaults);
-}
-/**
-* Filters out keys with undefined values from an object.
-*/
-function filterUndefined(obj) {
-	const result = {};
-	for (const [key, value] of Object.entries(obj)) {
-		if (value === void 0) continue;
-		result[key] = value;
-	}
-	return result;
-}
-/**
-* Resolves variant values by merging defaults with provided props. Props with
-* undefined values are filtered out so they don't override defaults.
-*/
-function resolveVariants(config, props = {}) {
-	return filterDisabledVariants(config, {
-		...collectDefaultVariants(config, props),
-		...filterUndefined(props)
-	});
-}
-/**
-* Gets the value for a single variant based on the variant definition and the
-* selected value.
-*/
-function getVariantResult(variantDef, selectedValue) {
-	if (!isRecordObject(variantDef)) {
-		if (selectedValue === true) return extractClassAndStyle(variantDef);
-		return {
-			class: null,
-			style: {}
-		};
-	}
-	const value = variantDef[String(selectedValue)];
-	if (value === void 0) return {
-		class: null,
-		style: {}
-	};
-	return extractClassAndStyle(value);
-}
 /**
 * Extracts classes from fullClass that are not in baseClass. Uses string
 * comparison optimization: if fullClass starts with baseClass, just take the
@@ -364,125 +329,15 @@ function extractVariantClasses(fullClass, baseClass) {
 	const baseClassSet = new Set(baseClass.split(" ").filter(Boolean));
 	return fullClass.split(" ").filter((c) => c && !baseClassSet.has(c)).join(" ");
 }
-function computeExtendedStyles(config, resolvedVariants, overrideVariantKeys = /* @__PURE__ */ new Set(), overrideVariantValues = {}) {
-	const baseClasses = [];
-	const variantClasses = [];
-	const style = {};
-	if (!config.extend) return {
-		baseClasses,
-		variantClasses,
-		style
-	};
-	const hasOverrideVariantKeys = overrideVariantKeys.size > 0;
-	const hasOverrideVariantValues = Object.keys(overrideVariantValues).length > 0;
-	for (const ext of config.extend) {
-		const propsForExt = { ...resolvedVariants };
-		if (hasOverrideVariantKeys) propsForExt[SKIP_STYLE_KEYS] = overrideVariantKeys;
-		if (hasOverrideVariantValues) propsForExt[SKIP_STYLE_VARIANT_VALUES] = overrideVariantValues;
-		const extResult = ext(propsForExt);
-		assign(style, normalizeStyle(extResult.style));
-		const baseClass = getComponentMeta(ext)?.baseClass ?? "";
-		baseClasses.push(baseClass);
-		const variantPortion = extractVariantClasses("className" in extResult ? extResult.className : extResult.class, baseClass);
-		if (variantPortion) variantClasses.push(variantPortion);
-	}
-	return {
-		baseClasses,
-		variantClasses,
-		style
-	};
-}
-/**
-* Computes class and style from the component's own variants and
-* computedVariants (not extended components).
-*/
-function computeVariantStyles(config, resolvedVariants, skipStyleKeys = /* @__PURE__ */ new Set(), skipVariantValues = {}) {
-	const classes = [];
-	const style = {};
-	if (config.variants) for (const [variantName, variantDef] of Object.entries(config.variants)) {
-		if (skipStyleKeys.has(variantName)) continue;
-		const selectedValue = resolvedVariants[variantName];
-		if (selectedValue === void 0) continue;
-		const selectedKey = getVariantValueKey(selectedValue);
-		if (selectedKey && skipVariantValues[variantName]?.has(selectedKey)) continue;
-		const result = getVariantResult(variantDef, selectedValue);
-		classes.push(result.class);
-		assign(style, result.style);
-	}
-	if (config.computedVariants) for (const [variantName, computeFn] of Object.entries(config.computedVariants)) {
-		if (skipStyleKeys.has(variantName)) continue;
-		const selectedValue = resolvedVariants[variantName];
-		if (selectedValue === void 0) continue;
-		const selectedKey = getVariantValueKey(selectedValue);
-		if (selectedKey && skipVariantValues[variantName]?.has(selectedKey)) continue;
-		const result = extractClassAndStyle(computeFn(selectedValue));
-		classes.push(result.class);
-		assign(style, result.style);
-	}
-	return {
-		classes,
-		style
-	};
-}
-/**
-* Runs the computed function if present, returning classes, styles, and updated
-* variants.
-*/
-function runComputedFunction(config, resolvedVariants, propsVariants) {
-	const classes = [];
-	const style = {};
-	const updatedVariants = { ...resolvedVariants };
-	if (!config.computed) return {
-		classes,
-		style,
-		updatedVariants
-	};
-	const context = {
-		variants: resolvedVariants,
-		setVariants: (newVariants) => {
-			Object.assign(updatedVariants, filterDisabledVariants(config, newVariants));
-		},
-		setDefaultVariants: (newDefaults) => {
-			for (const [key, value] of Object.entries(newDefaults)) if (propsVariants[key] === void 0) {
-				if (isVariantDisabled(config, key)) continue;
-				if (isVariantValueDisabled(config, key, value)) continue;
-				updatedVariants[key] = value;
-			}
-		},
-		addClass: (className) => {
-			classes.push(className);
-		},
-		addStyle: (newStyle) => {
-			assign(style, newStyle);
-		}
-	};
-	const computedResult = config.computed(context);
-	if (computedResult != null) {
-		const result = extractClassAndStyle(computedResult);
-		classes.push(result.class);
-		assign(style, result.style);
-	}
-	return {
-		classes,
-		style,
-		updatedVariants: filterDisabledVariants(config, updatedVariants)
-	};
-}
 const EMPTY_SOURCE = {
 	keys: [],
 	variantKeys: [],
-	defaults: {},
 	isComponent: false
 };
-/**
-* Normalizes a key source (array or component) to an object with keys,
-* variantKeys, defaults, and isComponent flag.
-*/
 function normalizeKeySource(source) {
 	if (Array.isArray(source)) return {
 		keys: source,
 		variantKeys: source,
-		defaults: {},
 		isComponent: false
 	};
 	if (!source) return EMPTY_SOURCE;
@@ -491,9 +346,8 @@ function normalizeKeySource(source) {
 	if (!("variantKeys" in source)) return EMPTY_SOURCE;
 	const typed = source;
 	return {
-		keys: [...typed.keys],
-		variantKeys: [...typed.variantKeys],
-		defaults: typed.getVariants?.() ?? {},
+		keys: typed.keys,
+		variantKeys: typed.variantKeys,
 		isComponent: true
 	};
 }
@@ -504,24 +358,46 @@ function normalizeKeySource(source) {
 * claim styling props.
 */
 function splitPropsImpl(selfKeys, selfIsComponent, props, sources) {
-	const allUsedKeys = new Set(selfKeys);
+	const sourcesLength = sources.length;
 	const results = [];
 	let stylingClaimed = selfIsComponent;
 	const selfResult = {};
-	for (const key of selfKeys) if (key in props) selfResult[key] = props[key];
+	const selfKeysLength = selfKeys.length;
+	for (let i = 0; i < selfKeysLength; i++) {
+		const key = selfKeys[i];
+		if (key !== void 0 && key in props) selfResult[key] = props[key];
+	}
 	results.push(selfResult);
-	for (const source of sources) {
+	const effectiveKeyArrays = [selfKeys];
+	for (let s = 0; s < sourcesLength; s++) {
+		const source = sources[s];
+		if (source === void 0) continue;
 		const sourceResult = {};
 		const effectiveKeys = source.isComponent && stylingClaimed ? source.variantKeys : source.keys;
-		for (const key of effectiveKeys) {
-			allUsedKeys.add(key);
-			if (key in props) sourceResult[key] = props[key];
+		const effectiveKeysLength = effectiveKeys.length;
+		for (let i = 0; i < effectiveKeysLength; i++) {
+			const key = effectiveKeys[i];
+			if (key !== void 0 && key in props) sourceResult[key] = props[key];
 		}
 		results.push(sourceResult);
+		effectiveKeyArrays.push(effectiveKeys);
 		if (source.isComponent && !stylingClaimed) stylingClaimed = true;
 	}
 	const rest = {};
-	for (const [key, value] of Object.entries(props)) if (!allUsedKeys.has(key)) rest[key] = value;
+	const propKeys = Object.keys(props);
+	const propKeysLength = propKeys.length;
+	const groupCount = sourcesLength + 1;
+	outer: for (let i = 0; i < propKeysLength; i++) {
+		const key = propKeys[i];
+		if (key === void 0) continue;
+		for (let g = 0; g < groupCount; g++) {
+			const arr = effectiveKeyArrays[g];
+			if (arr === void 0) continue;
+			const arrLength = arr.length;
+			for (let j = 0; j < arrLength; j++) if (arr[j] === key) continue outer;
+		}
+		rest[key] = props[key];
+	}
 	results.push(rest);
 	return results;
 }
@@ -532,45 +408,75 @@ function splitPropsImpl(selfKeys, selfIsComponent, props, sources) {
 * only receive variant props. Arrays receive their listed keys but don't claim
 * styling props. The last element is always the "rest" containing keys not
 * claimed by any source.
-* @example
-* ```ts
-* const [buttonProps, inputProps, rest] = splitProps(
-*   props,
-*   buttonComponent,
-*   inputComponent,
-* );
-* // buttonProps has class/style + button variants
-* // inputProps has only input variants (no class/style)
-* ```
 */
 const splitProps = ((props, source1, ...sources) => {
 	const normalizedSource1 = normalizeKeySource(source1);
-	const normalizedSources = sources.map(normalizeKeySource);
+	const sourcesLength = sources.length;
+	const normalizedSources = [];
+	for (let i = 0; i < sourcesLength; i++) normalizedSources.push(normalizeKeySource(sources[i]));
 	return splitPropsImpl(normalizedSource1.keys, normalizedSource1.isComponent, props, normalizedSources);
 });
+function buildPrebuiltVariant(variantDef) {
+	if (!isRecordObject(variantDef)) return {
+		values: null,
+		shorthand: extractClassAndStylePrebuilt(variantDef),
+		disabledValues: null
+	};
+	const values = {};
+	let disabledValues = null;
+	for (const key in variantDef) {
+		if (!hasOwn.call(variantDef, key)) continue;
+		const value = variantDef[key];
+		if (value === null) {
+			if (!disabledValues) disabledValues = /* @__PURE__ */ new Set();
+			disabledValues.add(key);
+			continue;
+		}
+		values[key] = extractClassAndStylePrebuilt(value);
+	}
+	return {
+		values,
+		shorthand: null,
+		disabledValues
+	};
+}
 /**
 * 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) {
+function createResolveDefaults(config, staticDefaults) {
+	const computed = config.computed;
+	const extend = config.extend;
 	return (childDefaults, userProps = {}) => {
-		const resolvedVariants = {
-			...collectStaticDefaults(config),
-			...filterUndefined(childDefaults),
-			...filterUndefined(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 (config.extend) for (const ext of config.extend) {
+		if (extend) for (const ext of extend) {
 			const meta = getComponentMeta(ext);
 			if (!meta) continue;
-			Object.assign(computedDefaults, meta.resolveDefaults(childDefaults, userProps));
+			const extDefaults = meta.resolveDefaults(childDefaults, userProps);
+			for (const k in extDefaults) if (hasOwn.call(extDefaults, k)) computedDefaults[k] = extDefaults[k];
 		}
-		if (config.computed) config.computed({
+		if (computed) computed({
 			variants: resolvedVariants,
 			setVariants: () => {},
 			setDefaultVariants: (newDefaults) => {
-				for (const [key, value] of Object.entries(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;
@@ -592,46 +498,286 @@ function create({ transformClass = (className) => className } = {}) {
 		const variantKeys = collectVariantKeys(config);
 		const disabledVariantKeys = collectDisabledVariantKeys(config);
 		const disabledVariantValues = collectDisabledVariantValues(config);
+		const hasDisabledVariantKeys = disabledVariantKeys.size > 0;
+		const hasDisabledVariantValues = Object.keys(disabledVariantValues).length > 0;
+		const hasAnyDisabled = hasDisabledVariantKeys || hasDisabledVariantValues;
 		const inputPropsKeys = [
 			"class",
 			"className",
 			"style",
 			...variantKeys
 		];
-		const getPropsKeys = (mode) => [
-			getClassPropertyName(mode),
-			"style",
-			...variantKeys
-		];
+		const extend = config.extend;
+		const hasExtend = !!extend && extend.length > 0;
+		const variants = config.variants;
+		const computedVariantsCfg = config.computedVariants;
+		const computed = config.computed;
+		const baseStyle = config.style;
+		const baseClass = config.class === void 0 ? null : config.class;
+		const variantEntryNames = [];
+		const variantEntryDefs = [];
+		if (variants) for (const name in variants) {
+			if (!hasOwn.call(variants, name)) continue;
+			const variant = variants[name];
+			if (variant === null) 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 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;
+			const variantDef = variants[name];
+			if (!isRecordObject(variantDef)) continue;
+			if (hasOwn.call(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 (disabledVariantKeys.has(key)) {
+				delete staticDefaults[key];
+				continue;
+			}
+			if (hasDisabledVariantValues) {
+				const value = staticDefaults[key];
+				const valueKey = getVariantValueKey(value);
+				if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) delete staticDefaults[key];
+			}
+		}
+		const extEntries = extend ? extend : [];
+		const extBaseClassesArr = [];
+		const extMetas = [];
+		if (extend) for (const ext of extend) {
+			const meta = getComponentMeta(ext);
+			extMetas.push(meta);
+			extBaseClassesArr.push(meta?.baseClass ?? "");
+		}
+		const extCount = extEntries.length;
+		function filterDisabledInto(input, out) {
+			if (!hasAnyDisabled) {
+				for (const key in input) if (hasOwn.call(input, key)) out[key] = input[key];
+				return;
+			}
+			for (const key in input) {
+				if (!hasOwn.call(input, key)) continue;
+				if (disabledVariantKeys.has(key)) continue;
+				const value = input[key];
+				if (hasDisabledVariantValues) {
+					const valueKey = getVariantValueKey(value);
+					if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+				}
+				out[key] = value;
+			}
+		}
+		const resolveDefaultsFn = createResolveDefaults(config, staticDefaults);
+		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 (const k in propsVariants) {
+				if (!hasOwn.call(propsVariants, k)) continue;
+				const v = propsVariants[k];
+				if (v === void 0) continue;
+				defaults[k] = v;
+			}
+			const result = {};
+			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;
+			if (computed) {
+				const updatedVariants = {};
+				Object.assign(updatedVariants, resolvedVariants);
+				const cClasses = [];
+				let cStyle = null;
+				const result = computed({
+					variants: resolvedVariants,
+					setVariants: (newVariants) => {
+						const filtered = {};
+						filterDisabledInto(newVariants, filtered);
+						Object.assign(updatedVariants, filtered);
+					},
+					setDefaultVariants: (newDefaults) => {
+						for (const key in newDefaults) {
+							if (!hasOwn.call(newDefaults, key)) continue;
+							if (variantProps[key] !== void 0) continue;
+							if (disabledVariantKeys.has(key)) continue;
+							const value = newDefaults[key];
+							const valueKey = getVariantValueKey(value);
+							if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+							updatedVariants[key] = value;
+						}
+					},
+					addClass: (className) => {
+						cClasses.push(className);
+					},
+					addStyle: (newStyle) => {
+						if (!cStyle) cStyle = {};
+						assign(cStyle, newStyle);
+					}
+				});
+				if (result != null) {
+					const r = extractClassAndStylePrebuilt(result);
+					if (r.class != null) cClasses.push(r.class);
+					if (r.style) {
+						if (!cStyle) cStyle = {};
+						assign(cStyle, r.style);
+					}
+				}
+				const filteredUpdated = {};
+				filterDisabledInto(updatedVariants, filteredUpdated);
+				resolvedVariants = filteredUpdated;
+				computedClassesArr = cClasses;
+				computedStyleObj = cStyle;
+			}
+			const hasSkipKeys = !!skipStyleKeysIn || disabledVariantKeys.size > 0;
+			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);
+			}
+			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 computedVariantValues = null;
+			const hasInValues = !!skipStyleVariantValuesIn;
+			const disabledValuesKeys = Object.keys(disabledVariantValues);
+			const hasDisabledValues = disabledValuesKeys.length > 0;
+			if (hasExtend && (hasInValues || hasDisabledValues)) {
+				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 < disabledValuesKeys.length; i++) {
+					const k = disabledValuesKeys[i];
+					let bucket = computedVariantValues[k];
+					if (!bucket) {
+						bucket = /* @__PURE__ */ new Set();
+						computedVariantValues[k] = bucket;
+					}
+					for (const v of disabledVariantValues[k]) bucket.add(v);
+				}
+			}
 			const allClasses = [];
 			const allStyle = {};
-			const skipStyleKeys = props[SKIP_STYLE_KEYS] ?? /* @__PURE__ */ new Set();
-			const skipStyleVariantValues = props[SKIP_STYLE_VARIANT_VALUES] ?? {};
-			const variantProps = {};
-			for (const key of variantKeys) if (key in props) variantProps[key] = props[key];
-			let resolvedVariants = resolveVariants(config, variantProps);
-			const computedResult = runComputedFunction(config, resolvedVariants, variantProps);
-			resolvedVariants = computedResult.updatedVariants;
-			const currentVariantKeys = new Set(skipStyleKeys);
-			for (const key of disabledVariantKeys) currentVariantKeys.add(key);
-			const computedVariantKeys = new Set(currentVariantKeys);
-			if (config.computedVariants) for (const key of Object.keys(config.computedVariants)) computedVariantKeys.add(key);
-			const computedVariantValues = mergeDisabledVariantValues(skipStyleVariantValues, disabledVariantValues);
-			const extendedResult = computeExtendedStyles(config, resolvedVariants, computedVariantKeys, computedVariantValues);
-			allClasses.push(...extendedResult.baseClasses);
-			assign(allStyle, extendedResult.style);
-			allClasses.push(config.class);
-			if (config.style) assign(allStyle, config.style);
-			allClasses.push(...extendedResult.variantClasses);
-			const variantsResult = computeVariantStyles(config, resolvedVariants, currentVariantKeys, computedVariantValues);
-			allClasses.push(...variantsResult.classes);
-			assign(allStyle, variantsResult.style);
-			allClasses.push(...computedResult.classes);
-			assign(allStyle, computedResult.style);
+			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);
+				}
+				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);
+			}
+			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 (selectedValue === void 0) continue;
+				const selectedKey = getVariantValueKey(selectedValue);
+				if (variant.disabledValues && selectedKey != null && variant.disabledValues.has(selectedKey)) continue;
+				if (skipStyleVariantValuesIn && selectedKey != null && skipStyleVariantValuesIn[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);
+					}
+				}
+			}
+			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 (selectedValue === void 0) continue;
+				const selectedKey = getVariantValueKey(selectedValue);
+				if (skipStyleVariantValuesIn && selectedKey != null && skipStyleVariantValuesIn[variantName]?.has(selectedKey)) continue;
+				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 (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);
-			if (props.style != null) assign(allStyle, normalizeStyle(props.style));
+			const psv = props.style;
+			if (psv != null) {
+				if (typeof psv === "string") {
+					if (psv.length > 0) assign(allStyle, htmlStyleToStyleValue(psv));
+				} else if (typeof psv === "object") {
+					let hasAnyKey = false;
+					for (const _ in psv) {
+						hasAnyKey = true;
+						break;
+					}
+					if (hasAnyKey) assign(allStyle, normalizeStyle(psv));
+				}
+			}
 			return {
 				className: cx(...allClasses),
 				style: allStyle
@@ -639,81 +785,106 @@ function create({ transformClass = (className) => className } = {}) {
 		};
 		const getVariants = (variants) => {
 			const variantProps = variants ?? {};
-			const { updatedVariants } = runComputedFunction(config, resolveVariants(config, variantProps), variantProps);
-			return updatedVariants;
+			let resolvedVariants = resolveVariantsHot(variantProps);
+			if (computed) {
+				const updatedVariants = {};
+				Object.assign(updatedVariants, resolvedVariants);
+				computed({
+					variants: resolvedVariants,
+					setVariants: (newVariants) => {
+						const filtered = {};
+						filterDisabledInto(newVariants, filtered);
+						Object.assign(updatedVariants, filtered);
+					},
+					setDefaultVariants: (newDefaults) => {
+						for (const key in newDefaults) {
+							if (!hasOwn.call(newDefaults, key)) continue;
+							if (variantProps[key] !== void 0) continue;
+							if (disabledVariantKeys.has(key)) continue;
+							const value = newDefaults[key];
+							const valueKey = getVariantValueKey(value);
+							if (valueKey != null && disabledVariantValues[key]?.has(valueKey)) continue;
+							updatedVariants[key] = value;
+						}
+					},
+					addClass: () => {},
+					addStyle: () => {}
+				});
+				const filteredUpdated = {};
+				filterDisabledInto(updatedVariants, filteredUpdated);
+				resolvedVariants = filteredUpdated;
+			}
+			return resolvedVariants;
 		};
-		const extendedBaseClasses = [];
-		if (config.extend) for (const ext of config.extend) {
-			const meta = getComponentMeta(ext);
-			extendedBaseClasses.push(meta?.baseClass ?? "");
-		}
-		const baseClass = cx(...extendedBaseClasses, config.class);
-		const staticDefaults = collectStaticDefaults(config);
-		const initializeComponent = (component, propsKeys) => {
-			component.class = (props = {}) => {
-				return computeResult(props).className;
-			};
-			component.getVariants = getVariants;
-			component.keys = propsKeys;
-			component.variantKeys = variantKeys;
-			component.propKeys = propsKeys;
-			setComponentMeta(component, {
-				baseClass,
-				staticDefaults,
-				resolveDefaults: createResolveDefaults(config)
-			});
-			return component;
+		const computedBaseClass = cx(...extBaseClassesArr, config.class);
+		const classFn = (props = {}) => {
+			return computeResult(props).className;
 		};
-		const createDefaultComponent = () => {
-			const component = ((props = {}) => {
-				const { className, style } = computeResult(props);
-				return {
-					class: className,
-					style
-				};
-			});
-			component.style = (props = {}) => {
-				return computeResult(props).style;
-			};
-			return initializeComponent(component, inputPropsKeys);
+		const meta = {
+			baseClass: computedBaseClass,
+			staticDefaults,
+			resolveDefaults: resolveDefaultsFn
+		};
+		const initComponent = (c, keys, style) => {
+			c.class = classFn;
+			c.style = style;
+			c.getVariants = getVariants;
+			c.keys = keys;
+			c.variantKeys = variantKeys;
+			c.propKeys = keys;
+			setComponentMeta(c, meta);
+			return c;
 		};
-		const createModalComponent = (mode) => {
-			const propsKeys = getPropsKeys(mode);
-			const component = ((props = {}) => {
-				const { className, style } = computeResult(props);
-				if (mode === "jsx") return {
-					className,
-					style: styleValueToJSXStyle(style)
-				};
-				if (mode === "html") return {
-					class: className,
-					style: styleValueToHTMLStyle(style)
-				};
-				return {
-					class: className,
-					style: styleValueToHTMLObjStyle(style)
-				};
-			});
-			component.class = (props = {}) => {
-				return computeResult(props).className;
+		const defaultComponent = ((props = {}) => {
+			const { className, style } = computeResult(props);
+			return {
+				class: className,
+				style
 			};
-			component.style = (props = {}) => {
-				const { style } = computeResult(props);
-				if (mode === "jsx") return styleValueToJSXStyle(style);
-				if (mode === "html") return styleValueToHTMLStyle(style);
-				return styleValueToHTMLObjStyle(style);
+		});
+		initComponent(defaultComponent, inputPropsKeys, (props = {}) => {
+			return computeResult(props).style;
+		});
+		const jsxComponent = ((props = {}) => {
+			const { className, style } = computeResult(props);
+			return {
+				className,
+				style: styleValueToJSXStyle(style)
 			};
-			return initializeComponent(component, propsKeys);
-		};
-		const defaultComponent = createDefaultComponent();
-		const jsxComponent = createModalComponent("jsx");
-		const htmlComponent = createModalComponent("html");
-		const htmlObjComponent = createModalComponent("htmlObj");
-		const component = defaultComponent;
-		component.jsx = jsxComponent;
-		component.html = htmlComponent;
-		component.htmlObj = htmlObjComponent;
-		return component;
+		});
+		initComponent(jsxComponent, [
+			"className",
+			"style",
+			...variantKeys
+		], (props = {}) => styleValueToJSXStyle(computeResult(props).style));
+		const htmlComponent = ((props = {}) => {
+			const { className, style } = computeResult(props);
+			return {
+				class: className,
+				style: styleValueToHTMLStyle(style)
+			};
+		});
+		initComponent(htmlComponent, [
+			"class",
+			"style",
+			...variantKeys
+		], (props = {}) => styleValueToHTMLStyle(computeResult(props).style));
+		const htmlObjComponent = ((props = {}) => {
+			const { className, style } = computeResult(props);
+			return {
+				class: className,
+				style: styleValueToHTMLObjStyle(style)
+			};
+		});
+		initComponent(htmlObjComponent, [
+			"class",
+			"style",
+			...variantKeys
+		], (props = {}) => styleValueToHTMLObjStyle(computeResult(props).style));
+		defaultComponent.jsx = jsxComponent;
+		defaultComponent.html = htmlComponent;
+		defaultComponent.htmlObj = htmlObjComponent;
+		return defaultComponent;
 	};
 	return {
 		cv,