@gv-tech/design-system 1.0.0 → 1.2.0

package/src/pages/GettingStarted.tsx

@@ -1,4 +1,6 @@
 import { CodeBlock } from '@/components/docs/CodeBlock';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 export function GettingStartedPage() {
   return (
@@ -11,29 +13,43 @@ export function GettingStartedPage() {
       </div>
 
       <div className="grid gap-4 md:grid-cols-3">
-        <div className="rounded-lg border p-4 space-y-2">
-          <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
-            <span className="text-2xl">🎨</span>
-          </div>
-          <h3 className="font-semibold">Consistent Design</h3>
-          <p className="text-sm text-muted-foreground">Built on a unified design language with customizable themes.</p>
-        </div>
-        <div className="rounded-lg border p-4 space-y-2">
-          <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
-            <span className="text-2xl">⚡</span>
-          </div>
-          <h3 className="font-semibold">Fully Typed</h3>
-          <p className="text-sm text-muted-foreground">
-            Complete TypeScript support with comprehensive type definitions.
-          </p>
-        </div>
-        <div className="rounded-lg border p-4 space-y-2">
-          <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
-            <span className="text-2xl">♿</span>
-          </div>
-          <h3 className="font-semibold">Accessible</h3>
-          <p className="text-sm text-muted-foreground">WAI-ARIA compliant components with keyboard navigation.</p>
-        </div>
+        <Card>
+          <CardHeader className="p-4 pb-2">
+            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
+              <span className="text-2xl">🎨</span>
+            </div>
+            <CardTitle className="text-lg">Consistent Design</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <p className="text-sm text-muted-foreground">
+              Built on a unified design language with customizable themes.
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="p-4 pb-2">
+            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
+              <span className="text-2xl">⚡</span>
+            </div>
+            <CardTitle className="text-lg">Fully Typed</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <p className="text-sm text-muted-foreground">
+              Complete TypeScript support with comprehensive type definitions.
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="p-4 pb-2">
+            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
+              <span className="text-2xl">♿</span>
+            </div>
+            <CardTitle className="text-lg">Accessible</CardTitle>
+          </CardHeader>
+          <CardContent className="p-4 pt-0">
+            <p className="text-sm text-muted-foreground">WAI-ARIA compliant components with keyboard navigation.</p>
+          </CardContent>
+        </Card>
       </div>
 
       <section className="space-y-4">
@@ -93,18 +109,22 @@ export function InstallationPage() {
       <section className="space-y-4">
         <h2 className="text-2xl font-semibold tracking-tight">Install the package</h2>
         <p className="text-muted-foreground">Install the design system package using your preferred package manager:</p>
-        <div className="space-y-2">
-          <p className="text-sm font-medium">npm</p>
-          <CodeBlock code="npm install @gv-tech/design-system" language="bash" />
-        </div>
-        <div className="space-y-2">
-          <p className="text-sm font-medium">yarn</p>
-          <CodeBlock code="yarn add @gv-tech/design-system" language="bash" />
-        </div>
-        <div className="space-y-2">
-          <p className="text-sm font-medium">pnpm</p>
-          <CodeBlock code="pnpm add @gv-tech/design-system" language="bash" />
-        </div>
+        <Tabs defaultValue="npm" className="w-full">
+          <TabsList>
+            <TabsTrigger value="npm">npm</TabsTrigger>
+            <TabsTrigger value="yarn">yarn</TabsTrigger>
+            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+          </TabsList>
+          <TabsContent value="npm" className="mt-4">
+            <CodeBlock code="npm install @gv-tech/design-system" language="bash" />
+          </TabsContent>
+          <TabsContent value="yarn" className="mt-4">
+            <CodeBlock code="yarn add @gv-tech/design-system" language="bash" />
+          </TabsContent>
+          <TabsContent value="pnpm" className="mt-4">
+            <CodeBlock code="pnpm add @gv-tech/design-system" language="bash" />
+          </TabsContent>
+        </Tabs>
       </section>
 
       <section className="space-y-4">

package/src/pages/components/AccordionDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 
 export function AccordionDocs() {
@@ -50,6 +51,114 @@ export function AccordionDocs() {
           </AccordionItem>
         </Accordion>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+
+        <h4 className="text-lg font-medium mt-6">Accordion (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'type',
+              type: '"single" | "multiple"',
+              description: 'Determines whether one or multiple items can be opened at the same time.',
+              required: true,
+            },
+            {
+              name: 'collapsible',
+              type: 'boolean',
+              defaultValue: 'false check',
+              description: 'When type is "single", allows closing content when clicking trigger for an open item.',
+            },
+            {
+              name: 'value',
+              type: 'string | string[]',
+              description: 'The controlled value of the item(s) to expand.',
+            },
+            {
+              name: 'defaultValue',
+              type: 'string | string[]',
+              description: 'The default value of the item(s) to expand.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string | string[]) => void',
+              description: 'Event handler called when the expanded state of an item changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'When true, prevents the user from interacting with the accordion.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              defaultValue: '"ltr"',
+              description: 'The reading direction of the accordion.',
+            },
+            {
+              name: 'orientation',
+              type: '"vertical" | "horizontal"',
+              defaultValue: '"vertical"',
+              description: 'The orientation of the accordion.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AccordionItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              description: 'A unique value for the item.',
+              required: true,
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'When true, prevents the user from interacting with the item.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AccordionTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'children',
+              type: 'ReactNode',
+              description: 'The content of the trigger.',
+            },
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description:
+                'Change the default rendered element for the one passed as a child, merging their props and behavior.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AccordionContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'children',
+              type: 'ReactNode',
+              description: 'The content of the item.',
+            },
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description:
+                'Used to force mounting when more control is needed. Useful when controlling animation with React libraries.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/AlertDialogDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -58,6 +59,93 @@ export function AlertDialogDocs() {
           </AlertDialogContent>
         </AlertDialog>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+
+        <h4 className="text-lg font-medium mt-6">AlertDialog (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the dialog.',
+            },
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The default open state when initially rendered.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AlertDialogTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AlertDialogContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+            {
+              name: 'onEscapeKeyDown',
+              type: '(event: KeyboardEvent) => void',
+              description: 'Event handler called when the escape key is pressed.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AlertDialogAction</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AlertDialogCancel</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/AlertDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { AlertCircle, Terminal } from 'lucide-react';
 
@@ -40,6 +41,25 @@ export function AlertDocs() {
           <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
         </Alert>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'variant',
+              type: '"default" | "destructive"',
+              defaultValue: '"default"',
+              description: 'The visual style of the alert.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes to apply.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/AspectRatioDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { AspectRatio } from '@/components/ui/aspect-ratio';
 
 export function AspectRatioDocs() {
@@ -59,6 +60,26 @@ export function AspectRatioDocs() {
           </AspectRatio>
         </div>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'ratio',
+              type: 'number',
+              defaultValue: '1',
+              description: 'The desired aspect ratio.',
+            },
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/AvatarDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
 export function AvatarDocs() {
@@ -29,6 +30,53 @@ export function AvatarDocs() {
           <AvatarFallback>JD</AvatarFallback>
         </Avatar>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+
+        <h4 className="text-lg font-medium mt-6">Avatar (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AvatarImage</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'src',
+              type: 'string',
+              description: 'The URL of the image.',
+            },
+            {
+              name: 'alt',
+              type: 'string',
+              description: 'The alternative text for the image.',
+            },
+            {
+              name: 'onLoadingStatusChange',
+              type: '(status: "idle" | "loading" | "loaded" | "error") => void',
+              description: 'Event handler called when the loading status of the image changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">AvatarFallback</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'delayMs',
+              type: 'number',
+              description: 'Useful for delaying rendering so it only appears for those with slower connections.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/BadgeDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Badge } from '@/components/ui/badge';
 
 export function BadgeDocs() {
@@ -31,6 +32,25 @@ export function BadgeDocs() {
         <Badge variant="destructive">Error</Badge>
         <Badge variant="outline">v1.0.0</Badge>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'variant',
+              type: '"default" | "secondary" | "destructive" | "outline"',
+              defaultValue: '"default"',
+              description: 'The visual style of the badge.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes to apply.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/BreadcrumbDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -49,6 +50,38 @@ export function BreadcrumbDocs() {
           </BreadcrumbList>
         </Breadcrumb>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+
+        <h4 className="text-lg font-medium mt-6">Breadcrumb (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'separator',
+              type: 'ReactNode',
+              description: 'Custom separator element.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">BreadcrumbLink</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+            {
+              name: 'href',
+              type: 'string',
+              description: 'The URL of the link.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ButtonDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
 import { ChevronRight, Loader2, Mail } from 'lucide-react';
 
@@ -72,6 +73,48 @@ export function ButtonDocs() {
       >
         <Button disabled>Disabled</Button>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'variant',
+              type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"',
+              defaultValue: '"default"',
+              description: 'The visual style of the button.',
+            },
+            {
+              name: 'size',
+              type: '"default" | "sm" | "lg" | "icon"',
+              defaultValue: '"default"',
+              description: 'The size of the button.',
+            },
+            {
+              name: 'asChild',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Whether to render as a child component (delegation).',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes to apply.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'Whether the button is disabled.',
+            },
+            {
+              name: 'onClick',
+              type: 'MouseEventHandler',
+              description: 'Click event handler.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/CalendarDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Calendar } from '@/components/ui/calendar';
 import * as React from 'react';
 
@@ -24,6 +25,48 @@ export function CalendarDocs() {
       >
         <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Calendar component is built on top of{' '}
+          <a href="https://react-day-picker.js.org/" className="underline" target="_blank" rel="noreferrer">
+            React Day Picker
+          </a>
+          .
+        </p>
+        <PropsTable
+          props={[
+            {
+              name: 'mode',
+              type: '"single" | "multiple" | "range" | "default"',
+              defaultValue: '"default"',
+              description: 'The selection mode of the calendar.',
+            },
+            {
+              name: 'selected',
+              type: 'Date | Date[] | DateRange | undefined',
+              description: 'The selected date(s).',
+            },
+            {
+              name: 'onSelect',
+              type: '(date: any) => void',
+              description: 'Event handler called when a date is selected.',
+            },
+            {
+              name: 'showOutsideDays',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'Whether to show days from the previous and next months.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes to apply.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/CardDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -76,6 +77,25 @@ export function CardDocs() {
           </CardFooter>
         </Card>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <h4 className="text-lg font-medium mt-6">Card (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional CSS classes.',
+            },
+          ]}
+        />
+
+        <p className="text-sm text-muted-foreground mt-4">
+          CardHeader, CardTitle, CardDescription, CardContent, and CardFooter also accept <code>className</code> and
+          other standard HTML attributes.
+        </p>
+      </div>
     </ComponentSection>
   );
 }