var Component=(()=>{var F=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var m=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),f=(l,n)=>{for(var r in n)s(l,r,{get:n[r],enumerable:!0})},a=(l,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of y(n))!E.call(l,t)&&t!==r&&s(l,t,{get:()=>n[t],enumerable:!(o=h(n,t))||o.enumerable});return l};var M=(l,n,r)=>(r=l!=null?F(u(l)):{},a(n||!l||!l.__esModule?s(r,"default",{value:l,enumerable:!0}):r,l)),C=l=>a(s({},"__esModule",{value:!0}),l);var d=m((w,i)=>{i.exports=_jsx_runtime});var D={};f(D,{default:()=>I,frontmatter:()=>g});var e=M(d()),g={title:"Menu",description:"Show your users a list of actions they can take. \u{1F4CB}",lastUpdated:"19 Oct, 2024",links:{api_reference:"https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference",source:"https://github.com/Logging-Stuff/RetroUI/blob/main/components/retroui/Menu/Menu.tsx"}};function p(l){let n=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h2:"h2",h4:"h4",h3:"h3"},l.components),{ComponentShowcase:r,ComponentInstall:o,ComponentSource:t}=n;return o||c("ComponentInstall",!0),o.Cli||c("ComponentInstall.Cli",!0),o.Manual||c("ComponentInstall.Manual",!0),r||c("ComponentShowcase",!0),t||c("ComponentSource",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(r,{name:"menu-style-default",children:(0,e.jsx)(n.figure,{__src__:"preview/components/menu-style-default.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; import { Menu } from "@/components/retroui/Menu"; export default function MenuDefault() { return ( Menu Item 1 Menu Item 2 Menu Item 3 ); } `,"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Menu } "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Menu"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#62E884"},children:" MenuDefault"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Trigger"}),(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Content"}),(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"min-w-36"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Item"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu Item 1"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Item"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu Item 2"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Item"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu Item 3"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(n.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(o,{children:[(0,e.jsx)(o.Cli,{npmCommand:"npx shadcn@latest add 'https://retroui.dev/r/menu.json'"}),(0,e.jsxs)(o.Manual,{children:[(0,e.jsx)(n.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,e.jsx)(n.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,e.jsx)(n.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#62E884"},children:"npm"}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:" install"}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-dropdown-menu"})]})})})}),(0,e.jsx)(n.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,e.jsx)(t,{name:"menu",children:(0,e.jsx)(n.figure,{__src__:"/vercel/path0/components/retroui/Menu.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"use client"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#BF9EEE"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DropdownMenu "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-dropdown-menu"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React, { ComponentPropsWithoutRef } "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Menu "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DropdownMenu.Root;"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Trigger "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DropdownMenu.Trigger;"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"interface"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IMenuContent"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" extends"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" ComponentPropsWithoutRef"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" DropdownMenu.Content> {}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#62E884"},children:" Content"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ({ "}),(0,e.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:" IMenuContent"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DropdownMenu.Portal"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DropdownMenu.Content"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" side"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"bottom"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" align"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"start"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"bg-white border-2 shadow-md absolute top-2 min-w-20"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" MenuItem "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" HTMLDivElement,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ComponentPropsWithoutRef"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:">"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,e.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,e.jsx)(n.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"DropdownMenu.Item"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"relative text-black flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"MenuItem.displayName "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"MenuItem"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" MenuComponent "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Object."}),(0,e.jsx)(n.span,{style:{color:"#62E884"},children:"assign"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"(Menu, {"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Trigger,"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Content,"})}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Item"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" MenuItem,"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { MenuComponent "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"as"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" Menu };"})]})]})})})})]})]}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(n.h2,{id:"examples",children:"Examples"}),` `,(0,e.jsx)(n.h3,{id:"default",children:"Default"}),` `,(0,e.jsx)(r,{name:"menu-style-default",children:(0,e.jsx)(n.figure,{__src__:"preview/components/menu-style-default.tsx",__rawString__:`import { Button } from "@/components/retroui/Button"; import { Menu } from "@/components/retroui/Menu"; export default function MenuDefault() { return ( Menu Item 1 Menu Item 2 Menu Item 3 ); } `,"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(n.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Button } "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Button"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" { Menu } "}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Menu"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" default"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#62E884"},children:" MenuDefault"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Trigger"}),(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" asChild"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Button"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Content"}),(0,e.jsx)(n.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#E7EE98"},children:"min-w-36"}),(0,e.jsx)(n.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Item"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu Item 1"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Item"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu Item 2"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Menu.Item"}),(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:">Menu Item 3"})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(n.span,{"data-line":"",children:[(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(n.span,{"data-line":"",children:(0,e.jsx)(n.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function S(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,Object.assign({},l,{children:(0,e.jsx)(p,l)})):p(l)}var I=S;function c(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(D);})(); ;return Component;