@fiscozen/tab 0.1.12 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @fiscozen/tab
 
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [a26bc2c]
+- Updated dependencies [a26bc2c]
+- Updated dependencies [2d4fc5e]
+  - @fiscozen/style@0.3.0
+  - @fiscozen/icons@0.2.0
+  - @fiscozen/composables@1.0.2
+  - @fiscozen/action@2.0.0
+  - @fiscozen/badge@2.0.0
+
+## 1.0.0
+
+### Major Changes
+
+- 98d491d: Updated FzTabs to reflect new design system specs
+
+  ### BREAKING CHANGES
+
+  `FzTabs` doesn't automatically handle tab overflow; it is now controlled by the user via the `tabStyle` prop. Now is developer responsibility to handle the overflow of the tabs based on his use cases.
+
+  ### NEW FEATURES
+  - New `tabStyle="fullWidth"` variant: the tab container stretches to fill the full available width and each tab expands equally with centered text
+  - The `tone` prop (`'neutral' | 'alert'`) is now set on individual `FzTab` components instead of the `FzTabs` container, allowing specific tabs to be highlighted independently
+  - New `environment` prop (`'backoffice' | 'frontoffice'`) for sizing, replacing the deprecated `size` prop
+  - New `tabStyle` prop (`'scroll' | 'picker' | 'fullWidth'`) to control tab style and overflow behavior
+  - The `change` event now also emits the selected button DOM element as a second argument: `(title: string, element: HTMLElement | null)`
+
+  ### DEPRECATED FEATURES
+  - The `size` prop is deprecated: use `environment` instead
+  - The `horizontalOverflow` prop is deprecated: use `tabStyle` instead
+
+  ### DOCUMENTATION
+  - Updated `FzTabs.mdx` documentation to reflect the new specifications
+
 ## 0.1.12
 
 ### Patch Changes

package/dist/src/__test__/FzTabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tab.js

@@ -1,8 +1,8 @@
-import { defineComponent as w, inject as O, computed as v, createElementBlock as h, openBlock as c, mergeProps as _, createBlock as d, createCommentVNode as T, createElementVNode as z, renderSlot as x, unref as b, toDisplayString as E, withCtx as m, createTextVNode as U, ref as g, Fragment as B, renderList as R, createVNode as N, onMounted as j, onBeforeUnmount as L, useSlots as q, provide as G, watch as Q, normalizeClass as C } from "vue";
+import { defineComponent as w, inject as _, computed as v, createElementBlock as h, openBlock as f, mergeProps as P, createBlock as d, createCommentVNode as T, createElementVNode as z, renderSlot as b, unref as x, toDisplayString as $, withCtx as m, createTextVNode as U, ref as g, Fragment as H, renderList as B, createVNode as E, onMounted as R, onBeforeUnmount as j, useSlots as q, provide as G, watch as Q, normalizeClass as C } from "vue";
 import { useMediaQuery as Y, FzFloating as J } from "@fiscozen/composables";
-import { FzIcon as V } from "@fiscozen/icons";
+import { FzIcon as L } from "@fiscozen/icons";
 import { FzBadge as K } from "@fiscozen/badge";
