@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/AlertDialogDocs.tsx

@@ -1,151 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-
-export function AlertDialogDocs() {
-  return (
-    <ComponentSection
-      title="Alert Dialog"
-      description="A modal dialog that interrupts the user with important content and expects a response."
-    >
-      <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>
-    </ComponentSection>
-  );
-}

package/src/pages/components/AlertDocs.tsx

@@ -1,65 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { AlertCircle, Terminal } from 'lucide-react';
-
-export function AlertDocs() {
-  return (
-    <ComponentSection title="Alert" description="Displays a callout for user attention.">
-      <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>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'variant',
-              type: '"default" | "destructive"',
-              defaultValue: '"default"',
-              description: 'The visual style of the alert.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes to apply.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/AspectRatioDocs.tsx

@@ -1,85 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { AspectRatio } from '@/components/ui/aspect-ratio';
-
-export function AspectRatioDocs() {
-  return (
-    <ComponentSection title="Aspect Ratio" description="Displays content within a desired ratio.">
-      <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>
-    </ComponentSection>
-  );
-}

package/src/pages/components/AvatarDocs.tsx

@@ -1,82 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-
-export function AvatarDocs() {
-  return (
-    <ComponentSection title="Avatar" description="An image element with a fallback for representing the user.">
-      <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: 'Additional CSS classes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AvatarImage</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'src',
-              type: 'string',
-              description: 'The URL of the image.',
-            },
-            {
-              name: 'alt',
-              type: 'string',
-              description: 'The alternative text for the image.',
-            },
-            {
-              name: 'onLoadingStatusChange',
-              type: '(status: "idle" | "loading" | "loaded" | "error") => void',
-              description: 'Event handler called when the loading status of the image changes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AvatarFallback</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'delayMs',
-              type: 'number',
-              description: 'Useful for delaying rendering so it only appears for those with slower connections.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/BadgeDocs.tsx

@@ -1,56 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Badge } from '@/components/ui/badge';
-
-export function BadgeDocs() {
-  return (
-    <ComponentSection title="Badge" description="Displays a badge or a component that looks like a badge.">
-      <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: 'Additional CSS classes to apply.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/BreadcrumbDocs.tsx

@@ -1,87 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/components/ui/breadcrumb';
-
-export function BreadcrumbDocs() {
-  return (
-    <ComponentSection
-      title="Breadcrumb"
-      description="Displays the path to the current resource using a hierarchy of links."
-    >
-      <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>
-    </ComponentSection>
-  );
-}

package/src/pages/components/ButtonDocs.tsx

@@ -1,120 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import { ChevronRight, Loader2, Mail } from 'lucide-react';
-
-export function ButtonDocs() {
-  return (
-    <ComponentSection title="Button" description="Displays a button or a component that looks like a button.">
-      <ComponentShowcase
-        title="Variants"
-        description="The button comes in 6 different variants."
-        code={`<Button variant="default">Default</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="destructive">Destructive</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="link">Link</Button>`}
-      >
-        <Button variant="default">Default</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="destructive">Destructive</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button variant="link">Link</Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Sizes"
-        description="Buttons come in default, small, large, and icon sizes."
-        code={`<Button size="default">Default</Button>
-<Button size="sm">Small</Button>
-<Button size="lg">Large</Button>
-<Button size="icon"><ChevronRight className="h-4 w-4" /></Button>`}
-      >
-        <Button size="default">Default</Button>
-        <Button size="sm">Small</Button>
-        <Button size="lg">Large</Button>
-        <Button size="icon">
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Icon"
-        description="You can add icons to buttons for additional context."
-        code={`<Button>
-  <Mail className="mr-2 h-4 w-4" /> Login with Email
-</Button>`}
-      >
-        <Button>
-          <Mail className="mr-2 h-4 w-4" /> Login with Email
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Loading State"
-        description="Use the disabled attribute with a spinner for loading states."
-        code={`<Button disabled>
-  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-  Please wait
-</Button>`}
-      >
-        <Button disabled>
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          Please wait
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Disabled"
-        description="Buttons can be disabled to prevent interaction."
-        code={`<Button disabled>Disabled</Button>`}
-      >
-        <Button disabled>Disabled</Button>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'variant',
-              type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"',
-              defaultValue: '"default"',
-              description: 'The visual style of the button.',
-            },
-            {
-              name: 'size',
-              type: '"default" | "sm" | "lg" | "icon"',
-              defaultValue: '"default"',
-              description: 'The size of the button.',
-            },
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether to render as a child component (delegation).',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes to apply.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether the button is disabled.',
-            },
-            {
-              name: 'onClick',
-              type: 'MouseEventHandler',
-              description: 'Click event handler.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}