clava 0.1.0 → 0.1.2

package/src/test.ts

@@ -1,22 +1,20 @@
 import { describe, expect, expectTypeOf, test } from "vitest";
-
 import type {
   AnyComponent,
+  Component,
   ComponentResult,
-  StyleClassValue,
+  ComputedVariants,
   HTMLCSSProperties,
   JSXCSSProperties,
-  Variants,
-  ComputedVariants,
-  Component,
+  StyleClassValue,
   StyleProperty,
+  Variants,
 } from "./types.ts";
-
 import {
-  cv as cvBase,
+  type VariantProps,
   create,
+  cv as cvBase,
   splitProps,
-  type VariantProps,
 } from "./index.ts";
 import {
   htmlObjStyleToStyleValue,
@@ -88,17 +86,19 @@ function getConfigDescription(config: Config) {
   return "custom";
 }
 
-function createCVFromConfig<T extends Config>(config: T) {
+function createCVFromConfig<T extends Config>(
+  config: T,
+): T["defaultMode"] & T["transformClass"] extends never
+  ? typeof cvBase
+  : ReturnType<typeof create>["cv"] {
   const defaultMode = getConfigDefaultMode(config);
   const transformClass = getConfigTransformClass(config);
   const hasTransform = "transformClass" in config && config.transformClass;
   if (!defaultMode && !hasTransform) {
     return cvBase;
   }
-  return create({
-    defaultMode: defaultMode ?? undefined,
-    transformClass,
-  }).cv;
+  const { cv } = create({ defaultMode: defaultMode ?? "jsx", transformClass });
+  return cv as any;
 }
 
 function getModalComponent<
@@ -1038,6 +1038,63 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg blue") });
     });
 
