refactor: improvement in the avatar and flex docs

apps/docs/content/components/alert.mdx

@@ -68,7 +68,7 @@ A boolean prop that determines whether the alert shows a close button. If set to
 
 ### Action
 
-Replace the default close button with a custom one.
+The action prop replace the standard close button on our alert with a custom one. This custom button allow us to add extra functionality. For example, we can add an onClick event which will trigger a specific action when clicked. This action can be combined with the default closing behavior of the alert, creating a more versatile and interactive experience
 
 <Playground direction="column" name="alertAction" root="alert" />
 
@@ -80,6 +80,11 @@ Replace the default close button with a custom one.
 
 ### Controlled
 
+A "controlled" alert means that you manage its visibility programmatically using React state. This approach gives you full control over when the alert should appear or disappear, making it ideal for scenarios like:
+
+- **Hiding the alert after a specific duration** (e.g., after 5 seconds).
+- **Closing the alert in response to user interactions** (e.g., after clicking a button or completing an action).
+
 <Playground direction="column" name="alertControlled" root="alert" />
 
 ## Customizing Appearance

apps/docs/content/components/avatar.mdx

@@ -26,7 +26,7 @@ A required title for the alt to make the avatar accessible.
 
 <Playground name="avatarTitle" root="avatar" />
 
-### Image
+### Src
 
 <Playground name="avatarImage" root="avatar" />
 
@@ -55,11 +55,11 @@ A required title for the alt to make the avatar accessible.
 
 <Prop defaultValue="soft" type="'solid'  |  'outline'  |  'soft'  |  'dashed'" />
 
-<Playground name="avatarVariant" root="avatar" />
+<Playground direction="column" name="avatarVariant" root="avatar" />
 
 ### Animate
 
-<Prop type="'zoom' | 'jump-y' | 'jump-x'" />
+<Prop type="'zoom' | 'jump-y'| 'jump--y' | 'jump-x' | 'jump--x' | 'zoom-in'" />
 
 <Playground name="avatarAnimate" root="avatar" />
 
@@ -91,7 +91,7 @@ The `fallback` prop is used to display a fallback if the main image cannot be lo
 
 <Prop defaultValue="zoom" type="'zoom' | 'jump-y' | 'jump-x'" />
 
-<Playground name="avatarGroupAnimation" root="avatar" />
+<Playground direction="column" name="avatarGroupAnimation" root="avatar" />
 
 ### Context Props
 

apps/docs/content/components/code.mdx

@@ -34,7 +34,7 @@ import { Code } from '@pillar-ui/core'
 
 ### Variant
 
-<Prop defaultValue="soft" type="'solid' | 'mixed' | 'outline' | 'soft'" />{' '}
+<Prop defaultValue="soft" type="'shadow' |'solid' | 'mixed' | 'outline' | 'soft'" />{' '}
 
 <Playground direction="column" name="codeVariant" root="code" />
 

apps/docs/content/components/flex.mdx

@@ -42,7 +42,7 @@ import { Flex } from '@pillar-ui/core'
 
 <Prop defaultValue="start" type="'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'" />
 
-<Playground name="flexJustify" root="flex" />
+<Playground direction="column" name="flexJustify" root="flex" />
 
 ### Items
 

apps/docs/content/components/rating.mdx

@@ -20,6 +20,10 @@ import { Rating } from '@pillar-ui/core'
 
 ## Examples
 
+### Title
+
+<Playground direction="column" name="ratingTitle" root="rating" />
+
 ### Rating
 
 <Playground direction="column" name="ratingRating" root="rating" />
@@ -39,7 +43,3 @@ import { Rating } from '@pillar-ui/core'
 ### Icon
 
 <Playground direction="column" name="ratingIcon" root="rating" />
-
-### Title
-
-<Playground direction="column" name="ratingTitle" root="rating" />

apps/docs/content/components/skeleton.mdx

@@ -56,4 +56,4 @@ import { Skeleton } from '@pillar-ui/core'
 
 #### Height
 
-<Playground name="skeletonBoxHeight" root="skeleton" />
+<Playground direction="column" name="skeletonBoxHeight" root="skeleton" />

apps/docs/src/app/_components/playground/alert/alertAction.tsx

