import { jsx } from "react/jsx-runtime";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import "../../default-i18n-CN_q3KUs.js";
import { DraggableContext } from "./draggable-context.js";
import { useContext } from "react";
import { icons } from "../../icons/icons.js";
import "../../react-jsx-parser.min-LF707GK8.js";
/**
 * A Draggable item handle.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.className] - Classes to pass to the handle.
 *
 * @returns {JSX.Element} The DraggableHandle component.
 *
 * @example
 * <DraggableHandle />
 *
 * @preserve
 */
const DraggableHandle = (props) => {
  const { className, children, ...rest } = props;
  const { handleRef, status } = useContext(DraggableContext);
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: clsx(
        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded es:border es:border-secondary-200 es:bg-white es:text-secondary-400 es:transition",
        "es:icon:size-4 es:icon:shrink-0",
        "es:active:border-accent-500/30 es:active:bg-accent-50 es:active:text-accent-500",
        "es:any-focus:outline-hidden",
        status !== "dragging" && "es:focus:border-accent-500 es:focus:ring-2 es:focus:ring-accent-500/50",
        "es:hover:text-accent-500",
        status === "dragging" && "es:border-accent-600! es:bg-accent-500! es:text-white! es:shadow-sm es:shadow-accent-500/30 es:ring-3 es:ring-accent-500/50",
        className
      ),
      ref: handleRef,
      ...rest,
      children: children ?? icons.reorderGrabberV
    }
  );
};
export {
  DraggableHandle
};
