@gv-tech/design-system 2.4.0 → 2.5.1

package/src/components/docs/Sidebar.tsx

@@ -1,176 +0,0 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
-import { Button } from '@/components/ui/button';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { cn } from '@/lib/utils';
-import { FormInput, Home, Layers, LayoutGrid, MessageSquare, Navigation, Sparkles, Table2 } from 'lucide-react';
-import * as React from 'react';
-import { version } from '../../../package.json';
-
-export type ComponentCategory =
-  | 'getting-started'
-  | 'layout'
-  | 'forms'
-  | 'data-display'
-  | 'navigation'
-  | 'feedback'
-  | 'overlay'
-  | 'advanced';
-
-export interface NavItem {
-  id: string;
-  label: string;
-  category: ComponentCategory;
-}
-
-interface SidebarProps {
-  activeItem: string;
-  onItemSelect: (id: string) => void;
-  className?: string;
-}
-
-const categoryConfig: Record<ComponentCategory, { label: string; icon: React.ReactNode }> = {
-  'getting-started': { label: 'Getting Started', icon: <Home className="h-4 w-4" /> },
-  layout: { label: 'Layout', icon: <LayoutGrid className="h-4 w-4" /> },
-  forms: { label: 'Forms', icon: <FormInput className="h-4 w-4" /> },
-  'data-display': { label: 'Data Display', icon: <Table2 className="h-4 w-4" /> },
-  navigation: { label: 'Navigation', icon: <Navigation className="h-4 w-4" /> },
-  feedback: { label: 'Feedback', icon: <MessageSquare className="h-4 w-4" /> },
-  overlay: { label: 'Overlay', icon: <Layers className="h-4 w-4" /> },
-  advanced: { label: 'Advanced', icon: <Sparkles className="h-4 w-4" /> },
-};
-
-export const navItems: NavItem[] = [
-  // Getting Started
-  { id: 'getting-started', label: 'Introduction', category: 'getting-started' },
-  { id: 'color-tokens', label: 'Color Tokens', category: 'getting-started' },
-  { id: 'installation', label: 'Installation', category: 'getting-started' },
-
-  // Layout
-  { id: 'card', label: 'Card', category: 'layout' },
-  { id: 'separator', label: 'Separator', category: 'layout' },
-  { id: 'resizable', label: 'Resizable', category: 'layout' },
-  { id: 'scroll-area', label: 'Scroll Area', category: 'layout' },
-  { id: 'aspect-ratio', label: 'Aspect Ratio', category: 'layout' },
-
-  // Forms
-  { id: 'button', label: 'Button', category: 'forms' },
-  { id: 'input', label: 'Input', category: 'forms' },
-  { id: 'textarea', label: 'Textarea', category: 'forms' },
-  { id: 'label', label: 'Label', category: 'forms' },
-  { id: 'checkbox', label: 'Checkbox', category: 'forms' },
-  { id: 'radio-group', label: 'Radio Group', category: 'forms' },
-  { id: 'select', label: 'Select', category: 'forms' },
-  { id: 'switch', label: 'Switch', category: 'forms' },
-  { id: 'slider', label: 'Slider', category: 'forms' },
-  { id: 'form', label: 'Form', category: 'forms' },
-
-  // Data Display
-  { id: 'badge', label: 'Badge', category: 'data-display' },
-  { id: 'avatar', label: 'Avatar', category: 'data-display' },
-  { id: 'table', label: 'Table', category: 'data-display' },
-  { id: 'progress', label: 'Progress', category: 'data-display' },
-  { id: 'skeleton', label: 'Skeleton', category: 'data-display' },
-  { id: 'chart', label: 'Chart', category: 'data-display' },
-  { id: 'calendar', label: 'Calendar', category: 'data-display' },
-
-  // Navigation
-  { id: 'tabs', label: 'Tabs', category: 'navigation' },
-  { id: 'breadcrumb', label: 'Breadcrumb', category: 'navigation' },
-  { id: 'pagination', label: 'Pagination', category: 'navigation' },
-  { id: 'navigation-menu', label: 'Navigation Menu', category: 'navigation' },
-  { id: 'menubar', label: 'Menubar', category: 'navigation' },
-
-  // Feedback
-  { id: 'alert', label: 'Alert', category: 'feedback' },
-  { id: 'alert-dialog', label: 'Alert Dialog', category: 'feedback' },
-  { id: 'dialog', label: 'Dialog', category: 'feedback' },
-  { id: 'toast', label: 'Toast', category: 'feedback' },
-  { id: 'sonner', label: 'Sonner', category: 'feedback' },
-
-  // Overlay
-  { id: 'popover', label: 'Popover', category: 'overlay' },
-  { id: 'tooltip', label: 'Tooltip', category: 'overlay' },
-  { id: 'hover-card', label: 'Hover Card', category: 'overlay' },
-  { id: 'dropdown-menu', label: 'Dropdown Menu', category: 'overlay' },
-  { id: 'context-menu', label: 'Context Menu', category: 'overlay' },
-  { id: 'command', label: 'Command', category: 'overlay' },
-  { id: 'search', label: 'Search', category: 'overlay' },
-  { id: 'sheet', label: 'Sheet', category: 'overlay' },
-  { id: 'drawer', label: 'Drawer', category: 'overlay' },
-
-  // Advanced
-  { id: 'accordion', label: 'Accordion', category: 'advanced' },
-  { id: 'collapsible', label: 'Collapsible', category: 'advanced' },
-  { id: 'carousel', label: 'Carousel', category: 'advanced' },
-  { id: 'toggle', label: 'Toggle', category: 'advanced' },
-  { id: 'toggle-group', label: 'Toggle Group', category: 'advanced' },
-  { id: 'theme-toggle', label: 'Theme Toggle', category: 'advanced' },
-];
-
-export function Sidebar({ activeItem, onItemSelect, className }: SidebarProps) {
-  const categories = Object.keys(categoryConfig) as ComponentCategory[];
-  const [expandedCategories, setExpandedCategories] = React.useState<string[]>(['getting-started', 'forms']);
-
-  // Ensure the category of the active item is expanded
-  React.useEffect(() => {
-    const activeNavItem = navItems.find((item) => item.id === activeItem);
-    if (activeNavItem && !expandedCategories.includes(activeNavItem.category)) {
-      setExpandedCategories((prev) => [...prev, activeNavItem.category]);
-    }
-  }, [activeItem, expandedCategories]);
-
-  return (
-    <div className={cn('w-64 border-r bg-muted/50 flex flex-col h-full', className)}>
-      <div className="p-4 border-b">
-        <h2 className="font-semibold text-lg">GV Design System</h2>
-        <p className="text-xs text-muted-foreground">v{version}</p>
-      </div>
-      <ScrollArea className="flex-1">
-        <nav className="p-2">
-          <Accordion
-            type="multiple"
-            value={expandedCategories}
-            onValueChange={setExpandedCategories}
-            className="w-full space-y-1"
-          >
-            {categories.map((category) => {
-              const config = categoryConfig[category];
-              const items = navItems.filter((item) => item.category === category);
-
-              if (items.length === 0) return null;
-
-              return (
-                <AccordionItem key={category} value={category} className="border-none">
-                  <AccordionTrigger className="flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-md hover:bg-accent/50 transition-colors hover:no-underline [&>svg]:h-4 [&>svg]:w-4">
-                    <div className="flex items-center gap-2 flex-1">
-                      {config.icon}
-                      <span className="text-left">{config.label}</span>
-                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent className="pb-1">
-                    <div className="ml-4 mt-1 space-y-0.5 border-l pl-2">
-                      {items.map((item) => (
-                        <Button
-                          key={item.id}
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => onItemSelect(item.id)}
-                          className={cn(
-                            'w-full justify-start h-8 px-2 font-normal',
-                            activeItem === item.id && 'bg-accent text-accent-foreground',
-                          )}
-                        >
-                          {item.label}
-                        </Button>
-                      ))}
-                    </div>
-                  </AccordionContent>
-                </AccordionItem>
-              );
-            })}
-          </Accordion>
-        </nav>
-      </ScrollArea>
-    </div>
-  );
-}

