fix(react): allow additional defaultVariant string type

Allows any string KV pair in defaultVariants fixes: #144
sannajammeh · Jan 27, 2024 · 77d09d4 · 77d09d4
1 parent 11b2b77
commit 77d09d4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/packages/react/src/types.ts b/packages/react/src/types.ts
@@ -127,8 +127,10 @@ export interface ClassedFunctionType {
                   [Name in keyof Composers[K]["variants"]]?: Util.Widen<
                     keyof Composers[K]["variants"][Name]
                   >;
-                }
-              : {};
+                } & { [key: string]: string }
+              : {
+                  [key: string]: string;
+                };
 
             compoundVariants?: (("variants" extends keyof Composers[K]
               ? {
@@ -187,8 +189,8 @@ export interface ClassedProxyFunctionType<
                   [Name in keyof Composers[K]["variants"]]?: Util.Widen<
                     keyof Composers[K]["variants"][Name]
                   >;
-                }
-              : {};
+                } & { [key: string]: string }
+              : { [key: string]: string };
 
             compoundVariants?: (("variants" extends keyof Composers[K]
               ? {

diff --git a/packages/react/test/types.spec.tsx b/packages/react/test/types.spec.tsx
@@ -23,6 +23,39 @@ test("It Should create a JSX Element", () => {
   expectTypeOf(button).toMatchTypeOf<JSX.Element>();
 });
 
+test("It should allow for typings of composed variants", () => {
+  const Button = classed("button", {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "...",
+        sm: "...",
+      },
+      variant: {
+        default: "...",
+        ghost: "...",
+      },
+    },
+  });
+
+  const Toggle = classed("div", Button, {
+    defaultVariants: {
+      size: "sm", // <-- ERROR HERE, see below
+      variant: "ghost",
+    },
+    variants: {
+      variant: {
+        // additional Toggle styles to be merged with Button styles
+        default: "...",
+        ghost: "...",
+      },
+    },
+  });
+});
+
 test("DerivedComponentType -> Should successfully infer the type of the component", () => {
   const InnerButton = classed("button", {
     variants: {