feat: uniformize components sizes (#68)

test/components/FormField.spec.ts

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
 import { describe, it, expect } from 'vitest'
 import FormField, { type FormFieldProps } from '../../src/runtime/components/FormField.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/form-field'
 
 // A wrapper component is needed here because of a conflict with the error prop / expose.
 // See: https://github.com/nuxt/test-utils/issues/684
@@ -13,15 +14,19 @@ const FormFieldWrapper = defineComponent({
 })
 
 describe('FormField', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+
   it.each([
+    // Props
     ['with label and description', { props: { label: 'Username', description: 'Enter your username' } }],
-    ['with size', { props: { label: 'Username', description: 'Enter your username', size: 'xl' as const } }],
     ['with required', { props: { label: 'Username', required: true } }],
     ['with help', { props: { help: 'Username must be unique' } }],
     ['with error', { props: { error: 'Username is already taken' } }],
     ['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
     ['with class', { props: { class: 'relative' } }],
     ['with ui', { props: { ui: { label: 'text-gray-900 dark:text-white' } } }],
+    // Slots
     ['with default slot', { slots: { default: () => 'Default slot' } }],
     ['with label slot', { slots: { label: () => 'Label slot' } }],
     ['with description slot', { slots: { description: () => 'Description slot' } }],