@trail-ui/react/dist/menu/menu-item.js

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/menu/menu-item.tsx
var menu_item_exports = {};
__export(menu_item_exports, {
  MenuItem: () => MenuItem
});
module.exports = __toCommonJS(menu_item_exports);
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme2 = require("@trail-ui/theme");
var import_react2 = require("react");
var import_react_aria_components2 = require("react-aria-components");

// src/menu/menu.tsx
var import_shared_utils = require("@trail-ui/shared-utils");
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_jsx_runtime = require("react/jsx-runtime");
var InternalMenuContext = (0, import_react.createContext)(
  {}
);

// src/menu/menu-selected-icon.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function MenuSelectedIcon(props) {
  const { isSelected, ...otherProps } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
    "svg",
    {
      "aria-hidden": "true",
      "data-selected": isSelected,
      role: "presentation",
      viewBox: "0 0 20 20",
      ...otherProps,
      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
        "polyline",
        {
          fill: "none",
          points: "1 9 7 14 15 4",
          stroke: "currentColor",
          strokeDasharray: 22,
          strokeDashoffset: isSelected ? 44 : 66,
          strokeWidth: 2,
          style: {
            transition: "stroke-dashoffset 200ms ease"
          }
        }
      )
    }
  );
}

// src/menu/menu-item.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function MenuItem(props) {
  const menuContext = (0, import_react2.useContext)(InternalMenuContext);
  const {
    children,
    description,
    shortcut,
    startContent,
    endContent,
    selectedIcon,
    className,
    variant = "default",
    classNames = menuContext.itemClasses,
    ...otherProps
  } = props;
  const slots = (0, import_react2.useMemo)(() => (0, import_theme2.menuItem)({ variant }), [variant]);
  const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.MenuItem, { ...otherProps, className: slots.base({ class: baseStyles }), children: ({ isSelected, isDisabled, selectionMode }) => {
    const selectedContent = () => {
      const defaultIcon = /* @__PURE__ */ (0, import_jsx_runtime3.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 = (0, import_shared_utils2.clsx)(
      slots.title({ class: classNames == null ? void 0 : classNames.title }),
      isSelected ? variantBorderClasses[variant] : ""
    );
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
      startContent,
      description ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Text, { slot: "label", className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) }),
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          import_react_aria_components2.Text,
          {
            slot: "description",
            className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
            children: description
          }
        )
      ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Text, { slot: "label", className: titleStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children }) }),
      shortcut && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Keyboard, { className: slots.shortcut({ class: classNames == null ? void 0 : classNames.shortcut }), children: shortcut }),
      selectionMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
        "span",
        {
          "aria-hidden": "true",
          className: slots.selectedIcon({ class: classNames == null ? void 0 : classNames.selectedIcon }),
          children: selectedContent()
        }
      ),
      endContent
    ] });
  } });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  MenuItem
});