@televet/kibble-ui 5.0.25-beta.1 → 5.0.25-beta.11

package/dist/chunks/{tab.types-bJ04v7AW.js → tab.types-z0s-iVfr.js}

@@ -3,10 +3,10 @@ import { I as L } from "./icon.component-PV_nHBId.js";
 import { N as Y } from "./notificationCounter.component-6Q3q8jWj.js";
 import { W as G } from "./heading.component-CpSAN3cv.js";
 import { c as J } from "./create-slot-recipe-context-D_FXDJGp.js";
-import { useState as Q, useEffect as Z, forwardRef as m, useId as ee } from "react";
-import { a as te, b as x, d as y, e as ae, c as N, u as se, f as oe, g as re, n as ne } from "./use-locale-context-DmcfCmf9.js";
-import { u as ie, s as $, R as j } from "./render-strategy-DLvzMQD1.js";
-import { a6 as h, s as ce, aa as le, E as ue, b2 as de, r as T, aR as ge, aS as fe, a1 as pe, f as be, c as b, a3 as ve, z as Te, O as me, j as ye, l as he, b5 as Re, q as Ce, aD as Pe, _ as Ve, $ as Ee } from "./index-BcafYtXX.js";
+import { useState as Q, useEffect as Z, forwardRef as y, useId as ee } from "react";
+import { a as te, b as x, d as h, e as ae, c as N, u as se, f as oe, g as re, n as ne } from "./use-locale-context-DmcfCmf9.js";
+import { a6 as R, s as ie, aa as ce, E as le, b2 as ue, r as m, aR as de, aS as ge, a1 as fe, f as pe, c as v, a3 as be, z as ve, O as Te, j as me, l as ye, b5 as he, q as Re, aD as Ce, _ as Pe, $ as Ve } from "./index-BcafYtXX.js";
+import { u as Ee, s as j, R as $ } from "./render-strategy-DLvzMQD1.js";
 import { c as Ae, d as Ie } from "./index-DcmJgLUo.js";
 function xe(e, t) {
   const [s, a] = Q(e);
@@ -23,40 +23,40 @@ const [B, F] = te({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "<TabsProvider />"
-}), k = m((e, t) => {
-  const [s, a] = x()(e, ["value"]), r = F(), o = ie(), n = Ae({
+}), k = y((e, t) => {
+  const [s, a] = x()(e, ["value"]), r = F(), o = Ee(), n = Ae({
     ...o,
     present: xe(r.value === e.value, 0),
     immediate: !0
-  }), d = h(r.getContentProps(s), n.getPresenceProps(), a);
-  return /* @__PURE__ */ c.jsx(Ie, { value: n, children: n.unmounted ? null : /* @__PURE__ */ c.jsx(y.div, { ...d, ref: ae(n.ref, t) }) });
+  }), u = R(r.getContentProps(s), n.getPresenceProps(), a);
+  return /* @__PURE__ */ c.jsx(Ie, { value: n, children: n.unmounted ? null : /* @__PURE__ */ c.jsx(h.div, { ...u, ref: ae(n.ref, t) }) });
 });
 k.displayName = "TabContent";
-const D = m((e, t) => {
-  const s = F(), a = h(s.getIndicatorProps(), e);
-  return /* @__PURE__ */ c.jsx(y.div, { ...a, ref: t });
+const D = y((e, t) => {
+  const s = F(), a = R(s.getIndicatorProps(), e);
+  return /* @__PURE__ */ c.jsx(h.div, { ...a, ref: t });
 });
 D.displayName = "TabIndicator";
-const U = m((e, t) => {
-  const s = F(), a = h(s.getListProps(), e);
-  return /* @__PURE__ */ c.jsx(y.div, { ...a, ref: t });
+const U = y((e, t) => {
+  const s = F(), a = R(s.getListProps(), e);
+  return /* @__PURE__ */ c.jsx(h.div, { ...a, ref: t });
 });
 U.displayName = "TabList";
-const W = m((e, t) => {
-  const [s, a] = x()(e, ["disabled", "value"]), r = F(), o = h(r.getTriggerProps(s), a);
-  return /* @__PURE__ */ c.jsx(y.button, { ...o, ref: t });
+const W = y((e, t) => {
+  const [s, a] = x()(e, ["disabled", "value"]), r = F(), o = R(r.getTriggerProps(s), a);
+  return /* @__PURE__ */ c.jsx(h.button, { ...o, ref: t });
 });
 W.displayName = "TabTrigger";
-var Fe = be("tabs").parts("root", "list", "trigger", "content", "indicator"), C = Fe.build(), _e = (e) => e.ids?.root ?? `tabs:${e.id}`, P = (e) => e.ids?.list ?? `tabs:${e.id}:list`, _ = (e, t) => e.ids?.content ?? `tabs:${e.id}:content-${t}`, v = (e, t) => e.ids?.trigger ?? `tabs:${e.id}:trigger-${t}`, M = (e) => e.ids?.indicator ?? `tabs:${e.id}:indicator`, Ne = (e) => e.getById(P(e)), we = (e, t) => e.getById(_(e, t)), I = (e, t) => e.getById(v(e, t)), O = (e) => e.getById(M(e)), V = (e) => {
-  const s = `[role=tab][data-ownedby='${CSS.escape(P(e))}']:not([disabled])`;
-  return Ce(Ne(e), s);
-}, Se = (e) => Ee(V(e)), Le = (e) => Ve(V(e)), Oe = (e, t) => fe(V(e), v(e, t.value), t.loopFocus), $e = (e, t) => ge(V(e), v(e, t.value), t.loopFocus), X = (e) => ({
+var Fe = pe("tabs").parts("root", "list", "trigger", "content", "indicator"), P = Fe.build(), _e = (e) => e.ids?.root ?? `tabs:${e.id}`, V = (e) => e.ids?.list ?? `tabs:${e.id}:list`, _ = (e, t) => e.ids?.content ?? `tabs:${e.id}:content-${t}`, T = (e, t) => e.ids?.trigger ?? `tabs:${e.id}:trigger-${t}`, M = (e) => e.ids?.indicator ?? `tabs:${e.id}:indicator`, Ne = (e) => e.getById(V(e)), we = (e, t) => e.getById(_(e, t)), I = (e, t) => e.getById(T(e, t)), O = (e) => e.getById(M(e)), E = (e) => {
+  const s = `[role=tab][data-ownedby='${CSS.escape(V(e))}']:not([disabled])`;
+  return Re(Ne(e), s);
+}, Se = (e) => Ve(E(e)), Le = (e) => Pe(E(e)), Oe = (e, t) => ge(E(e), T(e, t.value), t.loopFocus), je = (e, t) => de(E(e), T(e, t.value), t.loopFocus), X = (e) => ({
   left: e?.offsetLeft ?? 0,
   top: e?.offsetTop ?? 0,
   width: e?.offsetWidth ?? 0,
   height: e?.offsetHeight ?? 0
-}), je = (e, t) => {
-  const s = Re(V(e), v(e, t));
+}), $e = (e, t) => {
+  const s = he(E(e), T(e, t));
   return H(X(s));
 }, H = (e) => ({
   width: `${e.width}px`,
@@ -65,7 +65,7 @@ var Fe = be("tabs").parts("root", "list", "trigger", "content", "indicator"), C
   top: `${e.top}px`
 });
 function Be(e, t) {
-  const { state: s, send: a, context: r, prop: o, scope: n } = e, d = o("translations"), u = s.matches("focused"), g = o("orientation") === "vertical", A = o("orientation") === "horizontal", w = o("composite");
+  const { state: s, send: a, context: r, prop: o, scope: n } = e, u = o("translations"), g = s.matches("focused"), d = o("orientation") === "vertical", f = o("orientation") === "horizontal", w = o("composite");
   function S(i) {
     return {
       selected: r.get("value") === i.value,
@@ -83,7 +83,7 @@ function Be(e, t) {
       a({ type: "CLEAR_VALUE" });
     },
     setIndicatorRect(i) {
-      const l = v(n, i);
+      const l = T(n, i);
       a({ type: "SET_INDICATOR_RECT", id: l });
     },
     syncTabIndex() {
@@ -101,37 +101,37 @@ function Be(e, t) {
     },
     getRootProps() {
       return t.element({
-        ...C.root.attrs,
+        ...P.root.attrs,
         id: _e(n),
         "data-orientation": o("orientation"),
-        "data-focus": b(u),
+        "data-focus": v(g),
         dir: o("dir")
       });
     },
     getListProps() {
       return t.element({
-        ...C.list.attrs,
-        id: P(n),
+        ...P.list.attrs,
+        id: V(n),
         role: "tablist",
         dir: o("dir"),
-        "data-focus": b(u),
+        "data-focus": v(g),
         "aria-orientation": o("orientation"),
         "data-orientation": o("orientation"),
-        "aria-label": d?.listLabel,
+        "aria-label": u?.listLabel,
         onKeyDown(i) {
-          if (i.defaultPrevented || !me(i) || ye(i)) return;
+          if (i.defaultPrevented || !Te(i) || me(i)) return;
           const l = {
             ArrowDown() {
-              A || a({ type: "ARROW_NEXT", key: "ArrowDown" });
+              f || a({ type: "ARROW_NEXT", key: "ArrowDown" });
             },
             ArrowUp() {
-              A || a({ type: "ARROW_PREV", key: "ArrowUp" });
+              f || a({ type: "ARROW_PREV", key: "ArrowUp" });
             },
             ArrowLeft() {
-              g || a({ type: "ARROW_PREV", key: "ArrowLeft" });
+              d || a({ type: "ARROW_PREV", key: "ArrowLeft" });
             },
             ArrowRight() {
-              g || a({ type: "ARROW_NEXT", key: "ArrowRight" });
+              d || a({ type: "ARROW_NEXT", key: "ArrowRight" });
             },
             Home() {
               a({ type: "HOME" });
@@ -140,13 +140,13 @@ function Be(e, t) {
               a({ type: "END" });
             }
           };
-          let f = he(i, {
+          let p = ye(i, {
             dir: o("dir"),
             orientation: o("orientation")
           });
-          const p = l[f];
-          if (p) {
-            i.preventDefault(), p(i);
+          const b = l[p];
+          if (b) {
+            i.preventDefault(), b(i);
             return;
           }
         }
@@ -154,56 +154,56 @@ function Be(e, t) {
     },
     getTriggerState: S,
     getTriggerProps(i) {
-      const { value: l, disabled: f } = i, p = S(i);
+      const { value: l, disabled: p } = i, b = S(i);
       return t.button({
-        ...C.trigger.attrs,
+        ...P.trigger.attrs,
         role: "tab",
         type: "button",
-        disabled: f,
+        disabled: p,
         dir: o("dir"),
         "data-orientation": o("orientation"),
-        "data-disabled": b(f),
-        "aria-disabled": f,
+        "data-disabled": v(p),
+        "aria-disabled": p,
         "data-value": l,
-        "aria-selected": p.selected,
-        "data-selected": b(p.selected),
-        "data-focus": b(p.focused),
-        "aria-controls": p.selected ? _(n, l) : void 0,
-        "data-ownedby": P(n),
-        "data-ssr": b(r.get("ssr")),
-        id: v(n, l),
-        tabIndex: p.selected && w ? 0 : -1,
+        "aria-selected": b.selected,
+        "data-selected": v(b.selected),
+        "data-focus": v(b.focused),
+        "aria-controls": b.selected ? _(n, l) : void 0,
+        "data-ownedby": V(n),
+        "data-ssr": v(r.get("ssr")),
+        id: T(n, l),
+        tabIndex: b.selected && w ? 0 : -1,
         onFocus() {
           a({ type: "TAB_FOCUS", value: l });
         },
-        onBlur(R) {
-          R.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
+        onBlur(C) {
+          C.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
         },
-        onClick(R) {
-          R.defaultPrevented || ve(R) || f || (Te() && R.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
+        onClick(C) {
+          C.defaultPrevented || be(C) || p || (ve() && C.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
         }
       });
     },
     getContentProps(i) {
-      const { value: l } = i, f = r.get("value") === l;
+      const { value: l } = i, p = r.get("value") === l;
       return t.element({
-        ...C.content.attrs,
+        ...P.content.attrs,
         dir: o("dir"),
         id: _(n, l),
         tabIndex: w ? 0 : -1,
-        "aria-labelledby": v(n, l),
+        "aria-labelledby": T(n, l),
         role: "tabpanel",
-        "data-ownedby": P(n),
-        "data-selected": b(f),
+        "data-ownedby": V(n),
+        "data-selected": v(p),
         "data-orientation": o("orientation"),
-        hidden: !f
+        hidden: !p
       });
     },
     getIndicatorProps() {
       const i = r.get("indicatorRect"), l = r.get("indicatorTransition");
       return t.element({
         id: M(n),
-        ...C.indicator.attrs,
+        ...P.indicator.attrs,
         dir: o("dir"),
         "data-orientation": o("orientation"),
         style: {
@@ -217,13 +217,13 @@ function Be(e, t) {
           transitionProperty: "var(--transition-property)",
           transitionDuration: l ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
-          [A ? "left" : "top"]: A ? "var(--left)" : "var(--top)"
+          [f ? "left" : "top"]: f ? "var(--left)" : "var(--top)"
         }
       });
     }
   };
 }
-var { createMachine: ke } = ce(), De = ke({
+var { createMachine: ke } = ie(), De = ke({
   props({ props: e }) {
     return {
       dir: "ltr",
@@ -232,7 +232,7 @@ var { createMachine: ke } = ce(), De = ke({
       loopFocus: !0,
       composite: !0,
       navigate(t) {
-        pe(t.node);
+        fe(t.node);
       },
       defaultValue: null,
       ...e
@@ -357,7 +357,7 @@ var { createMachine: ke } = ce(), De = ke({
     },
     actions: {
       selectFocusedTab({ context: e, prop: t }) {
-        T(() => {
+        m(() => {
           const s = e.get("focusedValue");
           if (!s) return;
           const r = t("deselectable") && e.get("value") === s ? null : s;
@@ -380,12 +380,12 @@ var { createMachine: ke } = ce(), De = ke({
         e.set("value", null);
       },
       focusFirstTab({ scope: e }) {
-        T(() => {
+        m(() => {
           Se(e)?.focus();
         });
       },
       focusLastTab({ scope: e }) {
-        T(() => {
+        m(() => {
           Le(e)?.focus();
         });
       },
@@ -396,28 +396,28 @@ var { createMachine: ke } = ce(), De = ke({
           value: r,
           loopFocus: t("loopFocus")
         });
-        T(() => {
+        m(() => {
           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 = $e(s, {
+        const o = je(s, {
           value: r,
           loopFocus: t("loopFocus")
         });
-        T(() => {
+        m(() => {
           t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
         });
       },
       syncTabIndex({ context: e, scope: t }) {
-        T(() => {
+        m(() => {
           const s = e.get("value");
           if (!s) return;
           const a = we(t, s);
           if (!a) return;
-          Pe(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
+          Ce(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
         });
       },
       cleanupObserver({ refs: e }) {
@@ -434,7 +434,7 @@ var { createMachine: ke } = ce(), De = ke({
           e.set("indicatorTransition", !1);
           return;
         }
-        I(s, a) && (e.set("indicatorRect", je(s, a)), de(() => {
+        I(s, a) && (e.set("indicatorRect", $e(s, a)), ue(() => {
           e.set("indicatorTransition", !1);
         }));
       },
@@ -451,22 +451,22 @@ var { createMachine: ke } = ce(), De = ke({
         }
         const o = I(s, r), n = O(s);
         if (!o || !n) return;
-        const d = ue([o], {
-          measure(u) {
-            return X(u);
+        const u = le([o], {
+          measure(g) {
+            return X(g);
           },
-          onEntry({ rects: u }) {
-            const [g] = u;
-            e.set("indicatorRect", H(g));
+          onEntry({ rects: g }) {
+            const [d] = g;
+            e.set("indicatorRect", H(d));
           }
         });
-        t.set("indicatorCleanup", d);
+        t.set("indicatorCleanup", u);
       },
       navigateIfNeeded({ context: e, prop: t, scope: s }) {
         const a = e.get("value");
         if (!a) return;
         const r = I(s, a);
-        le(r) && t("navigate")?.({ value: a, node: r, href: r.href });
+        ce(r) && t("navigate")?.({ value: a, node: r, href: r.href });
       }
     }
   }
@@ -498,8 +498,8 @@ const Ue = (e) => {
     ...e
   }, o = re(De, r);
   return Be(o, ne);
-}, K = m((e, t) => {
-  const [s, a] = $(e), [r, o] = x()(a, [
+}, K = y((e, t) => {
+  const [s, a] = j(e), [r, o] = x()(a, [
     "activationMode",
     "composite",
     "defaultValue",
@@ -513,40 +513,40 @@ const Ue = (e) => {
     "orientation",
     "translations",
     "value"
-  ]), n = Ue(r), d = h(n.getRootProps(), o);
-  return /* @__PURE__ */ c.jsx(B, { value: n, children: /* @__PURE__ */ c.jsx(j, { value: s, children: /* @__PURE__ */ c.jsx(y.div, { ...d, ref: t }) }) });
+  ]), n = Ue(r), u = R(n.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(B, { value: n, children: /* @__PURE__ */ c.jsx($, { value: s, children: /* @__PURE__ */ c.jsx(h.div, { ...u, ref: t }) }) });
 });
 K.displayName = "TabsRoot";
-const q = m((e, t) => {
-  const [s, a] = $(e), [{ value: r }, o] = x()(a, ["value"]), n = h(r.getRootProps(), o);
-  return /* @__PURE__ */ c.jsx(B, { value: r, children: /* @__PURE__ */ c.jsx(j, { value: s, children: /* @__PURE__ */ c.jsx(y.div, { ...n, ref: t }) }) });
+const q = y((e, t) => {
+  const [s, a] = j(e), [{ value: r }, o] = x()(a, ["value"]), n = R(r.getRootProps(), o);
+  return /* @__PURE__ */ c.jsx(B, { value: r, children: /* @__PURE__ */ c.jsx($, { value: s, children: /* @__PURE__ */ c.jsx(h.div, { ...n, ref: t }) }) });
 });
 q.displayName = "TabsRootProvider";
 const {
   withProvider: z,
-  withContext: E
+  withContext: A
 } = J({ key: "tabs" });
 z(q, "root", { forwardAsChild: !0 });
 const We = z(
   K,
   "root",
   { forwardAsChild: !0 }
-), Me = E(
+), Me = A(
   W,
   "trigger",
   { forwardAsChild: !0 }
-), Xe = E(
+), Xe = A(
   k,
   "content",
   { forwardAsChild: !0 }
 );
-E("div", "contentGroup");
-const He = E(
+A("div", "contentGroup");
+const He = A(
   U,
   "list",
   { forwardAsChild: !0 }
 );
-E(
+A(
   D,
   "indicator",
   { forwardAsChild: !0 }
@@ -569,8 +569,8 @@ const Ke = {
   showNotificationCounter: r,
   size: o = "md",
   ["data-testid"]: n = "kibble-tab",
-  ...d
-}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": n, ...d, children: [
+  ...u
+}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": n, ...u, children: [
   !!e && t === "left" && /* @__PURE__ */ c.jsx(
     L,
     {
@@ -600,42 +600,55 @@ const Ke = {
   tabs: r,
   tabsContent: o,
   ["data-testid"]: n = "kibble-tabs",
-  ...d
-}) => /* @__PURE__ */ c.jsxs(
-  We,
-  {
-    className: "Tabs",
-    "data-testid": n,
-    justify: e || d.justify,
-    size: a,
-    onValueChange: ({ value: u }) => t?.(u),
-    ...d,
-    children: [
-      /* @__PURE__ */ c.jsx(
-        He,
-        {
-          className: "Tabs__List",
-          "data-testid": `${n}-trigger-list`,
-          ...s && {
-            css: { overflowX: "auto", flexWrap: "nowrap", scrollbarWidth: "none" }
+  ...u
+}) => {
+  console.log("frank-11");
+  const g = /* @__PURE__ */ c.jsx(He, { className: "Tabs__List", "data-testid": `${n}-trigger-list`, children: r.map((d, f) => /* @__PURE__ */ c.jsx(
+    ze,
+    {
+      ...d,
+      "data-testid": `${n}-trigger-${d.value}`,
+      size: a,
+      ...s && { style: { flexShrink: 0 } }
+    },
+    `tab-${f}`
+  )) });
+  return /* @__PURE__ */ c.jsxs(
+    We,
+    {
+      className: "Tabs",
+      "data-testid": n,
+      justify: e || u.justify,
+      size: a,
+      onValueChange: ({ value: d }) => t?.(d),
+      ...u,
+      children: [
+        s ? /* @__PURE__ */ c.jsx(
+          "div",
+          {
+            style: {
+              maxWidth: "100%",
+              overflowX: "auto",
+              scrollbarWidth: "none"
+            },
+            children: g
+          }
+        ) : g,
+        !!o && o.map((d, f) => /* @__PURE__ */ c.jsx(
+          Xe,
+          {
+            "data-testid": `${n}-content-${r[f].value}`,
+            ...d
           },
-          children: r.map((u, g) => /* @__PURE__ */ c.jsx(ze, { ...u, "data-testid": `${n}-trigger-${u.value}`, size: a }, `tab-${g}`))
-        }
-      ),
-      !!o && o.map((u, g) => /* @__PURE__ */ c.jsx(
-        Xe,
-        {
-          "data-testid": `${n}-content-${r[g].value}`,
-          ...u
-        },
-        `${n}-tabContent-${g}`
-      ))
-    ]
-  }
-), it = ["xs", "sm", "md", "lg"], ct = ["left", "right"];
+          `${n}-tabContent-${f}`
+        ))
+      ]
+    }
+  );
+}, it = ["xs", "sm", "md", "lg"], ct = ["left", "right"];
 export {
   nt as T,
   ct as a,
   it as t
 };
-//# sourceMappingURL=tab.types-bJ04v7AW.js.map
+//# sourceMappingURL=tab.types-z0s-iVfr.js.map