@gv-tech/design-system 2.5.0 → 2.5.1

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

@@ -1,156 +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 PopoverDocs() {
-  return (
-    <>
-      <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>`}
-      />
-
-      <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>
-    </>
-  );
-}

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

@@ -1,61 +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 ProgressDocs() {
-  return (
-    <>
-      <ComponentShowcase title="Default" description="A default progress bar." code={`<Progress value={33} />`} />
-
-      <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>
-    </>
-  );
-}

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

@@ -1,125 +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 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>`}
-      />
-
-      <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/native/ResizableDocs.tsx

@@ -1,118 +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 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>`}
-      />
-
-      <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/native/ScrollAreaDocs.tsx

@@ -1,92 +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 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>`}
-      />
-
-      <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>
-    </>
-  );
-}