@televet/kibble-ui 4.0.0-beta.6 → 4.0.0-beta.60

package/dist/chunks/tabs.component-cTSkzmrC.js

@@ -0,0 +1,639 @@
+import { j as c } from "./jsx-runtime-C5mzlN2N.js";
+import { I as S } from "./icon.component-DGNCL1Yc.js";
+import { N as G } from "./notificationCounter.component-DMr4Mlm9.js";
+import { W as Y } from "./heading.component-hIy5D31E.js";
+import { c as J } from "./create-slot-recipe-context-BJmsuxih.js";
+import { useState as Q, useEffect as Z, forwardRef as T, useId as ee } from "react";
+import { c as te, a as F, l as ae, m as se, f as m, h as oe, b as _, i as re, j as ne, k as ie, n as ce } from "./portal-D2KZrSzZ.js";
+import { u as le, s as j, R as B } from "./render-strategy-ql9Qx5Cz.js";
+import { a1 as y, c as ue, z as de, a4 as ge, J as fe, an as be, r as v, ao as pe, ap as ve, X as Te, b as me, d as f, i as ye, Q as he, m as Re, q as Ce, aq as Ee, y as Pe, ae as Ve, U as Ie, V as Ae } from "./index-C323eOJV.js";
+function Fe(e, t) {
+  const [s, a] = Q(e);
+  return Z(() => {
+    const r = setTimeout(() => {
+      a(e);
+    }, t);
+    return () => {
+      clearTimeout(r);
+    };
+  }, [e, t]), s;
+}
+const [k, x] = te({
+  name: "TabsContext",
+  hookName: "useTabsContext",
+  providerName: "<TabsProvider />"
+}), $ = T((e, t) => {
+  const [s, a] = F()(e, ["value"]), r = x(), o = le(), n = ae({
+    ...o,
+    present: Fe(r.value === e.value, 0),
+    immediate: !0
+  }), u = y(r.getContentProps(s), n.getPresenceProps(), a);
+  return /* @__PURE__ */ c.jsx(se, { value: n, children: n.unmounted ? null : /* @__PURE__ */ c.jsx(m.div, { ...u, ref: oe(n.ref, t) }) });
+});
+$.displayName = "TabContent";
+const U = T((e, t) => {
+  const s = x(), a = y(s.getIndicatorProps(), e);
+  return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
+});
+U.displayName = "TabIndicator";
+const D = T((e, t) => {
+  const s = x(), a = y(s.getListProps(), e);
+  return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
+});
+D.displayName = "TabList";
+const W = T((e, t) => {
+  const [s, a] = F()(e, ["disabled", "value"]), r = x(), o = y(r.getTriggerProps(s), a);
+  return /* @__PURE__ */ c.jsx(m.button, { ...o, ref: t });
+});
+W.displayName = "TabTrigger";
+var xe = me("tabs").parts("root", "list", "trigger", "content", "indicator"), h = xe.build(), Ne = (e) => e.ids?.root ?? `tabs:${e.id}`, R = (e) => e.ids?.list ?? `tabs:${e.id}:list`, N = (e, t) => e.ids?.content ?? `tabs:${e.id}:content-${t}`, b = (e, t) => e.ids?.trigger ?? `tabs:${e.id}:trigger-${t}`, M = (e) => e.ids?.indicator ?? `tabs:${e.id}:indicator`, _e = (e) => e.getById(R(e)), we = (e, t) => e.getById(N(e, t)), A = (e, t) => e.getById(b(e, t)), O = (e) => e.getById(M(e)), C = (e) => {
+  const s = `[role=tab][data-ownedby='${CSS.escape(R(e))}']:not([disabled])`;
+  return Pe(_e(e), s);
+}, Le = (e) => Ae(C(e)), Se = (e) => Ie(C(e)), Oe = (e, t) => ve(C(e), b(e, t.value), t.loopFocus), je = (e, t) => pe(C(e), b(e, t.value), t.loopFocus), X = (e) => ({
+  left: e?.offsetLeft ?? 0,
+  top: e?.offsetTop ?? 0,
+  width: e?.offsetWidth ?? 0,
+  height: e?.offsetHeight ?? 0
+}), Be = (e, t) => {
+  const s = Ee(C(e), b(e, t));
+  return H(X(s));
+}, H = (e) => ({
+  width: `${e.width}px`,
+  height: `${e.height}px`,
+  left: `${e.left}px`,
+  top: `${e.top}px`
+});
+function ke(e, t) {
+  const { state: s, send: a, context: r, prop: o, scope: n } = e, u = o("translations"), p = s.matches("focused"), P = o("orientation") === "vertical", V = o("orientation") === "horizontal", w = o("composite");
+  function L(i) {
+    return {
+      selected: r.get("value") === i.value,
+      focused: r.get("focusedValue") === i.value,
+      disabled: !!i.disabled
+    };
+  }
+  return {
+    value: r.get("value"),
+    focusedValue: r.get("focusedValue"),
+    setValue(i) {
+      a({ type: "SET_VALUE", value: i });
+    },
+    clearValue() {
+      a({ type: "CLEAR_VALUE" });
+    },
+    setIndicatorRect(i) {
+      const l = b(n, i);
+      a({ type: "SET_INDICATOR_RECT", id: l });
+    },
+    syncTabIndex() {
+      a({ type: "SYNC_TAB_INDEX" });
+    },
+    selectNext(i) {
+      a({ type: "TAB_FOCUS", value: i, src: "selectNext" }), a({ type: "ARROW_NEXT", src: "selectNext" });
+    },
+    selectPrev(i) {
+      a({ type: "TAB_FOCUS", value: i, src: "selectPrev" }), a({ type: "ARROW_PREV", src: "selectPrev" });
+    },
+    focus() {
+      const i = r.get("value");
+      i && A(n, i)?.focus();
+    },
+    getRootProps() {
+      return t.element({
+        ...h.root.attrs,
+        id: Ne(n),
+        "data-orientation": o("orientation"),
+        "data-focus": f(p),
+        dir: o("dir")
+      });
+    },
+    getListProps() {
+      return t.element({
+        ...h.list.attrs,
+        id: R(n),
+        role: "tablist",
+        dir: o("dir"),
+        "data-focus": f(p),
+        "aria-orientation": o("orientation"),
+        "data-orientation": o("orientation"),
+        "aria-label": u?.listLabel,
+        onKeyDown(i) {
+          if (i.defaultPrevented || !he(i) || Re(i)) return;
+          const l = {
+            ArrowDown() {
+              V || a({ type: "ARROW_NEXT", key: "ArrowDown" });
+            },
+            ArrowUp() {
+              V || a({ type: "ARROW_PREV", key: "ArrowUp" });
+            },
+            ArrowLeft() {
+              P || a({ type: "ARROW_PREV", key: "ArrowLeft" });
+            },
+            ArrowRight() {
+              P || a({ type: "ARROW_NEXT", key: "ArrowRight" });
+            },
+            Home() {
+              a({ type: "HOME" });
+            },
+            End() {
+              a({ type: "END" });
+            },
+            Enter() {
+              a({ type: "ENTER" });
+            }
+          };
+          let d = Ce(i, {
+            dir: o("dir"),
+            orientation: o("orientation")
+          });
+          const g = l[d];
+          g && (i.preventDefault(), g(i));
+        }
+      });
+    },
+    getTriggerState: L,
+    getTriggerProps(i) {
+      const { value: l, disabled: d } = i, g = L(i);
+      return t.button({
+        ...h.trigger.attrs,
+        role: "tab",
+        type: "button",
+        disabled: d,
+        dir: o("dir"),
+        "data-orientation": o("orientation"),
+        "data-disabled": f(d),
+        "aria-disabled": d,
+        "data-value": l,
+        "aria-selected": g.selected,
+        "data-selected": f(g.selected),
+        "data-focus": f(g.focused),
+        "aria-controls": g.selected ? N(n, l) : void 0,
+        "data-ownedby": R(n),
+        "data-ssr": f(r.get("ssr")),
+        id: b(n, l),
+        tabIndex: g.selected && w ? 0 : -1,
+        onFocus() {
+          a({ type: "TAB_FOCUS", value: l });
+        },
+        onBlur(I) {
+          I.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
+        },
+        onClick(I) {
+          I.defaultPrevented || d || (ye() && I.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
+        }
+      });
+    },
+    getContentProps(i) {
+      const { value: l } = i, d = r.get("value") === l;
+      return t.element({
+        ...h.content.attrs,
+        dir: o("dir"),
+        id: N(n, l),
+        tabIndex: w ? 0 : -1,
+        "aria-labelledby": b(n, l),
+        role: "tabpanel",
+        "data-ownedby": R(n),
+        "data-selected": f(d),
+        "data-orientation": o("orientation"),
+        hidden: !d
+      });
+    },
+    getIndicatorProps() {
+      const i = r.get("indicatorRect"), l = r.get("indicatorTransition");
+      return t.element({
+        id: M(n),
+        ...h.indicator.attrs,
+        dir: o("dir"),
+        "data-orientation": o("orientation"),
+        style: {
+          "--transition-property": "left, right, top, bottom, width, height",
+          "--left": i.left,
+          "--top": i.top,
+          "--width": i.width,
+          "--height": i.height,
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: l ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [V ? "left" : "top"]: V ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+var { not: $e } = de(), Ue = ue({
+  props({ props: e }) {
+    return {
+      dir: "ltr",
+      orientation: "horizontal",
+      activationMode: "automatic",
+      loopFocus: !0,
+      composite: !0,
+      navigate(t) {
+        Te(t.node);
+      },
+      defaultValue: null,
+      ...e
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop: e, bindable: t }) {
+    return {
+      value: t(() => ({
+        defaultValue: e("defaultValue"),
+        value: e("value"),
+        onChange(s) {
+          e("onValueChange")?.({ value: s });
+        }
+      })),
+      focusedValue: t(() => ({
+        defaultValue: e("value") || e("defaultValue"),
+        sync: !0,
+        onChange(s) {
+          e("onFocusChange")?.({ focusedValue: s });
+        }
+      })),
+      ssr: t(() => ({ defaultValue: !0 })),
+      indicatorTransition: t(() => ({ defaultValue: !1 })),
+      indicatorRect: t(() => ({
+        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+      }))
+    };
+  },
+  watch({ context: e, prop: t, track: s, action: a }) {
+    s([() => e.get("value")], () => {
+      a(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+    }), s([() => t("dir"), () => t("orientation")], () => {
+      a(["syncIndicatorRect"]);
+    });
+  },
+  on: {
+    SET_VALUE: {
+      actions: ["setValue"]
+    },
+    CLEAR_VALUE: {
+      actions: ["clearValue"]
+    },
+    SET_INDICATOR_RECT: {
+      actions: ["setIndicatorRect"]
+    },
+    SYNC_TAB_INDEX: {
+      actions: ["syncTabIndex"]
+    }
+  },
+  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  exit: ["cleanupObserver"],
+  states: {
+    idle: {
+      on: {
+        TAB_FOCUS: {
+          target: "focused",
+          actions: ["setFocusedValue"]
+        },
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
+        },
+        ARROW_PREV: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusPrevTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusPrevTab"]
+          }
+        ],
+        ARROW_NEXT: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusNextTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusNextTab"]
+          }
+        ],
+        HOME: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusFirstTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusFirstTab"]
+          }
+        ],
+        END: [
+          {
+            guard: "selectOnFocus",
+            actions: ["focusLastTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusLastTab"]
+          }
+        ],
+        ENTER: {
+          guard: $e("selectOnFocus"),
+          actions: ["selectFocusedTab"]
+        },
+        TAB_FOCUS: {
+          actions: ["setFocusedValue"]
+        },
+        TAB_BLUR: {
+          target: "idle",
+          actions: ["clearFocusedValue"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      selectOnFocus: ({ prop: e }) => e("activationMode") === "automatic"
+    },
+    actions: {
+      selectFocusedTab({ context: e, prop: t }) {
+        v(() => {
+          const s = e.get("focusedValue");
+          if (!s) return;
+          const r = t("deselectable") && e.get("value") === s ? null : s;
+          e.set("value", r);
+        });
+      },
+      setFocusedValue({ context: e, event: t, flush: s }) {
+        t.value != null && s(() => {
+          e.set("focusedValue", t.value);
+        });
+      },
+      clearFocusedValue({ context: e }) {
+        e.set("focusedValue", null);
+      },
+      setValue({ context: e, event: t, prop: s }) {
+        const a = s("deselectable") && e.get("value") === e.get("focusedValue");
+        e.set("value", a ? null : t.value);
+      },
+      clearValue({ context: e }) {
+        e.set("value", null);
+      },
+      focusFirstTab({ scope: e }) {
+        v(() => {
+          Le(e)?.focus();
+        });
+      },
+      focusLastTab({ scope: e }) {
+        v(() => {
+          Se(e)?.focus();
+        });
+      },
+      focusNextTab({ context: e, prop: t, scope: s, event: a }) {
+        const r = a.value ?? e.get("focusedValue");
+        if (!r) return;
+        const o = Oe(s, {
+          value: r,
+          loopFocus: t("loopFocus")
+        });
+        v(() => {
+          t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
+        });
+      },
+      focusPrevTab({ context: e, prop: t, scope: s, event: a }) {
+        const r = a.value ?? e.get("focusedValue");
+        if (!r) return;
+        const o = je(s, {
+          value: r,
+          loopFocus: t("loopFocus")
+        });
+        v(() => {
+          t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
+        });
+      },
+      syncTabIndex({ context: e, scope: t }) {
+        v(() => {
+          const s = e.get("value");
+          if (!s) return;
+          const a = we(t, s);
+          if (!a) return;
+          Ve(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
+        });
+      },
+      cleanupObserver({ refs: e }) {
+        const t = e.get("indicatorCleanup");
+        t && t();
+      },
+      allowIndicatorTransition({ context: e }) {
+        e.set("indicatorTransition", !0);
+      },
+      setIndicatorRect({ context: e, event: t, scope: s }) {
+        const a = t.id ?? e.get("value");
+        if (!O(s)) return;
+        if (!a) {
+          e.set("indicatorTransition", !1);
+          return;
+        }
+        A(s, a) && (e.set("indicatorRect", Be(s, a)), be(() => {
+          e.set("indicatorTransition", !1);
+        }));
+      },
+      syncSsr({ context: e }) {
+        e.set("ssr", !1);
+      },
+      syncIndicatorRect({ context: e, refs: t, scope: s }) {
+        const a = t.get("indicatorCleanup");
+        a && a();
+        const r = e.get("value");
+        if (!r) {
+          e.set("indicatorTransition", !1);
+          return;
+        }
+        const o = A(s, r), n = O(s);
+        if (!o || !n) return;
+        const u = fe([o], {
+          measure(p) {
+            return X(p);
+          },
+          onEntry({ rects: p }) {
+            const [P] = p;
+            e.set("indicatorRect", H(P));
+          }
+        });
+        t.set("indicatorCleanup", u);
+      },
+      navigateIfNeeded({ context: e, prop: t, scope: s }) {
+        const a = e.get("value");
+        if (!a) return;
+        const r = A(s, a);
+        ge(r) && t("navigate")?.({ value: a, node: r, href: r.href });
+      }
+    }
+  }
+});
+_()([
+  "activationMode",
+  "composite",
+  "deselectable",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "navigate",
+  "onFocusChange",
+  "onValueChange",
+  "orientation",
+  "translations",
+  "value",
+  "defaultValue"
+]);
+_()(["disabled", "value"]);
+_()(["value"]);
+const De = (e) => {
+  const t = ee(), { getRootNode: s } = re(), { dir: a } = ne(), r = {
+    id: t,
+    dir: a,
+    getRootNode: s,
+    ...e
+  }, o = ie(Ue, r);
+  return ke(o, ce);
+}, K = T((e, t) => {
+  const [s, a] = j(e), [r, o] = F()(a, [
+    "activationMode",
+    "composite",
+    "defaultValue",
+    "deselectable",
+    "id",
+    "ids",
+    "loopFocus",
+    "navigate",
+    "onFocusChange",
+    "onValueChange",
+    "orientation",
+    "translations",
+    "value"
+  ]), n = De(r), u = y(n.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(k, { value: n, children: /* @__PURE__ */ c.jsx(B, { value: s, children: /* @__PURE__ */ c.jsx(m.div, { ...u, ref: t }) }) });
+});
+K.displayName = "TabsRoot";
+const q = T((e, t) => {
+  const [s, a] = j(e), [{ value: r }, o] = F()(a, ["value"]), n = y(r.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(k, { value: r, children: /* @__PURE__ */ c.jsx(B, { value: s, children: /* @__PURE__ */ c.jsx(m.div, { ...n, ref: t }) }) });
+});
+q.displayName = "TabsRootProvider";
+const {
+  withProvider: z,
+  withContext: E
+} = J({ key: "tabs" });
+z(q, "root", { forwardAsChild: !0 });
+const We = z(
+  K,
+  "root",
+  { forwardAsChild: !0 }
+), Me = E(
+  W,
+  "trigger",
+  { forwardAsChild: !0 }
+), Xe = E(
+  $,
+  "content",
+  { forwardAsChild: !0 }
+);
+E("div", "contentGroup");
+const He = E(
+  D,
+  "list",
+  { forwardAsChild: !0 }
+);
+E(
+  U,
+  "indicator",
+  { forwardAsChild: !0 }
+);
+const Ke = {
+  xs: "sm",
+  sm: "md",
+  md: "md",
+  lg: "lg"
+}, qe = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+}, ze = ({
+  iconName: e,
+  iconPosition: t = "left",
+  label: s,
+  notificationCounterProps: a,
+  showNotificationCounter: r,
+  size: o = "md",
+  ...n
+}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": "kibble-tab", ...n, children: [
+  !!e && t === "left" && /* @__PURE__ */ c.jsx(
+    S,
+    {
+      className: "Tab__Icon",
+      "data-testid": "kibble-tab-icon",
+      name: e,
+      size: o,
+      variant: "default"
+    }
+  ),
+  /* @__PURE__ */ c.jsx(
+    Y,
+    {
+      className: "Tab__Label",
+      "data-testid": "kibble-tab-label",
+      size: qe[o],
+      children: s
+    }
+  ),
+  !!e && t === "right" && /* @__PURE__ */ c.jsx(
+    S,
+    {
+      className: "Tab__Icon",
+      "data-testid": "kibble-tab-icon",
+      name: e,
+      size: o
+    }
+  ),
+  r && /* @__PURE__ */ c.jsx(
+    G,
+    {
+      className: "Tab__NotificationCounter",
+      "data-testid": "kibble-tab-notification-counter",
+      ...a,
+      size: Ke[o]
+    }
+  )
+] }), rt = ({
+  align: e = "start",
+  onChange: t,
+  size: s = "md",
+  tabs: a,
+  tabsContents: r,
+  ...o
+}) => /* @__PURE__ */ c.jsxs(
+  We,
+  {
+    className: "Tabs",
+    "data-testid": "kibble-tabs",
+    justify: e || o.justify,
+    size: s,
+    onValueChange: ({ value: n }) => t?.(n),
+    ...o,
+    children: [
+      /* @__PURE__ */ c.jsx(He, { className: "Tabs__List", "data-testid": "kibble-tabs-list", children: a.map((n, u) => /* @__PURE__ */ c.jsx(ze, { ...n }, `tab-${u}`)) }),
+      !!r && r.map((n, u) => /* @__PURE__ */ c.jsx(Xe, { ...n }, `tabContent-${u}`))
+    ]
+  }
+);
+export {
+  rt as T
+};
+//# sourceMappingURL=tabs.component-cTSkzmrC.js.map