@gv-tech/design-system 0.9.0 → 1.1.0

package/src/pages/components/ContextMenuDocs.tsx

@@ -0,0 +1,93 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+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>
+    </ComponentSection>
+  );
+}

package/src/pages/components/DialogDocs.tsx

@@ -0,0 +1,80 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+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 modal dialog that interrupts the user with important content and expects a response."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A basic dialog with a trigger button."
+        code={`<Dialog>
+  <DialogTrigger asChild>
+    <Button variant="outline">Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here.
+      </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" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>`}
+      >
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline">Open Dialog</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>
+            </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>
+    </ComponentSection>
+  );
+}

package/src/pages/components/DrawerDocs.tsx

@@ -0,0 +1,79 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function DrawerDocs() {
+  return (
+    <ComponentSection
+      title="Drawer"
+      description="A drawer component that slides up from the bottom of the screen on mobile devices."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A bottom drawer with form content."
+        code={`<Drawer>
+  <DrawerTrigger asChild>
+    <Button variant="outline">Open Drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <div className="mx-auto w-full max-w-sm">
+      <DrawerHeader>
+        <DrawerTitle>Move Goal</DrawerTitle>
+        <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+      </DrawerHeader>
+      <div className="p-4">
+        <div className="grid gap-4">
+          <Label htmlFor="goal">Goal</Label>
+          <Input id="goal" type="number" defaultValue="350" />
+        </div>
+      </div>
+      <DrawerFooter>
+        <Button>Submit</Button>
+        <DrawerClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </div>
+  </DrawerContent>
+</Drawer>`}
+      >
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button variant="outline">Open Drawer</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <div className="mx-auto w-full max-w-sm">
+              <DrawerHeader>
+                <DrawerTitle>Move Goal</DrawerTitle>
+                <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+              </DrawerHeader>
+              <div className="p-4">
+                <div className="grid gap-4">
+                  <Label htmlFor="goal">Goal</Label>
+                  <Input id="goal" type="number" defaultValue="350" />
+                </div>
+              </div>
+              <DrawerFooter>
+                <Button>Submit</Button>
+                <DrawerClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DrawerClose>
+              </DrawerFooter>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/DropdownMenuDocs.tsx

@@ -0,0 +1,51 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export function DropdownMenuDocs() {
+  return (
+    <ComponentSection
+      title="Dropdown Menu"
+      description="Displays a menu to the user—such as a set of actions or functions—triggered by a button."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A basic dropdown menu."
+        code={`<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Billing</DropdownMenuItem>
+    <DropdownMenuItem>Team</DropdownMenuItem>
+    <DropdownMenuItem>Subscription</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>`}
+      >
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Profile</DropdownMenuItem>
+            <DropdownMenuItem>Billing</DropdownMenuItem>
+            <DropdownMenuItem>Team</DropdownMenuItem>
+            <DropdownMenuItem>Subscription</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/FormDocs.tsx

@@ -0,0 +1,84 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function FormDocs() {
+  return (
+    <ComponentSection title="Form" description="Building forms with React Hook Form and Zod validation.">
+      <ComponentShowcase
+        title="Basic Form"
+        description="A simple form layout with labels and inputs."
+        code={`<form className="space-y-4 w-full max-w-sm">
+  <div className="space-y-2">
+    <Label htmlFor="email">Email</Label>
+    <Input type="email" id="email" placeholder="Enter your email" />
+  </div>
+  <div className="space-y-2">
+    <Label htmlFor="password">Password</Label>
+    <Input type="password" id="password" placeholder="Enter your password" />
+  </div>
+  <Button type="submit" className="w-full">Submit</Button>
+</form>`}
+      >
+        <form className="space-y-4 w-full max-w-sm">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input type="email" id="email" placeholder="Enter your email" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input type="password" id="password" placeholder="Enter your password" />
+          </div>
+          <Button type="submit" className="w-full">
+            Submit
+          </Button>
+        </form>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Inline Form"
+        description="A horizontal form layout for compact displays."
+        code={`<form className="flex gap-2 items-end w-full max-w-md">
+  <div className="flex-1 space-y-2">
+    <Label htmlFor="inline-email">Email</Label>
+    <Input type="email" id="inline-email" placeholder="Enter your email" />
+  </div>
+  <Button type="submit">Subscribe</Button>
+</form>`}
+      >
+        <form className="flex gap-2 items-end w-full max-w-md">
+          <div className="flex-1 space-y-2">
+            <Label htmlFor="inline-email">Email</Label>
+            <Input type="email" id="inline-email" placeholder="Enter your email" />
+          </div>
+          <Button type="submit">Subscribe</Button>
+        </form>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Form with Description"
+        description="Form fields with helper text below."
+        code={`<form className="space-y-4 w-full max-w-sm">
+  <div className="space-y-2">
+    <Label htmlFor="username">Username</Label>
+    <Input id="username" placeholder="johndoe" />
+    <p className="text-sm text-muted-foreground">
+      This is your public display name.
+    </p>
+  </div>
+  <Button type="submit">Save changes</Button>
+</form>`}
+      >
+        <form className="space-y-4 w-full max-w-sm">
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input id="username" placeholder="johndoe" />
+            <p className="text-sm text-muted-foreground">This is your public display name.</p>
+          </div>
+          <Button type="submit">Save changes</Button>
+        </form>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/HoverCardDocs.tsx

@@ -0,0 +1,59 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { CalendarDays } from 'lucide-react';
+
+export function HoverCardDocs() {
+  return (
+    <ComponentSection title="Hover Card" description="For sighted users to preview content available behind a link.">
+      <ComponentShowcase
+        title="Default"
+        description="A hover card showing user profile information."
+        code={`<HoverCard>
+  <HoverCardTrigger asChild>
+    <Button variant="link">@nextjs</Button>
+  </HoverCardTrigger>
+  <HoverCardContent className="w-80">
+    <div className="flex justify-between space-x-4">
+      <Avatar>
+        <AvatarImage src="https://github.com/vercel.png" />
+        <AvatarFallback>VC</AvatarFallback>
+      </Avatar>
+      <div className="space-y-1">
+        <h4 className="text-sm font-semibold">@nextjs</h4>
+        <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
+        <div className="flex items-center pt-2">
+          <CalendarDays className="mr-2 h-4 w-4 opacity-70" />
+          <span className="text-xs text-muted-foreground">Joined December 2021</span>
+        </div>
+      </div>
+    </div>
+  </HoverCardContent>
+</HoverCard>`}
+      >
+        <HoverCard>
+          <HoverCardTrigger asChild>
+            <Button variant="link">@nextjs</Button>
+          </HoverCardTrigger>
+          <HoverCardContent className="w-80">
+            <div className="flex justify-between space-x-4">
+              <Avatar>
+                <AvatarImage src="https://github.com/vercel.png" />
+                <AvatarFallback>VC</AvatarFallback>
+              </Avatar>
+              <div className="space-y-1">
+                <h4 className="text-sm font-semibold">@nextjs</h4>
+                <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
+                <div className="flex items-center pt-2">
+                  <CalendarDays className="mr-2 h-4 w-4 opacity-70" />
+                  <span className="text-xs text-muted-foreground">Joined December 2021</span>
+                </div>
+              </div>
+            </div>
+          </HoverCardContent>
+        </HoverCard>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/InputDocs.tsx

@@ -0,0 +1,68 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function InputDocs() {
+  return (
+    <ComponentSection title="Input" description="Displays a form input field for collecting user text input.">
+      <ComponentShowcase
+        title="Default"
+        description="The default input field."
+        code={`<Input type="text" placeholder="Enter text..." />`}
+      >
+        <Input type="text" placeholder="Enter text..." className="max-w-xs" />
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Label"
+        description="Pair inputs with labels for accessibility."
+        code={`<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>`}
+      >
+        <div className="grid w-full max-w-sm items-center gap-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input type="email" id="email" placeholder="Email" />
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="File Input"
+        description="Input for file uploads."
+        code={`<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="picture">Picture</Label>
+  <Input id="picture" type="file" />
+</div>`}
+      >
+        <div className="grid w-full max-w-sm items-center gap-1.5">
+          <Label htmlFor="picture">Picture</Label>
+          <Input id="picture" type="file" />
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Disabled"
+        description="Disabled state prevents user interaction."
+        code={`<Input disabled type="text" placeholder="Disabled" />`}
+      >
+        <Input disabled type="text" placeholder="Disabled" className="max-w-xs" />
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Button"
+        description="Combine input with a button for search patterns."
+        code={`<div className="flex w-full max-w-sm items-center space-x-2">
+  <Input type="email" placeholder="Email" />
+  <Button type="submit">Subscribe</Button>
+</div>`}
+      >
+        <div className="flex w-full max-w-sm items-center space-x-2">
+          <Input type="email" placeholder="Email" />
+          <Button type="submit">Subscribe</Button>
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/LabelDocs.tsx

@@ -0,0 +1,23 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function LabelDocs() {
+  return (
+    <ComponentSection title="Label" description="Renders an accessible label associated with form controls.">
+      <ComponentShowcase
+        title="Default"
+        description="A basic label with an input."
+        code={`<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>`}
+      >
+        <div className="grid w-full max-w-sm items-center gap-1.5">
+          <Label htmlFor="email-label">Email</Label>
+          <Input type="email" id="email-label" placeholder="Email" />
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/MenubarDocs.tsx

@@ -0,0 +1,117 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '@/components/ui/menubar';
+
+export function MenubarDocs() {
+  return (
+    <ComponentSection title="Menubar" description="A visually persistent menu common in desktop applications.">
+      <ComponentShowcase
+        title="Default"
+        description="A menubar with submenus and shortcuts."
+        code={`<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>New Window</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Share</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Print</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+  <MenubarMenu>
+    <MenubarTrigger>Edit</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+      </MenubarItem>
+      <MenubarSeparator />
+      <MenubarSub>
+        <MenubarSubTrigger>Find</MenubarSubTrigger>
+        <MenubarSubContent>
+          <MenubarItem>Search the web</MenubarItem>
+          <MenubarItem>Find...</MenubarItem>
+          <MenubarItem>Find and Replace</MenubarItem>
+        </MenubarSubContent>
+      </MenubarSub>
+    </MenubarContent>
+  </MenubarMenu>
+  <MenubarMenu>
+    <MenubarTrigger>View</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        Zoom In <MenubarShortcut>⌘+</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>
+        Zoom Out <MenubarShortcut>⌘-</MenubarShortcut>
+      </MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>`}
+      >
+        <Menubar>
+          <MenubarMenu>
+            <MenubarTrigger>File</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>New Window</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Share</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Print</MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>Edit</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarSub>
+                <MenubarSubTrigger>Find</MenubarSubTrigger>
+                <MenubarSubContent>
+                  <MenubarItem>Search the web</MenubarItem>
+                  <MenubarItem>Find...</MenubarItem>
+                  <MenubarItem>Find and Replace</MenubarItem>
+                </MenubarSubContent>
+              </MenubarSub>
+            </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+            <MenubarTrigger>View</MenubarTrigger>
+            <MenubarContent>
+              <MenubarItem>
+                Zoom In <MenubarShortcut>⌘+</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                Zoom Out <MenubarShortcut>⌘-</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}