@underverse-ui/underverse 1.0.94 → 1.0.96

package/dist/index.d.cts

@@ -465,7 +465,7 @@ declare const ToastProvider: React__default.FC<ToastProviderProps>;
 
 type Side = "top" | "right" | "bottom" | "left";
 type TooltipPlacement = Side;
-interface TooltipProps {
+declare const Tooltip: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement>, "children" | "content"> & {
     children: React$1.ReactElement;
     content: React$1.ReactNode;
     placement?: TooltipPlacement;
@@ -478,8 +478,7 @@ interface TooltipProps {
     variant?: "default" | "info" | "warning" | "error" | "success";
     /** When true, augment the child directly instead of adding a wrapper. Default: true */
     asChild?: boolean;
-}
-declare const Tooltip: React$1.FC<TooltipProps>;
+} & React$1.RefAttributes<HTMLElement>>;
 
 type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 interface PopoverProps {
@@ -612,6 +611,9 @@ interface Tab {
         className?: string;
     }>;
     disabled?: boolean;
+    href?: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 interface TabsProps {
     tabs: Tab[];

package/dist/index.d.ts

@@ -465,7 +465,7 @@ declare const ToastProvider: React__default.FC<ToastProviderProps>;
 
 type Side = "top" | "right" | "bottom" | "left";
 type TooltipPlacement = Side;
-interface TooltipProps {
+declare const Tooltip: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement>, "children" | "content"> & {
     children: React$1.ReactElement;
     content: React$1.ReactNode;
     placement?: TooltipPlacement;
@@ -478,8 +478,7 @@ interface TooltipProps {
     variant?: "default" | "info" | "warning" | "error" | "success";
     /** When true, augment the child directly instead of adding a wrapper. Default: true */
     asChild?: boolean;
-}
-declare const Tooltip: React$1.FC<TooltipProps>;
+} & React$1.RefAttributes<HTMLElement>>;
 
 type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 interface PopoverProps {
@@ -612,6 +611,9 @@ interface Tab {
         className?: string;
     }>;
     disabled?: boolean;
+    href?: string;
+    target?: React$1.HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 interface TabsProps {
     tabs: Tab[];

package/dist/index.js

@@ -2745,20 +2745,10 @@ function useHydrated() {
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
-// src/components/Tooltip.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var variantStyles2 = {
-  default: "bg-popover text-popover-foreground border-border/50",
-  info: "bg-info text-info-foreground border-info/20",
-  warning: "bg-warning text-warning-foreground border-warning/20",
-  error: "bg-destructive text-destructive-foreground border-destructive/20",
-  success: "bg-success text-success-foreground border-success/20"
-};
-var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-function composeEventHandlers(theirHandler, ourHandler) {
+// src/utils/react-compose.ts
+function chainEventHandlers(...handlers) {
   return (event) => {
-    theirHandler?.(event);
-    ourHandler(event);
+    handlers.forEach((handler) => handler?.(event));
   };
 }
 function setRefValue(ref, value) {
@@ -2774,6 +2764,17 @@ function mergeRefs(...refs) {
     refs.forEach((ref) => setRefValue(ref, value));
   };
 }
+
+// src/components/Tooltip.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var variantStyles2 = {
+  default: "bg-popover text-popover-foreground border-border/50",
+  info: "bg-info text-info-foreground border-info/20",
+  warning: "bg-warning text-warning-foreground border-warning/20",
+  error: "bg-destructive text-destructive-foreground border-destructive/20",
+  success: "bg-success text-success-foreground border-success/20"
+};
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
 function getTransformOrigin(side) {
   switch (side) {
     case "top":
@@ -2818,7 +2819,7 @@ function computeTooltipPosition(args) {
   top = clamp(top, padding, viewport.height - contentSize.height - padding);
   return { top, left, side };
 }
-var Tooltip = ({
+var Tooltip = React9.forwardRef(({
   children,
   content,
   placement = "top",
@@ -2826,8 +2827,9 @@ var Tooltip = ({
   className,
   disabled = false,
   variant = "default",
-  asChild = true
-}) => {
+  asChild = true,
+  ...triggerPassthroughProps
+}, forwardedRef) => {
   const [isOpen, setIsOpen] = React9.useState(false);
   const isMounted = useHydrated();
   const triggerRef = React9.useRef(null);
@@ -2942,31 +2944,53 @@ var Tooltip = ({
     if (panelRef.current) ro.observe(panelRef.current);
     return () => ro.disconnect();
   }, [isOpen, updatePosition]);
+  const childProps = children.props;
+  const childRef = childProps.ref;
+  const passthroughRef = mergeRefs(forwardedRef, childRef, (node) => {
+    triggerRef.current = node;
+  });
   if (disabled || !content) {
-    return children;
+    if (!asChild) return children;
+    return React9.cloneElement(children, {
+      ...triggerPassthroughProps,
+      ref: passthroughRef
+    });
   }
-  const childProps = children.props;
-  const childRef = children.ref ?? childProps.ref;
   const triggerProps = {
-    ref: mergeRefs(childRef, (node) => {
-      triggerRef.current = node;
-    }),
+    ...triggerPassthroughProps,
+    ref: passthroughRef,
     "data-underverse-tooltip-trigger": triggerSelector,
-    onMouseEnter: composeEventHandlers(childProps.onMouseEnter, (e) => {
-      triggerRef.current = e.currentTarget;
-      handleMouseEnter();
-    }),
-    onMouseLeave: composeEventHandlers(childProps.onMouseLeave, (e) => {
-      triggerRef.current = e.currentTarget;
-      handleMouseLeave();
-    }),
-    onFocus: composeEventHandlers(childProps.onFocus, (e) => {
-      triggerRef.current = e.currentTarget;
-      handleFocus();
-    }),
-    onBlur: composeEventHandlers(childProps.onBlur, () => {
-      handleBlur();
-    })
+    onMouseEnter: chainEventHandlers(
+      triggerPassthroughProps.onMouseEnter,
+      childProps.onMouseEnter,
+      (e) => {
+        triggerRef.current = e.currentTarget;
+        handleMouseEnter();
+      }
+    ),
+    onMouseLeave: chainEventHandlers(
+      triggerPassthroughProps.onMouseLeave,
+      childProps.onMouseLeave,
+      (e) => {
+        triggerRef.current = e.currentTarget;
+        handleMouseLeave();
+      }
+    ),
+    onFocus: chainEventHandlers(
+      triggerPassthroughProps.onFocus,
+      childProps.onFocus,
+      (e) => {
+        triggerRef.current = e.currentTarget;
+        handleFocus();
+      }
+    ),
+    onBlur: chainEventHandlers(
+      triggerPassthroughProps.onBlur,
+      childProps.onBlur,
+      (e) => {
+        handleBlur();
+      }
+    )
   };
   const trigger = asChild ? React9.cloneElement(children, triggerProps) : /* @__PURE__ */ jsx10("span", { ...triggerProps, children });
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
@@ -3010,7 +3034,8 @@ var Tooltip = ({
       document.body
     )
   ] });
-};
+});
+Tooltip.displayName = "Tooltip";
 
 // src/components/emoji-ui.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -3978,10 +4003,10 @@ var EmojiPicker = ({
 var EmojiPicker_default = EmojiPicker;
 
 // src/components/TagInput.tsx
-import { forwardRef as forwardRef4, useState as useState7, useRef as useRef5, useId as useId3 } from "react";
+import { forwardRef as forwardRef5, useState as useState7, useRef as useRef5, useId as useId3 } from "react";
 import { X as X3, Search as Search3, Loader2 as Loader22 } from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
-var TagInput = forwardRef4(
+var TagInput = forwardRef5(
   ({
     value = [],
     onChange,
@@ -5935,36 +5960,32 @@ var Popover = ({
   ) : null;
   return /* @__PURE__ */ jsxs15(Fragment4, { children: [
     (() => {
-      const TriggerComponent = trigger.type;
       const triggerProps = trigger.props;
-      return /* @__PURE__ */ jsx22(
-        TriggerComponent,
-        {
-          ...triggerProps,
-          "data-underverse-popover-trigger": triggerSelector,
-          onClick: (e) => {
+      const childRef = triggerProps.ref;
+      return React18.cloneElement(trigger, {
+        ...triggerProps,
+        ref: mergeRefs(childRef, (node) => {
+          triggerRef.current = node;
+        }),
+        "data-underverse-popover-trigger": triggerSelector,
+        onClick: chainEventHandlers(
+          (e) => {
             triggerRef.current = e.currentTarget;
             e.preventDefault();
             e.stopPropagation();
             handleTriggerClick();
-            if (typeof triggerProps.onClick === "function") {
-              triggerProps.onClick(e);
-            }
           },
-          onFocus: (e) => {
+          triggerProps.onClick
+        ),
+        onFocus: chainEventHandlers(
+          (e) => {
             triggerRef.current = e.currentTarget;
-            if (typeof triggerProps.onFocus === "function") {
-              triggerProps.onFocus(e);
-            }
           },
-          "aria-expanded": isOpen,
-          "aria-haspopup": triggerProps["aria-haspopup"] ?? "dialog",
-          className: cn(
-            triggerProps.className,
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-          )
-        }
-      );
+          triggerProps.onFocus
+        ),
+        "aria-expanded": isOpen,
+        "aria-haspopup": triggerProps["aria-haspopup"] ?? "dialog"
+      });
     })(),
     popoverContent
   ] });
@@ -6587,6 +6608,32 @@ var variantStyles5 = {
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
 };
+function getTabsBaseId(tabs) {
+  const key = tabs.map((t) => t.value).join("-");
+  return `tabs-${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 = ({
   tabs,
   defaultValue,
@@ -6604,14 +6651,33 @@ 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 baseId = React22.useMemo(() => getTabsBaseId(tabs), [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);
@@ -6625,6 +6691,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",
@@ -6647,59 +6725,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
@@ -6843,17 +6931,18 @@ var DropdownMenu = ({
       index
     );
   }) : children });
-  const TriggerComponent = trigger.type;
   const triggerProps = trigger.props;
-  const enhancedTrigger = /* @__PURE__ */ jsx28(
-    TriggerComponent,
-    {
-      ...triggerProps,
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      onKeyDown: (e) => {
-        triggerRef.current = e.currentTarget;
-        if (disabled) return;
+  const childRef = triggerProps.ref;
+  const enhancedTrigger = React23.cloneElement(trigger, {
+    ...triggerProps,
+    ref: mergeRefs(childRef, (node) => {
+      triggerRef.current = node;
+    }),
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    onKeyDown: chainEventHandlers((e) => {
+      triggerRef.current = e.currentTarget;
+      if (!disabled) {
         if (e.key === "ArrowDown") {
           e.preventDefault();
           setOpen(true);
@@ -6869,22 +6958,12 @@ var DropdownMenu = ({
           e.preventDefault();
           setOpen(false);
         }
-        if (typeof triggerProps.onKeyDown === "function") {
-          triggerProps.onKeyDown(e);
-        }
-      },
-      onFocus: (e) => {
-        triggerRef.current = e.currentTarget;
-        if (typeof triggerProps.onFocus === "function") {
-          triggerProps.onFocus(e);
-        }
-      },
-      className: cn(
-        triggerProps.className,
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-      )
-    }
-  );
+      }
+    }, triggerProps.onKeyDown),
+    onFocus: chainEventHandlers((e) => {
+      triggerRef.current = e.currentTarget;
+    }, triggerProps.onFocus)
+  });
   return /* @__PURE__ */ jsx28(
     Popover,
     {
@@ -7816,7 +7895,7 @@ Section.displayName = "Section";
 var Section_default = Section;
 
 // src/components/ScrollArea.tsx
-import { forwardRef as forwardRef6, useRef as useRef11 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef11 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var variantClasses2 = {
   default: "bg-background",
@@ -7824,7 +7903,7 @@ var variantClasses2 = {
   primary: "bg-primary/5",
   accent: "bg-accent/10"
 };
-var ScrollArea = forwardRef6(
+var ScrollArea = forwardRef7(
   ({
     className,
     contentClassName,
@@ -7851,9 +7930,9 @@ var ScrollArea = forwardRef6(
 ScrollArea.displayName = "ScrollArea";
 
 // src/components/OverlayScrollArea.tsx
-import { forwardRef as forwardRef7, useRef as useRef12 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef12 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var OverlayScrollArea = forwardRef7(
+var OverlayScrollArea = forwardRef8(
   ({ className, viewportClassName, viewportProps, enabled = true, overflowHidden = true, overlayScrollbarOptions, children, ...props }, ref) => {
     const viewportRef = useRef12(null);
     useOverlayScrollbarTarget(viewportRef, {
@@ -22931,7 +23010,7 @@ import { common, createLowlight } from "lowlight";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import React66, { forwardRef as forwardRef13, useEffect as useEffect31, useImperativeHandle, useRef as useRef26 } from "react";
+import React66, { forwardRef as forwardRef14, useEffect as useEffect31, useImperativeHandle, useRef as useRef26 } from "react";
 import {
   FileCode as FileCode2,
   Heading1,
@@ -23135,7 +23214,7 @@ function buildSlashCommandItems({
     }
   ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
 }
-var SlashCommandList = forwardRef13((props, ref) => {
+var SlashCommandList = forwardRef14((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useResettingIndex2(props.items);
   const listRef = useRef26(null);
   useEffect31(() => {
@@ -23376,7 +23455,7 @@ import { Extension as Extension3 } from "@tiptap/core";
 import Suggestion2 from "@tiptap/suggestion";
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { PluginKey } from "@tiptap/pm/state";
-import React67, { forwardRef as forwardRef14, useImperativeHandle as useImperativeHandle2 } from "react";
+import React67, { forwardRef as forwardRef15, useImperativeHandle as useImperativeHandle2 } from "react";
 import { Smile as Smile2 } from "lucide-react";
 import { jsx as jsx75, jsxs as jsxs63 } from "react/jsx-runtime";
 function useResettingIndex3(resetToken) {
@@ -23393,7 +23472,7 @@ function useResettingIndex3(resetToken) {
   }, [resetToken]);
   return [selectedIndex, setSelectedIndex];
 }
-var EmojiList = forwardRef14((props, ref) => {
+var EmojiList = forwardRef15((props, ref) => {
   const t = useSmartTranslations("UEditor");
   const [selectedIndex, setSelectedIndex] = useResettingIndex3(props.items);
   const showingCountLabel = formatEmojiCountLabel(t("emojiSuggestion.showingCount"), 64, props.items.length);