package/src/components/docs/ThemeToggle.tsx

@@ -1,19 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-
-export function ThemeToggle() {
-  const { theme, setTheme } = useTheme();
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      aria-label="Toggle theme"
-    >
-      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-    </Button>
-  );
-}

package/src/components/docs/index.ts

@@ -1,6 +0,0 @@
-export { CodeBlock } from './CodeBlock';
-export { ComponentSection, ComponentShowcase } from './ComponentShowcase';
-export { Footer } from './Footer';
-export { PropsTable, type PropDefinition } from './PropsTable';
-export { Sidebar, navItems, type ComponentCategory, type NavItem } from './Sidebar';
-export { ThemeToggle } from './ThemeToggle';

package/src/components/ui/accordion.test.tsx

@@ -1,86 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
-
-describe('Accordion', () => {
-  it('renders correctly', () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Trigger 1</AccordionTrigger>
-          <AccordionContent>Content 1</AccordionContent>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    expect(screen.getByText('Trigger 1')).toBeInTheDocument();
-    // Content should not be visible initially
-    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-  });
-
-  it('expands when clicked', async () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Trigger 1</AccordionTrigger>
-          <AccordionContent>Content 1</AccordionContent>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    const trigger = screen.getByText('Trigger 1');
-    await userEvent.click(trigger);
-
-    await waitFor(() => {
-      expect(screen.getByText('Content 1')).toBeVisible();
-    });
-  });
-
-  it('collapses when clicked again', async () => {
-    render(
-      <Accordion type="single" collapsible defaultValue="item-1">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Trigger 1</AccordionTrigger>
-          <AccordionContent>Content 1</AccordionContent>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    // Initial state open
-    expect(screen.getByText('Content 1')).toBeVisible();
-
-    const trigger = screen.getByText('Trigger 1');
-    await userEvent.click(trigger);
-
-    await waitFor(() => {
-      expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    });
-  });
-
-  it('handles single mode correctly', async () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Trigger 1</AccordionTrigger>
-          <AccordionContent>Content 1</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Trigger 2</AccordionTrigger>
-          <AccordionContent>Content 2</AccordionContent>
-        </AccordionItem>
-      </Accordion>,
-    );
-
-    // Click item 1
-    await userEvent.click(screen.getByText('Trigger 1'));
-    await waitFor(() => expect(screen.getByText('Content 1')).toBeVisible());
-
-    // Click item 2
-    await userEvent.click(screen.getByText('Trigger 2'));
-    await waitFor(() => expect(screen.getByText('Content 2')).toBeVisible());
-
-    // Item 1 should be closed
-    await waitFor(() => expect(screen.queryByText('Content 1')).not.toBeInTheDocument());
-  });
-});

