import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

type MenuWidth = "menu" | "default" | "multiline" | "action" | "auto"
type MenuItemKind = "default" | "multiline" | "action" | "progress" | "button"
type MenuItemState = "default" | "disabled"
type MenuItemIconPosition = "leading" | "trailing"
type MenuItemAvatarSize = "sm" | "lg"

const menuVariants = cva(
  "flex flex-col items-start gap-[var(--bh-menu-gap)] overflow-hidden rounded-[var(--bh-menu-radius)] bg-[var(--bh-menu-bg)] py-[var(--bh-menu-padding-y)] shadow-[var(--shadow-menu)]",
  {
    variants: {
      width: {
        menu: "w-[var(--bh-menu-width)]",
        default: "w-[var(--bh-menu-item-default-width)]",
        multiline: "w-[var(--bh-menu-item-multiline-width)]",
        action: "w-[var(--bh-menu-item-action-width)]",
        auto: "w-max",
      },
    },
    defaultVariants: {
      width: "menu",
    },
  }
)

const menuItemVariants = cva(
  "group/menu-item relative flex w-full items-center bg-[var(--bh-menu-item-bg)] outline-none transition-colors data-[disabled=true]:pointer-events-none",
  {
    variants: {
      kind: {
        default:
          "h-[var(--bh-menu-item-default-height)] px-[var(--bh-menu-item-padding-x)]",
        multiline:
          "min-h-[var(--bh-menu-item-multiline-height)] px-[var(--bh-menu-item-padding-x)]",
        action:
          "min-h-[var(--bh-menu-item-action-height)] px-[var(--bh-menu-item-padding-x)]",
        progress:
          "h-[var(--bh-menu-item-progress-height)] px-[var(--bh-menu-item-padding-x)]",
        button:
          "h-[var(--bh-menu-item-button-height)] px-[var(--bh-menu-item-padding-x)]",
      },
    },
    defaultVariants: {
      kind: "default",
    },
  }
)

const menuItemContentVariants = cva(
  "flex min-w-0 flex-1 transition-colors group-data-[disabled=true]/menu-item:bg-transparent [&_svg]:shrink-0 rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
  {
    variants: {
      kind: {
        default:
          "h-[var(--bh-menu-item-default-height)] items-center gap-[var(--bh-menu-item-gap)] rounded-[var(--bh-menu-item-radius)] p-[var(--bh-menu-item-content-padding)] group-hover/menu-item:bg-[var(--bh-menu-item-hover-bg)]",
        multiline:
          "min-h-[var(--bh-menu-item-multiline-height)] items-center gap-[var(--bh-menu-item-gap)] rounded-[var(--bh-menu-item-radius)] px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)] group-hover/menu-item:bg-[var(--bh-menu-item-hover-bg)]",
        action:
          "min-h-[var(--bh-menu-item-action-height)] items-center gap-[var(--bh-menu-item-gap)] rounded-[var(--bh-menu-item-radius)] px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)] group-hover/menu-item:bg-[var(--bh-menu-item-hover-bg)]",
        progress:
          "h-[var(--bh-menu-item-progress-height)] flex-col items-start gap-0 px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)]",
        button:
          "h-[var(--bh-menu-item-button-height)] flex-col items-start gap-[var(--bh-menu-item-slot-gap)] px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)]",
      },
    },
    defaultVariants: {
      kind: "default",
    },
  }
)

const menuItemIconVariants = cva(
  "flex shrink-0 items-center justify-center text-[var(--bh-content-subtle)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
  {
    variants: {
      position: {
        leading:
          "h-[var(--bh-menu-leading-icon-size)] ps-[var(--bh-menu-icon-padding)] [&_svg]:size-[var(--bh-menu-leading-icon-size)]",
        trailing:
          "size-[var(--bh-menu-trailing-icon-size)] text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-menu-trailing-icon-size)]",
      },
    },
    defaultVariants: {
      position: "leading",
    },
  }
)

type MenuProps = React.ComponentProps<"div"> &
  VariantProps<typeof menuVariants> & {
    asChild?: boolean
    defaultOpen?: boolean
    modal?: boolean
    onOpenChange?: (open: boolean) => void
    open?: boolean
  }

