{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-story",
  "title": "Tabs Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating tabs component usage and variants",
  "registryDependencies": [
    "tabs"
  ],
  "files": [
    {
      "path": "registry/ui/tabs-story/tabs-base.stories.tsx",
      "content": "import { expect, userEvent, waitFor } from \"storybook/test\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\";\n\n/**\n * A set of layered sections of content—known as tab panels—that are displayed\n * one at a time.\n */\nconst meta = {\n  title: \"ui/base/Tabs\",\n  component: Tabs,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {\n    defaultValue: \"account\",\n    className: \"w-96\",\n  },\n  render: (args) => (\n    <Tabs {...args}>\n      <TabsList className=\"grid grid-cols-2\">\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\">\n        Make changes to your account here.\n      </TabsContent>\n      <TabsContent value=\"password\">Change your password here.</TabsContent>\n    </Tabs>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Tabs>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the tabs.\n */\nexport const Default: Story = {};\n\nexport const ShouldChangeTabs: Story = {\n  name: \"when clicking a tab, should change the content\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvas, step }) => {\n    const tabs = await canvas.findAllByRole(\"tab\");\n\n    for (let i = 0; i < tabs.length; i++) {\n      await step(`click the '${tabs[i].innerText}' tab`, async () => {\n        await userEvent.click(tabs[i]);\n        await waitFor(() =>\n          expect(tabs[i]).toHaveAttribute(\"aria-selected\", \"true\"),\n        );\n        await expect(\n          await canvas.queryByRole(\"tabpanel\", { name: tabs[i].innerText }),\n        ).toBeVisible();\n      });\n\n      await step(\"check other tabs are not selected\", async () => {\n        for (let j = 0; j < tabs.length; j++) {\n          if (j !== i) {\n            expect(tabs[j]).toHaveAttribute(\"aria-selected\", \"false\");\n            expect(\n              await canvas.queryByRole(\"tabpanel\", { name: tabs[j].innerText }),\n            ).toBeNull();\n          }\n        }\n      });\n    }\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "tabs",
    "navigation"
  ],
  "type": "registry:component"
}