@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/SliderDocs.tsx

@@ -1,110 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Slider } from '@/components/ui/slider';
-
-export function SliderDocs() {
-  return (
-    <ComponentSection title="Slider" description="An input where the user selects a value from within a given range.">
-      <ComponentShowcase
-        title="Default"
-        description="A default slider."
-        code={`<Slider defaultValue={[33]} max={100} step={1} />`}
-      >
-        <Slider defaultValue={[33]} max={100} step={1} className="w-[60%]" />
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Slider component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/slider"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Slider
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Slider (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'number[]',
-              description: 'The value of the slider when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'number[]',
-              description: 'The controlled value of the slider.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: number[]) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'onValueCommit',
-              type: '(value: number[]) => void',
-              description: 'Event handler called when the value changes at the end of an interaction.',
-            },
-            {
-              name: 'name',
-              type: 'string',
-              description: 'The name of the slider. Submitted with its owning form as part of a name/value pair.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the slider.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the slider.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the slider.',
-            },
-            {
-              name: 'min',
-              type: 'number',
-              defaultValue: '0',
-              description: 'The minimum value for the range.',
-            },
-            {
-              name: 'max',
-              type: 'number',
-              defaultValue: '100',
-              description: 'The maximum value for the range.',
-            },
-            {
-              name: 'step',
-              type: 'number',
-              defaultValue: '1',
-              description: 'The stepping interval.',
-            },
-            {
-              name: 'minStepsBetweenThumbs',
-              type: 'number',
-              defaultValue: '0',
-              description: 'The minimum permitted step difference between thumbs.',
-            },
-            {
-              name: 'inverted',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether the slider is visually inverted.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/SonnerDocs.tsx

@@ -1,117 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import { toast } from 'sonner';
-
-export function SonnerDocs() {
-  return (
-    <ComponentSection title="Sonner" description="An opinionated toast component for React.">
-      <div className="bg-muted/50 border rounded-lg p-6 space-y-4 mb-8">
-        <h3 className="text-lg font-semibold">Which to use?</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <h4 className="font-medium text-primary">Sonner</h4>
-            <p className="text-sm text-muted-foreground leading-relaxed">
-              Designed for modern applications. It stacks automatically, looks great by default, and uses a very simple
-              function call (<code>toast()</code>) that can be used anywhere—no hooks required.
-            </p>
-          </div>
-          <div className="space-y-2">
-            <h4 className="font-medium text-primary">Toast (Radix UI)</h4>
-            <p className="text-sm text-muted-foreground leading-relaxed">
-              Traditional Radix UI based toasts. Use this if you need deep programmatic control over the toast lifecycle
-              or if you require specific accessibility patterns not covered by Sonner.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <ComponentShowcase
-        title="Default"
-        description="A default toast."
-        code={`<Button
-  variant="outline"
-  onClick={() =>
-    toast("Event has been created", {
-      description: "Sunday, December 03, 2023 at 9:00 AM",
-      action: {
-        label: "Undo",
-        onClick: () => console.log("Undo"),
-      },
-    })
-  }
->
-  Show Toast
-</Button>`}
-      >
-        <Button
-          variant="outline"
-          onClick={() =>
-            toast('Event has been created', {
-              description: 'Sunday, December 03, 2023 at 9:00 AM',
-              action: {
-                label: 'Undo',
-                onClick: () => console.log('Undo'),
-              },
-            })
-          }
-        >
-          Show Toast
-        </Button>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Sonner component is based on{' '}
-          <a href="https://sonner.emilkowal.ski/" className="underline" target="_blank" rel="noreferrer">
-            Sonner
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Toaster</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'theme',
-              type: '"light" | "dark" | "system"',
-              description: 'The theme of the toast.',
-            },
-            {
-              name: 'richColors',
-              type: 'boolean',
-              description: 'Makes the toast colorful based on the type.',
-            },
-            {
-              name: 'expand',
-              type: 'boolean',
-              description: 'Expands the toast to show the full content.',
-            },
-            {
-              name: 'duration',
-              type: 'number',
-              description: 'Duration in milliseconds.',
-            },
-            {
-              name: 'visibleToasts',
-              type: 'number',
-              description: 'Number of visible toasts.',
-            },
-            {
-              name: 'closeButton',
-              type: 'boolean',
-              description: 'Shows a close button.',
-            },
-            {
-              name: 'position',
-              type: '"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center"',
-              defaultValue: '"bottom-right"',
-              description: 'Position of the toast.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/SwitchDocs.tsx

@@ -1,86 +0,0 @@
-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 checked and not checked."
-    >
-      <ComponentShowcase
-        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>
-</div>`}
-      >
-        <div className="flex items-center space-x-2">
-          <Switch id="airplane-mode" />
-          <Label htmlFor="airplane-mode">Airplane Mode</Label>
-        </div>
-      </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,139 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-
-const invoices = [
-  {
-    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.">
-      <ComponentShowcase
-        title="Default"
-        description="A list of recent invoices."
-        code={`<Table>
-  <TableCaption>A list of your recent invoices.</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead className="w-[100px]">Invoice</TableHead>
-      <TableHead>Status</TableHead>
-      <TableHead>Method</TableHead>
-      <TableHead className="text-right">Amount</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    {invoices.map((invoice) => (
-      <TableRow key={invoice.invoice}>
-        <TableCell className="font-medium">{invoice.invoice}</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>
-          <TableCaption>A list of your recent invoices.</TableCaption>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[100px]">Invoice</TableHead>
-              <TableHead>Status</TableHead>
-              <TableHead>Method</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {invoices.map((invoice) => (
-              <TableRow key={invoice.invoice}>
-                <TableCell className="font-medium">{invoice.invoice}</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,223 +0,0 @@
-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';
-import { Label } from '@/components/ui/label';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
-export function TabsDocs() {
-  return (
-    <ComponentSection
-      title="Tabs"
-      description="A set of layered sections of content—known as tab panels—that are displayed one at a time."
-    >
-      <ComponentShowcase
-        title="Default"
-        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>
-    <TabsTrigger value="password">Password</TabsTrigger>
-  </TabsList>
-  <TabsContent value="account">
-    <Card>
-      <CardHeader>
-        <CardTitle>Account</CardTitle>
-        <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>`}
-      >
-        <Tabs defaultValue="account" className="w-[400px]">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="account">Account</TabsTrigger>
-            <TabsTrigger value="password">Password</TabsTrigger>
-          </TabsList>
-          <TabsContent value="account">
-            <Card>
-              <CardHeader>
-                <CardTitle>Account</CardTitle>
-                <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>
-      </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>
-  );
-}