@konstructio/ui/dist/dist-Br5jSLr2.js

A set of reusable and customizable React components built for konstruct.io

import { n as ne } from "./dist-C4El7dZ5.js";
import { a as I, r as G, s as K, t as C } from "./dist-D_9sBzad.js";
import { t as O } from "./dist-CQfmhKEs.js";
import { t as ae } from "./dist-D6dB-_Oy.js";
import { t as se } from "./dist-DF7Yi2EK.js";
import { t as L } from "./dist-Cf-pDuuw.js";
import { t as ie } from "./dist-CZChgJLY.js";
import * as s from "react";
import { jsx as l } from "react/jsx-runtime";
var P = "rovingFocusGroup.onEntryFocus", ce = {
  bubbles: !1,
  cancelable: !0
}, h = "RovingFocusGroup", [N, k, ue] = ie(h), [le, V] = K(h, [ue]), [de, fe] = le(h), U = s.forwardRef((e, o) => /* @__PURE__ */ l(N.Provider, {
  scope: e.__scopeRovingFocusGroup,
  children: /* @__PURE__ */ l(N.Slot, {
    scope: e.__scopeRovingFocusGroup,
    children: /* @__PURE__ */ l(ve, {
      ...e,
      ref: o
    })
  })
}));
U.displayName = h;
var ve = s.forwardRef((e, o) => {
  const { __scopeRovingFocusGroup: n, orientation: t, loop: u = !1, dir: d, currentTabStopId: a, defaultCurrentTabStopId: v, onCurrentTabStopIdChange: T, onEntryFocus: p, preventScrollOnEntryFocus: r = !1, ...i } = e, b = s.useRef(null), E = ne(o, b), w = L(d), [S, c] = G({
    prop: a,
    defaultProp: v ?? null,
    onChange: T,
    caller: h
  }), [F, m] = s.useState(!1), g = ae(p), te = k(n), A = s.useRef(!1), [oe, x] = s.useState(0);
  return s.useEffect(() => {
    const f = b.current;
    if (f)
      return f.addEventListener(P, g), () => f.removeEventListener(P, g);
  }, [g]), /* @__PURE__ */ l(de, {
    scope: n,
    orientation: t,
    dir: w,
    loop: u,
    currentTabStopId: S,
    onItemFocus: s.useCallback((f) => c(f), [c]),
    onItemShiftTab: s.useCallback(() => m(!0), []),
    onFocusableItemAdd: s.useCallback(() => x((f) => f + 1), []),
    onFocusableItemRemove: s.useCallback(() => x((f) => f - 1), []),
    children: /* @__PURE__ */ l(C.div, {
      tabIndex: F || oe === 0 ? -1 : 0,
      "data-orientation": t,
      ...i,
      ref: E,
      style: {
        outline: "none",
        ...e.style
      },
      onMouseDown: I(e.onMouseDown, () => {
        A.current = !0;
      }),
      onFocus: I(e.onFocus, (f) => {
        const re = !A.current;
        if (f.target === f.currentTarget && re && !F) {
          const M = new CustomEvent(P, ce);
          if (f.currentTarget.dispatchEvent(M), !M.defaultPrevented) {
            const y = te().filter((R) => R.focusable);
            Y([
              y.find((R) => R.active),
              y.find((R) => R.id === S),
              ...y
            ].filter(Boolean).map((R) => R.ref.current), r);
          }
        }
        A.current = !1;
      }),
      onBlur: I(e.onBlur, () => m(!1))
    })
  });
}), B = "RovingFocusGroupItem", $ = s.forwardRef((e, o) => {
  const { __scopeRovingFocusGroup: n, focusable: t = !0, active: u = !1, tabStopId: d, children: a, ...v } = e, T = O(), p = d || T, r = fe(B, n), i = r.currentTabStopId === p, b = k(n), { onFocusableItemAdd: E, onFocusableItemRemove: w, currentTabStopId: S } = r;
  return s.useEffect(() => {
    if (t)
      return E(), () => w();
  }, [
    t,
    E,
    w
  ]), /* @__PURE__ */ l(N.ItemSlot, {
    scope: n,
    id: p,
    focusable: t,
    active: u,
    children: /* @__PURE__ */ l(C.span, {
      tabIndex: i ? 0 : -1,
      "data-orientation": r.orientation,
      ...v,
      ref: o,
      onMouseDown: I(e.onMouseDown, (c) => {
        t ? r.onItemFocus(p) : c.preventDefault();
      }),
      onFocus: I(e.onFocus, () => r.onItemFocus(p)),
      onKeyDown: I(e.onKeyDown, (c) => {
        if (c.key === "Tab" && c.shiftKey) {
          r.onItemShiftTab();
          return;
        }
        if (c.target !== c.currentTarget) return;
        const F = me(c, r.orientation, r.dir);
        if (F !== void 0) {
          if (c.metaKey || c.ctrlKey || c.altKey || c.shiftKey) return;
          c.preventDefault();
          let m = b().filter((g) => g.focusable).map((g) => g.ref.current);
          if (F === "last") m.reverse();
          else if (F === "prev" || F === "next") {
            F === "prev" && m.reverse();
            const g = m.indexOf(c.currentTarget);
            m = r.loop ? ge(m, g + 1) : m.slice(g + 1);
          }
          setTimeout(() => Y(m));
        }
      }),
      children: typeof a == "function" ? a({
        isCurrentTabStop: i,
        hasTabStop: S != null
      }) : a
    })
  });
});
$.displayName = B;
var pe = {
  ArrowLeft: "prev",
  ArrowUp: "prev",
  ArrowRight: "next",
  ArrowDown: "next",
  PageUp: "first",
  Home: "first",
  PageDown: "last",
  End: "last"
};
function be(e, o) {
  return o !== "rtl" ? e : e === "ArrowLeft" ? "ArrowRight" : e === "ArrowRight" ? "ArrowLeft" : e;
}
function me(e, o, n) {
  const t = be(e.key, n);
  if (!(o === "vertical" && ["ArrowLeft", "ArrowRight"].includes(t)) && !(o === "horizontal" && ["ArrowUp", "ArrowDown"].includes(t)))
    return pe[t];
}
function Y(e, o = !1) {
  const n = document.activeElement;
  for (const t of e)
    if (t === n || (t.focus({ preventScroll: o }), document.activeElement !== n)) return;
}
function ge(e, o) {
  return e.map((n, t) => e[(o + t) % e.length]);
}
var Te = U, Ie = $, _ = "Tabs", [Fe, Pe] = K(_, [V]), z = V(), [Re, D] = Fe(_), H = s.forwardRef((e, o) => {
  const { __scopeTabs: n, value: t, onValueChange: u, defaultValue: d, orientation: a = "horizontal", dir: v, activationMode: T = "automatic", ...p } = e, r = L(v), [i, b] = G({
    prop: t,
    onChange: u,
    defaultProp: d ?? "",
    caller: _
  });
  return /* @__PURE__ */ l(Re, {
    scope: n,
    baseId: O(),
    value: i,
    onValueChange: b,
    orientation: a,
    dir: r,
    activationMode: T,
    children: /* @__PURE__ */ l(C.div, {
      dir: r,
      "data-orientation": a,
      ...p,
      ref: o
    })
  });
});
H.displayName = _;
var j = "TabsList", q = s.forwardRef((e, o) => {
  const { __scopeTabs: n, loop: t = !0, ...u } = e, d = D(j, n), a = z(n);
  return /* @__PURE__ */ l(Te, {
    asChild: !0,
    ...a,
    orientation: d.orientation,
    dir: d.dir,
    loop: t,
    children: /* @__PURE__ */ l(C.div, {
      role: "tablist",
      "aria-orientation": d.orientation,
      ...u,
      ref: o
    })
  });
});
q.displayName = j;
var J = "TabsTrigger", Q = s.forwardRef((e, o) => {
  const { __scopeTabs: n, value: t, disabled: u = !1, ...d } = e, a = D(J, n), v = z(n), T = Z(a.baseId, t), p = ee(a.baseId, t), r = t === a.value;
  return /* @__PURE__ */ l(Ie, {
    asChild: !0,
    ...v,
    focusable: !u,
    active: r,
    children: /* @__PURE__ */ l(C.button, {
      type: "button",
      role: "tab",
      "aria-selected": r,
      "aria-controls": p,
      "data-state": r ? "active" : "inactive",
      "data-disabled": u ? "" : void 0,
      disabled: u,
      id: T,
      ...d,
      ref: o,
      onMouseDown: I(e.onMouseDown, (i) => {
        !u && i.button === 0 && i.ctrlKey === !1 ? a.onValueChange(t) : i.preventDefault();
      }),
      onKeyDown: I(e.onKeyDown, (i) => {
        [" ", "Enter"].includes(i.key) && a.onValueChange(t);
      }),
      onFocus: I(e.onFocus, () => {
        const i = a.activationMode !== "manual";
        !r && !u && i && a.onValueChange(t);
      })
    })
  });
});
Q.displayName = J;
var W = "TabsContent", X = s.forwardRef((e, o) => {
  const { __scopeTabs: n, value: t, forceMount: u, children: d, ...a } = e, v = D(W, n), T = Z(v.baseId, t), p = ee(v.baseId, t), r = t === v.value, i = s.useRef(r);
  return s.useEffect(() => {
    const b = requestAnimationFrame(() => i.current = !1);
    return () => cancelAnimationFrame(b);
  }, []), /* @__PURE__ */ l(se, {
    present: u || r,
    children: ({ present: b }) => /* @__PURE__ */ l(C.div, {
      "data-state": r ? "active" : "inactive",
      "data-orientation": v.orientation,
      role: "tabpanel",
      "aria-labelledby": T,
      hidden: !b,
      id: p,
      tabIndex: 0,
      ...a,
      ref: o,
      style: {
        ...e.style,
        animationDuration: i.current ? "0s" : void 0
      },
      children: b && d
    })
  });
});
X.displayName = W;
function Z(e, o) {
  return `${e}-trigger-${o}`;
}
function ee(e, o) {
  return `${e}-content-${o}`;
}
var Ne = H, De = q, xe = Q, Me = X;
export {
  xe as i,
  De as n,
  Ne as r,
  Me as t
};