@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/DropdownMenu/dropdown-menu.stories.tsx

@@ -0,0 +1,154 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from './dropdown-menu';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CheckCircle, HelpCircle, User01 } from '@/components';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/Navigation/DropdownMenu',
+  component: DropdownMenu,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The DropdownMenu is a contextual menu component based on the Radix library. It supports items, separators, groups, selection states, and submenus with full accessibility.',
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    modal: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <DropdownMenuTrigger asChild>
+          <button className="btn-primary">Open Menu</button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Options</DropdownMenuLabel>
+          <DropdownMenuItem>New file</DropdownMenuItem>
+          <DropdownMenuItem>Open folder</DropdownMenuItem>
+          <DropdownMenuItem>Save as</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Logout</DropdownMenuItem>
+        </DropdownMenuContent>
+      </>
+    ),
+  },
+};
+
+export const WithCheckboxItems: Story = {
+  args: {
+    children: (
+      <>
+        <DropdownMenuTrigger asChild>
+          <button className="btn-secondary">Preferences</button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Visual settings</DropdownMenuLabel>
+          <DropdownMenuCheckboxItem checked>Show lines</DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem>Enable minimap</DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem checked>Use dark theme</DropdownMenuCheckboxItem>
+        </DropdownMenuContent>
+      </>
+    ),
+  },
+};
+
+export const WithRadioGroup: Story = {
+  args: {
+    children: (
+      <>
+        <DropdownMenuTrigger asChild>
+          <button className="btn-outline">Select layout</button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Layout</DropdownMenuLabel>
+          <DropdownMenuRadioGroup defaultValue="grid">
+            <DropdownMenuRadioItem value="grid">Grid</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="list">List</DropdownMenuRadioItem>
+            <DropdownMenuRadioItem value="columns">Columns</DropdownMenuRadioItem>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </>
+    ),
+  },
+};
+
+export const WithSubMenu: Story = {
+  args: {
+    children: (
+      <>
+        <DropdownMenuTrigger asChild>
+          <button className="btn-outline">Menu with Submenu</button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Dropdown Menu Label</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="default">Dropdown Menu Item Default</DropdownMenuItem>
+          <DropdownMenuItem variant="light">Dropdown Menu Item Light</DropdownMenuItem>
+          <DropdownMenuItem variant="error">Dropdown Menu Item Error</DropdownMenuItem>
+          <DropdownMenuItem variant="success">Dropdown Menu Item Success</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger variant="error">Dropdown Menu Submenu Error</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem variant="error"><HelpCircle/> Dropdown Menu Submenu Item Error</DropdownMenuItem>
+              <DropdownMenuItem variant="error"><HelpCircle/> Dropdown Menu Submenu Item Error</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger variant="success">Dropdown Menu Submenu Success</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem variant="success"><CheckCircle/> Dropdown Menu Submenu Item Success</DropdownMenuItem>
+              <DropdownMenuItem variant="success"><CheckCircle/> Dropdown Menu Submenu Item Success</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger variant="light">Dropdown Menu Submenu Light</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem variant="light"><User01/> Dropdown Menu Submenu Item Light</DropdownMenuItem>
+              <DropdownMenuItem variant="light"><User01/> Dropdown Menu Submenu Item Light</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger variant="default">Dropdown Menu Submenu Default</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem variant="default"><User01/> Dropdown Menu Submenu Item Default</DropdownMenuItem>
+              <DropdownMenuItem variant="default"><User01/> Dropdown Menu Submenu Item Default</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </>
+    ),
+  },
+};

package/src/components/molecules/DropdownMenu/dropdown-menu.test.tsx

