feat(CheckboxGroup): new component (#3862)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>

src/theme/checkbox-group.ts

@@ -0,0 +1,47 @@
+export default {
+  slots: {
+    root: 'relative',
+    fieldset: 'flex gap-x-2',
+    legend: 'mb-1 block font-medium text-default'
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        fieldset: 'flex-row'
+      },
+      vertical: {
+        fieldset: 'flex-col'
+      }
+    },
+    size: {
+      xs: {
+        fieldset: 'gap-y-0.5',
+        legend: 'text-xs'
+      },
+      sm: {
+        fieldset: 'gap-y-0.5',
+        legend: 'text-xs'
+      },
+      md: {
+        fieldset: 'gap-y-1',
+        legend: 'text-sm'
+      },
+      lg: {
+        fieldset: 'gap-y-1',
+        legend: 'text-sm'
+      },
+      xl: {
+        fieldset: 'gap-y-1.5',
+        legend: 'text-base'
+      }
+    },
+    required: {
+      true: {
+        legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+}

src/theme/checkbox.ts

@@ -3,17 +3,46 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-start',
-    base: 'shrink-0 flex items-center justify-center rounded-sm text-inverted ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2',
     container: 'flex items-center',
-    wrapper: 'ms-2',
+    base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
+    indicator: 'flex items-center justify-center size-full text-inverted',
     icon: 'shrink-0 size-full',
+    wrapper: 'w-full',
     label: 'block font-medium text-default',
     description: 'text-muted'
   },
   variants: {
     color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-${color}`])),
-      neutral: 'focus-visible:outline-inverted'
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+        base: `focus-visible:outline-${color}`,
+        indicator: `bg-${color}`
+      }])),
+      neutral: {
+        base: 'focus-visible:outline-inverted',
+        indicator: 'bg-inverted'
+      }
+    },
+    variant: {
+      list: {
+        root: ''
+      },
+      card: {
+        root: 'border border-muted rounded-lg'
+      }
+    },
+    indicator: {
+      start: {
+        root: 'flex-row',
+        wrapper: 'ms-2'
+      },
+      end: {
+        root: 'flex-row-reverse',
+        wrapper: 'me-2'
+      },
+      hidden: {
+        base: 'sr-only',
+        wrapper: 'text-center'
+      }
     },
     size: {
       xs: {
@@ -58,17 +87,38 @@ export default (options: Required<ModuleOptions>) => ({
       true: ''
     }
   },
-  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
-    color,
-    checked: true,
-    class: `ring-2 ring-${color} bg-${color}`
-  })), {
-    color: 'neutral',
-    checked: true,
-    class: 'ring-2 ring-inverted bg-inverted'
-  }],
+  compoundVariants: [
+    { size: 'xs', variant: 'card', class: { root: 'p-2.5' } },
+    { size: 'sm', variant: 'card', class: { root: 'p-3' } },
+    { size: 'md', variant: 'card', class: { root: 'p-3.5' } },
+    { size: 'lg', variant: 'card', class: { root: 'p-4' } },
+    { size: 'xl', variant: 'card', class: { root: 'p-4.5' } },
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: 'card',
+      class: {
+        root: `has-data-[state=checked]:border-${color}`
+      }
+    })),
+    {
+      color: 'neutral',
+      variant: 'card',
+      class: {
+        root: 'has-data-[state=checked]:border-inverted'
+      }
+    },
+    {
+      variant: 'card',
+      disabled: true,
+      class: {
+        root: 'cursor-not-allowed opacity-75'
+      }
+    }
+  ],
   defaultVariants: {
     size: 'md',
-    color: 'primary'
+    color: 'primary',
+    variant: 'list',
+    indicator: 'start'
   }
 })

src/theme/index.ts

@@ -10,6 +10,7 @@ export { default as calendar } from './calendar'
 export { default as card } from './card'
 export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'
+export { default as checkboxGroup } from './checkbox-group'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as colorPicker } from './color-picker'

src/theme/radio-group.ts

@@ -3,12 +3,12 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative',
-    fieldset: 'flex',
+    fieldset: 'flex gap-x-2',
     legend: 'mb-1 block font-medium text-default',
     item: 'flex items-start',
-    base: 'rounded-full ring ring-inset ring-accented focus-visible:outline-2 focus-visible:outline-offset-2',
-    indicator: 'flex items-center justify-center size-full rounded-full after:bg-default after:rounded-full',
     container: 'flex items-center',
+    base: 'rounded-full ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2',
+    indicator: 'flex items-center justify-center size-full after:bg-default after:rounded-full',
     wrapper: 'w-full',
     label: 'block font-medium text-default',
     description: 'text-muted'
@@ -26,9 +26,10 @@ export default (options: Required<ModuleOptions>) => ({
     },
     variant: {
       list: {
+        item: ''
       },
       card: {
-        item: 'items-center border border-muted rounded-lg'
+        item: 'border border-muted rounded-lg'
       },
       table: {
         item: 'border border-muted'
@@ -36,8 +37,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     orientation: {
       horizontal: {
-        fieldset: 'flex-row',
-        wrapper: 'me-2'
+        fieldset: 'flex-row'
       },
       vertical: {
         fieldset: 'flex-col'
@@ -46,11 +46,11 @@ export default (options: Required<ModuleOptions>) => ({
     indicator: {
       start: {
         item: 'flex-row',
-        base: 'me-2'
+        wrapper: 'ms-2'
       },
       end: {
         item: 'flex-row-reverse',
-        base: 'ms-2'
+        wrapper: 'me-2'
       },
       hidden: {
         base: 'sr-only',
@@ -59,7 +59,7 @@ export default (options: Required<ModuleOptions>) => ({
     },
     size: {
       xs: {
-        fieldset: 'gap-0.5',
+        fieldset: 'gap-y-0.5',
         legend: 'text-xs',
         base: 'size-3',
         item: 'text-xs',
@@ -67,7 +67,7 @@ export default (options: Required<ModuleOptions>) => ({
         indicator: 'after:size-1'
       },
       sm: {
-        fieldset: 'gap-0.5',
+        fieldset: 'gap-y-0.5',
         legend: 'text-xs',
         base: 'size-3.5',
         item: 'text-xs',
@@ -75,7 +75,7 @@ export default (options: Required<ModuleOptions>) => ({
         indicator: 'after:size-1'
       },
       md: {
-        fieldset: 'gap-1',
+        fieldset: 'gap-y-1',
         legend: 'text-sm',
         base: 'size-4',
         item: 'text-sm',
@@ -83,7 +83,7 @@ export default (options: Required<ModuleOptions>) => ({
         indicator: 'after:size-1.5'
       },
       lg: {
-        fieldset: 'gap-1',
+        fieldset: 'gap-y-1',
         legend: 'text-sm',
         base: 'size-4.5',
         item: 'text-sm',
@@ -91,7 +91,7 @@ export default (options: Required<ModuleOptions>) => ({
         indicator: 'after:size-1.5'
       },
       xl: {
-        fieldset: 'gap-1.5',
+        fieldset: 'gap-y-1.5',
         legend: 'text-base',
         base: 'size-5',
         item: 'text-base',
@@ -160,6 +160,13 @@ export default (options: Required<ModuleOptions>) => ({
       class: {
         item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
       }
+    },
+    {
+      variant: ['card', 'table'],
+      disabled: true,
+      class: {
+        item: 'cursor-not-allowed opacity-75'
+      }
     }
   ],
   defaultVariants: {