{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar-story",
  "title": "Menubar Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating menubar component usage and variants",
  "registryDependencies": [
    "menubar"
  ],
  "files": [
    {
      "path": "registry/ui/menubar-story/menubar-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/components/ui/menubar\";\nimport { expect, userEvent, within } from \"storybook/test\";\n\n/**\n * A visually persistent menu common in desktop applications that provides\n * quick access to a consistent set of commands.\n */\nconst meta = {\n  title: \"ui/base/Menubar\",\n  component: Menubar,\n  tags: [\"autodocs\"],\n  argTypes: {},\n\n  render: (args) => (\n    <Menubar {...args}>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>\n            New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n          </MenubarItem>\n          <MenubarItem>New Window</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem disabled>Share</MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem>Print</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Menubar>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the menubar.\n */\nexport const Default: Story = {};\n\n/**\n * A menubar with a submenu.\n */\nexport const WithSubmenu: Story = {\n  render: (args) => (\n    <Menubar {...args}>\n      <MenubarMenu>\n        <MenubarTrigger>Actions</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>Download</MenubarItem>\n          <MenubarSub>\n            <MenubarSubTrigger>Share</MenubarSubTrigger>\n            <MenubarSubContent>\n              <MenubarItem>Email link</MenubarItem>\n              <MenubarItem>Messages</MenubarItem>\n              <MenubarItem>Notes</MenubarItem>\n            </MenubarSubContent>\n          </MenubarSub>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n};\n\n/**\n * A menubar with radio items.\n */\nexport const WithRadioItems: Story = {\n  render: (args) => (\n    <Menubar {...args}>\n      <MenubarMenu>\n        <MenubarTrigger>View</MenubarTrigger>\n        <MenubarContent>\n          <MenubarLabel inset>Device Size</MenubarLabel>\n          <MenubarRadioGroup value=\"md\">\n            <MenubarRadioItem value=\"sm\">Small</MenubarRadioItem>\n            <MenubarRadioItem value=\"md\">Medium</MenubarRadioItem>\n            <MenubarRadioItem value=\"lg\">Large</MenubarRadioItem>\n          </MenubarRadioGroup>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n};\n\n/**\n * A menubar with checkbox items.\n */\nexport const WithCheckboxItems: Story = {\n  render: (args) => (\n    <Menubar {...args}>\n      <MenubarMenu>\n        <MenubarTrigger>Filters</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>Show All</MenubarItem>\n          <MenubarGroup>\n            <MenubarCheckboxItem checked>Unread</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Important</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Flagged</MenubarCheckboxItem>\n          </MenubarGroup>\n        </MenubarContent>\n      </MenubarMenu>\n    </Menubar>\n  ),\n};\n\nexport const ShouldOpenClose: Story = {\n  name: \"when clicking an item, should close the menubar\",\n  tags: [\"!dev\", \"!autodocs\"],\n  play: async ({ canvasElement, step }) => {\n    const canvasBody = within(canvasElement.ownerDocument.body);\n\n    await step(\"open the menubar\", async () => {\n      await userEvent.click(\n        await canvasBody.findByRole(\"menuitem\", { name: /file/i }),\n      );\n      expect(await canvasBody.findByRole(\"menu\")).toBeInTheDocument();\n    });\n\n    const items = await canvasBody.findAllByRole(\"menuitem\");\n    expect(items).toHaveLength(5);\n\n    await step(\"click the first item to close the menubar\", async () => {\n      await userEvent.click(items[0], { delay: 100 });\n    });\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "menubar",
    "navigation"
  ],
  "type": "registry:component"
}