@@ -9,7 +9,7 @@ export const AlertAction = () => {
       <Alert
         action={
           <Button variant="mixed" color="d" size="3">
-            Close
+            Collapse
           </Button>
         }
         closable

apps/docs/src/app/_components/playground/avatar/avatarAnimate.tsx

@@ -1,11 +1,19 @@
 import { Avatar } from '@pillar-ui/core'
 
+const shared = {
+  src: 'https://i.pravatar.cc/60?img=13',
+  title: 'Hello',
+}
+
 export const AvatarAnimate = () => {
   return (
     <>
-      <Avatar image="https://i.pravatar.cc/60?img=51" animate="zoom" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/60?img=41" animate="jump-x" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/60?img=31" animate="jump-y" title="Success!" />
+      <Avatar {...shared} animate="zoom" />
+      <Avatar {...shared} animate="jump-x" />
+      <Avatar {...shared} animate="jump-y" />
+      <Avatar {...shared} animate="jump--y" />
+      <Avatar {...shared} animate="jump--x" />
+      <Avatar {...shared} animate="zoom-in" />
     </>
   )
 }

apps/docs/src/app/_components/playground/avatar/avatarCorner.tsx

@@ -1,26 +1,30 @@
 import { Avatar } from '@pillar-ui/core'
 
+const shared = {
+  src: 'https://i.pravatar.cc/120?img=11',
+  title: 'Hello',
+}
 export const AvatarCorner = () => {
   return (
     <>
-      <Avatar image="https://i.pravatar.cc/120?img=11" corner="0" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=12" corner="1" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=18" corner="2" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=19" corner="3" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=20" corner="4" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=21" corner="5" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=22" corner="full" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=23" corner="b1" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=24" corner="b2" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=25" corner="b3" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=26" corner="b4" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=27" corner="b5" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=28" corner="h1" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=29" corner="h2" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=30" corner="h3" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=31" corner="h4" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=32" corner="h5" title="Hello" />
-      <Avatar image="https://i.pravatar.cc/120?img=33" corner="h6" title="Hello" />
+      <Avatar corner="0" {...shared} />
+      <Avatar corner="1" {...shared} />
+      <Avatar corner="2" {...shared} />
+      <Avatar corner="3" {...shared} />
+      <Avatar corner="4" {...shared} />
+      <Avatar corner="5" {...shared} />
+      <Avatar corner="full" {...shared} />
+      <Avatar corner="b1" {...shared} />
+      <Avatar corner="b2" {...shared} />
+      <Avatar corner="b3" {...shared} />
+      <Avatar corner="b4" {...shared} />
+      <Avatar corner="b5" {...shared} />
+      <Avatar corner="h1" {...shared} />
+      <Avatar corner="h2" {...shared} />
+      <Avatar corner="h3" {...shared} />
+      <Avatar corner="h4" {...shared} />
+      <Avatar corner="h5" {...shared} />
+      <Avatar corner="h6" {...shared} />
     </>
   )
 }

apps/docs/src/app/_components/playground/avatar/avatarFallback.tsx

@@ -3,9 +3,9 @@ import { Avatar } from '@pillar-ui/core'
 export const AvatarFallback = () => {
   return (
     <>
-      <Avatar image="https://picsum.photos/id/120/100/100" />
-      <Avatar image="/image/user.png" />
-      <Avatar image="/image/user.svg" />
+      <Avatar src="https://picsum.photos/id/120/100/100" />
+      <Avatar src="/image/user.png" />
+      <Avatar src="/image/user.svg" />
       <Avatar />
     </>
   )

apps/docs/src/app/_components/playground/avatar/avatarGroupAnimation.tsx

@@ -8,16 +8,31 @@ export function AvatarGroupAnimation() {
         <Avatar title="Success!" />
         <Avatar title="Success!" />
       </AvatarGroup>
+      <AvatarGroup animate="jump--y">
+        <Avatar title="Success!" />
+        <Avatar title="Success!" />
+        <Avatar title="Success!" />
+      </AvatarGroup>
       <AvatarGroup animate="jump-x">
         <Avatar title="Success!" />
         <Avatar title="Success!" />
         <Avatar title="Success!" />
       </AvatarGroup>
+      <AvatarGroup animate="jump--x">
+        <Avatar title="Success!" />
+        <Avatar title="Success!" />
+        <Avatar title="Success!" />
+      </AvatarGroup>
       <AvatarGroup animate="zoom">
         <Avatar title="Success!" />
         <Avatar title="Success!" />
         <Avatar title="Success!" />
       </AvatarGroup>
+      <AvatarGroup animate="zoom-in">
+        <Avatar title="Success!" />
+        <Avatar title="Success!" />
+        <Avatar title="Success!" />
+      </AvatarGroup>
     </>
   )
 }

apps/docs/src/app/_components/playground/avatar/avatarGroupLimit.tsx

@@ -2,7 +2,7 @@ import { Avatar, AvatarGroup } from '@pillar-ui/core'
 
 const Avatars = ({ start = 1, count = 8 }: { start?: number; count?: number }) => {
   return Array.from({ length: count }, (_, i) => (
-    <Avatar image={`https://i.pravatar.cc/120?img=${i + start}`} title="Hello" />
+    <Avatar src={`https://i.pravatar.cc/120?img=${i + start}`} title="Hello" />
   ))
 }
 

apps/docs/src/app/_components/playground/avatar/avatarGroupStack.tsx

@@ -2,7 +2,7 @@ import { Avatar, AvatarGroup } from '@pillar-ui/core'
 
 const Avatars = ({ start = 1, count = 8 }: { start?: number; count?: number }) => {
   return Array.from({ length: count }, (_, i) => (
-    <Avatar image={`https://i.pravatar.cc/120?img=${i + start}`} title="Hello" />
+    <Avatar src={`https://i.pravatar.cc/120?img=${i + start}`} title="Hello" />
   ))
 }
 

apps/docs/src/app/_components/playground/avatar/avatarImage.tsx

@@ -3,12 +3,12 @@ import { Avatar } from '@pillar-ui/core'
 export const AvatarImage = () => {
   return (
     <>
-      <Avatar image="https://i.pravatar.cc/120?img=1" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/120?img=2" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/120?img=3" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/120?img=4" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/120?img=5" title="Success!" />
-      <Avatar image="https://i.pravatar.cc/120?img=6" title="Success!" />
+      <Avatar src="https://i.pravatar.cc/120?img=1" title="Success!" />
+      <Avatar src="https://i.pravatar.cc/120?img=2" title="Success!" />
+      <Avatar src="https://i.pravatar.cc/120?img=3" title="Success!" />
+      <Avatar src="https://i.pravatar.cc/120?img=4" title="Success!" />
+      <Avatar src="https://i.pravatar.cc/120?img=5" title="Success!" />
+      <Avatar src="https://i.pravatar.cc/120?img=6" title="Success!" />
     </>
   )
 }

apps/docs/src/app/_components/playground/avatar/avatarSize.tsx

@@ -3,15 +3,15 @@ import { Avatar } from '@pillar-ui/core'
 export const AvatarSize = () => {
   return (
     <>
-      <Avatar image="https://i.pravatar.cc/120?img=11" size="1" />
-      <Avatar image="https://i.pravatar.cc/120?img=12" size="2" />
-      <Avatar image="https://i.pravatar.cc/120?img=13" size="3" />
-      <Avatar image="https://i.pravatar.cc/120?img=13" size="4" />
-      <Avatar image="https://i.pravatar.cc/120?img=14" size="5" />
-      <Avatar image="https://i.pravatar.cc/120?img=15" size="6" />
-      <Avatar image="https://i.pravatar.cc/120?img=16" size="7" />
-      <Avatar image="https://i.pravatar.cc/120?img=17" size="8" />
-      <Avatar image="https://i.pravatar.cc/120?img=18" size="9" />
+      <Avatar src="https://i.pravatar.cc/120?img=11" size="1" />
+      <Avatar src="https://i.pravatar.cc/120?img=12" size="2" />
+      <Avatar src="https://i.pravatar.cc/120?img=13" size="3" />
+      <Avatar src="https://i.pravatar.cc/120?img=13" size="4" />
+      <Avatar src="https://i.pravatar.cc/120?img=14" size="5" />
+      <Avatar src="https://i.pravatar.cc/120?img=15" size="6" />
+      <Avatar src="https://i.pravatar.cc/120?img=16" size="7" />
+      <Avatar src="https://i.pravatar.cc/120?img=17" size="8" />
+      <Avatar src="https://i.pravatar.cc/120?img=18" size="9" />
     </>
   )
 }

apps/docs/src/app/_components/playground/avatar/avatarTitle.tsx

@@ -3,7 +3,7 @@ import { Avatar } from '@pillar-ui/core'
 export const AvatarTitle = () => {
   return (
     <>
-      <Avatar image="https://i.pravatar.cc/60?img=40" title="User X's profile picture" />
+      <Avatar src="https://i.pravatar.cc/60?img=40" title="User X's profile picture" />
     </>
   )
 }

apps/docs/src/app/_components/playground/avatar/avatarVariant.tsx

@@ -1,12 +1,24 @@
-import { Avatar } from '@pillar-ui/core'
+import { Avatar, Flex } from '@pillar-ui/core'
 
+const shared = {
+  src: 'https://i.pravatar.cc/60?img=12',
+  title: 'Hello',
+}
 export const AvatarVariant = () => {
   return (
     <>
-      <Avatar image="https://i.pravatar.cc/60?img=40" variant="solid" />
-      <Avatar image="https://i.pravatar.cc/60?img=41" variant="soft" />
-      <Avatar image="https://i.pravatar.cc/60?img=42" variant="outline" />
-      <Avatar image="https://i.pravatar.cc/60?img=43" variant="dashed" />
+      <Flex gap="2">
+        <Avatar variant="solid" {...shared} />
+        <Avatar variant="soft" {...shared} />
+        <Avatar variant="outline" {...shared} />
+        <Avatar variant="dashed" {...shared} />
+      </Flex>
+      <Flex gap="2">
+        <Avatar variant="solid" {...shared} corner="b2" />
+        <Avatar variant="soft" {...shared} corner="b2" />
+        <Avatar variant="outline" {...shared} corner="b2" />
+        <Avatar variant="dashed" {...shared} corner="b2" />
+      </Flex>
     </>
   )
 }

apps/docs/src/app/_components/playground/code/codeVariant.tsx

@@ -3,6 +3,7 @@ import { Code } from '@pillar-ui/core'
 export const CodeVariant = () => {
   return (
     <>
+      <Code variant="shadow">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code variant="solid">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code variant="mixed">{`console.log('Hello world Every thing is OK')`}</Code>
       <Code variant="soft">{`console.log('Hello world Every thing is OK')`}</Code>

apps/docs/src/app/_components/playground/flex/flexDirection.tsx

@@ -1,16 +1,18 @@
 import { Flex, Paper } from '@pillar-ui/core'
 
 const Box = (props: any) => {
-  return <Paper width="48p" ratio="1" background="B6" corner="2" className="F-c" {...props} />
+  return <Paper width="48p" ratio="1" background="W8" corner="2" className="F-c" {...props} />
 }
 
 const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)
 
 export const FlexDirection = () => {
   return (
     <Paper flow="8">
-      <Flex gap="4">{boxes}</Flex>
-      <Flex gap="4" direction="col">
+      <Flex className="ex-striped" gap="4">
+        {boxes}
+      </Flex>
+      <Flex className="ex-striped" gap="4" direction="col">
         {boxes}
       </Flex>
     </Paper>

apps/docs/src/app/_components/playground/flex/flexJustify.tsx

@@ -2,36 +2,36 @@ import { Flex, Paper, Text } from '@pillar-ui/core'
 
 const Box = ({ children, ...rest }: any) => {
   return (
-    <Paper border p="4" background="B6" corner="2" className="F-c" {...rest}>
+    <Paper border p="4" background="W9" corner="2" className="F-c" {...rest}>
       <Text weight="6">{children}</Text>
     </Paper>
   )
 }
 
 export const FlexJustify = () => {
   return (
-    <Paper width="100" flow="8">
-      <Flex gap="4">
+    <>
+      <Flex className="ex-striped" gap="4">
         <Box>Start</Box>
       </Flex>
-      <Flex gap="4" justify="center">
+      <Flex className="ex-striped" gap="4" justify="center">
         <Box>Center</Box>
       </Flex>
-      <Flex gap="4" justify="end">
+      <Flex className="ex-striped" gap="4" justify="end">
         <Box>End</Box>
       </Flex>
-      <Flex gap="4" justify="between">
+      <Flex className="ex-striped" gap="4" justify="between">
         <Box>Between</Box>
         <Box>Between</Box>
       </Flex>
-      <Flex gap="4" justify="around">
+      <Flex className="ex-striped" gap="4" justify="around">
         <Box>Around</Box>
         <Box>Around</Box>
       </Flex>
-      <Flex gap="4" justify="evenly">
+      <Flex className="ex-striped" gap="4" justify="evenly">
         <Box>Evenly</Box>
         <Box>Evenly</Box>
       </Flex>
-    </Paper>
+    </>
   )
 }