style(ui): Field* components got fine-grant template slots now

packages/ui/src/components/Form/Field/FieldCheckbox.vue

@@ -14,10 +14,14 @@ const modelValue = defineModel<boolean>({ required: true })
     <div flex="~ row" items-center gap-2>
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <Checkbox v-model="modelValue" />

packages/ui/src/components/Form/Field/FieldInput.vue

@@ -21,11 +21,15 @@ const modelValue = defineModel<string>({ required: true })
     <label flex="~ col gap-4">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <Input

packages/ui/src/components/Form/Field/FieldKeyValues.vue

@@ -32,11 +32,15 @@ watch([inputKey, inputValue], () => {
     <label flex="~ col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <div v-auto-animate flex="~ col gap-2">

packages/ui/src/components/Form/Field/FieldRange.vue

@@ -1,27 +1,34 @@
 <script setup lang="ts">
 import Range from '../Range/Range.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   min?: number
   max?: number
   step?: number
   label?: string
   description?: string
   formatValue?: (value: number) => string
-}>()
+  as?: 'label' | 'div'
+}>(), {
+  as: 'label',
+})
 
 const modelValue = defineModel<number>({ required: true })
 </script>
 
 <template>
-  <label flex="~ col gap-4">
+  <props.as flex="~ col gap-4">
     <div flex="~ row" items-center gap-2>
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ label }}
+          <slot name="label">
+            {{ label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ description }}
+          <slot name="description">
+            {{ description }}
+          </slot>
         </div>
       </div>
       <span font-mono>{{ props.formatValue?.(modelValue) || modelValue }}</span>
@@ -35,5 +42,5 @@ const modelValue = defineModel<number>({ required: true })
         w-full
       />
     </div>
-  </label>
+  </props.as>
 </template>

packages/ui/src/components/Form/Field/FieldSelect.vue

@@ -22,10 +22,14 @@ const modelValue = defineModel<string>({ required: false })
     >
       <div flex="1">
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
         </div>
         <div class="text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>
       <slot>

packages/ui/src/components/Form/Field/FieldValues.vue

@@ -33,11 +33,15 @@ function removeItem(index: number) {
     <label class="flex flex-col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
-          {{ props.label }}
+          <slot name="label">
+            {{ props.label }}
+          </slot>
           <span v-if="props.required !== false" class="text-red-500">*</span>
         </div>
         <div class="text-nowrap text-xs text-neutral-500 dark:text-neutral-400">
-          {{ props.description }}
+          <slot name="description">
+            {{ props.description }}
+          </slot>
         </div>
       </div>