@gv-tech/design-system 1.1.0 → 2.0.0

package/src/pages/components/CheckboxDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
@@ -44,6 +45,63 @@ export function CheckboxDocs() {
           </Label>
         </div>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Checkbox component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/checkbox"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Checkbox
+          </a>
+          .
+        </p>
+        <PropsTable
+          props={[
+            {
+              name: 'checked',
+              type: 'boolean | "indeterminate"',
+              description: 'The controlled checked state of the checkbox.',
+            },
+            {
+              name: 'defaultChecked',
+              type: 'boolean | "indeterminate"',
+              description: 'The default checked state when uncontrolled.',
+            },
+            {
+              name: 'onCheckedChange',
+              type: '(checked: boolean | "indeterminate") => void',
+              description: 'Event handler called when the checked state changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the checkbox.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description:
+                'When true, indicates that the user must check the checkbox before the owning form can be submitted.',
+            },
+            {
+              name: 'name',
+              type: 'string',
+              description: 'The name of the checkbox. 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/CollapsibleDocs.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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { ChevronsUpDown } from 'lucide-react';
@@ -47,6 +48,56 @@ export function CollapsibleDocs() {
           </CollapsibleContent>
         </Collapsible>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Collapsible component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/collapsible"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Collapsible
+          </a>
+          .
+        </p>
+        <PropsTable
+          props={[
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the collapsible.',
+            },
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The default open state when uncontrolled.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the collapsible.',
+            },
+          ]}
+        />
+        <h4 className="text-lg font-medium mt-6">CollapsibleContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/CommandDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import {
   Command,
   CommandEmpty,
@@ -95,6 +96,114 @@ export function CommandDocs() {
           </CommandList>
         </Command>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Command component is built on top of{' '}
+          <a href="https://cmdk.paco.me/" className="underline" target="_blank" rel="noreferrer">
+            cmdk
+          </a>
+          .
+        </p>
+        <h4 className="text-lg font-medium mt-6">Command (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'label',
+              type: 'string',
+              description: 'Accessible label for the command menu.',
+            },
+            {
+              name: 'shouldFilter',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'Whether to filter items based on input.',
+            },
+            {
+              name: 'filter',
+              type: '(value: string, search: string) => number',
+              description: 'Custom filter function.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Controlled value of the selected item.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when value changes.',
+            },
+            {
+              name: 'loop',
+              type: 'boolean',
+              description: 'Whether to loop selection when navigating with keys.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">CommandInput</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'placeholder',
+              type: 'string',
+              description: 'Placeholder text for the input.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Controlled value of the input.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when input value changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">CommandList</h4>
+        <p className="text-sm text-muted-foreground">Contains items and groups.</p>
+
+        <h4 className="text-lg font-medium mt-6">CommandItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the item is disabled.',
+            },
+            {
+              name: 'onSelect',
+              type: '(value: string) => void',
+              description: 'Event handler called when the item is selected.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Unique value for the item. Defaults to text content if not provided.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">CommandGroup</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'heading',
+              type: 'ReactNode',
+              description: 'Heading for the group.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'Unique value for the group.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/ContextMenuDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -88,6 +89,70 @@ export function ContextMenuDocs() {
           </ContextMenuContent>
         </ContextMenu>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Context Menu component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/context-menu"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Context Menu
+          </a>
+          .
+        </p>
+        <h4 className="text-lg font-medium mt-6">ContextMenu (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'modal',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'The modality of the context menu.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ContextMenuTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the trigger is disabled.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">ContextMenuItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'onSelect',
+              type: '(event: Event) => void',
+              description: 'Event handler called when the item is selected.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the item is disabled.',
+            },
+            {
+              name: 'textValue',
+              type: 'string',
+              description: 'Text representation of the item for typeahead support.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/DialogDocs.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 {
   Dialog,
@@ -16,26 +17,34 @@ export function DialogDocs() {
   return (
     <ComponentSection
       title="Dialog"
-      description="A modal dialog that interrupts the user with important content and expects a response."
+      description="A window overlaid on either the primary window or another dialog window, rendering the content underneath inert."
     >
       <ComponentShowcase
         title="Default"
-        description="A basic dialog with a trigger button."
+        description="A basic dialog with a trigger and content."
         code={`<Dialog>
   <DialogTrigger asChild>
-    <Button variant="outline">Open Dialog</Button>
+    <Button variant="outline">Edit Profile</Button>
   </DialogTrigger>
-  <DialogContent>
+  <DialogContent className="sm:max-w-[425px]">
     <DialogHeader>
       <DialogTitle>Edit profile</DialogTitle>
       <DialogDescription>
-        Make changes to your profile here.
+        Make changes to your profile here. Click save when you're done.
       </DialogDescription>
     </DialogHeader>
     <div className="grid gap-4 py-4">
       <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="name" className="text-right">Name</Label>
-        <Input id="name" className="col-span-3" />
+        <Label htmlFor="name" className="text-right">
+          Name
+        </Label>
+        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+      </div>
+      <div className="grid grid-cols-4 items-center gap-4">
+        <Label htmlFor="username" className="text-right">
+          Username
+        </Label>
+        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
       </div>
     </div>
     <DialogFooter>
@@ -46,14 +55,12 @@ export function DialogDocs() {
       >
         <Dialog>
           <DialogTrigger asChild>
-            <Button variant="outline">Open Dialog</Button>
+            <Button variant="outline">Edit Profile</Button>
           </DialogTrigger>
           <DialogContent className="sm:max-w-[425px]">
             <DialogHeader>
               <DialogTitle>Edit profile</DialogTitle>
-              <DialogDescription>
-                Make changes to your profile here. Click save when you&apos;re done.
-              </DialogDescription>
+              <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
             </DialogHeader>
             <div className="grid gap-4 py-4">
               <div className="grid grid-cols-4 items-center gap-4">
@@ -75,6 +82,86 @@ export function DialogDocs() {
           </DialogContent>
         </Dialog>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Dialog component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/dialog"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Dialog
+          </a>
+          .
+        </p>
+        <h4 className="text-lg font-medium mt-6">Dialog (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 uncontrolled.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'modal',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'The modality of the dialog.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">DialogTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'asChild',
+              type: 'boolean',
+              description: 'Change the default rendered element for the one passed as a child.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">DialogContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'onEscapeKeyDown',
+              type: '(event: KeyboardEvent) => void',
+              description: 'Event handler called when the escape key is down.',
+            },
+            {
+              name: 'onPointerDownOutside',
+              type: '(event: PointerDownOutsideEvent) => void',
+              description: 'Event handler called when a pointer event occurs outside the bounds of the component.',
+            },
+            {
+              name: 'onInteractOutside',
+              type: '(event: React.FocusEvent | MouseEvent | TouchEvent) => void',
+              description:
+                'Event handler called when an interaction (pointer or focus) happens outside the bounds of the component.',
+            },
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }