@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/native/ContextMenuDocs.tsx

@@ -1,121 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function ContextMenuDocs() {
-  return (
-    <>
-      <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>`}
-      />
-
-      <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/DialogDocs.tsx

@@ -1,132 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function DialogDocs() {
-  return (
-    <>
-      <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>`}
-      />
-
-      <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/DrawerDocs.tsx

@@ -1,158 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function DrawerDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A responsive drawer."
-        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 pb-0">
-        <div className="flex items-center justify-center space-x-2">
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(-10)}
-            disabled={goal <= 200}
-          >
-            <Minus className="h-4 w-4" />
-            <span className="sr-only">Decrease</span>
-          </Button>
-          <div className="flex-1 text-center">
-            <div className="text-7xl font-bold tracking-tighter">
-              {goal}
-            </div>
-            <div className="text-[0.70rem] uppercase text-muted-foreground">
-              Calories/day
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="icon"
-            className="h-8 w-8 shrink-0 rounded-full"
-            onClick={() => onClick(10)}
-            disabled={goal >= 400}
-          >
-            <Plus className="h-4 w-4" />
-            <span className="sr-only">Increase</span>
-          </Button>
-        </div>
-        <div className="mt-3 h-[120px]">
-          <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={data}>
-              <Bar
-                dataKey="goal"
-                style={
-                  {
-                    fill: "hsl(var(--foreground))",
-                    opacity: 0.9,
-                  } as React.CSSProperties
-                }
-              />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-      <DrawerFooter>
-        <Button>Submit</Button>
-        <DrawerClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </div>
-  </DrawerContent>
-</Drawer>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Drawer component is built on top of{' '}
-          <a href="https://github.com/emilkowalski/vaul" className="underline" target="_blank" rel="noreferrer">
-            Vaul
-          </a>
-          .
-        </p>
-        <h4 className="text-lg font-medium mt-6">Drawer (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the drawer.',
-            },
-            {
-              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: 'shouldScaleBackground',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'Whether to scale the background when the drawer opens.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DrawerTrigger</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">DrawerContent</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.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/DropdownMenuDocs.tsx

@@ -1,168 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function DropdownMenuDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A simple dropdown menu."
-        code={`<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56">
-    <DropdownMenuLabel>My Account</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuGroup>
-      <DropdownMenuItem>
-        <User className="mr-2 h-4 w-4" />
-        <span>Profile</span>
-        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
-      </DropdownMenuItem>
-      ...
-    </DropdownMenuGroup>
-    ...
-    <DropdownMenuItem>
-      <SiGithub className="mr-2 h-4 w-4" />
-      <span>GitHub</span>
-    </DropdownMenuItem>
-    ...
-  </DropdownMenuContent>
-</DropdownMenu>`}
-      />
-
-      <ComponentShowcase
-        title="Checkboxes and Radios"
-        description="A dropdown menu with checkboxes and radio items."
-        code={`<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </DropdownMenuTrigger>
-  <DropdownMenuContent className="w-56">
-    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuCheckboxItem
-      checked={showStatusBar}
-      onCheckedChange={setShowStatusBar}
-    >
-      Status Bar
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuCheckboxItem
-      checked={showActivityBar}
-      onCheckedChange={setShowActivityBar}
-      disabled
-    >
-      Activity Bar
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuCheckboxItem
-      checked={showPanel}
-      onCheckedChange={setShowPanel}
-    >
-      Panel
-    </DropdownMenuCheckboxItem>
-    <DropdownMenuSeparator />
-    <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-    <DropdownMenuSeparator />
-    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-      <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
-    </DropdownMenuRadioGroup>
-  </DropdownMenuContent>
-</DropdownMenu>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The DropdownMenu component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Dropdown Menu
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">DropdownMenu (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the dropdown menu.',
-            },
-            {
-              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 dropdown menu.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the dropdown menu.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DropdownMenuCheckboxItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'checked',
-              type: 'boolean | "indeterminate"',
-              description: 'The controlled checked state of the item.',
-            },
-            {
-              name: 'onCheckedChange',
-              type: '(checked: boolean) => void',
-              description: 'Event handler called when the checked state changes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">DropdownMenuRadioGroup</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              description: 'The value of the selected item in the group.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when the value changes.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/HoverCardDocs.tsx

@@ -1,119 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function HoverCardDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A hover card showing user details."
-        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>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Hover Card component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/hover-card"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Hover Card
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">HoverCard (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the hover card.',
-            },
-            {
-              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: 'openDelay',
-              type: 'number',
-              defaultValue: '700',
-              description: 'The duration from when the mouse enters the trigger until the hover card opens.',
-            },
-            {
-              name: 'closeDelay',
-              type: 'number',
-              defaultValue: '300',
-              description: 'The duration from when the mouse leaves the trigger until the hover card closes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">HoverCardContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-            {
-              name: 'sideOffset',
-              type: 'number',
-              defaultValue: '4',
-              description: 'The distance in pixels from the trigger.',
-            },
-            {
-              name: 'align',
-              type: '"start" | "center" | "end"',
-              defaultValue: '"center"',
-              description: 'The preferred alignment against the trigger.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}