@televet/kibble-ui 4.0.1 → 5.0.0-beta.hotfix.1

package/dist/chunks/{tab.types-DCkus0y2.js → tab.types-DaJfFBvr.js}

@@ -1,12 +1,13 @@
 import { j as c } from "./jsx-runtime-C5mzlN2N.js";
-import { I as L } from "./icon.component-C5bgxAD2.js";
-import { N as z } from "./notificationCounter.component-Lu4_Owvr.js";
-import { W as G } from "./heading.component-SiJnYLOw.js";
-import { c as J } from "./create-slot-recipe-context-CrlT_nGQ.js";
+import { I as L } from "./icon.component-PV_nHBId.js";
+import { N as z } from "./notificationCounter.component-BexkISUl.js";
+import { W as G } from "./heading.component-7ikcgDco.js";
+import { c as J } from "./create-slot-recipe-context-D_FXDJGp.js";
 import { useState as Q, 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 N, i as re, j as ne, k as ie, n as ce } from "./use-locale-context-CazVZ4Kg.js";
-import { u as le, s as j, R as B } from "./render-strategy-Dr73HbQf.js";
-import { a2 as y, s as ue, a6 as de, K as ge, aq as fe, r as v, ar as be, as as pe, Y as ve, b as Te, d as f, _ as me, e as ye, R as he, n as Re, u as Ce, at as Pe, z as Ve, ah as Ie, V as Ee, W as Ae } from "./index-DA90Dqf9.js";
+import { a as te, b as x, d as m, e as ae, c as N, u as se, f as oe, g as re, n as ne } from "./use-locale-context-Bw4Gg9Z0.js";
+import { u as ie, s as $, R as j } from "./render-strategy-munDZLwL.js";
+import { a6 as y, s as ce, aa as le, C as ue, b2 as de, r as v, aR as ge, aS as fe, a1 as pe, e as be, b as p, a3 as ve, x as Te, W as me, g as ye, j as he, b5 as Re, q as Ce, aD as Pe, _ as Ve, $ as Ee } from "./index-fHSGm2nC.js";
+import { c as Ae, d as Ie } from "./index-C9UYIjEB.js";
 function xe(e, t) {
   const [s, a] = Q(e);
   return Z(() => {
@@ -18,19 +19,19 @@ function xe(e, t) {
     };
   }, [e, t]), s;
 }
-const [k, F] = te({
+const [B, F] = te({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "<TabsProvider />"
-}), $ = T((e, t) => {
-  const [s, a] = x()(e, ["value"]), r = F(), o = le(), n = ae({
+}), k = T((e, t) => {
+  const [s, a] = x()(e, ["value"]), r = F(), o = ie(), 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) }) });
+  }), l = y(r.getContentProps(s), n.getPresenceProps(), a);
+  return /* @__PURE__ */ c.jsx(Ie, { value: n, children: n.unmounted ? null : /* @__PURE__ */ c.jsx(m.div, { ...l, ref: ae(n.ref, t) }) });
 });
