@konstructio/ui 0.0.13-alpha.2 → 0.1.0-alpha.11

package/dist/index-CvfCCTEO.js

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