Docs Improvements - UX - 13 Sep

docs/app/docs/components/accordion/docs/codeUsage.js

@@ -12,6 +12,8 @@ const anatomy_SourceCode = await getSourceCodeFromPath('docs/app/docs/components
 import root_api_SourceCode from './component_api/root.tsx';
 import item_api_SourceCode from './component_api/item.tsx';
 import trigger_api_SourceCode from './component_api/trigger.tsx';
+import header_api_SourceCode from './component_api/header.tsx';
+import content_api_SourceCode from './component_api/content.tsx';
 
 export const code = {
     javascript: {
@@ -29,7 +31,9 @@ export const anatomy = {
 export const api_documentation = {
     root: root_api_SourceCode,
     item: item_api_SourceCode,
-    trigger: trigger_api_SourceCode
+    trigger: trigger_api_SourceCode,
+    header: header_api_SourceCode,
+    content: content_api_SourceCode
 }
 
 export const keyboardShortcuts = {

docs/app/docs/components/accordion/docs/component_api/content.tsx

@@ -0,0 +1,38 @@
+const data = {
+    name: "Content",
+    description: "The content component for the Accordion. This component contains the collapsible content that is shown/hidden when the trigger is activated.",
+    columns: [
+        {
+            name: "Prop",
+            id: "prop",
+        },
+        {
+            name: "Type",
+            id: "type",
+        },
+        {
+            name: "Default",
+            id: "default",
+        }
+    ],
+    data: [
+        {
+            prop: {
+                name: "className",
+                info_tooltips: "The class name for the AccordionContent."
+            },
+            type: "string",
+            default: "--",
+        },
+        {
+            prop: {
+                name: "asChild",
+                info_tooltips: "Whether to use the child component as the AccordionContent."
+            },
+            type: "boolean",
+            default: "false",
+        }
+    ]
+}
+
+export default data;

docs/app/docs/components/accordion/docs/component_api/header.tsx

@@ -0,0 +1,38 @@
+const data = {
+    name: "Header",
+    description: "The header component for the Accordion. This component wraps the trigger and provides the header structure for each accordion item.",
+    columns: [
+        {
+            name: "Prop",
+            id: "prop",
+        },
+        {
+            name: "Type",
+            id: "type",
+        },
+        {
+            name: "Default",
+            id: "default",
+        }
+    ],
+    data: [
+        {
+            prop: {
+                name: "className",
+                info_tooltips: "The class name for the AccordionHeader."
+            },
+            type: "string",
+            default: "--",
+        },
+        {
+            prop: {
+                name: "asChild",
+                info_tooltips: "Whether to use the child component as the AccordionHeader."
+            },
+            type: "boolean",
+            default: "false",
+        }
+    ]
+}
+
+export default data;

docs/app/docs/components/accordion/docs/component_api/item.tsx

@@ -22,7 +22,7 @@ const data = {
             info_tooltips : "The class name for the AccordionItem."
         },
         type : "string",
-        default : "--",
+        default : "''",
        },
        {
         prop: {

docs/app/docs/components/accordion/docs/component_api/root.tsx

@@ -22,7 +22,7 @@ const data = {
             info_tooltips : "The class name for the AccordionRoot."
         },
         type : "string",
-        default : "--",
+        default : "''",
        },
        {
         prop : {

docs/app/docs/components/accordion/docs/component_api/trigger.tsx

@@ -22,7 +22,7 @@ const data = {
             info_tooltips : "The class name for the AccordionTrigger."
         },
         type : "string",
-        default : "--",
+        default : "''",
        },
        {
         prop: {

docs/app/docs/components/accordion/docs/example_1.tsx

@@ -20,21 +20,20 @@ const items = [
 ]
 
 const AccordionExample = () => {
-
-
   return (
-  <div className="w-64 md:w-96">
-    <Accordion.Root>
-      {items.map((item) => (
-        <Accordion.Item key={item.id} value={item.id}>
-          <Accordion.Header>
-            <Accordion.Trigger>{item.title}</Accordion.Trigger>
-          </Accordion.Header>
-          <Accordion.Content>{item.content}</Accordion.Content>
-        </Accordion.Item>
-      ))}
-    </Accordion.Root>
-  </div>)
+    <div className="w-64 md:w-96">
+      <Accordion.Root>
+        {items.map((item, index) => (
+          <Accordion.Item key={item.id} value={item.id}>
+            <Accordion.Header>
+              <Accordion.Trigger>{item.title}</Accordion.Trigger>
+            </Accordion.Header>
+            <Accordion.Content index={index}>{item.content}</Accordion.Content>
+          </Accordion.Item>
+        ))}
+      </Accordion.Root>
+    </div>
+  )
 }
 
 export default AccordionExample;

docs/app/docs/components/accordion/page.mdx

@@ -30,7 +30,9 @@ import {code, anatomy, keyboardShortcuts, api_documentation} from "./docs/codeUs
     {/* API Documentation */}
     <Documentation.Table title="Root" description={api_documentation.root.description} columns={api_documentation.root.columns} data={api_documentation.root.data} />
     <Documentation.Table title="Item" description={api_documentation.item.description} columns={api_documentation.item.columns} data={api_documentation.item.data} />
+    <Documentation.Table title="Header" description={api_documentation.header.description} columns={api_documentation.header.columns} data={api_documentation.header.data} />
     <Documentation.Table title="Trigger" description={api_documentation.trigger.description} columns={api_documentation.trigger.columns} data={api_documentation.trigger.data} />
+    <Documentation.Table title="Content" description={api_documentation.content.description} columns={api_documentation.content.columns} data={api_documentation.content.data} />
 
     {/* Keyboard Shortcuts */}
     <Documentation.Table title="Keyboard Interactions" columns={keyboardShortcuts.columns} data={keyboardShortcuts.data} />

docs/app/docs/components/avatar/docs/codeUsage.js

@@ -33,9 +33,9 @@ export const avatarBasicUsageExample = {
      {name: 'Description', id: 'description'},
     ],
     data: [
-     {prop: 'src', type: 'string', default: 'null', description: 'URL of the image to be displayed as the avatar.', id: 'src'},
-     {prop: 'fallback', type: 'string', default: 'null', description: 'Text initials or placeholder displayed when the image fails to load or if no src is provided.', id: 'fallback'},
-     {prop: 'color', type: 'string', default: 'null', description: 'Accent Color of the text initials or placeholder displayed when the image fails to load or if no src is provided.', id: 'color'},
+     {prop: 'src', type: 'string', default: "''", description: 'URL of the image to be displayed as the avatar.', id: 'src'},
+     {prop: 'fallback', type: 'string', default: "''", description: 'Text initials or placeholder displayed when the image fails to load or if no src is provided.', id: 'fallback'},
+     {prop: 'color', type: 'string', default: "''", description: 'Accent Color of the text initials or placeholder displayed when the image fails to load or if no src is provided.', id: 'color'},
     ]
  }
 

docs/app/docs/components/avatar/docs/component_api/fallback.tsx

@@ -22,15 +22,15 @@ const data = {
             info_tooltips : "The children of the AvatarFallback."
         },
         type : "React.ReactNode",
-        default : "--",
+        default : "''",
        },
        {
         prop : {
             name : "className",
             info_tooltips : "The class name for the AvatarFallback."
         },
         type : "string",
-        default : "--",
+        default : "''",
        }
     ]
 }

docs/app/docs/components/avatar/docs/component_api/image.tsx

@@ -22,15 +22,15 @@ const data = {
             info_tooltips : "The source of the image."
         },
         type : "string",
-        default : "--",
+        default : "''",
        },
        {
         prop : {
             name : "alt",
             info_tooltips : "The alternative text for the image."
         },
         type : "string",
-        default : "--",
+        default : "''",
        }
     ]
 }

