@televet/kibble-ui 5.0.25-beta.8 → 5.0.25

package/dist/chunks/{tab.types-CinNGFsi.js → tab.types-JAJ5Xxff.js}

@@ -1,14 +1,15 @@
-import { j as l } from "./jsx-runtime-C5mzlN2N.js";
+import { j as c } from "./jsx-runtime-C5mzlN2N.js";
 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 _, 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 le, aa as ce, E as ue, b2 as de, r as T, aR as ge, aS as fe, a1 as pe, f as ve, c as v, a3 as be, 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) {
+import { B as xe } from "./index-9BerxEcw.js";
+function Fe(e, t) {
   const [s, a] = Q(e);
   return Z(() => {
     const r = setTimeout(() => {
@@ -19,44 +20,44 @@ function xe(e, t) {
     };
   }, [e, t]), s;
 }
-const [B, w] = te({
+const [B, F] = te({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "<TabsProvider />"
-}), k = m((e, t) => {
-  const [s, a] = x()(e, ["value"]), r = w(), 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),
+    present: Fe(r.value === e.value, 0),
     immediate: !0
-  }), u = h(r.getContentProps(s), n.getPresenceProps(), a);
-  return /* @__PURE__ */ l.jsx(Ie, { value: n, children: n.unmounted ? null : /* @__PURE__ */ l.jsx(y.div, { ...u, 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 W = m((e, t) => {
-  const s = w(), a = h(s.getIndicatorProps(), e);
-  return /* @__PURE__ */ l.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 });
 });
-W.displayName = "TabIndicator";
-const D = m((e, t) => {
-  const s = w(), a = h(s.getListProps(), e);
-  return /* @__PURE__ */ l.jsx(y.div, { ...a, ref: t });
+D.displayName = "TabIndicator";
+const U = y((e, t) => {
+  const s = F(), a = R(s.getListProps(), e);
+  return /* @__PURE__ */ c.jsx(h.div, { ...a, ref: t });
 });
-D.displayName = "TabList";
-const U = m((e, t) => {
-  const [s, a] = x()(e, ["disabled", "value"]), r = w(), o = h(r.getTriggerProps(s), a);
-  return /* @__PURE__ */ l.jsx(y.button, { ...o, ref: t });
+U.displayName = "TabList";
+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 });
 });
-U.displayName = "TabTrigger";
-var we = ve("tabs").parts("root", "list", "trigger", "content", "indicator"), C = we.build(), Fe = (e) => e.ids?.root ?? `tabs:${e.id}`, P = (e) => e.ids?.list ?? `tabs:${e.id}:list`, F = (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(P(e)), Ne = (e, t) => e.getById(F(e, t)), I = (e, t) => e.getById(b(e, t)), O = (e) => e.getById(M(e)), V = (e) => {
-  const s = `[role=tab][data-ownedby='${CSS.escape(P(e))}']:not([disabled])`;
-  return Ce(_e(e), s);
-}, Se = (e) => Ee(V(e)), Le = (e) => Ve(V(e)), Oe = (e, t) => fe(V(e), b(e, t.value), t.loopFocus), $e = (e, t) => ge(V(e), b(e, t.value), t.loopFocus), X = (e) => ({
+W.displayName = "TabTrigger";
+var _e = pe("tabs").parts("root", "list", "trigger", "content", "indicator"), P = _e.build(), Ne = (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`, we = (e) => e.getById(V(e)), Se = (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(we(e), s);
+}, Le = (e) => Ve(E(e)), Oe = (e) => Pe(E(e)), je = (e, t) => ge(E(e), T(e, t.value), t.loopFocus), $e = (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), b(e, t));
+}), Be = (e, t) => {
+  const s = he(E(e), T(e, t));
   return H(X(s));
 }, H = (e) => ({
   width: `${e.width}px`,
@@ -64,8 +65,8 @@ var we = ve("tabs").parts("root", "list", "trigger", "content", "indicator"), C
   left: `${e.left}px`,
   top: `${e.top}px`
 });
-function Be(e, t) {
-  const { state: s, send: a, context: r, prop: o, scope: n } = e, u = o("translations"), d = s.matches("focused"), g = o("orientation") === "vertical", A = o("orientation") === "horizontal", N = o("composite");
+function ke(e, t) {
+  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,8 +84,8 @@ function Be(e, t) {
       a({ type: "CLEAR_VALUE" });
     },
     setIndicatorRect(i) {
-      const c = b(n, i);
-      a({ type: "SET_INDICATOR_RECT", id: c });
+      const l = T(n, i);
+      a({ type: "SET_INDICATOR_RECT", id: l });
     },
     syncTabIndex() {
       a({ type: "SYNC_TAB_INDEX" });
@@ -101,37 +102,37 @@ function Be(e, t) {
     },
     getRootProps() {
       return t.element({
-        ...C.root.attrs,
-        id: Fe(n),
+        ...P.root.attrs,
+        id: Ne(n),
         "data-orientation": o("orientation"),
-        "data-focus": v(d),
+        "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": v(d),
+        "data-focus": v(g),
         "aria-orientation": o("orientation"),
         "data-orientation": o("orientation"),
         "aria-label": u?.listLabel,
         onKeyDown(i) {
-          if (i.defaultPrevented || !me(i) || ye(i)) return;
-          const c = {
+          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 +141,13 @@ function Be(e, t) {
               a({ type: "END" });
             }
           };
-          let f = he(i, {
+          let p = ye(i, {
             dir: o("dir"),
             orientation: o("orientation")
           });
-          const p = c[f];
-          if (p) {
-            i.preventDefault(), p(i);
+          const b = l[p];
+          if (b) {
+            i.preventDefault(), b(i);
             return;
           }
         }
@@ -154,56 +155,56 @@ function Be(e, t) {
     },
     getTriggerState: S,
     getTriggerProps(i) {
-      const { value: c, 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": v(f),
-        "aria-disabled": f,
-        "data-value": c,
-        "aria-selected": p.selected,
-        "data-selected": v(p.selected),
-        "data-focus": v(p.focused),
-        "aria-controls": p.selected ? F(n, c) : void 0,
-        "data-ownedby": P(n),
+        "data-disabled": v(p),
+        "aria-disabled": p,
+        "data-value": l,
+        "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: b(n, c),
-        tabIndex: p.selected && N ? 0 : -1,
+        id: T(n, l),
+        tabIndex: b.selected && w ? 0 : -1,
         onFocus() {
-          a({ type: "TAB_FOCUS", value: c });
+          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 || be(R) || f || (Te() && R.currentTarget.focus(), a({ type: "TAB_CLICK", value: c }));
+        onClick(C) {
+          C.defaultPrevented || be(C) || p || (ve() && C.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
         }
       });
     },
     getContentProps(i) {
-      const { value: c } = i, f = r.get("value") === c;
+      const { value: l } = i, p = r.get("value") === l;
       return t.element({
-        ...C.content.attrs,
+        ...P.content.attrs,
         dir: o("dir"),
-        id: F(n, c),
-        tabIndex: N ? 0 : -1,
-        "aria-labelledby": b(n, c),
+        id: _(n, l),
+        tabIndex: w ? 0 : -1,
+        "aria-labelledby": T(n, l),
         role: "tabpanel",
-        "data-ownedby": P(n),
-        "data-selected": v(f),
+        "data-ownedby": V(n),
+        "data-selected": v(p),
         "data-orientation": o("orientation"),
-        hidden: !f
+        hidden: !p
       });
     },
     getIndicatorProps() {
-      const i = r.get("indicatorRect"), c = r.get("indicatorTransition");
+      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: {
@@ -215,15 +216,15 @@ function Be(e, t) {
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: c ? "var(--transition-duration, 150ms)" : "0ms",
+          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 } = le(), We = ke({
+var { createMachine: De } = ie(), Ue = De({
   props({ props: e }) {
     return {
       dir: "ltr",
@@ -232,7 +233,7 @@ var { createMachine: ke } = le(), We = ke({
       loopFocus: !0,
       composite: !0,
       navigate(t) {
-        pe(t.node);
+        fe(t.node);
       },
       defaultValue: null,
       ...e
@@ -357,7 +358,7 @@ var { createMachine: ke } = le(), We = 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,23 +381,23 @@ var { createMachine: ke } = le(), We = ke({
         e.set("value", null);
       },
       focusFirstTab({ scope: e }) {
-        T(() => {
-          Se(e)?.focus();
+        m(() => {
+          Le(e)?.focus();
         });
       },
       focusLastTab({ scope: e }) {
-        T(() => {
-          Le(e)?.focus();
+        m(() => {
+          Oe(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, {
+        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);
         });
       },
@@ -407,17 +408,17 @@ var { createMachine: ke } = le(), We = ke({
           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 = Ne(t, s);
+          const a = Se(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 +435,7 @@ var { createMachine: ke } = le(), We = ke({
           e.set("indicatorTransition", !1);
           return;
         }
-        I(s, a) && (e.set("indicatorRect", je(s, a)), de(() => {
+        I(s, a) && (e.set("indicatorRect", Be(s, a)), ue(() => {
           e.set("indicatorTransition", !1);
         }));
       },
@@ -451,13 +452,13 @@ var { createMachine: ke } = le(), We = ke({
         }
         const o = I(s, r), n = O(s);
         if (!o || !n) return;
-        const u = ue([o], {
-          measure(d) {
-            return X(d);
+        const u = le([o], {
+          measure(g) {
+            return X(g);
           },
-          onEntry({ rects: d }) {
-            const [g] = d;
-            e.set("indicatorRect", H(g));
+          onEntry({ rects: g }) {
+            const [d] = g;
+            e.set("indicatorRect", H(d));
           }
         });
         t.set("indicatorCleanup", u);
@@ -471,7 +472,7 @@ var { createMachine: ke } = le(), We = ke({
     }
   }
 });
-_()([
+N()([
   "activationMode",
   "composite",
   "deselectable",
@@ -488,18 +489,18 @@ _()([
   "value",
   "defaultValue"
 ]);
-_()(["disabled", "value"]);
-_()(["value"]);
-const De = (e) => {
+N()(["disabled", "value"]);
+N()(["value"]);
+const We = (e) => {
   const t = ee(), { getRootNode: s } = se(), { dir: a } = oe(), r = {
     id: t,
     dir: a,
     getRootNode: s,
     ...e
-  }, o = re(We, r);
-  return Be(o, ne);
-}, K = m((e, t) => {
-  const [s, a] = $(e), [r, o] = x()(a, [
+  }, o = re(Ue, r);
+  return ke(o, ne);
+}, K = y((e, t) => {
+  const [s, a] = j(e), [r, o] = x()(a, [
     "activationMode",
     "composite",
     "defaultValue",
@@ -513,55 +514,55 @@ const De = (e) => {
     "orientation",
     "translations",
     "value"
-  ]), n = De(r), u = h(n.getRootProps(), o);
-  return /* @__PURE__ */ l.jsx(B, { value: n, children: /* @__PURE__ */ l.jsx(j, { value: s, children: /* @__PURE__ */ l.jsx(y.div, { ...u, ref: t }) }) });
+  ]), n = We(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__ */ l.jsx(B, { value: r, children: /* @__PURE__ */ l.jsx(j, { value: s, children: /* @__PURE__ */ l.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 Ue = z(
+const Me = z(
   K,
   "root",
   { forwardAsChild: !0 }
-), Me = E(
-  U,
+), Xe = A(
+  W,
   "trigger",
   { forwardAsChild: !0 }
-), Xe = E(
+), He = A(
   k,
   "content",
   { forwardAsChild: !0 }
 );
-E("div", "contentGroup");
-const He = E(
-  D,
+A("div", "contentGroup");
+const Ke = A(
+  U,
   "list",
   { forwardAsChild: !0 }
 );
-E(
-  W,
+A(
+  D,
   "indicator",
   { forwardAsChild: !0 }
 );
-const Ke = {
+const qe = {
   xs: "sm",
   sm: "md",
   md: "md",
   lg: "lg"
-}, qe = {
+}, ze = {
   xs: "xs",
   sm: "xs",
   md: "sm",
   lg: "md"
-}, ze = ({
+}, Ye = ({
   iconName: e,
   iconPosition: t = "left",
   label: s,
@@ -570,8 +571,8 @@ const Ke = {
   size: o = "md",
   ["data-testid"]: n = "kibble-tab",
   ...u
-}) => /* @__PURE__ */ l.jsxs(Me, { className: "Tab", "data-testid": n, ...u, children: [
-  !!e && t === "left" && /* @__PURE__ */ l.jsx(
+}) => /* @__PURE__ */ c.jsxs(Xe, { className: "Tab", "data-testid": n, ...u, children: [
+  !!e && t === "left" && /* @__PURE__ */ c.jsx(
     L,
     {
       className: "Tab__Icon",
@@ -581,18 +582,18 @@ const Ke = {
       variant: "default"
     }
   ),
-  /* @__PURE__ */ l.jsx(G, { as: "span", className: "Tab__Label", "data-testid": `${n}-label`, size: qe[o], children: s }),
-  !!e && t === "right" && /* @__PURE__ */ l.jsx(L, { className: "Tab__Icon", "data-testid": `${n}-icon-right`, name: e, size: o }),
-  r && /* @__PURE__ */ l.jsx(
+  /* @__PURE__ */ c.jsx(G, { as: "span", className: "Tab__Label", "data-testid": `${n}-label`, size: ze[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(
     Y,
     {
       className: "Tab__NotificationCounter",
       "data-testid": `${n}-notification-counter`,
       ...a,
-      size: Ke[o]
+      size: qe[o]
     }
   )
-] }), nt = ({
+] }), ct = ({
   align: e = "start",
   onChange: t,
   scrollable: s = !1,
@@ -601,58 +602,43 @@ const Ke = {
   tabsContent: o,
   ["data-testid"]: n = "kibble-tabs",
   ...u
-}) => (console.log("frank - 2"), /* @__PURE__ */ l.jsxs(
-  Ue,
-  {
-    className: "Tabs",
-    "data-testid": n,
-    justify: e || u.justify,
-    size: a,
-    onValueChange: ({ value: d }) => t?.(d),
-    ...u,
-    ...s && { style: { ...u.style, width: "100%", minWidth: 0, overflow: "hidden" } },
-    children: [
-      /* @__PURE__ */ l.jsx(
-        He,
-        {
-          className: "Tabs__List",
-          "data-testid": `${n}-trigger-list`,
-          ...s && {
-            style: {
-              display: "flex",
-              width: "100%",
-              minWidth: 0,
-              overflowX: "auto",
-              flexWrap: "nowrap",
-              scrollbarWidth: "none"
-            }
+}) => {
+  const g = /* @__PURE__ */ c.jsx(Ke, { className: "Tabs__List", "data-testid": `${n}-trigger-list`, children: r.map((d, f) => /* @__PURE__ */ c.jsx(
+    Ye,
+    {
+      ...d,
+      "data-testid": `${n}-trigger-${d.value}`,
+      size: a,
+      ...s && { style: { flexShrink: 0 } }
+    },
+    `tab-${f}`
+  )) });
+  return /* @__PURE__ */ c.jsxs(
+    Me,
+    {
+      className: "Tabs",
+      "data-testid": n,
+      justify: e || u.justify,
+      size: a,
+      onValueChange: ({ value: d }) => t?.(d),
+      ...u,
+      children: [
+        s ? /* @__PURE__ */ c.jsx(xe, { overflowX: "auto", scrollbarWidth: "none", children: g }) : g,
+        !!o && o.map((d, f) => /* @__PURE__ */ c.jsx(
+          He,
+          {
+            "data-testid": `${n}-content-${r[f].value}`,
+            ...d
           },
-          children: r.map((d, g) => /* @__PURE__ */ l.jsx(
-            ze,
-            {
-              ...d,
-              "data-testid": `${n}-trigger-${d.value}`,
-              size: a,
-              ...s && { style: { flexShrink: 0 } }
-            },
-            `tab-${g}`
-          ))
-        }
-      ),
-      !!o && o.map((d, g) => /* @__PURE__ */ l.jsx(
-        Xe,
-        {
-          "data-testid": `${n}-content-${r[g].value}`,
-          ...d
-        },
-        `${n}-tabContent-${g}`
-      ))
-    ]
-  }
-)), it = ["xs", "sm", "md", "lg"], lt = ["left", "right"];
+          `${n}-tabContent-${f}`
+        ))
+      ]
+    }
+  );
+}, lt = ["xs", "sm", "md", "lg"], ut = ["left", "right"];
 export {
-  nt as T,
-  lt as a,
-  it as t
+  ct as T,
+  ut as a,
+  lt as t
 };
-//# sourceMappingURL=tab.types-CinNGFsi.js.map
+//# sourceMappingURL=tab.types-JAJ5Xxff.js.map