-$.displayName = "TabContent";
+k.displayName = "TabContent";
 const D = T((e, t) => {
   const s = F(), a = y(s.getIndicatorProps(), e);
   return /* @__PURE__ */ c.jsx(m.div, { ...a, ref: t });
@@ -46,25 +47,25 @@ const W = T((e, t) => {
   return /* @__PURE__ */ c.jsx(m.button, { ...o, ref: t });
 });
 W.displayName = "TabTrigger";
-var Fe = Te("tabs").parts("root", "list", "trigger", "content", "indicator"), R = Fe.build(), _e = (e) => e.ids?.root ?? `tabs:${e.id}`, C = (e) => e.ids?.list ?? `tabs:${e.id}:list`, _ = (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`, Ne = (e) => e.getById(C(e)), we = (e, t) => e.getById(_(e, t)), A = (e, t) => e.getById(b(e, t)), O = (e) => e.getById(M(e)), P = (e) => {
+var Fe = be("tabs").parts("root", "list", "trigger", "content", "indicator"), R = Fe.build(), _e = (e) => e.ids?.root ?? `tabs:${e.id}`, C = (e) => e.ids?.list ?? `tabs:${e.id}:list`, _ = (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`, Ne = (e) => e.getById(C(e)), we = (e, t) => e.getById(_(e, t)), I = (e, t) => e.getById(b(e, t)), O = (e) => e.getById(M(e)), P = (e) => {
   const s = `[role=tab][data-ownedby='${CSS.escape(C(e))}']:not([disabled])`;
-  return Ve(Ne(e), s);
-}, Se = (e) => Ae(P(e)), Le = (e) => Ee(P(e)), Oe = (e, t) => pe(P(e), b(e, t.value), t.loopFocus), je = (e, t) => be(P(e), b(e, t.value), t.loopFocus), H = (e) => ({
+  return Ce(Ne(e), s);
+}, Se = (e) => Ee(P(e)), Le = (e) => Ve(P(e)), Oe = (e, t) => fe(P(e), b(e, t.value), t.loopFocus), $e = (e, t) => ge(P(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 = Pe(P(e), b(e, t));
-  return K(H(s));
-}, K = (e) => ({
+}), je = (e, t) => {
+  const s = Re(P(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"), I = o("orientation") === "vertical", E = o("orientation") === "horizontal", w = o("composite");
+function Be(e, t) {
+  const { state: s, send: a, context: r, prop: o, scope: n } = e, l = o("translations"), d = s.matches("focused"), E = o("orientation") === "vertical", A = o("orientation") === "horizontal", w = o("composite");
   function S(i) {
     return {
       selected: r.get("value") === i.value,
@@ -82,8 +83,8 @@ function ke(e, t) {
       a({ type: "CLEAR_VALUE" });
     },
     setIndicatorRect(i) {
-      const l = b(n, i);
-      a({ type: "SET_INDICATOR_RECT", id: l });
+      const u = b(n, i);
+      a({ type: "SET_INDICATOR_RECT", id: u });
     },
     syncTabIndex() {
       a({ type: "SYNC_TAB_INDEX" });
@@ -96,14 +97,14 @@ function ke(e, t) {
     },
     focus() {
       const i = r.get("value");
-      i && A(n, i)?.focus();
+      i && I(n, i)?.focus();
     },
     getRootProps() {
       return t.element({
         ...R.root.attrs,
         id: _e(n),
         "data-orientation": o("orientation"),
-        "data-focus": f(p),
+        "data-focus": p(d),
         dir: o("dir")
       });
     },
@@ -113,24 +114,24 @@ function ke(e, t) {
         id: C(n),
         role: "tablist",
         dir: o("dir"),
-        "data-focus": f(p),
+        "data-focus": p(d),
         "aria-orientation": o("orientation"),
         "data-orientation": o("orientation"),
-        "aria-label": u?.listLabel,
+        "aria-label": l?.listLabel,
         onKeyDown(i) {
-          if (i.defaultPrevented || !he(i) || Re(i)) return;
-          const l = {
+          if (i.defaultPrevented || !me(i) || ye(i)) return;
+          const u = {
             ArrowDown() {
-              E || a({ type: "ARROW_NEXT", key: "ArrowDown" });
+              A || a({ type: "ARROW_NEXT", key: "ArrowDown" });
             },
             ArrowUp() {
-              E || a({ type: "ARROW_PREV", key: "ArrowUp" });
+              A || a({ type: "ARROW_PREV", key: "ArrowUp" });
             },
             ArrowLeft() {
-              I || a({ type: "ARROW_PREV", key: "ArrowLeft" });
+              E || a({ type: "ARROW_PREV", key: "ArrowLeft" });
             },
             ArrowRight() {
-              I || a({ type: "ARROW_NEXT", key: "ArrowRight" });
+              E || a({ type: "ARROW_NEXT", key: "ArrowRight" });
             },
             Home() {
               a({ type: "HOME" });
@@ -139,13 +140,13 @@ function ke(e, t) {
               a({ type: "END" });
             }
           };
-          let d = Ce(i, {
+          let g = he(i, {
             dir: o("dir"),
             orientation: o("orientation")
           });
-          const g = l[d];
-          if (g) {
-            i.preventDefault(), g(i);
+          const f = u[g];
+          if (f) {
+            i.preventDefault(), f(i);
             return;
           }
         }
@@ -153,53 +154,53 @@ function ke(e, t) {
     },
     getTriggerState: S,
     getTriggerProps(i) {
-      const { value: l, disabled: d } = i, g = S(i);
+      const { value: u, disabled: g } = i, f = S(i);
       return t.button({
         ...R.trigger.attrs,
         role: "tab",
         type: "button",
-        disabled: d,
+        disabled: g,
         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, l) : void 0,
+        "data-disabled": p(g),
+        "aria-disabled": g,
+        "data-value": u,
+        "aria-selected": f.selected,
+        "data-selected": p(f.selected),
+        "data-focus": p(f.focused),
+        "aria-controls": f.selected ? _(n, u) : void 0,
         "data-ownedby": C(n),
-        "data-ssr": f(r.get("ssr")),
-        id: b(n, l),
-        tabIndex: g.selected && w ? 0 : -1,
+        "data-ssr": p(r.get("ssr")),
+        id: b(n, u),
+        tabIndex: f.selected && w ? 0 : -1,
         onFocus() {
-          a({ type: "TAB_FOCUS", value: l });
+          a({ type: "TAB_FOCUS", value: u });
         },
         onBlur(h) {
           h.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
         },
         onClick(h) {
-          h.defaultPrevented || me(h) || d || (ye() && h.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
+          h.defaultPrevented || ve(h) || g || (Te() && h.currentTarget.focus(), a({ type: "TAB_CLICK", value: u }));
         }
       });
     },
     getContentProps(i) {
-      const { value: l } = i, d = r.get("value") === l;
+      const { value: u } = i, g = r.get("value") === u;
       return t.element({
         ...R.content.attrs,
         dir: o("dir"),
-        id: _(n, l),
+        id: _(n, u),
         tabIndex: w ? 0 : -1,
-        "aria-labelledby": b(n, l),
+        "aria-labelledby": b(n, u),
         role: "tabpanel",
         "data-ownedby": C(n),
-        "data-selected": f(d),
+        "data-selected": p(g),
         "data-orientation": o("orientation"),
-        hidden: !d
+        hidden: !g
       });
     },
     getIndicatorProps() {
-      const i = r.get("indicatorRect"), l = r.get("indicatorTransition");
+      const i = r.get("indicatorRect"), u = r.get("indicatorTransition");
       return t.element({
         id: M(n),
         ...R.indicator.attrs,
@@ -214,15 +215,15 @@ function ke(e, t) {
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: l ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: u ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
-          [E ? "left" : "top"]: E ? "var(--left)" : "var(--top)"
+          [A ? "left" : "top"]: A ? "var(--left)" : "var(--top)"
         }
       });
     }
   };
 }
-var { createMachine: $e } = ue(), De = $e({
+var { createMachine: ke } = ce(), De = ke({
   props({ props: e }) {
     return {
       dir: "ltr",
@@ -231,7 +232,7 @@ var { createMachine: $e } = ue(), De = $e({
       loopFocus: !0,
       composite: !0,
       navigate(t) {
-        ve(t.node);
+        pe(t.node);
       },
       defaultValue: null,
       ...e
@@ -402,7 +403,7 @@ var { createMachine: $e } = ue(), De = $e({
       focusPrevTab({ context: e, prop: t, scope: s, event: a }) {
         const r = a.value ?? e.get("focusedValue");
         if (!r) return;
-        const o = je(s, {
+        const o = $e(s, {
           value: r,
           loopFocus: t("loopFocus")
         });
@@ -416,7 +417,7 @@ var { createMachine: $e } = ue(), De = $e({
           if (!s) return;
           const a = we(t, s);
           if (!a) return;
-          Ie(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
+          Pe(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
         });
       },
       cleanupObserver({ refs: e }) {
@@ -433,7 +434,7 @@ var { createMachine: $e } = ue(), De = $e({
           e.set("indicatorTransition", !1);
           return;
         }
-        A(s, a) && (e.set("indicatorRect", Be(s, a)), fe(() => {
+        I(s, a) && (e.set("indicatorRect", je(s, a)), de(() => {
           e.set("indicatorTransition", !1);
         }));
       },
@@ -448,24 +449,24 @@ var { createMachine: $e } = ue(), De = $e({
           e.set("indicatorTransition", !1);
           return;
         }
-        const o = A(s, r), n = O(s);
+        const o = I(s, r), n = O(s);
         if (!o || !n) return;
-        const u = ge([o], {
-          measure(p) {
-            return H(p);
+        const l = ue([o], {
+          measure(d) {
+            return H(d);
           },
-          onEntry({ rects: p }) {
-            const [I] = p;
-            e.set("indicatorRect", K(I));
+          onEntry({ rects: d }) {
+            const [E] = d;
+            e.set("indicatorRect", X(E));
           }
         });
-        t.set("indicatorCleanup", u);
+        t.set("indicatorCleanup", l);
       },
       navigateIfNeeded({ context: e, prop: t, scope: s }) {
         const a = e.get("value");
         if (!a) return;
-        const r = A(s, a);
-        de(r) && t("navigate")?.({ value: a, node: r, href: r.href });
+        const r = I(s, a);
+        le(r) && t("navigate")?.({ value: a, node: r, href: r.href });
       }
     }
   }
@@ -490,15 +491,15 @@ N()([
 N()(["disabled", "value"]);
 N()(["value"]);
 const Ue = (e) => {
-  const t = ee(), { getRootNode: s } = re(), { dir: a } = ne(), r = {
+  const t = ee(), { getRootNode: s } = se(), { dir: a } = oe(), r = {
     id: t,
     dir: a,
     getRootNode: s,
     ...e
-  }, o = ie(De, r);
-  return ke(o, ce);
-}, X = T((e, t) => {
-  const [s, a] = j(e), [r, o] = x()(a, [
+  }, o = re(De, r);
+  return Be(o, ne);
+}, K = T((e, t) => {
+  const [s, a] = $(e), [r, o] = x()(a, [
     "activationMode",
     "composite",
     "defaultValue",
@@ -512,22 +513,22 @@ const Ue = (e) => {
     "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 }) }) });
+  ]), n = Ue(r), l = y(n.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(B, { value: n, children: /* @__PURE__ */ c.jsx(j, { value: s, children: /* @__PURE__ */ c.jsx(m.div, { ...l, ref: t }) }) });
 });
-X.displayName = "TabsRoot";
-const Y = T((e, t) => {
-  const [s, a] = j(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 }) }) });
+K.displayName = "TabsRoot";
+const q = T((e, t) => {
+  const [s, a] = $(e), [{ value: r }, o] = x()(a, ["value"]), n = y(r.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(B, { value: r, children: /* @__PURE__ */ c.jsx(j, { value: s, children: /* @__PURE__ */ c.jsx(m.div, { ...n, ref: t }) }) });
 });
-Y.displayName = "TabsRootProvider";
+q.displayName = "TabsRootProvider";
 const {
-  withProvider: q,
+  withProvider: Y,
   withContext: V
 } = J({ key: "tabs" });
-q(Y, "root", { forwardAsChild: !0 });
-const We = q(
-  X,
+Y(q, "root", { forwardAsChild: !0 });
+const We = Y(
+  K,
   "root",
   { forwardAsChild: !0 }
 ), Me = V(
@@ -535,12 +536,12 @@ const We = q(
   "trigger",
   { forwardAsChild: !0 }
 ), He = V(
-  $,
+  k,
   "content",
   { forwardAsChild: !0 }
 );
 V("div", "contentGroup");
-const Ke = V(
+const Xe = V(
   U,
   "list",
   { forwardAsChild: !0 }
@@ -550,62 +551,80 @@ V(
   "indicator",
   { forwardAsChild: !0 }
 );
-const Xe = {
+const Ke = {
   xs: "sm",
   sm: "md",
   md: "md",
   lg: "lg"
-}, Ye = {
+}, qe = {
   xs: "xs",
   sm: "xs",
   md: "sm",
   lg: "md"
-}, qe = ({
+}, 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(L, { className: "Tab__Icon", "data-testid": "kibble-tab-icon", name: e, size: o, variant: "default" }),
-  /* @__PURE__ */ c.jsx(G, { className: "Tab__Label", "data-testid": "kibble-tab-label", size: Ye[o], children: s }),
-  !!e && t === "right" && /* @__PURE__ */ c.jsx(L, { className: "Tab__Icon", "data-testid": "kibble-tab-icon", name: e, size: o }),
+  ["data-testid"]: n = "kibble-tab",
+  ...l
+}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": n, ...l, children: [
+  !!e && t === "left" && /* @__PURE__ */ c.jsx(
+    L,
+    {
+      className: "Tab__Icon",
+      "data-testid": `${n}-icon-left`,
+      name: e,
+      size: o,
+      variant: "default"
+    }
+  ),
+  /* @__PURE__ */ c.jsx(G, { className: "Tab__Label", "data-testid": `${n}-label`, size: qe[o], children: s }),
+  !!e && t === "right" && /* @__PURE__ */ c.jsx(L, { className: "Tab__Icon", "data-testid": `${n}-icon-right`, name: e, size: o }),
   r && /* @__PURE__ */ c.jsx(
     z,
     {
       className: "Tab__NotificationCounter",
-      "data-testid": "kibble-tab-notification-counter",
+      "data-testid": `${n}-notification-counter`,
       ...a,
-      size: Xe[o]
+      size: Ke[o]
     }
   )
-] }), rt = ({
+] }), nt = ({
   align: e = "start",
   onChange: t,
   size: s = "md",
   tabs: a,
-  tabsContents: r,
-  ...o
+  tabsContent: r,
+  ["data-testid"]: o = "kibble-tabs",
+  ...n
 }) => /* @__PURE__ */ c.jsxs(
   We,
   {
     className: "Tabs",
-    "data-testid": "kibble-tabs",
-    justify: e || o.justify,
+    "data-testid": o,
+    justify: e || n.justify,
     size: s,
-    onValueChange: ({ value: n }) => t?.(n),
-    ...o,
+    onValueChange: ({ value: l }) => t?.(l),
+    ...n,
     children: [
-      /* @__PURE__ */ c.jsx(Ke, { className: "Tabs__List", "data-testid": "kibble-tabs-list", children: a.map((n, u) => /* @__PURE__ */ c.jsx(qe, { ...n, size: s }, `tab-${u}`)) }),
-      !!r && r.map((n, u) => /* @__PURE__ */ c.jsx(He, { ...n }, `tabContent-${u}`))
+      /* @__PURE__ */ c.jsx(Xe, { className: "Tabs__List", "data-testid": `${o}-trigger-list`, children: a.map((l, d) => /* @__PURE__ */ c.jsx(Ye, { ...l, "data-testid": `${o}-trigger-${l.value}`, size: s }, `tab-${d}`)) }),
+      !!r && r.map((l, d) => /* @__PURE__ */ c.jsx(
+        He,
+        {
+          "data-testid": `${o}-content-${a[d].value}`,
+          ...l
+        },
+        `${o}-tabContent-${d}`
+      ))
     ]
   }
-), nt = ["xs", "sm", "md", "lg"], it = ["left", "right"];
+), it = ["xs", "sm", "md", "lg"], ct = ["left", "right"];
 export {
-  rt as T,
-  it as a,
-  nt as t
+  nt as T,
+  ct as a,
+  it as t
 };
-//# sourceMappingURL=tab.types-DCkus0y2.js.map
+//# sourceMappingURL=tab.types-DaJfFBvr.js.map