import { jsx, jsxs } from "react/jsx-runtime";
import "react";
import { c as cn } from "../../cn-FAaWYZ6x.js";
const StPlusAdd = ({ width = 24, height = 24, color, style, ...otherProps }) => /* @__PURE__ */ jsx("svg", { id: "icon_StPlusAdd", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", width, height, style: {
  ...color && {
    "--stroke-color": color,
    "--stroke-fg-color": color
  },
  ...style
}, ...otherProps, children: /* @__PURE__ */ jsx("path", { d: "M12 3C12 3 12 8 12 12C12 16 12 21 12 21M3 12H17H21", stroke: "var(--stroke-color, currentColor)", strokeWidth: "var(--stroke-width, 1.5)", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round" }) });
StPlusAdd.displayName = "StPlusAdd";
const KanbanHeader = ({
  className,
  onAdd,
  showAddButton = true,
  children,
  ...props
}) => {
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cn(
        "relative flex items-center justify-between m-0 px-4 pt-3 pb-0 font-semibold bg-subtle",
        className
      ),
      ...props,
      children: [
        /* @__PURE__ */ jsx("span", { children }),
        showAddButton && onAdd && /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: onAdd,
            className: cn(
              "flex items-center justify-center h-6 w-6 rounded-md cursor-pointer",
              "text-subtle hover:text-foreground",
              "hover:bg-gray-700/10 transition-all duration-200",
              "focus:outline-none focus:ring-2 focus:ring-accent/50 focus:ring-offset-2 focus:ring-offset-background",
              "opacity-0 group-hover:opacity-100",
              "transition-opacity duration-200"
            ),
            "aria-label": "Add item",
            children: /* @__PURE__ */ jsx(StPlusAdd, { className: "h-5 w-5" })
          }
        )
      ]
    }
  );
};
KanbanHeader.displayName = "KanbanHeader";
export {
  KanbanHeader
};