-const D = {
+const V = {
   sm: "text-sm h-40 gap-6 py-8 px-12",
   md: "text-md h-40 gap-8 py-12 px-14"
 }, X = {
@@ -844,7 +844,7 @@ const D = {
       type: "lineHeights"
     }
   }
-}, $ = {
+}, O = {
   global: ee
 }, le = [
   "blue",
@@ -864,28 +864,28 @@ const D = {
 ], oe = {
   semanticColorNames: ae
 }, pe = te.safeColorNames, se = oe.semanticColorNames, y = {};
-pe.forEach((e) => {
-  const t = $.global[e];
-  t && Object.keys(t).forEach((l) => {
-    var p;
-    const a = (p = t[l]) == null ? void 0 : p.value;
-    a && (y[e] || (y[e] = {}), y[e][l] = a);
+pe.forEach((p) => {
+  const t = O.global[p];
+  t && Object.keys(t).forEach((e) => {
+    var s;
+    const a = (s = t[e]) == null ? void 0 : s.value;
+    a && (y[p] || (y[p] = {}), y[p][e] = a);
   });
 });
-const H = $.global.semantic;
-H && se.forEach((e) => {
-  const t = H[e];
-  t && typeof t == "object" && Object.keys(t).forEach((l) => {
-    var p;
-    const a = (p = t[l]) == null ? void 0 : p.value;
+const N = O.global.semantic;
+N && se.forEach((p) => {
+  const t = N[p];
+  t && typeof t == "object" && Object.keys(t).forEach((e) => {
+    var s;
+    const a = (s = t[e]) == null ? void 0 : s.value;
     if (a) {
-      const s = `semantic-${e}`;
-      y[s] || (y[s] = {}), y[s][l] = a;
+      const r = `semantic-${p}`;
+      y[r] || (y[r] = {}), y[r][e] = a;
     }
   });
 });
-const re = Object.entries($.global.breakpoint).reduce(
-  (e, [t, l]) => (e[t] = l.value, e),
+const re = Object.entries(O.global.breakpoint).reduce(
+  (p, [t, e]) => (p[t] = e.value, p),
   {}
 ), ue = { class: "text-ellipsis flex-1 whitespace-nowrap overflow-hidden" }, W = /* @__PURE__ */ w({
   __name: "FzTabButton",
@@ -897,39 +897,39 @@ const re = Object.entries($.global.breakpoint).reduce(
     maxWidth: { default: "136px" }
   },
   emits: ["click"],
-  setup(e, { emit: t }) {
-    const l = Y(`(max-width: ${re.xs})`), a = e, p = O("selectedTab"), s = t, f = v(() => [
+  setup(p, { emit: t }) {
+    const e = Y(`(max-width: ${re.xs})`), a = p, s = _("selectedTab"), r = t, i = v(() => [
       "w-auto flex font-medium items-center  rounded-md",
-      D[a.size],
+      V[a.size],
       a.type === "picker" ? "text-left" : "",
-      (p == null ? void 0 : p.value) === a.tab.title ? X[a.type] : Z[a.type],
+      (s == null ? void 0 : s.value) === a.tab.title ? X[a.type] : Z[a.type],
       a.tab.disabled ? "cursor-not-allowed" : "cursor-pointer",
-      a.maxWidth && !l.value ? `max-w-[${a.maxWidth}]` : "",
-      l.value ? "!max-w-full !w-full" : ""
-    ]), u = () => {
-      a.tab.disabled || (a.readonly || (p.value = a.tab.title), s("click"));
+      a.maxWidth && !e.value ? `max-w-[${a.maxWidth}]` : "",
+      e.value ? "!max-w-full !w-full" : ""
+    ]), n = () => {
+      a.tab.disabled || (a.readonly || (s.value = a.tab.title), r("click"));
     };
-    return (n, S) => (c(), h("button", _({
-      class: f.value,
-      onClick: u
-    }, e.tab), [
-      e.tab.icon ? (c(), d(b(V), {
+    return (o, S) => (f(), h("button", P({
+      class: i.value,
+      onClick: n
+    }, o.tab), [
+      o.tab.icon ? (f(), d(x(L), {
         key: 0,
-        name: e.tab.icon,
-        size: e.size
+        name: o.tab.icon,
+        size: o.size
       }, null, 8, ["name", "size"])) : T("", !0),
-      z("span", ue, E(e.tab.title), 1),
-      e.tab.badgeContent != null ? (c(), d(b(K), {
+      z("span", ue, $(o.tab.title), 1),
+      o.tab.badgeContent != null ? (f(), d(x(K), {
         key: 1,
-        color: b(p) === e.tab.title ? "blue" : "black",
-        size: e.size
+        color: x(s) === o.tab.title ? "blue" : "black",
+        size: o.size
       }, {
         default: m(() => [
-          U(E(e.tab.badgeContent), 1)
+          U($(o.tab.badgeContent), 1)
         ]),
         _: 1
       }, 8, ["color", "size"])) : T("", !0),
-      x(n.$slots, "default")
+      b(o.$slots, "default")
     ], 16));
   }
 }), ne = { class: "flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10 w-full" }, ie = /* @__PURE__ */ w({
@@ -938,36 +938,36 @@ const re = Object.entries($.global.breakpoint).reduce(
     tabs: {},
     size: {}
   },
-  setup(e) {
-    const t = g(!1), l = e;
+  setup(p) {
+    const t = g(!1), e = p;
     g();
-    const a = O("selectedTab"), p = v(() => l.tabs.find((f) => f.title === (a == null ? void 0 : a.value)));
+    const a = _("selectedTab"), s = v(() => e.tabs.find((i) => i.title === (a == null ? void 0 : a.value)));
     v(() => [
       "flex items-center text-left max-w-[136px] rounded-md h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",
-      D[l.size]
+      V[e.size]
     ]);
-    const s = () => {
+    const r = () => {
       t.value = !1;
     };
-    return (f, u) => (c(), d(b(J), {
+    return (i, n) => (f(), d(x(J), {
       position: "bottom",
       isOpen: t.value,
       class: "w-full overflow-hidden",
       contentClass: "bg-transparent z-70"
     }, {
       opener: m(() => [
-        N(W, {
-          tab: p.value,
-          size: e.size,
+        E(W, {
+          tab: s.value,
+          size: i.size,
           class: "w-full sm:w-auto",
           type: "tab",
           readonly: "",
-          onClick: u[0] || (u[0] = (n) => t.value = !t.value)
+          onClick: n[0] || (n[0] = (o) => t.value = !t.value)
         }, {
           default: m(() => [
-            N(b(V), {
+            E(x(L), {
               name: t.value ? "chevron-up" : "chevron-down",
-              size: e.size
+              size: i.size
             }, null, 8, ["name", "size"])
           ]),
           _: 1
@@ -975,11 +975,11 @@ const re = Object.entries($.global.breakpoint).reduce(
       ]),
       default: m(() => [
         z("div", ne, [
-          (c(!0), h(B, null, R(e.tabs, (n) => (c(), d(W, {
-            tab: n,
-            size: e.size,
+          (f(!0), h(H, null, B(i.tabs, (o) => (f(), d(W, {
+            tab: o,
+            size: i.size,
             type: "picker",
-            onClick: s
+            onClick: r
           }, null, 8, ["tab", "size"]))), 256))
         ])
       ]),
@@ -996,15 +996,15 @@ const re = Object.entries($.global.breakpoint).reduce(
     initialSelected: { type: Boolean },
     maxWidth: {}
   },
-  setup(e) {
-    const t = e, l = O("selectedTab"), a = v(() => (l == null ? void 0 : l.value) === t.title);
-    return j(() => {
-      l === void 0 ? console.error(
+  setup(p) {
+    const t = p, e = _("selectedTab"), a = v(() => (e == null ? void 0 : e.value) === t.title);
+    return R(() => {
+      e === void 0 ? console.error(
         "[Fiscozen Design System]: FzTab must be used inside a FzTabs component"
-      ) : t.initialSelected && (l.value = t.title);
-    }), L(() => {
-      (l == null ? void 0 : l.value) === t.title && (l.value = "");
-    }), (p, s) => a.value ? x(p.$slots, "default", { key: 0 }) : T("", !0);
+      ) : t.initialSelected && (e.value = t.title);
+    }), j(() => {
+      (e == null ? void 0 : e.value) === t.title && (e.value = "");
+    }), (s, r) => a.value ? b(s.$slots, "default", { key: 0 }) : T("", !0);
   }
 }), ce = "tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto w-full sm:w-auto", fe = /* @__PURE__ */ w({
   __name: "FzTabs",
@@ -1014,61 +1014,61 @@ const re = Object.entries($.global.breakpoint).reduce(
     vertical: { type: Boolean, default: !1 }
   },
   emits: ["change"],
-  setup(e, { emit: t }) {
-    const l = e, a = t, p = q(), s = g(), f = g(!1), u = g("");
-    G("selectedTab", u);
-    const n = v(() => p.default ? p.default().filter((o) => o.type === F || typeof o.type == "symbol").map((o) => {
-      if (o.type === F) return o.props;
-      if (typeof o.type == "symbol") {
-        const i = o.children;
-        return !i || i === "v-if" ? null : i.filter((r) => r.type === F).map((r) => r.props);
+  setup(p, { emit: t }) {
+    const e = p, a = t, s = q(), r = g(), i = g(!1), n = g("");
+    G("selectedTab", n);
+    const o = v(() => s.default ? s.default().filter((l) => l.type === F || typeof l.type == "symbol").map((l) => {
+      if (l.type === F) return l.props;
+      if (typeof l.type == "symbol") {
+        const c = l.children;
+        return !c || c === "v-if" ? null : c.filter((u) => u.type === F).map((u) => u.props);
       }
-    }).flat().filter((o) => o != null) : []), S = v(() => [
-      l.vertical ? "flex-col" : "flex-row"
-    ]), I = v(() => [
+    }).flat().filter((l) => l != null) : []), S = v(() => [
+      e.vertical ? "flex-col" : "flex-row"
+    ]), D = v(() => [
       "flex",
-      l.vertical ? "flex-row" : "flex-col"
+      e.vertical ? "flex-row" : "flex-col"
     ]);
-    function A(o) {
-      o.preventDefault(), o.stopPropagation(), o.deltaY > 0 ? s.value.scrollLeft += 100 : s.value.scrollLeft -= 100;
+    function I(l) {
+      l.preventDefault(), l.stopPropagation(), l.deltaY > 0 ? r.value.scrollLeft += 100 : r.value.scrollLeft -= 100;
     }
     function k() {
-      if (!s.value) return !1;
-      const o = s.value.parentElement ?? document.body;
-      f.value = s.value.scrollWidth > o.clientWidth;
+      if (!r.value) return !1;
+      const l = r.value.parentElement ?? document.body;
+      i.value = r.value.scrollWidth > l.clientWidth;
     }
-    return j(() => {
-      if (n.value.length === 0)
+    return R(() => {
+      if (o.value.length === 0)
         console.warn(
           "[Fiscozen Design System]: FzTabs must have at least one FzTab child"
         );
       else {
-        const o = n.value.find((r) => r.initialSelected);
-        o ? u.value = o.title : u.value = n.value[0].title;
-        const i = n.value.map((r) => r.title).filter((r, M, P) => P.indexOf(r) !== M);
-        i.length && console.warn(
-          `[Fiscozen Design System]: FzTabs has duplicate titles: ${i.join(", ")}, this may cause unexpected behavior.`
+        const l = o.value.find((u) => u.initialSelected);
+        l ? n.value = l.title : n.value = o.value[0].title;
+        const c = o.value.map((u) => u.title).filter((u, A, M) => M.indexOf(u) !== A);
+        c.length && console.warn(
+          `[Fiscozen Design System]: FzTabs has duplicate titles: ${c.join(", ")}, this may cause unexpected behavior.`
         );
       }
       k(), window.addEventListener("resize", k);
-    }), L(() => {
+    }), j(() => {
       window.removeEventListener("resize", k);
     }), Q(
-      () => u.value,
+      () => n.value,
       () => {
-        var i;
-        u.value === "" && n.value.length > 0 && (u.value = ((i = n.value.find((r) => r.initialSelected)) == null ? void 0 : i.title) ?? n.value[0].title);
-        const o = s.value.querySelector(
-          `button[title="${u.value}"]`
+        var c;
+        n.value === "" && o.value.length > 0 && (n.value = ((c = o.value.find((u) => u.initialSelected)) == null ? void 0 : c.title) ?? o.value[0].title);
+        const l = r.value.querySelector(
+          `button[title="${n.value}"]`
         );
-        o && f.value && o.scrollIntoView({
+        l && i.value && l.scrollIntoView({
           behavior: "smooth",
           block: "nearest",
           inline: "center"
-        }), a("change", u.value);
+        }), a("change", n.value);
       }
-    ), (o, i) => (c(), h("div", {
-      class: C(I.value)
+    ), (l, c) => (f(), h("div", {
+      class: C(D.value)
     }, [
       z("div", {
         class: C(["flex", S.value])
@@ -1076,31 +1076,31 @@ const re = Object.entries($.global.breakpoint).reduce(
         z("div", {
           class: C([ce, S.value]),
           ref_key: "tabContainer",
-          ref: s,
-          onWheel: A
+          ref: r,
+          onWheel: I
         }, [
-          !e.horizontalOverflow && f.value ? (c(), d(ie, {
+          !l.horizontalOverflow && i.value ? (f(), d(ie, {
             key: 0,
-            tabs: n.value,
-            size: e.size
-          }, null, 8, ["tabs", "size"])) : (c(!0), h(B, { key: 1 }, R(n.value, (r) => (c(), d(W, {
-            tab: r,
-            key: r.title,
-            size: e.size,
-            maxWidth: r.maxWidth
+            tabs: o.value,
+            size: l.size
+          }, null, 8, ["tabs", "size"])) : (f(!0), h(H, { key: 1 }, B(o.value, (u) => (f(), d(W, {
+            tab: u,
+            key: u.title,
+            size: l.size,
+            maxWidth: u.maxWidth
           }, null, 8, ["tab", "size", "maxWidth"]))), 128)),
-          x(o.$slots, "tabs-container-end", {}, void 0, !0)
+          b(l.$slots, "tabs-container-end", {}, void 0, !0)
         ], 34),
-        x(o.$slots, "tabs-end", {}, void 0, !0)
+        b(l.$slots, "tabs-end", {}, void 0, !0)
       ], 2),
-      x(o.$slots, "default", { selected: u.value }, void 0, !0)
+      b(l.$slots, "default", { selected: n.value }, void 0, !0)
     ], 2));
   }
-}), ve = (e, t) => {
-  const l = e.__vccOpts || e;
-  for (const [a, p] of t)
-    l[a] = p;
-  return l;
+}), ve = (p, t) => {
+  const e = p.__vccOpts || p;
+  for (const [a, s] of t)
+    e[a] = s;
+  return e;
 }, ge = /* @__PURE__ */ ve(fe, [["__scopeId", "data-v-f9fcb49a"]]);
 export {
   F as FzTab,

package/dist/tab.umd.cjs

@@ -1 +1 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/composables"),require("@fiscozen/icons"),require("@fiscozen/badge")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/composables","@fiscozen/icons","@fiscozen/badge"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.FzTabs={},u.Vue,u.composables,u.icons,u.badge))})(this,function(u,e,h,z,k){"use strict";const w={sm:"text-sm h-40 gap-6 py-8 px-12",md:"text-md h-40 gap-8 py-12 px-14"},C={picker:"bg-background-alice-blue text-blue-500",tab:"bg-white text-blue-500"},B={picker:"bg-white hover:bg-background-alice-blue text-black hover:text-blue-500",tab:"text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500"},x={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},T={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},F={semanticColorNames:["error","warning","success","info"]},N=T.safeColorNames,E=F.semanticColorNames,y={};N.forEach(t=>{const o=x.global[t];o&&Object.keys(o).forEach(l=>{var p;const a=(p=o[l])==null?void 0:p.value;a&&(y[t]||(y[t]={}),y[t][l]=a)})});const S=x.global.semantic;S&&E.forEach(t=>{const o=S[t];o&&typeof o=="object"&&Object.keys(o).forEach(l=>{var p;const a=(p=o[l])==null?void 0:p.value;if(a){const s=`semantic-${t}`;y[s]||(y[s]={}),y[s][l]=a}})});const O=Object.entries(x.global.breakpoint).reduce((t,[o,l])=>(t[o]=l.value,t),{}),W={class:"text-ellipsis flex-1 whitespace-nowrap overflow-hidden"},b=e.defineComponent({__name:"FzTabButton",props:{tab:{},size:{},type:{default:"tab"},readonly:{type:Boolean,default:!1},maxWidth:{default:"136px"}},emits:["click"],setup(t,{emit:o}){const l=h.useMediaQuery(`(max-width: ${O.xs})`),a=t,p=e.inject("selectedTab"),s=o,d=e.computed(()=>["w-auto flex font-medium items-center  rounded-md",w[a.size],a.type==="picker"?"text-left":"",(p==null?void 0:p.value)===a.tab.title?C[a.type]:B[a.type],a.tab.disabled?"cursor-not-allowed":"cursor-pointer",a.maxWidth&&!l.value?`max-w-[${a.maxWidth}]`:"",l.value?"!max-w-full !w-full":""]),r=()=>{a.tab.disabled||(a.readonly||(p.value=a.tab.title),s("click"))};return(i,m)=>(e.openBlock(),e.createElementBlock("button",e.mergeProps({class:d.value,onClick:r},t.tab),[t.tab.icon?(e.openBlock(),e.createBlock(e.unref(z.FzIcon),{key:0,name:t.tab.icon,size:t.size},null,8,["name","size"])):e.createCommentVNode("",!0),e.createElementVNode("span",W,e.toDisplayString(t.tab.title),1),t.tab.badgeContent!=null?(e.openBlock(),e.createBlock(e.unref(k.FzBadge),{key:1,color:e.unref(p)===t.tab.title?"blue":"black",size:t.size},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tab.badgeContent),1)]),_:1},8,["color","size"])):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default")],16))}}),$={class:"flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10 w-full"},V=e.defineComponent({__name:"FzTabPicker",props:{tabs:{},size:{}},setup(t){const o=e.ref(!1),l=t;e.ref();const a=e.inject("selectedTab"),p=e.computed(()=>l.tabs.find(d=>d.title===(a==null?void 0:a.value)));e.computed(()=>["flex items-center text-left max-w-[136px] rounded-md h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",w[l.size]]);const s=()=>{o.value=!1};return(d,r)=>(e.openBlock(),e.createBlock(e.unref(h.FzFloating),{position:"bottom",isOpen:o.value,class:"w-full overflow-hidden",contentClass:"bg-transparent z-70"},{opener:e.withCtx(()=>[e.createVNode(b,{tab:p.value,size:t.size,class:"w-full sm:w-auto",type:"tab",readonly:"",onClick:r[0]||(r[0]=i=>o.value=!o.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(z.FzIcon),{name:o.value?"chevron-up":"chevron-down",size:t.size},null,8,["name","size"])]),_:1},8,["tab","size"])]),default:e.withCtx(()=>[e.createElementVNode("div",$,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.tabs,i=>(e.openBlock(),e.createBlock(b,{tab:i,size:t.size,type:"picker",onClick:s},null,8,["tab","size"]))),256))])]),_:1},8,["isOpen"]))}}),v=e.defineComponent({__name:"FzTab",props:{title:{},icon:{},badgeContent:{},disabled:{type:Boolean},initialSelected:{type:Boolean},maxWidth:{}},setup(t){const o=t,l=e.inject("selectedTab"),a=e.computed(()=>(l==null?void 0:l.value)===o.title);return e.onMounted(()=>{l===void 0?console.error("[Fiscozen Design System]: FzTab must be used inside a FzTabs component"):o.initialSelected&&(l.value=o.title)}),e.onBeforeUnmount(()=>{(l==null?void 0:l.value)===o.title&&(l.value="")}),(p,s)=>a.value?e.renderSlot(p.$slots,"default",{key:0}):e.createCommentVNode("",!0)}}),H="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto w-full sm:w-auto",j=((t,o)=>{const l=t.__vccOpts||t;for(const[a,p]of o)l[a]=p;return l})(e.defineComponent({__name:"FzTabs",props:{size:{default:"sm"},horizontalOverflow:{type:Boolean},vertical:{type:Boolean,default:!1}},emits:["change"],setup(t,{emit:o}){const l=t,a=o,p=e.useSlots(),s=e.ref(),d=e.ref(!1),r=e.ref("");e.provide("selectedTab",r);const i=e.computed(()=>p.default?p.default().filter(n=>n.type===v||typeof n.type=="symbol").map(n=>{if(n.type===v)return n.props;if(typeof n.type=="symbol"){const f=n.children;return!f||f==="v-if"?null:f.filter(c=>c.type===v).map(c=>c.props)}}).flat().filter(n=>n!=null):[]),m=e.computed(()=>[l.vertical?"flex-col":"flex-row"]),R=e.computed(()=>["flex",l.vertical?"flex-row":"flex-col"]);function L(n){n.preventDefault(),n.stopPropagation(),n.deltaY>0?s.value.scrollLeft+=100:s.value.scrollLeft-=100}function g(){if(!s.value)return!1;const n=s.value.parentElement??document.body;d.value=s.value.scrollWidth>n.clientWidth}return e.onMounted(()=>{if(i.value.length===0)console.warn("[Fiscozen Design System]: FzTabs must have at least one FzTab child");else{const n=i.value.find(c=>c.initialSelected);n?r.value=n.title:r.value=i.value[0].title;const f=i.value.map(c=>c.title).filter((c,D,I)=>I.indexOf(c)!==D);f.length&&console.warn(`[Fiscozen Design System]: FzTabs has duplicate titles: ${f.join(", ")}, this may cause unexpected behavior.`)}g(),window.addEventListener("resize",g)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",g)}),e.watch(()=>r.value,()=>{var f;r.value===""&&i.value.length>0&&(r.value=((f=i.value.find(c=>c.initialSelected))==null?void 0:f.title)??i.value[0].title);const n=s.value.querySelector(`button[title="${r.value}"]`);n&&d.value&&n.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),a("change",r.value)}),(n,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(R.value)},[e.createElementVNode("div",{class:e.normalizeClass(["flex",m.value])},[e.createElementVNode("div",{class:e.normalizeClass([H,m.value]),ref_key:"tabContainer",ref:s,onWheel:L},[!t.horizontalOverflow&&d.value?(e.openBlock(),e.createBlock(V,{key:0,tabs:i.value,size:t.size},null,8,["tabs","size"])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(i.value,c=>(e.openBlock(),e.createBlock(b,{tab:c,key:c.title,size:t.size,maxWidth:c.maxWidth},null,8,["tab","size","maxWidth"]))),128)),e.renderSlot(n.$slots,"tabs-container-end",{},void 0,!0)],34),e.renderSlot(n.$slots,"tabs-end",{},void 0,!0)],2),e.renderSlot(n.$slots,"default",{selected:r.value},void 0,!0)],2))}}),[["__scopeId","data-v-f9fcb49a"]]);u.FzTab=v,u.FzTabs=j,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/composables"),require("@fiscozen/icons"),require("@fiscozen/badge")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/composables","@fiscozen/icons","@fiscozen/badge"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.FzTabs={},f.Vue,f.composables,f.icons,f.badge))})(this,function(f,e,h,z,k){"use strict";const w={sm:"text-sm h-40 gap-6 py-8 px-12",md:"text-md h-40 gap-8 py-12 px-14"},C={picker:"bg-background-alice-blue text-blue-500",tab:"bg-white text-blue-500"},B={picker:"bg-white hover:bg-background-alice-blue text-black hover:text-blue-500",tab:"text-grey-500 bg-grey-100 hover:bg-background-alice-blue active:bg-white active:text-blue-500"},b={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},T={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},F={semanticColorNames:["error","warning","success","info"]},_=T.safeColorNames,N=F.semanticColorNames,y={};_.forEach(n=>{const o=b.global[n];o&&Object.keys(o).forEach(t=>{var s;const a=(s=o[t])==null?void 0:s.value;a&&(y[n]||(y[n]={}),y[n][t]=a)})});const S=b.global.semantic;S&&N.forEach(n=>{const o=S[n];o&&typeof o=="object"&&Object.keys(o).forEach(t=>{var s;const a=(s=o[t])==null?void 0:s.value;if(a){const r=`semantic-${n}`;y[r]||(y[r]={}),y[r][t]=a}})});const E=Object.entries(b.global.breakpoint).reduce((n,[o,t])=>(n[o]=t.value,n),{}),O={class:"text-ellipsis flex-1 whitespace-nowrap overflow-hidden"},x=e.defineComponent({__name:"FzTabButton",props:{tab:{},size:{},type:{default:"tab"},readonly:{type:Boolean,default:!1},maxWidth:{default:"136px"}},emits:["click"],setup(n,{emit:o}){const t=h.useMediaQuery(`(max-width: ${E.xs})`),a=n,s=e.inject("selectedTab"),r=o,u=e.computed(()=>["w-auto flex font-medium items-center  rounded-md",w[a.size],a.type==="picker"?"text-left":"",(s==null?void 0:s.value)===a.tab.title?C[a.type]:B[a.type],a.tab.disabled?"cursor-not-allowed":"cursor-pointer",a.maxWidth&&!t.value?`max-w-[${a.maxWidth}]`:"",t.value?"!max-w-full !w-full":""]),i=()=>{a.tab.disabled||(a.readonly||(s.value=a.tab.title),r("click"))};return(p,m)=>(e.openBlock(),e.createElementBlock("button",e.mergeProps({class:u.value,onClick:i},p.tab),[p.tab.icon?(e.openBlock(),e.createBlock(e.unref(z.FzIcon),{key:0,name:p.tab.icon,size:p.size},null,8,["name","size"])):e.createCommentVNode("",!0),e.createElementVNode("span",O,e.toDisplayString(p.tab.title),1),p.tab.badgeContent!=null?(e.openBlock(),e.createBlock(e.unref(k.FzBadge),{key:1,color:e.unref(s)===p.tab.title?"blue":"black",size:p.size},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(p.tab.badgeContent),1)]),_:1},8,["color","size"])):e.createCommentVNode("",!0),e.renderSlot(p.$slots,"default")],16))}}),W={class:"flex flex-col p-4 rounded shadow overflow-hidden bg-core-white z-10 w-full"},$=e.defineComponent({__name:"FzTabPicker",props:{tabs:{},size:{}},setup(n){const o=e.ref(!1),t=n;e.ref();const a=e.inject("selectedTab"),s=e.computed(()=>t.tabs.find(u=>u.title===(a==null?void 0:a.value)));e.computed(()=>["flex items-center text-left max-w-[136px] rounded-md h-auto bg-white text-blue-500 font-medium cursor-pointer capitalize ",w[t.size]]);const r=()=>{o.value=!1};return(u,i)=>(e.openBlock(),e.createBlock(e.unref(h.FzFloating),{position:"bottom",isOpen:o.value,class:"w-full overflow-hidden",contentClass:"bg-transparent z-70"},{opener:e.withCtx(()=>[e.createVNode(x,{tab:s.value,size:u.size,class:"w-full sm:w-auto",type:"tab",readonly:"",onClick:i[0]||(i[0]=p=>o.value=!o.value)},{default:e.withCtx(()=>[e.createVNode(e.unref(z.FzIcon),{name:o.value?"chevron-up":"chevron-down",size:u.size},null,8,["name","size"])]),_:1},8,["tab","size"])]),default:e.withCtx(()=>[e.createElementVNode("div",W,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.tabs,p=>(e.openBlock(),e.createBlock(x,{tab:p,size:u.size,type:"picker",onClick:r},null,8,["tab","size"]))),256))])]),_:1},8,["isOpen"]))}}),v=e.defineComponent({__name:"FzTab",props:{title:{},icon:{},badgeContent:{},disabled:{type:Boolean},initialSelected:{type:Boolean},maxWidth:{}},setup(n){const o=n,t=e.inject("selectedTab"),a=e.computed(()=>(t==null?void 0:t.value)===o.title);return e.onMounted(()=>{t===void 0?console.error("[Fiscozen Design System]: FzTab must be used inside a FzTabs component"):o.initialSelected&&(t.value=o.title)}),e.onBeforeUnmount(()=>{(t==null?void 0:t.value)===o.title&&(t.value="")}),(s,r)=>a.value?e.renderSlot(s.$slots,"default",{key:0}):e.createCommentVNode("",!0)}}),V="tab-container flex rounded-lg gap-8 p-2 bg-grey-100 w-fit max-w-full overflow-x-auto w-full sm:w-auto",H=((n,o)=>{const t=n.__vccOpts||n;for(const[a,s]of o)t[a]=s;return t})(e.defineComponent({__name:"FzTabs",props:{size:{default:"sm"},horizontalOverflow:{type:Boolean},vertical:{type:Boolean,default:!1}},emits:["change"],setup(n,{emit:o}){const t=n,a=o,s=e.useSlots(),r=e.ref(),u=e.ref(!1),i=e.ref("");e.provide("selectedTab",i);const p=e.computed(()=>s.default?s.default().filter(l=>l.type===v||typeof l.type=="symbol").map(l=>{if(l.type===v)return l.props;if(typeof l.type=="symbol"){const d=l.children;return!d||d==="v-if"?null:d.filter(c=>c.type===v).map(c=>c.props)}}).flat().filter(l=>l!=null):[]),m=e.computed(()=>[t.vertical?"flex-col":"flex-row"]),j=e.computed(()=>["flex",t.vertical?"flex-row":"flex-col"]);function R(l){l.preventDefault(),l.stopPropagation(),l.deltaY>0?r.value.scrollLeft+=100:r.value.scrollLeft-=100}function g(){if(!r.value)return!1;const l=r.value.parentElement??document.body;u.value=r.value.scrollWidth>l.clientWidth}return e.onMounted(()=>{if(p.value.length===0)console.warn("[Fiscozen Design System]: FzTabs must have at least one FzTab child");else{const l=p.value.find(c=>c.initialSelected);l?i.value=l.title:i.value=p.value[0].title;const d=p.value.map(c=>c.title).filter((c,L,D)=>D.indexOf(c)!==L);d.length&&console.warn(`[Fiscozen Design System]: FzTabs has duplicate titles: ${d.join(", ")}, this may cause unexpected behavior.`)}g(),window.addEventListener("resize",g)}),e.onBeforeUnmount(()=>{window.removeEventListener("resize",g)}),e.watch(()=>i.value,()=>{var d;i.value===""&&p.value.length>0&&(i.value=((d=p.value.find(c=>c.initialSelected))==null?void 0:d.title)??p.value[0].title);const l=r.value.querySelector(`button[title="${i.value}"]`);l&&u.value&&l.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),a("change",i.value)}),(l,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(j.value)},[e.createElementVNode("div",{class:e.normalizeClass(["flex",m.value])},[e.createElementVNode("div",{class:e.normalizeClass([V,m.value]),ref_key:"tabContainer",ref:r,onWheel:R},[!l.horizontalOverflow&&u.value?(e.openBlock(),e.createBlock($,{key:0,tabs:p.value,size:l.size},null,8,["tabs","size"])):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(p.value,c=>(e.openBlock(),e.createBlock(x,{tab:c,key:c.title,size:l.size,maxWidth:c.maxWidth},null,8,["tab","size","maxWidth"]))),128)),e.renderSlot(l.$slots,"tabs-container-end",{},void 0,!0)],34),e.renderSlot(l.$slots,"tabs-end",{},void 0,!0)],2),e.renderSlot(l.$slots,"default",{selected:i.value},void 0,!0)],2))}}),[["__scopeId","data-v-f9fcb49a"]]);f.FzTab=v,f.FzTabs=H,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@fiscozen/tab",
-  "version": "0.1.12",
+  "version": "2.0.0",
   "description": "Design System Tab component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/composables": "1.0.1",
-    "@fiscozen/badge": "1.0.1",
-    "@fiscozen/style": "0.2.0"
+    "@fiscozen/action": "2.0.0",
+    "@fiscozen/composables": "1.0.2",
+    "@fiscozen/style": "0.3.0",
+    "@fiscozen/badge": "2.0.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
     "vue": "^3.4.13",
-    "@fiscozen/icons": "^0.1.37"
+    "@fiscozen/icons": "^0.2.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",