Merge branch 'develop'

HamzaAmar · Jul 1, 2024 · a0ae30d · a0ae30d
2 parents f80d4f0 + ac31b8f
commit a0ae30d
Show file tree

Hide file tree

Showing 598 changed files with 71,823 additions and 32,246 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/apps/docs/content/components/Link.mdx b/apps/docs/content/components/Link.mdx
@@ -1,10 +1,9 @@
 ---
 title: Link
-type: Components
+type: core
 excerpt: The Link component is used for clickable text that navigates the user to another page or resource. It typically displays as underlined text with a distinct color, and can be customized with various props such as color, size, and so on
 items: ['Link']
-file: core
-root: components
+directory: typography/index.tsx
 ---
 
 ## Props
@@ -19,7 +18,7 @@ The size prop controls the size of the text. The following values are valid:
 
 Example:
 
-<LinkPlayGround.Sizes />
+<LinkSizes />
 
 ```tsx showLineNumbers title="Link.tsx"
 <Link size="xs">Some text.</Link>
@@ -36,7 +35,7 @@ The weight prop controls the weight (boldness) of the text. The following values
 
 Example:
 
-<LinkPlayGround.Weight />
+<LinkWeight />
 
 ```tsx showLineNumbers title="Link.tsx"
 <Link weight="thin">Some text.</Link>
@@ -54,7 +53,7 @@ truncate (optional): Determines whether the text should be truncated and how it
 
 Example:
 
