clava 0.1.1 → 0.1.3

package/src/index.ts

@@ -1,27 +1,28 @@
 import clsx, { type ClassValue as ClsxClassValue } from "clsx";
 import type {
-  Variants,
-  ComputedVariants,
   AnyComponent,
-  Component,
-  StyleProps,
+  CVComponent,
   ClassValue,
-  StyleValue,
-  StyleClassValue,
-  VariantValues,
+  ComponentProps,
+  ComponentResult,
   Computed,
+  ComputedVariants,
   ExtendableVariants,
+  HTMLObjProps,
+  HTMLProps,
+  JSXProps,
   MergeVariants,
   ModalComponent,
-  ComponentResult,
-  JSXProps,
-  HTMLProps,
-  HTMLObjProps,
-  OnlyVariantsComponent,
-  ComponentProps,
   SplitPropsFunction,
+  StyleClassValue,
+  StyleProps,
+  StyleValue,
+  VariantValues,
+  Variants,
 } from "./types.ts";
 import {
+  type Mode,
+  getClassPropertyName,
   htmlObjStyleToStyleValue,
   htmlStyleToStyleValue,
   isHTMLObjStyle,
@@ -31,10 +32,15 @@ import {
   styleValueToJSXStyle,
 } from "./utils.ts";
 
-const MODES = ["jsx", "html", "htmlObj"] as const;
-type Mode = (typeof MODES)[number];
-
-export type { ClassValue, StyleValue, StyleClassValue };
+export type {
+  ClassValue,
+  StyleValue,
+  StyleClassValue,
+  JSXProps,
+  HTMLProps,
+  HTMLObjProps,
+  CVComponent,
+};
 
 export type VariantProps<T extends Pick<AnyComponent, "getVariants">> =
   ReturnType<T["getVariants"]>;
@@ -122,7 +128,7 @@ function collectVariantKeys(
   // Collect from extended components
   if (config.extend) {
     for (const ext of config.extend) {
-      for (const key of ext.onlyVariants.keys) {
+      for (const key of ext.variantKeys) {
         keys.add(key as string);
       }
     }
@@ -366,46 +372,67 @@ function processComputed(
   return { classes, style, updatedVariants };
 }
 
-/**
- * Normalizes a key source (array or component) to an object with keys and defaults.
- */
-function normalizeKeySource(source: unknown): {
+interface NormalizedSource {
   keys: string[];
+  variantKeys: string[];
   defaults: Record<string, unknown>;
-} {
+  isComponent: boolean;
+}
+
+/**
+ * Normalizes a key source (array or component) to an object with keys, variantKeys, defaults, and isComponent flag.
+ */
+function normalizeKeySource(source: unknown): NormalizedSource {
   if (Array.isArray(source)) {
-    return { keys: source as string[], defaults: {} };
+    return {
+      keys: source as string[],
+      variantKeys: source as string[],
+      defaults: {},
+      isComponent: false,
+    };
   }
-  // Components are functions with keys property, onlyVariants are objects with keys
+  // Components are functions with keys and variantKeys properties
   if (
     source &&
     (typeof source === "object" || typeof source === "function") &&
-    "keys" in source
+    "keys" in source &&
+    "variantKeys" in source
   ) {
     const keys = [...(source as { keys: string[] }).keys] as string[];
+    const variantKeys = [
+      ...(source as { variantKeys: string[] }).variantKeys,
+    ] as string[];
     const defaults =
       "getVariants" in source
         ? (
             source as { getVariants: () => Record<string, unknown> }
           ).getVariants()
         : {};
-    return { keys, defaults };
+    return { keys, variantKeys, defaults, isComponent: true };
   }
-  return { keys: [], defaults: {} };
+  return { keys: [], variantKeys: [], defaults: {}, isComponent: false };
 }
 
 /**
  * Splits props into multiple groups based on key sources.
+ * Only the first component claims styling props (class/className/style).
+ * Subsequent components only receive variant props.
+ * Arrays always receive their listed keys but don't claim styling props.
  */
 function splitPropsImpl(
   selfKeys: string[],
+  selfVariantKeys: string[],
   selfDefaults: Record<string, unknown>,
+  selfIsComponent: boolean,
   props: Record<string, unknown>,
-  sources: Array<{ keys: string[]; defaults: Record<string, unknown> }>,
+  sources: NormalizedSource[],
 ): Record<string, unknown>[] {
   const allUsedKeys = new Set<string>(selfKeys);
   const results: Record<string, unknown>[] = [];
 
+  // Track if styling has been claimed by a component
+  let stylingClaimed = selfIsComponent;
+
   // Self result with defaults
   const selfResult: Record<string, unknown> = {};
   // First apply defaults
@@ -425,20 +452,33 @@ function splitPropsImpl(
   // Process each source
   for (const source of sources) {
     const sourceResult: Record<string, unknown> = {};
-    // First apply defaults
+
+    // Determine which keys this source should use
+    // Components use variantKeys if styling has already been claimed
+    // Arrays always use their listed keys
+    const effectiveKeys =
+      source.isComponent && stylingClaimed ? source.variantKeys : source.keys;
+
+    // First apply defaults (only for variant keys if component and styling claimed)
     for (const [key, value] of Object.entries(source.defaults)) {
-      if (source.keys.includes(key)) {
+      if (effectiveKeys.includes(key)) {
         sourceResult[key] = value;
       }
     }
+
     // Then override with props
-    for (const key of source.keys) {
+    for (const key of effectiveKeys) {
       allUsedKeys.add(key);
       if (key in props) {
         sourceResult[key] = props[key];
       }
     }
     results.push(sourceResult);
+
+    // If this is a component that hasn't claimed styling yet, mark styling as claimed
+    if (source.isComponent && !stylingClaimed) {
+      stylingClaimed = true;
+    }
   }
 
   // Rest - keys not used by anyone
@@ -456,6 +496,9 @@ function splitPropsImpl(
 /**
  * Splits props into multiple groups based on key sources.
  * Each source gets its own result object containing all its matching keys.
+ * The first component source claims styling props (class/className/style).
+ * Subsequent components 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
@@ -463,8 +506,10 @@ function splitPropsImpl(
  * const [buttonProps, inputProps, rest] = splitProps(
  *   props,
  *   buttonComponent,
- *   inputComponent.onlyVariants,
+ *   inputComponent,
  * );
+ * // buttonProps has class/style + button variants
+ * // inputProps has only input variants (no class/style)
  * ```
  */
 export const splitProps: SplitPropsFunction = ((
@@ -476,7 +521,9 @@ export const splitProps: SplitPropsFunction = ((
   const normalizedSources = sources.map(normalizeKeySource);
   return splitPropsImpl(
     normalizedSource1.keys,
+    normalizedSource1.variantKeys,
     normalizedSource1.defaults,
+    normalizedSource1.isComponent,
     props,
     normalizedSources,
   );
@@ -494,16 +541,13 @@ export function create<M extends Mode = "jsx">({
     const E extends AnyComponent[] = [],
   >(
     config: CVConfig<V, CV, E> = {},
-  ): Component<V, CV, E, StyleProps[M]> => {
+  ): CVComponent<V, CV, E, StyleProps[M]> => {
     type MergedVariants = MergeVariants<V, CV, E>;
 
     const variantKeys = collectVariantKeys(
       config as CVConfig<Variants, ComputedVariants, AnyComponent[]>,
     );
 
-    const getClassPropertyName = (mode: Mode) =>
-      mode === "jsx" ? "className" : "class";
-
     const getPropsKeys = (mode: Mode) => [
       getClassPropertyName(mode),
       "style",
@@ -642,17 +686,9 @@ export function create<M extends Mode = "jsx">({
 
       component.keys = propsKeys as (keyof MergedVariants | keyof R)[];
 
-      component.onlyVariants = {
-        getVariants: (
-          variants?: VariantValues<MergedVariants>,
-        ): VariantValues<MergedVariants> => {
-          return resolveVariants(
-            config as CVConfig<Variants, ComputedVariants, AnyComponent[]>,
-            variants as VariantValues<Record<string, unknown>>,
-          ) as VariantValues<MergedVariants>;
-        },
-        keys: variantKeys as (keyof MergedVariants)[],
-      } as OnlyVariantsComponent<MergedVariants>;
+      component.variantKeys = variantKeys as (keyof MergedVariants)[];
+
+      component.propKeys = propsKeys as (keyof MergedVariants | keyof R)[];
 
       // Compute base class (without variants) - includes extended base classes
       const extendedBaseClasses: ClassValue[] = [];
@@ -678,7 +714,7 @@ export function create<M extends Mode = "jsx">({
     const htmlObjComponent = createModalComponent<HTMLObjProps>("htmlObj");
 
     // Build the final component
-    const component = defaultComponent as Component<V, CV, E, StyleProps[M]>;
+    const component = defaultComponent as CVComponent<V, CV, E, StyleProps[M]>;
     component.jsx = jsxComponent;
     component.html = htmlComponent;
     component.htmlObj = htmlObjComponent;

package/src/test-react.ts

@@ -1,7 +1,7 @@
-import type { ComponentProps, CSSProperties } from "react";
+import type { CSSProperties, ComponentProps } from "react";
 import { expect, expectTypeOf, test } from "vitest";
-import { cv, splitProps, type VariantProps } from "./index.ts";
-import { JSXProps } from "./types.ts";
+import type { JSXProps } from "./types.ts";
+import { type VariantProps, cv, splitProps } from "./index.ts";
 
 test("splitProps", () => {
   const component = cv({ variants: { size: { sm: "sm", md: "md" } } });

package/src/test-solid.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, JSX } from "solid-js";
 import { expect, expectTypeOf, test } from "vitest";
-import { create, splitProps, type VariantProps } from "./index.ts";
+import { type VariantProps, create, splitProps } from "./index.ts";
 import { type HTMLObjProps } from "./types.ts";
 
 const { cv } = create({ defaultMode: "htmlObj" });