@gv-tech/design-system 2.4.0 → 2.5.1

package/src/App.tsx

@@ -1,311 +0,0 @@
-import { Menu } from 'lucide-react';
-import * as React from 'react';
-import { Footer, Sidebar } from './components/docs';
-import { navItems } from './components/docs/Sidebar';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from './components/ui/breadcrumb';
-import { Button } from './components/ui/button';
-import { ScrollArea } from './components/ui/scroll-area';
-import {
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Search,
-  SearchTrigger,
-} from './components/ui/search';
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './components/ui/sheet';
-import { Toaster as SonnerToaster } from './components/ui/sonner';
-import { ThemeProvider } from './components/ui/theme-provider';
-import { ThemeToggle } from './components/ui/theme-toggle';
-import { Toaster } from './components/ui/toaster';
-import { TooltipProvider } from './components/ui/tooltip';
-import {
-  AccordionDocs,
-  AlertDialogDocs,
-  AlertDocs,
-  AspectRatioDocs,
-  AvatarDocs,
-  BadgeDocs,
-  BreadcrumbDocs,
-  ButtonDocs,
-  CalendarDocs,
-  CardDocs,
-  CarouselDocs,
-  ChartDocs,
-  CheckboxDocs,
-  CollapsibleDocs,
-  ColorTokensDocs,
-  CommandDocs,
-  ContextMenuDocs,
-  DialogDocs,
-  DrawerDocs,
-  DropdownMenuDocs,
-  FormDocs,
-  GettingStartedPage,
-  HoverCardDocs,
-  InputDocs,
-  InstallationPage,
-  LabelDocs,
-  MenubarDocs,
-  NavigationMenuDocs,
-  PaginationDocs,
-  PopoverDocs,
-  ProgressDocs,
-  RadioGroupDocs,
-  ResizableDocs,
-  ScrollAreaDocs,
-  SearchDocs,
-  SelectDocs,
-  SeparatorDocs,
-  SheetDocs,
-  SkeletonDocs,
-  SliderDocs,
-  SonnerDocs,
-  SwitchDocs,
-  TableDocs,
-  TabsDocs,
-  TextareaDocs,
-  ThemeToggleDocs,
-  ToastDocs,
-  ToggleDocs,
-  ToggleGroupDocs,
-  TooltipDocs,
-} from './pages';
-
-export default function App() {
-  const [activeItem, setActiveItem] = React.useState('getting-started');
-  const [searchOpen, setSearchOpen] = React.useState(false);
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
-
-  const renderContent = () => {
-    switch (activeItem) {
-      // Getting Started
-      case 'getting-started':
-        return <GettingStartedPage />;
-      case 'color-tokens':
-        return <ColorTokensDocs />;
-      case 'installation':
-        return <InstallationPage />;
-
-      // Layout
-      case 'card':
-        return <CardDocs />;
-      case 'separator':
-        return <SeparatorDocs />;
-      case 'resizable':
-        return <ResizableDocs />;
-      case 'scroll-area':
-        return <ScrollAreaDocs />;
-      case 'aspect-ratio':
-        return <AspectRatioDocs />;
-
-      // Forms
-      case 'button':
-        return <ButtonDocs />;
-      case 'input':
-        return <InputDocs />;
-      case 'textarea':
-        return <TextareaDocs />;
-      case 'label':
-        return <LabelDocs />;
-      case 'checkbox':
-        return <CheckboxDocs />;
-      case 'radio-group':
-        return <RadioGroupDocs />;
-      case 'select':
-        return <SelectDocs />;
-      case 'switch':
-        return <SwitchDocs />;
-      case 'slider':
-        return <SliderDocs />;
-      case 'form':
-        return <FormDocs />;
-
-      // Data Display
-      case 'badge':
-        return <BadgeDocs />;
-      case 'avatar':
-        return <AvatarDocs />;
-      case 'table':
-        return <TableDocs />;
-      case 'progress':
-        return <ProgressDocs />;
-      case 'skeleton':
-        return <SkeletonDocs />;
-      case 'chart':
-        return <ChartDocs />;
-      case 'calendar':
-        return <CalendarDocs />;
-
-      // Navigation
-      case 'tabs':
-        return <TabsDocs />;
-      case 'breadcrumb':
-        return <BreadcrumbDocs />;
-      case 'pagination':
-        return <PaginationDocs />;
-      case 'navigation-menu':
-        return <NavigationMenuDocs />;
-      case 'menubar':
-        return <MenubarDocs />;
-
-      // Feedback
-      case 'alert':
-        return <AlertDocs />;
-      case 'alert-dialog':
-        return <AlertDialogDocs />;
-      case 'dialog':
-        return <DialogDocs />;
-      case 'toast':
-        return <ToastDocs />;
-      case 'sonner':
-        return <SonnerDocs />;
-
-      // Overlay
-      case 'popover':
-        return <PopoverDocs />;
-      case 'tooltip':
-        return <TooltipDocs />;
-      case 'hover-card':
-        return <HoverCardDocs />;
-      case 'dropdown-menu':
-        return <DropdownMenuDocs />;
-      case 'context-menu':
-        return <ContextMenuDocs />;
-      case 'command':
-        return <CommandDocs />;
-      case 'search':
-        return <SearchDocs />;
-      case 'sheet':
-        return <SheetDocs />;
-      case 'drawer':
-        return <DrawerDocs />;
-
-      // Advanced
-      case 'accordion':
-        return <AccordionDocs />;
-      case 'collapsible':
-        return <CollapsibleDocs />;
-      case 'carousel':
-        return <CarouselDocs />;
-      case 'toggle':
-        return <ToggleDocs />;
-      case 'toggle-group':
-        return <ToggleGroupDocs />;
-      case 'theme-toggle':
-        return <ThemeToggleDocs />;
-
-      default:
-        return <GettingStartedPage />;
-    }
-  };
-
-  return (
-    <ThemeProvider>
-      <TooltipProvider>
-        <div className="flex h-screen bg-background overflow-hidden">
-          {/* Desktop Sidebar */}
-          <div className="hidden lg:flex h-full shrink-0">
-            <Sidebar activeItem={activeItem} onItemSelect={setActiveItem} />
-          </div>
-
-          {/* Main Content */}
-          <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-            {/* Header */}
-            <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background/50 backdrop-blur-sm sticky top-0 z-10 gap-4">
-              <div className="flex items-center gap-2 min-w-0">
-                {/* Mobile Menu Toggle */}
-                <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
-                  <SheetTrigger asChild>
-                    <Button variant="ghost" size="icon" className="lg:hidden shrink-0">
-                      <Menu className="h-5 w-5" />
-                      <span className="sr-only">Toggle menu</span>
-                    </Button>
-                  </SheetTrigger>
-                  <SheetContent side="left" className="p-0 w-72">
-                    <SheetHeader className="sr-only">
-                      <SheetTitle>Navigation Menu</SheetTitle>
-                      <SheetDescription>
-                        Explore the components and documentation for GV Tech Design System.
-                      </SheetDescription>
-                    </SheetHeader>
-                    <Sidebar
-                      activeItem={activeItem}
-                      onItemSelect={(id) => {
-                        setActiveItem(id);
-                        setIsSidebarOpen(false);
-                      }}
-                      className="w-full border-none"
-                    />
-                  </SheetContent>
-                </Sheet>
-
-                <Breadcrumb className="hidden md:flex min-w-0">
-                  <BreadcrumbList>
-                    <BreadcrumbItem>
-                      <BreadcrumbLink onClick={() => setActiveItem('getting-started')} className="cursor-pointer">
-                        Components
-                      </BreadcrumbLink>
-                    </BreadcrumbItem>
-                    <BreadcrumbSeparator />
-                    <BreadcrumbItem>
-                      <BreadcrumbPage>
-                        {navItems.find((i) => i.id === activeItem)?.label || 'Introduction'}
-                      </BreadcrumbPage>
-                    </BreadcrumbItem>
-                  </BreadcrumbList>
-                </Breadcrumb>
-
-                {/* Mobile Breadcrumb (simplified) */}
-                <div className="md:hidden font-medium truncate">
-                  {navItems.find((i) => i.id === activeItem)?.label || 'Introduction'}
-                </div>
-              </div>
-              <div className="flex items-center gap-2">
-                <Search open={searchOpen} onOpenChange={setSearchOpen}>
-                  <CommandInput placeholder="Type a command or search..." />
-                  <CommandList>
-                    <CommandEmpty>No results found.</CommandEmpty>
-                    <CommandGroup heading="Components">
-                      {navItems.map((item) => (
-                        <CommandItem
-                          key={item.id}
-                          onSelect={() => {
-                            setActiveItem(item.id);
-                            setSearchOpen(false);
-                          }}
-                        >
-                          {item.label}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Search>
-                <SearchTrigger onClick={() => setSearchOpen(true)} variant="compact" className="md:w-40 lg:w-64" />
-                <ThemeToggle variant="ternary" />
-              </div>
-            </header>
-
-            {/* Content Area */}
-            <ScrollArea className="flex-1 [&>[data-radix-scroll-area-viewport]]:h-full">
-              <div className="flex-1 flex flex-col min-h-full">
-                <main className="flex-1 p-4 md:p-8 w-full max-w-4xl mx-auto">{renderContent()}</main>
-                <Footer />
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-        <Toaster />
-        <SonnerToaster />
-      </TooltipProvider>
-    </ThemeProvider>
-  );
-}

package/src/components/docs/CodeBlock.tsx

@@ -1,34 +0,0 @@
-import { cn } from '@/lib/utils';
-import { Check, Copy } from 'lucide-react';
-import * as React from 'react';
-
-interface CodeBlockProps {
-  code: string;
-  language?: string;
-  className?: string;
-}
-
-export function CodeBlock({ code, language = 'tsx', className }: CodeBlockProps) {
-  const [copied, setCopied] = React.useState(false);
-
-  const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className={cn('relative group', className)}>
-      <pre className="bg-zinc-950 text-zinc-100 rounded-lg p-4 overflow-x-auto text-sm font-mono">
-        <code className={`language-${language}`}>{code.trim()}</code>
-      </pre>
-      <button
-        onClick={copyToClipboard}
-        className="absolute top-3 right-3 p-2 rounded-md bg-zinc-800 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-700 transition-colors opacity-0 group-hover:opacity-100"
-        aria-label="Copy code"
-      >
-        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-      </button>
-    </div>
-  );
-}

package/src/components/docs/ComponentShowcase.tsx

@@ -1,68 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { cn } from '@/lib/utils';
-import * as React from 'react';
-import { CodeBlock } from './CodeBlock';
-
-interface ComponentShowcaseProps {
-  title: string;
-  description?: string;
-  code: string;
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function ComponentShowcase({ title, description, code, children, className }: ComponentShowcaseProps) {
-  return (
-    <Card className={cn('overflow-hidden', className)}>
-      <CardHeader>
-        <CardTitle className="text-lg">{title}</CardTitle>
-        {description && <CardDescription>{description}</CardDescription>}
-      </CardHeader>
-      <CardContent className="p-0">
-        <Tabs defaultValue="preview" className="w-full">
-          <div className="border-b px-4 md:px-6">
-            <TabsList className="h-10 bg-transparent p-0">
-              <TabsTrigger
-                value="preview"
-                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-              >
-                Preview
-              </TabsTrigger>
-              <TabsTrigger
-                value="code"
-                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
-              >
-                Code
-              </TabsTrigger>
-            </TabsList>
-          </div>
-          <TabsContent value="preview" className="p-4 md:p-6 mt-0">
-            <div className="flex flex-wrap gap-4 items-center overflow-x-auto">{children}</div>
-          </TabsContent>
-          <TabsContent value="code" className="mt-0">
-            <CodeBlock code={code} className="rounded-none border-0" />
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  );
-}
-
-interface ComponentSectionProps {
-  title: string;
-  description?: string;
-  children: React.ReactNode;
-}
-
-export function ComponentSection({ title, description, children }: ComponentSectionProps) {
-  return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h1>
-        {description && <p className="text-base md:text-lg text-muted-foreground">{description}</p>}
-      </div>
-      <div className="space-y-6">{children}</div>
-    </div>
-  );
-}

package/src/components/docs/Footer.tsx

@@ -1,138 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { SiGithub, SiLinkedin, SiX } from 'react-icons/si';
-
-export function Footer() {
-  return (
-    <footer className="border-t bg-muted/30">
-      <div className="p-8 space-y-6">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {/* Brand */}
-          <div className="space-y-3">
-            <h3 className="font-semibold">GV Tech Design System</h3>
-            <p className="text-sm text-muted-foreground">
-              A comprehensive React component library for building modern applications.
-            </p>
-          </div>
-
-          {/* Resources */}
-          <div className="space-y-3">
-            <h4 className="font-medium text-sm">Resources</h4>
-            <ul className="space-y-2 text-sm text-muted-foreground">
-              <li>
-                <a
-                  href="https://github.com/Garcia-Ventures/gvtech-design"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-foreground transition-colors"
-                >
-                  GitHub Repository
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://www.npmjs.com/package/@gv-tech/design-system"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-foreground transition-colors"
-                >
-                  NPM Package
-                </a>
-              </li>
-              <li>
-                <a
-                  href="https://ui.shadcn.com"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-foreground transition-colors"
-                >
-                  shadcn/ui
-                </a>
-              </li>
-            </ul>
-          </div>
-
-          <div className="space-y-3">
-            <h4 className="font-medium text-sm">Connect</h4>
-            <div className="flex items-center space-x-2">
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
-                    <a
-                      href="https://github.com/Garcia-Ventures"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="GitHub"
-                    >
-                      <SiGithub className="h-5 w-5" />
-                    </a>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>GitHub</TooltipContent>
-              </Tooltip>
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
-                    <a
-                      href="https://twitter.com/gvtech"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="X (formerly Twitter)"
-                    >
-                      <SiX className="h-4 w-4" />
-                    </a>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>X (formerly Twitter)</TooltipContent>
-              </Tooltip>
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground" asChild>
-                    <a
-                      href="https://linkedin.com/company/gvtech"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label="LinkedIn"
-                    >
-                      <SiLinkedin className="h-5 w-5" />
-                    </a>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>LinkedIn</TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-
-        <Separator />
-
-        <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
-          <p>© GVTech 2026. All rights reserved.</p>
-          <p>
-            Built with{' '}
-            <a
-              href="https://ui.shadcn.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              shadcn/ui
-            </a>{' '}
-            and{' '}
-            <a
-              href="https://tailwindcss.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="underline underline-offset-4 hover:text-foreground"
-            >
-              Tailwind CSS
-            </a>
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}

package/src/components/docs/PropsTable.tsx

@@ -1,43 +0,0 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-
-export interface PropDefinition {
-  name: string;
-  type: string;
-  defaultValue?: string;
-  description: string;
-  required?: boolean;
-}
-
-interface PropsTableProps {
-  props: PropDefinition[];
-}
-
-export function PropsTable({ props }: PropsTableProps) {
-  return (
-    <div className="my-6 w-full overflow-y-auto">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Prop</TableHead>
-            <TableHead>Type</TableHead>
-            <TableHead>Default</TableHead>
-            <TableHead>Description</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {props.map((prop) => (
-            <TableRow key={prop.name}>
-              <TableCell className="font-mono text-sm font-semibold">
-                {prop.name}
-                {prop.required && <span className="ml-1 text-destructive">*</span>}
-              </TableCell>
-              <TableCell className="font-mono text-xs text-muted-foreground">{prop.type}</TableCell>
-              <TableCell className="font-mono text-xs text-muted-foreground">{prop.defaultValue || '-'}</TableCell>
-              <TableCell className="text-sm text-muted-foreground">{prop.description}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}