@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/PopoverDocs.tsx

@@ -1,183 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-
-export function PopoverDocs() {
-  return (
-    <ComponentSection title="Popover" description="Displays rich content in a portal, triggered by a button.">
-      <ComponentShowcase
-        title="Default"
-        description="A default popover."
-        code={`<Popover>
-  <PopoverTrigger asChild>
-    <Button variant="outline">Open popover</Button>
-  </PopoverTrigger>
-  <PopoverContent className="w-80">
-    <div className="grid gap-4">
-      <div className="space-y-2">
-        <h4 className="font-medium leading-none">Dimensions</h4>
-        <p className="text-sm text-muted-foreground">
-          Set the dimensions for the layer.
-        </p>
-      </div>
-      <div className="grid gap-2">
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="width">Width</Label>
-          <Input
-            id="width"
-            defaultValue="100%"
-            className="col-span-2 h-8"
-          />
-        </div>
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="maxWidth">Max. width</Label>
-          <Input
-            id="maxWidth"
-            defaultValue="300px"
-            className="col-span-2 h-8"
-          />
-        </div>
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="height">Height</Label>
-          <Input
-            id="height"
-            defaultValue="25px"
-            className="col-span-2 h-8"
-          />
-        </div>
-        <div className="grid grid-cols-3 items-center gap-4">
-          <Label htmlFor="maxHeight">Max. height</Label>
-          <Input
-            id="maxHeight"
-            defaultValue="none"
-            className="col-span-2 h-8"
-          />
-        </div>
-      </div>
-    </div>
-  </PopoverContent>
-</Popover>`}
-      >
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline">Open popover</Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80">
-            <div className="grid gap-4">
-              <div className="space-y-2">
-                <h4 className="font-medium leading-none">Dimensions</h4>
-                <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-              </div>
-              <div className="grid gap-2">
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="width">Width</Label>
-                  <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
-                </div>
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="maxWidth">Max. width</Label>
-                  <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
-                </div>
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="height">Height</Label>
-                  <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
-                </div>
-                <div className="grid grid-cols-3 items-center gap-4">
-                  <Label htmlFor="maxHeight">Max. height</Label>
-                  <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
-                </div>
-              </div>
-            </div>
-          </PopoverContent>
-        </Popover>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Popover component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/popover"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Popover
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Popover (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the popover when it is initially rendered.',
-            },
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the popover.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'modal',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'The modality of the popover.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">PopoverContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'onOpenAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves into the component after opening.',
-            },
-            {
-              name: 'onCloseAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves to the trigger after closing.',
-            },
-            {
-              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: 'onFocusOutside',
-              type: '(event: FocusOutsideEvent) => void',
-              description: 'Event handler called when focus moves outside the bounds of the component.',
-            },
-            {
-              name: 'onInteractOutside',
-              type: '(event: PointerDownOutsideEvent | FocusOutsideEvent) => 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>
-  );
-}

package/src/pages/components/ProgressDocs.tsx

@@ -1,64 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Progress } from '@/components/ui/progress';
-import { useEffect, useState } from 'react';
-
-export function ProgressDocs() {
-  const [progress, setProgress] = useState(13);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setProgress(66), 500);
-    return () => clearTimeout(timer);
-  }, []);
-
-  return (
-    <ComponentSection
-      title="Progress"
-      description="Displays an indicator showing the completion progress of a task, typically displayed as a progress bar."
-    >
-      <ComponentShowcase title="Default" description="A default progress bar." code={`<Progress value={33} />`}>
-        <Progress value={progress} className="w-[60%]" />
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Progress component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/progress"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Progress
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Progress (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'number | null',
-              description: 'The progress value.',
-            },
-            {
-              name: 'max',
-              type: 'number',
-              defaultValue: '100',
-              description: 'The maximum progress value.',
-            },
-            {
-              name: 'getValueLabel',
-              type: '(value: number, max: number) => string',
-              defaultValue: '"${value}%"',
-              description:
-                'A function to get the accessible label text representing the current value in a human-readable format.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/RadioGroupDocs.tsx

@@ -1,132 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-
-export function RadioGroupDocs() {
-  return (
-    <ComponentSection
-      title="Radio Group"
-      description="A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time."
-    >
-      <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">
-          <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>
-    </ComponentSection>
-  );
-}

package/src/pages/components/ResizableDocs.tsx

@@ -1,137 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
-
-export function ResizableDocs() {
-  return (
-    <ComponentSection
-      title="Resizable"
-      description="Accessible resizable panel groups and layouts with keyboard support."
-    >
-      <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>
-    </ComponentSection>
-  );
-}

package/src/pages/components/ScrollAreaDocs.tsx

@@ -1,102 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
-
-const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-
-export function ScrollAreaDocs() {
-  return (
-    <ComponentSection
-      title="Scroll-area"
-      description="Augments native scroll functionality for custom, cross-browser styling."
-    >
-      <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>
-    </ComponentSection>
-  );
-}