@@ -0,0 +1,163 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+
+const renderDropdownMenu = ({
+  onCheckedChange,
+  onSelect,
+  onValueChange,
+}: {
+  onSelect?: () => void;
+  onCheckedChange?: () => void;
+  onValueChange?: () => void;
+} = {}) => {
+  render(
+    <DropdownMenu>
+      <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Label</DropdownMenuLabel>
+        <DropdownMenuItem onSelect={onSelect}>Option 1</DropdownMenuItem>
+        <DropdownMenuItem>Option 2</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked onCheckedChange={onCheckedChange}>
+          Checkbox Item
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuRadioGroup onValueChange={onValueChange} value="b">
+          <DropdownMenuRadioItem value="a">Option A</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="b">Option B</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const openDropdownMenu = async () => {
+  const user = userEvent.setup();
+
+  await user.click(screen.getByText('Trigger'));
+};
+
+describe('<DropdownMenu />', () => {
+  const user = userEvent.setup();
+
+  it('renders trigger and opens the menu on click', async () => {
+    renderDropdownMenu();
+
+    expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+
+    await openDropdownMenu();
+
+    expect(await screen.findByText('Option 1')).toBeVisible();
+  });
+
+  it('fires onSelect when DropdownMenuItem is clicked', async () => {
+    const onSelect = vi.fn();
+
+    renderDropdownMenu({ onSelect });
+    await openDropdownMenu();
+
+    await user.click(screen.getByText('Option 1'));
+
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it('toggles checked state in DropdownMenuCheckboxItem', async () => {
+    const onCheckedChange = vi.fn();
+
+    renderDropdownMenu({ onCheckedChange });
+    await openDropdownMenu();
+
+    const checkbox = await screen.findByText('Checkbox Item');
+
+    await user.click(checkbox);
+
+    expect(onCheckedChange).toHaveBeenCalledWith(false);
+  });
+
+  it('selects the correct item in a DropdownMenuRadioGroup', async () => {
+    const onValueChange = vi.fn();
+
+    renderDropdownMenu({ onValueChange });
+    await openDropdownMenu();
+
+    const optionA = await screen.findByText('Option A');
+
+    await user.click(optionA);
+
+    expect(onValueChange).toHaveBeenCalledWith('a');
+  });
+
+  it('renders label and separator correctly', async () => {
+    renderDropdownMenu();
+    await openDropdownMenu();
+
+    expect(screen.getByText('Label')).toBeVisible();
+    expect(screen.getByRole('separator')).toBeVisible();
+  });
+
+  it('renders sub menu and handles sub trigger click', async () => {
+    renderDropdownMenu();
+    await openDropdownMenu();
+
+    await user.click(screen.getByText('More Options'));
+
+    const firstSubItem = await screen.findByText('Sub Item 1');
+
+    expect(firstSubItem).toBeVisible();
+  });
+
+  it('closes menu on item selection', async () => {
+    renderDropdownMenu();
+    await openDropdownMenu();
+
+    const firstOption = await screen.findByText('Option 1');
+
+    expect(firstOption).toBeInTheDocument();
+
+    await user.click(firstOption);
+
+    expect(firstOption).not.toBeInTheDocument();
+  });
+
+  it('supports keyboard navigation', async () => {
+    renderDropdownMenu();
+
+    const trigger = screen.getByText('Trigger');
+
+    trigger.focus();
+    fireEvent.keyDown(trigger, { key: 'Enter' });
+
+    const firstOption = await screen.findByText('Option 1');
+    expect(firstOption).toBeVisible();
+
+    fireEvent.keyDown(firstOption, { key: 'ArrowDown' });
+    const secondOption = await screen.findByText('Option 2');
+    expect(secondOption).toHaveFocus();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<DropdownMenu />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/DropdownMenu/dropdown-menu.tsx

@@ -0,0 +1,313 @@
+import * as React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+function DropdownMenu ({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal ({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+
+function DropdownMenuTrigger ({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent ({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[8rem] max-h-(--radix-dropdown-menu-content-available-height)',
+          'origin-(--radix-dropdown-menu-content-transform-origin)',
+          'overflow-x-hidden overflow-y-auto',
+          'bg-blur rounded-md p-1 shadow-md',
+          '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-[side=bottom]:slide-in-from-top-2',
+          'data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2',
+          'data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup ({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem ({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'light' | 'error' | 'success';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'relative flex items-center gap-2',
+        'rounded-sm px-2 py-1.5',
+        'text-sm font-semibold',
+        'cursor-pointer select-none outline-hidden',
+        'focus:bg-gray focus:text-primary focus:bg-white',
+        'data-[variant=light]:text-gray-700 data-[variant=error]:text-error-600 data-[variant=success]:text-success-600',
+        'data-[variant=light]:focus:text-gray-800 data-[variant=error]:focus:text-error-600 data-[variant=success]:focus:text-success-600',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-[inset]:pl-8',
+        '[&_svg]:shrink-0',
+        '[&_svg]:text-primary',
+        'data-[variant=light]:[&_svg]:text-gray-400 data-[variant=error]:[&_svg]:text-error-600 data-[variant=success]:[&_svg]:text-success-600',
+        '[&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem ({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        'relative flex items-center gap-2',
+        'rounded-sm py-1.5 pr-2 pl-8',
+        'text-sm',
+        'cursor-default select-none outline-hidden',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        '[&_svg]:shrink-0 [&_svg]:pointer-events-none',
+        '[&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup ({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+  );
+}
+
+function DropdownMenuRadioItem ({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        'relative flex items-center gap-2',
+        'rounded-sm py-1.5 pr-2 pl-8',
+        'text-sm',
+        'cursor-default select-none outline-hidden',
+        'focus:bg-accent focus:text-accent-foreground',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        '[&_svg]:shrink-0 [&_svg]:pointer-events-none',
+        '[&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel ({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5',
+        'text-sm font-medium',
+        'data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn(
+        'bg-border h-px',
+        '-mx-1 my-1',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut ({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-xs tracking-widest',
+        'text-muted-foreground',
+        'ml-auto',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub ({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger ({
+  className,
+  inset,
+  children,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+  variant?: 'default' | 'light' | 'error' | 'success';
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'flex items-center gap-2 rounded-sm px-2 py-1.5',
+        'text-sm font-semibold',
+        'cursor-pointer select-none outline-hidden',
+        'focus:bg-white focus:text-primary data-[variant=default]:focus:[&_svg]:!text-primary data-[variant=error]:focus:[&_svg]:!text-error-600 data-[variant=success]:focus:[&_svg]:!text-success-600',
+        'data-[state=open]:bg-white data-[state=open]:text-primary data-[variant=light]:data-[state=open]:text-gray-800',
+        'data-[variant=light]:text-gray-700 data-[variant=error]:text-error-600 data-[variant=success]:text-success-600',
+        'data-[variant=light]:focus:text-gray-800 data-[variant=error]:focus:text-error-600 data-[variant=success]:focus:text-success-600',
+        'data-[inset]:pl-8',
+        '[&_svg]:shrink-0',
+        '[&_svg:not([class*=\'text-\'])]:text-primary data-[variant=error]:[&_svg]:text-error-600 data-[variant=success]:[&_svg]:text-success-600',
+        'data-[variant=light]:[&_svg]:text-gray-400 data-[variant=error]:[&_svg]:text-error-600 data-[variant=success]:[&_svg]:text-success-600',
+        '[&_svg:not([class*=\'size-\'])]:size-4',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {variant === 'default' && (
+        <ChevronRightIcon className="ml-auto size-4 text-gray-400" />
+      )}
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent ({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        data-slot="dropdown-menu-sub-content"
+        className={cn(
+          'z-50 min-w-[8rem]',
+          'origin-(--radix-dropdown-menu-content-transform-origin)',
+          'overflow-hidden rounded-md p-1',
+          'bg-blur shadow-lg',
+          '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-[side=bottom]:slide-in-from-top-2',
+          'data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2',
+          'data-[side=top]:slide-in-from-bottom-2',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+};

package/src/components/molecules/DropdownMenu/index.ts

@@ -0,0 +1 @@
+export * from '@/components/molecules/DropdownMenu/dropdown-menu';

package/src/components/molecules/HoverCard/hover-card.stories.tsx

@@ -0,0 +1,48 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '@/components';
+
+const meta: Meta<typeof HoverCard> = {
+  title: 'Components/Data Display/HoverCard',
+  component: HoverCard,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'HoverCard is a component that displays a hover card.',
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+  argTypes: {
+    openDelay: {
+      control: 'number',
+      description: 'Delay in milliseconds before the hover card is opened.',
+    },
+    closeDelay: {
+      control: 'number',
+      description: 'Delay in milliseconds before the hover card is closed.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <HoverCard {...args}>
+      <HoverCardTrigger asChild><Button>Hover me</Button></HoverCardTrigger>
+      <HoverCardContent>Hover card content</HoverCardContent>
+    </HoverCard>
+  ),
+  args: {
+    openDelay: 0,
+    closeDelay: 0,
+  },
+};