type MenuContentProps = React.ComponentProps<typeof DropdownMenuPrimitive.Content> &
  VariantProps<typeof menuVariants> & {
    asChild?: boolean
  }

const MenuRoot = DropdownMenuPrimitive.Root
const MenuTrigger = DropdownMenuPrimitive.Trigger

const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent({
  className,
  width,
  asChild = false,
  role = "menu",
  ...props
}, ref) {
  const Comp = asChild ? Slot : "div"

  return (
    <DropdownMenuPrimitive.Content asChild {...props}>
      <Comp
        data-slot="menu"
        data-width={width ?? "menu"}
        ref={ref}
        role={role}
        className={cn(menuVariants({ width, className }))}
      />
    </DropdownMenuPrimitive.Content>
  )
})

function Menu({
  children,
  defaultOpen = true,
  modal = false,
  onOpenChange,
  open,
  ...props
}: MenuProps) {
  const rootProps =
    open === undefined
      ? { defaultOpen, onOpenChange }
      : { open, onOpenChange }

  return (
    <MenuRoot modal={modal} {...rootProps}>
      <MenuContent forceMount {...props}>
        {children}
      </MenuContent>
    </MenuRoot>
  )
}

const MenuPortal = DropdownMenuPrimitive.Portal

function getMenuItemTextValue(children: React.ReactNode) {
  if (typeof children === "string" || typeof children === "number") {
    return String(children)
  }

  return undefined
}

type MenuItemPrimitiveProps = Pick<
  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,
  "onSelect" | "textValue"
>

type MenuItemProps = React.ComponentProps<"div"> &
  VariantProps<typeof menuItemVariants> &
  MenuItemPrimitiveProps & {
    asChild?: boolean
    disabled?: boolean
  }

const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem({
  className,
  kind = "default",
  disabled = false,
  asChild = false,
  role = "menuitem",
  tabIndex,
  children,
  onSelect,
  textValue,
  ...props
}, ref) {
  const Comp = asChild ? Slot : "div"
  const selectedKind: MenuItemKind = kind ?? "default"
  const isDisabled = disabled

  return (
    <DropdownMenuPrimitive.Item
      asChild
      disabled={isDisabled}
      onSelect={onSelect}
      textValue={textValue ?? getMenuItemTextValue(children)}
    >
      <Comp
        aria-disabled={isDisabled ? true : undefined}
        data-disabled={isDisabled ? "true" : "false"}
        data-kind={selectedKind}
        data-slot="menu-item"
        ref={ref}
        role={role}
        tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
        className={cn(menuItemVariants({ kind: selectedKind, className }))}
        {...props}
      >
        <MenuItemContent kind={selectedKind}>
          <MenuItemChildren kind={selectedKind}>{children}</MenuItemChildren>
        </MenuItemContent>
      </Comp>
    </DropdownMenuPrimitive.Item>
  )
})

MenuItem.displayName = "MenuItem"

type MenuItemContentProps = React.ComponentProps<"div"> &
  VariantProps<typeof menuItemContentVariants>

function MenuItemContent({
  className,
  kind,
  ...props
}: MenuItemContentProps) {
  return (
    <div
      data-slot="menu-item-content"
      className={cn(menuItemContentVariants({ kind, className }))}
      {...props}
    />
  )
}

function MenuItemChildren({
  children,
  kind,
}: {
  children: React.ReactNode
  kind: MenuItemKind
}) {
  return React.Children.map(children, (child) => {
    if (kind === "button" && (typeof child === "string" || typeof child === "number")) {
      return <MenuItemAction fullWidth>{child}</MenuItemAction>
    }

    if (typeof child === "string" || typeof child === "number") {
      return (
        <MenuItemText>
          <MenuItemTitle>{child}</MenuItemTitle>
        </MenuItemText>
      )
    }

    return child
  })
}

function MenuItemText({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="menu-item-text"
      className={cn(
        "flex min-w-0 flex-1 flex-col ps-[var(--bh-space-xs-4)]",
        className
      )}
      {...props}
    />
  )
}

function MenuItemTitle({
  className,
  dir = "auto",
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="menu-item-title"
      dir={dir}
      className={cn(
        "min-w-0 truncate text-start text-[length:var(--bh-text-body-md-regular-font-size)] font-[var(--bh-text-body-md-regular-font-weight)] leading-[var(--bh-text-body-md-regular-line-height)] tracking-[var(--bh-text-body-md-regular-letter-spacing)] text-[var(--bh-content-default)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
        className
      )}
      {...props}
    />
  )
}

