@televet/kibble-ui 4.0.0-beta.68 → 4.0.0-beta.7

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

@@ -1,639 +0,0 @@
-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-CHlLTEiF.js";
-import { W as z } from "./heading.component-Cum2BALi.js";
-import { c as Q } from "./create-slot-recipe-context-BJmsuxih.js";
-import { useState as J, useEffect as Z, forwardRef as T, useId as ee } from "react";
-import { c as te, a as x, 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-C7cdrplU.js";
-import { u as le, s as O, R as B } from "./render-strategy-DaeRfJpM.js";
-import { Y as y, c as ue, y as de, a0 as ge, E as fe, aq as be, r as v, ar as pe, as as ve, S as Te, b as me, d as f, i as ye, L as he, m as Re, q as Ce, at as Ee, x as Pe, aj as Ve, P as Ie, Q as Ae } from "./index-c2eCwOCU.js";
-function xe(e, t) {
-  const [s, a] = J(e);
-  return Z(() => {
-    const r = setTimeout(() => {
-      a(e);
-    }, t);
-    return () => {
-      clearTimeout(r);
-    };
-  }, [e, t]), s;
-}
-const [k, F] = te({
-  name: "TabsContext",
-  hookName: "useTabsContext",
-  providerName: "<TabsProvider />"
-}), $ = T((e, t) => {
-  const [s, a] = x()(e, ["value"]), r = F(), o = le(), n = ae({
-    ...o,
-    present: xe(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 D = T((e, t) => {
-  const s = F(), a = y(s.getIndicatorProps(), e);
-  return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
-});
-D.displayName = "TabIndicator";
-const U = T((e, t) => {
-  const s = F(), a = y(s.getListProps(), e);
-  return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
-});
-U.displayName = "TabList";
-const W = T((e, t) => {
-  const [s, a] = x()(e, ["disabled", "value"]), r = F(), o = y(r.getTriggerProps(s), a);
-  return /* @__PURE__ */ c.jsx(m.button, { ...o, ref: t });
-});
-W.displayName = "TabTrigger";
-var Fe = me("tabs").parts("root", "list", "trigger", "content", "indicator"), h = Fe.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)), j = (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)), je = (e, t) => ve(C(e), b(e, t.value), t.loopFocus), Oe = (e, t) => pe(C(e), b(e, t.value), t.loopFocus), H = (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 X(H(s));
-}, X = (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(), De = 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 = je(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 = Oe(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 (!j(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 = j(s);
-        if (!o || !n) return;
-        const u = fe([o], {
-          measure(p) {
-            return H(p);
-          },
-          onEntry({ rects: p }) {
-            const [P] = p;
-            e.set("indicatorRect", X(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 Ue = (e) => {
-  const t = ee(), { getRootNode: s } = re(), { dir: a } = ne(), r = {
-    id: t,
-    dir: a,
-    getRootNode: s,
-    ...e
-  }, o = ie(De, r);
-  return ke(o, ce);
-}, K = T((e, t) => {
-  const [s, a] = O(e), [r, o] = x()(a, [
-    "activationMode",
-    "composite",
-    "defaultValue",
-    "deselectable",
-    "id",
-    "ids",
-    "loopFocus",
-    "navigate",
-    "onFocusChange",
-    "onValueChange",
-    "orientation",
-    "translations",
-    "value"
-  ]), n = Ue(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] = O(e), [{ value: r }, o] = x()(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: Y,
-  withContext: E
-} = Q({ key: "tabs" });
-Y(q, "root", { forwardAsChild: !0 });
-const We = Y(
-  K,
-  "root",
-  { forwardAsChild: !0 }
-), Me = E(
-  W,
-  "trigger",
-  { forwardAsChild: !0 }
-), He = E(
-  $,
-  "content",
-  { forwardAsChild: !0 }
-);
-E("div", "contentGroup");
-const Xe = E(
-  U,
-  "list",
-  { forwardAsChild: !0 }
-);
-E(
-  D,
-  "indicator",
-  { forwardAsChild: !0 }
-);
-const Ke = {
-  xs: "sm",
-  sm: "md",
-  md: "md",
-  lg: "lg"
-}, qe = {
-  xs: "xs",
-  sm: "xs",
-  md: "sm",
-  lg: "md"
-}, Ye = ({
-  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(
-    z,
-    {
-      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(Xe, { className: "Tabs__List", "data-testid": "kibble-tabs-list", children: a.map((n, u) => /* @__PURE__ */ c.jsx(Ye, { ...n }, `tab-${u}`)) }),
-      !!r && r.map((n, u) => /* @__PURE__ */ c.jsx(He, { ...n }, `tabContent-${u}`))
-    ]
-  }
-);
-export {
-  rt as T
-};
-//# sourceMappingURL=tabs.component-C_4sO8kW.js.map