"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalCheckbox } from "./Checkbox.js";
import { classNames } from "../utils/classNames.js";
import { Check } from "../icons/Check.js";
const ExperimentalLegacyMenuRoot = forwardRef(
  ({ className, children, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref: forwardedRef,
        className: classNames([
          `group/menu gds-menu z-50 overflow-y-auto overflow-x-clip rounded-8 border border-space-1300 bg-space-1500 p-2 outline-none scrollbar-thin
          -:w-max
          -:max-w-full`,
          className
        ]),
        ...props,
        children
      }
    );
  }
);
ExperimentalLegacyMenuRoot.displayName = "ExperimentalLegacyMenu";
const ExperimentalLegacyMenuHeading = forwardRef(
  ({ className, children, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsx("header", { ref: forwardedRef, className: classNames(["text-c10 p-2 text-white/64", className]), ...props, children });
  }
);
ExperimentalLegacyMenuHeading.displayName = "ExperimentalLegacyMenu.Heading";
const ExperimentalLegacyMenuItem = forwardRef(
  ({ focus = false, selected = false, className, children, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref: forwardedRef,
        "data-focus": focus || void 0,
        "data-selected": selected || void 0,
        className: classNames([
          `gds-menu-item group/menu-item text-p14 flex select-none items-center gap-2 p-2 pe-4 text-white/48 transition outline-none
          is-[:hover,[data-focus],[data-highlighted]]:text-white
          +:active:text-white/64
          +:active:transition-none`,
          className
        ]),
        ...props,
        children: [
          /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(Check, { alt: "", className: "opacity-0 group-data-[selected]/menu-item:opacity-100" }) }),
          children
        ]
      }
    );
  }
);
ExperimentalLegacyMenuItem.displayName = "ExperimentalLegacyMenu.Item";
const ExperimentalLegacyMenuCheckboxItem = forwardRef(
  ({ focus = false, selected = false, className, children, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsxs(
      ExperimentalCheckbox.Area,
      {
        ref: forwardedRef,
        "data-focus": focus || void 0,
        "data-selected": selected || void 0,
        className: classNames([
          `gds-menu-item group/menu-item text-p14 flex select-none items-center gap-2 p-2 pe-4 text-white/48 transition outline-none
          is-[:hover,[data-focus],[data-highlighted]]:text-white
          +:active:text-white/64
          +:active:transition-none`,
          className
        ]),
        ...props,
        children: [
          /* @__PURE__ */ jsx(
            ExperimentalCheckbox,
            {
              checked: selected,
              "aria-hidden": "true",
              onClick: (event) => event.preventDefault(),
              className: "shrink-0"
            }
          ),
          children
        ]
      }
    );
  }
);
ExperimentalLegacyMenuCheckboxItem.displayName = "ExperimentalLegacyMenu.CheckboxItem";
export {
  ExperimentalLegacyMenuCheckboxItem,
  ExperimentalLegacyMenuHeading,
  ExperimentalLegacyMenuItem,
  ExperimentalLegacyMenuRoot
};
