@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/web/SelectDocs.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 {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function SelectDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default select component."
-        code={`<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Select a fruit" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      <SelectLabel>Fruits</SelectLabel>
-      <SelectItem value="apple" label="Apple">Apple</SelectItem>
-      <SelectItem value="banana" label="Banana">Banana</SelectItem>
-      <SelectItem value="blueberry" label="Blueberry">Blueberry</SelectItem>
-      <SelectItem value="grapes" label="Grapes">Grapes</SelectItem>
-      <SelectItem value="pineapple" label="Pineapple">Pineapple</SelectItem>
-    </SelectGroup>
-  </SelectContent>
-</Select>`}
-      >
-        <Select>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Fruits</SelectLabel>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-              <SelectItem value="blueberry">Blueberry</SelectItem>
-              <SelectItem value="grapes">Grapes</SelectItem>
-              <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Select component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/select"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Select
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Select (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'string',
-              description: 'The value of the select when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'The controlled value of the select.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the select.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the select.',
-            },
-            {
-              name: 'name',
-              type: 'string',
-              description: 'The name of the select. Submitted with its owning form as part of a name/value pair.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with select.',
-            },
-            {
-              name: 'required',
-              type: 'boolean',
-              description:
-                'When true, indicates that the user must select a value before the owning form can be submitted.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">SelectTrigger</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">SelectItem</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 item.',
-            },
-            {
-              name: 'textValue',
-              type: 'string',
-              description:
-                'Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the Item.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,88 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { 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;
-
-export function SeparatorDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A horizontal separator."
-        code={`<div>
-  <div className="space-y-1">
-    <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-    <p className="text-sm text-muted-foreground">
-      An open-source UI component library.
-    </p>
-  </div>
-  <Separator className="my-4" />
-  <div className="flex h-5 items-center space-x-4 text-sm">
-    <div>Blog</div>
-    <Separator orientation="vertical" />
-    <div>Docs</div>
-    <Separator orientation="vertical" />
-    <div>Source</div>
-  </div>
-</div>`}
-      >
-        <div>
-          <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-            <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
-          </div>
-          <Separator className="my-4" />
-          <div className="flex h-5 items-center space-x-4 text-sm">
-            <div>Blog</div>
-            <Separator orientation="vertical" />
-            <div>Docs</div>
-            <Separator orientation="vertical" />
-            <div>Source</div>
-          </div>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Separator component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/separator"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Separator
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Separator (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the separator.',
-            },
-            {
-              name: 'decorative',
-              type: 'boolean',
-              description:
-                'When true, signifies that it is purely visual, covers it from the accessibility tree. When false, signifies that it is a semantic separator.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,186 +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 {
-  Button,
-  Input,
-  Label,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function SheetDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default sheet."
-        code={`<Sheet>
-  <SheetTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Edit profile</SheetTitle>
-      <SheetDescription>
-        Make changes to your profile here. Click save when you're done.
-      </SheetDescription>
-    </SheetHeader>
-    <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" value="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" value="@peduarte" className="col-span-3" />
-      </div>
-    </div>
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button type="submit">Save changes</Button>
-      </SheetClose>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>`}
-      >
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button variant="outline">Open</Button>
-          </SheetTrigger>
-          <SheetContent>
-            <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
-            </SheetHeader>
-
-            <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>
-
-            <SheetFooter>
-              <SheetClose asChild>
-                <Button type="submit">Save changes</Button>
-              </SheetClose>
-            </SheetFooter>
-          </SheetContent>
-        </Sheet>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Sheet 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">Sheet (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the sheet.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the sheet when it is initially rendered.',
-            },
-            {
-              name: 'modal',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'The modality of the sheet.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">SheetContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'side',
-              type: '"top" | "bottom" | "left" | "right"',
-              defaultValue: '"right"',
-              description: 'The side of the screen where the sheet appears.',
-            },
-            {
-              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: '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/web/SkeletonDocs.tsx

@@ -1,53 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Skeleton } 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 SkeletonDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default skeleton."
-        code={`<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>`}
-      >
-        <div className="flex items-center space-x-4">
-          <Skeleton className="h-12 w-12 rounded-full" />
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-          </div>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Skeleton</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional class names to apply.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,119 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Slider } 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 SliderDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default slider."
-        code={`<Slider defaultValue={[33]} max={100} step={1} />`}
-      >
-        <Slider defaultValue={[33]} max={100} step={1} 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 Slider component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/slider"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Slider
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Slider (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'number[]',
-              description: 'The value of the slider when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'number[]',
-              description: 'The controlled value of the slider.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: number[]) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'onValueCommit',
-              type: '(value: number[]) => void',
-              description: 'Event handler called when the value changes at the end of an interaction.',
-            },
-            {
-              name: 'name',
-              type: 'string',
-              description: 'The name of the slider. Submitted with its owning form as part of a name/value pair.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the slider.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the slider.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the slider.',
-            },
-            {
-              name: 'min',
-              type: 'number',
-              defaultValue: '0',
-              description: 'The minimum value for the range.',
-            },
-            {
-              name: 'max',
-              type: 'number',
-              defaultValue: '100',
-              description: 'The maximum value for the range.',
-            },
-            {
-              name: 'step',
-              type: 'number',
-              defaultValue: '1',
-              description: 'The stepping interval.',
-            },
-            {
-              name: 'minStepsBetweenThumbs',
-              type: 'number',
-              defaultValue: '0',
-              description: 'The minimum permitted step difference between thumbs.',
-            },
-            {
-              name: 'inverted',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether the slider is visually inverted.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}