prometeo-design-system 7.7.4 → 7.7.5

package/dist/Avatar.es.js

@@ -1,6 +1,6 @@
 import { j as m } from "./jsx-runtime-GkKLlHH4.js";
-import { A as u } from "./AvatarAndSubavatar-BuZi4MrC.js";
-import { A as d } from "./AvatarBase-DiSd8Z2B.js";
+import { A as u } from "./AvatarAndSubavatar-06yOUIKk.js";
+import { A as d } from "./AvatarBase-Yi_3zqle.js";
 const g = "[Pyrion Avatar]", o = /* @__PURE__ */ new Set(), e = (a, r) => {
   o.has(a) || (o.add(a), console.warn(`${g} ${r}`));
 }, f = {

package/dist/{AvatarAndSubavatar-BuZi4MrC.js → AvatarAndSubavatar-06yOUIKk.js}

@@ -1,9 +1,9 @@
 import { j as r } from "./jsx-runtime-GkKLlHH4.js";
 import { c as m } from "./index-BOQuZ0gG.js";
 import { memo as l, useState as d, useEffect as n } from "react";
-import { A as x } from "./AvatarBase-DiSd8Z2B.js";
+import { A as x } from "./AvatarBase-Yi_3zqle.js";
 const c = m(
-  "bg-brand-secondary-default border-neutral-default-default border-1 rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center absolute ",
+  "bg-brand-secondary-default border-neutral-default-default border rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center absolute ",
   {
     variants: {
       size: {

package/dist/{AvatarBase-DiSd8Z2B.js → AvatarBase-Yi_3zqle.js}

@@ -1,11 +1,11 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
 import { c as t } from "./cn-B6yFEsav.js";
 import { c } from "./index-BOQuZ0gG.js";
-import { useState as u, useEffect as g } from "react";
-import h from "./Skeleton.es.js";
-import { UserAvatar as b } from "./Icon-UserAvatar.es.js";
+import { useState as x, useEffect as b } from "react";
+import g from "./Skeleton.es.js";
+import { UserAvatar as h } from "./Icon-UserAvatar.es.js";
 const o = c(
-  "bg-brand-secondary-default rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center select-none shrink-0",
+  "bg-brand-secondary-default rounded-full text-brand-secondary-default grid place-items-center overflow-hidden object-cover object-center select-none shrink-0 border border-neutral-default-default",
   {
     variants: {
       size: {
@@ -39,19 +39,19 @@ function I({
   name: n,
   fallbackType: d = "initials"
 }) {
-  const [f, i] = u(!1);
-  if (g(() => {
+  const [f, i] = x(!1);
+  if (b(() => {
     i(!1);
   }, [a]), m)
     return /* @__PURE__ */ e.jsx("div", { ref: r, className: t("inline-flex", l), children: /* @__PURE__ */ e.jsx(
-      h,
+      g,
       {
         shape: "circle",
         className: t(o({ size: s }), "border-0")
       }
     ) });
-  const p = d === "initials" && n, x = !!a && !f;
-  return /* @__PURE__ */ e.jsx("div", { ref: r, className: t(o({ size: s }), l), children: x ? /* @__PURE__ */ e.jsx(
+  const u = d === "initials" && n, p = !!a && !f;
+  return /* @__PURE__ */ e.jsx("div", { ref: r, className: t(o({ size: s }), l), children: p ? /* @__PURE__ */ e.jsx(
     "img",
     {
       src: a,
@@ -60,7 +60,7 @@ function I({
       draggable: !1,
       onError: () => i(!0)
     }
-  ) : p ? /* @__PURE__ */ e.jsx("p", { className: j({ size: s }), children: v(n) }) : /* @__PURE__ */ e.jsx(b, { className: "size-full rounded-full" }) });
+  ) : u ? /* @__PURE__ */ e.jsx("p", { className: j({ size: s }), children: v(n) }) : /* @__PURE__ */ e.jsx(h, { className: "size-full rounded-full" }) });
 }
 export {
   I as A

package/dist/Chip.es.js

@@ -4,7 +4,7 @@ import { c as m } from "./index-BOQuZ0gG.js";
 import { c as h } from "./cn-B6yFEsav.js";
 import { i as V } from "./iconUtils-rTOfKDxE.js";
 import { Close as q } from "./Icon-Close.es.js";
-import { A as Q } from "./AvatarBase-DiSd8Z2B.js";
+import { A as Q } from "./AvatarBase-Yi_3zqle.js";
 const Z = {
   small: "h-5 px-2 text-xs prometeo-fonts-body-small",
   medium: "h-8 px-3 text-sm prometeo-fonts-body-medium",

package/dist/Input.es.js

@@ -81,13 +81,13 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
     { size: "small", className: "border py-1" },
     { size: "medium", className: "border py-2" },
     { size: "large", className: "border-b border-t-0! border-x-0! py-2 outline-none has-focus:border-b-2 has-focus:pb-[7px]" },
-    { disabled: !1, state: "default", className: "border-neutral-primary-default hover:border-brand-secondary-default outline-(--border-brand-secondary-default)  has-focus:border-brand-secondary-default focus-active:bg-red-400!" },
+    { disabled: !1, state: "default", className: "border-neutral-primary-default hover:border-brand-secondary-default outline-(--border-brand-secondary-default) has-focus:border-brand-secondary-default focus-active:bg-red-400! [&:has(:is(:autofill,:-webkit-autofill))]:border-brand-secondary-default [&:has(:is(:autofill,:-webkit-autofill))]:bg-brand-overlay-default" },
     { disabled: !1, state: "success", className: "border-success-onneutral-default hover:border-success-onneutral-hover outline-(--border-success-onneutral-hover) active:border-success-onneutral-hover has-focus:border-success-onneutral-hover" },
     { disabled: !1, state: "error", className: "border-error-onneutral-default hover:border-error-onneutral-hover outline-(--border-error-onneutral-hover) active:border-error-onneutral-hover has-focus:border-error-onneutral-hover" },
     { disabled: !1, state: "warning", className: "border-warning-onneutral-default hover:border-warning-onneutral-hover outline-(--border-warning-onneutral-hover) active:border-warning-onneutral-hover has-focus:border-warning-onneutral-hover" }
   ]
 }), he = c(
-  "w-full flex-1 min-h-0 bg-transparent appearance-none transition-all duration-200 ease-in-out focus:outline-none text-neutral-primary-default placeholder:text-neutral-tertiary-default",
+  "w-full flex-1 min-h-0 bg-transparent appearance-none transition-all duration-200 ease-in-out focus:outline-none text-neutral-primary-default placeholder:text-neutral-tertiary-default [&:is(:autofill,:-webkit-autofill)]:[-webkit-text-fill-color:var(--text-brand-overlay-default)] [&:is(:autofill,:-webkit-autofill)]:[transition:background-color_5000s]",
   {
     variants: {
       size: {
@@ -164,27 +164,27 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
       required: g = !1,
       label: N,
       supportingText: x,
-      showSupportingText: q,
+      showSupportingText: _,
       leadingIcon: f,
       renderValue: u,
       slotActions: m,
-      hideClearButton: _ = !1,
-      onClear: y,
+      hideClearButton: q = !1,
+      onClear: w,
       flexibleHeight: V = !1,
       cardBackground: j,
       onFocus: G,
       onBlur: J,
       onKeyDown: Q,
       onKeyUp: W,
-      defaultValue: T,
-      ...k
-    } = B, w = ne(null), S = I(
+      defaultValue: k,
+      ...T
+    } = B, y = ne(null), S = I(
       (a) => {
-        w.current = a, typeof e == "function" ? e(a) : e && (e.current = a);
+        y.current = a, typeof e == "function" ? e(a) : e && (e.current = a);
       },
       [e]
     ), i = H, o = L, C = O ?? b, l = h !== void 0, [X, E] = re(
-      () => T ?? ""
+      () => k ?? ""
     ), p = l ? h : X, U = d(
       he({
         size: i,
@@ -197,17 +197,17 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
       },
       [l, z]
     ), A = I(() => {
-      if (y) {
-        y();
+      if (w) {
+        w();
         return;
       }
-      const a = w.current;
+      const a = y.current;
       if (!a) return;
       Object.getOwnPropertyDescriptor(
         window.HTMLInputElement.prototype,
         "value"
       )?.set?.call(a, ""), a.dispatchEvent(new Event("input", { bubbles: !0 })), a.dispatchEvent(new Event("change", { bubbles: !0 })), l || E(""), a.focus();
-    }, [y, l]), Y = !_ && !r && p !== void 0 && p !== "", Z = {
+    }, [w, l]), Y = !q && !r && p !== void 0 && p !== "", Z = {
       state: o,
       disabled: !!r,
       size: i,
@@ -257,7 +257,7 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
                 V && (i === "medium" || i === "large") && "h-auto min-h-12"
               ),
               onClick: () => {
-                u || w.current?.focus();
+                u || y.current?.focus();
               },
               children: [
                 j && /* @__PURE__ */ n.jsx(
@@ -289,7 +289,7 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
                             disabled: r,
                             readOnly: v,
                             onChange: F,
-                            ...k
+                            ...T
                           }
                         ),
                         /* @__PURE__ */ n.jsx(
@@ -316,11 +316,10 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
                           name: b,
                           type: R,
                           value: l ? h : void 0,
-                          defaultValue: l ? void 0 : T,
+                          defaultValue: l ? void 0 : k,
                           placeholder: D,
                           className: d(
                             U,
-                            "prometeo-input-autofill",
                             f && "pl-0"
                           ),
                           disabled: r,
@@ -332,7 +331,7 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
                           onKeyDown: Q,
                           onKeyUp: W,
                           "data-state": o,
-                          ...k
+                          ...T
                         }
                       ),
                       /* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-0.5", children: [
@@ -358,13 +357,13 @@ const me = c("relative w-full bg-inherit flex flex-col gap-1", {
               ]
             }
           ),
-          q && /* @__PURE__ */ n.jsx(de, { variant: o, disabled: r, className: "min-h-4", children: typeof x == "function" ? x() : x })
+          _ && /* @__PURE__ */ n.jsx(de, { variant: o, disabled: r, className: "min-h-4", children: typeof x == "function" ? x() : x })
         ]
       }
     );
   }
-), ye = te(xe);
-ye.displayName = "Input";
+), we = te(xe);
+we.displayName = "Input";
 export {
-  ye as default
+  we as default
 };

package/dist/ListItem.es.js

@@ -8,7 +8,7 @@ import M from "./Divider.es.js";
 import Z from "./RadioButton.es.js";
 import q from "./Check.es.js";
 import { ChevronDown as G } from "./Icon-ChevronDown.es.js";
-import { A as H } from "./AvatarBase-DiSd8Z2B.js";
+import { A as H } from "./AvatarBase-Yi_3zqle.js";
 const J = {
   size: "small",
   name: "A B"

package/dist/SegmentedButton.es.js

@@ -1,8 +1,9 @@
-import { j as r } from "./jsx-runtime-GkKLlHH4.js";
-import { c as u } from "./cn-B6yFEsav.js";
-import { c as V } from "./index-BOQuZ0gG.js";
-import L, { useRef as M, useState as R, useLayoutEffect as H, useEffect as T, useMemo as J } from "react";
-const Q = {
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { c as m } from "./cn-B6yFEsav.js";
+import { c as B } from "./index-BOQuZ0gG.js";
+import _, { useRef as O, useState as V, useLayoutEffect as le, useEffect as K, useMemo as T } from "react";
+import re from "./PlainTooltip.es.js";
+const se = {
   default: "brand",
   danger: "error"
 }, a = {
@@ -10,39 +11,45 @@ const Q = {
     pill: "bg-brand-secondary-default text-neutral-onbrandsecondary-default",
     container: "border-neutral-default-default",
     option: "text-neutral-secondary-default",
-    icon: "icon-neutral-onbrandsecondary-default"
+    icon: "icon-neutral-onbrandsecondary-default",
+    optionIcon: "icon-neutral-secondary-default"
   },
   neutral: {
     pill: "bg-neutral-tertiary-default text-neutral-default-default",
     container: "border-neutral-default-default",
     option: "text-neutral-secondary-default",
-    icon: "icon-neutral-default-default"
+    icon: "icon-neutral-default-default",
+    optionIcon: "icon-neutral-secondary-default"
   },
   error: {
     pill: "bg-error-secondary-default text-semantic-error-secondary-default",
     container: "border-neutral-default-default",
     option: "text-neutral-secondary-default",
-    icon: "icon-semantic-error-secondary-default"
+    icon: "icon-semantic-error-secondary-default",
+    optionIcon: "icon-neutral-secondary-default"
   },
   success: {
     pill: "bg-success-secondary-default text-semantic-success-secondary-default",
     container: "border-neutral-default-default",
     option: "text-neutral-secondary-default",
-    icon: "icon-semantic-success-secondary-default"
+    icon: "icon-semantic-success-secondary-default",
+    optionIcon: "icon-neutral-secondary-default"
   },
   warning: {
     pill: "bg-warning-secondary-default text-semantic-warning-secondary-default",
     container: "border-neutral-default-default",
     option: "text-neutral-secondary-default",
-    icon: "icon-semantic-warning-secondary-default"
+    icon: "icon-semantic-warning-secondary-default",
+    optionIcon: "icon-neutral-secondary-default"
   },
   disabled: {
     pill: "bg-disabled-default text-disabled-ondisabled",
     container: "border-neutral-default-default opacity-80",
     option: "text-disabled-default",
-    icon: "icon-disabled-ondisabled"
+    icon: "icon-disabled-ondisabled",
+    optionIcon: "icon-disabled-default"
   }
-}, o = {
+}, f = {
   small: {
     container: "py-[3px] px-[3px] radius-medium",
     pill: "px-3 py-1 gap-0.5 radius-small pyrion-fonts-label-medium",
@@ -58,23 +65,39 @@ const Q = {
     pill: "px-4 py-2.5 gap-0.5 radius-medium pyrion-fonts-label-large",
     option: "px-4 py-2 gap-[2px] pyrion-fonts-body-medium"
   }
-}, j = 20, A = (f, i) => {
-  const b = f.reduce((x, c) => x + c, 0);
-  if (b <= 0) return f;
-  let n = i;
-  return f.map((x, c) => {
-    if (c === f.length - 1) return n;
-    const h = Math.round(x * i / b);
-    return n -= h, h;
+}, I = 20, Z = (i, c) => i ? typeof i == "function" ? _.createElement(i, {
+  size: I,
+  className: m(c, "shrink-0!")
+}) : _.cloneElement(
+  i,
+  {
+    size: I,
+    className: m(c, "shrink-0!")
+  }
+) : /* @__PURE__ */ n.jsx(
+  "span",
+  {
+    className: "inline-block shrink-0",
+    style: { width: 0, height: I },
+    "aria-hidden": !0
+  }
+), D = (i, c) => {
+  const w = i.reduce((v, h) => v + h, 0);
+  if (w <= 0) return i;
+  let l = c;
+  return i.map((v, h) => {
+    if (h === i.length - 1) return l;
+    const N = Math.round(v * c / w);
+    return l -= N, N;
   });
-}, U = V(
+}, oe = B(
   "relative border inline-flex bg-neutral-default-default border-neutral-default-default radius-large w-max max-w-full ",
   {
     variants: {
       size: {
-        small: o.small.container,
-        medium: o.medium.container,
-        large: o.large.container
+        small: f.small.container,
+        medium: f.medium.container,
+        large: f.large.container
       },
       color: {
         brand: "",
@@ -98,12 +121,12 @@ const Q = {
       color: "brand"
     }
   }
-), X = "transition-[left] duration-300 ease-[cubic-bezier(0.175,0.885,0.32,1.075)]", Y = "transition-[width] duration-500 ease-out", $ = V("absolute top-1/2 -translate-y-1/2 h-max z-30 flex items-center justify-center", {
+), ie = "transition-[left,right] duration-300 ease-[cubic-bezier(0.175,0.885,0.32,1.075)]", ce = "transition-[width] duration-500 ease-out", de = B("absolute top-1/2 -translate-y-1/2 h-max z-30 flex items-center justify-center", {
   variants: {
     size: {
-      small: o.small.pill,
-      medium: o.medium.pill,
-      large: o.large.pill
+      small: f.small.pill,
+      medium: f.medium.pill,
+      large: f.large.pill
     },
     color: {
       brand: "",
@@ -126,14 +149,14 @@ const Q = {
     size: "medium",
     color: "brand"
   }
-}), ee = V(
+}), ue = B(
   "z-20 h-full min-h-5 flex items-center justify-center select-none text-nowrap shrink-0",
   {
     variants: {
       size: {
-        small: o.small.option,
-        medium: o.medium.option,
-        large: o.large.option
+        small: f.small.option,
+        medium: f.medium.option,
+        large: f.large.option
       },
       color: {
         brand: "",
@@ -157,133 +180,162 @@ const Q = {
       color: "brand"
     }
   }
-), re = (f) => {
+), xe = (i) => {
   const {
-    size: i = "medium",
-    color: b = "default",
-    options: n,
-    value: x,
-    name: c,
-    onChange: h,
-    icon: y,
-    allowExpand: E,
-    equalWidth: B,
-    disabled: g = !1
-  } = f, N = M([]), q = M(null), k = M(null), [d, F] = R(!1), [W, P] = R(!1), [w, O] = R([]), C = B ?? (E === !0 ? !1 : E === !1 ? !0 : void 0), s = C === "fill", z = C === !0, m = g ? "disabled" : Q[b] ?? b, p = Math.max(n.findIndex((e) => e.value === x), 0), K = n[p] ?? n[0], _ = n.map((e) => e.label).join("\0"), S = !!y;
-  H(() => {
-    const e = n.map((t, v) => {
-      const I = N.current[v];
-      return Math.ceil(I?.getBoundingClientRect().width ?? 0);
+    size: c = "medium",
+    color: w = "default",
+    options: l,
+    value: v,
+    name: h,
+    onChange: N,
+    icon: F,
+    allowExpand: L,
+    equalWidth: G,
+    disabled: j = !1,
+    className: H,
+    pillClassName: J,
+    iconClassName: Q,
+    optionClassName: M,
+    optionIconClassName: U
+  } = i, x = O([]), X = O(null), R = O(null), [d, Y] = V(!1), [z, ee] = V(!1), [u, S] = V([]), A = G ?? (L === !0 ? !1 : L === !1 ? !0 : void 0), o = A === "fill", C = A === !0, y = j ? "disabled" : se[w] ?? w, b = Math.max(l.findIndex((e) => e.value === v), 0), E = l[b] ?? l[0], q = l.map((e) => `${e.label ?? ""}
${e.icon ? "1" : "0"}`).join("\0"), P = !!F || l.some((e) => !!e.icon), te = E?.icon ?? F;
+  le(() => {
+    const e = l.map((r, p) => {
+      const t = x.current[p];
+      return Math.ceil(t?.getBoundingClientRect().width ?? 0);
     });
-    if (e.some((t) => t <= 0)) return;
-    let l;
-    if (s) {
-      const t = k.current?.offsetWidth ?? 0;
-      if (t <= 0) return;
-      l = A(e, t);
-    } else z ? l = n.map(() => Math.max(...e)) : l = e;
-    O(l), F(!0);
-  }, [n.length, _, i, S, g, s, z, m]), T(() => {
+    if (e.some((r) => r <= 0)) return;
+    let s;
+    if (o) {
+      const r = R.current?.offsetWidth ?? 0;
+      if (r <= 0) return;
+      s = D(e, r);
+    } else C ? s = l.map(() => Math.max(...e)) : s = e;
+    S(s), Y(!0);
+  }, [l.length, q, c, P, j, o, C, y, M]), K(() => {
     document.fonts.status !== "loaded" && document.fonts.ready.then(() => {
-      N.current.forEach((t) => {
+      const e = x.current.map(
+        (t) => t ? {
+          width: t.style.width,
+          minWidth: t.style.minWidth,
+          maxWidth: t.style.maxWidth
+        } : null
+      ), s = () => {
+        x.current.forEach((t, W) => {
+          const g = e[W];
+          !t || !g || (t.style.width = g.width, t.style.minWidth = g.minWidth, t.style.maxWidth = g.maxWidth);
+        });
+      };
+      x.current.forEach((t) => {
         t && (t.style.width = "", t.style.minWidth = "", t.style.maxWidth = "");
       });
-      const e = n.map((t, v) => {
-        const I = N.current[v];
-        return Math.ceil(I?.getBoundingClientRect().width ?? 0);
+      const r = l.map((t, W) => {
+        const g = x.current[W];
+        return Math.ceil(g?.getBoundingClientRect().width ?? 0);
       });
-      if (e.some((t) => t <= 0)) return;
-      let l;
-      if (z)
-        l = n.map(() => Math.max(...e));
-      else if (s) {
-        const t = k.current?.offsetWidth ?? 0;
-        l = t > 0 ? A(e, t) : e;
+      if (r.some((t) => t <= 0)) {
+        s();
+        return;
+      }
+      let p;
+      if (C)
+        p = l.map(() => Math.max(...r));
+      else if (o) {
+        const t = R.current?.offsetWidth ?? 0;
+        p = t > 0 ? D(r, t) : r;
       } else
-        l = e;
-      O(l);
+        p = r;
+      s(), S(p);
     });
-  }, [n.length, _, i, S, s, z]), T(() => {
-    d && !W && P(!0);
-  }, [d, W]);
-  const Z = J(() => !d || w.length === 0 ? 0 : w.slice(0, p).reduce((e, l) => e + l, 0), [d, w, p]), D = () => {
-    const e = p === n.length - 1 ? n[0] : n[p + 1];
-    h?.(c, e.value);
-  }, G = () => y ? typeof y == "function" ? L.createElement(y, {
-    size: j,
-    className: u(a[m].icon, "shrink-0!")
-  }) : L.cloneElement(
-    y,
-    {
-      size: j,
-      className: u(a[m].icon, "shrink-0!")
-    }
-  ) : /* @__PURE__ */ r.jsx("span", { className: "inline-block shrink-0", style: { width: 0, height: j }, "aria-hidden": !0 });
-  return /* @__PURE__ */ r.jsx(
+  }, [l.length, q, c, P, o, C, M]), K(() => {
+    d && !z && ee(!0);
+  }, [d, z]);
+  const k = T(() => !d || u.length === 0 ? 0 : u.slice(0, b).reduce((e, s) => e + s, 0), [d, u, b]), $ = T(
+    () => u.reduce((e, s) => e + s, 0),
+    [u]
+  ), ne = T(() => !d || u.length === 0 ? 0 : $ - k - (u[b] ?? 0), [d, u, $, k, b]), ae = () => {
+    const e = b === l.length - 1 ? l[0] : l[b + 1];
+    N?.(h, e.value);
+  };
+  return /* @__PURE__ */ n.jsx(
     "button",
     {
-      ref: q,
-      name: c,
+      ref: X,
+      name: h,
       type: "button",
-      disabled: g,
-      className: u(
-        U({ size: i, color: m }),
-        s && "w-full",
-        !g && "cursor-pointer"
+      disabled: j,
+      className: m(
+        oe({ size: c, color: y }),
+        o && "w-full",
+        !j && "cursor-pointer",
+        H
       ),
-      children: /* @__PURE__ */ r.jsxs("div", { ref: k, className: u("flex items-center relative w-max max-w-full", s && "w-full"), children: [
-        /* @__PURE__ */ r.jsxs(
+      children: /* @__PURE__ */ n.jsxs("div", { ref: R, className: m("flex items-center relative w-max max-w-full", o && "w-full"), children: [
+        /* @__PURE__ */ n.jsxs(
           "div",
           {
-            style: { left: Z, width: w[p] },
-            className: u(
-              $({ size: i, color: m }),
-              W && X,
+            style: d ? { left: k, right: ne } : { left: k },
+            className: m(
+              de({ size: c, color: y }),
+              z && ie,
               "overflow-hidden",
-              s && "justify-center"
+              o && "justify-center",
+              J
             ),
-            onClick: D,
+            onClick: ae,
             children: [
-              G(),
-              /* @__PURE__ */ r.jsx("span", { className: u("select-none", s ? "truncate min-w-0" : "text-nowrap"), children: K.label })
+              Z(te, m(a[y].icon, Q)),
+              E.label != null && /* @__PURE__ */ n.jsx("span", { className: m("select-none", o ? "truncate min-w-0" : "text-nowrap"), children: E.label })
             ]
           }
         ),
-        n.map((e, l) => {
-          const t = w[l];
-          return /* @__PURE__ */ r.jsxs(
+        l.map((e, s) => {
+          const r = u[s], p = !!e.icon, t = /* @__PURE__ */ n.jsx(
             "span",
             {
-              ref: (v) => {
-                N.current[l] = v;
+              ref: (W) => {
+                x.current[s] = W;
               },
-              onClick: () => h?.(c, e.value),
-              style: d ? { width: t, minWidth: t, maxWidth: t } : void 0,
-              className: u(
-                ee({ size: i, color: m }),
-                s ? "min-w-0 shrink-0" : "w-max shrink",
-                W && Y,
-                !g && "cursor-pointer",
+              onClick: () => N?.(h, e.value),
+              style: d ? { width: r, minWidth: r, maxWidth: r } : void 0,
+              className: m(
+                ue({ size: c, color: y }),
+                o ? "min-w-0 shrink-0" : "w-max shrink",
+                z && ce,
+                !j && "cursor-pointer",
                 "flex gap-0.5 relative",
-                s && d && "justify-center overflow-hidden"
+                o && d && "justify-center overflow-hidden",
+                M
               ),
-              "aria-label": e.label,
-              children: [
-                /* @__PURE__ */ r.jsx("span", { className: "inline-block shrink-0", style: { width: j, height: j }, "aria-hidden": !0 }),
-                s && d ? /* @__PURE__ */ r.jsx("span", { className: "truncate min-w-0", children: e.label }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-                  /* @__PURE__ */ r.jsx("p", { className: "invisible", children: e.label }),
-                  /* @__PURE__ */ r.jsx("p", { className: "absolute left-1/2 -translate-x-1/2 truncate!", children: e.label })
+              "aria-label": e.ariaLabel ?? e.label,
+              children: p ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+                Z(
+                  e.icon,
+                  m(a[y].optionIcon, U)
+                ),
+                e.label != null && (o && d ? /* @__PURE__ */ n.jsx("span", { className: "truncate min-w-0", children: e.label }) : /* @__PURE__ */ n.jsx("span", { className: "text-nowrap", children: e.label }))
+              ] }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+                /* @__PURE__ */ n.jsx(
+                  "span",
+                  {
+                    className: "inline-block shrink-0",
+                    style: { width: I, height: I },
+                    "aria-hidden": !0
+                  }
+                ),
+                o && d ? /* @__PURE__ */ n.jsx("span", { className: "truncate min-w-0", children: e.label }) : /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+                  /* @__PURE__ */ n.jsx("p", { className: "invisible", children: e.label }),
+                  /* @__PURE__ */ n.jsx("p", { className: "absolute left-1/2 -translate-x-1/2 truncate!", children: e.label })
                 ] })
-              ]
-            },
-            e.value
+              ] })
+            }
           );
+          return e.tooltipText ? /* @__PURE__ */ n.jsx(re, { title: e.tooltipText, asChild: !0, children: t }, e.value) : /* @__PURE__ */ n.jsx(_.Fragment, { children: t }, e.value);
         })
       ] })
     }
   );
 };
 export {
-  re as SegmentedButton,
-  re as default
+  xe as SegmentedButton,
+  xe as default
 };

package/dist/TabSwitch.es.js

@@ -286,7 +286,7 @@ const pe = (e, t) => e.path === t || e.relatedPaths?.some((n) => n === "/" ? t =
         open: !g,
         onOpenChange: (f) => S(!f),
         disabled: A,
-        children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col gap-2", id: l, children: [
+        children: /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col gap-0", id: l, children: [
           _,
           /* @__PURE__ */ i.jsx("div", { className: A || p ? "hidden" : "contents", children: T() })
         ] })