feat(Checkbox): new component (#67)

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

playground/app.vue

@@ -13,6 +13,7 @@ const components = [
   'badge',
   'button',
   'card',
+  'checkbox',
   'chip',
   'collapsible',
   'form',

playground/components/FormNestedExample.vue

@@ -47,8 +47,7 @@ function onError (event: any) {
     </UFormField>
 
     <div>
-      <input id="check" v-model="checked" type="checkbox" name="check" @change="state.nested = {}">
-      <label for="check"> Check me </label>
+      <UCheckbox v-model="checked" name="check" label="Check me" @change="state.nested = {}" />
     </div>
 
     <UForm v-if="checked && state.nested" :state="state.nested" :schema="nestedSchema">

playground/pages/badge.vue

@@ -26,7 +26,7 @@ const sizes = Object.keys(theme.variants.size)
     <div class="flex items-center gap-2">
       <UBadge label="Badge" color="black" />
     </div>
-    <div class="flex items-center gap-2 -ml-[56px]">
+    <div class="flex items-center gap-2 ml-[-56px]">
       <UBadge v-for="size in sizes" :key="size" label="Badge" :size="(size as any)" />
     </div>
   </div>

playground/pages/button.vue

@@ -59,13 +59,13 @@ const sizes = Object.keys(theme.variants.size)
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
     </div>
-    <div class="flex items-center gap-2 -ml-[129px]">
+    <div class="flex items-center gap-2 ml-[-129px]">
       <UButton v-for="size in sizes" :key="size" label="Button" :size="(size as any)" />
     </div>
-    <div class="flex items-center gap-2 -ml-[171px]">
+    <div class="flex items-center gap-2 ml-[-171px]">
       <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="(size as any)" />
     </div>
-    <div class="flex items-center gap-2 -ml-[159px]">
+    <div class="flex items-center gap-2 ml-[-159px]">
       <UButton
         v-for="size in sizes"
         :key="size"
@@ -75,7 +75,7 @@ const sizes = Object.keys(theme.variants.size)
         :size="(size as any)"
       />
     </div>
-    <div class="flex items-center gap-2 -ml-[67px]">
+    <div class="flex items-center gap-2 ml-[-67px]">
       <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="(size as any)" />
     </div>
     <div class="flex items-center gap-2">

playground/pages/checkbox.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import theme from '#build/ui/checkbox'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 ml-[-272px]">
+      <UCheckbox label="Normal" />
+      <UCheckbox label="Checked" :model-value="true" />
+      <UCheckbox label="Indeterminate" indeterminate />
+      <UCheckbox label="Default checked" default-checked />
+      <UCheckbox label="Required" required />
+      <UCheckbox label="Disabled" disabled />
+      <UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
+    </div>
+    <div class="flex items-center gap-4 ml-[-156px]">
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />
+    </div>
+    <div class="flex items-center gap-4">
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="(size as any)" />
+    </div>
+  </div>
+</template>

playground/pages/chip.vue

@@ -29,7 +29,7 @@ const items = [{
       </UChip>
     </div>
 
-    <div class="flex items-center gap-2 -ml-[84px]">
+    <div class="flex items-center gap-2 ml-[-84px]">
       <UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
         <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
       </UChip>

playground/pages/form-field.vue

@@ -13,7 +13,7 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 -ml-[258px]">
+    <div class="flex flex-col gap-4 ml-[-258px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
         <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="john@lennon.com" />
@@ -32,5 +32,18 @@ const feedbacks = [
         <UInput placeholder="john@lennon.com" />
       </UFormField>
     </div>
+
+    <div class="flex items-center gap-4">
+      <UFormField
+        v-for="size in sizes"
+        :key="size"
+        :size="(size as any)"
+        label="Email"
+        description="This is a description"
+        name="email"
+      >
+        <UInput placeholder="john@lennon.com" />
+      </UFormField>
+    </div>
   </div>
 </template>

playground/pages/form.vue

@@ -5,15 +5,17 @@ import type { Form, FormSubmitEvent } from '#ui/types/form'
 type User = {
   email: string
   password: string
+  tos: boolean
 }
 
-const state = ref<User>({ email: '', password: '' })
-const state2 = ref<User>({ email: '', password: '' })
-const state3 = ref<User>({ email: '', password: '' })
+const state = reactive<Partial<User>>({})
+const state2 = reactive<Partial<User>>({})
+const state3 = reactive<Partial<User>>({})
 
 const schema = z.object({
   email: z.string().email(),
-  password: z.string().min(8)
+  password: z.string().min(8),
+  tos: z.literal(true)
 })
 
 const disabledForm = ref<Form<User>>()
@@ -40,6 +42,10 @@ function onSubmit (event: FormSubmitEvent<User>) {
           <UInput v-model="state.password" type="password" />
         </UFormField>
 
+        <UFormField name="tos">
+          <UCheckbox v-model="state.tos" label="I accept the terms and conditions" />
+        </UFormField>
+
         <div>
           <UButton color="gray" type="submit">
             Submit
@@ -95,6 +101,10 @@ function onSubmit (event: FormSubmitEvent<User>) {
           <UInput v-model="state3.password" type="password" />
         </UFormField>
 
+        <UFormField name="tos">
+          <UCheckbox v-model="state3.tos" label="I accept the terms and conditions" />
+        </UFormField>
+
         <div>
           <UButton color="gray" type="submit" :disabled="disabledForm?.disabled">
             Submit

playground/pages/input.vue

@@ -6,7 +6,7 @@ const sizes = Object.keys(theme.variants.size)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 -ml-[258px]">
+    <div class="flex flex-col gap-4 ml-[-120px]">
       <UInput placeholder="Search..." autofocus />
       <UInput placeholder="Search..." color="gray" />
       <UInput placeholder="Search..." color="primary" />

playground/pages/switch.vue

@@ -13,10 +13,10 @@ const checked = ref(false)
     <div>
       <USwitch v-model:checked="checked" disabled />
     </div>
-    <div class="flex items-center gap-2 ml-[-36px]">
+    <div class="flex items-center gap-2 ml-[-64px]">
       <USwitch v-for="size in sizes" :key="size" v-model:checked="checked" :size="(size as any)" />
     </div>
-    <div class="flex items-center gap-2 ml-[-36px]">
+    <div class="flex items-center gap-2 ml-[-64px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
@@ -26,7 +26,7 @@ const checked = ref(false)
         checked-icon="i-heroicons-check-20-solid"
       />
     </div>
-    <div class="flex items-center gap-2 ml-[-36px]">
+    <div class="flex items-center gap-2 ml-[-64px]">
       <USwitch
         v-for="size in sizes"
         :key="size"

playground/pages/tooltip.vue

@@ -4,7 +4,7 @@
       <UAvatar text="T" />
     </UTooltip>
 
-    <div class="flex items-center gap-2 -ml-[20px]">
+    <div class="flex items-center gap-2 ml-[-20px]">
       <UTooltip text="Left" :shortcuts="['⌘', 'L']" :content="{ side: 'left' }" arrow>
         <UAvatar text="L" />
       </UTooltip>

src/runtime/components/Accordion.vue

@@ -4,6 +4,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/accordion'
+import type { IconProps } from '#ui/components/Icon.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { accordion: Partial<typeof theme> } }
 
@@ -11,7 +12,7 @@ const accordion = tv({ extend: tv(theme), ...(appConfig.ui?.accordion || {}) })
 
 export interface AccordionItem {
   slot?: string
-  icon?: string
+  icon?: IconProps['name']
   label?: string
   value?: string
   content?: string

src/runtime/components/Avatar.vue

@@ -4,6 +4,7 @@ import type { AvatarFallbackProps, AvatarRootProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/avatar'
+import type { IconProps } from '#ui/components/Icon.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { avatar: Partial<typeof theme> } }
 
@@ -14,7 +15,7 @@ type AvatarVariants = VariantProps<typeof avatar>
 export interface AvatarProps extends Omit<AvatarRootProps, 'asChild'>, Omit<AvatarFallbackProps, 'as' | 'asChild'> {
   src?: string
   alt?: string
-  icon?: string
+  icon?: IconProps['name']
   text?: string
   size?: AvatarVariants['size']
   class?: any

src/runtime/components/Checkbox.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CheckboxRootProps, CheckboxRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/checkbox'
+import type { IconProps } from '#ui/components/Icon.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { checkbox: Partial<typeof theme> } }
+
+const checkbox = tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })
+
+type CheckboxVariants = VariantProps<typeof checkbox>
+
+export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild'> {
+  id?: string
+  name?: string
+  description?: string
+  label?: string
+  color?: CheckboxVariants['color']
+  size?: CheckboxVariants['size']
+  icon?: IconProps['name']
+  indeterminateIcon?: IconProps['name']
+  indeterminate?: boolean
+  class?: any
+  ui?: Partial<typeof checkbox.slots>
+}
+
+export interface CheckboxEmits extends CheckboxRootEmits {}
+
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CheckboxRoot, CheckboxIndicator, Label, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+import { useId } from '#imports'
+import { useFormField } from '#ui/composables/useFormField'
+import { useAppConfig } from '#app'
+
+const props = defineProps<CheckboxProps>()
+const emits = defineEmits<CheckboxEmits>()
+defineSlots<CheckboxSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'disabled', 'required', 'name'), emits)
+
+const appConfig = useAppConfig()
+const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
+const inputId = _inputId.value ?? useId()
+
+const modelValue = defineModel<boolean | undefined>({
+  default: undefined,
+  set (value) {
+    return value
+  }
+})
+
+const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
+
+const checked = computed({
+  get () {
+    return indeterminate.value ? 'indeterminate' : modelValue.value
+  },
+  set (value) {
+    modelValue.value = value === 'indeterminate' ? undefined : value
+  }
+})
+
+function onChecked () {
+  emitFormChange()
+}
+
+const ui = computed(() => tv({ extend: checkbox, slots: props.ui })({
+  size: size.value,
+  color: color.value,
+  required: props.required,
+  disabled: disabled.value,
+  checked: modelValue.value ?? props.defaultChecked,
+  indeterminate: indeterminate.value
+}))
+</script>
+
+<template>
+  <div :class="ui.root({ class: props.class })">
+    <div :class="ui.container()">
+      <CheckboxRoot
+        :id="inputId"
+        v-model:checked="checked"
+        v-bind="{ ...rootProps, name, disabled }"
+        :class="ui.base()"
+        @update:checked="onChecked"
+      >
+        <CheckboxIndicator :class="ui.indicator()">
+          <UIcon v-if="indeterminate" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon()" />
+          <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon()" />
+        </CheckboxIndicator>
+      </CheckboxRoot>
+    </div>
+
+    <div v-if="(label || $slots.label) || (description || $slots.description)" :class="ui.wrapper()">
+      <Label v-if="label || $slots.label" :for="inputId" :class="ui.label()">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || $slots.description" :class="ui.description()">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>

src/runtime/components/Form.vue

@@ -3,8 +3,8 @@ import { tv } from 'tailwind-variants'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/form'
-import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, FormInjectedOptions, Form, FormErrorWithId } from '../types/form'
+import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '#ui/utils/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, FormInjectedOptions, Form, FormErrorWithId } from '#ui/types/form'
 
 const appConfig = _appConfig as AppConfig & { ui: { form: Partial<typeof theme> } }
 

src/runtime/components/FormField.vue

@@ -37,7 +37,8 @@ export interface FormFieldSlots {
 
 <script lang="ts" setup>
 import { computed, ref, inject, provide, type Ref } from 'vue'
-import type { FormError, FormFieldInjectedOptions } from '../types/form'
+import { Label } from 'radix-vue'
+import type { FormError, FormFieldInjectedOptions } from '#ui/types/form'
 import { useId } from '#imports'
 
 const props = defineProps<FormFieldProps>()
@@ -73,11 +74,11 @@ provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
   <div :class="ui.root({ class: props.class })">
     <div :class="ui.wrapper()">
       <div v-if="label || $slots.label" :class="ui.labelWrapper()">
-        <label :for="inputId" :class="ui.label()">
+        <Label :for="inputId" :class="ui.label()">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
-        </label>
+        </Label>
         <span v-if="hint || $slots.hint" :class="ui.hint()">
           <slot name="hint" :hint="hint">
             {{ hint }}
@@ -95,38 +96,16 @@ provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
     <div :class="label ? ui.container() : ''">
       <slot :error="error" />
 
-      <Transition name="slide-fade" mode="out-in">
-        <p v-if="(typeof error === 'string' && error) || $slots.error" :class="ui.error()">
-          <slot name="error" :error="error">
-            {{ error }}
-          </slot>
-        </p>
-        <p v-else-if="help || $slots.help" :class="ui.help()">
-          <slot name="help" :help="help">
-            {{ help }}
-          </slot>
-        </p>
-      </Transition>
+      <p v-if="(typeof error === 'string' && error) || $slots.error" :class="ui.error()">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </p>
+      <p v-else-if="help || $slots.help" :class="ui.help()">
+        <slot name="help" :help="help">
+          {{ help }}
+        </slot>
+      </p>
     </div>
   </div>
 </template>
-
-<style scoped>
-.slide-fade-enter-active {
-  transition: all 0.15s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.15s ease-out;
-}
-
-.slide-fade-enter-from {
-  transform: translateY(-10px);
-  opacity: 0;
-}
-
-.slide-fade-leave-to {
-  transform: translateY(10px);
-  opacity: 0;
-}
-</style>

src/runtime/components/NavigationMenu.vue

@@ -7,6 +7,7 @@ import theme from '#build/ui/navigationMenu'
 import type { LinkProps } from '#ui/components/Link.vue'
 import type { AvatarProps } from '#ui/components/Avatar.vue'
 import type { BadgeProps } from '#ui/components/Badge.vue'
+import type { IconProps } from '#ui/components/Icon.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { navigationMenu: Partial<typeof theme> } }
 
@@ -14,7 +15,7 @@ const navigationMenu = tv({ extend: tv(theme), ...(appConfig.ui?.navigationMenu
 
 export interface NavigationMenuLink extends LinkProps {
   label: string | number
-  icon?: string
+  icon?: IconProps['name']
   avatar?: AvatarProps
   badge?: string | number | BadgeProps
 }

src/runtime/components/Switch.vue

@@ -4,6 +4,7 @@ import type { SwitchRootProps, SwitchRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/switch'
+import type { IconProps } from '#ui/components/Icon.vue'
 
 const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
 
@@ -15,9 +16,9 @@ export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
   color?: SwitchVariants['color']
   size?: SwitchVariants['size']
   loading?: boolean
-  loadingIcon?: string
-  checkedIcon?: string
-  uncheckedIcon?: string
+  loadingIcon?: IconProps['name']
+  checkedIcon?: IconProps['name']
+  uncheckedIcon?: IconProps['name']
   class?: any
   ui?: Partial<typeof switchTv.slots>
 }

src/runtime/composables/useComponentIcons.ts

@@ -1,14 +1,15 @@
 import { computed } from 'vue'
 import { useAppConfig } from '#app'
+import type { IconProps } from '#ui/components/Icon.vue'
 
 export interface UseComponentIconsProps {
-  icon?: string
+  icon?: IconProps['name']
   leading?: boolean
-  leadingIcon?: string
+  leadingIcon?: IconProps['name']
   trailing?: boolean
-  trailingIcon?: string
+  trailingIcon?: IconProps['name']
   loading?: boolean
-  loadingIcon?: string
+  loadingIcon?: IconProps['name']
 }
 
 export function useComponentIcons (props: UseComponentIconsProps) {

src/runtime/composables/useFormField.ts

@@ -1,6 +1,6 @@
 import { inject, ref, computed } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
-import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '../types/form'
+import type { FormEvent, FormInputEvents, FormFieldInjectedOptions, FormInjectedOptions } from '#ui/types/form'
 
 type Props<T> = {
   id?: string

src/runtime/utils/form.ts

@@ -2,7 +2,7 @@ import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
 import type { ObjectSchemaAsync as ValibotObjectSchema } from 'valibot'
-import type { FormError } from '../types/form'
+import type { FormError } from '#ui/types/form'
 
 export function isYupSchema (schema: any): schema is YupObjectSchema<any> {
   return schema.validate && schema.__isYupSchema__

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: {

test/components/Checkbox.spec.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { UCheckbox } from '#components'
+import type { TypeOf } from 'zod'
+import ComponentRender from '../component-render'
+import { defu } from 'defu'
+
+describe('Checkbox', () => {
+  it.each([
+    ['basic case', {}],
+    ['with label', { props: { label: 'Label' } }],
+    ['with slot', { slots: { default: () => 'Label slot' } }],
+    ['with slot label', { slots: { label: () => 'Label slot' } }],
+    ['with custom id', { props: { id: 'custom-id' } }],
+    ['with custom value', { props: { value: 'custom-value' } }],
+    ['with custom name', { props: { name: 'custom-name' } }],
+    ['with disabled', { props: { disabled: true } }],
+    ['with indeterminate', { props: { indeterminate: true } }],
+    ['with help', { props: { label: 'Label', help: 'Help' } }],
+    ['with required', { props: { label: 'Label', required: true } }],
+    ['with custom color', { props: { label: 'Label', color: 'red' } }],
+    ['with size 2xs', { props: { size: '2xs' as const } }],
+    ['with size xs', { props: { size: 'xs' as const } }],
+    ['with size sm', { props: { size: 'sm' as const } }],
+    ['with size md', { props: { size: 'md' as const } }],
+    ['with size lg', { props: { size: 'lg' as const } }],
+    ['with size xl', { props: { size: 'xl' as const } }]
+    // @ts-ignore
+  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof UCheckbox.props>) => {
+    const html = await ComponentRender(nameOrHtml, defu(options, { props: { id: 42 } }), UCheckbox)
+    expect(html).toMatchSnapshot()
+  })
+})

test/components/Switch.spec.ts

@@ -19,10 +19,12 @@ describe('Switch', () => {
     ['with uncheckedIcon', { props: { checkedIcon: 'i-heroicons-x-mark-20-solid' } }],
     ['with loading', { props: { loading: true } }],
     ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
+    ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
     ['with size sm', { props: { size: 'sm' as const } }],
     ['with size md', { props: { size: 'md' as const } }],
-    ['with size lg', { props: { size: 'lg' as const } }]
+    ['with size lg', { props: { size: 'lg' as const } }],
+    ['with size xl', { props: { size: 'xl' as const } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SwitchProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Switch)
     expect(html).toMatchSnapshot()

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

@@ -4,7 +4,7 @@ exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex it
 
 exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-7 text-sm bg-white dark:bg-gray-900"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
-exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm"><!--v-if--><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-3.5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm"><!--v-if--><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
 
 exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 

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

@@ -0,0 +1,207 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Checkbox > renders basic case correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with custom color correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-red-500 dark:focus-visible:ring-red-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Checkbox > renders with custom id correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="custom-id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with custom name correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with custom value correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with disabled correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with help correctly 1`] = `
+"<div class="relative flex items-start" help="Help">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Checkbox > renders with indeterminate correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded 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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="42" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex"><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10" clip-rule="evenodd"></path></svg></span></button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with label correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Checkbox > renders with required correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
+exports[`Checkbox > renders with size 2xs correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-4"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-3" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with size lg correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-6"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-5" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with size md correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-[18px]" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with size sm correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with size xl correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-6"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-[22px]" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with size xs correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-4"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-3.5" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with slot correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`Checkbox > renders with slot label correctly 1`] = `
+"<div class="relative flex items-start">
+  <div class="flex items-center h-5"><button class="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 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
+      <!---->
+    </button>
+    <!---->
+  </div>
+  <div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label slot</label>
+    <!--v-if-->
+  </div>
+</div>"
+`;

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

@@ -2,34 +2,30 @@
 
 exports[`Form > custom validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
-      </transition-stub>
+      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -37,34 +33,30 @@ exports[`Form > custom validation works > with error 1`] = `
 
 exports[`Form > custom validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -72,34 +64,30 @@ exports[`Form > custom validation works > without error 1`] = `
 
 exports[`Form > joi validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
-      </transition-stub>
+      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -107,34 +95,30 @@ exports[`Form > joi validation works > with error 1`] = `
 
 exports[`Form > joi validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -146,34 +130,30 @@ exports[`Form > renders with default slot correctly 1`] = `"<form id="1" class="
 
 exports[`Form > valibot validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
-      </transition-stub>
+      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -181,34 +161,30 @@ exports[`Form > valibot validation works > with error 1`] = `
 
 exports[`Form > valibot validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -216,34 +192,30 @@ exports[`Form > valibot validation works > without error 1`] = `
 
 exports[`Form > yup validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
-      </transition-stub>
+      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -251,34 +223,30 @@ exports[`Form > yup validation works > with error 1`] = `
 
 exports[`Form > yup validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
 </form>"
@@ -286,34 +254,30 @@ exports[`Form > yup validation works > without error 1`] = `
 
 exports[`Form > zod validation works > with error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
-      </transition-stub>
+      <p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
     </div>
   </div>
 </form>"
@@ -321,34 +285,30 @@ exports[`Form > zod validation works > with error 1`] = `
 
 exports[`Form > zod validation works > without error 1`] = `
 "<form id="42" class="">
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
-  <div data-v-0fd934a4="" class="text-sm">
-    <div data-v-0fd934a4="" class="">
+  <div class="text-sm">
+    <div class="">
       <!--v-if-->
       <!--v-if-->
     </div>
-    <div data-v-0fd934a4="" class="">
+    <div class="">
       <div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
         <!--v-if-->
         <!--v-if-->
       </div>
-      <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-        <!--v-if-->
-      </transition-stub>
+      <!--v-if-->
     </div>
   </div>
 </form>"

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

@@ -1,202 +1,175 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FormField > renders with class correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm relative">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm relative">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with default slot correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">Default slot<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">Default slot
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with description slot correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with error correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Username is already taken</p>
-    </transition-stub>
+  <div class="">
+    <p class="mt-2 text-red-500 dark:text-red-400">Username is already taken</p>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with error slot correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with help correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <p data-v-0fd934a4="" class="mt-2 text-gray-500 dark:text-gray-400">Username must be unique</p>
-    </transition-stub>
+  <div class="">
+    <p class="mt-2 text-gray-500 dark:text-gray-400">Username must be unique</p>
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with help slot correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with hint correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with hint slot correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with label and description correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
-    <div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="0" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
+"<div class="text-sm">
+  <div class="">
+    <div class="flex content-center items-center justify-between"><label for="0" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
       <!--v-if-->
     </div>
-    <p data-v-0fd934a4="" class="text-gray-500 dark:text-gray-400">Enter your username</p>
+    <p class="text-gray-500 dark:text-gray-400">Enter your username</p>
   </div>
-  <div data-v-0fd934a4="" class="mt-1 relative">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="mt-1 relative">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with label slot correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with required correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
-    <div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="2" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
+"<div class="text-sm">
+  <div class="">
+    <div class="flex content-center items-center justify-between"><label for="2" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
       <!--v-if-->
     </div>
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="mt-1 relative">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="mt-1 relative">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with size correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-base">
-  <div data-v-0fd934a4="" class="">
-    <div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="1" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
+"<div class="text-base">
+  <div class="">
+    <div class="flex content-center items-center justify-between"><label for="1" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
       <!--v-if-->
     </div>
-    <p data-v-0fd934a4="" class="text-gray-500 dark:text-gray-400">Enter your username</p>
+    <p class="text-gray-500 dark:text-gray-400">Enter your username</p>
   </div>
-  <div data-v-0fd934a4="" class="mt-1 relative">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="mt-1 relative">
+    <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`FormField > renders with ui correctly 1`] = `
-"<div data-v-0fd934a4="" class="text-sm">
-  <div data-v-0fd934a4="" class="">
+"<div class="text-sm">
+  <div class="">
     <!--v-if-->
     <!--v-if-->
   </div>
-  <div data-v-0fd934a4="" class="">
-    <transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
-      <!--v-if-->
-    </transition-stub>
+  <div class="">
+    <!--v-if-->
   </div>
 </div>"
 `;

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

@@ -60,8 +60,13 @@ exports[`Switch > renders with required correctly 1`] = `
 <!---->"
 `;
 
+exports[`Switch > renders with size 2xs correctly 1`] = `
+"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-3 w-5" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-2 data-[state=checked]:translate-x-2"></span></button>
+<!---->"
+`;
+
 exports[`Switch > renders with size lg correctly 1`] = `
-"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-7 w-[3.25rem]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-6 data-[state=checked]:translate-x-6"></span></button>
+"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-7 w-[52px]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-6 data-[state=checked]:translate-x-6"></span></button>
 <!---->"
 `;
 
@@ -75,6 +80,11 @@ exports[`Switch > renders with size sm correctly 1`] = `
 <!---->"
 `;
 
+exports[`Switch > renders with size xl correctly 1`] = `
+"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-8 w-[60px]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-7 data-[state=checked]:translate-x-7"></span></button>
+<!---->"
+`;
+
 exports[`Switch > renders with size xs correctly 1`] = `
 "<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-4 w-7" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3"></span></button>
 <!---->"