{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menu",
  "title": "Menu",
  "author": "Tori Bryan",
  "description": "A short list of actions that opens from a button.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Menu = MenuPrimitive.Root\n\nfunction MenuTrigger(props: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"start\",\n  alignOffset = 0,\n  collisionAvoidance,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"collisionAvoidance\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        collisionAvoidance={collisionAvoidance}\n        className=\"isolate z-50 outline-none\"\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"menu-content\"\n          className={cn(\n            \"z-50 max-h-(--available-height) min-w-40 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 motion-reduce:data-open:animate-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:data-closed:animate-none\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction MenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  /** Lines the label up with items that have an icon or indicator. */\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs text-muted-foreground data-[inset=true]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst itemClasses =\n  \"relative flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset=true]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 not-data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-muted-foreground\"\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  /** Lines the item up with items that have an icon or indicator. */\n  inset?: boolean\n  /** `destructive` for an action that deletes or can't be undone. */\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        itemClasses,\n        \"data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive-subtle data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:[&_svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      className={cn(itemClasses, \"pl-8\", className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-4 items-center justify-center\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon className=\"text-foreground\" />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      className={cn(itemClasses, \"pl-8\", className)}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-4 items-center justify-center\">\n        <MenuPrimitive.RadioItemIndicator>\n          <span className=\"block size-1.5 rounded-full bg-foreground\" />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menu-shortcut\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst MenuSub = MenuPrimitive.SubmenuRoot\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  /** Lines the item up with items that have an icon or indicator. */\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        itemClasses,\n        \"data-popup-open:bg-accent data-popup-open:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction MenuSubContent({\n  side = \"right\",\n  sideOffset = 0,\n  alignOffset = -5,\n  ...props\n}: React.ComponentProps<typeof MenuContent>) {\n  return (\n    <MenuContent\n      data-slot=\"menu-sub-content\"\n      side={side}\n      sideOffset={sideOffset}\n      alignOffset={alignOffset}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menu,\n  MenuCheckboxItem,\n  MenuContent,\n  MenuGroup,\n  MenuItem,\n  MenuLabel,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSub,\n  MenuSubContent,\n  MenuSubTrigger,\n  MenuTrigger,\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-destructive-subtle": "var(--destructive-subtle)",
      "text-color-destructive": "var(--destructive-text)",
      "background-color-destructive-subtle": "var(--destructive-subtle)"
    },
    "light": {
      "destructive-subtle": "color-mix(in oklch, var(--color-red-700) 8%, transparent)",
      "destructive-text": "var(--destructive)"
    },
    "dark": {
      "destructive-subtle": "color-mix(in oklch, var(--color-red-400) 20%, transparent)",
      "destructive-text": "var(--destructive)"
    }
  },
  "meta": {
    "tier": "base-components",
    "group": "Overlays",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-overlays-menu--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-overlays-menu--docs",
  "categories": [
    "base-components",
    "overlays"
  ],
  "type": "registry:ui"
}