feat(Checkbox): new component (#67)

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

src/theme/avatar.ts

@@ -8,40 +8,31 @@ export default {
   variants: {
     size: {
       '3xs': {
-        root: 'size-4 text-[8px]',
-        icon: 'size-2'
+        root: 'size-4 text-[8px]'
       },
       '2xs': {
-        root: 'size-5 text-[10px]',
-        icon: 'size-2.5'
+        root: 'size-5 text-[10px]'
       },
       xs: {
-        root: 'size-6 text-xs',
-        icon: 'size-3'
+        root: 'size-6 text-xs'
       },
       sm: {
-        root: 'size-7 text-sm',
-        icon: 'size-3.5'
+        root: 'size-7 text-sm'
       },
       md: {
-        root: 'size-8 text-base',
-        icon: 'size-4'
+        root: 'size-8 text-base'
       },
       lg: {
-        root: 'size-9 text-lg',
-        icon: 'size-4.5'
+        root: 'size-9 text-lg'
       },
       xl: {
-        root: 'size-10 text-xl',
-        icon: 'size-5'
+        root: 'size-10 text-xl'
       },
       '2xl': {
-        root: 'size-11 text-[22px]',
-        icon: 'size-5.5'
+        root: 'size-11 text-[22px]'
       },
       '3xl': {
-        root: 'size-12 text-2xl',
-        icon: 'size-6'
+        root: 'size-12 text-2xl'
       }
     }
   },

src/theme/checkbox.ts

@@ -0,0 +1,79 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'relative flex items-start',
+    base: 'shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+    container: 'flex items-center',
+    wrapper: 'ms-2',
+    indicator: 'flex',
+    icon: 'size-full',
+    label: 'font-medium text-gray-700 dark:text-gray-200',
+    description: 'text-gray-500 dark:text-gray-400'
+  },
+  variants: {
+    color: Object.fromEntries(config.colors.map((color: string) => [color, `focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`])),
+    size: {
+      '2xs': {
+        base: 'size-3',
+        container: 'h-4',
+        wrapper: 'text-xs'
+      },
+      xs: {
+        base: 'size-3.5',
+        container: 'h-4',
+        wrapper: 'text-xs'
+      },
+      sm: {
+        base: 'size-4',
+        container: 'h-5',
+        wrapper: 'text-sm'
+      },
+      md: {
+        base: 'size-[18px]',
+        container: 'h-5',
+        wrapper: 'text-sm'
+      },
+      lg: {
+        base: 'size-5',
+        container: 'h-6',
+        wrapper: 'text-base'
+      },
+      xl: {
+        base: 'size-[22px]',
+        container: 'h-6',
+        wrapper: 'text-base'
+      }
+    },
+    required: {
+      true: {
+        label: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+      }
+    },
+    disabled: {
+      true: {
+        base: 'cursor-not-allowed opacity-75',
+        label: 'cursor-not-allowed opacity-75',
+        description: 'cursor-not-allowed opacity-75'
+      }
+    },
+    checked: {
+      true: ''
+    },
+    indeterminate: {
+      true: ''
+    }
+  },
+  compoundVariants: config.colors.flatMap((color) => ([{
+    color,
+    checked: true,
+    class: `ring-2 ring-inset ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
+  }, {
+    color,
+    indeterminate: true,
+    class: `ring-2 ring-inset ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
+  }
+  ])),
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary'
+  }
+})

src/theme/formField.ts

@@ -16,7 +16,7 @@ export default {
       xs: { root: 'text-xs' },
       sm: { root: 'text-sm' },
       md: { root: 'text-sm' },
-      lg: { root: 'text-sm' },
+      lg: { root: 'text-base' },
       xl: { root: 'text-base' }
     },
     required: {

src/theme/icons.ts

@@ -1,10 +1,11 @@
 export default {
+  chevronDown: 'i-heroicons-chevron-down-20-solid',
+  chevronLeft: 'i-heroicons-chevron-left-20-solid',
+  chevronRight: 'i-heroicons-chevron-right-20-solid',
   check: 'i-heroicons-check-20-solid',
   close: 'i-heroicons-x-mark-20-solid',
   empty: 'i-heroicons-circle-stack-20-solid',
   loading: 'i-heroicons-arrow-path-20-solid',
-  search: 'i-heroicons-magnifying-glass-20-solid',
-  chevronDown: 'i-heroicons-chevron-down-20-solid',
-  chevronLeft: 'i-heroicons-chevron-left-20-solid',
-  chevronRight: 'i-heroicons-chevron-right-20-solid'
+  minus: 'i-heroicons-minus-20-solid',
+  search: 'i-heroicons-magnifying-glass-20-solid'
 }

src/theme/index.ts

@@ -3,6 +3,7 @@ export { default as avatar } from './avatar'
 export { default as badge } from './badge'
 export { default as button } from './button'
 export { default as card } from './card'
+export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'

src/theme/switch.ts

@@ -10,10 +10,15 @@ export default (config: { colors: string[] }) => ({
       icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
     }])),
     size: {
+      '2xs': {
+        root: 'h-3 w-5',
+        thumb: 'size-2 data-[state=checked]:translate-x-2',
+        icon: 'size-1'
+      },
       xs: {
         root: 'h-4 w-7',
         thumb: 'size-3 data-[state=checked]:translate-x-3',
-        icon: 'size-2.5'
+        icon: 'size-2'
       },
       sm: {
         root: 'h-5 w-9',
@@ -26,9 +31,14 @@ export default (config: { colors: string[] }) => ({
         icon: 'size-4'
       },
       lg: {
-        root: 'h-7 w-[3.25rem]',
+        root: 'h-7 w-[52px]',
         thumb: 'size-6 data-[state=checked]:translate-x-6',
         icon: 'size-5'
+      },
+      xl: {
+        root: 'h-8 w-[60px]',
+        thumb: 'size-7 data-[state=checked]:translate-x-7',
+        icon: 'size-6'
       }
     },
     checked: {