fix: fix the docs issue for the core component

HamzaAmar · Nov 13, 2024 · 6973b2c · 6973b2c
1 parent 1213711
commit 6973b2c
Show file tree

Hide file tree

Showing 57 changed files with 363 additions and 204 deletions.
diff --git a/apps/docs/content/components/accordion.mdx b/apps/docs/content/components/accordion.mdx
@@ -20,12 +20,6 @@ import { Accordion } from '@pillar-ui/core'
 
 ## Examples
 
-### Type
-
-<Prop defaultValue="single" type="'single' | 'multiple'" />
-
-<Playground name="accordionType" root="accordion" />
-
 ### Corner
 
 <Prop defaultValue="single" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
@@ -47,3 +41,9 @@ import { Accordion } from '@pillar-ui/core'
 ### Sizes
 
 <Playground name="accordionSize" root="accordion" />
+
+### Multiple
+
+<Prop defaultValue="false" type="boolean" />
+
+<Playground name="accordionType" root="accordion" />
diff --git a/apps/docs/content/components/alert.mdx b/apps/docs/content/components/alert.mdx
@@ -38,7 +38,7 @@ The Content is not a prop but we use it here to describe all the props related t
 
 ### Size
 
-<Prop type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
+<Prop defaultValue="5" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground direction="column" name="alertSize" root="alert" />
 
@@ -60,16 +60,22 @@ The Content is not a prop but we use it here to describe all the props related t
 
 ### Closable
 
+A boolean prop that determines whether the alert shows a close button. If set to true, the close button will be displayed.
+
 <Prop defaultValue="false" type="boolean'" />
 
 <Playground direction="column" name="alertClosable" root="alert" />
 
 ### Action
 
+Replace the default close button with a custom one.
+
 <Playground direction="column" name="alertAction" root="alert" />
 
 ### Inline
 
+<Prop defaultValue="false" type="boolean'" />
+
 <Playground direction="column" name="alertInline" root="alert" />
 
 ### Controlled

diff --git a/apps/docs/content/components/avatar.mdx b/apps/docs/content/components/avatar.mdx
@@ -24,7 +24,7 @@ import { Avatar } from '@pillar-ui/core'
 
 A required title for the alt to make the avatar accessible.
 
-{/* <Playground name="avatarCorner" root="avatar" /> */}
+<Playground name="avatarTitle" root="avatar" />
 
 ### Image
 
@@ -38,14 +38,14 @@ A required title for the alt to make the avatar accessible.
 
 ### Size
 
-<Prop defaultValue="4" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
+<Prop defaultValue="5" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground name="avatarSize" root="avatar" />
 
 ### Corner
 
 <Prop
-  defaultValue="0"
+  defaultValue="full"
   type="'0' | '1' | '2' | '3' | '4' | '5' | 'full' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'b1' | 'b2' | 'b3' | 'b4' | 'b5'"
 />
 
@@ -87,8 +87,14 @@ The `fallback` prop is used to display a fallback if the main image cannot be lo
 
 <Playground direction="column" name="avatarGroupStack" root="avatar" />
 
+### Group Animate
+
+<Prop defaultValue="zoom" type="'zoom' | 'jump-y' | 'jump-x'" />
+
+<Playground name="avatarGroupAnimation" root="avatar" />
+
 ### Context Props
 
-The Avatar.Group component can be used to group multiple Avatar components together, and set common props such as color, corner, size, and variant for all the avatars in the group, instead of repeating them for each individual Avatar. This can help reduce repetition in your code and make it more efficient.
+The AvatarGroup component can be used to group multiple Avatar components together, and set common props such as color, corner, size, and variant for all the avatars in the group, instead of repeating them for each individual Avatar. This can help reduce repetition in your code and make it more efficient.
 
 <Playground direction="column" name="avatarGroupContext" root="avatar" />
diff --git a/apps/docs/content/components/badge.mdx b/apps/docs/content/components/badge.mdx
@@ -34,7 +34,7 @@ import { Badge } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="full" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="badgeCorner" root="badge" />
 
@@ -56,6 +56,8 @@ import { Badge } from '@pillar-ui/core'
 
 ### ShowZero
 
