@gv-tech/design-system 1.1.0 → 2.0.0

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>
   );
 }

package/src/pages/components/CarouselDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Card, CardContent } from '@/components/ui/card';
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
 
@@ -127,6 +128,36 @@ export function CarouselDocs() {
           <CarouselNext />
         </Carousel>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <h4 className="text-lg font-medium mt-6">Carousel (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'opts',
+              type: 'CarouselOptions',
+              description: 'Options passed to the Embla Carousel instance.',
+            },
+            {
+              name: 'plugins',
+              type: 'CarouselPlugin',
+              description: 'Plugins passed to the Embla Carousel instance.',
+            },
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              defaultValue: '"horizontal"',
+              description: 'The orientation of the carousel.',
+            },
+            {
+              name: 'setApi',
+              type: '(api: CarouselApi) => void',
+              description: 'Callback to get the Embla Carousel API instance.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ChartDocs.tsx

@@ -1,115 +1,145 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { TrendingUp } from 'lucide-react';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+  { month: 'March', desktop: 237, mobile: 120 },
+  { month: 'April', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'June', desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: '#2563eb',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#60a5fa',
+  },
+};
 
 export function ChartDocs() {
   return (
-    <ComponentSection title="Chart" description="Beautiful charts built using Recharts and styled with CSS variables.">
+    <ComponentSection
+      title="Chart"
+      description="Beautiful charts. Built using Recharts. Copy and paste into your apps."
+    >
       <ComponentShowcase
-        title="Overview"
-        description="Charts are built using Recharts. The chart components use CSS variables for theming."
-        code={`// Install recharts
-npm install recharts
-
-// Import and use
-import { Bar, BarChart, XAxis, YAxis, ResponsiveContainer } from "recharts";
-
-const data = [
-  { name: "Jan", total: 1200 },
-  { name: "Feb", total: 2100 },
-  { name: "Mar", total: 800 },
-  { name: "Apr", total: 1600 },
-  { name: "May", total: 900 },
-  { name: "Jun", total: 1700 },
-];
-
-<ResponsiveContainer width="100%" height={350}>
-  <BarChart data={data}>
-    <XAxis dataKey="name" />
-    <YAxis />
-    <Bar dataKey="total" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
+        title="Bar Chart"
+        description="A simple bar chart."
+        code={`<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+  <BarChart accessibilityLayer data={chartData}>
+    <CartesianGrid vertical={false} />
+    <XAxis
+      dataKey="month"
+      tickLine={false}
+      tickMargin={10}
+      axisLine={false}
+      tickFormatter={(value) => value.slice(0, 3)}
+    />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
   </BarChart>
-</ResponsiveContainer>`}
+</ChartContainer>`}
       >
-        <Card className="w-full max-w-md">
-          <CardHeader>
-            <CardTitle>Chart Example</CardTitle>
-            <CardDescription>A preview of chart styling</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                <TrendingUp className="h-4 w-4" />
-                <span>Charts use CSS variables for consistent theming</span>
-              </div>
-              <div className="grid grid-cols-6 gap-2 h-32 items-end">
-                {[40, 70, 30, 60, 35, 65].map((height, i) => (
-                  <div
-                    key={i}
-                    className="bg-primary rounded-t-sm transition-all hover:bg-primary/80"
-                    style={{ height: `${height}%` }}
-                  />
-                ))}
-              </div>
-              <div className="grid grid-cols-6 gap-2 text-xs text-center text-muted-foreground">
-                {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'].map((month) => (
-                  <span key={month}>{month}</span>
-                ))}
-              </div>
-            </div>
-          </CardContent>
-        </Card>
+        <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+          <BarChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={10}
+              axisLine={false}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
       </ComponentShowcase>
 
-      <ComponentShowcase
-        title="CSS Variables"
-        description="Use CSS variables to theme your charts."
-        code={`/* In your CSS */
-:root {
-  --chart-1: 12 76% 61%;
-  --chart-2: 173 58% 39%;
-  --chart-3: 197 37% 24%;
-  --chart-4: 43 74% 66%;
-  --chart-5: 27 87% 67%;
-}
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Chart component is a wrapper around{' '}
+          <a href="https://recharts.org/" className="underline" target="_blank" rel="noreferrer">
+            Recharts
+          </a>
+          .
+        </p>
 
-.dark {
-  --chart-1: 220 70% 50%;
-  --chart-2: 160 60% 45%;
-  --chart-3: 30 80% 55%;
-  --chart-4: 280 65% 60%;
-  --chart-5: 340 75% 55%;
-}
+        <h4 className="text-lg font-medium mt-6">ChartContainer</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'config',
+              type: 'ChartConfig',
+              required: true,
+              description: 'The configuration for the chart themes and labels.',
+            },
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional class names to apply.',
+            },
+            {
+              name: 'children',
+              type: 'ReactNode',
+              description: 'The Recharts component to render.',
+            },
+          ]}
+        />
 
-/* Use in your chart */
-<Bar fill="hsl(var(--chart-1))" />
-<Line stroke="hsl(var(--chart-2))" />`}
-      >
-        <div className="flex gap-4 items-center">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded bg-[hsl(12,76%,61%)]" />
-              <span className="text-sm">--chart-1</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded bg-[hsl(173,58%,39%)]" />
-              <span className="text-sm">--chart-2</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded bg-[hsl(197,37%,24%)]" />
-              <span className="text-sm">--chart-3</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded bg-[hsl(43,74%,66%)]" />
-              <span className="text-sm">--chart-4</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <div className="w-4 h-4 rounded bg-[hsl(27,87%,67%)]" />
-              <span className="text-sm">--chart-5</span>
-            </div>
-          </div>
-        </div>
-      </ComponentShowcase>
+        <h4 className="text-lg font-medium mt-6">ChartTooltip</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'content',
+              type: 'ReactNode',
+              description: 'The content to render in the tooltip.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ChartTooltipContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'hideLabel',
+              type: 'boolean',
+              description: 'Whether to hide the label in the tooltip.',
+            },
+            {
+              name: 'hideIndicator',
+              type: 'boolean',
+              description: 'Whether to hide the indicator in the tooltip.',
+            },
+            {
+              name: 'indicator',
+              type: '"line" | "dot" | "dashed"',
+              defaultValue: '"dot"',
+              description: 'The style of the indicator.',
+            },
+            {
+              name: 'nameKey',
+              type: 'string',
+              description: 'The key to use for the name in the tooltip.',
+            },
+            {
+              name: 'labelKey',
+              type: 'string',
+              description: 'The key to use for the label in the tooltip.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }