@televet/kibble-ui 5.0.24 → 5.0.25-beta.0

package/dist/chunks/{tab.types-BiDpSKGC.js → tab.types-9F6GuNAA.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 T, useId as ee } from "react";
-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-DmcfCmf9.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 y, s as ce, aa as le, E as ue, b2 as de, r as v, aR as ge, aS as fe, a1 as pe, f as be, c as p, 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 { 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 { c as Ae, d as Ie } from "./index-DcmJgLUo.js";
 function xe(e, t) {
   const [s, a] = Q(e);
@@ -23,49 +23,49 @@ const [B, F] = te({
   name: "TabsContext",
   hookName: "useTabsContext",
   providerName: "<TabsProvider />"
-}), k = T((e, t) => {
+}), k = m((e, t) => {
   const [s, a] = x()(e, ["value"]), r = F(), o = ie(), n = Ae({
     ...o,
     present: xe(r.value === e.value, 0),
     immediate: !0
-  }), 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) }) });
+  }), 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) }) });
 });
 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 });
+const D = m((e, t) => {
+  const s = F(), a = h(s.getIndicatorProps(), e);
+  return /* @__PURE__ */ c.jsx(y.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 });
+const U = m((e, t) => {
+  const s = F(), a = h(s.getListProps(), e);
+  return /* @__PURE__ */ c.jsx(y.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 });
+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 });
 });
 W.displayName = "TabTrigger";
-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])`;
+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(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) => ({
+}, 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) => ({
   left: e?.offsetLeft ?? 0,
   top: e?.offsetTop ?? 0,
   width: e?.offsetWidth ?? 0,
   height: e?.offsetHeight ?? 0
 }), je = (e, t) => {
-  const s = Re(P(e), b(e, t));
-  return X(H(s));
-}, X = (e) => ({
+  const s = Re(V(e), v(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 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");
+  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");
   function S(i) {
     return {
       selected: r.get("value") === i.value,
@@ -83,8 +83,8 @@ function Be(e, t) {
       a({ type: "CLEAR_VALUE" });
     },
     setIndicatorRect(i) {
-      const u = b(n, i);
-      a({ type: "SET_INDICATOR_RECT", id: u });
+      const l = v(n, i);
+      a({ type: "SET_INDICATOR_RECT", id: l });
     },
     syncTabIndex() {
       a({ type: "SYNC_TAB_INDEX" });
@@ -101,26 +101,26 @@ function Be(e, t) {
     },
     getRootProps() {
       return t.element({
-        ...R.root.attrs,
+        ...C.root.attrs,
         id: _e(n),
         "data-orientation": o("orientation"),
-        "data-focus": p(d),
+        "data-focus": b(u),
         dir: o("dir")
       });
     },
     getListProps() {
       return t.element({
-        ...R.list.attrs,
-        id: C(n),
+        ...C.list.attrs,
+        id: P(n),
         role: "tablist",
         dir: o("dir"),
-        "data-focus": p(d),
+        "data-focus": b(u),
         "aria-orientation": o("orientation"),
         "data-orientation": o("orientation"),
-        "aria-label": l?.listLabel,
+        "aria-label": d?.listLabel,
         onKeyDown(i) {
           if (i.defaultPrevented || !me(i) || ye(i)) return;
-          const u = {
+          const l = {
             ArrowDown() {
               A || a({ type: "ARROW_NEXT", key: "ArrowDown" });
             },
@@ -128,10 +128,10 @@ function Be(e, t) {
               A || a({ type: "ARROW_PREV", key: "ArrowUp" });
             },
             ArrowLeft() {
-              E || a({ type: "ARROW_PREV", key: "ArrowLeft" });
+              g || a({ type: "ARROW_PREV", key: "ArrowLeft" });
             },
             ArrowRight() {
-              E || a({ type: "ARROW_NEXT", key: "ArrowRight" });
+              g || a({ type: "ARROW_NEXT", key: "ArrowRight" });
             },
             Home() {
               a({ type: "HOME" });
@@ -140,13 +140,13 @@ function Be(e, t) {
               a({ type: "END" });
             }
           };
-          let g = he(i, {
+          let f = he(i, {
             dir: o("dir"),
             orientation: o("orientation")
           });
-          const f = u[g];
-          if (f) {
-            i.preventDefault(), f(i);
+          const p = l[f];
+          if (p) {
+            i.preventDefault(), p(i);
             return;
           }
         }
@@ -154,56 +154,56 @@ function Be(e, t) {
     },
     getTriggerState: S,
     getTriggerProps(i) {
-      const { value: u, disabled: g } = i, f = S(i);
+      const { value: l, disabled: f } = i, p = S(i);
       return t.button({
-        ...R.trigger.attrs,
+        ...C.trigger.attrs,
         role: "tab",
         type: "button",
-        disabled: g,
+        disabled: f,
         dir: o("dir"),
         "data-orientation": o("orientation"),
-        "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": p(r.get("ssr")),
-        id: b(n, u),
-        tabIndex: f.selected && w ? 0 : -1,
+        "data-disabled": b(f),
+        "aria-disabled": f,
+        "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,
         onFocus() {
-          a({ type: "TAB_FOCUS", value: u });
+          a({ type: "TAB_FOCUS", value: l });
         },
-        onBlur(h) {
-          h.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
+        onBlur(R) {
+          R.relatedTarget?.getAttribute("role") !== "tab" && a({ type: "TAB_BLUR" });
         },
-        onClick(h) {
-          h.defaultPrevented || ve(h) || g || (Te() && h.currentTarget.focus(), a({ type: "TAB_CLICK", value: u }));
+        onClick(R) {
+          R.defaultPrevented || ve(R) || f || (Te() && R.currentTarget.focus(), a({ type: "TAB_CLICK", value: l }));
         }
       });
     },
     getContentProps(i) {
-      const { value: u } = i, g = r.get("value") === u;
+      const { value: l } = i, f = r.get("value") === l;
       return t.element({
-        ...R.content.attrs,
+        ...C.content.attrs,
         dir: o("dir"),
-        id: _(n, u),
+        id: _(n, l),
         tabIndex: w ? 0 : -1,
-        "aria-labelledby": b(n, u),
+        "aria-labelledby": v(n, l),
         role: "tabpanel",
-        "data-ownedby": C(n),
-        "data-selected": p(g),
+        "data-ownedby": P(n),
+        "data-selected": b(f),
         "data-orientation": o("orientation"),
-        hidden: !g
+        hidden: !f
       });
     },
     getIndicatorProps() {
-      const i = r.get("indicatorRect"), u = r.get("indicatorTransition");
+      const i = r.get("indicatorRect"), l = r.get("indicatorTransition");
       return t.element({
         id: M(n),
-        ...R.indicator.attrs,
+        ...C.indicator.attrs,
         dir: o("dir"),
         "data-orientation": o("orientation"),
         style: {
@@ -215,7 +215,7 @@ function Be(e, t) {
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: u ? "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)"
         }
@@ -357,7 +357,7 @@ var { createMachine: ke } = ce(), De = ke({
     },
     actions: {
       selectFocusedTab({ context: e, prop: t }) {
-        v(() => {
+        T(() => {
           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 }) {
-        v(() => {
+        T(() => {
           Se(e)?.focus();
         });
       },
       focusLastTab({ scope: e }) {
-        v(() => {
+        T(() => {
           Le(e)?.focus();
         });
       },
@@ -396,7 +396,7 @@ var { createMachine: ke } = ce(), De = ke({
           value: r,
           loopFocus: t("loopFocus")
         });
-        v(() => {
+        T(() => {
           t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
         });
       },
@@ -407,12 +407,12 @@ var { createMachine: ke } = ce(), De = ke({
           value: r,
           loopFocus: t("loopFocus")
         });
-        v(() => {
+        T(() => {
           t("composite") ? o?.focus() : o?.dataset.value != null && e.set("focusedValue", o.dataset.value);
         });
       },
       syncTabIndex({ context: e, scope: t }) {
-        v(() => {
+        T(() => {
           const s = e.get("value");
           if (!s) return;
           const a = we(t, s);
@@ -451,16 +451,16 @@ var { createMachine: ke } = ce(), De = ke({
         }
         const o = I(s, r), n = O(s);
         if (!o || !n) return;
-        const l = ue([o], {
-          measure(d) {
-            return H(d);
+        const d = ue([o], {
+          measure(u) {
+            return X(u);
           },
-          onEntry({ rects: d }) {
-            const [E] = d;
-            e.set("indicatorRect", X(E));
+          onEntry({ rects: u }) {
+            const [g] = u;
+            e.set("indicatorRect", H(g));
           }
         });
-        t.set("indicatorCleanup", l);
+        t.set("indicatorCleanup", d);
       },
       navigateIfNeeded({ context: e, prop: t, scope: s }) {
         const a = e.get("value");
@@ -498,7 +498,7 @@ const Ue = (e) => {
     ...e
   }, o = re(De, r);
   return Be(o, ne);
-}, K = T((e, t) => {
+}, K = m((e, t) => {
   const [s, a] = $(e), [r, o] = x()(a, [
     "activationMode",
     "composite",
@@ -513,40 +513,40 @@ const Ue = (e) => {
     "orientation",
     "translations",
     "value"
-  ]), 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 }) }) });
+  ]), 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 }) }) });
 });
 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 }) }) });
+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 }) }) });
 });
 q.displayName = "TabsRootProvider";
 const {
   withProvider: z,
-  withContext: V
+  withContext: E
 } = J({ key: "tabs" });
 z(q, "root", { forwardAsChild: !0 });
 const We = z(
   K,
   "root",
   { forwardAsChild: !0 }
-), Me = V(
+), Me = E(
   W,
   "trigger",
   { forwardAsChild: !0 }
-), He = V(
+), Xe = E(
   k,
   "content",
   { forwardAsChild: !0 }
 );
-V("div", "contentGroup");
-const Xe = V(
+E("div", "contentGroup");
+const He = E(
   U,
   "list",
   { forwardAsChild: !0 }
 );
-V(
+E(
   D,
   "indicator",
   { forwardAsChild: !0 }
@@ -569,8 +569,8 @@ const Ke = {
   showNotificationCounter: r,
   size: o = "md",
   ["data-testid"]: n = "kibble-tab",
-  ...l
-}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": n, ...l, children: [
+  ...d
+}) => /* @__PURE__ */ c.jsxs(Me, { className: "Tab", "data-testid": n, ...d, children: [
   !!e && t === "left" && /* @__PURE__ */ c.jsx(
     L,
     {
@@ -595,29 +595,38 @@ const Ke = {
 ] }), nt = ({
   align: e = "start",
   onChange: t,
-  size: s = "md",
-  tabs: a,
-  tabsContent: r,
-  ["data-testid"]: o = "kibble-tabs",
-  ...n
+  scrollable: s = !1,
+  size: a = "md",
+  tabs: r,
+  tabsContent: o,
+  ["data-testid"]: n = "kibble-tabs",
+  ...d
 }) => /* @__PURE__ */ c.jsxs(
   We,
   {
     className: "Tabs",
-    "data-testid": o,
-    justify: e || n.justify,
-    size: s,
-    onValueChange: ({ value: l }) => t?.(l),
-    ...n,
+    "data-testid": n,
+    justify: e || d.justify,
+    size: a,
+    onValueChange: ({ value: u }) => t?.(u),
+    ...d,
     children: [
-      /* @__PURE__ */ c.jsx(Xe, { className: "Tabs__List", "data-testid": `${o}-trigger-list`, children: a.map((l, d) => /* @__PURE__ */ c.jsx(ze, { ...l, "data-testid": `${o}-trigger-${l.value}`, size: s }, `tab-${d}`)) }),
-      !!r && r.map((l, d) => /* @__PURE__ */ c.jsx(
+      /* @__PURE__ */ c.jsx(
         He,
         {
-          "data-testid": `${o}-content-${a[d].value}`,
-          ...l
+          className: "Tabs__List",
+          "data-testid": `${n}-trigger-list`,
+          ...s && { overflowX: "auto", flexWrap: "nowrap" },
+          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
         },
-        `${o}-tabContent-${d}`
+        `${n}-tabContent-${g}`
       ))
     ]
   }
@@ -627,4 +636,4 @@ export {
   ct as a,
   it as t
 };
-//# sourceMappingURL=tab.types-BiDpSKGC.js.map
+//# sourceMappingURL=tab.types-9F6GuNAA.js.map