docs/app/docs/components/avatar/docs/component_api/root.tsx

@@ -22,15 +22,15 @@ const data = {
             info_tooltips : "The class name for the AvatarRoot."
         },
         type : "string",
-        default : "--",
+        default : "''",
        },
        {
         prop : {
             name : "customRootClass",
             info_tooltips : "The class name for the AvatarRoot."
         },
         type : "string",
-        default : "--",
+        default : "''",
        },
        {
         prop: {
@@ -46,31 +46,31 @@ const data = {
             info_tooltips: 'The children of the AvatarRoot.'
         },
         type: 'React.ReactNode',
-        default: 'null',
+        default: "''",
        },
        {
         prop: {
             name : "size",
             info_tooltips: 'The size of the AvatarRoot.'
         },
         type: 'string',
-        default: '``',
+        default: "''",
        },
        {
         prop: {
             name : "variant",
             info_tooltips: 'The variant of the AvatarRoot.'
         },
         type: 'string',
-        default: '``',
+        default: "''",
        },
        {
         prop: {
             name : "color",
             info_tooltips: 'The color of the AvatarRoot.'
         },
         type: 'string',
-        default: '``',
+        default: "''",
        }
     ]
 }

docs/app/docs/components/badge/docs/codeUsage.js

@@ -23,19 +23,17 @@ const BadgeExample = () => (
     },
 }
 
