From aca319bc36804daed1b29b2ff123f4b821d6c34c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 26 Jul 2024 15:17:46 +0200
Subject: [PATCH] docs(components): split `color` and `variant` into two
 sections

---
 docs/content/3.components/alert.md    | 25 ++++++++++++++++++++++---
 docs/content/3.components/badge.md    | 19 ++++++++++++++++---
 docs/content/3.components/button.md   | 19 ++++++++++++++++---
 docs/content/3.components/checkbox.md |  4 ++--
 docs/content/3.components/kbd.md      |  4 ++--
 docs/content/3.components/tabs.md     | 26 ++++++++++++++++++++++++--
 6 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/docs/content/3.components/alert.md b/docs/content/3.components/alert.md
index d1fe9075..ee1e22a9 100644
--- a/docs/content/3.components/alert.md
+++ b/docs/content/3.components/alert.md
@@ -64,9 +64,9 @@ props:
 ---
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Alert.
+Use the `color` prop to change the color of the Alert.
 
 ::component-code
 ---
@@ -77,7 +77,26 @@ ignore:
   - icon
 props:
   color: gray
-  variant: outline
+  title: 'Heads up!'
+  description: 'You can change the primary color in your app config.'
+  icon: 'i-heroicons-command-line'
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Alert.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - description
+  - icon
+props:
+  color: gray
+  variant: solid
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
   icon: 'i-heroicons-command-line'
diff --git a/docs/content/3.components/badge.md b/docs/content/3.components/badge.md
index 47fceebb..962f24a0 100644
--- a/docs/content/3.components/badge.md
+++ b/docs/content/3.components/badge.md
@@ -28,15 +28,28 @@ props:
 ---
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Badge.
+Use the `color` prop to change the color of the Badge.
 
 ::component-code
 ---
 props:
   color: gray
-  variant: solid
+slots:
+  default: Badge
+---
+::
+
+### Variant
+
+Use the `variant` props to change the variant of the Badge.
+
+::component-code
+---
+props:
+  color: gray
+  variant: outline
 slots:
   default: Badge
 ---
diff --git a/docs/content/3.components/button.md b/docs/content/3.components/button.md
index 1bb52f2c..a8f92c56 100644
--- a/docs/content/3.components/button.md
+++ b/docs/content/3.components/button.md
@@ -45,15 +45,28 @@ slots:
 ---
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Button.
+Use the `color` prop to change the color of the Button.
 
 ::component-code
 ---
 props:
   color: gray
-  variant: solid
+slots:
+  default: Button
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Button.
+
+::component-code
+---
+props:
+  color: gray
+  variant: outline
 slots:
   default: Button
 ---
diff --git a/docs/content/3.components/checkbox.md b/docs/content/3.components/checkbox.md
index a4abf7c0..fa91bfd4 100644
--- a/docs/content/3.components/checkbox.md
+++ b/docs/content/3.components/checkbox.md
@@ -103,9 +103,9 @@ props:
 You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
 ::
 
-### Style
+### Color
 
-Use the `color` prop to change the style of the Checkbox.
+Use the `color` prop to change the color of the Checkbox.
 
 ::component-code
 ---
diff --git a/docs/content/3.components/kbd.md b/docs/content/3.components/kbd.md
index 334c0051..68504d68 100644
--- a/docs/content/3.components/kbd.md
+++ b/docs/content/3.components/kbd.md
@@ -62,9 +62,9 @@ items:
 ---
 ::
 
-### Style
+### Variant
 
-Use the `variant` prop to change the style of the Kbd.
+Use the `variant` prop to change the variant of the Kbd.
 
 ::component-code
 ---
diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md
index 9b3f030f..9fbc351f 100644
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -97,9 +97,31 @@ props:
 You can inspect the DOM to see that the content of the inactive tab is not rendered.
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Tabs.
+Use the `color` prop to change the color of the Tabs.
+
+::component-code
+---
+ignore:
+  - content
+external:
+  - items
+hide:
+  - class
+props:
+  color: gray
+  class: 'w-full'
+  content: false
+  items:
+    - label: Account
+    - label: Password
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Tabs.
 
 ::component-code
 ---