{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "menu", "title": "Menu", "description": "Dropdown menu on Base UI with soft-rect items and settle motion.", "dependencies": [ "@base-ui/react", "lucide-react", "motion" ], "registryDependencies": [ "@atroui/utils", "@atroui/motion" ], "files": [ { "path": "registry/default/ui/menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Check, ChevronRight } from \"lucide-react\"\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n useReducedMotion,\n} from \"motion/react\"\n\nimport {\n layoutTween,\n menuItemVariants,\n menuPopupMotion,\n} from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\n/** Layered pop elevation — ring-as-border + cast stack + top light. */\nconst overlayElevation = \"ds-elev-pop\"\n\ntype MenuOpenContextValue = {\n open: boolean\n}\n\nconst MenuOpenContext = React.createContext(null)\n\ntype MenuHighlightContextValue = {\n layoutId: string\n activeId: string | null\n setActiveId: (id: string | null) => void\n reduce: boolean | null\n}\n\nconst MenuHighlightContext =\n React.createContext(null)\n\nfunction useMenuOpen() {\n const ctx = React.useContext(MenuOpenContext)\n if (!ctx) {\n throw new Error(\"Menu parts must be used within or \")\n }\n return ctx.open\n}\n\nfunction Menu({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n ...props\n}: MenuPrimitive.Root.Props) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const isControlled = openProp !== undefined\n const open = isControlled ? openProp : uncontrolledOpen\n\n const handleOpenChange = React.useCallback<\n NonNullable\n >(\n (next, eventDetails) => {\n if (!isControlled) setUncontrolledOpen(next)\n onOpenChange?.(next, eventDetails)\n },\n [isControlled, onOpenChange]\n )\n\n return (\n \n \n \n )\n}\n\nfunction MenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n return \n}\n\nfunction MenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n return \n}\n\nfunction MenuContent({\n align = \"start\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 6,\n className,\n render,\n onMouseLeave,\n ...props\n}: MenuPrimitive.Popup.Props &\n Pick<\n MenuPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n const open = useMenuOpen()\n const reduce = useReducedMotion()\n const groupId = React.useId()\n const [activeId, setActiveId] = React.useState(null)\n\n const highlight = React.useMemo(\n () => ({\n layoutId: `${groupId}-ink`,\n activeId,\n setActiveId,\n reduce: reduce ?? false,\n }),\n [activeId, groupId, reduce]\n )\n\n return (\n \n {open ? (\n \n \n \n \n }\n onMouseLeave={(event) => {\n setActiveId(null)\n onMouseLeave?.(event)\n }}\n {...props}\n />\n \n \n \n \n ) : null}\n \n )\n}\n\nfunction MenuHighlight({\n itemId,\n tone = \"default\",\n}: {\n itemId: string\n tone?: \"default\" | \"destructive\"\n}) {\n const highlight = React.useContext(MenuHighlightContext)\n if (!highlight || highlight.reduce || highlight.activeId !== itemId) {\n return null\n }\n return (\n \n )\n}\n\nconst itemBase =\n \"relative flex cursor-default items-center gap-2 rounded-[calc(var(--radius)-2px)] px-2 py-0.5 text-[0.8125rem] leading-snug outline-none select-none\"\n\nfunction useMenuItemMotion(itemId: string) {\n const highlight = React.useContext(MenuHighlightContext)\n const reduce = highlight?.reduce ?? false\n\n const arm = React.useCallback(() => {\n highlight?.setActiveId(itemId)\n }, [highlight, itemId])\n\n return {\n reduce,\n arm,\n rowMotion: reduce ? undefined : menuItemVariants,\n }\n}\n\nfunction MenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n return \n}\n\nfunction MenuLabel({\n className,\n inset,\n ...props\n}: MenuPrimitive.GroupLabel.Props & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenuItem({\n className,\n inset,\n variant = \"default\",\n onMouseEnter,\n onFocus,\n children,\n ...props\n}: MenuPrimitive.Item.Props & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n const itemId = React.useId()\n const { reduce, arm, rowMotion } = useMenuItemMotion(itemId)\n\n return (\n : undefined\n }\n onMouseEnter={(event) => {\n arm()\n onMouseEnter?.(event)\n }}\n onFocus={(event) => {\n arm()\n onFocus?.(event)\n }}\n {...props}\n >\n \n \n {children}\n \n \n )\n}\n\nfunction MenuSub({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n ...props\n}: MenuPrimitive.SubmenuRoot.Props) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const isControlled = openProp !== undefined\n const open = isControlled ? openProp : uncontrolledOpen\n\n const handleOpenChange = React.useCallback<\n NonNullable\n >(\n (next, eventDetails) => {\n if (!isControlled) setUncontrolledOpen(next)\n onOpenChange?.(next, eventDetails)\n },\n [isControlled, onOpenChange]\n )\n\n return (\n \n \n \n )\n}\n\nfunction MenuSubTrigger({\n className,\n inset,\n children,\n onMouseEnter,\n onFocus,\n ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n inset?: boolean\n}) {\n const itemId = React.useId()\n const { reduce, arm, rowMotion } = useMenuItemMotion(itemId)\n\n return (\n : undefined\n }\n onMouseEnter={(event) => {\n arm()\n onMouseEnter?.(event)\n }}\n onFocus={(event) => {\n arm()\n onFocus?.(event)\n }}\n {...props}\n >\n \n \n {children}\n \n \n \n )\n}\n\nfunction MenuSubContent({\n align = \"start\",\n alignOffset = -3,\n side = \"right\",\n sideOffset = 0,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n onMouseEnter,\n onFocus,\n ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n inset?: boolean\n}) {\n const itemId = React.useId()\n const { reduce, arm, rowMotion } = useMenuItemMotion(itemId)\n\n return (\n : undefined\n }\n checked={checked}\n onMouseEnter={(event) => {\n arm()\n onMouseEnter?.(event)\n }}\n onFocus={(event) => {\n arm()\n onFocus?.(event)\n }}\n {...props}\n >\n \n \n \n \n \n \n \n {children}\n \n \n )\n}\n\nfunction MenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n return \n}\n\nfunction MenuRadioItem({\n className,\n children,\n inset,\n onMouseEnter,\n onFocus,\n ...props\n}: MenuPrimitive.RadioItem.Props & {\n inset?: boolean\n}) {\n const itemId = React.useId()\n const { reduce, arm, rowMotion } = useMenuItemMotion(itemId)\n\n return (\n : undefined\n }\n onMouseEnter={(event) => {\n arm()\n onMouseEnter?.(event)\n }}\n onFocus={(event) => {\n arm()\n onFocus?.(event)\n }}\n {...props}\n >\n \n \n \n \n \n \n \n {children}\n \n \n )\n}\n\nfunction MenuSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nexport {\n Menu,\n MenuCheckboxItem,\n MenuContent,\n MenuGroup,\n MenuItem,\n MenuLabel,\n MenuPortal,\n MenuRadioGroup,\n MenuRadioItem,\n MenuSeparator,\n MenuShortcut,\n MenuSub,\n MenuSubContent,\n MenuSubTrigger,\n MenuTrigger,\n}\n", "type": "registry:ui", "target": "components/ui/menu.tsx" } ], "type": "registry:ui" }