var Component=(()=>{var p=Object.create;var t=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var C=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),b=(l,e)=>{for(var r in e)t(l,r,{get:e[r],enumerable:!0})},s=(l,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of y(e))!u.call(l,o)&&o!==r&&t(l,o,{get:()=>e[o],enumerable:!(c=D(e,o))||c.enumerable});return l};var E=(l,e,r)=>(r=l!=null?p(m(l)):{},s(e||!l||!l.__esModule?t(r,"default",{value:l,enumerable:!0}):r,l)),f=l=>s(t({},"__esModule",{value:!0}),l);var a=C((I,d)=>{d.exports=_jsx_runtime});var F={};b(F,{default:()=>N,frontmatter:()=>w});var n=E(a()),w={title:"Dropdown Menu",description:"Shows a menu to the user, like a list of actions or functions, activated by a button.",libraryImport:'import { DropdownMenu } from "@xbeshui/core"',sourceGitLink:"View source code",sourceEditGitLink:"Edit this page",npmPackage:"@xbeshui/core",npmLink:"https://www.npmjs.com/package/xbeshui",gitLink:"https://github.com/madhavdutta/xbeshUI",docGitLink:"https://github.com/madhavdutta/xbesh-ui-kit-docs"};function h(l){let e=Object.assign({h3:"h3",a:"a",span:"span",div:"div",pre:"pre",code:"code",h2:"h2",p:"p",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},l.components),{Tabs:r,XbDropdownMenu:c}=e;return r||i("Tabs",!0),r.TabsContent||i("Tabs.TabsContent",!0),r.TabsList||i("Tabs.TabsList",!0),r.TabsTrigger||i("Tabs.TabsTrigger",!0),c||i("XbDropdownMenu",!0),(0,n.jsxs)(r,{defaultValue:"compTab",className:"w-full mt-6",children:[(0,n.jsxs)(r.TabsList,{variant:"underline",className:"border-b w-full justify-start",children:[(0,n.jsx)(r.TabsTrigger,{value:"compTab",children:"Component"}),(0,n.jsx)(r.TabsTrigger,{value:"props",children:"Props"})]}),(0,n.jsxs)(r.TabsContent,{value:"compTab",children:[(0,n.jsxs)(e.h3,{id:"usage",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),(0,n.jsxs)(r,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,n.jsxs)(r.TabsList,{className:"border-b w-full bg-zinc-100 dark:bg-black justify-start",children:[(0,n.jsx)(r.TabsTrigger,{value:"preview1",children:"Preview"}),(0,n.jsx)(r.TabsTrigger,{value:"code1",children:"Code"})]}),(0,n.jsx)(r.TabsContent,{value:"code1",className:"p-5",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"jsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",children:[(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'react'"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { Button, DropdownMenu } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'@xbeshui/core'"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" { IconBrandGithub, IconCirclePlus, IconCloud, IconCreditCard, IconKeyboard, IconLifebuoy, IconLogout, IconMail, IconMessage2, IconPlus, IconSettings, IconUser, IconUserPlus, IconUsers } "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:"'@tabler/icons-react'"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"function"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#D2A8FF"},children:"XbDropdownMenu"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:"(){"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Trigger"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"asChild"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"Button"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"variant"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Dropdown menu Open"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Content"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"w-56"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Label"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">My Account"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Separator"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Group"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconUser"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Profile"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Shortcut"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">\u21E7\u2318P"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconCreditCard"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Billing"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Shortcut"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">\u2318B"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconSettings"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Settings"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Shortcut"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">\u2318S"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconKeyboard"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Keyboard shortcuts"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Shortcut"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">\u2318K"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Separator"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Group"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconUsers"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Team"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Sub"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.SubTrigger"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconUserPlus"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Invite users"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Portal"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.SubContent"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconMail"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Email"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconMessage2"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Message"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Separator"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconCirclePlus"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">More..."})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconPlus"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">New Team"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Shortcut"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">\u2318+T"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Separator"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconBrandGithub"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">GitHub"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconLifebuoy"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Support"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"disabled"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconCloud"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">API"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Separator"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Item"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"IconLogout"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79C0FF"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"mr-2 h-4 w-4"'}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">Log out"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#7EE787"},children:"DropdownMenu.Shortcut"}),(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:">\u21E7\u2318Q"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#C9D1D9"},children:" }"})})]})})})}),(0,n.jsx)(r.TabsContent,{value:"preview1",children:(0,n.jsx)("div",{className:"flex justify-center p-10",children:(0,n.jsx)(c,{})})})]})]}),(0,n.jsxs)(r.TabsContent,{value:"props",children:[(0,n.jsxs)(e.h3,{id:"dropdown-menu-component-props",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#dropdown-menu-component-props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Dropdown Menu component props"]}),(0,n.jsxs)(e.h2,{id:"root",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#root",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Root"]}),(0,n.jsx)(e.p,{children:"Contains all the parts of a dropdown menu."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"defaultOpen"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Determines whether the component is initially open or closed by default."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"open"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Controls whether the component is currently open or closed."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onOpenChange"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the open state of the component changes."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"modal"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Specifies whether the component is rendered as a modal, typically used for overlaying content on top of the rest of the page."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"dir"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Sets the directionality of text within the ToggleGroup, allowing customization for languages that are written from right to left."})]})]})]}),(0,n.jsxs)(e.h2,{id:"trigger",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#trigger",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Trigger"]}),(0,n.jsx)(e.p,{children:"The button that shows or hides the dropdown menu. By default, the DropdownMenu.Content will appear next to the button."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,n.jsxs)(e.h2,{id:"portal",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#portal",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Portal"]}),(0,n.jsx)(e.p,{children:"When used, moves the content part into the body."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"forceMount"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"container"}),(0,n.jsx)(e.td,{children:"HTMLElement"}),(0,n.jsx)(e.td,{children:"Specifies the container element in which the component should be rendered."})]})]})]}),(0,n.jsxs)(e.h2,{id:"content",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#content",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Content"]}),(0,n.jsx)(e.p,{children:"The component that appears when the dropdown menu is open."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"loop"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"By default, arrow key presses loop through items, allowing navigation from the first to the last and from the last to the first."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onCloseAutoFocus"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies whether the component automatically focuses when it closes."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onEscapeKeyDown"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the escape key is pressed while the component is focused."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onPointerDownOutside"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when a pointer event occurs outside of the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onFocusOutside"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when focus moves outside of the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onInteractOutside"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when any interaction occurs outside of the component, such as clicks or touches."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"forceMount"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"side"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Specifies the side of the target or parent element where the component should be positioned."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"sideOffset"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the offset for positioning the component from the side of its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"align"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Specifies the alignment of the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"alignOffset"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the offset for aligning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"avoidCollisions"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Enables collision detection and avoidance when positioning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"collisionBoundary"}),(0,n.jsx)(e.td,{children:"boundary"}),(0,n.jsx)(e.td,{children:"Specifies the boundary within which collisions are detected and avoided when positioning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"collisionPadding"}),(0,n.jsx)(e.td,{children:"number | Padding"}),(0,n.jsx)(e.td,{children:"Sets padding for collision detection during component positioning."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"arrowPadding"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Sets the padding around the arrow element of the component, adjusting its position relative to the target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"sticky"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Enables sticky behavior, allowing the component to remain fixed in its position when scrolling."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"hideWhenDetached"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Hides the component when it's detached from the DOM, improving performance and managing visibility."})]})]})]}),(0,n.jsxs)(e.h2,{id:"arrow",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#arrow",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Arrow"]}),(0,n.jsx)(e.p,{children:"An optional arrow element to render alongside the dropdown menu. This can be used to help visually link the trigger with the DropdownMenu.Content. Must be rendered inside DropdownMenu.Content."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"width"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Sets the width of the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"height"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Sets the height of the component."})]})]})]}),(0,n.jsxs)(e.h2,{id:"item",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#item",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Item"]}),(0,n.jsx)(e.p,{children:"The component that contains the dropdown menu items."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"disabled"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"If enabled, the spotlight will not be rendered."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onSelect"}),(0,n.jsx)(e.td,{children:"Function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when an item is selected within the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"TextValue"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Sets the text value of the component."})]})]})]}),(0,n.jsxs)(e.h2,{id:"group",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#group",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Group"]}),(0,n.jsx)(e.p,{children:"Used to group multiple DropdownMenu.Items."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,n.jsxs)(e.h2,{id:"label",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#label",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Label"]}),(0,n.jsx)(e.p,{children:"Used to render a label. It won't be focusable using arrow keys."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,n.jsxs)(e.h2,{id:"checkboxitem",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#checkboxitem",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"CheckBoxItem"]}),(0,n.jsx)(e.p,{children:"An item that can be controlled and rendered like a checkbox."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"checked"}),(0,n.jsx)(e.td,{children:"boolean | 'indeterminate'"}),(0,n.jsx)(e.td,{children:"Indicates whether the component is currently checked."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onCheckedChange"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the checked state of the component changes."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"disabled"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"If enabled, the spotlight will not be rendered."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onSelect"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when an item is selected within the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"textValue"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Sets the text value of the component."})]})]})]}),(0,n.jsxs)(e.h2,{id:"radiogroup",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#radiogroup",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"RadioGroup"]}),(0,n.jsx)(e.p,{children:"Used to group multiple DropdownMenu.RadioItems."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"value"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Sets the currently selected value(s) within the ToggleGroup."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onValueChange"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the value of the ToggleGroup changes."})]})]})]}),(0,n.jsxs)(e.h2,{id:"radioitem",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#radioitem",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"RadioItem"]}),(0,n.jsx)(e.p,{children:"An item that can be controlled and rendered like a radio."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"value"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Sets the currently selected value(s) within the ToggleGroup."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"disabled"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"If enabled, the spotlight will not be rendered."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onSelect"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when an item is selected within the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"textValue"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Sets the text value of the component."})]})]})]}),(0,n.jsxs)(e.h2,{id:"itemindicator",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#itemindicator",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"ItemIndicator"]}),(0,n.jsx)(e.p,{children:"Renders when the parent DropdownMenu.CheckboxItem or DropdownMenu.RadioItem is checked. You can style this element directly, or you can use it as a wrapper to put an icon into, or both."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"forceMount"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]})]})]}),(0,n.jsxs)(e.h2,{id:"separator",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#separator",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Separator"]}),(0,n.jsx)(e.p,{children:"Used to visually separate items in the dropdown menu."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]})})]}),(0,n.jsxs)(e.h2,{id:"sub",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#sub",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Sub"]}),(0,n.jsx)(e.p,{children:"Contains all the parts of a submenu."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"defaultOpen"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Determines whether the component is initially open or closed by default."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"open"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Controls whether the component is currently open or closed."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onOpenChange"}),(0,n.jsx)(e.td,{children:"function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the open state of the component changes."})]})]})]}),(0,n.jsxs)(e.h2,{id:"sub---trigger",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#sub---trigger",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Sub - Trigger"]}),(0,n.jsx)(e.p,{children:"An item that opens a submenu. Must be rendered inside DropdownMenu.Sub."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"disabled"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"If enabled, the spotlight will not be rendered."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"textValue"}),(0,n.jsx)(e.td,{children:"string"}),(0,n.jsx)(e.td,{children:"Sets the text value of the component."})]})]})]}),(0,n.jsxs)(e.h2,{id:"subcontent",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#subcontent",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"SubContent"]}),(0,n.jsx)(e.p,{children:"The component that pops out when a submenu is open. Must be rendered inside DropdownMenu.Sub."}),(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Name"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"aschild"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Indicates if an element is treated as a child within a component or container."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"loop"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"By default, arrow key presses loop through items, allowing navigation from the first to the last and from the last to the first."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onEscapeKeyDown"}),(0,n.jsx)(e.td,{children:"Function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when the escape key is pressed while the component is focused."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onPointerDownOutside"}),(0,n.jsx)(e.td,{children:"Function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when a pointer event occurs outside of the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onFocusOutside"}),(0,n.jsx)(e.td,{children:"Function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when focus moves outside of the component."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"onInteractOutside"}),(0,n.jsx)(e.td,{children:"Function"}),(0,n.jsx)(e.td,{children:"Specifies a function to be called when any interaction occurs outside of the component, such as clicks or touches."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"forceMount"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Forces the component to mount in the DOM, regardless of its initial visibility state."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"sideOffset"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the offset for positioning the component from the side of its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"alignOffset"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Specifies the offset for aligning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"avoidCollisions"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Enables collision detection and avoidance when positioning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"collisionBoundary"}),(0,n.jsx)(e.td,{children:"Boundary"}),(0,n.jsx)(e.td,{children:"Specifies the boundary within which collisions are detected and avoided when positioning the component relative to its target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"collisionPadding"}),(0,n.jsx)(e.td,{children:"number | Padding"}),(0,n.jsx)(e.td,{children:"Sets padding for collision detection during component positioning."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"arrowPadding"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Sets the padding around the arrow element of the component, adjusting its position relative to the target or parent element."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"sticky"}),(0,n.jsx)(e.td,{children:"enum"}),(0,n.jsx)(e.td,{children:"Enables sticky behavior, allowing the component to remain fixed in its position when scrolling."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"hideWhenDetached"}),(0,n.jsx)(e.td,{children:"boolean"}),(0,n.jsx)(e.td,{children:"Hides the component when it's detached from the DOM, improving performance and managing visibility."})]})]})]})]})]})}function g(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(h,l)})):h(l)}var N=g;function i(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(F);})(); ;return Component;