+    test("computed setDefaultVariants overrides defaultVariants", () => {
+      const component = getModalComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          defaultVariants: { size: "sm", color: "red" },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ color: "blue" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("sm blue") });
+    });
+
+    test("computed setDefaultVariants overrides extended defaultVariants", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+        defaultVariants: { color: "red" },
+      });
+      const component = getModalComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ color: "blue" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("blue sm") });
+    });
+
+    test("computed setDefaultVariants overrides child defaultVariants", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+      });
+      const component = getModalComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { size: "sm", color: "red" },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ size: "lg" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
+    });
+
     test("computed with defaultVariants", () => {
       const component = getModalComponent(
         mode,
@@ -1306,10 +1363,7 @@ for (const config of Object.values(CONFIGS)) {
       };
       const [variantProps, otherProps] = splitProps(props, component);
       expectTypeOf(variantProps).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component>,
-          "size" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "size" | "style" | "class" | "className">
       >();
       expectTypeOf(otherProps).toEqualTypeOf<{ id?: string }>();
       expect(variantProps).toEqual({
@@ -1320,7 +1374,7 @@ for (const config of Object.values(CONFIGS)) {
       expect(otherProps).toEqual({ id: "test" });
     });
 
-    test("onlyVariants splitProps", () => {
+    test("variantKeys splitProps", () => {
       const component = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
@@ -1334,16 +1388,13 @@ for (const config of Object.values(CONFIGS)) {
       };
       const [variantProps, otherProps] = splitProps(
         props,
-        component.onlyVariants,
+        component.variantKeys,
       );
       expectTypeOf(variantProps).branded.toEqualTypeOf<{
         size?: "sm" | "lg";
       }>();
       expectTypeOf(otherProps).toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component>,
-          "id" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "id" | "style" | "class" | "className">
       >();
       expect(variantProps).toEqual({ size: "lg" });
       expect(otherProps).toEqual({
@@ -1353,28 +1404,41 @@ for (const config of Object.values(CONFIGS)) {
       });
     });
 
-    test("onlyVariants getVariants", () => {
+    test("variantKeys property", () => {
       const component = getModalComponent(
         mode,
         cv({
-          variants: { size: { sm: "sm", lg: "lg" } },
-          defaultVariants: { size: "sm" },
+          variants: { size: { sm: "sm" }, color: { red: "red" } },
         }),
       );
-      const variants = component.onlyVariants.getVariants({ size: "lg" });
-      expect(variants).toEqual({ size: "lg" });
+      expectTypeOf(component.variantKeys).toEqualTypeOf<("size" | "color")[]>();
+      expect(component.variantKeys).toEqual(["size", "color"]);
     });
 
-    test("onlyVariants keys", () => {
-      const component = cv({
-        variants: { size: { sm: "sm" }, color: { red: "red" } },
-      });
-      expectTypeOf(component.onlyVariants.keys).toEqualTypeOf<
-        ("size" | "color")[]
+    test("propKeys property", () => {
+      const component = getModalComponent(
+        mode,
+        cv({ variants: { size: { sm: "sm" }, color: { red: "red" } } }),
+      );
+      const classNameProp = getClassPropertyName(config);
+      expectTypeOf(component.propKeys).toExtend<
+        ("class" | "className" | "style" | "size" | "color")[]
       >();
-      expect(component.onlyVariants.keys).toEqual(
-        expect.arrayContaining(["size", "color"]),
+      expect(component.propKeys).toEqual([
+        classNameProp,
+        "style",
+        "size",
+        "color",
+      ]);
+    });
+
+    test("propKeys on different modes", () => {
+      const component = getModalComponent(
+        mode,
+        cv({ variants: { size: { sm: "sm" } } }),
       );
+      const classNameProp = getClassPropertyName(config);
+      expect(component.propKeys).toEqual([classNameProp, "style", "size"]);
     });
 
     test("splitProps includes defaultVariants", () => {
@@ -1391,10 +1455,7 @@ for (const config of Object.values(CONFIGS)) {
       };
       const [variantProps, otherProps] = splitProps(props, component);
       expectTypeOf(variantProps).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component>,
-          "size" | "color" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "size" | "color" | "style" | "class" | "className">
       >();
       expect(variantProps).toEqual({
         size: "lg",
@@ -1423,10 +1484,7 @@ for (const config of Object.values(CONFIGS)) {
         ["disabled"],
       );
       expectTypeOf(variantProps).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component>,
-          "size" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "size" | "style" | "class" | "className">
       >();
       expect(variantProps).toEqual({
         size: "lg",
@@ -1465,24 +1523,19 @@ for (const config of Object.values(CONFIGS)) {
         component2,
       );
       expectTypeOf(comp1Props).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component1>,
-          "size" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "size" | "style" | "class" | "className">
       >();
+      // First component gets class/style props
       expect(comp1Props).toEqual({
         size: "lg",
         [classNameProp]: "extra",
       });
+      // Second component only gets variant props (no class/style)
       expectTypeOf(comp2Props).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component2>,
-          "color" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "color">
       >();
       expect(comp2Props).toEqual({
         color: "blue",
-        [classNameProp]: "extra",
       });
       expectTypeOf(otherProps).toEqualTypeOf<{ id?: string }>();
       expect(otherProps).toEqual({ id: "test" });
@@ -1510,12 +1563,15 @@ for (const config of Object.values(CONFIGS)) {
         component1,
         component2,
       );
+      // First component gets variant props
       expect(comp1Props).toEqual({ size: "lg" });
+      // Second component only gets its own variant defaults (no class/style
+      // since first claimed them)
       expect(comp2Props).toEqual({ color: "red" });
       expect(otherProps).toEqual({ id: "test" });
     });
 
-    test("splitProps with onlyVariants component excludes class and style", () => {
+    test("splitProps second component excludes class and style", () => {
       const component1 = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
@@ -1536,19 +1592,18 @@ for (const config of Object.values(CONFIGS)) {
       const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
         component1,
-        component2.onlyVariants,
+        component2,
       );
       expectTypeOf(comp1Props).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component1>,
-          "size" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "size" | "style" | "class" | "className">
       >();
+      // First component gets class/style
       expect(comp1Props).toEqual({
         size: "lg",
         style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       });
+      // Second component only gets variant props
       expectTypeOf(comp2Props).branded.toEqualTypeOf<{
         color?: "red" | "blue";
       }>();
@@ -1577,8 +1632,16 @@ for (const config of Object.values(CONFIGS)) {
         props,
         component1,
         ["disabled"],
-        component2.onlyVariants,
+        component2,
       );
+      expectTypeOf(comp1Props).branded.toEqualTypeOf<
+        Pick<typeof props, "size" | "style" | "class" | "className">
+      >();
+      expectTypeOf(extraProps).branded.toEqualTypeOf<{ disabled?: boolean }>();
+      expectTypeOf(comp2Props).branded.toEqualTypeOf<{
+        color?: "red" | "blue";
+      }>();
+      expectTypeOf(otherProps).toEqualTypeOf<{ id?: string }>();
       expect(comp1Props).toEqual({ size: "lg" });
       expect(extraProps).toEqual({ disabled: true });
       expect(comp2Props).toEqual({ color: "blue" });
@@ -1602,15 +1665,14 @@ for (const config of Object.values(CONFIGS)) {
       const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
         component1,
-        component2.onlyVariants,
+        component2,
       );
       expectTypeOf(comp1Props).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component1>,
-          "size" | "style" | "class" | "className"
-        >
+        Pick<typeof props, "size" | "style" | "class" | "className">
       >();
+      // First component gets class/style + size
       expect(comp1Props).toEqual({ size: "lg" });
+      // Second component only gets variant props (size appears in both)
       expectTypeOf(comp2Props).branded.toEqualTypeOf<{
         size?: "sm" | "lg";
       }>();
@@ -1636,15 +1698,20 @@ for (const config of Object.values(CONFIGS)) {
       const [comp1Props, comp2Props, otherProps] = splitProps(
         { id: "test" },
         component1,
-        component2.onlyVariants,
+        component2,
       );
       // Each gets its own defaults
+      expectTypeOf(comp1Props).branded.toEqualTypeOf<{ size?: "sm" | "lg" }>();
       expect(comp1Props).toEqual({ size: "sm" });
+      expectTypeOf(comp2Props).branded.toEqualTypeOf<{
+        color?: "red" | "blue";
+      }>();
       expect(comp2Props).toEqual({ color: "red" });
+      expectTypeOf(otherProps).toEqualTypeOf<{ id: string }>();
       expect(otherProps).toEqual({ id: "test" });
     });
 
-    test("onlyVariants splitProps includes defaultVariants", () => {
+    test("variantKeys splitProps includes defaultVariants", () => {
       const component = getModalComponent(
         mode,
         cv({
@@ -1660,16 +1727,17 @@ for (const config of Object.values(CONFIGS)) {
       };
       const [variantProps, otherProps] = splitProps(
         props,
-        component.onlyVariants,
+        component.variantKeys,
       );
+      // variantKeys is just an array, so no defaults are applied
       expect(variantProps).toEqual({
         size: "lg",
-        color: "red",
       });
+      // color is in variantKeys but not in props, so it's not in either result
       expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
     });
 
-    test("onlyVariants splitProps with key array", () => {
+    test("variantKeys splitProps with key array", () => {
       const component = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
@@ -1683,15 +1751,22 @@ for (const config of Object.values(CONFIGS)) {
       };
       const [variantProps, extraProps, otherProps] = splitProps(
         props,
-        component.onlyVariants,
+        component.variantKeys,
         ["disabled"],
       );
+      expectTypeOf(variantProps).branded.toEqualTypeOf<{
+        size?: "sm" | "lg";
+      }>();
       expect(variantProps).toEqual({ size: "lg" });
+      expectTypeOf(extraProps).branded.toEqualTypeOf<{ disabled?: boolean }>();
       expect(extraProps).toEqual({ disabled: true });
+      expectTypeOf(otherProps).toEqualTypeOf<
+        Pick<typeof props, "id" | "class" | "className" | "style">
+      >();
       expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
     });
 
-    test("onlyVariants splitProps with component", () => {
+    test("variantKeys splitProps with component", () => {
       const component1 = getModalComponent(
         mode,
         cv({
@@ -1716,164 +1791,129 @@ for (const config of Object.values(CONFIGS)) {
       };
       const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
-        component1.onlyVariants,
-        component2.onlyVariants,
+        component1.variantKeys,
+        component2.variantKeys,
       );
+      expectTypeOf(comp1Props).branded.toEqualTypeOf<{ size?: "sm" | "lg" }>();
       expect(comp1Props).toEqual({ size: "lg" });
+      expectTypeOf(comp2Props).branded.toEqualTypeOf<{
+        color?: "red" | "blue";
+      }>();
       expect(comp2Props).toEqual({ color: "blue" });
-      expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
-    });
-
-    test("splitProps includes defaultVariants", () => {
-      const component = getModalComponent(
-        mode,
-        cv({
-          variants: { size: { sm: "sm", lg: "lg" }, color: { red: "red" } },
-          defaultVariants: { size: "sm", color: "red" },
-        }),
-      );
-      const props: HTMLProperties<typeof component> = {
-        id: "test",
-        size: "lg",
-      };
-      const [variantProps, otherProps] = splitProps(props, component);
-      expectTypeOf(variantProps).branded.toEqualTypeOf<
-        Pick<
-          HTMLProperties<typeof component>,
-          "size" | "color" | "style" | "class" | "className"
-        >
+      expectTypeOf(otherProps).toEqualTypeOf<
+        Pick<typeof props, "id" | "class" | "className" | "style">
       >();
-      expect(variantProps).toEqual({ size: "lg", color: "red" });
-      expectTypeOf(otherProps).toEqualTypeOf<{ id?: string }>();
-      expect(otherProps).toEqual({ id: "test" });
+      expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
     });
 
-    test("splitProps with key array as second parameter", () => {
+    test("splitProps with array containing class before component", () => {
       const component = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
       );
       const classNameProp = getClassPropertyName(config);
-      const props: HTMLProperties<typeof component> & { disabled?: boolean } = {
+      const props: HTMLProperties<typeof component> = {
         id: "test",
         size: "lg",
-        style: { color: "red" },
+        style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
-        disabled: true,
       };
-      const [variantProps, extraProps, otherProps] = splitProps(
+      // Array gets class, component still gets class/style (arrays don't claim styling)
+      const [arrayProps, compProps, otherProps] = splitProps(
         props,
+        [classNameProp],
         component,
-        ["disabled"],
       );
-      expect(variantProps).toEqual({
+      expectTypeOf(arrayProps).branded.toEqualTypeOf<
+        Pick<typeof props, "class" | "className">
+      >();
+      expect(arrayProps).toEqual({ [classNameProp]: "extra" });
+      // Component still gets class/style since arrays don't claim them
+      expectTypeOf(compProps).branded.toEqualTypeOf<
+        Pick<typeof props, "size" | "style" | "class" | "className">
+      >();
+      expect(compProps).toEqual({
         size: "lg",
-        style: { color: "red" },
+        style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       });
-      expect(extraProps).toEqual({ disabled: true });
       expect(otherProps).toEqual({ id: "test" });
     });
 
-    test("splitProps with another component as parameter", () => {
-      const component1 = getModalComponent(
+    test("splitProps with array containing class and style before component", () => {
+      const component = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
       );
-      const component2 = getModalComponent(
-        mode,
-        cv({
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { color: "red" },
-        }),
-      );
       const classNameProp = getClassPropertyName(config);
-      const props: HTMLProperties<typeof component1> &
-        HTMLProperties<typeof component2> = {
+      const props: HTMLProperties<typeof component> = {
         id: "test",
         size: "lg",
-        color: "blue",
+        style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] = splitProps(
+      // Array gets class and style, component still gets class/style (arrays don't claim styling)
+      const [arrayProps, compProps, otherProps] = splitProps(
         props,
-        component1,
-        component2,
+        [classNameProp, "style"],
+        component,
       );
-      expect(comp1Props).toEqual({
-        size: "lg",
+      expectTypeOf(arrayProps).branded.toEqualTypeOf<
+        Pick<typeof props, "class" | "className" | "style">
+      >();
+      expect(arrayProps).toEqual({
         [classNameProp]: "extra",
+        style: { backgroundColor: "yellow" },
       });
-      // component2 has class/style keys too, and defaultVariants
-      expect(comp2Props).toEqual({
-        color: "blue",
+      // Component still gets class/style since arrays don't claim them
+      expectTypeOf(compProps).branded.toEqualTypeOf<
+        Pick<typeof props, "size" | "style" | "class" | "className">
+      >();
+      expect(compProps).toEqual({
+        size: "lg",
+        style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       });
       expect(otherProps).toEqual({ id: "test" });
     });
 
-    test("splitProps with component parameter includes component defaults", () => {
-      const component1 = getModalComponent(
-        mode,
-        cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
-      );
-      const component2 = getModalComponent(
-        mode,
-        cv({
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { color: "red" },
-        }),
-      );
-      const props: HTMLProperties<typeof component1> &
-        HTMLProperties<typeof component2> = {
-        id: "test",
-        size: "lg",
-      };
-      const [comp1Props, comp2Props, otherProps] = splitProps(
-        props,
-        component1,
-        component2,
-      );
-      expect(comp1Props).toEqual({ size: "lg" });
-      // component2's defaults should be included
-      expect(comp2Props).toEqual({ color: "red" });
-      expect(otherProps).toEqual({ id: "test" });
-    });
-
-    test("splitProps with onlyVariants component excludes class and style", () => {
-      const component1 = getModalComponent(
+    test("splitProps with array after component", () => {
+      const component = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
       );
-      const component2 = getModalComponent(
-        mode,
-        cv({ variants: { color: { red: "red", blue: "blue" } } }),
-      );
       const classNameProp = getClassPropertyName(config);
-      const props: HTMLProperties<typeof component1> &
-        HTMLProperties<typeof component2> = {
+      const props: HTMLProperties<typeof component> = {
         id: "test",
         size: "lg",
-        color: "blue",
         style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] = splitProps(
-        props,
-        component1,
-        component2.onlyVariants,
-      );
-      expect(comp1Props).toEqual({
+      // Component gets class/style first, array also gets them
+      const [compProps, arrayProps, otherProps] = splitProps(props, component, [
+        classNameProp,
+        "style",
+      ]);
+      expectTypeOf(compProps).branded.toEqualTypeOf<
+        Pick<typeof props, "size" | "style" | "class" | "className">
+      >();
+      expect(compProps).toEqual({
         size: "lg",
         style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       });
-      // onlyVariants only gets color, not class/style
-      expect(comp2Props).toEqual({ color: "blue" });
+      expectTypeOf(arrayProps).branded.toEqualTypeOf<
+        Pick<typeof props, "class" | "className" | "style">
+      >();
+      expect(arrayProps).toEqual({
+        [classNameProp]: "extra",
+        style: { backgroundColor: "yellow" },
+      });
+      expectTypeOf(otherProps).toEqualTypeOf<{ id?: string }>();
       expect(otherProps).toEqual({ id: "test" });
     });
 
-    test("splitProps with multiple parameters", () => {
+    test("splitProps array before multiple components", () => {
       const component1 = getModalComponent(
         mode,
         cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
@@ -1882,158 +1922,42 @@ for (const config of Object.values(CONFIGS)) {
         mode,
         cv({ variants: { color: { red: "red", blue: "blue" } } }),
       );
+      const classNameProp = getClassPropertyName(config);
       const props: HTMLProperties<typeof component1> &
         HTMLProperties<typeof component2> & { disabled?: boolean } = {
         id: "test",
         size: "lg",
         color: "blue",
         disabled: true,
+        style: { backgroundColor: "yellow" },
+        [classNameProp]: "extra",
       };
-      const [comp1Props, extraProps, comp2Props, otherProps] = splitProps(
+      // Array doesn't claim styling, so first component (comp1) gets styling
+      const [disabledProps, comp1Props, comp2Props, otherProps] = splitProps(
         props,
-        component1,
         ["disabled"],
-        component2.onlyVariants,
-      );
-      expect(comp1Props).toEqual({ size: "lg" });
-      expect(extraProps).toEqual({ disabled: true });
-      expect(comp2Props).toEqual({ color: "blue" });
-      expect(otherProps).toEqual({ id: "test" });
-    });
-
-    test("splitProps with shared keys between components", () => {
-      const component1 = getModalComponent(
-        mode,
-        cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
-      );
-      const component2 = getModalComponent(
-        mode,
-        cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
-      );
-      const props: HTMLProperties<typeof component1> &
-        HTMLProperties<typeof component2> = {
-        id: "test",
-        size: "lg",
-      };
-      const [comp1Props, comp2Props, otherProps] = splitProps(
-        props,
         component1,
-        component2.onlyVariants,
-      );
-      expect(comp1Props).toEqual({ size: "lg" });
-      // size should appear in both
-      expect(comp2Props).toEqual({ size: "lg" });
-      expect(otherProps).toEqual({ id: "test" });
-    });
-
-    test("splitProps with defaultVariants from multiple components", () => {
-      const component1 = getModalComponent(
-        mode,
-        cv({
-          variants: { size: { sm: "sm", lg: "lg" } },
-          defaultVariants: { size: "sm" },
-        }),
-      );
-      const component2 = getModalComponent(
-        mode,
-        cv({
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { color: "red" },
-        }),
-      );
-      const props: HTMLProperties<typeof component1> &
-        HTMLProperties<typeof component2> = {
-        id: "test",
-      };
-      const [comp1Props, comp2Props, otherProps] = splitProps(
-        props,
-        component1,
-        component2.onlyVariants,
-      );
-      // Each gets its own defaults
-      expect(comp1Props).toEqual({ size: "sm" });
-      expect(comp2Props).toEqual({ color: "red" });
-      expect(otherProps).toEqual({ id: "test" });
-    });
-
-    test("onlyVariants splitProps includes defaultVariants", () => {
-      const component = getModalComponent(
-        mode,
-        cv({
-          variants: { size: { sm: "sm", lg: "lg" }, color: { red: "red" } },
-          defaultVariants: { size: "sm", color: "red" },
-        }),
+        component2,
       );
-      const classNameProp = getClassPropertyName(config);
-      const props: HTMLProperties<typeof component> = {
-        id: "test",
+      expectTypeOf(disabledProps).branded.toEqualTypeOf<{
+        disabled?: boolean;
+      }>();
+      expect(disabledProps).toEqual({ disabled: true });
+      expectTypeOf(comp1Props).branded.toEqualTypeOf<
+        Pick<typeof props, "size" | "style" | "class" | "className">
+      >();
+      // First component gets class/style
+      expect(comp1Props).toEqual({
         size: "lg",
+        style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
-      };
-      const [variantProps, otherProps] = splitProps(
-        props,
-        component.onlyVariants,
-      );
-      expect(variantProps).toEqual({
-        size: "lg",
-        color: "red",
       });
-      expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
-    });
-
-    test("onlyVariants splitProps with key array", () => {
-      const component = getModalComponent(
-        mode,
-        cv({ variants: { size: { sm: "sm", lg: "lg" } } }),
-      );
-      const classNameProp = getClassPropertyName(config);
-      const props: HTMLProperties<typeof component> & { disabled?: boolean } = {
-        id: "test",
-        size: "lg",
-        [classNameProp]: "extra",
-        disabled: true,
-      };
-      const [variantProps, extraProps, otherProps] = splitProps(
-        props,
-        component.onlyVariants,
-        ["disabled"],
-      );
-      expect(variantProps).toEqual({ size: "lg" });
-      expect(extraProps).toEqual({ disabled: true });
-      expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
-    });
-
-    test("onlyVariants splitProps with component", () => {
-      const component1 = getModalComponent(
-        mode,
-        cv({
-          variants: { size: { sm: "sm", lg: "lg" } },
-          defaultVariants: { size: "sm" },
-        }),
-      );
-      const component2 = getModalComponent(
-        mode,
-        cv({
-          variants: { color: { red: "red", blue: "blue" } },
-          defaultVariants: { color: "red" },
-        }),
-      );
-      const classNameProp = getClassPropertyName(config);
-      const props: HTMLProperties<typeof component1> &
-        HTMLProperties<typeof component2> = {
-        id: "test",
-        size: "lg",
-        color: "blue",
-        [classNameProp]: "extra",
-      };
-      const [comp1Props, comp2Props, otherProps] = splitProps(
-        props,
-        component1.onlyVariants,
-        component2.onlyVariants,
-      );
-      expect(comp1Props).toEqual({ size: "lg" });
+      // Second component only gets variant props
+      expectTypeOf(comp2Props).branded.toEqualTypeOf<
+        Pick<typeof props, "color">
+      >();
       expect(comp2Props).toEqual({ color: "blue" });
-      expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
+      expect(otherProps).toEqual({ id: "test" });
     });
   });
 }