{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card-story",
  "title": "Hover Card Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating hover card component usage and variants",
  "registryDependencies": [
    "hover-card"
  ],
  "files": [
    {
      "path": "registry/ui/hover-card-story/hover-card-base.stories.tsx",
      "content": "import { expect, userEvent, waitFor, within } from \"storybook/test\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/components/ui/hover-card\";\n\n/**\n * For sighted users to preview content available behind a link.\n */\nconst meta = {\n  title: \"ui/base/HoverCard\",\n  component: HoverCard,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {},\n  render: (args) => (\n    <HoverCard {...args}>\n      <HoverCardTrigger>Hover</HoverCardTrigger>\n      <HoverCardContent>\n        The React Framework - created and maintained by @vercel.\n      </HoverCardContent>\n    </HoverCard>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof HoverCard>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the hover card.\n */\nexport const Default: Story = {};\n\n/**\n * Use the `delay` and `closeDelay` props to control the delay before the\n * hover card opens and closes.\n */\nexport const Instant: Story = {\n  render: (args) => (\n    <HoverCard {...args}>\n      <HoverCardTrigger delay={0} closeDelay={0}>\n        Hover\n      </HoverCardTrigger>\n      <HoverCardContent>\n        The React Framework - created and maintained by @vercel.\n      </HoverCardContent>\n    </HoverCard>\n  ),\n};\n\nexport const ShouldShowOnHover: Story = {\n  name: \"when hovering over trigger, should show hover card content\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    await step(\"Hover over the trigger element\", async () => {\n      await userEvent.hover(await canvasBody.findByText(/hover/i));\n      await waitFor(() =>\n        expect(\n          canvasElement.ownerDocument.body.querySelector(\n            \"[data-slot=hover-card-content]\",\n          ),\n        ).toBeVisible(),\n      );\n    });\n    await step(\"Unhover the trigger element\", async () => {\n      await userEvent.unhover(await canvasBody.findByText(/hover/i));\n      await waitFor(() =>\n        expect(\n          canvasElement.ownerDocument.body.querySelector(\n            \"[data-slot=hover-card-content]\",\n          ),\n        ).toBeNull(),\n      );\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "hover",
    "popover"
  ],
  "type": "registry:component"
}