import { jsx as t } from "react/jsx-runtime";
import { forwardRef as d } from "react";
import m from "../../../foundation/Icon/Generated/IconGrabHandle12.es.js";
import { FOCUS_VISIBLE_STYLE as s } from "../../../utilities/focusStyle.es.js";
import { merge as p } from "../../../utilities/merge.es.js";
import { TreeItemColorsClassMap as w } from "../types.es.js";
const c = d(
  ({ active: r, showDragHandlerOnHoverOnly: o, activeColorStyle: a, ...e }, i) => {
    const { selectedDragHanlderTextColor: l, dragHanlderTextColor: n } = w[a ?? "neutral"];
    return /* @__PURE__ */ t(
      "button",
      {
        "aria-label": "Draggable item",
        ...e,
        ref: i,
        className: p([
          s,
          "tw-p-1 first:tw-ml-2 tw-rounded-sm hover:tw-cursor-grab group-hover:tw-opacity-100 group-focus-within:tw-opacity-100",
          e.disabled ? "tw-invisible tw-pointer-events-none" : "tw-visible",
          o ? !r && "tw-opacity-0" : "tw-opacity-100",
          r ? l : n
        ]),
        "data-test-id": "fondue-tree-item-drag-handle",
        children: /* @__PURE__ */ t(m, {})
      }
    );
  }
);
c.displayName = "FondueDragHandle";
export {
  c as DragHandle
};
//# sourceMappingURL=DragHandle.es.js.map
