clava 0.1.0 → 0.1.2

package/src/index.ts

@@ -1,29 +1,28 @@
 import clsx, { type ClassValue as ClsxClassValue } from "clsx";
-
 import type {
-  Variants,
-  ComputedVariants,
   AnyComponent,
-  Component,
-  StyleProps,
   ClassValue,
-  StyleValue,
-  StyleClassValue,
-  VariantValues,
+  Component,
+  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,
@@ -33,9 +32,6 @@ import {
   styleValueToJSXStyle,
 } from "./utils.ts";
 
-const MODES = ["jsx", "html", "htmlObj"] as const;
-type Mode = (typeof MODES)[number];
-
 export type { ClassValue, StyleValue, StyleClassValue };
 
 export type VariantProps<T extends Pick<AnyComponent, "getVariants">> =
@@ -124,7 +120,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);
       }
     }
@@ -329,6 +325,7 @@ function processVariants(
 function processComputed(
   config: CVConfig<Variants, ComputedVariants, AnyComponent[]>,
   resolvedVariants: Record<string, unknown>,
+  propsVariants: Record<string, unknown>,
 ): {
   classes: ClassValue[];
   style: StyleValue;
@@ -347,9 +344,9 @@ function processComputed(
       setDefaultVariants: (
         newDefaults: VariantValues<Record<string, unknown>>,
       ) => {
-        // Only apply defaults for variants not already set
+        // Only apply defaults for variants not explicitly set in props
         for (const [key, value] of Object.entries(newDefaults)) {
-          if (resolvedVariants[key] === undefined) {
+          if (propsVariants[key] === undefined) {
             updatedVariants[key] = value;
           }
         }
@@ -367,46 +364,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
@@ -426,20 +444,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
@@ -457,6 +488,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
@@ -464,8 +498,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 = ((
@@ -477,13 +513,15 @@ export const splitProps: SplitPropsFunction = ((
   const normalizedSources = sources.map(normalizeKeySource);
   return splitPropsImpl(
     normalizedSource1.keys,
+    normalizedSource1.variantKeys,
     normalizedSource1.defaults,
+    normalizedSource1.isComponent,
     props,
     normalizedSources,
   );
 }) as SplitPropsFunction;
 
-export function create<M extends Mode>({
+export function create<M extends Mode = "jsx">({
   defaultMode = "jsx" as M,
   transformClass = (className) => className,
 }: CreateParams<M> = {}) {
@@ -502,9 +540,6 @@ export function create<M extends Mode>({
       config as CVConfig<Variants, ComputedVariants, AnyComponent[]>,
     );
 
-    const getClassPropertyName = (mode: Mode) =>
-      mode === "jsx" ? "className" : "class";
-
     const getPropsKeys = (mode: Mode) => [
       getClassPropertyName(mode),
       "style",
@@ -535,6 +570,7 @@ export function create<M extends Mode>({
       const computedResult = processComputed(
         config as CVConfig<Variants, ComputedVariants, AnyComponent[]>,
         resolvedVariants,
+        variantProps,
       );
       resolvedVariants = computedResult.updatedVariants;
 
@@ -642,17 +678,9 @@ export function create<M extends Mode>({
 
       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[] = [];

package/src/test-react.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties, ComponentProps } from "react";
+import { expect, expectTypeOf, test } from "vitest";
+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" } } });
+
+  interface Props
+    extends ComponentProps<"div">, VariantProps<typeof component> {}
+  const props: Props = { className: "custom", size: "md", id: "my-div" };
+
+  const [variantProps, rest] = splitProps(props, component);
+  expectTypeOf(variantProps.style).toEqualTypeOf<CSSProperties | undefined>();
+  expectTypeOf(variantProps.className).toEqualTypeOf<string | undefined>();
+  expect(variantProps.className).toBe("custom");
+  expect(variantProps).toEqual({ size: "md", className: "custom" });
+  expect(
+    // @ts-expect-error rest props should not have className
+    rest.className,
+  ).toBeUndefined();
+  expect(
+    // @ts-expect-error rest props should not have style
+    rest.style,
+  ).toBeUndefined();
+  expect(rest).toEqual({ id: "my-div" });
+});
+
+test("component props", () => {
+  const component = cv({
+    style: { fontSize: "16px" },
+    variants: { size: { sm: "sm", md: "md" } },
+  });
+  const props = component({ size: "sm", className: "custom" });
+  expectTypeOf(props).toEqualTypeOf<JSXProps>();
+  expect(props).toEqual({
+    className: "sm custom",
+    style: { fontSize: "16px" },
+  });
+});

package/src/test-solid.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps, JSX } from "solid-js";
+import { expect, expectTypeOf, test } from "vitest";
+import { type VariantProps, create, splitProps } from "./index.ts";
+import { type HTMLObjProps } from "./types.ts";
+
+const { cv } = create({ defaultMode: "htmlObj" });
+
+test("splitProps", () => {
+  const component = cv({ variants: { size: { sm: "sm", md: "md" } } });
+
+  interface Props
+    extends ComponentProps<"div">, VariantProps<typeof component> {}
+  const props: Props = { class: "custom", size: "md", id: "my-div" };
+
+  const [variantProps, rest] = splitProps(props, component);
+  expectTypeOf(variantProps.style).toEqualTypeOf<
+    string | JSX.CSSProperties | undefined
+  >();
+  expectTypeOf(variantProps.class).toEqualTypeOf<string | undefined>();
+  expect(variantProps.class).toBe("custom");
+  expect(variantProps).toEqual({ size: "md", class: "custom" });
+  expect(rest).toEqual({ id: "my-div" });
+});
+
+test("component props", () => {
+  const component = cv({
+    style: { fontSize: "16px" },
+    variants: { size: { sm: "sm", md: "md" } },
+  });
+  const props = component({ size: "sm", className: "custom" });
+  expectTypeOf(props).toEqualTypeOf<HTMLObjProps>();
+  expect(props).toEqual({
+    class: "sm custom",
+    style: { "font-size": "16px" },
+  });
+});