@trail-ui/react/dist/chunk-3JSUAS6R.mjs

import {
  MenuSelectedIcon
} from "./chunk-UFDLRGLI.mjs";
import {
  InternalMenuContext
} from "./chunk-L7KR75GK.mjs";

// src/menu/menu-item.tsx
import { clsx } from "@trail-ui/shared-utils";
import { menuItem } from "@trail-ui/theme";
import { useContext, useMemo } from "react";
import { MenuItem as AriaMenuItem, Keyboard, Text } from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function MenuItem(props) {
  const menuContext = useContext(InternalMenuContext);
  const {
    children,
    description,
    shortcut,
    startContent,
    endContent,
    selectedIcon,
    className,
    variant = "default",
    classNames = menuContext.itemClasses,
    ...otherProps
  } = props;
  const slots = useMemo(() => menuItem({ variant }), [variant]);
  const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
  return /* @__PURE__ */ jsx(AriaMenuItem, { ...otherProps, className: slots.base({ class: baseStyles }), children: ({ isSelected, isDisabled, selectionMode }) => {
    const selectedContent = () => {
      const defaultIcon = /* @__PURE__ */ jsx(MenuSelectedIcon, { isSelected });
      if (typeof selectedIcon === "function") {
        return selectedIcon({ icon: defaultIcon, isSelected, isDisabled });
      }
      if (selectedIcon)
        return selectedIcon;
      return defaultIcon;
    };
    const variantBorderClasses = {
      pass: "font-normal border border-green-950",
      fail: "font-normal border border-red-950",
      bestPractice: "font-normal border border-purple-950",
      gray: "font-normal border border-[#0C0C0E]",
      // border-neutral-950
      manual: "font-normal border border-yellow-950"
    };
    const titleStyles = clsx(
      slots.title({ class: classNames == null ? void 0 : classNames.title }),
      isSelected ? variantBorderClasses[variant] : ""
    );
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      startContent,
      description ? /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
        /* @__PURE__ */ jsx(Text, { slot: "label", className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: /* @__PURE__ */ jsx(Fragment, { children }) }),
        /* @__PURE__ */ jsx(
          Text,
          {
            slot: "description",
            className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
            children: description
          }
        )
      ] }) : /* @__PURE__ */ jsx(Text, { slot: "label", className: titleStyles, children: /* @__PURE__ */ jsx(Fragment, { children }) }),
      shortcut && /* @__PURE__ */ jsx(Keyboard, { className: slots.shortcut({ class: classNames == null ? void 0 : classNames.shortcut }), children: shortcut }),
      selectionMode !== "none" && /* @__PURE__ */ jsx(
        "span",
        {
          "aria-hidden": "true",
          className: slots.selectedIcon({ class: classNames == null ? void 0 : classNames.selectedIcon }),
          children: selectedContent()
        }
      ),
      endContent
    ] });
  } });
}

export {
  MenuItem
};