package/src/components/ui/accordion.tsx

@@ -1,51 +0,0 @@
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-));
-AccordionItem.displayName = 'AccordionItem';
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/ui/alert-dialog.test.tsx

@@ -1,91 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from './alert-dialog';
-
-describe('AlertDialog', () => {
-  it('renders correctly', async () => {
-    render(
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>,
-    );
-
-    expect(screen.getByText('Open')).toBeInTheDocument();
-    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
-
-    await userEvent.click(screen.getByText('Open'));
-
-    await waitFor(() => {
-      expect(screen.getByRole('alertdialog')).toBeInTheDocument();
-      expect(screen.getByText('Are you sure?')).toBeInTheDocument();
-      expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
-    });
-  });
-
-  it('closes when cancel is clicked', async () => {
-    render(
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>,
-    );
-
-    await userEvent.click(screen.getByText('Open'));
-    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
-
-    await userEvent.click(screen.getByText('Cancel'));
-    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
-  });
-
-  it('closes when action is clicked', async () => {
-    render(
-      <AlertDialog>
-        <AlertDialogTrigger>Open</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>,
-    );
-
-    await userEvent.click(screen.getByText('Open'));
-    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
-
-    await userEvent.click(screen.getByText('Continue'));
-    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
-  });
-});

package/src/components/ui/alert-dialog.tsx

@@ -1,104 +0,0 @@
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import * as React from 'react';
-
-import { buttonVariants } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-));
-AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
-    {...props}
-  />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-};

package/src/components/ui/alert.test.tsx

@@ -1,33 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { Alert, AlertDescription, AlertTitle } from './alert';
-
-describe('Alert', () => {
-  it('renders correctly', () => {
-    render(
-      <Alert>
-        <AlertTitle>Heads up!</AlertTitle>
-        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole('alert');
-    expect(alert).toBeInTheDocument();
-    expect(screen.getByText('Heads up!')).toBeInTheDocument();
-    expect(screen.getByText('You can add components to your app using the cli.')).toBeInTheDocument();
-  });
-
-  it('renders destructive variant', () => {
-    render(
-      <Alert variant="destructive">
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>Your session has expired.</AlertDescription>
-      </Alert>,
-    );
-
-    const alert = screen.getByRole('alert');
-    expect(alert).toBeInTheDocument();
-    expect(alert).toHaveClass('border-destructive/50');
-    expect(alert).toHaveClass('text-destructive');
-  });
-});

package/src/components/ui/alert.tsx

@@ -1,43 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
-  {
-    variants: {
-      variant: {
-        default: 'bg-background text-foreground',
-        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-));
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props} />
-  ),
-);
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-  ),
-);
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertDescription, AlertTitle };

package/src/components/ui/aspect-ratio.test.tsx

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import { AspectRatio } from './aspect-ratio';
-
-describe('AspectRatio', () => {
-  it('renders correctly', () => {
-    const { container } = render(
-      <AspectRatio ratio={16 / 9}>
-        <img src="test.jpg" alt="test" />
-      </AspectRatio>,
-    );
-
-    const img = screen.getByRole('img');
-    expect(img).toBeInTheDocument();
-
-    // Radix AspectRatio renders a wrapper with padding-bottom based on ratio
-    // We can check if the wrapper style is applied
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ paddingBottom: expect.stringMatching(/%$/) });
-  });
-
-  it('renders with custom ratio', () => {
-    const { container } = render(
-      <AspectRatio ratio={1 / 1}>
-        <div>Square</div>
-      </AspectRatio>,
-    );
-
-    expect(screen.getByText('Square')).toBeInTheDocument();
-    const wrapper = container.firstChild;
-    // 1/1 ratio should be 100% padding-bottom
-    expect(wrapper).toHaveStyle({ paddingBottom: '100%' });
-  });
-});

package/src/components/ui/aspect-ratio.tsx

@@ -1,5 +0,0 @@
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };