fix(ui): migrate checkbox component from attributify to class names (#689)

packages/ui/src/components/Form/Checkbox/Checkbox.vue

@@ -7,21 +7,25 @@ const modelValue = defineModel<boolean>({ required: true })
 <template>
   <SwitchRoot
     v-model="modelValue"
-    transition="background duration-250 ease-in-out"
-    outline="focus-within:none"
-    flex="~"
-    border="neutral-300 dark:neutral-700 data-[state=checked]:primary-200 data-[state=unchecked]:neutral-300 focus-within:neutral-800"
-    bg="data-[state=checked]:primary-400 data-[state=unchecked]:neutral-300 data-[state=checked]:dark:primary-400/80 dark:data-[state=unchecked]:neutral-800"
-    relative h-7 w="12.5" rounded-full
-    shadow="sm focus-within:shadow-neutral-800 focus-within:[0_0_0_1px] "
+    :class="[
+      'duration-250 ease-in-out',
+      'focus-within:outline-none',
+      'flex',
+      'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
+      'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
+      'relative h-7 w-12.5 rounded-full',
+      'shadow-sm focus-within:shadow-none',
+    ]"
   >
     <SwitchThumb
-      my-auto size-6
-      flex items-center justify-center
-      translate-x="0.5 data-[state=checked]:full"
-      rounded-full bg-white text-xs shadow-xl
-      transition="transform duration-250 ease-in-out"
-      will-change-transform
+      :class="[
+        'my-auto size-6',
+        'flex items-center justify-center',
+        'translate-x-0.5 data-[state=checked]:translate-x-full',
+        'rounded-full bg-white text-xs',
+        'transition-transform duration-250 ease-in-out',
+        'will-change-transform',
+      ]"
     />
   </SwitchRoot>
 </template>