@gv-tech/design-system 2.5.0 → 2.5.1

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

@@ -1,140 +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 TooltipDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default tooltip."
-        code={`<TooltipProvider>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button variant="outline">Hover</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Add to library</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Tooltip component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/tooltip"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Tooltip
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">TooltipProvider</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'delayDuration',
-              type: 'number',
-              defaultValue: '700',
-              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
-            },
-            {
-              name: 'skipDelayDuration',
-              type: 'number',
-              defaultValue: '300',
-              description: 'How much time a user has to enter another trigger without incurring a delay again.',
-            },
-            {
-              name: 'disableHoverableContent',
-              type: 'boolean',
-              description:
-                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">Tooltip (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the tooltip when it is initially rendered.',
-            },
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the tooltip.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state of the tooltip changes.',
-            },
-            {
-              name: 'delayDuration',
-              type: 'number',
-              defaultValue: '700',
-              description: 'The duration from when the mouse enters a tooltip trigger until the tooltip opens.',
-            },
-            {
-              name: 'disableHoverableContent',
-              type: 'boolean',
-              description:
-                'When true, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">TooltipContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'side',
-              type: '"top" | "right" | "bottom" | "left"',
-              defaultValue: '"top"',
-              description: 'The preferred side of the trigger to render against when open.',
-            },
-            {
-              name: 'sideOffset',
-              type: 'number',
-              description: 'The distance in pixels from the trigger.',
-            },
-            {
-              name: 'align',
-              type: '"start" | "center" | "end"',
-              defaultValue: '"center"',
-              description: 'The preferred alignment against the trigger.',
-            },
-            {
-              name: 'alignOffset',
-              type: 'number',
-              description: 'An offset in pixels from the "start" or "end" alignment options.',
-            },
-            {
-              name: 'avoidCollisions',
-              type: 'boolean',
-              defaultValue: 'true',
-              description:
-                'When true, overrides the side and align preferences to prevent collisions with boundary edges.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/index.ts

@@ -1,47 +0,0 @@
-export { AccordionDocs as NativeAccordionDocs } from './AccordionDocs';
-export { AlertDialogDocs as NativeAlertDialogDocs } from './AlertDialogDocs';
-export { AlertDocs as NativeAlertDocs } from './AlertDocs';
-export { AspectRatioDocs as NativeAspectRatioDocs } from './AspectRatioDocs';
-export { AvatarDocs as NativeAvatarDocs } from './AvatarDocs';
-export { BadgeDocs as NativeBadgeDocs } from './BadgeDocs';
-export { BreadcrumbDocs as NativeBreadcrumbDocs } from './BreadcrumbDocs';
-export { ButtonDocs as NativeButtonDocs } from './ButtonDocs';
-export { CalendarDocs as NativeCalendarDocs } from './CalendarDocs';
-export { CardDocs as NativeCardDocs } from './CardDocs';
-export { CarouselDocs as NativeCarouselDocs } from './CarouselDocs';
-export { ChartDocs as NativeChartDocs } from './ChartDocs';
-export { CheckboxDocs as NativeCheckboxDocs } from './CheckboxDocs';
-export { CollapsibleDocs as NativeCollapsibleDocs } from './CollapsibleDocs';
-export { CommandDocs as NativeCommandDocs } from './CommandDocs';
-export { ContextMenuDocs as NativeContextMenuDocs } from './ContextMenuDocs';
-export { DialogDocs as NativeDialogDocs } from './DialogDocs';
-export { DrawerDocs as NativeDrawerDocs } from './DrawerDocs';
-export { DropdownMenuDocs as NativeDropdownMenuDocs } from './DropdownMenuDocs';
-
-export { HoverCardDocs as NativeHoverCardDocs } from './HoverCardDocs';
-export { InputDocs as NativeInputDocs } from './InputDocs';
-export { LabelDocs as NativeLabelDocs } from './LabelDocs';
-export { MenubarDocs as NativeMenubarDocs } from './MenubarDocs';
-export { NavigationMenuDocs as NativeNavigationMenuDocs } from './NavigationMenuDocs';
-export { PaginationDocs as NativePaginationDocs } from './PaginationDocs';
-export { PopoverDocs as NativePopoverDocs } from './PopoverDocs';
-export { ProgressDocs as NativeProgressDocs } from './ProgressDocs';
-export { RadioGroupDocs as NativeRadioGroupDocs } from './RadioGroupDocs';
-export { ResizableDocs as NativeResizableDocs } from './ResizableDocs';
-export { ScrollAreaDocs as NativeScrollAreaDocs } from './ScrollAreaDocs';
-export { SearchDocs as NativeSearchDocs } from './SearchDocs';
-export { SelectDocs as NativeSelectDocs } from './SelectDocs';
-export { SeparatorDocs as NativeSeparatorDocs } from './SeparatorDocs';
-export { SheetDocs as NativeSheetDocs } from './SheetDocs';
-export { SkeletonDocs as NativeSkeletonDocs } from './SkeletonDocs';
-export { SliderDocs as NativeSliderDocs } from './SliderDocs';
-export { SonnerDocs as NativeSonnerDocs } from './SonnerDocs';
-export { SwitchDocs as NativeSwitchDocs } from './SwitchDocs';
-export { TableDocs as NativeTableDocs } from './TableDocs';
-export { TabsDocs as NativeTabsDocs } from './TabsDocs';
-export { TextareaDocs as NativeTextareaDocs } from './TextareaDocs';
-export { ThemeToggleDocs as NativeThemeToggleDocs } from './ThemeToggleDocs';
-export { ToastDocs as NativeToastDocs } from './ToastDocs';
-export { ToggleDocs as NativeToggleDocs } from './ToggleDocs';
-export { ToggleGroupDocs as NativeToggleGroupDocs } from './ToggleGroupDocs';
-export { TooltipDocs as NativeTooltipDocs } from './TooltipDocs';

package/apps/playground-web/src/pages/shared/ColorTokensDocs.tsx

@@ -1,234 +0,0 @@
-import { CodeBlock } from '@/components/docs/CodeBlock';
-import { tokens } from '@gv-tech/design-tokens';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@gv-tech/ui-web';
-
-import { useDocMetadata } from '@/hooks/useDocMetadata';
-
-export function ColorTokensDocs() {
-  useDocMetadata({
-    title: 'Color Tokens',
-    description: 'Learn about the design tokens and color palette of GV Tech.',
-  });
-  return (
-    <div className="space-y-12">
-      <div className="space-y-4">
-        <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight">Color Tokens</h1>
-        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
-          The Garcia Ventures design system is built on a robust token architecture that ensures consistency,
-          accessibility, and easy maintenance across all digital products.
-        </p>
-      </div>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Design Philosophy</h2>
-        <div className="grid gap-6 md:grid-cols-3">
-          <Card className="bg-primary/5 border-primary/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Intellect</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Represented by Royal Blue, signaling depth, trust, and professional expertise.
-              </p>
-            </CardContent>
-          </Card>
-          <Card className="bg-secondary/5 border-secondary/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Stability</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Rooted in Brand Green, reflecting growth, balance, and environmental consciousness.
-              </p>
-            </CardContent>
-          </Card>
-          <Card className="bg-accent/5 border-accent/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Transparency</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Expressed through Floral White, prioritizing clarity and a clean user experience.
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Adoption Guide</h2>
-        <p className="text-muted-foreground">
-          There are three primary ways to consume these tokens depending on your project's technology stack.
-        </p>
-
-        <div className="space-y-8">
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">1. Tailwind CSS (Recommended)</h3>
-            <p className="text-sm text-muted-foreground">
-              Most projects should use standard Tailwind utility classes. These are automatically mapped to our tokens
-              via CSS variables.
-            </p>
-            <CodeBlock
-              language="tsx"
-              code={`// Use standard semantic classes
-<button className="bg-primary text-primary-foreground hover:bg-primary/90">
-  Primary Action
-</button>
-
-<div className="border-border bg-card text-card-foreground">
-  Card Content
-</div>`}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">2. TypeScript / React</h3>
-            <p className="text-sm text-muted-foreground">
-              For logic-heavy styling or CSS-in-JS solutions, import the \`tokens\` object directly.
-            </p>
-            <CodeBlock
-              language="tsx"
-              code={`import { tokens } from '@gv-tech/design-system';
-
-const MyComponent = () => {
-  return (
-    <div style={{ color: tokens.palette.brand.blue }}>
-      Using Royal Blue directly
-    </div>
-  );
-};`}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">3. Vanilla CSS</h3>
-            <p className="text-sm text-muted-foreground">
-              Directly access the CSS variables in your style tags or external stylesheets.
-            </p>
-            <CodeBlock
-              language="css"
-              code={`.custom-element {
-  background-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-  border: 1px solid hsl(var(--border));
-}`}
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-3xl font-bold tracking-tight">Core Palette</h2>
-        </div>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.blue }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Royal Blue</h4>
-                  <p className="text-xs text-muted-foreground">Intellect & Trust</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.blue}</code>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.green }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Stability Green</h4>
-                  <p className="text-xs text-muted-foreground">Growth & Balance</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.green}</code>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.floralWhite }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Floral White</h4>
-                  <p className="text-xs text-muted-foreground">Transparency & Clarity</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.floralWhite}</code>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Semantic Tokens Reference</h2>
-        <div className="rounded-xl border shadow-sm overflow-x-auto">
-          <Table className="min-w-[600px] md:min-w-full">
-            <TableHeader>
-              <TableRow className="bg-muted/50 hover:bg-muted/50">
-                <TableHead className="w-[200px]">Token</TableHead>
-                <TableHead>Variable Name</TableHead>
-                <TableHead>Light Mode</TableHead>
-                <TableHead>Dark Mode</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {(Object.keys(tokens.theme.light) as Array<keyof typeof tokens.theme.light>).map((key) => {
-                if (key === 'radius') return null;
-                return (
-                  <TableRow key={key} className="group">
-                    <TableCell className="font-medium group-hover:text-primary transition-colors">
-                      {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}
-                    </TableCell>
-                    <TableCell className="font-mono text-xs text-muted-foreground">
-                      --{key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-3">
-                        <div
-                          className="h-6 w-6 rounded-md border shadow-sm"
-                          style={{ backgroundColor: tokens.theme.light[key] as string }}
-                        />
-                        <span className="text-xs font-mono">{tokens.theme.light[key]}</span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-3">
-                        <div
-                          className="h-6 w-6 rounded-md border shadow-sm"
-                          style={{ backgroundColor: tokens.theme.dark[key] as string }}
-                        />
-                        <span className="text-xs font-mono">{tokens.theme.dark[key]}</span>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </section>
-    </div>
-  );
-}