import { jsx } from 'react/jsx-runtime';
import { I as Icon } from './Icon-BMMbp40n.js';
import * as React from 'react';
import { forwardRef } from 'react';
import { c as cx } from './index-De1g9FRV.js';
import { B as ButtonCompound } from './ButtonCompound-DsrK7G3q.js';

import './index.css';const SvgDragIndicator = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }));

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";

const styles = {
	"drag-preview": "_drag-preview_1uufp_2",
	"drop-line": "_drop-line_1uufp_12",
	"orientation-horizontal": "_orientation-horizontal_1uufp_44",
	"orientation-vertical": "_orientation-vertical_1uufp_53",
	"drop-zone": "_drop-zone_1uufp_62",
	"position-before": "_position-before_1uufp_69",
	"position-after": "_position-after_1uufp_74",
	"can-be-dropped": "_can-be-dropped_1uufp_88",
	"active-not-over": "_active-not-over_1uufp_95",
	"over-valid": "_over-valid_1uufp_101",
	"over-invalid": "_over-invalid_1uufp_106"
};

const DndSortLine = ({
  offset,
  orientation,
  position,
  ...rest
}) => {
  const classes = cx(
    styles["drop-line"],
    styles[`orientation-${orientation}`],
    styles[`position-${position}`]
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      "aria-hidden": true,
      className: classes,
      style: { "--a2-inline-drop-line-offset": offset },
      ...rest
    }
  );
};

const DndZone = forwardRef(
  ({
    el: Component = "div",
    children,
    className,
    isDragging,
    isOver,
    isValid,
    ...rest
  }, ref) => {
    const classes = cx(className, {
      [styles["drop-zone"]]: true,
      [styles["over-valid"]]: isDragging && isOver && isValid,
      [styles["over-invalid"]]: isDragging && isOver && !isValid,
      [styles["active-not-over"]]: isDragging && !isOver
    });
    return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...rest, children });
  }
);
DndZone.displayName = "DndZoneBase";

const Dnd = {
  Handle: DndHandle,
  HandleButton: DndHandleButton,
  SortLine: DndSortLine,
  Zone: DndZone
};

export { Dnd as D, DndSortLine as a, DndHandleButton as b, DndHandle as c, styles as s };
//# sourceMappingURL=index-ByMdotWU.js.map