function MenuItemDescription({
  className,
  dir = "auto",
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="menu-item-description"
      dir={dir}
      className={cn(
        "min-w-0 truncate text-start text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
        className
      )}
      {...props}
    />
  )
}

function MenuItemMeta({
  className,
  dir = "auto",
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="menu-item-meta"
      dir={dir}
      className={cn(
        "shrink-0 whitespace-nowrap text-end text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] group-data-[disabled=true]/menu-item:text-[var(--bh-content-disabled)]",
        className
      )}
      {...props}
    />
  )
}

type MenuItemIconProps = React.ComponentProps<"span"> &
  VariantProps<typeof menuItemIconVariants>

function MenuItemIcon({
  className,
  position,
  ...props
}: MenuItemIconProps) {
  return (
    <span
      aria-hidden="true"
      data-position={position ?? "leading"}
      data-slot="menu-item-icon"
      className={cn(menuItemIconVariants({ position, className }))}
      {...props}
    />
  )
}

type MenuItemAvatarProps = React.ComponentProps<"span"> & {
  alt?: string
  size?: MenuItemAvatarSize
  src?: string
}

function MenuItemAvatar({
  alt = "",
  children,
  className,
  size = "sm",
  src,
  ...props
}: MenuItemAvatarProps) {
  return (
    <span
      data-size={size}
      data-slot="menu-item-avatar-wrap"
      className={cn(
        "flex shrink-0 items-center ps-[var(--bh-menu-icon-padding)] group-data-[disabled=true]/menu-item:opacity-[var(--bh-opacity-60)]",
        size === "lg"
          ? "h-[var(--bh-space-7xl-40)]"
          : "h-[var(--bh-space-5xl-24)]",
        className
      )}
      {...props}
    >
      <span
        data-slot="menu-item-avatar"
        className={cn(
          "flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-neutral-subtle)] text-[length:var(--bh-text-body-3xs-medium-font-size)] font-[var(--bh-text-body-3xs-medium-font-weight)] leading-[var(--bh-text-body-3xs-medium-line-height)] text-[var(--bh-content-subtle)]",
          size === "lg"
            ? "size-[var(--bh-space-7xl-40)]"
            : "size-[var(--bh-space-5xl-24)]"
        )}
      >
        {src ? (
          <img alt={alt} className="size-full object-cover" src={src} />
        ) : (
          children
        )}
      </span>
    </span>
  )
}

function MenuItemBadge({
  className,
  dir = "auto",
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="menu-item-badge"
      dir={dir}
      className={cn(
        "inline-flex h-[var(--bh-menu-badge-height)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] px-[var(--bh-menu-badge-padding-x)] text-center text-[length:var(--bh-text-body-3xs-medium-font-size)] font-[var(--bh-text-body-3xs-medium-font-weight)] leading-[var(--bh-text-body-3xs-medium-line-height)] tracking-[var(--bh-text-body-3xs-medium-letter-spacing)] text-[var(--bh-content-default)] group-data-[disabled=true]/menu-item:opacity-[var(--bh-opacity-60)]",
        className
      )}
      {...props}
    />
  )
}

type MenuItemSwitchProps = Omit<React.ComponentProps<"span">, "role"> & {
  active?: boolean
  disabled?: boolean
}

function MenuItemSwitch({
  active = false,
  className,
  disabled = false,
  ...props
}: MenuItemSwitchProps) {
  return (
    <span
      aria-checked={active}
      aria-disabled={disabled || undefined}
      data-active={active ? "true" : "false"}
      data-disabled={disabled ? "true" : "false"}
      data-slot="menu-item-switch"
      role="switch"
      className={cn(
        "flex h-[var(--bh-menu-switch-height)] w-[var(--bh-menu-switch-width)] shrink-0 items-center rounded-[var(--bh-radius-full)] p-[var(--bh-menu-switch-padding)] group-data-[disabled=true]/menu-item:bg-[var(--bh-interactive-switch-disabled)]",
        active
          ? "justify-end bg-[var(--bh-interactive-switch-active)]"
          : "bg-[var(--bh-interactive-switch-default)]",
        disabled && "bg-[var(--bh-interactive-switch-disabled)]",
        className
      )}
      {...props}
    >
      <span
        aria-hidden="true"
        data-slot="menu-item-switch-handle"
        className="size-[var(--bh-menu-switch-handle-size)] rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] group-data-[disabled=true]/menu-item:bg-[var(--bh-interactive-switch-handle-disabled)]"
      />
    </span>
  )
}

