@gv-tech/design-system 1.0.0 → 1.2.0

package/src/pages/components/SwitchDocs.tsx

@@ -1,17 +1,17 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 
 export function SwitchDocs() {
   return (
-    <ComponentSection title="Switch" description="A control that allows the user to toggle between two states.">
-      <ComponentShowcase title="Default" description="A basic switch component." code={`<Switch />`}>
-        <Switch />
-      </ComponentShowcase>
-
+    <ComponentSection
+      title="Switch"
+      description="A control that allows the user to toggle between checked and not checked."
+    >
       <ComponentShowcase
-        title="With Label"
-        description="A switch with a label."
+        title="Default"
+        description="A default switch."
         code={`<div className="flex items-center space-x-2">
   <Switch id="airplane-mode" />
   <Label htmlFor="airplane-mode">Airplane Mode</Label>
@@ -23,9 +23,64 @@ export function SwitchDocs() {
         </div>
       </ComponentShowcase>
 
-      <ComponentShowcase title="Disabled" description="A disabled switch." code={`<Switch disabled />`}>
-        <Switch disabled />
-      </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Switch component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/switch"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Switch
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Switch (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultChecked',
+              type: 'boolean',
+              description: 'The value of the switch when initially rendered.',
+            },
+            {
+              name: 'checked',
+              type: 'boolean',
+              description: 'The controlled value of the switch.',
+            },
+            {
+              name: 'onCheckedChange',
+              type: '(checked: boolean) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the switch.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description:
+                'When true, indicates that the user must toggle the switch before the owning form can be submitted.',
+            },
+            {
+              name: 'name',
+              type: 'string',
+              description: 'The name of the switch. Submitted with its owning form as part of a name/value pair.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              defaultValue: '"on"',
+              description: 'The value given as data when submitted with a name.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/TableDocs.tsx

@@ -1,20 +1,67 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { PropsTable } from '@/components/docs/PropsTable';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
 
 const invoices = [
-  { invoice: 'INV001', status: 'Paid', method: 'Credit Card', amount: '$250.00' },
-  { invoice: 'INV002', status: 'Pending', method: 'PayPal', amount: '$150.00' },
-  { invoice: 'INV003', status: 'Unpaid', method: 'Bank Transfer', amount: '$350.00' },
-  { invoice: 'INV004', status: 'Paid', method: 'Credit Card', amount: '$450.00' },
-  { invoice: 'INV005', status: 'Paid', method: 'PayPal', amount: '$550.00' },
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
 ];
 
 export function TableDocs() {
   return (
-    <ComponentSection title="Table" description="A responsive table component for displaying tabular data.">
+    <ComponentSection title="Table" description="A responsive table component.">
       <ComponentShowcase
         title="Default"
-        description="A basic table with headers and data rows."
+        description="A list of recent invoices."
         code={`<Table>
   <TableCaption>A list of your recent invoices.</TableCaption>
   <TableHeader>
@@ -29,12 +76,18 @@ export function TableDocs() {
     {invoices.map((invoice) => (
       <TableRow key={invoice.invoice}>
         <TableCell className="font-medium">{invoice.invoice}</TableCell>
-        <TableCell>{invoice.status}</TableCell>
-        <TableCell>{invoice.method}</TableCell>
-        <TableCell className="text-right">{invoice.amount}</TableCell>
+        <TableCell>{invoice.paymentStatus}</TableCell>
+        <TableCell>{invoice.paymentMethod}</TableCell>
+        <TableCell className="text-right">{invoice.totalAmount}</TableCell>
       </TableRow>
     ))}
   </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={3}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
 </Table>`}
       >
         <Table>
@@ -51,14 +104,36 @@ export function TableDocs() {
             {invoices.map((invoice) => (
               <TableRow key={invoice.invoice}>
                 <TableCell className="font-medium">{invoice.invoice}</TableCell>
-                <TableCell>{invoice.status}</TableCell>
-                <TableCell>{invoice.method}</TableCell>
-                <TableCell className="text-right">{invoice.amount}</TableCell>
+                <TableCell>{invoice.paymentStatus}</TableCell>
+                <TableCell>{invoice.paymentMethod}</TableCell>
+                <TableCell className="text-right">{invoice.totalAmount}</TableCell>
               </TableRow>
             ))}
           </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
         </Table>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">The Table component uses standard HTML table elements.</p>
+
+        <h4 className="text-lg font-medium mt-6">Table</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional class names to apply.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/TabsDocs.tsx

@@ -1,6 +1,7 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -13,37 +14,7 @@ export function TabsDocs() {
     >
       <ComponentShowcase
         title="Default"
-        description="A basic tabs component."
-        code={`<Tabs defaultValue="account" className="w-[400px]">
-  <TabsList>
-    <TabsTrigger value="account">Account</TabsTrigger>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">
-    Make changes to your account here.
-  </TabsContent>
-  <TabsContent value="password">
-    Change your password here.
-  </TabsContent>
-</Tabs>`}
-      >
-        <Tabs defaultValue="account" className="w-[400px]">
-          <TabsList>
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="password">Password</TabsTrigger>
-          </TabsList>
-          <TabsContent value="account" className="p-4">
-            Make changes to your account here.
-          </TabsContent>
-          <TabsContent value="password" className="p-4">
-            Change your password here.
-          </TabsContent>
-        </Tabs>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Cards"
-        description="Tabs can contain any content, including cards."
+        description="A default tabs component."
         code={`<Tabs defaultValue="account" className="w-[400px]">
   <TabsList className="grid w-full grid-cols-2">
     <TabsTrigger value="account">Account</TabsTrigger>
@@ -53,14 +24,46 @@ export function TabsDocs() {
     <Card>
       <CardHeader>
         <CardTitle>Account</CardTitle>
-        <CardDescription>Update your account settings.</CardDescription>
+        <CardDescription>
+          Make changes to your account here. Click save when you're done.
+        </CardDescription>
       </CardHeader>
       <CardContent className="space-y-2">
         <div className="space-y-1">
           <Label htmlFor="name">Name</Label>
           <Input id="name" defaultValue="Pedro Duarte" />
         </div>
+        <div className="space-y-1">
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@peduarte" />
+        </div>
       </CardContent>
+      <CardFooter>
+        <Button>Save changes</Button>
+      </CardFooter>
+    </Card>
+  </TabsContent>
+  <TabsContent value="password">
+    <Card>
+      <CardHeader>
+        <CardTitle>Password</CardTitle>
+        <CardDescription>
+          Change your password here. After saving, you'll be logged out.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="space-y-1">
+          <Label htmlFor="current">Current password</Label>
+          <Input id="current" type="password" />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="new">New password</Label>
+          <Input id="new" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button>Save password</Button>
+      </CardFooter>
     </Card>
   </TabsContent>
 </Tabs>`}
@@ -74,22 +77,28 @@ export function TabsDocs() {
             <Card>
               <CardHeader>
                 <CardTitle>Account</CardTitle>
-                <CardDescription>Update your account settings.</CardDescription>
+                <CardDescription>Make changes to your account here. Click save when you're done.</CardDescription>
               </CardHeader>
               <CardContent className="space-y-2">
                 <div className="space-y-1">
                   <Label htmlFor="name">Name</Label>
                   <Input id="name" defaultValue="Pedro Duarte" />
                 </div>
-                <Button>Save changes</Button>
+                <div className="space-y-1">
+                  <Label htmlFor="username">Username</Label>
+                  <Input id="username" defaultValue="@peduarte" />
+                </div>
               </CardContent>
+              <CardFooter>
+                <Button>Save changes</Button>
+              </CardFooter>
             </Card>
           </TabsContent>
           <TabsContent value="password">
             <Card>
               <CardHeader>
                 <CardTitle>Password</CardTitle>
-                <CardDescription>Change your password.</CardDescription>
+                <CardDescription>Change your password here. After saving, you'll be logged out.</CardDescription>
               </CardHeader>
               <CardContent className="space-y-2">
                 <div className="space-y-1">
@@ -100,12 +109,115 @@ export function TabsDocs() {
                   <Label htmlFor="new">New password</Label>
                   <Input id="new" type="password" />
                 </div>
-                <Button>Save password</Button>
               </CardContent>
+              <CardFooter>
+                <Button>Save password</Button>
+              </CardFooter>
             </Card>
           </TabsContent>
         </Tabs>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Tabs component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/tabs"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Tabs
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Tabs (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultValue',
+              type: 'string',
+              description: 'The value of the tab that should be active when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The controlled value of the tab to activate.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              defaultValue: '"horizontal"',
+              description: 'The orientation of the tabs.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the tabs.',
+            },
+            {
+              name: 'activationMode',
+              type: '"automatic" | "manual"',
+              defaultValue: '"automatic"',
+              description:
+                'When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TabsList</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'loop',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'When true, keyboard navigation will loop from last tab to first, and vice versa.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TabsTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'A unique value for the trigger.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the tab.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TabsContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'A unique value for the content.',
+            },
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/TextareaDocs.tsx

@@ -1,54 +1,60 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { Button } from '@/components/ui/button';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 
 export function TextareaDocs() {
   return (
-    <ComponentSection title="Textarea" description="Displays a form textarea for multi-line text input.">
+    <ComponentSection
+      title="Textarea"
+      description="Displays a form textarea or a component that looks like a textarea."
+    >
       <ComponentShowcase
         title="Default"
-        description="A basic textarea."
-        code={`<Textarea placeholder="Type your message here." />`}
-      >
-        <Textarea placeholder="Type your message here." className="max-w-md" />
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Label"
-        description="A textarea with a label."
+        description="A default textarea."
         code={`<div className="grid w-full gap-1.5">
   <Label htmlFor="message">Your message</Label>
   <Textarea placeholder="Type your message here." id="message" />
 </div>`}
       >
-        <div className="grid w-full max-w-md gap-1.5">
+        <div className="grid w-full gap-1.5">
           <Label htmlFor="message">Your message</Label>
           <Textarea placeholder="Type your message here." id="message" />
         </div>
       </ComponentShowcase>
 
-      <ComponentShowcase
-        title="With Button"
-        description="A textarea with a submit button."
-        code={`<div className="grid w-full gap-2">
-  <Textarea placeholder="Type your message here." />
-  <Button>Send message</Button>
-</div>`}
-      >
-        <div className="grid w-full max-w-md gap-2">
-          <Textarea placeholder="Type your message here." />
-          <Button>Send message</Button>
-        </div>
-      </ComponentShowcase>
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Textarea component accepts all standard HTML textarea attributes.
+        </p>
 
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled textarea."
-        code={`<Textarea placeholder="Type your message here." disabled />`}
-      >
-        <Textarea placeholder="Type your message here." disabled className="max-w-md" />
-      </ComponentShowcase>
+        <h4 className="text-lg font-medium mt-6">Textarea</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional class names to apply.',
+            },
+            {
+              name: 'placeholder',
+              type: 'string',
+              description: 'The placeholder object.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the textarea is disabled.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description: 'Whether the textarea is required.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ThemeToggleDocs.tsx

@@ -0,0 +1,50 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { useState } from 'react';
+
+export function ThemeToggleDocs() {
+  const [binaryTheme, setBinaryTheme] = useState('light');
+  const [ternaryTheme, setTernaryTheme] = useState('system');
+  const [customTheme, setCustomTheme] = useState('light');
+
+  return (
+    <ComponentSection
+      title="Theme Toggle"
+      description="A component that allows users to switch between light, dark, and system themes."
+    >
+      <ComponentShowcase
+        title="Binary Mode"
+        description="The default mode allows toggling between light and dark themes. (Controlled example shown to prevent site theme changes)"
+        code={`<ThemeToggle variant="binary" />`}
+      >
+        <ThemeToggle variant="binary" customTheme={binaryTheme} onThemeChange={setBinaryTheme} />
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Ternary Mode"
+        description="Ternary mode allows choosing between light, dark, and system themes using a dropdown menu. (Controlled example shown to prevent site theme changes)"
+        code={`<ThemeToggle variant="ternary" />`}
+      >
+        <ThemeToggle variant="ternary" customTheme={ternaryTheme} onThemeChange={setTernaryTheme} />
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Custom State Integration"
+        description="You can control the theme externally by passing customTheme and onThemeChange props."
+        code={`const [theme, setTheme] = useState('light');
+
+<ThemeToggle
+  customTheme={theme}
+  onThemeChange={(newTheme) => setTheme(newTheme)}
+/>
+
+<p>Current Theme: {theme}</p>`}
+      >
+        <div className="flex flex-col items-center gap-4">
+          <ThemeToggle customTheme={customTheme} onThemeChange={(newTheme) => setCustomTheme(newTheme)} />
+          <p className="text-sm font-medium">Current Selection: {customTheme}</p>
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}