@gv-tech/design-system 1.0.0 → 1.2.0

package/dist/registry/carousel.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "carousel.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/carousel.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport { describe, expect, it } from 'vitest';\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel';\n\ndescribe('Carousel', () => {\n  it('renders correctly', () => {\n    render(\n      <Carousel aria-label=\"carousel\">\n        <CarouselContent>\n          <CarouselItem>Slide 1</CarouselItem>\n          <CarouselItem>Slide 2</CarouselItem>\n          <CarouselItem>Slide 3</CarouselItem>\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>,\n    );\n\n    expect(screen.getByRole('region', { name: 'carousel' })).toBeInTheDocument();\n    expect(screen.getByText('Slide 1')).toBeInTheDocument();\n    expect(screen.getByText('Slide 2')).toBeInTheDocument();\n    expect(screen.getByText('Slide 3')).toBeInTheDocument();\n    expect(screen.getByRole('button', { name: 'Previous slide' })).toBeInTheDocument();\n    expect(screen.getByRole('button', { name: 'Next slide' })).toBeInTheDocument();\n  });\n\n  it('renders with orientation vertical', () => {\n    render(\n      <Carousel orientation=\"vertical\" aria-label=\"carousel\">\n        <CarouselContent>\n          <CarouselItem>Slide 1</CarouselItem>\n        </CarouselContent>\n      </Carousel>,\n    );\n    expect(screen.getByRole('region', { name: 'carousel' })).toBeInTheDocument();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/chart.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "chart.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/chart.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';\nimport { describe, expect, it, vi } from 'vitest';\nimport { ChartContainer, ChartTooltip, ChartTooltipContent } from './chart';\n\n// Mock Recharts ResponsiveContainer to avoid ResizeObserver issues and render children immediately\nvi.mock('recharts', async (importOriginal) => {\n  const original = await importOriginal();\n  return {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    ...(original as any),\n    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (\n      <div style={{ width: 500, height: 300 }}>{children}</div>\n    ),\n  };\n});\n\nconst chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    color: '#2563eb',\n  },\n  mobile: {\n    label: 'Mobile',\n    color: '#60a5fa',\n  },\n};\n\nconst chartData = [\n  { month: 'January', desktop: 186, mobile: 80 },\n  { month: 'February', desktop: 305, mobile: 200 },\n];\n\ndescribe('Chart', () => {\n  it('renders correctly', () => {\n    render(\n      <ChartContainer config={chartConfig} className=\"min-h-[200px] w-full\">\n        <BarChart accessibilityLayer data={chartData} width={500} height={300}>\n          <CartesianGrid vertical={false} />\n          <XAxis\n            dataKey=\"month\"\n            tickLine={false}\n            tickMargin={10}\n            axisLine={false}\n            tickFormatter={(value) => value.slice(0, 3)}\n          />\n          <ChartTooltip content={<ChartTooltipContent />} />\n          <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n          <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n        </BarChart>\n      </ChartContainer>,\n    );\n\n    // Recharts renders SVGs. We can check if the container renders.\n    // The accessibilityLayer prop on BarChart adds role=\"application\" or similar?\n    // Let's check for the chart container.\n    // The ChartContainer adds data-chart attribute.\n    // But we can check for text.\n    expect(screen.getByText('Jan')).toBeInTheDocument();\n    expect(screen.getByText('Feb')).toBeInTheDocument();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/checkbox.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "checkbox.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/checkbox.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport { Checkbox } from './checkbox';\n\ndescribe('Checkbox', () => {\n  it('renders correctly', () => {\n    render(<Checkbox />);\n    expect(screen.getByRole('checkbox')).toBeInTheDocument();\n  });\n\n  it('toggles checked state on click', async () => {\n    const user = userEvent.setup();\n    render(<Checkbox />);\n\n    const checkbox = screen.getByRole('checkbox');\n    expect(checkbox).not.toBeChecked();\n\n    await user.click(checkbox);\n    expect(checkbox).toBeChecked();\n\n    await user.click(checkbox);\n    expect(checkbox).not.toBeChecked();\n  });\n\n  it('renders disabled state', () => {\n    render(<Checkbox disabled />);\n    expect(screen.getByRole('checkbox')).toBeDisabled();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/collapsible.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "collapsible.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/collapsible.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible';\n\ndescribe('Collapsible', () => {\n  it('renders correctly', () => {\n    render(\n      <Collapsible>\n        <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n        <CollapsibleContent>Content</CollapsibleContent>\n      </Collapsible>,\n    );\n\n    expect(screen.getByRole('button', { name: 'Toggle' })).toBeInTheDocument();\n  });\n\n  it('toggles content visibility', async () => {\n    const user = userEvent.setup();\n    render(\n      <Collapsible>\n        <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n        <CollapsibleContent>Content</CollapsibleContent>\n      </Collapsible>,\n    );\n\n    const trigger = screen.getByRole('button', { name: 'Toggle' });\n\n    // Initial state: Content might be hidden or not present depending on implementation details of Radix\n    // But Radix Collapsible adds data-state attribute\n    expect(trigger).toHaveAttribute('data-state', 'closed');\n\n    await user.click(trigger);\n    expect(trigger).toHaveAttribute('data-state', 'open');\n    expect(screen.getByText('Content')).toBeVisible();\n\n    await user.click(trigger);\n    expect(trigger).toHaveAttribute('data-state', 'closed');\n  });\n\n  it('renders open by default', () => {\n    render(\n      <Collapsible defaultOpen>\n        <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n        <CollapsibleContent>Content</CollapsibleContent>\n      </Collapsible>,\n    );\n    expect(screen.getByRole('button', { name: 'Toggle' })).toHaveAttribute('data-state', 'open');\n    expect(screen.getByText('Content')).toBeVisible();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/command.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "command.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/command.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';\n\ndescribe('Command', () => {\n  it('renders correctly', () => {\n    render(\n      <Command>\n        <CommandInput placeholder=\"Search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>Calendar</CommandItem>\n            <CommandItem>Search Emoji</CommandItem>\n            <CommandItem>Calculator</CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>,\n    );\n\n    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();\n    expect(screen.getByText('Suggestions')).toBeInTheDocument();\n    expect(screen.getByText('Calendar')).toBeInTheDocument();\n  });\n\n  it('filters items based on input', async () => {\n    const user = userEvent.setup();\n    render(\n      <Command>\n        <CommandInput placeholder=\"Search...\" />\n        <CommandList>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>Calendar</CommandItem>\n            <CommandItem>Search Emoji</CommandItem>\n            <CommandItem>Calculator</CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>,\n    );\n\n    const input = screen.getByPlaceholderText('Search...');\n    await user.type(input, 'Cal');\n\n    expect(screen.getByText('Calendar')).toBeVisible();\n    expect(screen.getByText('Calculator')).toBeVisible();\n    // search emoji should be filtered out\n    // Note: cmdk might just hide items, so we check if they are visible or not\n    // or checks class names.\n    // Let's check if Search Emoji is not visible or removed\n    const emoji = screen.queryByText('Search Emoji');\n    // If it's still in document but hidden, we check visibility\n    if (emoji) {\n      expect(emoji).not.toBeVisible();\n    } else {\n      expect(emoji).not.toBeInTheDocument();\n    }\n  });\n\n  it('shows empty state when no results', async () => {\n    const user = userEvent.setup();\n    render(\n      <Command>\n        <CommandInput placeholder=\"Search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>Calendar</CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>,\n    );\n\n    const input = screen.getByPlaceholderText('Search...');\n    await user.type(input, 'XYZ');\n\n    expect(screen.getByText('No results found.')).toBeVisible();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/context-menu.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "context-menu.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/context-menu.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from './context-menu';\n\ndescribe('ContextMenu', () => {\n  it('renders trigger', () => {\n    render(\n      <ContextMenu>\n        <ContextMenuTrigger>Right click here</ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuItem>Item 1</ContextMenuItem>\n        </ContextMenuContent>\n      </ContextMenu>,\n    );\n\n    expect(screen.getByText('Right click here')).toBeInTheDocument();\n  });\n\n  it('shows menu on right click', async () => {\n    const user = userEvent.setup();\n    render(\n      <ContextMenu>\n        <ContextMenuTrigger>Right click here</ContextMenuTrigger>\n        <ContextMenuContent>\n          <ContextMenuItem>Item 1</ContextMenuItem>\n        </ContextMenuContent>\n      </ContextMenu>,\n    );\n\n    const trigger = screen.getByText('Right click here');\n    await user.pointer({ keys: '[MouseRight]', target: trigger });\n\n    // Ensure item is visible. Radix UI ContextMenu might render it in a portal.\n    expect(screen.getByText('Item 1')).toBeVisible();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/dialog.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "dialog.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/dialog.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from './dialog';\n\ndescribe('Dialog', () => {\n  it('renders trigger correctly', () => {\n    render(\n      <Dialog>\n        <DialogTrigger>Open Dialog</DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Title</DialogTitle>\n            <DialogDescription>Description</DialogDescription>\n          </DialogHeader>\n        </DialogContent>\n      </Dialog>,\n    );\n\n    expect(screen.getByText('Open Dialog')).toBeInTheDocument();\n  });\n\n  it('opens and closes the dialog', async () => {\n    const user = userEvent.setup();\n    render(\n      <Dialog>\n        <DialogTrigger>Open Dialog</DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Are you sure absolutely sure?</DialogTitle>\n            <DialogDescription>This action cannot be undone.</DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose>Close Dialog</DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>,\n    );\n\n    // Dialog content should not be visible initially (or not in document)\n    expect(screen.queryByText('Are you sure absolutely sure?')).not.toBeInTheDocument();\n\n    // Open dialog\n    await user.click(screen.getByText('Open Dialog'));\n\n    expect(screen.getByRole('dialog')).toBeInTheDocument();\n    expect(screen.getByText('Are you sure absolutely sure?')).toBeVisible();\n\n    // Close dialog\n    // We can use the close button we added\n    await user.click(screen.getByText('Close Dialog'));\n\n    // Should be closed\n    // Radix UI Dialog unmounts content when closed\n    expect(screen.queryByText('Are you sure absolutely sure?')).not.toBeInTheDocument();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/drawer.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "drawer.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/drawer.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport { describe, expect, it, vi } from 'vitest';\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from './drawer';\n\n// Mock vaul components to avoid jsdom issues\nvi.mock('./drawer', () => {\n  return {\n    Drawer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,\n    DrawerTrigger: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,\n    DrawerContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,\n    DrawerHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,\n    DrawerTitle: ({ children }: { children: React.ReactNode }) => <h1>{children}</h1>,\n    DrawerDescription: ({ children }: { children: React.ReactNode }) => <p>{children}</p>,\n    DrawerFooter: ({ children }: { children: React.ReactNode }) => <footer>{children}</footer>,\n    DrawerClose: ({ children }: { children: React.ReactNode }) => <button>{children}</button>,\n  };\n});\n\ndescribe('Drawer', () => {\n  it('renders correctly', () => {\n    render(\n      <Drawer>\n        <DrawerTrigger>Open Drawer</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Title</DrawerTitle>\n            <DrawerDescription>Description</DrawerDescription>\n          </DrawerHeader>\n        </DrawerContent>\n      </Drawer>,\n    );\n\n    expect(screen.getByText('Open Drawer')).toBeInTheDocument();\n  });\n\n  it('opens and closes the drawer', async () => {\n    // With mocked components, we just verify they render their children.\n    // Real interaction testing for vaul is best done in e2e tests.\n    render(\n      <Drawer>\n        <DrawerTrigger>Open Drawer</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Drawer Title</DrawerTitle>\n            <DrawerDescription>Drawer Description</DrawerDescription>\n          </DrawerHeader>\n          <DrawerFooter>\n            <DrawerClose>Close</DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>,\n    );\n\n    expect(screen.getByText('Open Drawer')).toBeInTheDocument();\n    expect(screen.getByText('Drawer Title')).toBeInTheDocument();\n    expect(screen.getByText('Drawer Description')).toBeInTheDocument();\n    expect(screen.getByText('Close')).toBeInTheDocument();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/dropdown-menu.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "dropdown-menu.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/dropdown-menu.test.tsx",
+      "content": "import { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\n\ndescribe('DropdownMenu', () => {\n  it('renders trigger correctly', () => {\n    render(\n      <DropdownMenu>\n        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>Item 1</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>,\n    );\n\n    expect(screen.getByText('Open Menu')).toBeInTheDocument();\n  });\n\n  it('opens menu on click', async () => {\n    const user = userEvent.setup();\n    render(\n      <DropdownMenu>\n        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>Profile</DropdownMenuItem>\n          <DropdownMenuItem>Billing</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>,\n    );\n\n    await user.click(screen.getByText('Open Menu'));\n\n    expect(screen.getByText('My Account')).toBeVisible();\n    expect(screen.getByText('Profile')).toBeVisible();\n  });\n\n  it('handles checkbox items', async () => {\n    const user = userEvent.setup();\n    render(\n      <DropdownMenu>\n        <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuCheckboxItem checked>Checked Item</DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem checked={false}>Unchecked Item</DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>,\n    );\n\n    await user.click(screen.getByText('Open'));\n\n    const checkedItem = screen.getByText('Checked Item');\n    // const uncheckedItem = screen.getByText('Unchecked Item');\n\n    expect(checkedItem).toBeVisible();\n    // Radix UI adds data-state=\"checked\" or similar.\n    // But testing-library's toBeChecked() works on roles like 'checkbox' or 'menuitemcheckbox'\n    expect(screen.getByRole('menuitemcheckbox', { name: 'Checked Item' })).toBeChecked();\n    expect(screen.getByRole('menuitemcheckbox', { name: 'Unchecked Item' })).not.toBeChecked();\n  });\n\n  it('handles radio items', async () => {\n    const user = userEvent.setup();\n    render(\n      <DropdownMenu>\n        <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuRadioGroup value=\"top\">\n            <DropdownMenuRadioItem value=\"top\">Top</DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"bottom\">Bottom</DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>,\n    );\n\n    await user.click(screen.getByText('Open'));\n\n    expect(screen.getByRole('menuitemradio', { name: 'Top' })).toBeChecked();\n    expect(screen.getByRole('menuitemradio', { name: 'Bottom' })).not.toBeChecked();\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/form.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "form.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/form.test.tsx",
+      "content": "import { zodResolver } from '@hookform/resolvers/zod';\nimport { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { useForm } from 'react-hook-form';\nimport { describe, expect, it } from 'vitest';\nimport { z } from 'zod';\nimport { Button } from './button';\nimport { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from './form';\nimport { Input } from './input';\n\nconst formSchema = z.object({\n  username: z.string().min(2, {\n    message: 'Username must be at least 2 characters.',\n  }),\n});\n\nfunction TestForm({ onSubmit }: { onSubmit: (values: z.infer<typeof formSchema>) => void }) {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: '',\n    },\n  });\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"username\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input placeholder=\"shadcn\" {...field} />\n              </FormControl>\n              <FormDescription>This is your public display name.</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n\ndescribe('Form', () => {\n  it('renders form fields correctly', () => {\n    render(<TestForm onSubmit={() => {}} />);\n\n    expect(screen.getByLabelText('Username')).toBeInTheDocument();\n    expect(screen.getByPlaceholderText('shadcn')).toBeInTheDocument();\n    expect(screen.getByText('This is your public display name.')).toBeInTheDocument();\n    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();\n  });\n\n  it('validates input and displays error message', async () => {\n    const user = userEvent.setup();\n    render(<TestForm onSubmit={() => {}} />);\n\n    const submitButton = screen.getByRole('button', { name: 'Submit' });\n    await user.click(submitButton);\n\n    await waitFor(() => {\n      expect(screen.getByText('Username must be at least 2 characters.')).toBeVisible();\n    });\n  });\n\n  it('submits valid data', async () => {\n    const user = userEvent.setup();\n    const { vi } = await import('vitest');\n    const mockSubmit = vi.fn();\n\n    render(<TestForm onSubmit={mockSubmit} />);\n\n    const input = screen.getByLabelText('Username');\n    await user.type(input, 'johndoe');\n    await user.click(screen.getByRole('button', { name: 'Submit' }));\n\n    await waitFor(() => {\n      expect(mockSubmit).toHaveBeenCalledWith({ username: 'johndoe' }, expect.anything());\n    });\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/hover-card.test.json

