@martinsura/ui 0.1.4 → 0.1.5

package/dist/index.cjs

@@ -3721,42 +3721,45 @@ var Tabs = ({
       props.className,
       props.classNames?.list
     ),
-    children: props.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        role: "tab",
-        "aria-selected": props.value === opt.value,
-        disabled: opt.disabled,
-        onClick: () => !opt.disabled && props.onChange(opt.value),
-        className: tailwindMerge.twMerge(
-          "flex-1 min-w-0 transition-all duration-150 cursor-pointer select-none whitespace-nowrap",
-          "inline-flex items-center justify-center gap-2",
-          tabSizeClass[size],
-          tabVariantClass[variant],
-          props.value === opt.value ? activeVariantClass[variant] : inactiveVariantClass[variant],
-          opt.disabled && "cursor-not-allowed opacity-45 hover:border-(--ui-border) hover:text-(--ui-text-muted)",
-          props.classNames?.tab,
-          props.value === opt.value ? props.classNames?.activeTab : props.classNames?.inactiveTab
-        ),
-        children: [
-          opt.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("shrink-0", props.classNames?.icon), children: opt.icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: opt.label }),
-          opt.badge && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: tailwindMerge.twMerge(
-                "shrink-0 rounded-full px-2 py-0.5 text-[11px] leading-none",
-                props.value === opt.value ? "bg-(--ui-primary) text-(--ui-primary-text)" : "bg-(--ui-surface-muted) text-(--ui-text-muted)",
-                props.classNames?.badge
-              ),
-              children: opt.badge
-            }
-          )
-        ]
-      },
-      opt.value
-    ))
+    children: props.options.map((opt) => {
+      const isSimpleLabel = typeof opt.label === "string" || typeof opt.label === "number";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": props.value === opt.value,
+          disabled: opt.disabled,
+          onClick: () => !opt.disabled && props.onChange(opt.value),
+          className: tailwindMerge.twMerge(
+            "flex-1 min-w-0 transition-all duration-150 cursor-pointer select-none whitespace-nowrap",
+            "inline-flex items-center justify-center gap-2",
+            tabSizeClass[size],
+            tabVariantClass[variant],
+            props.value === opt.value ? activeVariantClass[variant] : inactiveVariantClass[variant],
+            opt.disabled && "cursor-not-allowed opacity-45 hover:border-(--ui-border) hover:text-(--ui-text-muted)",
+            props.classNames?.tab,
+            props.value === opt.value ? props.classNames?.activeTab : props.classNames?.inactiveTab
+          ),
+          children: [
+            opt.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("shrink-0", props.classNames?.icon), children: opt.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("min-w-0", isSimpleLabel && "truncate"), children: opt.label }),
+            opt.badge && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: tailwindMerge.twMerge(
+                  "shrink-0 rounded-full px-2 py-0.5 text-[11px] leading-none",
+                  props.value === opt.value ? "bg-(--ui-primary) text-(--ui-primary-text)" : "bg-(--ui-surface-muted) text-(--ui-text-muted)",
+                  props.classNames?.badge
+                ),
+                children: opt.badge
+              }
+            )
+          ]
+        },
+        opt.value
+      );
+    })
   }
 );
 var colorClasses = {