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

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

docs/content/3.components/checkbox-group.md

@@ -199,6 +199,7 @@ items:
   variant:
     - list
     - card
+    - table
 props:
   color: 'primary'
   variant: 'card'
@@ -229,6 +230,7 @@ items:
   variant:
     - list
     - card
+    - table
 props:
   size: 'xl'
   variant: 'list'
@@ -259,6 +261,7 @@ items:
   variant:
     - list
     - card
+    - table
 props:
   orientation: 'horizontal'
   variant: 'list'
@@ -293,6 +296,7 @@ items:
   variant:
     - list
     - card
+    - table
 props:
   indicator: 'end'
   variant: 'card'

playground/app/pages/components/checkbox-group.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import themeCheckbox from '#build/ui/checkbox'
 import theme from '#build/ui/checkbox-group'
 
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
-const variants = Object.keys(themeCheckbox.variants.variant)
+const variants = Object.keys(theme.variants.variant)
 const variant = ref('list' as const)
 
 const literalOptions = [

src/runtime/components/CheckboxGroup.vue

@@ -17,7 +17,7 @@ export type CheckboxGroupItem = {
   [key: string]: any
 } | CheckboxGroupValue
 
-export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'variant' | 'indicator' | 'icon'> {
+export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'indicator' | 'icon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -44,6 +44,10 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupI
    * @defaultValue 'md'
    */
   size?: CheckboxGroup['variants']['size']
+  /**
+   * @defaultValue 'list'
+   */
+  variant?: CheckboxGroup['variants']['variant']
   /**
    * The orientation the checkbox buttons are laid out.
    * @defaultValue 'vertical'
@@ -97,7 +101,9 @@ const id = _id.value ?? useId()
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
   size: size.value,
   required: props.required,
-  orientation: props.orientation
+  orientation: props.orientation,
+  color: props.color,
+  variant: props.variant
 }))
 
 function normalizeItem(item: any) {

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'
   }
-}
+})

test/components/CheckboxGroup.spec.ts

@@ -9,7 +9,7 @@ import type { FormInputEvents } from '~/src/module'
 
 describe('CheckboxGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
-  const variants = Object.keys(themeCheckbox.variants.variant) as any
+  const variants = Object.keys(theme.variants.variant) as any
   const indicators = Object.keys(themeCheckbox.variants.indicator) as any
 
   const items = [

test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap

@@ -357,6 +357,41 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
+"<div tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
+  <fieldset class="flex flex-row gap-0 -space-x-px">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+        <!--v-if-->
+      </div>
+    </label>
+  </fieldset>
+  <!---->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
@@ -711,6 +746,41 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
+"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
+  <fieldset class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+        <!--v-if-->
+      </div>
+    </label>
+  </fieldset>
+  <!---->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
@@ -781,6 +851,41 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
+"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
+  <fieldset class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-full" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:1" class="block font-medium text-default">Option 1</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:2" class="block font-medium text-default">Option 2</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0:3" class="block font-medium text-default">Option 3</p>
+        <!--v-if-->
+      </div>
+    </label>
+  </fieldset>
+  <!---->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with required correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">

test/components/__snapshots__/CheckboxGroup.spec.ts.snap

@@ -357,6 +357,41 @@ exports[`CheckboxGroup > renders with horizontal variant list correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with horizontal variant table correctly 1`] = `
+"<div tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
+  <fieldset class="flex flex-row gap-0 -space-x-px">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-l-lg last-of-type:rounded-r-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="horizontal" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+        <!--v-if-->
+      </div>
+    </label>
+  </fieldset>
+  <!---->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with indicator end correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
@@ -711,6 +746,41 @@ exports[`CheckboxGroup > renders with neutral variant list correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with neutral variant table correctly 1`] = `
+"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
+  <fieldset class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-inverted"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+        <!--v-if-->
+      </div>
+    </label>
+  </fieldset>
+  <!---->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with primary variant card correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">
@@ -781,6 +851,41 @@ exports[`CheckboxGroup > renders with primary variant list correctly 1`] = `
 </div>"
 `;
 
+exports[`CheckboxGroup > renders with primary variant table correctly 1`] = `
+"<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
+  <fieldset class="flex flex-col gap-0 -space-y-px">
+    <!--v-if--><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:1" role="checkbox" type="button" aria-checked="true" aria-required="false" data-state="checked" data-reka-collection-item=""><span data-state="checked" style="pointer-events: none;" class="flex items-center justify-center size-full text-inverted bg-primary"><span class="iconify i-lucide:check shrink-0 size-full" aria-hidden="true"></span></span>
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:1" class="block font-medium text-default">Option 1</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:2" class="block font-medium text-default">Option 2</p>
+        <!--v-if-->
+      </div>
+    </label><label class="relative flex items-start flex-row border border-muted p-3.5 first-of-type:rounded-t-lg last-of-type:rounded-b-lg has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-[1]">
+      <div class="flex items-center h-5"><button tabindex="-1" data-orientation="vertical" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-reka-collection-item="">
+          <!---->
+          <!---->
+        </button></div>
+      <div class="w-full ms-2 text-sm">
+        <p for="v-0-0:3" class="block font-medium text-default">Option 3</p>
+        <!--v-if-->
+      </div>
+    </label>
+  </fieldset>
+  <!---->
+</div>"
+`;
+
 exports[`CheckboxGroup > renders with required correctly 1`] = `
 "<div tabindex="0" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" id="v-0-0" class="relative">
   <fieldset class="flex gap-x-2 flex-col gap-y-1">