-<LinkPlayGround.Trucates />
+<LinkTrucates />
 
 ```tsx showLineNumbers title="Link.tsx"
 export function LinkTrucates() {
@@ -119,7 +118,7 @@ This property specifies the horizontal alignment of the text within the parent e
 
 Example:
 
-<LinkPlayGround.Align />
+<LinkAlign />
 
 ```tsx showLineNumbers title="Link.tsx"
 export function LinkAligns() {
@@ -161,7 +160,7 @@ The color prop sets the color of the text . The available options are: red, brow
 
 Example:
 
-<LinkPlayGround.Colors />
+<LinkColors />
 
 ```tsx showLineNumbers title="Link.tsx"
 export function LinkColors() {
@@ -215,7 +214,7 @@ you can customize the leading (line height) of your text by using the leading pr
 
 Example
 
-<LinkPlayGround.Leading />
+<LinkLeading />
 
 ```tsx showLineNumbers title="Link.tsx"
 <Link leading="normal">
@@ -239,7 +238,7 @@ By using the leading prop, you can easily adjust the line height of your text to
 
 "dir": This prop sets the direction of the text within the component. It accepts the values "rtl" for right-to-left direction or "ltr" for left-to-right direction. This prop is useful when displaying text in languages that are read from right to left, such as Arabic or Hebrew.
 
-<LinkPlayGround.RTL />
+<LinkRTL />
 
 ```tsx showLineNumbers title="Link.tsx"
 export function LinkRTL() {

diff --git a/apps/docs/content/components/accordion.mdx b/apps/docs/content/components/accordion.mdx
@@ -1,10 +1,9 @@
 ---
 title: Accordion
-type: Components
+type: core
 excerpt: The accordion component allows users to expand and collapse content sections, which can be useful for displaying large amounts of information in a compact and organized manner.
-items: ['Accordion', 'Accordion.Button', 'Accordion.Panel', 'Accordion.Item']
-file: core
-root: components
+items: ['Accordion', 'AccordionButton', 'AccordionPanel', 'AccordionItem']
+directory: accordion/index.tsx
 ---
 
 ## Props
@@ -19,7 +18,7 @@ The Accordion component is a reusable component that allows you to create a coll
 
 type: Specifies the type of accordion. It can be either "single" or "multiple". If "single", only one item can be open at a time. If "multiple", multiple items can be open at the same time. By default, the type is "single".
 
-<AccordionPlayGround.Type />
+<AccordionType />
 
 ```tsx showLineNumbers title="Accordion.tsx"
 function AccordionType() {
@@ -88,7 +87,7 @@ The size prop determines the corners of the Accordion. It accepts any of the Siz
 - **Default:** `md`
 - **Options:** `sharp` | `xs` | `sm` | `md` | `lg` | `circle` | `full`
 
-<AccordionPlayGround.Corners />
+<AccordionCorners />
 
 **Example Usage**
 
@@ -146,7 +145,7 @@ The separate prop determines whether to separate the accordion items or not. If
 
 **Example Usage**
 
-<AccordionPlayGround.Separate />
+<AccordionSeparate />
 
 ### Example Usage
 
@@ -203,7 +202,7 @@ The "collapsible" prop specifies whether or not all accordion items can be close
 
 Here's an example of how to use the "collapsible" prop:
 
-<AccordionPlayGround.Collapsible />
+<AccordionCollapsible />
 
 ```tsx showLineNumbers title="Accordion.tsx"
 function AccordionCollapsible() {
@@ -246,7 +245,7 @@ The Accordion component has four variants available: solid, soft, outline, and t
 
 Example usage:
 
-<AccordionPlayGround.Variants />
+<AccordionVariants />
 
 ```tsx showLineNumbers title="Accordion.tsx"
 function AccordionType() {
@@ -337,7 +336,7 @@ The Accordion component supports seven different sizes, ranging from 2xs to 2xl.
 
 Example usage:
 
-<AccordionPlayGround.Sizes />
+<AccordionSizes />
 
 ```tsx showLineNumbers title="Accordion.tsx"
 function AccordionBase(props){

diff --git a/apps/docs/content/components/alert.mdx b/apps/docs/content/components/alert.mdx
@@ -1,10 +1,9 @@
 ---
 title: Alert
-type: Components
+type: core
 excerpt: The Alert component is a versatile component used to display messages to the user. It can be customized with different colors, sizes, corners, variants, and more.
 items: ['Alert']
-file: core
-root: components
+directory: alert/index.tsx
 ---
 
 ## Usage
@@ -43,7 +42,7 @@ The color prop determines the background color of the Alert. It accepts any of t
 
 Example usage:
 
-<AlertPlayGround.Colors />
+<AlertColors />
 
 ```tsx showLineNumbers title="Alert.tsx"
 function AlertColors(){
@@ -69,7 +68,7 @@ The size prop determines the size of the Alert. It accepts any of the Size types
 
 Example usage:
 
-<AlertPlayGround.Sizes />
+<AlertSizes />
 
 ```tsx showLineNumbers title="Alert.tsx"
 function AlerSizes(){
@@ -94,7 +93,7 @@ Type: string
 Default: `solid`
 Options: `solid` | `outline` | `soft` | `mixed`
 
-<AlertPlayGround.Variants />
+<AlertVariants />
 
 ```tsx showLineNumbers title="Alert.tsx"
 export const AlertVariant = () => {
@@ -120,7 +119,7 @@ The corner prop determines the border radius of the Alert. It accepts any of the
 
 Example usage:
 
-<AlertPlayGround.Corners />
+<AlertCorners />
 
 ```tsx showLineNumbers title="Alert.tsx"
 function AlerCorners(){
@@ -143,7 +142,7 @@ The content of the Alert the text displayed as the Alert's title. If not provide
 
 Example usage:
 
-<AlertPlayGround.Content />
+<AlertContent />
 
 ```tsx showLineNumbers title="Alert.tsx"
 function(){
@@ -164,7 +163,7 @@ function(){
 The icon prop allows you to display an icon alongside the Alert. It accepts any ReactNode, such as an icon from the @pillar-ui/icons package. If no icon is provided, no icon will be displayed.
 Example usage:
 
-<AlertPlayGround.Icons />
+<AlertIcons />
 
 ```tsx showLineNumbers title="Alert.tsx"
 <Paper borderColor="opacity-6" flow="sm" p="sm" background="surface-3" corner="sm">
@@ -180,7 +179,7 @@ The closable prop determines whether the Alert should be closable by the user. I
 
 Example usage:
 
-<AlertPlayGround.Closable />
+<AlertClosable />
 
 ```tsx showLineNumbers title="Alert.tsx"
 <Paper borderColor="opacity-6" flow="sm" p="sm" background="surface-3" corner="sm">
@@ -195,7 +194,7 @@ Example usage:
 The inline prop determines how the alert is displayed. If set to true, the alert will be displayed horizontally, which is useful for short alerts that do not take up a lot of space, such as notifications or messages. If not set or set to false, the alert will be displayed as a vertically.
 Example usage:
 
-<AlertPlayGround.Inline />
+<AlertInline />
 
 ```tsx showLineNumbers title="Alert.tsx"
 <Flex direction="column" gap="sm">

diff --git a/apps/docs/content/components/avatar.mdx b/apps/docs/content/components/avatar.mdx
@@ -1,10 +1,9 @@
 ---
 title: Avatar
-type: Components
+type: core
 excerpt: The Avatar component is a UI element that represents a user, usually with a profile picture or initials. It can be used to show the profile image of a user or any image that is relevant to the context in which it is being used. It has several props that allow customization of its appearance, including size, corner radius, color, variant, and animation. The Avatar component can also be used in conjunction with the Avatar.Group component to display multiple avatars in a group.
-items: ['Avatar', 'Avatar.Group']
-file: core
-root: components
+items: ['Avatar', 'AvatarGroup']
+directory: avatar/index.tsx
 ---
 
 ## Usage
@@ -43,7 +42,7 @@ An optional title to display as an alt to make the avatar accessible.
 
 Example usage:
 
-<AvatarPlayGround.Colors />
+<AvatarColors />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AvatarColors() {
@@ -68,7 +67,7 @@ The image source to display in the avatar.
 
 Example:
 
-<AvatarPlayGround.Image />
+<AvatarImage />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AvatarImage() {
@@ -90,7 +89,7 @@ The icon prop allows you to display an icon alongside the Avatar. It accepts any
 
 Example usage:
 
-<AvatarPlayGround.Icon />
+<AvatarIcon />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 <Avatar icon={<CheckCircleIcon />} title="Success!" />
@@ -106,7 +105,7 @@ The size prop determines the size of the Avatar. It accepts any of the Size type
 
 Example usage:
 
-<AvatarPlayGround.Sizes />
+<AvatarSizes />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlerSizes() {
@@ -136,7 +135,7 @@ The corner prop determines the border radius of the Avatar. It accepts any of th
 
 Example usage:
 
-<AvatarPlayGround.Corners />
+<AvatarCorners />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlerCorners() {
@@ -197,7 +196,7 @@ The variant prop specifies the visual style of the Avatar component. It can be s
 
 Example usage:
 
-<AvatarPlayGround.Variants />
+<AvatarVariants />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlerVariants(){
@@ -220,7 +219,7 @@ The animate prop allows you to apply a predefined animation to the Avatar compon
 
 Example usage:
 
-<AvatarPlayGround.Animate />
+<AvatarAnimate />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlertAnimate(){
@@ -234,7 +233,7 @@ function AlertAnimate(){
 
 ## Avatars Fallback
 
-<AvatarPlayGround.Fallback />
+<AvatarFallback />
 
 The Avatar component is used to display a fallback image if the main image is not found. The fallback image can be a text string or an image file.
 
@@ -270,7 +269,7 @@ The maximum number of avatars to display.
 
 Example usage:
 
-<AvatarPlayGround.GroupLimit />
+<AvatarGroupLimit />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlertGroupLimit() {
@@ -302,7 +301,7 @@ The layout of the avatars. Can be one of stack or grid.
 
 Example usage:
 
-<AvatarPlayGround.GroupStack />
+<AvatarGroupStack />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlertGroupStack() {
@@ -340,7 +339,7 @@ The Avatar.Group component can be used to group multiple Avatar components toget
 
 Example usage:
 
-<AvatarPlayGround.GroupContext />
+<AvatarGroupContext />
 
 ```tsx showLineNumbers title="Avatar.tsx"
 function AlertGroupContext() {