feat: added support for boolean definition into variants

Author: coderdiaz

packages/jacaranda/src/index.test.ts

@@ -125,6 +125,82 @@ describe('sva', () => {
       display: 'flex',
     });
   });
+
+  it('should support boolean variants', () => {
+    const { sva } = defineTokens({});
+    const buttonStyles = sva({
+      base: { display: 'flex' },
+      variants: {
+        disabled: {
+          true: { opacity: 0.5 },
+          false: { opacity: 1 }
+        }
+      },
+      defaultVariants: {
+        disabled: false
+      }
+    });
+
+    // Test with explicit true value
+    expect(buttonStyles({ disabled: true })).toEqual({
+      display: 'flex',
+      opacity: 0.5
+    });
+
+    // Test with explicit false value
+    expect(buttonStyles({ disabled: false })).toEqual({
+      display: 'flex',
+      opacity: 1
+    });
+
+    // Test with default value
+    expect(buttonStyles()).toEqual({
+      display: 'flex',
+      opacity: 1
+    });
+  });
+
+  it('should support compound variants with boolean values', () => {
+    const { sva } = defineTokens({});
+    const buttonStyles = sva({
+      base: { display: 'flex' },
+      variants: {
+        disabled: {
+          true: { opacity: 0.5 },
+          false: { opacity: 1 }
+        },
+        size: {
+          sm: { padding: 4 },
+          lg: { padding: 8 },
+        }
+      },
+      compoundVariants: [
+        {
+          variants: { disabled: true, size: 'lg' },
+          style: { fontStyle: 'italic' },
+        },
+      ],
+      defaultVariants: {
+        disabled: false,
+        size: 'sm'
+      }
+    });
+
+    // Test compound variant with boolean true
+    expect(buttonStyles({ disabled: true, size: 'lg' })).toEqual({
+      display: 'flex',
+      opacity: 0.5,
+      padding: 8,
+      fontStyle: 'italic'
+    });
+
+    // Test without triggering compound variant
+    expect(buttonStyles({ disabled: true, size: 'sm' })).toEqual({
+      display: 'flex',
+      opacity: 0.5,
+      padding: 4
+    });
+  });
 });
 
 describe('defineTokens', () => {

packages/jacaranda/src/index.ts

@@ -62,14 +62,14 @@ type VariantOptions<V> = {
 
 type CompoundVariant<V> = {
   variants: Partial<{
-    [P in keyof V]: keyof V[P];
+    [P in keyof V]: keyof V[P] | boolean;
   }>;
   style: StyleObject;
 };
 
 // DefaultVariants type
 type DefaultVariants<V> = Partial<{
-  [P in keyof V]: keyof V[P];
+  [P in keyof V]: keyof V[P] | boolean;
 }>;
 
 // VariantStyleConfig type
@@ -97,7 +97,7 @@ export type VariantProps<Component extends (...args: any) => any> = Omit<
  * Creates a function that generates styles based on variants
  */
 function styles<V extends VariantOptions<V>>(config: VariantStyleConfig<V>) {
-  type VariantProps = { [P in keyof V]: keyof V[P] | (string & {}) };
+  type VariantProps = { [P in keyof V]: keyof V[P] | boolean | (string & {}) };
   type DefaultProps = NonNullable<typeof config.defaultVariants>;
   type Props = OptionalIfHasDefault<VariantProps, DefaultProps>;
 
@@ -117,12 +117,24 @@ function styles<V extends VariantOptions<V>>(config: VariantStyleConfig<V>) {
     for (const [propName, value] of Object.entries(mergedProps) as [keyof V, any][]) {
       const variantGroup = config.variants[propName];
       if (variantGroup) {
-        const variantValue = value || config.defaultVariants?.[propName];
-        if (variantValue && variantGroup[variantValue as keyof typeof variantGroup]) {
-          styles = {
-            ...styles,
-            ...variantGroup[variantValue as keyof typeof variantGroup],
-          };
+        // Handle boolean variants
+        if (typeof value === 'boolean') {
+          const booleanValue = value ? 'true' : 'false';
+          if (variantGroup[booleanValue as keyof typeof variantGroup]) {
+            styles = {
+              ...styles,
+              ...variantGroup[booleanValue as keyof typeof variantGroup],
+            };
+          }
+        } else {
+          // Handle string/enum variants
+          const variantValue = value || config.defaultVariants?.[propName];
+          if (variantValue && variantGroup[variantValue as keyof typeof variantGroup]) {
+            styles = {
+              ...styles,
+              ...variantGroup[variantValue as keyof typeof variantGroup],
+            };
+          }
         }
       }
     }
@@ -132,7 +144,13 @@ function styles<V extends VariantOptions<V>>(config: VariantStyleConfig<V>) {
       for (const compound of config.compoundVariants) {
         if (
           Object.entries(compound.variants).every(
-            ([propName, value]: [string, unknown]) => mergedProps[propName as keyof V] === value,
+            ([propName, value]: [string, unknown]) => {
+              // Handle boolean values in compound variants
+              if (typeof value === 'boolean') {
+                return mergedProps[propName as keyof V] === value;
+              }
+              return mergedProps[propName as keyof V] === value;
+            }
           )
         ) {
           styles = {