import { Portal } from "@ark-ui/react"; import { Menu as ArkMenu } from "@ark-ui/react/menu"; import { Check, ChevronRight, Circle } from "lucide-react"; import type React from "react"; import { tv, type VariantProps } from "tailwind-variants"; import { cn } from "@/lib/utils"; export const Menu = (props: React.ComponentProps) => { const { lazyMount = true, unmountOnExit = true, ...rest } = props; return ( ); }; export const MenuTrigger = ( props: React.ComponentProps ) => ; export const menuContentVariants = tv({ base: [ "z-(--z-index)", "h-auto min-w-32", "relative", "p-1", "bg-popover", "text-popover-foreground", "rounded-md border shadow-md", "origin-(--transform-origin)", "outline-none", "overflow-y-auto overflow-x-hidden", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-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", ], }); interface MenuContentProps extends React.ComponentProps, VariantProps {} export const MenuContent = (props: MenuContentProps) => { const { className, ...rest } = props; return ( ); }; interface MenuGroupProps extends React.ComponentProps { /** * The heading of the menu item group. */ heading?: string; } export const MenuGroup = (props: MenuGroupProps) => { const { heading, children, ...rest } = props; return ( {heading && {heading}} {children} ); }; export const MenuSeparator = ( props: React.ComponentProps ) => { const { className, ...rest } = props; return ( ); }; const menuItemVariants = tv({ base: [ "group/menu-item", "relative", "px-2 py-1.5", "w-full", "flex items-center gap-2 rounded-sm", "text-sm", "select-none outline-hidden", "group-data-[date=open]/trigger-item:bg-accent group-data-[date=open]/trigger-item:text-accent-foreground", "data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg:not([class*='size-'])]:size-3.5 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0", ], variants: { variant: { default: [ "data-highlighted:bg-accent data-highlighted:text-accent-foreground", ], destructive: [ "text-destructive", "data-highlighted:bg-destructive/10", "dark:data-highlighted:bg-destructive/20", "*:[svg]:text-destructive!", ], }, }, defaultVariants: { variant: "default", }, }); interface MenuItemProps extends React.ComponentProps, VariantProps {} export const MenuItem = (props: MenuItemProps) => { const { variant = "default", className, ...rest } = props; return ( ); }; export const MenuCheckboxItem = ( props: React.ComponentProps ) => { const { className, children, ...rest } = props; return ( {children} ); }; interface MenuRadioGroupProps extends React.ComponentProps { /** * The heading of the menu radio item group. */ heading?: string; } export const MenuRadioGroup = (props: MenuRadioGroupProps) => { const { heading, children, ...rest } = props; return ( {heading && {heading}} {children} ); }; const MenuGroupLabel = ( props: React.ComponentProps ) => { const { className, children, ...rest } = props; return ( {children} ); }; export const MenuRadioItem = ( props: React.ComponentProps ) => { const { className, children, ...rest } = props; return ( {children} ); }; export const MenuSub = (props: React.ComponentProps) => ( ); export const MenuSubContent = ( props: React.ComponentProps ) => { const { className, ...rest } = props; return ( ); }; export const MenuSubTrigger = ( props: React.ComponentProps ) => { const { className, children, ...rest } = props; return ( {children} ); }; export const MenuShortcut = (props: React.ComponentProps<"span">) => { const { className, ...rest } = props; return ( ); };

Menu

Installation

Usage