playground: simplify with theme

playground/pages/avatar.vue

@@ -1,48 +1,22 @@
+<script setup lang="ts">
+import theme from '#build/ui/avatar'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center gap-1.5">
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xs" />
+      <UAvatar v-for="size in sizes" :key="size" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" :size="(size as any)" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xs" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xs" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="sm" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="md" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="lg" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="xl" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="2xl" />
-      <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" size="3xl" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar icon="i-heroicons-photo" size="3xs" />
+      <UAvatar v-for="size in sizes" :key="size" icon="i-heroicons-photo" :size="(size as any)" />
-      <UAvatar icon="i-heroicons-photo" size="2xs" />
-      <UAvatar icon="i-heroicons-photo" size="xs" />
-      <UAvatar icon="i-heroicons-photo" size="sm" />
-      <UAvatar icon="i-heroicons-photo" size="md" />
-      <UAvatar icon="i-heroicons-photo" size="lg" />
-      <UAvatar icon="i-heroicons-photo" size="xl" />
-      <UAvatar icon="i-heroicons-photo" size="2xl" />
-      <UAvatar icon="i-heroicons-photo" size="3xl" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar alt="Benjamin Canac" size="3xs" />
+      <UAvatar v-for="size in sizes" :key="size" alt="Benjamin Canac" :size="(size as any)" />
-      <UAvatar alt="Benjamin Canac" size="2xs" />
-      <UAvatar alt="Benjamin Canac" size="xs" />
-      <UAvatar alt="Benjamin Canac" size="sm" />
-      <UAvatar alt="Benjamin Canac" size="md" />
-      <UAvatar alt="Benjamin Canac" size="lg" />
-      <UAvatar alt="Benjamin Canac" size="xl" />
-      <UAvatar alt="Benjamin Canac" size="2xl" />
-      <UAvatar alt="Benjamin Canac" size="3xl" />
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatar text="+1" size="3xs" />
+      <UAvatar v-for="size in sizes" :key="size" text="+1" :size="(size as any)" />
-      <UAvatar text="+1" size="2xs" />
-      <UAvatar text="+1" size="xs" />
-      <UAvatar text="+1" size="sm" />
-      <UAvatar text="+1" size="md" />
-      <UAvatar text="+1" size="lg" />
-      <UAvatar text="+1" size="xl" />
-      <UAvatar text="+1" size="2xl" />
-      <UAvatar text="+1" size="3xl" />
     </div>
   </div>
 </template>

playground/pages/badge.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import theme from '#build/ui/badge'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center gap-2">
@@ -21,10 +27,7 @@
       <UBadge label="Badge" color="black" />
     </div>
     <div class="flex items-center gap-2 -ml-[56px]">
-      <UBadge label="Badge" size="xs" />
+      <UBadge v-for="size in sizes" :key="size" label="Badge" :size="(size as any)" />
-      <UBadge label="Badge" size="sm" />
-      <UBadge label="Badge" size="md" />
-      <UBadge label="Badge" size="lg" />
     </div>
   </div>
 </template>

playground/pages/button.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import theme from '#build/ui/button'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center gap-2">
@@ -54,38 +60,26 @@
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
     </div>
     <div class="flex items-center gap-2 -ml-[171px]">
-      <UButton icon="i-heroicons-rocket-launch" label="Button" size="2xs" />
+      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="(size as any)" />
-      <UButton icon="i-heroicons-rocket-launch" label="Button" size="xs" />
-      <UButton icon="i-heroicons-rocket-launch" label="Button" size="sm" />
-      <UButton icon="i-heroicons-rocket-launch" label="Button" size="md" />
-      <UButton icon="i-heroicons-rocket-launch" label="Button" size="lg" />
-      <UButton icon="i-heroicons-rocket-launch" label="Button" size="xl" />
     </div>
     <div class="flex items-center gap-2 -ml-[159px]">
-      <UButton icon="i-heroicons-rocket-launch" label="Square" square size="2xs" />
+      <UButton
-      <UButton icon="i-heroicons-rocket-launch" label="Square" square size="xs" />
+        v-for="size in sizes"
-      <UButton icon="i-heroicons-rocket-launch" label="Square" square size="sm" />
+        :key="size"
-      <UButton icon="i-heroicons-rocket-launch" label="Square" square size="md" />
+        icon="i-heroicons-rocket-launch"
-      <UButton icon="i-heroicons-rocket-launch" label="Square" square size="lg" />
+        label="Square"
-      <UButton icon="i-heroicons-rocket-launch" label="Square" square size="xl" />
+        square
+        :size="(size as any)"
+      />
     </div>
     <div class="flex items-center gap-2 -ml-[67px]">
-      <UButton icon="i-heroicons-rocket-launch" size="2xs" />
+      <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="(size as any)" />
-      <UButton icon="i-heroicons-rocket-launch" size="xs" />
-      <UButton icon="i-heroicons-rocket-launch" size="sm" />
-      <UButton icon="i-heroicons-rocket-launch" size="md" />
-      <UButton icon="i-heroicons-rocket-launch" size="lg" />
-      <UButton icon="i-heroicons-rocket-launch" size="xl" />
     </div>
     <div class="flex items-center gap-2">
       <UButton icon="i-heroicons-rocket-launch" trailing-icon="i-heroicons-chevron-down-20-solid" label="Block" loading block />
     </div>
     <div class="flex items-center gap-2">
-      <UButton icon="i-heroicons-rocket-launch" label="Button" class="group">
+      <UButton icon="i-heroicons-cloud-arrow-down" label="Button" class="group" :ui="{ leadingIcon: 'group-hover:animate-pulse' }" />
-        <template #leading="leadingProps">
-          <UIcon v-if="leadingProps.icon" :name="leadingProps.icon" :class="[leadingProps.class, 'group-hover:text-white']" aria-hidden="true" />
-        </template>
-      </UButton>
     </div>
   </div>
 </template>

playground/pages/chip.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import chip from '#build/ui/chip'
+import theme from '#build/ui/chip'
 
-const sizes = Object.keys(chip.variants.size)
+const sizes = Object.keys(theme.variants.size)
-const positions = Object.keys(chip.variants.position)
+const positions = Object.keys(theme.variants.position)
 
 const items = [{
   name: 'messages',

playground/pages/form-field.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import formField from '#build/ui/formField'
+import theme from '#build/ui/formField'
 
+const sizes = Object.keys(theme.variants.size)
 const feedbacks = [
   { description: 'This is a description' },
   { error: 'This is an error' },
@@ -22,7 +23,7 @@ const feedbacks = [
 
     <div class="flex items-center gap-4">
       <UFormField
-        v-for="size in Object.keys(formField.variants.size)"
+        v-for="size in sizes"
         :key="size"
         :size="(size as any)"
         label="Email"

playground/pages/input.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import input from '#build/ui/input'
+import theme from '#build/ui/input'
+
+const sizes = Object.keys(theme.variants.size)
 </script>
 
 <template>
@@ -20,7 +22,7 @@ import input from '#build/ui/input'
     </div>
     <div class="flex items-center gap-4">
       <UInput
-        v-for="size in Object.keys(input.variants.size)"
+        v-for="size in sizes"
         :key="size"
         icon="i-heroicons-magnifying-glass"
         placeholder="Search..."
@@ -29,7 +31,7 @@ import input from '#build/ui/input'
     </div>
     <div class="flex items-center gap-4">
       <UInput
-        v-for="size in Object.keys(input.variants.size)"
+        v-for="size in sizes"
         :key="size"
         icon="i-heroicons-magnifying-glass"
         trailing