type MenuItemActionProps = React.ComponentProps<"button"> & {
  asChild?: boolean
  fullWidth?: boolean
}

function MenuItemAction({
  className,
  asChild = false,
  fullWidth = false,
  type,
  children,
  ...props
}: MenuItemActionProps) {
  const Comp = asChild ? Slot : "button"

  return (
    <Comp
      data-slot="menu-item-action"
      className={cn(
        "inline-flex h-[var(--bh-menu-action-height)] shrink-0 items-center justify-center gap-[var(--bh-menu-action-gap)] rounded-[var(--bh-control-default)] border border-[var(--bh-border-default)] bg-[var(--bh-interactive-outlined-default)] px-[var(--bh-menu-action-padding-x)] py-[var(--bh-space-md-8)] text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow] hover:bg-[var(--bh-interactive-outlined-hover)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
        fullWidth && "w-full",
        className
      )}
      {...(!asChild ? { type: type || "button" } : {})}
      {...props}
    >
      {asChild ? children : <MenuItemActionChildren>{children}</MenuItemActionChildren>}
    </Comp>
  )
}

function MenuItemActionChildren({ children }: { children: React.ReactNode }) {
  return React.Children.map(children, (child) => {
    if (typeof child === "string" || typeof child === "number") {
      return (
        <span data-slot="menu-item-action-label" dir="auto" className="min-w-0 px-[var(--bh-space-xs-4)]">
          {child}
        </span>
      )
    }

    return child
  })
}

type MenuProgressProps = React.ComponentProps<"div"> & {
  indicator?: React.ReactNode
  label?: React.ReactNode
  optional?: React.ReactNode
  showSpinner?: boolean
  value?: number
}

function MenuProgress({
  className,
  indicator,
  label,
  optional,
  showSpinner = true,
  value = 50,
  ...props
}: MenuProgressProps) {
  const clampedValue = Math.min(100, Math.max(0, value))

  return (
    <div
      data-slot="menu-progress"
      className={cn(
        "flex w-full flex-col gap-[var(--bh-menu-progress-gap)]",
        className
      )}
      {...props}
    >
      <div
        aria-valuemax={100}
        aria-valuemin={0}
        aria-valuenow={clampedValue}
        data-slot="menu-progress-track"
        role="progressbar"
        className="h-[var(--bh-menu-progress-height)] w-full overflow-hidden rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-soft)]"
      >
        <span
          data-slot="menu-progress-fill"
          className="block h-full rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-indicator-default)]"
          style={{ inlineSize: `${clampedValue}%` }}
        />
      </div>

      {hasRenderableContent(label) ||
      hasRenderableContent(optional) ||
      hasRenderableContent(indicator) ||
      showSpinner ? (
        <div
          data-slot="menu-progress-row"
          className="flex min-w-0 items-center gap-[var(--bh-menu-item-slot-gap)]"
        >
          {hasRenderableContent(label) || hasRenderableContent(optional) ? (
            <span
              data-slot="menu-progress-label"
              className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xs-4)]"
            >
              {hasRenderableContent(label) ? (
                <span
                  data-slot="menu-progress-label-text"
                  dir="auto"
                  className="truncate text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] text-[var(--bh-content-default)]"
                >
                  {label}
                </span>
              ) : null}
              {hasRenderableContent(optional) ? (
                <span
                  data-slot="menu-progress-optional"
                  dir="auto"
                  className="truncate text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
                >
                  {optional}
                </span>
              ) : null}
            </span>
          ) : null}

          <span
            data-slot="menu-progress-indicator"
            className="flex shrink-0 items-center gap-[var(--bh-space-xxs-2)] text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
          >
            {hasRenderableContent(indicator) ? (
              <span dir="auto">{indicator}</span>
            ) : null}
            {showSpinner ? <MenuProgressSpinner /> : null}
          </span>
        </div>
      ) : null}
    </div>
  )
}

