@fiscozen/tab 0.1.9 → 0.1.11

package/dist/tab.js

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