+By default, badges with a value of zero are hidden. Set the `showZero` prop to `true` to display them.
+
 <Prop defaultValue="false" type="boolean" />
 
 <Playground direction="column" name="badgeShowZero" root="badge" />

diff --git a/apps/docs/content/components/blockquote.mdx b/apps/docs/content/components/blockquote.mdx
@@ -22,7 +22,7 @@ import { Blockquote } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="blockquoteCorner" root="blockquote" />
 
@@ -34,7 +34,7 @@ import { Blockquote } from '@pillar-ui/core'
 
 ### Size
 
-<Prop defaultValue="4" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
+<Prop defaultValue="5" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground direction="column" name="blockquoteSize" root="blockquote" />
 

diff --git a/apps/docs/content/components/button.mdx b/apps/docs/content/components/button.mdx
@@ -34,7 +34,7 @@ import { Button } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="3" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground name="buttonCorner" root="button" />
 
@@ -48,6 +48,12 @@ import { Button } from '@pillar-ui/core'
 
 <Playground name="buttonIcon" root="button" />
 
+### IconPosition
+
+<Prop defaultValue="start" type="'start'  |  'end'" />
+
+<Playground name="buttonIconPosition" root="button" />
+
 ### Fuild
 
 <Prop defaultValue="false" type="boolean" />
@@ -56,4 +62,12 @@ import { Button } from '@pillar-ui/core'
 
 ### State
 
+<Prop defaultValue="idle" type="'idle'  |  'loading'" />
+
 <Playground name="buttonState" root="button" />
+
+### Disabled
+
+<Prop defaultValue="false" type="boolean" />
+
+<Playground name="buttonDisabled" root="button" />
diff --git a/apps/docs/content/components/chips.mdx b/apps/docs/content/components/chips.mdx
@@ -40,6 +40,6 @@ import { Chips } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground name="chipsCorner" root="chips" />
diff --git a/apps/docs/content/components/code.mdx b/apps/docs/content/components/code.mdx
@@ -22,7 +22,7 @@ import { Code } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="codeCorner" root="code" />
 

diff --git a/apps/docs/content/components/flex.mdx b/apps/docs/content/components/flex.mdx
@@ -22,22 +22,32 @@ import { Flex } from '@pillar-ui/core'
 
 ### Gap
 
+<Prop type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
+
 <Playground name="flexGap" root="flex" />
 
 ### Wrap
 
+<Prop defaultValue="false" type="boolean" />
+
 <Playground name="flexWrap" root="flex" />
 
 ### Direction
 
+<Prop defaultValue="row" type="'row' | 'column'" />
+
 <Playground name="flexDirection" root="flex" />
 
 ### Justify
 
+<Prop defaultValue="start" type="'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'" />
+
 <Playground name="flexJustify" root="flex" />
 
 ### Items
 
+<Prop defaultValue="streach" type="'start' | 'end' | 'center' | 'streach'" />
+
 <Playground name="flexItems" root="flex" />
 
 ### Inline

diff --git a/apps/docs/content/components/iconButton.mdx b/apps/docs/content/components/iconButton.mdx
@@ -22,7 +22,7 @@ import { IconButton } from '@pillar-ui/core'
 
 ### Color
 
-<Prop defaultValue="p" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
+<Prop defaultValue="b" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
 
 <Playground name="iconButtonColor" root="iconButton" />
 
@@ -34,7 +34,7 @@ import { IconButton } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground name="iconButtonCorner" root="iconButton" />
 
@@ -47,3 +47,9 @@ import { IconButton } from '@pillar-ui/core'
 ### State
 
 <Playground name="iconButtonState" root="iconButton" />
+
+### Disabled
+
+<Prop defaultValue="false" type="boolean" />
+
+<Playground name="iconButtonDisabled" root="iconButton" />
diff --git a/apps/docs/content/components/input-file.mdx b/apps/docs/content/components/input-file.mdx
@@ -28,7 +28,7 @@ import { InputFile } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="inputFileCorner" root="form/inputFile" />
 

diff --git a/apps/docs/content/components/input-number.mdx b/apps/docs/content/components/input-number.mdx
@@ -28,7 +28,7 @@ import { InputNumber } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="inputNumberCorner" root="form/inputNumber" />
 

