import { defineComponent as g, useId as v, ref as C, onMounted as k, createBlock as p, openBlock as s, unref as t, normalizeClass as r, withCtx as c, createElementVNode as a, createVNode as x, createElementBlock as u, createCommentVNode as i, renderSlot as d, createTextVNode as V, toDisplayString as b, mergeProps as O } from "vue";
import { Disclosure as w, DisclosureButton as B, DisclosurePanel as $ } from "@headlessui/vue";
import { ScalarIcon as D } from "@scalar/components";
const N = ["aria-labelledby"], I = { class: "text-c-1 m-0 flex flex-1 items-center gap-1.5 leading-[20px]" }, S = ["id"], z = {
  key: 0,
  class: "sr-only"
}, E = {
  key: 0,
  class: "bg-b-2 text-c-2 inline-flex h-5 w-5 items-center justify-center rounded-full border text-xs font-semibold"
}, P = { class: "sr-only" }, j = {
  key: 0,
  class: "ui-not-open:hidden flex items-center gap-2 pr-0.75"
}, q = /* @__PURE__ */ g({
  __name: "ViewLayoutCollapse",
  props: {
    defaultOpen: { type: Boolean, default: !0 },
    itemCount: { default: 0 },
    layout: { default: "client" }
  },
  emits: ["update:modelValue"],
  setup(e, { emit: y }) {
    const f = y, m = v(), n = C(e.defaultOpen), h = () => {
      n.value = !n.value, f("update:modelValue", n.value);
    };
    return k(() => {
      f("update:modelValue", n.value);
    }), (o, L) => (s(), p(t(w), {
      as: "div",
      class: r(["group/collapse focus-within:text-c-1 text-c-2 last:ui-open:border-b-0 border-b", { "last-of-type:first-of-type:border-b-0": e.layout === "reference" }]),
      defaultOpen: e.defaultOpen,
      static: e.layout === "reference" ? !0 : void 0,
      onClick: h
    }, {
      default: c(({ open: l }) => [
        a("section", {
          "aria-labelledby": t(m),
          class: "contents"
        }, [
          a("div", {
            class: r(["bg-b-2 flex items-center", e.layout === "reference" && "rounded-t-xl border border-b-0"])
          }, [
            x(t(B), {
              class: r([
                "hover:text-c-1 group box-content flex max-h-8 flex-1 items-center gap-2.5 overflow-hidden px-1 py-1.5 text-base font-medium outline-none md:px-1.5 xl:pr-0.5 xl:pl-2",
                { "!pl-3": e.layout === "reference" }
              ]),
              disabled: e.layout === "reference"
            }, {
              default: c(() => [
                e.layout !== "reference" ? (s(), p(t(D), {
                  key: 0,
                  class: r([
                    "text-c-3 group-hover:text-c-1 ui-open:rotate-90 ui-not-open:rotate-0 rounded-px outline-offset-2 group-focus-visible:outline"
                  ]),
                  icon: "ChevronRight",
                  size: "md"
                })) : i("", !0),
                a("h2", I, [
                  a("span", {
                    id: t(m),
                    class: "contents"
                  }, [
                    d(o.$slots, "title", { open: l }),
                    l ? i("", !0) : (s(), u("span", z, " (Collapsed) "))
                  ], 8, S),
                  !l && e.itemCount ? (s(), u("span", E, [
                    V(b(e.itemCount) + " ", 1),
                    a("span", P, "Item" + b(e.itemCount === 1 ? "" : "s"), 1)
                  ])) : i("", !0)
                ])
              ]),
              _: 2
            }, 1032, ["class", "disabled"]),
            o.$slots.actions ? (s(), u("div", j, [
              d(o.$slots, "actions", { open: l })
            ])) : i("", !0)
          ], 2),
          x(t($), O(o.$attrs, { class: "diclosure-panel h-full max-h-fit rounded-b" }), {
            default: c(() => [
              d(o.$slots, "default", { open: l })
            ]),
            _: 2
          }, 1040)
        ], 8, N)
      ]),
      _: 3
    }, 8, ["class", "defaultOpen", "static"]));
  }
});
export {
  q as default
};
