@stanfordspezi/spezi-web-design-system/dist/Accordion-BG6xzd8X.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as r, jsxs as X } from "react/jsx-runtime";
import { e as V, R as Z, T as ee, f as oe, b as re, c as te } from "./Collapsible-CJtwdbFD.mjs";
import { c as S } from "./index-2NvaPZWc.mjs";
import { C as ne } from "./chevron-down-NiT5lJIb.mjs";
import l from "react";
import { c as ce, u as H, a as ae } from "./index-CBSFK5oB.mjs";
import { c as ie, u as se } from "./index-rArYPB5W.mjs";
import { u as le } from "./index-CB1Wkg0G.mjs";
import { P as K } from "./index-8-FPuQXg.mjs";
import { u as de } from "./index-D59fTEgK.mjs";
var d = "Accordion", pe = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [E, fe, me] = ie(d), [b, Oe] = ce(d, [
  me,
  V
]), k = V(), j = l.forwardRef(
  (e, n) => {
    const { type: o, ...c } = e, a = c, t = c;
    return /* @__PURE__ */ r(E.Provider, { scope: e.__scopeAccordion, children: o === "multiple" ? /* @__PURE__ */ r(Ae, { ...t, ref: n }) : /* @__PURE__ */ r(Ce, { ...a, ref: n }) });
  }
);
j.displayName = d;
var [z, ue] = b(d), [L, ve] = b(
  d,
  { collapsible: !1 }
), Ce = l.forwardRef(
  (e, n) => {
    const {
      value: o,
      defaultValue: c,
      onValueChange: a = () => {
      },
      collapsible: t = !1,
      ...s
    } = e, [i, p] = H({
      prop: o,
      defaultProp: c ?? "",
      onChange: a,
      caller: d
    });
    return /* @__PURE__ */ r(
      z,
      {
        scope: e.__scopeAccordion,
        value: l.useMemo(() => i ? [i] : [], [i]),
        onItemOpen: p,
        onItemClose: l.useCallback(() => t && p(""), [t, p]),
        children: /* @__PURE__ */ r(L, { scope: e.__scopeAccordion, collapsible: t, children: /* @__PURE__ */ r($, { ...s, ref: n }) })
      }
    );
  }
), Ae = l.forwardRef((e, n) => {
  const {
    value: o,
    defaultValue: c,
    onValueChange: a = () => {
    },
    ...t
  } = e, [s, i] = H({
    prop: o,
    defaultProp: c ?? [],
    onChange: a,
    caller: d
  }), p = l.useCallback(
    (v) => i((m = []) => [...m, v]),
    [i]
  ), u = l.useCallback(
    (v) => i((m = []) => m.filter((x) => x !== v)),
    [i]
  );
  return /* @__PURE__ */ r(
    z,
    {
      scope: e.__scopeAccordion,
      value: s,
      onItemOpen: p,
      onItemClose: u,
      children: /* @__PURE__ */ r(L, { scope: e.__scopeAccordion, collapsible: !0, children: /* @__PURE__ */ r($, { ...t, ref: n }) })
    }
  );
}), [ge, h] = b(d), $ = l.forwardRef(
  (e, n) => {
    const { __scopeAccordion: o, disabled: c, dir: a, orientation: t = "vertical", ...s } = e, i = l.useRef(null), p = le(i, n), u = fe(o), m = se(a) === "ltr", x = ae(e.onKeyDown, (C) => {
      var M;
      if (!pe.includes(C.key)) return;
      const Q = C.target, I = u().filter((N) => {
        var O;
        return !((O = N.ref.current) != null && O.disabled);
      }), A = I.findIndex((N) => N.ref.current === Q), T = I.length;
      if (A === -1) return;
      C.preventDefault();
      let f = A;
      const _ = 0, w = T - 1, R = () => {
        f = A + 1, f > w && (f = _);
      }, P = () => {
        f = A - 1, f < _ && (f = w);
      };
      switch (C.key) {
        case "Home":
          f = _;
          break;
        case "End":
          f = w;
          break;
        case "ArrowRight":
          t === "horizontal" && (m ? R() : P());
          break;
        case "ArrowDown":
          t === "vertical" && R();
          break;
        case "ArrowLeft":
          t === "horizontal" && (m ? P() : R());
          break;
        case "ArrowUp":
          t === "vertical" && P();
          break;
      }
      const W = f % T;
      (M = I[W].ref.current) == null || M.focus();
    });
    return /* @__PURE__ */ r(
      ge,
      {
        scope: o,
        disabled: c,
        direction: a,
        orientation: t,
        children: /* @__PURE__ */ r(E.Slot, { scope: o, children: /* @__PURE__ */ r(
          K.div,
          {
            ...s,
            "data-orientation": t,
            ref: p,
            onKeyDown: c ? void 0 : x
          }
        ) })
      }
    );
  }
), g = "AccordionItem", [be, D] = b(g), G = l.forwardRef(
  (e, n) => {
    const { __scopeAccordion: o, value: c, ...a } = e, t = h(g, o), s = ue(g, o), i = k(o), p = de(), u = c && s.value.includes(c) || !1, v = t.disabled || e.disabled;
    return /* @__PURE__ */ r(
      be,
      {
        scope: o,
        open: u,
        disabled: v,
        triggerId: p,
        children: /* @__PURE__ */ r(
          Z,
          {
            "data-orientation": t.orientation,
            "data-state": J(u),
            ...i,
            ...a,
            ref: n,
            disabled: v,
            open: u,
            onOpenChange: (m) => {
              m ? s.onItemOpen(c) : s.onItemClose(c);
            }
          }
        )
      }
    );
  }
);
G.displayName = g;
var U = "AccordionHeader", Y = l.forwardRef(
  (e, n) => {
    const { __scopeAccordion: o, ...c } = e, a = h(d, o), t = D(U, o);
    return /* @__PURE__ */ r(
      K.h3,
      {
        "data-orientation": a.orientation,
        "data-state": J(t.open),
        "data-disabled": t.disabled ? "" : void 0,
        ...c,
        ref: n
      }
    );
  }
);
Y.displayName = U;
var y = "AccordionTrigger", q = l.forwardRef(
  (e, n) => {
    const { __scopeAccordion: o, ...c } = e, a = h(d, o), t = D(y, o), s = ve(y, o), i = k(o);
    return /* @__PURE__ */ r(E.ItemSlot, { scope: o, children: /* @__PURE__ */ r(
      ee,
      {
        "aria-disabled": t.open && !s.collapsible || void 0,
        "data-orientation": a.orientation,
        id: t.triggerId,
        ...i,
        ...c,
        ref: n
      }
    ) });
  }
);
q.displayName = y;
var B = "AccordionContent", F = l.forwardRef(
  (e, n) => {
    const { __scopeAccordion: o, ...c } = e, a = h(d, o), t = D(B, o), s = k(o);
    return /* @__PURE__ */ r(
      oe,
      {
        role: "region",
        "aria-labelledby": t.triggerId,
        "data-orientation": a.orientation,
        ...s,
        ...c,
        ref: n,
        style: {
          "--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
          "--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
          ...e.style
        }
      }
    );
  }
);
F.displayName = B;
function J(e) {
  return e ? "open" : "closed";
}
var he = j, xe = G, Ie = Y, _e = q, we = F;
const Ve = (e) => /* @__PURE__ */ r(he, { "data-slot": "accordion", ...e }), He = ({
  className: e,
  ...n
}) => /* @__PURE__ */ r(
  xe,
  {
    "data-slot": "accordion-item",
    className: S("border-b last:border-b-0", e),
    ...n
  }
), Ke = ({
  className: e,
  children: n,
  ...o
}) => /* @__PURE__ */ r(Ie, { className: "flex", children: /* @__PURE__ */ X(
  _e,
  {
    "data-slot": "accordion-trigger",
    className: S(
      "interactive-opacity flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
      e
    ),
    ...o,
    children: [
      n,
      /* @__PURE__ */ r(ne, { className: "text-muted-foreground size-4 shrink-0 translate-y-0.5 transition" })
    ]
  }
) }), je = ({
  className: e,
  children: n,
  ...o
}) => /* @__PURE__ */ r(
  we,
  {
    "data-slot": "accordion-content",
    className: "text-sm",
    asChild: !0,
    forceMount: !0,
    ...o,
    children: /* @__PURE__ */ r(re, { children: /* @__PURE__ */ r(te, { children: /* @__PURE__ */ r("div", { className: S("pt-0 pb-4", e), children: n }) }) })
  }
);
export {
  Ve as A,
  He as a,
  Ke as b,
  je as c
};