@stanfordspezi/spezi-web-design-system/dist/Tabs-CxgGEraS.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as i } from "react/jsx-runtime";
import * as f from "react";
import { createContext as M, useContext as $ } from "react";
import { c as T } from "./index-2NvaPZWc.mjs";
import { c as g } from "./index-hURUNS5V.mjs";
import { c as F } from "./index-DFZozV_h.mjs";
import { R as D, I as V, c as C } from "./index-CY3wvfXq.mjs";
import { P as G } from "./index-DlW0DMEl.mjs";
import "react-dom";
import { c as L } from "./index-D2LZVjSn.mjs";
import { u as k } from "./index-ByaXH_ih.mjs";
import { u as K } from "./index-DOCb3WPZ.mjs";
import { u as B } from "./index-C3vaq8Fy.mjs";
var O = [
  "a",
  "button",
  "div",
  "form",
  "h2",
  "h3",
  "img",
  "input",
  "label",
  "li",
  "nav",
  "ol",
  "p",
  "select",
  "span",
  "svg",
  "ul"
], b = O.reduce((e, t) => {
  const r = L(`Primitive.${t}`), a = f.forwardRef((n, c) => {
    const { asChild: o, ...d } = n, u = o ? r : t;
    return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ i(u, { ...d, ref: c });
  });
  return a.displayName = `Primitive.${t}`, { ...e, [t]: a };
}, {}), p = "Tabs", [j] = F(p, [
  C
]), x = C(), [q, h] = j(p), w = f.forwardRef(
  (e, t) => {
    const {
      __scopeTabs: r,
      value: a,
      onValueChange: n,
      defaultValue: c,
      orientation: o = "horizontal",
      dir: d,
      activationMode: u = "automatic",
      ...v
    } = e, l = k(d), [s, m] = K({
      prop: a,
      onChange: n,
      defaultProp: c ?? "",
      caller: p
    });
    return /* @__PURE__ */ i(
      q,
      {
        scope: r,
        baseId: B(),
        value: s,
        onValueChange: m,
        orientation: o,
        dir: l,
        activationMode: u,
        children: /* @__PURE__ */ i(
          b.div,
          {
            dir: l,
            "data-orientation": o,
            ...v,
            ref: t
          }
        )
      }
    );
  }
);
w.displayName = p;
var y = "TabsList", I = f.forwardRef(
  (e, t) => {
    const { __scopeTabs: r, loop: a = !0, ...n } = e, c = h(y, r), o = x(r);
    return /* @__PURE__ */ i(
      D,
      {
        asChild: !0,
        ...o,
        orientation: c.orientation,
        dir: c.dir,
        loop: a,
        children: /* @__PURE__ */ i(
          b.div,
          {
            role: "tablist",
            "aria-orientation": c.orientation,
            ...n,
            ref: t
          }
        )
      }
    );
  }
);
I.displayName = y;
var N = "TabsTrigger", P = f.forwardRef(
  (e, t) => {
    const { __scopeTabs: r, value: a, disabled: n = !1, ...c } = e, o = h(N, r), d = x(r), u = _(o.baseId, a), v = A(o.baseId, a), l = a === o.value;
    return /* @__PURE__ */ i(
      V,
      {
        asChild: !0,
        ...d,
        focusable: !n,
        active: l,
        children: /* @__PURE__ */ i(
          b.button,
          {
            type: "button",
            role: "tab",
            "aria-selected": l,
            "aria-controls": v,
            "data-state": l ? "active" : "inactive",
            "data-disabled": n ? "" : void 0,
            disabled: n,
            id: u,
            ...c,
            ref: t,
            onMouseDown: g(e.onMouseDown, (s) => {
              !n && s.button === 0 && s.ctrlKey === !1 ? o.onValueChange(a) : s.preventDefault();
            }),
            onKeyDown: g(e.onKeyDown, (s) => {
              [" ", "Enter"].includes(s.key) && o.onValueChange(a);
            }),
            onFocus: g(e.onFocus, () => {
              const s = o.activationMode !== "manual";
              !l && !n && s && o.onValueChange(a);
            })
          }
        )
      }
    );
  }
);
P.displayName = N;
var R = "TabsContent", S = f.forwardRef(
  (e, t) => {
    const { __scopeTabs: r, value: a, forceMount: n, children: c, ...o } = e, d = h(R, r), u = _(d.baseId, a), v = A(d.baseId, a), l = a === d.value, s = f.useRef(l);
    return f.useEffect(() => {
      const m = requestAnimationFrame(() => s.current = !1);
      return () => cancelAnimationFrame(m);
    }, []), /* @__PURE__ */ i(G, { present: n || l, children: ({ present: m }) => /* @__PURE__ */ i(
      b.div,
      {
        "data-state": l ? "active" : "inactive",
        "data-orientation": d.orientation,
        role: "tabpanel",
        "aria-labelledby": u,
        hidden: !m,
        id: v,
        tabIndex: 0,
        ...o,
        ref: t,
        style: {
          ...e.style,
          animationDuration: s.current ? "0s" : void 0
        },
        children: m && c
      }
    ) });
  }
);
S.displayName = R;
function _(e, t) {
  return `${e}-trigger-${t}`;
}
function A(e, t) {
  return `${e}-content-${t}`;
}
var z = w, H = I, J = P, Q = S;
const se = z, E = M({
  grow: !1
}), ce = ({ className: e, grow: t, ...r }) => /* @__PURE__ */ i(E.Provider, { value: { grow: t }, children: /* @__PURE__ */ i(
  H,
  {
    "data-slot": "tabs-list",
    className: T(
      "inline-flex-center text-muted-foreground h-10 p-1",
      t && "w-full",
      e
    ),
    ...r
  }
) }), le = ({
  className: e,
  ...t
}) => {
  const { grow: r } = $(E);
  return /* @__PURE__ */ i(
    J,
    {
      "data-slot": "tabs-trigger",
      className: T(
        "inline-flex-center focus-ring border-b-border data-[state=active]:border-b-primary data-[state=active]:text-foreground border-b px-3 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs",
        r && "grow",
        e
      ),
      ...t
    }
  );
}, de = ({
  className: e,
  ...t
}) => /* @__PURE__ */ i(
  Q,
  {
    "data-slot": "tabs-content",
    className: T("focus-ring mt-2", e),
    ...t
  }
);
export {
  se as T,
  de as a,
  ce as b,
  le as c
};