@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/CollapsibleDocs.tsx

@@ -1,103 +0,0 @@
-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';
-import * as React from 'react';
-
-export function CollapsibleDocs() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <ComponentSection title="Collapsible" description="An interactive component which expands/collapses a panel.">
-      <ComponentShowcase
-        title="Default"
-        description="A collapsible panel with animation."
-        code={`const [isOpen, setIsOpen] = React.useState(false);
-
-<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-  <div className="flex items-center justify-between space-x-4 px-4">
-    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
-    <CollapsibleTrigger asChild>
-      <Button variant="ghost" size="sm" className="w-9 p-0">
-        <ChevronsUpDown className="h-4 w-4" />
-      </Button>
-    </CollapsibleTrigger>
-  </div>
-  <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
-  <CollapsibleContent className="space-y-2">
-    <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
-    <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
-  </CollapsibleContent>
-</Collapsible>`}
-      >
-        <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-          <div className="flex items-center justify-between space-x-4 px-4">
-            <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
-            <CollapsibleTrigger asChild>
-              <Button variant="ghost" size="sm" className="w-9 p-0">
-                <ChevronsUpDown className="h-4 w-4" />
-                <span className="sr-only">Toggle</span>
-              </Button>
-            </CollapsibleTrigger>
-          </div>
-          <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
-          <CollapsibleContent className="space-y-2">
-            <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
-            <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
-          </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,209 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '@/components/ui/command';
-import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react';
-
-export function CommandDocs() {
-  return (
-    <ComponentSection title="Command" description="A fast, composable command menu for React.">
-      <ComponentShowcase
-        title="Default"
-        description="A command palette with search and groups."
-        code={`<Command className="rounded-lg border shadow-md md:min-w-[450px]">
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>
-        <Calendar className="mr-2 h-4 w-4" />
-        <span>Calendar</span>
-      </CommandItem>
-      <CommandItem>
-        <Smile className="mr-2 h-4 w-4" />
-        <span>Search Emoji</span>
-      </CommandItem>
-      <CommandItem>
-        <Calculator className="mr-2 h-4 w-4" />
-        <span>Calculator</span>
-      </CommandItem>
-    </CommandGroup>
-    <CommandSeparator />
-    <CommandGroup heading="Settings">
-      <CommandItem>
-        <User className="mr-2 h-4 w-4" />
-        <span>Profile</span>
-        <CommandShortcut>⌘P</CommandShortcut>
-      </CommandItem>
-      <CommandItem>
-        <CreditCard className="mr-2 h-4 w-4" />
-        <span>Billing</span>
-        <CommandShortcut>⌘B</CommandShortcut>
-      </CommandItem>
-      <CommandItem>
-        <Settings className="mr-2 h-4 w-4" />
-        <span>Settings</span>
-        <CommandShortcut>⌘S</CommandShortcut>
-      </CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>`}
-      >
-        <Command className="rounded-lg border shadow-md md:min-w-[450px]">
-          <CommandInput placeholder="Type a command or search..." />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Suggestions">
-              <CommandItem>
-                <Calendar className="mr-2 h-4 w-4" />
-                <span>Calendar</span>
-              </CommandItem>
-              <CommandItem>
-                <Smile className="mr-2 h-4 w-4" />
-                <span>Search Emoji</span>
-              </CommandItem>
-              <CommandItem>
-                <Calculator className="mr-2 h-4 w-4" />
-                <span>Calculator</span>
-              </CommandItem>
-            </CommandGroup>
-            <CommandSeparator />
-            <CommandGroup heading="Settings">
-              <CommandItem>
-                <User className="mr-2 h-4 w-4" />
-                <span>Profile</span>
-                <CommandShortcut>⌘P</CommandShortcut>
-              </CommandItem>
-              <CommandItem>
-                <CreditCard className="mr-2 h-4 w-4" />
-                <span>Billing</span>
-                <CommandShortcut>⌘B</CommandShortcut>
-              </CommandItem>
-              <CommandItem>
-                <Settings className="mr-2 h-4 w-4" />
-                <span>Settings</span>
-                <CommandShortcut>⌘S</CommandShortcut>
-              </CommandItem>
-            </CommandGroup>
-          </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,158 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from '@/components/ui/context-menu';
-
-export function ContextMenuDocs() {
-  return (
-    <ComponentSection
-      title="Context Menu"
-      description="Displays a menu to the user—such as a set of actions or functions—triggered by right-click."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="Right-click to open the context menu."
-        code={`<ContextMenu>
-  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-    Right click here
-  </ContextMenuTrigger>
-  <ContextMenuContent className="w-64">
-    <ContextMenuItem>
-      Back
-      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-    </ContextMenuItem>
-    <ContextMenuItem disabled>
-      Forward
-      <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-    </ContextMenuItem>
-    <ContextMenuItem>
-      Reload
-      <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-    </ContextMenuItem>
-    <ContextMenuSub>
-      <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
-      <ContextMenuSubContent className="w-48">
-        <ContextMenuItem>Save Page As...</ContextMenuItem>
-        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem>Developer Tools</ContextMenuItem>
-      </ContextMenuSubContent>
-    </ContextMenuSub>
-    <ContextMenuSeparator />
-    <ContextMenuItem>
-      View Page Source
-      <ContextMenuShortcut>⌘U</ContextMenuShortcut>
-    </ContextMenuItem>
-  </ContextMenuContent>
-</ContextMenu>`}
-      >
-        <ContextMenu>
-          <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
-            Right click here
-          </ContextMenuTrigger>
-          <ContextMenuContent className="w-64">
-            <ContextMenuItem>
-              Back
-              <ContextMenuShortcut>⌘[</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem disabled>
-              Forward
-              <ContextMenuShortcut>⌘]</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuItem>
-              Reload
-              <ContextMenuShortcut>⌘R</ContextMenuShortcut>
-            </ContextMenuItem>
-            <ContextMenuSub>
-              <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
-              <ContextMenuSubContent className="w-48">
-                <ContextMenuItem>Save Page As...</ContextMenuItem>
-                <ContextMenuItem>Create Shortcut...</ContextMenuItem>
-                <ContextMenuSeparator />
-                <ContextMenuItem>Developer Tools</ContextMenuItem>
-              </ContextMenuSubContent>
-            </ContextMenuSub>
-            <ContextMenuSeparator />
-            <ContextMenuItem>
-              View Page Source
-              <ContextMenuShortcut>⌘U</ContextMenuShortcut>
-            </ContextMenuItem>
-          </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,167 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-export function DialogDocs() {
-  return (
-    <ComponentSection
-      title="Dialog"
-      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 and content."
-        code={`<Dialog>
-  <DialogTrigger asChild>
-    <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'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" 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>
-      <Button type="submit">Save changes</Button>
-    </DialogFooter>
-  </DialogContent>
-</Dialog>`}
-      >
-        <Dialog>
-          <DialogTrigger asChild>
-            <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'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" 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>
-              <Button type="submit">Save changes</Button>
-            </DialogFooter>
-          </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>
-  );
-}