@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,157 +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 {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-  Button,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function AlertDialogDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="An alert dialog for confirming destructive actions."
-        code={`<AlertDialog>
-  <AlertDialogTrigger asChild>
-    <Button variant="destructive">Delete Account</Button>
-  </AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>
-        This action cannot be undone. This will permanently delete your account.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction>Continue</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>`}
-      >
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
-            <Button variant="destructive">Delete Account</Button>
-          </AlertDialogTrigger>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-              <AlertDialogDescription>
-                This action cannot be undone. This will permanently delete your account and remove your data from our
-                servers.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Continue</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">AlertDialog (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the dialog.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The default open state when initially rendered.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AlertDialogTrigger</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AlertDialogContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-            {
-              name: 'onEscapeKeyDown',
-              type: '(event: KeyboardEvent) => void',
-              description: 'Event handler called when the escape key is pressed.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AlertDialogAction</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AlertDialogCancel</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,110 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Alert, AlertDescription, AlertTitle } from '@gv-tech/ui-web';
-import { AlertCircle, Info, Terminal } from 'lucide-react';
-/* 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 AlertDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="The default alert style."
-        code={`<Alert>
-  <Terminal className="h-4 w-4" />
-  <AlertTitle>Heads up!</AlertTitle>
-  <AlertDescription>
-    You can add components to your app using the cli.
-  </AlertDescription>
-</Alert>`}
-      >
-        <Alert className="max-w-lg">
-          <Terminal className="h-4 w-4" />
-          <AlertTitle>Heads up!</AlertTitle>
-          <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-        </Alert>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Destructive"
-        description="Use the destructive variant for error messages."
-        code={`<Alert variant="destructive">
-  <AlertCircle className="h-4 w-4" />
-  <AlertTitle>Error</AlertTitle>
-  <AlertDescription>
-    Your session has expired. Please log in again.
-  </AlertDescription>
-</Alert>`}
-      >
-        <Alert variant="destructive" className="max-w-lg">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
-        </Alert>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Warning"
-        description="Use the warning variant for important notes or warnings."
-        code={`<Alert variant="warning">
-  <Info className="h-4 w-4" />
-  <AlertTitle>Warning</AlertTitle>
-  <AlertDescription>
-    This action cannot be undone. Please proceed with caution.
-  </AlertDescription>
-</Alert>`}
-      >
-        <Alert variant="warning" className="max-w-lg">
-          <Info className="h-4 w-4" />
-          <AlertTitle>Warning</AlertTitle>
-          <AlertDescription>This action cannot be undone. Please proceed with caution.</AlertDescription>
-        </Alert>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Info"
-        description="Use the info variant for informational messages."
-        code={`<Alert variant="info">
-  <Info className="h-4 w-4" />
-  <AlertTitle>Information</AlertTitle>
-  <AlertDescription>
-    A new software update is available. Please update as soon as possible.
-  </AlertDescription>
-</Alert>`}
-      >
-        <Alert variant="info" className="max-w-lg">
-          <Info className="h-4 w-4" />
-          <AlertTitle>Information</AlertTitle>
-          <AlertDescription>A new software update is available. Please update as soon as possible.</AlertDescription>
-        </Alert>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'variant',
-              type: '"default" | "destructive" | "warning" | "info"',
-              defaultValue: '"default"',
-              description: 'The visual style of the alert.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes to apply.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,94 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { AspectRatio } 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 AspectRatioDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="16:9"
-        description="A 16:9 aspect ratio container."
-        code={`<div className="w-[450px]">
-  <AspectRatio ratio={16 / 9} className="bg-muted">
-    <img
-      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800"
-      alt="Photo by Drew Beamer"
-      className="h-full w-full rounded-md object-cover"
-    />
-  </AspectRatio>
-</div>`}
-      >
-        <div className="w-[450px]">
-          <AspectRatio ratio={16 / 9} className="bg-muted">
-            <img
-              src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800"
-              alt="Photo by Drew Beamer"
-              className="h-full w-full rounded-md object-cover"
-            />
-          </AspectRatio>
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Square (1:1)"
-        description="A square aspect ratio container."
-        code={`<div className="w-[200px]">
-  <AspectRatio ratio={1 / 1} className="bg-muted rounded-md flex items-center justify-center">
-    <span className="text-muted-foreground">1:1</span>
-  </AspectRatio>
-</div>`}
-      >
-        <div className="w-[200px]">
-          <AspectRatio ratio={1 / 1} className="bg-muted rounded-md flex items-center justify-center">
-            <span className="text-muted-foreground">1:1</span>
-          </AspectRatio>
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="4:3"
-        description="A 4:3 aspect ratio container."
-        code={`<div className="w-[300px]">
-  <AspectRatio ratio={4 / 3} className="bg-muted rounded-md flex items-center justify-center">
-    <span className="text-muted-foreground">4:3</span>
-  </AspectRatio>
-</div>`}
-      >
-        <div className="w-[300px]">
-          <AspectRatio ratio={4 / 3} className="bg-muted rounded-md flex items-center justify-center">
-            <span className="text-muted-foreground">4:3</span>
-          </AspectRatio>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'ratio',
-              type: 'number',
-              defaultValue: '1',
-              description: 'The desired aspect ratio.',
-            },
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,81 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Avatar, AvatarFallback, AvatarImage } 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 AvatarDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="An avatar with an image."
-        code={`<Avatar>
-  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-  <AvatarFallback>CN</AvatarFallback>
-</Avatar>`}
-      >
-        <Avatar>
-          {<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />}
-          <AvatarFallback>CN</AvatarFallback>
-        </Avatar>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Fallback"
-        description="When no image is available, the fallback is displayed."
-        code={`<Avatar>
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>`}
-      >
-        <Avatar>
-          <AvatarFallback>JD</AvatarFallback>
-        </Avatar>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Avatar (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AvatarImage</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'src',
-              type: isNative ? 'ImageSourcePropType | string' : 'string',
-              description: 'The image source.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AvatarFallback</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,66 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Badge } 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 BadgeDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Variants"
-        description="Badges come in 4 different variants."
-        code={`<Badge>Default</Badge>
-<Badge variant="secondary">Secondary</Badge>
-<Badge variant="destructive">Destructive</Badge>
-<Badge variant="outline">Outline</Badge>`}
-      >
-        <Badge>Default</Badge>
-        <Badge variant="secondary">Secondary</Badge>
-        <Badge variant="destructive">Destructive</Badge>
-        <Badge variant="outline">Outline</Badge>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Use Cases"
-        description="Common use cases for badges."
-        code={`<Badge>New</Badge>
-<Badge variant="secondary">Beta</Badge>
-<Badge variant="destructive">Error</Badge>
-<Badge variant="outline">v1.0.0</Badge>`}
-      >
-        <Badge>New</Badge>
-        <Badge variant="secondary">Beta</Badge>
-        <Badge variant="destructive">Error</Badge>
-        <Badge variant="outline">v1.0.0</Badge>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'variant',
-              type: '"default" | "secondary" | "destructive" | "outline"',
-              defaultValue: '"default"',
-              description: 'The visual style of the badge.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes to apply.',
-            },
-            ...[],
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,93 +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 {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function BreadcrumbDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A basic breadcrumb navigation."
-        code={`<Breadcrumb>
-  <BreadcrumbList>
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/">Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-    </BreadcrumbItem>
-  </BreadcrumbList>
-</Breadcrumb>`}
-      >
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbLink href="/components">Components</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Breadcrumb (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'separator',
-              type: 'ReactNode',
-              description: 'Custom separator element.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">BreadcrumbLink</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-            {
-              name: 'href',
-              type: 'string',
-              description: 'The URL of the link.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}