feat: added support for multiples variants at same time within compound variants

Author: coderdiaz

packages/jacaranda/src/index.test.ts

@@ -204,6 +204,57 @@ describe('sva', () => {
       padding: 4,
     });
   });
+
+  it('should support compound variants with array of values', () => {
+    const { sva } = defineTokens({});
+    const buttonStyles = sva({
+      base: { display: 'flex' },
+      variants: {
+        visual: {
+          solid: { backgroundColor: '#FC8181' },
+          outline: { borderWidth: 1 },
+        },
+        size: {
+          sm: { padding: 4 },
+          md: { padding: 6 },
+          lg: { padding: 8 },
+        },
+      },
+      compoundVariants: [
+        {
+          variants: { visual: 'solid', size: ['md', 'lg'] },
+          style: { fontWeight: 'bold' },
+        },
+      ],
+      defaultVariants: {
+        visual: 'solid',
+        size: 'sm',
+      },
+    });
+
+    // Test compound variant with size md (should match the array)
+    expect(buttonStyles({ visual: 'solid', size: 'md' })).toEqual({
+      display: 'flex',
+      backgroundColor: '#FC8181',
+      padding: 6,
+      fontWeight: 'bold',
+    });
+
+    // Test compound variant with size lg (should match the array)
+    expect(buttonStyles({ visual: 'solid', size: 'lg' })).toEqual({
+      display: 'flex',
+      backgroundColor: '#FC8181',
+      padding: 8,
+      fontWeight: 'bold',
+    });
+
+    // Test without triggering compound variant (size sm not in array)
+    expect(buttonStyles({ visual: 'solid', size: 'sm' })).toEqual({
+      display: 'flex',
+      backgroundColor: '#FC8181',
+      padding: 4,
+    });
+  });
 });
 
 describe('defineTokens', () => {

packages/jacaranda/src/index.ts

@@ -30,7 +30,7 @@
 //   // Optional: Add compound variants for specific combinations
 //   compoundVariants: [
 //     {
-//       variants: { visual: 'solid', size: 'lg' },
+//       variants: { visual: 'solid', size: ['lg'] },
 //       style: { fontWeight: 'bold' },
 //     },
 //   ],
@@ -66,7 +66,7 @@ type BooleanVariantKey = 'true' | 'false';
 
 type CompoundVariant<V> = {
   variants: Partial<{
-    [P in keyof V]: keyof V[P] | boolean;
+    [P in keyof V]: keyof V[P] | boolean | Array<keyof V[P]>;
   }>;
   style: StyleObject;
 };
@@ -152,6 +152,13 @@ function styles<V extends VariantOptions<V>>(config: VariantStyleConfig<V>) {
             if (typeof value === 'boolean') {
               return mergedProps[propName as keyof V] === value;
             }
+
+            // Handle array of values
+            if (Array.isArray(value)) {
+              return value.includes(mergedProps[propName as keyof V]);
+            }
+
+            // Handle single value (string/enum)
             return mergedProps[propName as keyof V] === value;
           })
         ) {