-export const BadgeTable ={
-     columns: [
+export const BadgeTable = {
+    columns: [
         {name: 'Prop', id: 'prop'},
         {name: 'Type', id: 'type'},
         {name: 'Default', id: 'default'},
         {name: 'Description', id: 'description'},
     ],
-
-     data : [
-        {prop: 'color', type: 'string', default: 'null', description: 'Accent color of the component', id: 'color'},
-        {prop: 'size', type: 'string', default: 'null', description: 'Size of the component', id: 'size'},
-        {prop: 'variant', type: 'string', default: 'null', description: 'Variant of the component', id: 'variant'},
-
+    data: [
+        {prop: 'color', type: 'string', default: "''", description: 'Accent color of the component', id: 'color'},
+        {prop: 'size', type: 'string', default: "''", description: 'Size of the component', id: 'size'},
+        {prop: 'variant', type: 'string', default: "''", description: 'Variant of the component', id: 'variant'},
     ]
 }
 export default code;

docs/app/docs/components/badge/examples/BadgeVariants.tsx

@@ -39,7 +39,7 @@ const BadgeVariants = () => {
             </Badge>
             <Separator orientation="horizontal" style={{ marginTop: 20 }} />
             <TooltipWrapper label={badgestyleDescription[variant]} placement="bottom">
-              <Text className="text-gray-800 font-light inline-block cursor-help">
+              <Text className="text-gray-950 font-light inline-block cursor-help">
                 {variant}
               </Text>
             </TooltipWrapper>

docs/app/docs/components/button/docs/component_api/button.tsx

@@ -22,7 +22,7 @@ const data = {
                 info_tooltips: "The content to be displayed inside the button."
             },
             type: "ReactNode",
-            default: "--",
+            default: "''",
         },
         {
             prop: {

docs/app/docs/components/button/examples/ButtonVariants.tsx

@@ -42,7 +42,7 @@ const ButtonVariants = () => {
             </Button>
             <Separator orientation="horizontal" style={{ marginTop: 20 }} />
             <TooltipWrapper label={buttonStyleDescription[variant]} placement="bottom">
-              <Text className="text-gray-800 font-light inline-block cursor-help">
+              <Text className="text-gray-950 font-light inline-block cursor-help">
                 {variant}
               </Text>
             </TooltipWrapper>

docs/app/docs/components/callout/examples/CalloutVariants.tsx

@@ -29,7 +29,7 @@ const CalloutVariants = () => {
             </Callout.Root>
             <Separator orientation="horizontal" style={{ marginTop: 20 }} />
             <TooltipWrapper label={calloutStyleDescription[variant]} placement="bottom">
-              <Text className="text-gray-800 font-light inline-block cursor-help">
+              <Text className="text-gray-950 font-light inline-block cursor-help">
                 {variant}
               </Text>
             </TooltipWrapper>

docs/app/docs/components/card/docs/component_api/card.tsx

@@ -22,7 +22,7 @@ const data = {
                 info_tooltips: "The content to be displayed inside the card."
             },
             type: "ReactNode",
-            default: "--",
+            default: "''",
         },
         {
             prop: {
@@ -38,15 +38,15 @@ const data = {
                 info_tooltips: "Custom root class name to override default styling."
             },
             type: "string",
-            default: "--",
+            default: "''",
         },
         {
             prop: {
                 name: "data-accent-color",
                 info_tooltips: "Accent color to apply to the card. Used as a data attribute."
             },
             type: "string",
-            default: "--",
+            default: "''",
         }
     ]
 };

docs/app/docs/components/card/page.mdx

@@ -17,7 +17,7 @@ export const metadata = cardMetadata;
       <Avatar fallback="PP" />
       <div className="flex flex-col">
         <span className="font-medium">Peter Parker</span>
-        <span className="text-xs text-gray-800">Biochemist</span>
+        <span className="text-xs text-gray-950">Biochemist</span>
       </div>
     </Card>
   </Documentation.ComponentHero>

docs/app/docs/components/em/docs/EmExample.tsx

@@ -4,7 +4,7 @@ import Card from "@radui/ui/Card"
 
 const EmExample = () => {
     return (
-        <Card className="text-gray-900 bg-gray-50">
+        <Card className="text-gray-1000 bg-gray-50">
             <Text>I have a dream of a scene between the green <Em className="text-gray-1000">hills</Em>.</Text>
             <Text>Clouds pull away and the sunlight's <Em className="text-gray-1000">revealed</Em>.</Text>
             <Text>People don't talk about keeping it <Em className="text-gray-1000">real</Em>.</Text>

docs/app/docs/layout.tsx

@@ -59,8 +59,6 @@ const DocsLayoutChunks = ({ children }: { children: React.ReactNode }) => {
 
 const DocsLayoutGridRoot = ({ children }: { children: React.ReactNode }) => {
     return <div className="w-full pt-[60px]">
-        <div className="layout-image">
-        </div>
         <div className="px-[75px] max-w-[1280px] mx-auto relative z-10">
             <PageDetails />
             <DocsLayoutJoinDiscordCallout />