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