@underverse-ui/underverse 1.0.96 → 1.0.97

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.96",
+  "version": "1.0.97",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -6793,9 +6793,15 @@ var variantStyles5 = {
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
 };
-function getTabsBaseId(tabs) {
+function normalizeTabsId(value) {
+  const normalized = value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  return normalized || "default";
+}
+function getTabsBaseId(tabs, id, fallbackId) {
+  if (id) return `tabs-${normalizeTabsId(id)}`;
+  if (fallbackId) return `tabs-${normalizeTabsId(fallbackId)}`;
   const key = tabs.map((t) => t.value).join("-");
-  return `tabs-${key || "default"}`;
+  return `tabs-${normalizeTabsId(key || "default")}`;
 }
 function getTabTriggerId(baseId, index) {
   return `${baseId}-tab-${index}`;
@@ -6820,6 +6826,7 @@ function shouldHandleTabClickLocally(event, target) {
   return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || target === "_blank");
 }
 var Tabs = ({
+  id,
   tabs,
   defaultValue,
   className,
@@ -6836,7 +6843,8 @@ var Tabs = ({
   const [active, setActive] = React22.useState(defaultValue || tabs[0]?.value);
   const [underlineStyle, setUnderlineStyle] = React22.useState({});
   const tabRefs = React22.useRef([]);
-  const baseId = React22.useMemo(() => getTabsBaseId(tabs), [tabs]);
+  const autoId = React22.useId();
+  const baseId = React22.useMemo(() => getTabsBaseId(tabs, id, autoId), [autoId, id, tabs]);
   const handleTabChange = (value) => {
     setActive(value);
     onTabChange?.(value);