@gv-tech/design-system 2.5.0 → 2.5.2

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

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

@@ -1,89 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Info } from 'lucide-react';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import {
-  Alert as WebAlert,
-  AlertDescription as WebAlertDescription,
-  AlertTitle as WebAlertTitle,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function AlertDocs() {
-  return (
-    <>
-      <WebAlert variant="warning" className="mb-6">
-        <Info className="h-4 w-4 text-amber-600 dark:text-amber-400" />
-        <WebAlertTitle>Native Preview</WebAlertTitle>
-        <WebAlertDescription>
-          This preview renders the actual <code className="bg-background px-1 rounded">.native.tsx</code> component
-          using <code className="bg-background px-1 rounded">react-native-web</code>.
-        </WebAlertDescription>
-      </WebAlert>
-
-      <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>`}
-      />
-
-      <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>`}
-      />
-
-      <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>`}
-      />
-
-      <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/native/AspectRatioDocs.tsx

@@ -1,52 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-/* 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 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>`}
-      />
-
-      <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>`}
-      />
-
-      <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>`}
-      />
-    </>
-  );
-}

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

@@ -1,92 +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 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>`}
-      />
-
-      <ComponentShowcase
-        title="Fallback"
-        description="When no image is available, the fallback is displayed."
-        code={`<Avatar>
-  <AvatarFallback>JD</AvatarFallback>
-</Avatar>`}
-      />
-
-      <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.',
-            },
-            ...[
-              {
-                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: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes.',
-            },
-            ...[
-              {
-                name: 'delayMs',
-                type: 'number',
-                description: 'Useful for delaying rendering so it only appears for those with slower connections.',
-              },
-            ],
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,63 +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 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>`}
-      />
-
-      <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>`}
-      />
-
-      <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.',
-            },
-            ...[
-              {
-                name: 'textClassName',
-                type: 'string',
-                description: 'Classes for the inner Text component (NativeWind).',
-              },
-            ],
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

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

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

@@ -1,103 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-// @ts-nocheck
-
-export function ButtonDocs() {
-  return (
-    <>
-      <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>`}
-      />
-
-      <ComponentShowcase
-        title="Sizes"
-        description="Buttons come in default, small, large, and icon sizes."
-        code={`import { Button } from "@gv-tech/design-system";
-
-<Button size="default">Default</Button>
-<Button size="sm">Small</Button>
-<Button size="lg">Large</Button>
-<Button size="icon"><ChevronRight size={18} /></Button>`}
-      />
-
-      <ComponentShowcase
-        title="With Icon"
-        description="You can add icons to buttons for additional context."
-        code={`import { Button } from "@gv-tech/design-system";
-
-<Button onPress={() => console.log("Pressed")}>
-  <Mail size={18} color="white" />
-  <Text className="text-white ml-2">Login with Email</Text>
-</Button>`}
-      />
-
-      <ComponentShowcase
-        title="Loading State"
-        description="Use the disabled attribute with a spinner for loading states."
-        code={`import { Button } from "@gv-tech/design-system";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const isNative = true as boolean;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const platform = 'native' as string;
-
-<Button disabled>
-  <Loader2 size={18} className="animate-spin text-white" />
-  <Text className="text-white ml-2">Please wait</Text>
-</Button>`}
-      />
-
-      <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: 'onPress',
-              type: '() => void',
-              description: 'Native press event handler.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Tailwind (NativeWind) classes.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether the button is disabled.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,74 +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 CalendarDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A basic calendar for date selection."
-        code={`
-
-<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-  className="rounded-md border"
-/>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Calendar component is built on top of{' '}
-          <a href="https://react-day-picker.js.org/" className="underline" target="_blank" rel="noreferrer">
-            React Day Picker
-          </a>
-          .
-        </p>
-        <PropsTable
-          props={[
-            {
-              name: 'mode',
-              type: '"single" | "multiple" | "range" | "default"',
-              defaultValue: '"default"',
-              description: 'The selection mode of the calendar.',
-            },
-            {
-              name: 'selected',
-              type: 'Date | Date[] | DateRange | undefined',
-              description: 'The selected date(s).',
-            },
-            {
-              name: 'onSelect',
-              type: '(date: any) => void',
-              description: 'Event handler called when a date is selected.',
-            },
-            {
-              name: 'showOutsideDays',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'Whether to show days from the previous and next months.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes to apply.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}