function MenuProgressSpinner({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      data-slot="menu-progress-spinner"
      viewBox="0 0 24 24"
      className={cn("size-[var(--bh-menu-trailing-icon-size)] animate-spin", className)}
    >
      <path
        d="M12 3a9 9 0 1 1-6.36 2.64"
        fill="none"
        stroke="currentColor"
        strokeLinecap="round"
        strokeWidth="3"
      />
    </svg>
  )
}

type MenuLabelProps = React.ComponentProps<"div"> & {
  caption?: React.ReactNode
  label?: React.ReactNode
}

function MenuLabel({
  caption,
  children,
  className,
  label,
  role = "presentation",
  ...props
}: MenuLabelProps) {
  return (
    <DropdownMenuPrimitive.Label asChild>
      <div
        data-slot="menu-label"
        role={role}
        className={cn(
          "flex h-[var(--bh-menu-item-label-height)] w-full items-center gap-0 bg-[var(--bh-menu-item-bg)] px-[var(--bh-menu-label-padding-x)] py-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
          className
        )}
        {...props}
      >
        {children ?? (
          <>
            {hasRenderableContent(label) ? (
              <span
                data-slot="menu-label-primary"
                dir="auto"
                className="min-w-0 flex-1 truncate text-start font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-default)]"
              >
                {label}
              </span>
            ) : null}
            {hasRenderableContent(caption) ? (
              <span
                data-slot="menu-label-caption"
                dir="auto"
                className="shrink-0 whitespace-nowrap text-end font-[var(--bh-text-body-xs-regular-font-weight)] text-[var(--bh-content-subtle)]"
              >
                {caption}
              </span>
            ) : null}
          </>
        )}
      </div>
    </DropdownMenuPrimitive.Label>
  )
}

function hasRenderableContent(content: React.ReactNode) {
  return (
    content !== undefined &&
    content !== null &&
    content !== false &&
    content !== ""
  )
}

function MenuCaption({
  className,
  dir = "auto",
  role = "presentation",
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="menu-caption"
      role={role}
      className="flex h-[var(--bh-menu-item-caption-height)] w-full items-center px-[var(--bh-menu-item-padding-x)]"
    >
      <span
        dir={dir}
        className={cn(
          "flex h-full min-w-0 flex-1 items-center justify-center px-[var(--bh-menu-item-content-padding)] py-[var(--bh-menu-item-content-compact-padding-y)] text-center text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]",
          className
        )}
        {...props}
      />
    </div>
  )
}

function MenuSeparator({
  className,
  role = "separator",
  ...props
}: React.ComponentProps<"div">) {
  return (
    <DropdownMenuPrimitive.Separator asChild>
      <div
        data-slot="menu-separator"
        role={role}
        className={cn(
          "flex h-[var(--bh-menu-item-divider-height)] w-full items-center py-[var(--bh-menu-divider-padding-y)]",
          className
        )}
        {...props}
      >
        <span className="block w-full border-t border-[var(--bh-border-subtle)]" />
      </div>
    </DropdownMenuPrimitive.Separator>
  )
}

export {
  Menu,
  MenuCaption,
  MenuContent,
  MenuItem,
  MenuItemAction,
  MenuItemAvatar,
  MenuItemBadge,
  MenuItemContent,
  MenuItemDescription,
  MenuItemIcon,
  MenuItemMeta,
  MenuItemSwitch,
  MenuItemText,
  MenuItemTitle,
  MenuLabel,
  MenuProgress,
  MenuPortal,
  MenuRoot,
  MenuSeparator,
  MenuTrigger,
  menuItemContentVariants,
  menuItemIconVariants,
  menuItemVariants,
  menuVariants,
}
export type {
  MenuItemAvatarSize,
  MenuItemAvatarProps,
  MenuItemActionProps,
  MenuContentProps,
  MenuItemContentProps,
  MenuItemIconPosition,
  MenuItemIconProps,
  MenuItemKind,
  MenuItemProps,
  MenuItemSwitchProps,
  MenuItemState,
  MenuLabelProps,
  MenuProgressProps,
  MenuProps,
  MenuWidth,
}
