docs: improve select options from types (#758)

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

docs/content/2.elements/1.accordion.md

@@ -65,20 +65,24 @@ props:
   color: 'primary'
   variant: 'soft'
   size: 'sm'
-ui:
-  variant:
-    solid: 1
-    outline: 1
-    ghost: 1
-    soft: 1
-    link: 1
-  size:
-    2xs: ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
+options:
+  - name: variant
+    restriction: included
+    values:
+      - solid
+      - outline
+      - ghost
+      - soft 
+      - link
+  - name: size
+    restriction: included
+    values:
+      - 2xs
+      - xs
+      - sm
+      - md
+      - lg
+      - xl
 ---
 ::
 

docs/content/2.elements/2.alert.md

@@ -79,8 +79,11 @@ props:
   icon: 'i-heroicons-command-line'
   color: 'primary'
   variant: 'solid'
-extraColors:
-  - white
+options:
+  - name: color
+    restriction: included
+    values:
+      - white  
 excludedProps:
   - icon
 ---

docs/content/2.elements/3.avatar.md

@@ -41,8 +41,11 @@ props:
   chipText: ''
   chipPosition: 'top-right'
   size : 'sm'
-extraColors:
-  - gray
+options:
+  - name: 'chipColor'
+    restriction: 'included'
+    values:
+      - 'gray' 
 baseProps:
   src: 'https://avatars.githubusercontent.com/u/739984?v=4'
   alt: 'Avatar'
@@ -92,17 +95,6 @@ To stack avatars as a group, use the `AvatarGroup` component.
 props:
   size: 'sm'
   max: 2
-ui:
-  size:
-    '3xs': ''
-    '2xs': ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
-    '2xl': ''
-    '3xl': ''
 code: |
   <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="benjamincanac" />
     <UAvatar src="https://avatars.githubusercontent.com/u/904724?v=4" alt="Atinux" />

docs/content/2.elements/4.badge.md

@@ -52,9 +52,11 @@ Besides all the colors from the `ui.colors` object, you can also use the `white`
 props:
   color: 'white'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
 excludedProps:
   - color
 ---
@@ -69,9 +71,11 @@ Badge
 props:
   color: 'gray'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
 excludedProps:
   - color
 ---
@@ -86,10 +90,11 @@ Badge
 props:
   color: 'black'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    link: 1
+options:
+  - name: variant
+    restriction: only
+    values:
+      - solid
 excludedProps:
   - color
 ---

docs/content/2.elements/5.button.md

@@ -51,10 +51,12 @@ backgroundClass: 'bg-gray-50 dark:bg-gray-800'
 props:
   color: 'white'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    ghost: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost  
 excludedProps:
   - color
 ---
@@ -69,11 +71,13 @@ Button
 props:
   color: 'gray'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    ghost: 1
-    link: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - ghost
+      - link  
 excludedProps:
   - color
 ---
@@ -88,10 +92,12 @@ Button
 props:
   color: 'black'
   variant: 'solid'
-ui:
-  variant:
-    solid: 1
-    link: 1
+options:
+  - name: variant
+    restriction: expected
+    values:
+      - solid
+      - link      
 excludedProps:
   - color
 ---
@@ -284,17 +290,6 @@ To stack buttons as a group, use the `ButtonGroup` component.
 props:
   size: 'sm'
   orientation: 'horizontal'
-ui:
-  size:
-    2xs: ''
-    xs: ''
-    sm: ''
-    md: ''
-    lg: ''
-    xl: ''
-  orientation:
-    horizontal: ''
-    vertical: ''
 code: |
   <UButton label="Action" color="white" />
     <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />