feat(Tabs): handle size prop (#124)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

playground/pages/tabs.vue

@@ -4,10 +4,12 @@ import theme from '#build/ui/tabs'
 const colors = Object.keys(theme.variants.color)
 const variants = Object.keys(theme.variants.variant)
 const orientations = Object.keys(theme.variants.orientation)
+const sizes = Object.keys(theme.variants.size)
 
 const color = ref(theme.defaultVariants.color)
 const variant = ref(theme.defaultVariants.variant)
 const orientation = ref('horizontal' as const)
+const size = ref('md' as const)
 
 const items = [{
   label: 'Tab1',
@@ -33,12 +35,27 @@ const items = [{
       <USelect v-model="color" :items="colors" placeholder="Color" />
       <USelect v-model="variant" :items="variants" placeholder="Variant" />
       <USelect v-model="orientation" :items="orientations" placeholder="Orientation" />
+      <USelect v-model="size" :items="sizes" placeholder="Size" />
     </div>
 
     <div class="flex gap-4">
-      <UTabs :color="color" :variant="variant" :orientation="orientation" :items="[{ label: 'Monthly' }, { label: 'Yearly' }]" :content="false" />
+      <UTabs
+        :color="color"
+        :variant="variant"
+        :orientation="orientation"
+        :size="size"
+        :items="[{ label: 'Monthly' }, { label: 'Yearly' }]"
+        :content="false"
+      />
 
-      <UTabs :color="color" :variant="variant" :orientation="orientation" :items="items" class="w-96">
+      <UTabs
+        :color="color"
+        :variant="variant"
+        :orientation="orientation"
+        :size="size"
+        :items="items"
+        class="w-96"
+      >
         <template #custom="{ item }">
           <span class="text-gray-500 dark:text-gray-400">Custom: {{ item.content }}</span>
         </template>