feat(CheckboxGroup): add table variant (#3997)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/theme/checkbox-group.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative',
     fieldset: 'flex gap-x-2',
@@ -14,6 +16,17 @@ export default {
         fieldset: 'flex-col'
       }
     },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {}])),
+      neutral: {}
+    },
+    variant: {
+      list: {},
+      card: {},
+      table: {
+        item: 'border border-muted'
+      }
+    },
     size: {
       xs: {
         fieldset: 'gap-y-0.5',
@@ -42,7 +55,53 @@ export default {
       }
     }
   },
+  compoundVariants: [
+    { size: 'xs', variant: 'table', class: { item: 'p-2.5' } },
+    { size: 'sm', variant: 'table', class: { item: 'p-3' } },
+    { size: 'md', variant: 'table', class: { item: 'p-3.5' } },
+    { size: 'lg', variant: 'table', class: { item: 'p-4' } },
+    { size: 'xl', variant: 'table', class: { item: 'p-4.5' } },
+    {
+      orientation: 'horizontal',
+      variant: 'table',
+      class: {
+        item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
+        fieldset: 'gap-0 -space-x-px'
+      }
+    },
+    {
+      orientation: 'vertical',
+      variant: 'table',
+      class: {
+        item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
+        fieldset: 'gap-0 -space-y-px'
+      }
+    },
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: 'table',
+      class: {
+        item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]`
+      }
+    })),
+    {
+      color: 'neutral',
+      variant: 'table',
+      class: {
+        item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
+      }
+    },
+    {
+      variant: 'table',
+      disabled: true,
+      class: {
+        item: 'cursor-not-allowed opacity-75'
+      }
+    }
+  ],
   defaultVariants: {
-    size: 'md'
+    size: 'md',
+    variant: 'list',
+    color: 'primary'
   }
-}
+})