@underverse-ui/underverse 1.0.95 → 1.0.97

package/dist/index.d.cts

@@ -611,8 +611,12 @@ interface Tab {
         className?: string;
     }>;
     disabled?: boolean;
+    href?: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 interface TabsProps {
+    id?: string;
     tabs: Tab[];
     defaultValue?: string;
     className?: string;

package/dist/index.d.ts

@@ -611,8 +611,12 @@ interface Tab {
         className?: string;
     }>;
     disabled?: boolean;
+    href?: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 interface TabsProps {
+    id?: string;
     tabs: Tab[];
     defaultValue?: string;
     className?: string;

package/dist/index.js

@@ -6608,7 +6608,40 @@ var variantStyles5 = {
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
 };
+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-${normalizeTabsId(key || "default")}`;
+}
+function getTabTriggerId(baseId, index) {
+  return `${baseId}-tab-${index}`;
+}
+function getTabPanelId(baseId, index) {
+  return `${baseId}-panel-${index}`;
+}
+function getTabHref(tab, panelId) {
+  return tab.href ?? `#${panelId}`;
+}
+function resolveTabValueFromHash(hash, tabs, baseId) {
+  const normalizedHash = hash.replace(/^#/, "");
+  if (!normalizedHash) return null;
+  const matchIndex = tabs.findIndex((tab, index) => {
+    const tabId = getTabTriggerId(baseId, index);
+    const panelId = getTabPanelId(baseId, index);
+    return normalizedHash === tabId || normalizedHash === panelId;
+  });
+  return matchIndex >= 0 ? tabs[matchIndex]?.value ?? null : null;
+}
+function shouldHandleTabClickLocally(event, target) {
+  return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || target === "_blank");
+}
 var Tabs = ({
+  id,
   tabs,
   defaultValue,
   className,
@@ -6625,14 +6658,34 @@ var Tabs = ({
   const [active, setActive] = React22.useState(defaultValue || tabs[0]?.value);
   const [underlineStyle, setUnderlineStyle] = React22.useState({});
   const tabRefs = React22.useRef([]);
-  const baseId = React22.useMemo(() => {
-    const key = tabs.map((t) => t.value).join("-");
-    return `tabs-${key || "default"}`;
-  }, [tabs]);
+  const autoId = React22.useId();
+  const baseId = React22.useMemo(() => getTabsBaseId(tabs, id, autoId), [autoId, id, tabs]);
   const handleTabChange = (value) => {
     setActive(value);
     onTabChange?.(value);
   };
+  const handleTabKeyDown = (event) => {
+    const count = tabs.length;
+    const idx = tabs.findIndex((t) => t.value === active);
+    let next = idx;
+    if (orientation === "horizontal") {
+      if (event.key === "ArrowRight") next = (idx + 1) % count;
+      if (event.key === "ArrowLeft") next = (idx - 1 + count) % count;
+    } else {
+      if (event.key === "ArrowDown") next = (idx + 1) % count;
+      if (event.key === "ArrowUp") next = (idx - 1 + count) % count;
+    }
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = count - 1;
+    if (next !== idx) {
+      event.preventDefault();
+      const nextTab = tabs[next];
+      if (!nextTab?.disabled) {
+        handleTabChange(nextTab.value);
+      }
+      tabRefs.current[next]?.focus();
+    }
+  };
   React22.useEffect(() => {
     if (variant === "underline" && orientation === "horizontal") {
       const activeIndex2 = tabs.findIndex((tab) => tab.value === active);
@@ -6646,6 +6699,18 @@ var Tabs = ({
       }
     }
   }, [active, variant, orientation, tabs]);
+  React22.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const syncFromHash = () => {
+      const nextValue = resolveTabValueFromHash(window.location.hash, tabs, baseId);
+      if (nextValue) {
+        setActive(nextValue);
+      }
+    };
+    syncFromHash();
+    window.addEventListener("hashchange", syncFromHash);
+    return () => window.removeEventListener("hashchange", syncFromHash);
+  }, [baseId, tabs]);
   const containerClasses = cn(
     "relative",
     orientation === "horizontal" ? "w-full flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
@@ -6668,59 +6733,69 @@ var Tabs = ({
       tabs.map((tab, index) => {
         const isActive = active === tab.value;
         const Icon = tab.icon;
-        const tabId2 = `${baseId}-tab-${index}`;
-        const panelId2 = `${baseId}-panel-${index}`;
+        const tabId2 = getTabTriggerId(baseId, index);
+        const panelId2 = getTabPanelId(baseId, index);
+        const tabHref = getTabHref(tab, panelId2);
+        const sharedClassName = cn(
+          "font-medium transition-all duration-200 cursor-pointer flex items-center gap-2",
+          "focus:outline-none focus-visible:outline-none",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          sizeStyles6[size].tab,
+          variantStyles5[variant].tab,
+          isActive ? variantStyles5[variant].activeTab : variantStyles5[variant].inactiveTab,
+          orientation === "vertical" && "justify-start w-full",
+          stretch && orientation === "horizontal" && "flex-1 justify-center",
+          tab.href && tab.disabled && "pointer-events-none cursor-not-allowed opacity-50"
+        );
+        const sharedStyle = {
+          boxShadow: "none",
+          transform: "none",
+          outline: "none",
+          border: "none"
+        };
+        const sharedProps = {
+          ref: (el) => {
+            tabRefs.current[index] = el;
+          },
+          id: tabId2,
+          role: "tab",
+          "aria-selected": isActive,
+          "aria-controls": panelId2,
+          tabIndex: isActive ? 0 : -1,
+          className: sharedClassName,
+          style: sharedStyle,
+          onKeyDown: handleTabKeyDown
+        };
+        if (!tab.disabled) {
+          return /* @__PURE__ */ jsxs20(
+            "a",
+            {
+              ...sharedProps,
+              href: tabHref,
+              target: tab.target,
+              rel: tab.rel,
+              onClick: (event) => {
+                if (shouldHandleTabClickLocally(event, tab.target)) {
+                  event.preventDefault();
+                  handleTabChange(tab.value);
+                }
+              },
+              className: cn(sharedClassName, "no-underline"),
+              children: [
+                Icon && /* @__PURE__ */ jsx27(Icon, { className: "h-4 w-4" }),
+                tab.label
+              ]
+            },
+            tab.value
+          );
+        }
         return /* @__PURE__ */ jsxs20(
           "button",
           {
-            ref: (el) => {
-              tabRefs.current[index] = el;
-            },
+            ...sharedProps,
             onClick: () => !tab.disabled && handleTabChange(tab.value),
             disabled: tab.disabled,
-            style: {
-              boxShadow: "none",
-              transform: "none",
-              outline: "none",
-              border: "none"
-            },
-            className: cn(
-              "font-medium transition-all duration-200 cursor-pointer flex items-center gap-2",
-              "focus:outline-none focus-visible:outline-none",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              "border-0 bg-transparent outline-none",
-              // Reset button default styles
-              sizeStyles6[size].tab,
-              variantStyles5[variant].tab,
-              isActive ? variantStyles5[variant].activeTab : variantStyles5[variant].inactiveTab,
-              orientation === "vertical" && "justify-start w-full",
-              stretch && orientation === "horizontal" && "flex-1 justify-center"
-            ),
-            role: "tab",
-            id: tabId2,
-            "aria-selected": isActive,
-            "aria-controls": panelId2,
-            tabIndex: isActive ? 0 : -1,
-            onKeyDown: (e) => {
-              const count = tabs.length;
-              const idx = tabs.findIndex((t) => t.value === active);
-              let next = idx;
-              if (orientation === "horizontal") {
-                if (e.key === "ArrowRight") next = (idx + 1) % count;
-                if (e.key === "ArrowLeft") next = (idx - 1 + count) % count;
-              } else {
-                if (e.key === "ArrowDown") next = (idx + 1) % count;
-                if (e.key === "ArrowUp") next = (idx - 1 + count) % count;
-              }
-              if (e.key === "Home") next = 0;
-              if (e.key === "End") next = count - 1;
-              if (next !== idx) {
-                e.preventDefault();
-                const nextVal = tabs[next].value;
-                handleTabChange(nextVal);
-                tabRefs.current[next]?.focus();
-              }
-            },
+            className: cn(sharedClassName, "border-0 bg-transparent outline-none"),
             children: [
               Icon && /* @__PURE__ */ jsx27(Icon, { className: "h-4 w-4" }),
               tab.label
@@ -6981,7 +7056,7 @@ import { ChevronLeft, ChevronRight as ChevronRight2, ChevronsLeft, ChevronsRight
 
 // src/components/Combobox.tsx
 import * as React24 from "react";
-import { useId as useId5 } from "react";
+import { useId as useId6 } from "react";
 import { ChevronDown, Search as Search4, SearchX, Check as Check3, X as X9 } from "lucide-react";
 import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var getOptionLabel = (option) => {
@@ -7040,7 +7115,7 @@ var Combobox = ({
   const inputRef = React24.useRef(null);
   const optionsViewportRef = React24.useRef(null);
   useOverlayScrollbarTarget(optionsViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId5();
+  const autoId = useId6();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const enableSearch = options.length > 10;
@@ -8102,7 +8177,7 @@ function formatDateSmart(date, locale = "en") {
 // src/components/DatePicker.tsx
 import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, Sparkles as Sparkles2, X as XIcon } from "lucide-react";
 import * as React28 from "react";
-import { useId as useId6 } from "react";
+import { useId as useId7 } from "react";
 import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var DatePicker = ({
   id,
@@ -8509,7 +8584,7 @@ var DatePicker = ({
       )
     ] })
   ] });
-  const autoId = useId6();
+  const autoId = useId7();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = sizeStyles8[size].label;
@@ -9088,7 +9163,7 @@ var DateRangePicker = ({
   const displayFormat = (date) => formatDateShort(date);
   const displayLabel = tempStart && tempEnd ? `${displayFormat(tempStart)} - ${displayFormat(tempEnd)}` : tempStart ? `${displayFormat(tempStart)} - ...` : placeholder;
   const effectiveError = localRequiredError;
-  const autoId = useId6();
+  const autoId = useId7();
   const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-1.5", className), children: [
@@ -15203,7 +15278,7 @@ function CalendarTimeline({
 
 // src/components/MultiCombobox.tsx
 import * as React39 from "react";
-import { useId as useId8 } from "react";
+import { useId as useId9 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X13, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var MultiCombobox = ({
@@ -15341,7 +15416,7 @@ var MultiCombobox = ({
     outline: "border-2 border-input bg-transparent hover:border-primary",
     ghost: "border border-transparent bg-muted/50 hover:bg-muted"
   };
-  const autoId = useId8();
+  const autoId = useId9();
   const resolvedId = id ? String(id) : `multicombobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
@@ -16845,7 +16920,7 @@ function OverlayControls({
 }
 
 // src/components/CategoryTreeSelect.tsx
-import { useEffect as useEffect25, useId as useId10, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
+import { useEffect as useEffect25, useId as useId11, useMemo as useMemo19, useRef as useRef19, useState as useState31 } from "react";
 import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown5, FolderTree, Layers, Search as Search6, SearchX as SearchX3, X as X14 } from "lucide-react";
 import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var defaultLabels = {
@@ -16902,7 +16977,7 @@ function CategoryTreeSelect(props) {
   const searchInputRef = useRef19(null);
   const dropdownViewportRef = useRef19(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
-  const autoId = useId10();
+  const autoId = useId11();
   const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
   const effectiveError = error ?? localRequiredError;
@@ -20664,7 +20739,7 @@ var MusicPlayer = ({
 var MusicPlayer_default = MusicPlayer;
 
 // src/components/Grid.tsx
-import React51, { useId as useId11 } from "react";
+import React51, { useId as useId12 } from "react";
 import { Fragment as Fragment20, jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
 var BP_MIN = {
   sm: 640,
@@ -20729,7 +20804,7 @@ var GridRoot = React51.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const id = useId11().replace(/[:]/g, "");
+    const id = useId12().replace(/[:]/g, "");
     const baseClass = `uv-grid-${id}`;
     const baseCols = toTemplateCols(columns, minColumnWidth);
     const baseRows = toTemplateRows(rows);