@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,75 +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 CardDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Basic Card"
-        description="A simple card with header and content."
-        code={`<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content goes here.</p>
-  </CardContent>
-</Card>`}
-      />
-
-      <ComponentShowcase
-        title="Card with Footer"
-        description="Cards can include a footer for actions."
-        code={`<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Create Project</CardTitle>
-    <CardDescription>Deploy your new project in one-click.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <form>
-      <div className="grid w-full items-center gap-4">
-        <div className="flex flex-col space-y-1.5">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" placeholder="Name of your project" />
-        </div>
-      </div>
-    </form>
-  </CardContent>
-  <CardFooter className="flex justify-between">
-    <Button variant="outline">Cancel</Button>
-    <Button>Deploy</Button>
-  </CardFooter>
-</Card>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <h4 className="text-lg font-medium mt-6">Card (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes.',
-            },
-          ]}
-        />
-
-        <p className="text-sm text-muted-foreground mt-4">
-          CardHeader, CardTitle, CardDescription, CardContent, and CardFooter also accept <code>className</code> and
-          other standard {'HTML attributes'}.
-        </p>
-      </div>
-    </>
-  );
-}

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

@@ -1,113 +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 CarouselDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A basic carousel with numbered cards."
-        code={`<Carousel className="w-full max-w-xs">
-  <CarouselContent>
-    {Array.from({ length: 5 }).map((_, index) => (
-      <CarouselItem key={index}>
-        <div className="p-1">
-          <Card>
-            <CardContent className="flex aspect-square items-center justify-center p-6">
-              <span className="text-4xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </div>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`}
-      />
-
-      <ComponentShowcase
-        title="Partial Visible Items"
-        description="A carousel showing partial items using basis classes."
-        code={`<Carousel className="w-full max-w-sm" opts={{ align: "start" }}>
-  <CarouselContent>
-    {Array.from({ length: 5 }).map((_, index) => (
-      <CarouselItem key={index} className="basis-1/3">
-        <div className="p-1">
-          <Card>
-            <CardContent className="flex aspect-square items-center justify-center p-6">
-              <span className="text-2xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </div>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`}
-      />
-
-      <ComponentShowcase
-        title="Orientation"
-        description="A vertically oriented carousel."
-        code={`<Carousel orientation="vertical" className="w-full max-w-xs" opts={{ align: "start" }}>
-  <CarouselContent className="-mt-1 h-[200px]">
-    {Array.from({ length: 5 }).map((_, index) => (
-      <CarouselItem key={index} className="pt-1 md:basis-1/2">
-        <div className="p-1">
-          <Card>
-            <CardContent className="flex items-center justify-center p-6">
-              <span className="text-3xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </div>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <h4 className="text-lg font-medium mt-6">Carousel (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'opts',
-              type: 'CarouselOptions',
-              description: 'Options passed to the Embla Carousel instance.',
-            },
-            {
-              name: 'plugins',
-              type: 'CarouselPlugin',
-              description: 'Plugins passed to the Embla Carousel instance.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the carousel.',
-            },
-            {
-              name: 'setApi',
-              type: '(api: CarouselApi) => void',
-              description: 'Callback to get the Embla Carousel API instance.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,115 +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 ChartDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Bar Chart"
-        description="A simple bar chart."
-        code={`<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-  <BarChart accessibilityLayer data={chartData}>
-    <CartesianGrid vertical={false} />
-    <XAxis
-      dataKey="month"
-      tickLine={false}
-      tickMargin={10}
-      axisLine={false}
-      tickFormatter={(value) => value.slice(0, 3)}
-    />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
-</ChartContainer>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Chart component is a wrapper around{' '}
-          <a href="https://recharts.org/" className="underline" target="_blank" rel="noreferrer">
-            Recharts
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">ChartContainer</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'config',
-              type: 'ChartConfig',
-              required: true,
-              description: 'The configuration for the chart themes and labels.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional class names to apply.',
-            },
-            {
-              name: 'children',
-              type: 'ReactNode',
-              description: 'The Recharts component to render.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ChartTooltip</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'content',
-              type: 'ReactNode',
-              description: 'The content to render in the tooltip.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ChartTooltipContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'hideLabel',
-              type: 'boolean',
-              description: 'Whether to hide the label in the tooltip.',
-            },
-            {
-              name: 'hideIndicator',
-              type: 'boolean',
-              description: 'Whether to hide the indicator in the tooltip.',
-            },
-            {
-              name: 'indicator',
-              type: '"line" | "dot" | "dashed"',
-              defaultValue: '"dot"',
-              description: 'The style of the indicator.',
-            },
-            {
-              name: 'nameKey',
-              type: 'string',
-              description: 'The key to use for the name in the tooltip.',
-            },
-            {
-              name: 'labelKey',
-              type: 'string',
-              description: 'The key to use for the label in the tooltip.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,38 +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 CheckboxDocs() {
-  return (
-    <>
-      <ComponentShowcase title="Default" description="A basic checkbox." code={`<Checkbox id="terms" />`} />
-
-      <ComponentShowcase
-        title="With Label"
-        description="A checkbox with a label."
-        code={`<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>`}
-      />
-
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled checkbox."
-        code={`<div className="flex items-center space-x-2">
-  <Checkbox id="terms-disabled" disabled />
-  <Label htmlFor="terms-disabled">Accept terms and conditions</Label>
-</div>`}
-      />
-    </>
-  );
-}

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

@@ -1,89 +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 CollapsibleDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A collapsible panel with animation."
-        code={`
-
-<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-  <div className="flex items-center justify-between space-x-4 px-4">
-    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
-    <CollapsibleTrigger asChild>
-      <Button variant="ghost" size="sm" className="w-9 p-0">
-        <ChevronsUpDown className="h-4 w-4" />
-      </Button>
-    </CollapsibleTrigger>
-  </div>
-  <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
-  <CollapsibleContent className="space-y-2">
-    <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
-    <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
-  </CollapsibleContent>
-</Collapsible>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Collapsible component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/collapsible"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Collapsible
-          </a>
-          .
-        </p>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the collapsible.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The default open state when uncontrolled.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the collapsible.',
-            },
-          ]}
-        />
-        <h4 className="text-lg font-medium mt-6">CollapsibleContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,170 +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 CommandDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A command palette with search and groups."
-        code={`<Command className="rounded-lg border shadow-md md:min-w-[450px]">
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>
-        <Calendar className="mr-2 h-4 w-4" />
-        <span>Calendar</span>
-      </CommandItem>
-      <CommandItem>
-        <Smile className="mr-2 h-4 w-4" />
-        <span>Search Emoji</span>
-      </CommandItem>
-      <CommandItem>
-        <Calculator className="mr-2 h-4 w-4" />
-        <span>Calculator</span>
-      </CommandItem>
-    </CommandGroup>
-    <CommandSeparator />
-    <CommandGroup heading="Settings">
-      <CommandItem>
-        <User className="mr-2 h-4 w-4" />
-        <span>Profile</span>
-        <CommandShortcut>⌘P</CommandShortcut>
-      </CommandItem>
-      <CommandItem>
-        <CreditCard className="mr-2 h-4 w-4" />
-        <span>Billing</span>
-        <CommandShortcut>⌘B</CommandShortcut>
-      </CommandItem>
-      <CommandItem>
-        <Settings className="mr-2 h-4 w-4" />
-        <span>Settings</span>
-        <CommandShortcut>⌘S</CommandShortcut>
-      </CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Command component is built on top of{' '}
-          <a href="https://cmdk.paco.me/" className="underline" target="_blank" rel="noreferrer">
-            cmdk
-          </a>
-          .
-        </p>
-        <h4 className="text-lg font-medium mt-6">Command (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'label',
-              type: 'string',
-              description: 'Accessible label for the command menu.',
-            },
-            {
-              name: 'shouldFilter',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'Whether to filter items based on input.',
-            },
-            {
-              name: 'filter',
-              type: '(value: string, search: string) => number',
-              description: 'Custom filter function.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'Controlled value of the selected item.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when value changes.',
-            },
-            {
-              name: 'loop',
-              type: 'boolean',
-              description: 'Whether to loop selection when navigating with keys.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">CommandInput</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'placeholder',
-              type: 'string',
-              description: 'Placeholder text for the input.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'Controlled value of the input.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when input value changes.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">CommandList</h4>
-        <p className="text-sm text-muted-foreground">Contains items and groups.</p>
-
-        <h4 className="text-lg font-medium mt-6">CommandItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'Whether the item is disabled.',
-            },
-            {
-              name: 'onSelect',
-              type: '(value: string) => void',
-              description: 'Event handler called when the item is selected.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'Unique value for the item. Defaults to text content if not provided.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">CommandGroup</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'heading',
-              type: 'ReactNode',
-              description: 'Heading for the group.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'Unique value for the group.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}