"use client";
import { jsxs as a, jsx as l } from "react/jsx-runtime";
import { CaretDownIcon as d } from "@phosphor-icons/react";
import { forwardRef as p, useId as u, useCallback as f } from "react";
import { c as t } from "./cn-Bhsu1vx2.js";
function b(e = {}) {
  return t(
    // Base styles for the trigger
    "flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none"
  );
}
const x = p(
  ({ label: e, open: r, onOpenChange: o, children: i, className: n }, c) => {
    const s = u(), m = f(() => {
      o?.(!r);
    }, [r, o]);
    return /* @__PURE__ */ a("div", { ref: c, children: [
      /* @__PURE__ */ a(
        "button",
        {
          type: "button",
          "aria-expanded": r,
          "aria-controls": s,
          className: b(),
          onClick: m,
          children: [
            e,
            " ",
            /* @__PURE__ */ l(
              d,
              {
                className: t("h-4 w-4 transition-transform", r && "rotate-180")
              }
            )
          ]
        }
      ),
      r && /* @__PURE__ */ l(
        "div",
        {
          id: s,
          className: t(
            "my-2 space-y-4 border-l-2 border-kumo-fill pl-4",
            n
          ),
          children: i
        }
      )
    ] });
  }
);
x.displayName = "Collapsible";
export {
  x as C
};
//# sourceMappingURL=collapsible-OBNkTO48.js.map
