import { jsx } from 'react/jsx-runtime';
import { B as ButtonCompound } from './ButtonCompound-D7kA0qXr.js';
import { c as cx } from './index-De1g9FRV.js';
import { forwardRef } from 'react';
import { I as Icon } from './Icon-B4uCvMU9.js';
import { S as SvgDragIndicator } from './drag_indicator-BRHAPLSJ.js';

import './DndHandleButton.css';const handle = "_handle_1e7c4_2";
const active = "_active_1e7c4_25";
const handleStyles = {
	handle: handle,
	"handle-button": "_handle-button_1e7c4_10",
	active: active
};

function DndHandle({ className }) {
  const handleClasses = cx(handleStyles.handle, className);
  return /* @__PURE__ */ jsx(Icon, { svg: SvgDragIndicator, className: handleClasses, role: "presentation" });
}

const DndHandleButton = forwardRef(({ isActive = false, className, ...props }, ref) => {
  const handleButtonClasses = cx(className, handleStyles["handle-button"], {
    [handleStyles["active"]]: isActive
  });
  return /* @__PURE__ */ jsx(
    ButtonCompound,
    {
      ref,
      className: handleButtonClasses,
      type: "button",
      shape: "rounded",
      "aria-label": "Drag handle",
      ...props,
      children: /* @__PURE__ */ jsx(DndHandle, {})
    }
  );
});
DndHandleButton.displayName = "DndHandleButton";

export { DndHandleButton as D, DndHandle as a };
//# sourceMappingURL=DndHandleButton-Ck5nc8w2.js.map
