From 78f8740369664793d6524ef264e340b117b82d08 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 18 Jul 2024 18:07:28 +0200
Subject: [PATCH] docs(tabs): update

---
 docs/content/3.components/tabs.md | 109 ++++++++++++++++++++++++++++++
 docs/nuxt.config.ts               |   3 +-
 2 files changed, 111 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md
index f1e83174..4db0dc40 100644
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -11,6 +11,115 @@ links:
 
 ## Usage
 
+Use the `items` prop as an array of objects with the following properties:
+
+- `label?: string`{lang="ts-type"}
+- `icon?: string`{lang="ts-type"}
+- `avatar?: AvatarProps`{lang="ts-type"}
+- `slot?: string`{lang="ts-type"}
+- `content?: string`{lang="ts-type"}
+- `value?: StringOrNumber`{lang="ts-type"}
+- `disabled?: boolean`{lang="ts-type"}
+
+::component-code
+---
+external:
+  - items
+hide:
+  - class
+props:
+  class: 'w-full'
+  items:
+    - label: Tab 1
+      icon: 'i-heroicons-academic-cap'
+      content: 'Content 1'
+    - label: Tab 2
+      icon: 'i-heroicons-user'
+      content: 'Content 2'
+    - label: Tab 3
+      icon: 'i-heroicons-bell'
+      content: 'Content 3'
+---
+::
+
+::tip
+You can use Tabs without content by setting the `content` prop to `false`.
+::
+
+### Style
+
+Use the `color` and `variant` props to change the style of the Tabs.
+
+::component-code
+---
+ignore:
+  - items
+  - content
+external:
+  - items
+hide:
+  - class
+props:
+  color: gray
+  variant: link
+  class: 'w-full'
+  content: false
+  items:
+    - label: Tab 1
+    - label: Tab 2
+    - label: Tab 3
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Tabs.
+
+::component-code
+---
+ignore:
+  - items
+  - content
+external:
+  - items
+hide:
+  - class
+props:
+  size: md
+  class: 'w-full'
+  content: false
+  items:
+    - label: Tab 1
+    - label: Tab 2
+    - label: Tab 3
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Tabs.
+
+::component-code
+---
+ignore:
+  - items
+  - content
+external:
+  - items
+hide:
+  - class
+props:
+  orientation: vertical
+  variant: pill
+  class: 'w-full'
+  content: false
+  items:
+    - label: Tab 1
+    - label: Tab 2
+    - label: Tab 3
+---
+::
+
 ## Examples
 
 ## API
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 9c3331bd..88052a04 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -128,7 +128,8 @@ export default defineNuxtConfig({
         'UInput',
         'UKbd',
         'ULink',
-        'UProgress'
+        'UProgress',
+        'UTabs'
       ].includes(c.pascalName))
 
       globals.forEach(c => c.global = 'sync')