import { jsxs, jsx } from "react/jsx-runtime";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import "../../default-i18n-CN_q3KUs.js";
import { BaseControl } from "../base-control/base-control.js";
import { icons } from "../../icons/icons.js";
import { cloneElement } from "react";
import "../../react-jsx-parser.min-LF707GK8.js";
/**
 * A DraggableList item.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to display in the label.
 * @param {string} [props.label] - Label to display.
 * @param {string} [props.subtitle] - Subtitle to display.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display to the right of the label.
 * @param {string} [props.textValue] - The text value of the item.
 * @param {string} [props.className] - Classes to pass to the label.
 *
 * @returns {JSX.Element} The DraggableList component.
 *
 * @see {@link DraggableList} for usage example.
 *
 * @preserve
 */
const DraggableListItem = (props) => {
  const { children, icon, label, subtitle, className, ...rest } = props;
  return /* @__PURE__ */ jsxs(
    BaseControl,
    {
      icon,
      label,
      subtitle,
      className: clsx("es:w-full", className),
      fullWidthLabel: true,
      inline: true,
      ...rest,
      children: [
        cloneElement(icons.reorderGrabberV, {
          className: "es:opacity-0 es:transition-opacity es:group-focus-visible:opacity-100 es:text-secondary-400 es:size-4 es:group-hover:opacity-100"
        }),
        children
      ]
    }
  );
};
/**
 * A Draggable item handle.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.className] - Classes to pass to the handle.
 *
 * @returns {JSX.Element} The DraggableListItemHandle component.
 *
 * @example
 * <DraggableListItemHandle />
 *
 * @preserve
 */
const DraggableListItemHandle = (props) => {
  const { className, children, ...rest } = props;
  return /* @__PURE__ */ jsx(
    "button",
    {
      className: className ?? 'es:relative es:h-6 es:w-2 es:cursor-pointer es:items-center es:justify-center es:self-center es:rounded es:border es:border-secondary-300 es:bg-secondary-50 es:transition es:after:absolute es:after:inset-0 es:after:m-auto es:after:h-4 es:after:w-px es:after:bg-secondary-200 es:after:transition es:after:content-[""] es:hover:border-accent-500 es:hover:bg-accent-400 es:hover:after:bg-accent-500',
      ...rest,
      "data-movable-handle": true,
      tabIndex: -1,
      children
    }
  );
};
export {
  DraggableListItem,
  DraggableListItemHandle
};
