@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/web/CheckboxDocs.tsx

@@ -1,95 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Checkbox, Label } from '@gv-tech/ui-web';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function CheckboxDocs() {
-  return (
-    <>
-      <ComponentShowcase title="Default" description="A basic checkbox." code={`<Checkbox id="terms" />`}>
-        <div className="flex items-center space-x-2">
-          <Checkbox id="terms" />
-          <Label htmlFor="terms">Accept terms and conditions</Label>
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Label"
-        description="A checkbox with a label."
-        code={`<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>`}
-      >
-        <div className="flex items-center space-x-2">
-          <Checkbox id="terms" />
-          <Label htmlFor="terms">Accept terms and conditions</Label>
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled checkbox."
-        code={`<div className="flex items-center space-x-2">
-  <Checkbox id="terms-disabled" disabled />
-  <Label htmlFor="terms-disabled">Accept terms and conditions</Label>
-</div>`}
-      >
-        <div className="flex items-center space-x-2">
-          <Checkbox id="terms-disabled" disabled />
-          <Label htmlFor="terms-disabled" className="text-muted-foreground">
-            Accept terms and conditions
-          </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.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/CollapsibleDocs.tsx

@@ -1,111 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@gv-tech/ui-web';
-import { ChevronsUpDown } from 'lucide-react';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import * as React from 'react';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function CollapsibleDocs() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <>
-      <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/web/CommandDocs.tsx

@@ -1,219 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Calculator, CreditCard, Settings, Smile, User } from 'lucide-react';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import {
-  Calendar,
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function CommandDocs() {
-  return (
-    <>
-      <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>
-    </>
-  );
-}

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

@@ -1,164 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuTrigger,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' 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>`}
-      >
-        <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>
-    </>
-  );
-}