community-rule/docs/assets/MenuBarItem.stories-Btz38mn4.js

import { j as e } from "./jsx-runtime-C_nHp4yK.js";
import { M as a } from "./MenuBarItem-Dp8NM2fx.js";
import "./iframe-D_aMTKb2.js";
import "./preload-helper-DIZFD4sK.js";
const u = {
    title: "Components/MenuBarItem",
    component: a,
    parameters: {
      layout: "centered",
      docs: {
        description: {
          component:
            "A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators.",
        },
      },
    },
    argTypes: {
      variant: {
        control: { type: "select" },
        options: ["default", "home"],
        description: "The visual style variant of the menu item",
      },
      size: {
        control: { type: "select" },
        options: [
          "xsmall",
          "xsmallUseCases",
          "homeMd",
          "homeUseCases",
          "large",
          "largeUseCases",
          "homeXlarge",
          "xlarge",
        ],
        description: "The size of the menu item",
      },
      disabled: {
        control: { type: "boolean" },
        description: "Whether the menu item is disabled",
      },
      href: { control: { type: "text" }, description: "The link destination" },
      onClick: { action: "clicked" },
    },
    tags: ["autodocs"],
  },
  n = { args: { children: "Menu Item", size: "large" } },
  r = {
    args: { children: "Menu Item", size: "large" },
    render: (s) =>
      e.jsx("div", {
        className: "space-y-4",
        children: e.jsxs("div", {
          className: "space-x-4",
          children: [
            e.jsx(a, { ...s, variant: "default", children: "Default" }),
            e.jsx(a, { ...s, variant: "home", children: "Home" }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: {
          story: "Different visual variants of the menu item component.",
        },
      },
    },
  },
  t = {
    args: { children: "Menu Item", variant: "default" },
    render: (s) =>
      e.jsx("div", {
        className: "space-y-4",
        children: e.jsxs("div", {
          className: "space-x-4",
          children: [
            e.jsx(a, { ...s, size: "xsmall", children: "XSmall" }),
            e.jsx(a, { ...s, size: "large", children: "Large" }),
            e.jsx(a, { ...s, size: "xlarge", children: "XLarge" }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: {
          story: "Different sizes available for the menu item component.",
        },
      },
    },
  },
  i = {
    args: { children: "Menu Item", size: "large", variant: "default" },
    render: (s) =>
      e.jsx("div", {
        className: "space-y-4",
        children: e.jsxs("div", {
          className: "space-x-4",
          children: [
            e.jsx(a, { ...s, children: "Normal" }),
            e.jsx(a, { ...s, disabled: !0, children: "Disabled" }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: { story: "Different states of the menu item component." },
      },
    },
  },
  l = {
    args: {},
    render: () =>
      e.jsxs("div", {
        className: "space-y-6",
        children: [
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Default Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(a, { size: "xsmall", children: "XSmall" }),
                  e.jsx(a, { size: "large", children: "Large" }),
                  e.jsx(a, { size: "xlarge", children: "XLarge" }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Home Variant",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(a, {
                    variant: "home",
                    size: "xsmall",
                    children: "XSmall",
                  }),
                  e.jsx(a, {
                    variant: "home",
                    size: "large",
                    children: "Large",
                  }),
                  e.jsx(a, {
                    variant: "home",
                    size: "xlarge",
                    children: "XLarge",
                  }),
                ],
              }),
            ],
          }),
          e.jsxs("div", {
            children: [
              e.jsx("h3", {
                className: "text-white font-semibold mb-3",
                children: "Disabled States",
              }),
              e.jsxs("div", {
                className: "space-x-4",
                children: [
                  e.jsx(a, {
                    size: "large",
                    disabled: !0,
                    children: "Default Disabled",
                  }),
                  e.jsx(a, {
                    variant: "home",
                    size: "large",
                    disabled: !0,
                    children: "Home Disabled",
                  }),
                ],
              }),
            ],
          }),
        ],
      }),
    parameters: {
      docs: {
        description: {
          story:
            "Complete overview of all menu item variants, sizes, and states.",
        },
      },
    },
  };
n.parameters = {
  ...n.parameters,
  docs: {
    ...n.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Menu Item",
    size: "large"
  }
}`,
      ...n.parameters?.docs?.source,
    },
  },
};
r.parameters = {
  ...r.parameters,
  docs: {
    ...r.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Menu Item",
    size: "large"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <MenuBarItem {...args} variant="default">
          Default
        </MenuBarItem>
        <MenuBarItem {...args} variant="home">
          Home
        </MenuBarItem>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different visual variants of the menu item component."
      }
    }
  }
}`,
      ...r.parameters?.docs?.source,
    },
  },
};
t.parameters = {
  ...t.parameters,
  docs: {
    ...t.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Menu Item",
    variant: "default"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <MenuBarItem {...args} size="xsmall">
          XSmall
        </MenuBarItem>
        <MenuBarItem {...args} size="large">
          Large
        </MenuBarItem>
        <MenuBarItem {...args} size="xlarge">
          XLarge
        </MenuBarItem>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different sizes available for the menu item component."
      }
    }
  }
}`,
      ...t.parameters?.docs?.source,
    },
  },
};
i.parameters = {
  ...i.parameters,
  docs: {
    ...i.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    children: "Menu Item",
    size: "large",
    variant: "default"
  },
  render: args => <div className="space-y-4">
      <div className="space-x-4">
        <MenuBarItem {...args}>Normal</MenuBarItem>
        <MenuBarItem {...args} disabled>
          Disabled
        </MenuBarItem>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Different states of the menu item component."
      }
    }
  }
}`,
      ...i.parameters?.docs?.source,
    },
  },
};
l.parameters = {
  ...l.parameters,
  docs: {
    ...l.parameters?.docs,
    source: {
      originalSource: `{
  args: {},
  render: () => <div className="space-y-6">
      <div>
        <h3 className="text-white font-semibold mb-3">Default Variant</h3>
        <div className="space-x-4">
          <MenuBarItem size="xsmall">XSmall</MenuBarItem>
          <MenuBarItem size="large">Large</MenuBarItem>
          <MenuBarItem size="xlarge">XLarge</MenuBarItem>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Home Variant</h3>
        <div className="space-x-4">
          <MenuBarItem variant="home" size="xsmall">
            XSmall
          </MenuBarItem>
          <MenuBarItem variant="home" size="large">
            Large
          </MenuBarItem>
          <MenuBarItem variant="home" size="xlarge">
            XLarge
          </MenuBarItem>
        </div>
      </div>

      <div>
        <h3 className="text-white font-semibold mb-3">Disabled States</h3>
        <div className="space-x-4">
          <MenuBarItem size="large" disabled>
            Default Disabled
          </MenuBarItem>
          <MenuBarItem variant="home" size="large" disabled>
            Home Disabled
          </MenuBarItem>
        </div>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Complete overview of all menu item variants, sizes, and states."
      }
    }
  }
}`,
      ...l.parameters?.docs?.source,
    },
  },
};
const p = ["Default", "Variants", "Sizes", "States", "AllVariants"];
export {
  l as AllVariants,
  n as Default,
  t as Sizes,
  i as States,
  r as Variants,
  p as __namedExportsOrder,
  u as default,
};