@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,137 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Label, RadioGroup, RadioGroupItem } 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 RadioGroupDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default radio group."
-        code={`<RadioGroup defaultValue="option-one">
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-one" id="option-one" />
-    <Label htmlFor="option-one">Option One</Label>
-  </div>
-  <div className="flex items-center space-x-2">
-    <RadioGroupItem value="option-two" id="option-two" />
-    <Label htmlFor="option-two">Option Two</Label>
-  </div>
-</RadioGroup>`}
-      >
-        <RadioGroup defaultValue="option-one" value="option-one" onValueChange={() => {}}>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-one" id="option-one" />
-            <Label htmlFor="option-one">Option One</Label>
-          </div>
-          <div className="flex items-center space-x-2">
-            <RadioGroupItem value="option-two" id="option-two" />
-            <Label htmlFor="option-two">Option Two</Label>
-          </div>
-        </RadioGroup>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Radio Group component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/radio-group"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Radio Group
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">RadioGroup (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'string',
-              description: 'The value of the radio item that should be checked when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'The controlled value of the radio item to check.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with radio items.',
-            },
-            {
-              name: 'required',
-              type: 'boolean',
-              description:
-                'When true, indicates that the user must check a radio item before the owning form can be submitted.',
-            },
-            {
-              name: 'name',
-              type: 'string',
-              description: 'The name of the group. Submitted with its owning form as part of a name/value pair.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the radio group.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"vertical"',
-              description: 'The orientation of the component.',
-            },
-            {
-              name: 'loop',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'When true, keyboard navigation will loop from last item to first, and vice versa.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">RadioGroupItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              required: true,
-              description: 'The value given as data when submitted with a name.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the radio item.',
-            },
-            {
-              name: 'required',
-              type: 'boolean',
-              description:
-                'When true, indicates that the user must check the radio item before the owning form can be submitted.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,143 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } 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 ResizableDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A resizable panel group with three panels."
-        code={`<ResizablePanelGroup
-  direction="horizontal"
-  className="max-w-md rounded-lg border"
->
-  <ResizablePanel defaultSize={50}>
-    <div className="flex h-[200px] items-center justify-center p-6">
-      <span className="font-semibold">One</span>
-    </div>
-  </ResizablePanel>
-  <ResizableHandle />
-  <ResizablePanel defaultSize={50}>
-    <ResizablePanelGroup direction="vertical">
-      <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Two</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Three</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  </ResizablePanel>
-</ResizablePanelGroup>`}
-      >
-        <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
-          <ResizablePanel defaultSize={50}>
-            <div className="flex h-[200px] items-center justify-center p-6">
-              <span className="font-semibold">One</span>
-            </div>
-          </ResizablePanel>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={50}>
-            <ResizablePanelGroup direction="vertical">
-              <ResizablePanel defaultSize={25}>
-                <div className="flex h-full items-center justify-center p-6">
-                  <span className="font-semibold">Two</span>
-                </div>
-              </ResizablePanel>
-              <ResizableHandle />
-              <ResizablePanel defaultSize={75}>
-                <div className="flex h-full items-center justify-center p-6">
-                  <span className="font-semibold">Three</span>
-                </div>
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Resizable component is built on top of{' '}
-          <a
-            href="https://github.com/bvaughn/react-resizable-panels"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            react-resizable-panels
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">ResizablePanelGroup</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'direction',
-              type: '"horizontal" | "vertical"',
-              required: true,
-              description: 'The direction of the panels.',
-            },
-            {
-              name: 'onLayout',
-              type: '(sizes: number[]) => void',
-              description: 'Event handler called when the layout changes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ResizablePanel</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultSize',
-              type: 'number',
-              description: 'The initial size of the panel in percent.',
-            },
-            {
-              name: 'minSize',
-              type: 'number',
-              description: 'The minimum size of the panel in percent.',
-            },
-            {
-              name: 'maxSize',
-              type: 'number',
-              description: 'The maximum size of the panel in percent.',
-            },
-            {
-              name: 'onResize',
-              type: '(size: number) => void',
-              description: 'Event handler called when the panel is resized.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ResizableHandle</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'withHandle',
-              type: 'boolean',
-              description: 'Whether to render a grip handle.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,107 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ScrollArea, Separator } 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;
-
-const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-
-export function ScrollAreaDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default scroll area."
-        code={`<ScrollArea className="h-72 w-48 rounded-md border">
-  <div className="p-4">
-    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-    {tags.map((tag) => (
-      <>
-        <div key={tag} className="text-sm">
-          {tag}
-        </div>
-        <Separator className="my-2" />
-      </>
-    ))}
-  </div>
-</ScrollArea>`}
-      >
-        <ScrollArea className="h-72 w-48 rounded-md border">
-          <div className="p-4">
-            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
-            {tags.map((tag) => (
-              <div key={tag}>
-                <div className="text-sm">{tag}</div>
-                <Separator className="my-2" />
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Scroll Area component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/scroll-area"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Scroll Area
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">ScrollArea (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'type',
-              type: '"auto" | "always" | "scroll" | "hover"',
-              defaultValue: '"hover"',
-              description: 'Describes the nature of scrollbar visibility.',
-            },
-            {
-              name: 'scrollHideDelay',
-              type: 'number',
-              defaultValue: '600',
-              description:
-                'If type is "scroll" or "hover", this property determines how long the scrollbar remains visible before hiding.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the scroll area.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ScrollBar</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"vertical"',
-              description: 'The orientation of the scrollbar.',
-            },
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,203 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { toast } from 'sonner';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import {
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Search,
-  SearchTrigger,
-} from '@gv-tech/ui-web';
-import * as React from 'react';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function SearchDocs() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <>
-      <ComponentShowcase
-        title="Quick Search"
-        description="A shortcut-ready search trigger for headers. Press Cmd+K or Ctrl+K to open."
-        code={`<Search>
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-      <CommandItem>Calculator</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Search>
-<SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />`}
-      >
-        <div className="flex items-center gap-4">
-          <Search open={open} onOpenChange={setOpen}>
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-              <CommandEmpty>No results found.</CommandEmpty>
-              <CommandGroup heading="Suggestions">
-                <CommandItem
-                  onSelect={() => {
-                    toast.success('Selected Calendar');
-                    setOpen(false);
-                  }}
-                >
-                  Calendar
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    toast.success('Selected Search Emoji');
-                    setOpen(false);
-                  }}
-                >
-                  Search Emoji
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    toast.success('Selected Calculator');
-                    setOpen(false);
-                  }}
-                >
-                  Calculator
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Search>
-          <SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />
-          <p className="text-sm text-muted-foreground">Try clicking the trigger or pressing ⌘K</p>
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Compact Variant"
-        description="A smaller version of the trigger, ideal for dense headers or mobile-first layouts."
-        code={`<SearchTrigger variant="compact" />`}
-      >
-        <div className="flex items-center gap-4">
-          <SearchTrigger variant="compact" onClick={() => setOpen(true)} />
-          <p className="text-sm text-muted-foreground">Compact trigger showing only icon and shortcut</p>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Search Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              required: false,
-              description: 'Whether the search dialog is open.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              required: false,
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'children',
-              type: 'ReactNode',
-              required: false,
-              description: 'The search content (CommandInput, CommandList, etc.).',
-            },
-          ]}
-        />
-      </div>
-
-      <div className="mt-8 space-y-4">
-        <h3 className="text-xl font-semibold">SearchTrigger Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              required: false,
-              description: 'Additional CSS classes to apply.',
-            },
-            {
-              name: 'onClick',
-              type: 'MouseEventHandler',
-              required: false,
-              description: 'Click event handler to trigger the search.',
-            },
-            {
-              name: 'placeholder',
-              type: 'string',
-              defaultValue: '"Search docs..."',
-              required: false,
-              description: 'The placeholder text to display in the trigger.',
-            },
-            {
-              name: 'variant',
-              type: '"default" | "compact"',
-              defaultValue: '"default"',
-              required: false,
-              description: 'The visual style of the trigger.',
-            },
-          ]}
-        />
-      </div>
-
-      <div className="mt-12 space-y-6">
-        <div>
-          <h3 className="text-xl font-semibold">Integrations</h3>
-          <p className="mt-2 text-muted-foreground">
-            The Search component is designed to be highly composable, making it easy to integrate with external search
-            providers like Algolia, ElasticSearch, or custom APIs.
-          </p>
-        </div>
-
-        <div className="rounded-lg border bg-muted/50 p-6">
-          <h4 className="font-medium">External Provider Pattern</h4>
-          <p className="mt-1 text-sm text-muted-foreground">
-            You can use the `onValueChange` prop of `CommandInput` to trigger external searches and dynamically render
-            `CommandGroup` and `CommandItem` components with the results.
-          </p>
-          <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-            <code>{`const [results, setResults] = React.useState([]);
-
-const handleSearch = async (query) => {
-  const data = await algoliaIndex.search(query);
-  setResults(data.hits);
-};
-
-return (
-  <Search>
-    <CommandInput 
-      placeholder="Search docs..." 
-      onValueChange={handleSearch} 
-    />
-    <CommandList>
-      {results.length > 0 ? (
-        <CommandGroup heading="Results">
-          {results.map((hit) => (
-            <CommandItem key={hit.objectID}>
-              {hit.title}
-            </CommandItem>
-          ))}
-        </CommandGroup>
-      ) : (
-        <CommandEmpty>No results found.</CommandEmpty>
-      )}
-    </CommandList>
-  </Search>
-);`}</code>
-          </pre>
-        </div>
-      </div>
-    </>
-  );
-}