diff --git a/apps/docs/content/components/input-password.mdx b/apps/docs/content/components/input-password.mdx
@@ -28,7 +28,7 @@ import { InputPassword } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="inputPasswordCorner" root="form/inputPassword" />
 

diff --git a/apps/docs/content/components/input-pin.mdx b/apps/docs/content/components/input-pin.mdx
@@ -34,7 +34,7 @@ import { PinInput } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="pinInputCorner" root="form/pinInput" />
 

diff --git a/apps/docs/content/components/input-search.mdx b/apps/docs/content/components/input-search.mdx
@@ -28,7 +28,7 @@ import { InputSearch } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="inputSearchCorner" root="form/inputSearch" />
 

diff --git a/apps/docs/content/components/input.mdx b/apps/docs/content/components/input.mdx
@@ -28,7 +28,7 @@ import { Input } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="inputCorner" root="form/input" />
 

diff --git a/apps/docs/content/components/kbd.mdx b/apps/docs/content/components/kbd.mdx
@@ -22,7 +22,7 @@ import { Kdb } from '@pillar-ui/core'
 
 ### Color
 
-<Prop defaultValue="p" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
+<Prop defaultValue="b" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
 
 <Playground name="kbdColor" root="kbd" />
 
@@ -34,12 +34,12 @@ import { Kdb } from '@pillar-ui/core'
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground name="kbdCorner" root="kbd" />
 
 ### Variant
 
-<Prop defaultValue="solid" type="'shadow'  |  'solid'  |  'outline'  |  'soft'  |  'mixed'" />
+<Prop defaultValue="soft" type="'shadow'  |  'solid'  |  'outline'  |  'soft'  |  'mixed'" />
 
 <Playground name="kbdVariant" root="kbd" />
diff --git a/apps/docs/content/components/pagination.mdx b/apps/docs/content/components/pagination.mdx
@@ -22,19 +22,19 @@ import { Pagination } from '@pillar-ui/core'
 
 ### Color
 
-<Prop defaultValue="p" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
+<Prop defaultValue="b" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
 
 <Playground direction="column" name="paginationColor" root="pagination" />
 
 ### Variant
 
-<Prop defaultValue="solid" type="'shadow'  |  'solid'  |  'outline'  |  'soft'  |  'mixed'" />
+<Prop defaultValue="soft" type="'shadow'  |  'solid'  |  'outline'  |  'soft'  |  'mixed'" />
 
 <Playground direction="column" name="paginationVariant" root="pagination" />
 
 ### Corner
 
-<Prop defaultValue="0" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
+<Prop defaultValue="2" type="'0' | '1' | '2' | '3' | '4' | '5' | 'full'" />
 
 <Playground direction="column" name="paginationCorner" root="pagination" />
 

diff --git a/apps/docs/content/components/radio.mdx b/apps/docs/content/components/radio.mdx
@@ -30,6 +30,12 @@ import { Radio } from '@pillar-ui/core'
 
 <Playground name="radioColor" root="radio" />
 
+### DefaultChecked
+
+<Prop defaultValue="false" type="boolean" />
+
+<Playground name="radioDefaultChecked" root="radio" />
+
 ### Variant
 
 <Prop defaultValue="solid" type="'shadow'  |  'solid'  |  'outline'  |  'soft'  |  'mixed'" />
@@ -42,6 +48,6 @@ import { Radio } from '@pillar-ui/core'
 
 <Playground name="radioSize" root="radio" />
 
-### State
+### Disabled
 
-<Playground name="radioState" root="radio" />
+<Playground name="radioDisabled" root="radio" />
diff --git a/apps/docs/content/components/separator.mdx b/apps/docs/content/components/separator.mdx
@@ -24,15 +24,21 @@ import { Separator } from '@pillar-ui/core'
 
 <Playground name="separatorTitle" root="separator" />
 
+### Position
+
+<Prop defaultValue="start" type="'start' | 'center' | 'end'" />
+
+<Playground name="separatorPosition" root="separator" />
+
 ### Color
 
-<Prop defaultValue="p" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
+<Prop defaultValue="b" type="'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'" />
 
 <Playground name="separatorColor" root="separator" />
 
 ### Thickness
 
-<Prop defaultValue="4" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
+<Prop defaultValue="3" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground name="separatorThickness" root="separator" />