{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-example",
  "title": "Dropdown Menu",
  "registryDependencies": [
    "avatar",
    "button",
    "dialog",
    "dropdown-menu",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-rhea/examples/dropdown-menu-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-rhea/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-rhea/ui/avatar\"\nimport { Button } from \"@/registry/base-rhea/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-rhea/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-rhea/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}