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

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as s } from "react/jsx-runtime";
import * as b from "react";
import { createContext as E, useContext as F } from "react";
import { c as g } from "./index-2NvaPZWc.mjs";
import { a as $, c as D, d as p } from "./index-DqbtYIhp.mjs";
import { c as h, R as V, I as G } from "./index-PV-tUMSQ.mjs";
import { P as L } from "./index-ruMUvQgL.mjs";
import { P as m } from "./index-WWNfSPCj.mjs";
import { u as k } from "./index-B__yqZ4y.mjs";
import { u as K } from "./index-BR4tIz6o.mjs";
var T = "Tabs", [B, ae] = D(T, [
  h
]), x = h(), [j, C] = B(T), I = b.forwardRef(
  (e, t) => {
    const {
      __scopeTabs: r,
      value: a,
      onValueChange: i,
      defaultValue: d,
      orientation: o = "horizontal",
      dir: l,
      activationMode: f = "automatic",
      ...v
    } = e, c = k(l), [n, u] = $({
      prop: a,
      onChange: i,
      defaultProp: d
    });
    return /* @__PURE__ */ s(
      j,
      {
        scope: r,
        baseId: K(),
        value: n,
        onValueChange: u,
        orientation: o,
        dir: c,
        activationMode: f,
        children: /* @__PURE__ */ s(
          m.div,
          {
            dir: c,
            "data-orientation": o,
            ...v,
            ref: t
          }
        )
      }
    );
  }
);
I.displayName = T;
var y = "TabsList", w = b.forwardRef(
  (e, t) => {
    const { __scopeTabs: r, loop: a = !0, ...i } = e, d = C(y, r), o = x(r);
    return /* @__PURE__ */ s(
      V,
      {
        asChild: !0,
        ...o,
        orientation: d.orientation,
        dir: d.dir,
        loop: a,
        children: /* @__PURE__ */ s(
          m.div,
          {
            role: "tablist",
            "aria-orientation": d.orientation,
            ...i,
            ref: t
          }
        )
      }
    );
  }
);
w.displayName = y;
var R = "TabsTrigger", N = b.forwardRef(
  (e, t) => {
    const { __scopeTabs: r, value: a, disabled: i = !1, ...d } = e, o = C(R, r), l = x(r), f = A(o.baseId, a), v = S(o.baseId, a), c = a === o.value;
    return /* @__PURE__ */ s(
      G,
      {
        asChild: !0,
        ...l,
        focusable: !i,
        active: c,
        children: /* @__PURE__ */ s(
          m.button,
          {
            type: "button",
            role: "tab",
            "aria-selected": c,
            "aria-controls": v,
            "data-state": c ? "active" : "inactive",
            "data-disabled": i ? "" : void 0,
            disabled: i,
            id: f,
            ...d,
            ref: t,
            onMouseDown: p(e.onMouseDown, (n) => {
              !i && n.button === 0 && n.ctrlKey === !1 ? o.onValueChange(a) : n.preventDefault();
            }),
            onKeyDown: p(e.onKeyDown, (n) => {
              [" ", "Enter"].includes(n.key) && o.onValueChange(a);
            }),
            onFocus: p(e.onFocus, () => {
              const n = o.activationMode !== "manual";
              !c && !i && n && o.onValueChange(a);
            })
          }
        )
      }
    );
  }
);
N.displayName = R;
var P = "TabsContent", _ = b.forwardRef(
  (e, t) => {
    const { __scopeTabs: r, value: a, forceMount: i, children: d, ...o } = e, l = C(P, r), f = A(l.baseId, a), v = S(l.baseId, a), c = a === l.value, n = b.useRef(c);
    return b.useEffect(() => {
      const u = requestAnimationFrame(() => n.current = !1);
      return () => cancelAnimationFrame(u);
    }, []), /* @__PURE__ */ s(L, { present: i || c, children: ({ present: u }) => /* @__PURE__ */ s(
      m.div,
      {
        "data-state": c ? "active" : "inactive",
        "data-orientation": l.orientation,
        role: "tabpanel",
        "aria-labelledby": f,
        hidden: !u,
        id: v,
        tabIndex: 0,
        ...o,
        ref: t,
        style: {
          ...e.style,
          animationDuration: n.current ? "0s" : void 0
        },
        children: u && d
      }
    ) });
  }
);
_.displayName = P;
function A(e, t) {
  return `${e}-trigger-${t}`;
}
function S(e, t) {
  return `${e}-content-${t}`;
}
var q = I, z = w, H = N, O = _;
const oe = q, M = E({
  grow: !1
}), re = ({ className: e, grow: t, ...r }) => /* @__PURE__ */ s(M.Provider, { value: { grow: t }, children: /* @__PURE__ */ s(
  z,
  {
    className: g(
      "inline-flex-center text-muted-foreground h-10 p-1",
      t && "w-full",
      e
    ),
    ...r
  }
) }), ne = ({
  className: e,
  ...t
}) => {
  const { grow: r } = F(M);
  return /* @__PURE__ */ s(
    H,
    {
      className: g(
        "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
    }
  );
}, se = ({
  className: e,
  ...t
}) => /* @__PURE__ */ s(
  O,
  {
    className: g("focus-ring mt-2", e),
    ...t
  }
);
export {
  oe as T,
  re as a,
  ne as b,
  se as c
};