@@ -0,0 +1,13 @@
+{
+  "name": "hover-card.test",
+  "type": "registry:ui",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "ui/hover-card.test.tsx",
+      "content": "import { render, screen, waitFor } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { describe, expect, it } from 'vitest';\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';\n\ndescribe('HoverCard', () => {\n  it('renders trigger correctly', () => {\n    render(\n      <HoverCard>\n        <HoverCardTrigger>Hover me</HoverCardTrigger>\n        <HoverCardContent>Content</HoverCardContent>\n      </HoverCard>,\n    );\n\n    expect(screen.getByText('Hover me')).toBeInTheDocument();\n  });\n\n  it('shows content on hover', async () => {\n    const user = userEvent.setup();\n    render(\n      <HoverCard openDelay={0} closeDelay={0}>\n        <HoverCardTrigger>Hover me</HoverCardTrigger>\n        <HoverCardContent>Content</HoverCardContent>\n      </HoverCard>,\n    );\n\n    const trigger = screen.getByText('Hover me');\n\n    // Initial state\n    expect(screen.queryByText('Content')).not.toBeInTheDocument();\n\n    // Hover\n    await user.hover(trigger);\n\n    // Should be visible\n    await waitFor(() => {\n      expect(screen.getByText('Content')).toBeVisible();\n    });\n\n    // Unhover\n    await user.unhover(trigger);\n\n    // Should be hidden\n    await waitFor(() => {\n      expect(screen.queryByText('Content')).not.toBeInTheDocument();\n    });\n  });\n});\n",
+      "type": "registry:ui"
+    }
+  ]
+}