{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-radix-dropdown-menu",
  "title": "Radix Dropdown Menu Demo",
  "description": "Demo showing an animated radix dropdown menu.",
  "registryDependencies": [
    "@animate-ui/primitives-radix-dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/radix/dropdown-menu/index.tsx",
      "content": "'use client';\n\nimport {\n  ChevronRight,\n  CreditCard,\n  Keyboard,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-react';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuHighlight,\n  DropdownMenuHighlightItem,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/components/animate-ui/primitives/radix/dropdown-menu';\n\nconst itemClassName =\n  'relative z-[1] focus:text-accent-foreground select-none flex items-center gap-2 px-2 py-1.5 text-sm outline-none [&_svg]:size-4 [&_span]:data-[slot=dropdown-menu-shortcut]:text-xs [&_span]:data-[slot=dropdown-menu-shortcut]:ml-auto';\nconst separatorClassName = '-mx-1 my-1 h-px bg-border';\n\ninterface RadixDropdownMenuDemoProps {\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  sideOffset?: number;\n  align?: 'start' | 'center' | 'end';\n  alignOffset?: number;\n}\n\nexport const RadixDropdownMenuDemo = ({\n  side,\n  sideOffset,\n  align,\n  alignOffset,\n}: RadixDropdownMenuDemoProps) => {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n      <DropdownMenuContent\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className=\"w-56 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 z-50\"\n      >\n        <DropdownMenuHighlight className=\"absolute inset-0 bg-accent z-0\">\n          <DropdownMenuLabel className=\"px-2 py-1.5 text-sm font-semibold\">\n            My Account\n          </DropdownMenuLabel>\n          <DropdownMenuSeparator className={separatorClassName} />\n          <DropdownMenuGroup>\n            <DropdownMenuHighlightItem>\n              <DropdownMenuItem className={itemClassName}>\n                <User />\n                <span>Profile</span>\n                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            </DropdownMenuHighlightItem>\n            <DropdownMenuHighlightItem>\n              <DropdownMenuItem className={itemClassName}>\n                <CreditCard />\n                <span>Billing</span>\n                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            </DropdownMenuHighlightItem>\n            <DropdownMenuHighlightItem>\n              <DropdownMenuItem className={itemClassName}>\n                <Settings />\n                <span>Settings</span>\n                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            </DropdownMenuHighlightItem>\n            <DropdownMenuHighlightItem>\n              <DropdownMenuItem className={itemClassName}>\n                <Keyboard />\n                <span>Keyboard shortcuts</span>\n                <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            </DropdownMenuHighlightItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator className={separatorClassName} />\n          <DropdownMenuGroup>\n            <DropdownMenuHighlightItem>\n              <DropdownMenuItem className={itemClassName}>\n                <Users />\n                <span>Team</span>\n              </DropdownMenuItem>\n            </DropdownMenuHighlightItem>\n            <DropdownMenuSub>\n              <DropdownMenuHighlightItem>\n                <DropdownMenuSubTrigger className={itemClassName}>\n                  <UserPlus />\n                  <span>Invite users</span>\n                  <ChevronRight data-chevron className=\"ml-auto size-4\" />\n                </DropdownMenuSubTrigger>\n              </DropdownMenuHighlightItem>\n\n              <DropdownMenuSubContent className=\"overflow-hidden min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-background p-1 z-50\">\n                <DropdownMenuHighlightItem>\n                  <DropdownMenuItem className={itemClassName}>\n                    <Mail />\n                    <span>Email</span>\n                  </DropdownMenuItem>\n                </DropdownMenuHighlightItem>\n                <DropdownMenuHighlightItem>\n                  <DropdownMenuItem className={itemClassName}>\n                    <MessageSquare />\n                    <span>Message</span>\n                  </DropdownMenuItem>\n                </DropdownMenuHighlightItem>\n                <DropdownMenuSeparator className={separatorClassName} />\n                <DropdownMenuHighlightItem>\n                  <DropdownMenuItem className={itemClassName}>\n                    <PlusCircle />\n                    <span>More...</span>\n                  </DropdownMenuItem>\n                </DropdownMenuHighlightItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuHighlightItem>\n              <DropdownMenuItem className={itemClassName}>\n                <Plus />\n                <span>New Team</span>\n                <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            </DropdownMenuHighlightItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator className={separatorClassName} />\n          <DropdownMenuHighlightItem>\n            <DropdownMenuItem className={itemClassName}>\n              <LogOut />\n              <span>Log out</span>\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuHighlightItem>\n        </DropdownMenuHighlight>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/radix/dropdown-menu.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "DropdownMenuContent": {
        "side": {
          "value": "bottom",
          "options": {
            "top": "top",
            "bottom": "bottom",
            "left": "left",
            "right": "right"
          }
        },
        "sideOffset": {
          "value": 4
        },
        "align": {
          "value": "center",
          "options": {
            "start": "start",
            "center": "center",
            "end": "end"
          }
        },
        "alignOffset": {
          "value": 0
        }
      }
    }
  },
  "type": "registry:ui"
}