clava 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# clava
+
+## 0.1.0
+
+### Minor Changes
+
+- 2c1acd9: Removed `splitProps` property. It's now a separate exported function.
+
+## 0.0.2
+
+### Patch Changes
+
+- 30403a3: Initial implementation.

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import { ClassValue as ClassValue$1 } from "clsx";
+import * as CSS from "csstype";
+
+//#region src/types.d.ts
+type ClassValue = string | number | boolean | null | undefined | void | ClassValue[];
+type JSXCSSProperties = CSS.Properties<string | number>;
+type HTMLCSSProperties = CSS.PropertiesHyphen<string | number>;
+interface JSXProps {
+  className: string;
+  style: JSXCSSProperties;
+}
+interface HTMLProps {
+  class: string;
+  style: string;
+}
+interface HTMLObjProps {
+  class: string;
+  style: HTMLCSSProperties;
+}
+interface StyleProps {
+  jsx: JSXProps;
+  html: HTMLProps;
+  htmlObj: HTMLObjProps;
+}
+type ComponentResult = JSXProps | HTMLProps | HTMLObjProps;
+type ComponentProps<V$1 = {}> = VariantValues<V$1> & Partial<ComponentResult>;
+type GetVariants<V$1> = (variants?: VariantValues<V$1>) => VariantValues<V$1>;
+type KeySourceArray = readonly string[];
+type KeySourceComponent = {
+  keys: readonly (string | number | symbol)[];
+  getVariants: () => Record<string, unknown>;
+};
+type KeySource = KeySourceArray | KeySourceComponent;
+type SourceKeys<S> = S extends readonly (infer K)[] ? K : S extends {
+  keys: readonly (infer K)[];
+} ? K : never;
+type SourceDefaults<S> = S extends {
+  getVariants: () => infer Defaults;
+} ? Defaults : {};
+type SourceResult<T, S> = Pick<T, Extract<keyof T, SourceKeys<S>>> & Omit<SourceDefaults<S>, keyof T>;
+type SplitPropsFunction = <const T extends Record<string, unknown>, const S1 extends KeySource, const Sources extends readonly KeySource[]>(props: T, source1: S1, ...sources: Sources) => SplitPropsFunctionResult<T, S1, Sources>;
+type SplitPropsFunctionResult<T, S1 extends KeySource, Sources extends readonly KeySource[]> = Sources extends readonly [] ? [SourceResult<T, S1>, Omit<T, SourceKeys<S1>>] : Sources extends readonly [infer S2 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, Omit<T, SourceKeys<S1> | SourceKeys<S2>>] : Sources extends readonly [infer S2 extends KeySource, infer S3 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, SourceResult<T, S3>, Omit<T, SourceKeys<S1> | SourceKeys<S2> | SourceKeys<S3>>] : Sources extends readonly [infer S2 extends KeySource, infer S3 extends KeySource, infer S4 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, SourceResult<T, S3>, SourceResult<T, S4>, Omit<T, SourceKeys<S1> | SourceKeys<S2> | SourceKeys<S3> | SourceKeys<S4>>] : Sources extends readonly [infer S2 extends KeySource, infer S3 extends KeySource, infer S4 extends KeySource, infer S5 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, SourceResult<T, S3>, SourceResult<T, S4>, SourceResult<T, S5>, Omit<T, SourceKeys<S1> | SourceKeys<S2> | SourceKeys<S3> | SourceKeys<S4> | SourceKeys<S5>>] : Sources extends readonly [infer S2 extends KeySource, infer S3 extends KeySource, infer S4 extends KeySource, infer S5 extends KeySource, infer S6 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, SourceResult<T, S3>, SourceResult<T, S4>, SourceResult<T, S5>, SourceResult<T, S6>, Omit<T, SourceKeys<S1> | SourceKeys<S2> | SourceKeys<S3> | SourceKeys<S4> | SourceKeys<S5> | SourceKeys<S6>>] : Sources extends readonly [infer S2 extends KeySource, infer S3 extends KeySource, infer S4 extends KeySource, infer S5 extends KeySource, infer S6 extends KeySource, infer S7 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, SourceResult<T, S3>, SourceResult<T, S4>, SourceResult<T, S5>, SourceResult<T, S6>, SourceResult<T, S7>, Omit<T, SourceKeys<S1> | SourceKeys<S2> | SourceKeys<S3> | SourceKeys<S4> | SourceKeys<S5> | SourceKeys<S6> | SourceKeys<S7>>] : Sources extends readonly [infer S2 extends KeySource, infer S3 extends KeySource, infer S4 extends KeySource, infer S5 extends KeySource, infer S6 extends KeySource, infer S7 extends KeySource, infer S8 extends KeySource] ? [SourceResult<T, S1>, SourceResult<T, S2>, SourceResult<T, S3>, SourceResult<T, S4>, SourceResult<T, S5>, SourceResult<T, S6>, SourceResult<T, S7>, SourceResult<T, S8>, Omit<T, SourceKeys<S1> | SourceKeys<S2> | SourceKeys<S3> | SourceKeys<S4> | SourceKeys<S5> | SourceKeys<S6> | SourceKeys<S7> | SourceKeys<S8>>] : unknown[];
+interface OnlyVariantsComponent<V$1> {
+  getVariants: GetVariants<V$1>;
+  keys: (keyof V$1)[];
+}
+interface ModalComponent<V$1, R extends ComponentResult> {
+  (props?: ComponentProps<V$1>): R;
+  class: (props?: ComponentProps<V$1>) => string;
+  style: (props?: ComponentProps<V$1>) => R["style"];
+  getVariants: GetVariants<V$1>;
+  keys: (keyof V$1 | keyof R)[];
+  onlyVariants: OnlyVariantsComponent<V$1>;
+  /** @internal Base class without variants */
+  _baseClass: string;
+}
+interface Component<V$1 extends Variants = {}, CV$1 extends ComputedVariants = {}, E$1 extends AnyComponent[] = [], R extends ComponentResult = ComponentResult> extends ModalComponent<MergeVariants<V$1, CV$1, E$1>, R> {
+  jsx: ModalComponent<MergeVariants<V$1, CV$1, E$1>, JSXProps>;
+  html: ModalComponent<MergeVariants<V$1, CV$1, E$1>, HTMLProps>;
+  htmlObj: ModalComponent<MergeVariants<V$1, CV$1, E$1>, HTMLObjProps>;
+}
+type AnyComponent = Component<any, any, any, any> | ModalComponent<any, any>;
+type MergeExtendedVariants<T> = T extends readonly [infer First, ...infer Rest] ? ExtractVariants<First> & MergeExtendedVariants<Rest> : {};
+type MergeExtendedComputedVariants<T> = T extends readonly [infer First, ...infer Rest] ? ExtractComputedVariants<First> & MergeExtendedComputedVariants<Rest> : {};
+type ExtractVariants<T> = T extends Component<infer V, any, infer E, any> ? V & MergeExtendedVariants<E> : {};
+type ExtractComputedVariants<T> = T extends Component<any, infer CV, infer E, any> ? CV & Omit<MergeExtendedComputedVariants<E>, keyof CV> : {};
+type MergeVariants<V$1, CV$1, E$1 extends AnyComponent[]> = NoInfer<CV$1> & Omit<NoInfer<V$1>, keyof CV$1> & Omit<MergeExtendedVariants<E$1>, keyof CV$1> & Omit<MergeExtendedComputedVariants<E$1>, keyof CV$1>;
+type StringToBoolean<T> = T extends "true" | "false" ? boolean : T;
+type VariantValue = ClassValue | StyleClassValue;
+type ExtractVariantValue<T> = T extends ((value: infer V) => any) ? V : T extends ClassValue ? boolean : T extends Record<infer K, any> ? StringToBoolean<K> : never;
+type VariantValues<V$1> = { [K in keyof V$1]?: ExtractVariantValue<V$1[K]> };
+type StyleValue = CSS.Properties & {
+  [key: `--${string}`]: string;
+};
+type StyleClassValue = StyleValue & {
+  class?: ClassValue;
+};
+interface ComputedContext<V$1> {
+  variants: VariantValues<V$1>;
+  setVariants: (variants: VariantValues<V$1>) => void;
+  setDefaultVariants: (variants: VariantValues<V$1>) => void;
+}
+type Computed<V$1> = (context: ComputedContext<V$1>) => VariantValue;
+type ComputedVariant = (value: any) => VariantValue;
+type ComputedVariants = Record<string, ComputedVariant>;
+type Variant = ClassValue | Record<string, VariantValue>;
+type Variants = Record<string, Variant>;
+type ExtendedVariants<E$1 extends AnyComponent[]> = MergeExtendedVariants<E$1> & MergeExtendedComputedVariants<E$1>;
+type ExtendableVariants<V$1 extends Variants, E$1 extends AnyComponent[]> = V$1 & { [K in keyof ExtendedVariants<E$1>]?: Partial<ExtendedVariants<E$1>[K]> | Variant };
+//#endregion
+//#region src/index.d.ts
+declare const MODES: readonly ["jsx", "html", "htmlObj"];
+type Mode = (typeof MODES)[number];
+type VariantProps<T extends Pick<AnyComponent, "getVariants">> = ReturnType<T["getVariants"]>;
+interface CVConfig<V$1 extends Variants = {}, CV$1 extends ComputedVariants = {}, E$1 extends AnyComponent[] = []> {
+  extend?: E$1;
+  class?: ClassValue;
+  style?: StyleValue;
+  variants?: ExtendableVariants<V$1, E$1>;
+  computedVariants?: CV$1;
+  defaultVariants?: VariantValues<MergeVariants<V$1, CV$1, E$1>>;
+  computed?: Computed<MergeVariants<V$1, CV$1, E$1>>;
+}
+interface CreateParams<M extends Mode> {
+  defaultMode?: M;
+  transformClass?: (className: string) => string;
+}
+/**
+ * Splits props into multiple groups based on key sources.
+ * Each source gets its own result object containing all its matching keys.
+ * The last element is always the "rest" containing keys not claimed by any source.
+ *
+ * @example
+ * ```ts
+ * const [buttonProps, inputProps, rest] = splitProps(
+ *   props,
+ *   buttonComponent,
+ *   inputComponent.onlyVariants,
+ * );
+ * ```
+ */
+declare const splitProps: SplitPropsFunction;
+declare function create<M extends Mode>({
+  defaultMode,
+  transformClass
+}?: CreateParams<M>): {
+  cv: <V$1 extends Variants = {}, CV$1 extends ComputedVariants = {}, const E$1 extends AnyComponent[] = []>(config?: CVConfig<V$1, CV$1, E$1>) => Component<V$1, CV$1, E$1, StyleProps[M]>;
+  cx: (...classes: ClassValue$1[]) => string;
+};
+declare const cv: <V$1 extends Variants = {}, CV$1 extends ComputedVariants = {}, const E$1 extends AnyComponent[] = []>(config?: CVConfig<V$1, CV$1, E$1>) => Component<V$1, CV$1, E$1, JSXProps | HTMLProps | HTMLObjProps>, cx: (...classes: ClassValue$1[]) => string;
+//#endregion
+export { CVConfig, type ClassValue, type StyleClassValue, type StyleValue, VariantProps, create, cv, cx, splitProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,534 @@
+//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
+var clsx_default = clsx;
+
+//#endregion
+//#region src/utils.ts
+/**
+* Converts a hyphenated CSS property name to camelCase.
+* @example
+* hyphenToCamel("background-color") // "backgroundColor"
+* hyphenToCamel("--custom-var") // "--custom-var" (CSS variables are preserved)
+*/
+function hyphenToCamel(str) {
+	if (str.startsWith("--")) return str;
+	return str.replace(/-([a-z])/gi, (_, letter) => letter.toUpperCase());
+}
+/**
+* Converts a camelCase CSS property name to hyphenated form.
+* @example
+* camelToHyphen("backgroundColor") // "background-color"
+* camelToHyphen("--customVar") // "--customVar" (CSS variables are preserved)
+*/
+function camelToHyphen(str) {
+	if (str.startsWith("--")) return str;
+	return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+/**
+* Parses a length value, adding "px" if it's a number.
+* @example
+* parseLengthValue(16); // "16px"
+* parseLengthValue("2em"); // "2em"
+*/
+function parseLengthValue(value) {
+	if (typeof value === "string") return value;
+	return `${value}px`;
+}
+/**
+* Parses a CSS style string into a StyleValue object.
+* @example
+* htmlStyleToStyleValue("background-color: red; font-size: 16px;");
+* // { backgroundColor: "red", fontSize: "16px" }
+*/
+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 camelProperty = hyphenToCamel(property);
+		result[camelProperty] = value;
+	}
+	return result;
+}
+/**
+* Converts a hyphenated style object to a camelCase StyleValue object.
+* @example
+* htmlObjStyleToStyleValue({ "background-color": "red", "font-size": "16px" });
+* // { backgroundColor: "red", fontSize: "16px" }
+*/
+function htmlObjStyleToStyleValue(style) {
+	const result = {};
+	for (const [key, value] of Object.entries(style)) {
+		if (value == null) continue;
+		const property = hyphenToCamel(key);
+		result[property] = parseLengthValue(value);
+	}
+	return result;
+}
+/**
+* Converts a camelCase style object to a StyleValue object.
+* @example
+* jsxStyleToStyleValue({ backgroundColor: "red", fontSize: 16 });
+* // { backgroundColor: "red", fontSize: "16px" }
+*/
+function jsxStyleToStyleValue(style) {
+	const result = {};
+	for (const [key, value] of Object.entries(style)) {
+		if (value == null) continue;
+		result[key] = parseLengthValue(value);
+	}
+	return result;
+}
+/**
+* Converts a StyleValue object to a CSS style string.
+* @example
+* styleValueToHTMLStyle({ backgroundColor: "red", fontSize: "16px" });
+* // "background-color: red; font-size: 16px;"
+*/
+function styleValueToHTMLStyle(style) {
+	const parts = [];
+	for (const [key, value] of Object.entries(style)) {
+		if (value == null) continue;
+		parts.push(`${camelToHyphen(key)}: ${value}`);
+	}
+	if (!parts.length) return "";
+	return `${parts.join("; ")};`;
+}
+/**
+* Converts a StyleValue object to a hyphenated style object.
+* @example
+* styleValueToHTMLObjStyle({ backgroundColor: "red", fontSize: "16px" });
+* // { "background-color": "red", "font-size": "16px" }
+*/
+function styleValueToHTMLObjStyle(style) {
+	const result = {};
+	for (const [key, value] of Object.entries(style)) {
+		if (value == null) continue;
+		const property = camelToHyphen(key);
+		result[property] = value;
+	}
+	return result;
+}
+/**
+* Converts a StyleValue object to a camelCase style object.
+* @example
+* styleValueToJSXStyle({ backgroundColor: "red", fontSize: "16px" });
+* // { backgroundColor: "red", fontSize: "16px" }
+*/
+function styleValueToJSXStyle(style) {
+	return style;
+}
+/**
+* Type guard to check if a style object has hyphenated keys.
+* @example
+* isHTMLObjStyle({ "background-color": "red" }); // true
+* isHTMLObjStyle({ backgroundColor: "red" }); // false
+*/
+function isHTMLObjStyle(style) {
+	return Object.keys(style).some((key) => key.includes("-") && !key.startsWith("--"));
+}
+
+//#endregion
+//#region src/index.ts
+/**
+* Checks if a value is a style-class object (has style properties, not just a
+* class value).
+*/
+function isStyleClassValue(value) {
+	if (typeof value !== "object") return false;
+	if (value == null) return false;
+	if (Array.isArray(value)) return false;
+	return true;
+}
+/**
+* Converts any style input (string, JSX object, or HTML object) to a
+* normalized StyleValue.
+*/
+function normalizeStyle(style) {
+	if (typeof style === "string") return htmlStyleToStyleValue(style);
+	if (typeof style === "object" && style != null) {
+		if (isHTMLObjStyle(style)) return htmlObjStyleToStyleValue(style);
+		return jsxStyleToStyleValue(style);
+	}
+	return {};
+}
+/**
+* Extracts class and style from a style-class value object.
+*/
+function extractStyleClass(value) {
+	const { class: cls, ...style } = value;
+	return {
+		class: cls,
+		style
+	};
+}
+/**
+* Processes a variant value to extract class and style.
+*/
+function processVariantValue(value) {
+	if (isStyleClassValue(value)) return extractStyleClass(value);
+	return {
+		class: value,
+		style: {}
+	};
+}
+/**
+* Gets all variant keys from a component's config, including extended
+* components.
+*/
+function collectVariantKeys(config) {
+	const keys = /* @__PURE__ */ new Set();
+	if (config.extend) for (const ext of config.extend) for (const key of ext.onlyVariants.keys) keys.add(key);
+	if (config.variants) for (const key of Object.keys(config.variants)) keys.add(key);
+	if (config.computedVariants) for (const key of Object.keys(config.computedVariants)) keys.add(key);
+	return Array.from(keys);
+}
+/**
+* Collects default variants from extended components and the current config.
+* Also handles implicit boolean defaults (when only `false` key exists).
+*/
+function collectDefaultVariants(config) {
+	let defaults = {};
+	if (config.extend) for (const ext of config.extend) {
+		const extDefaults = ext.getVariants();
+		defaults = {
+			...defaults,
+			...extDefaults
+		};
+	}
+	if (config.variants) {
+		for (const [variantName, variantDef] of Object.entries(config.variants)) if (isStyleClassValue(variantDef)) {
+			const keys = Object.keys(variantDef);
+			if (keys.includes("false") && !keys.includes("true") && defaults[variantName] === void 0) defaults[variantName] = false;
+		}
+	}
+	if (config.defaultVariants) defaults = {
+		...defaults,
+		...config.defaultVariants
+	};
+	return defaults;
+}
+/**
+* Resolves variant values by merging defaults with provided props.
+*/
+function resolveVariants(config, props = {}) {
+	return {
+		...collectDefaultVariants(config),
+		...props
+	};
+}
+/**
+* Gets the value for a single variant based on the variant definition and the
+* selected value.
+*/
+function getVariantResult(variantDef, selectedValue) {
+	if (!isStyleClassValue(variantDef)) {
+		if (selectedValue === true) return processVariantValue(variantDef);
+		return {
+			class: null,
+			style: {}
+		};
+	}
+	const value = variantDef[String(selectedValue)];
+	if (value === void 0) return {
+		class: null,
+		style: {}
+	};
+	return processVariantValue(value);
+}
+/**
+* Processes extended components and returns base classes and variant classes separately.
+* Base classes should come before current component's base, variant classes come after.
+* When overrideVariantKeys is provided, those variant keys are excluded from the extended
+* component's result (used when current component's computedVariants overrides them).
+*/
+function processExtended(config, resolvedVariants, overrideVariantKeys = /* @__PURE__ */ new Set()) {
+	const baseClasses = [];
+	const variantClasses = [];
+	let style = {};
+	if (config.extend) for (const ext of config.extend) {
+		const filteredVariants = { ...resolvedVariants };
+		for (const key of overrideVariantKeys) delete filteredVariants[key];
+		const extResult = ext({ ...filteredVariants });
+		const extStyle = normalizeStyle(extResult.style);
+		style = {
+			...style,
+			...extStyle
+		};
+		const baseClass = ext._baseClass;
+		baseClasses.push(baseClass);
+		const fullClass = "className" in extResult ? extResult.className : extResult.class;
+		if (fullClass && baseClass) {
+			const baseClassSet = new Set(baseClass.split(" ").filter(Boolean));
+			const variantPortion = fullClass.split(" ").filter((c) => c && !baseClassSet.has(c)).join(" ");
+			if (variantPortion) variantClasses.push(variantPortion);
+		} else if (fullClass && !baseClass) variantClasses.push(fullClass);
+	}
+	return {
+		baseClasses,
+		variantClasses,
+		style
+	};
+}
+/**
+* Processes all variants (not extended) and returns accumulated class and
+* style.
+*/
+function processVariants(config, resolvedVariants) {
+	const classes = [];
+	let style = {};
+	if (config.variants) for (const [variantName, variantDef] of Object.entries(config.variants)) {
+		const selectedValue = resolvedVariants[variantName];
+		if (selectedValue === void 0) continue;
+		const result = getVariantResult(variantDef, selectedValue);
+		classes.push(result.class);
+		style = {
+			...style,
+			...result.style
+		};
+	}
+	if (config.computedVariants) for (const [variantName, computeFn] of Object.entries(config.computedVariants)) {
+		const selectedValue = resolvedVariants[variantName];
+		if (selectedValue === void 0) continue;
+		const result = processVariantValue(computeFn(selectedValue));
+		classes.push(result.class);
+		style = {
+			...style,
+			...result.style
+		};
+	}
+	return {
+		classes,
+		style
+	};
+}
+/**
+* Processes the computed function if present.
+*/
+function processComputed(config, resolvedVariants) {
+	const classes = [];
+	let style = {};
+	let updatedVariants = { ...resolvedVariants };
+	if (config.computed) {
+		const context = {
+			variants: resolvedVariants,
+			setVariants: (newVariants) => {
+				updatedVariants = {
+					...updatedVariants,
+					...newVariants
+				};
+			},
+			setDefaultVariants: (newDefaults) => {
+				for (const [key, value] of Object.entries(newDefaults)) if (resolvedVariants[key] === void 0) updatedVariants[key] = value;
+			}
+		};
+		const computedResult = config.computed(context);
+		if (computedResult != null) {
+			const result = processVariantValue(computedResult);
+			classes.push(result.class);
+			style = {
+				...style,
+				...result.style
+			};
+		}
+	}
+	return {
+		classes,
+		style,
+		updatedVariants
+	};
+}
+/**
+* Normalizes a key source (array or component) to an object with keys and defaults.
+*/
+function normalizeKeySource(source) {
+	if (Array.isArray(source)) return {
+		keys: source,
+		defaults: {}
+	};
+	if (source && (typeof source === "object" || typeof source === "function") && "keys" in source) return {
+		keys: [...source.keys],
+		defaults: "getVariants" in source ? source.getVariants() : {}
+	};
+	return {
+		keys: [],
+		defaults: {}
+	};
+}
+/**
+* Splits props into multiple groups based on key sources.
+*/
+function splitPropsImpl(selfKeys, selfDefaults, props, sources) {
+	const allUsedKeys = new Set(selfKeys);
+	const results = [];
+	const selfResult = {};
+	for (const [key, value] of Object.entries(selfDefaults)) if (selfKeys.includes(key)) selfResult[key] = value;
+	for (const key of selfKeys) if (key in props) selfResult[key] = props[key];
+	results.push(selfResult);
+	for (const source of sources) {
+		const sourceResult = {};
+		for (const [key, value] of Object.entries(source.defaults)) if (source.keys.includes(key)) sourceResult[key] = value;
+		for (const key of source.keys) {
+			allUsedKeys.add(key);
+			if (key in props) sourceResult[key] = props[key];
+		}
+		results.push(sourceResult);
+	}
+	const rest = {};
+	for (const [key, value] of Object.entries(props)) if (!allUsedKeys.has(key)) rest[key] = value;
+	results.push(rest);
+	return results;
+}
+/**
+* Splits props into multiple groups based on key sources.
+* Each source gets its own result object containing all its matching keys.
+* The last element is always the "rest" containing keys not claimed by any source.
+*
+* @example
+* ```ts
+* const [buttonProps, inputProps, rest] = splitProps(
+*   props,
+*   buttonComponent,
+*   inputComponent.onlyVariants,
+* );
+* ```
+*/
+const splitProps = ((props, source1, ...sources) => {
+	const normalizedSource1 = normalizeKeySource(source1);
+	const normalizedSources = sources.map(normalizeKeySource);
+	return splitPropsImpl(normalizedSource1.keys, normalizedSource1.defaults, props, normalizedSources);
+});
+function create({ defaultMode = "jsx", transformClass = (className) => className } = {}) {
+	const cx$1 = (...classes) => transformClass(clsx_default(...classes));
+	const cv$1 = (config = {}) => {
+		const variantKeys = collectVariantKeys(config);
+		const getClassPropertyName = (mode) => mode === "jsx" ? "className" : "class";
+		const getPropsKeys = (mode) => [
+			getClassPropertyName(mode),
+			"style",
+			...variantKeys
+		];
+		const computeResult = (props = {}) => {
+			const allClasses = [];
+			let allStyle = {};
+			const variantProps = {};
+			for (const key of variantKeys) if (key in props) variantProps[key] = props[key];
+			let resolvedVariants = resolveVariants(config, variantProps);
+			const computedResult = processComputed(config, resolvedVariants);
+			resolvedVariants = computedResult.updatedVariants;
+			const computedVariantKeys = new Set(config.computedVariants ? Object.keys(config.computedVariants) : []);
+			const extendedResult = processExtended(config, resolvedVariants, computedVariantKeys);
+			allClasses.push(...extendedResult.baseClasses);
+			allStyle = {
+				...allStyle,
+				...extendedResult.style
+			};
+			allClasses.push(config.class);
+			if (config.style) allStyle = {
+				...allStyle,
+				...config.style
+			};
+			allClasses.push(...extendedResult.variantClasses);
+			const variantsResult = processVariants(config, resolvedVariants);
+			allClasses.push(...variantsResult.classes);
+			allStyle = {
+				...allStyle,
+				...variantsResult.style
+			};
+			allClasses.push(...computedResult.classes);
+			allStyle = {
+				...allStyle,
+				...computedResult.style
+			};
+			if ("class" in props) allClasses.push(props.class);
+			if ("className" in props) allClasses.push(props.className);
+			if (props.style != null) allStyle = {
+				...allStyle,
+				...normalizeStyle(props.style)
+			};
+			return {
+				className: cx$1(...allClasses),
+				style: allStyle
+			};
+		};
+		const createModalComponent = (mode) => {
+			const propsKeys = getPropsKeys(mode);
+			const component$1 = ((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$1.class = (props = {}) => {
+				return computeResult(props).className;
+			};
+			component$1.style = ((props = {}) => {
+				const { style } = computeResult(props);
+				if (mode === "jsx") return styleValueToJSXStyle(style);
+				if (mode === "html") return styleValueToHTMLStyle(style);
+				return styleValueToHTMLObjStyle(style);
+			});
+			component$1.getVariants = (variants) => {
+				return resolveVariants(config, variants);
+			};
+			component$1.keys = propsKeys;
+			component$1.onlyVariants = {
+				getVariants: (variants) => {
+					return resolveVariants(config, variants);
+				},
+				keys: variantKeys
+			};
+			const extendedBaseClasses = [];
+			if (config.extend) for (const ext of config.extend) extendedBaseClasses.push(ext._baseClass);
+			component$1._baseClass = cx$1(...extendedBaseClasses, config.class);
+			return component$1;
+		};
+		const defaultComponent = createModalComponent(defaultMode);
+		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;
+	};
+	return {
+		cv: cv$1,
+		cx: cx$1
+	};
+}
+const { cv, cx } = create();
+
+//#endregion
+export { create, cv, cx, splitProps };
+//# sourceMappingURL=index.js.map