fix(components): move remaining classes to config (#1039)

src/runtime/ui.config/forms/checkbox.ts

@@ -1,15 +1,18 @@
 export default {
   wrapper: 'relative flex items-start',
+  container: 'flex items-center h-5',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  form: 'form-checkbox',
   rounded: 'rounded',
   color: 'text-{color}-500 dark:text-{color}-400',
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  inner: 'ms-3 flex flex-col',
   label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
   required: 'text-sm text-red-500 dark:text-red-400',
   help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }
-}
+}

src/runtime/ui.config/forms/input.ts

@@ -1,6 +1,7 @@
 export default {
   wrapper: 'relative',
   base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+  form: 'form-input',
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
   size: {
@@ -62,6 +63,7 @@ export default {
   icon: {
     base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
     color: 'text-{color}-500 dark:text-{color}-400',
+    loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
@@ -101,4 +103,4 @@ export default {
     variant: 'outline',
     loadingIcon: 'i-heroicons-arrow-path-20-solid'
   }
-}
+}

src/runtime/ui.config/forms/radio.ts

@@ -1,14 +1,17 @@
 export default {
   wrapper: 'relative flex items-start',
+  container: 'flex items-center h-5',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  form: 'form-radio',
   color: 'text-{color}-500 dark:text-{color}-400',
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  inner: 'ms-3 flex flex-col',
   label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
   required: 'text-sm text-red-500 dark:text-red-400',
   help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }
-}
+}

src/runtime/ui.config/forms/select.ts

@@ -2,6 +2,7 @@ import input from './input'
 
 export default {
   ...input,
+  form: 'form-select',
   placeholder: 'text-gray-900 dark:text-white',
   default: {
     size: 'sm',
@@ -10,4 +11,4 @@ export default {
     loadingIcon: 'i-heroicons-arrow-path-20-solid',
     trailingIcon: 'i-heroicons-chevron-down-20-solid'
   }
-}
+}

src/runtime/ui.config/forms/selectMenu.ts

@@ -1,7 +1,9 @@
-import _popperArrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   container: 'z-20 group',
+  trigger: 'inline-flex w-full',
+  select: 'inline-flex items-center text-left cursor-default',
   width: 'w-full',
   height: 'max-h-60',
   base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
@@ -11,6 +13,8 @@ export default {
   padding: 'p-1',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
   input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
+  required: 'absolute inset-0 w-px opacity-0 cursor-default',
+  label: 'block truncate',
   option: {
     base: 'cursor-default select-none relative flex items-center justify-between gap-1',
     rounded: 'rounded-md',
@@ -23,6 +27,7 @@ export default {
     selected: 'pe-7',
     disabled: 'cursor-not-allowed opacity-50',
     empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
+    create: 'block truncate',
     icon: {
       base: 'flex-shrink-0 h-4 w-4',
       active: 'text-gray-900 dark:text-white',
@@ -55,7 +60,7 @@ export default {
     clearOnClose: false
   },
   arrow: {
-    ..._popperArrow,
+    ...arrow,
     ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
     background: 'before:bg-white dark:before:bg-gray-700'
   }

src/runtime/ui.config/forms/textarea.ts

@@ -2,9 +2,10 @@ import input from './input'
 
 export default {
   ...input,
+  form: 'form-textarea',
   default: {
     size: 'sm',
     color: 'white',
     variant: 'outline'
   }
-}
+}