@underverse-ui/underverse 1.0.93 → 1.0.95

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;
@@ -476,8 +476,9 @@ interface TooltipProps {
     className?: string;
     disabled?: boolean;
     variant?: "default" | "info" | "warning" | "error" | "success";
-}
-declare const Tooltip: React$1.FC<TooltipProps>;
+    /** When true, augment the child directly instead of adding a wrapper. Default: true */
+    asChild?: boolean;
+} & React$1.RefAttributes<HTMLElement>>;
 
 type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 interface PopoverProps {

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;
@@ -476,8 +476,9 @@ interface TooltipProps {
     className?: string;
     disabled?: boolean;
     variant?: "default" | "info" | "warning" | "error" | "success";
-}
-declare const Tooltip: React$1.FC<TooltipProps>;
+    /** When true, augment the child directly instead of adding a wrapper. Default: true */
+    asChild?: boolean;
+} & React$1.RefAttributes<HTMLElement>>;
 
 type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "bottom-start" | "top-end" | "bottom-end";
 interface PopoverProps {

package/dist/index.js

@@ -481,13 +481,13 @@ var Card = React2.forwardRef(
               "h3",
               {
                 className: cn(
-                  "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight break-words [overflow-wrap:anywhere] transition-colors duration-200 max-md:text-sm",
+                  "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight wrap-anywhere transition-colors duration-200 max-md:text-sm",
                   hoverable && "group-hover:text-primary"
                 ),
                 children: title
               }
             ),
-            description && /* @__PURE__ */ jsx3("p", { className: "min-w-0 text-sm md:text-base text-muted-foreground leading-relaxed break-words [overflow-wrap:anywhere]", children: description })
+            description && /* @__PURE__ */ jsx3("p", { className: "min-w-0 text-sm md:text-base text-muted-foreground leading-relaxed wrap-anywhere", children: description })
           ] }),
           children && /* @__PURE__ */ jsx3("div", { className: cn("relative", defaultPaddingX, defaultPaddingY, contentClassName), children }),
           footer && /* @__PURE__ */ jsx3(
@@ -2745,6 +2745,26 @@ function useHydrated() {
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 
+// src/utils/react-compose.ts
+function chainEventHandlers(...handlers) {
+  return (event) => {
+    handlers.forEach((handler) => handler?.(event));
+  };
+}
+function setRefValue(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    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 = {
@@ -2799,15 +2819,17 @@ 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",
   delay = { open: 200, close: 300 },
   className,
   disabled = false,
-  variant = "default"
-}) => {
+  variant = "default",
+  asChild = true,
+  ...triggerPassthroughProps
+}, forwardedRef) => {
   const [isOpen, setIsOpen] = React9.useState(false);
   const isMounted = useHydrated();
   const triggerRef = React9.useRef(null);
@@ -2922,40 +2944,57 @@ 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 triggerProps = {
+    ...triggerPassthroughProps,
+    ref: passthroughRef,
+    "data-underverse-tooltip-trigger": triggerSelector,
+    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: [
-    (() => {
-      const TriggerComponent = children.type;
-      const triggerProps = children.props;
-      return /* @__PURE__ */ jsx10(
-        TriggerComponent,
-        {
-          ...triggerProps,
-          "data-underverse-tooltip-trigger": triggerSelector,
-          onMouseEnter: (e) => {
-            triggerRef.current = e.currentTarget;
-            handleMouseEnter();
-            if (typeof triggerProps.onMouseEnter === "function") triggerProps.onMouseEnter(e);
-          },
-          onMouseLeave: (e) => {
-            triggerRef.current = e.currentTarget;
-            handleMouseLeave();
-            if (typeof triggerProps.onMouseLeave === "function") triggerProps.onMouseLeave(e);
-          },
-          onFocus: (e) => {
-            triggerRef.current = e.currentTarget;
-            handleFocus();
-            if (typeof triggerProps.onFocus === "function") triggerProps.onFocus(e);
-          },
-          onBlur: (e) => {
-            handleBlur();
-            if (typeof triggerProps.onBlur === "function") triggerProps.onBlur(e);
-          }
-        }
-      );
-    })(),
+    trigger,
     isMounted && isOpen && createPortal(
       /* @__PURE__ */ jsx10(
         "div",
@@ -2995,7 +3034,8 @@ var Tooltip = ({
       document.body
     )
   ] });
-};
+});
+Tooltip.displayName = "Tooltip";
 
 // src/components/emoji-ui.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
@@ -3963,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,
@@ -5920,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
   ] });
@@ -6828,17 +6864,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);
@@ -6854,22 +6891,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,
     {
@@ -7801,7 +7828,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",
@@ -7809,7 +7836,7 @@ var variantClasses2 = {
   primary: "bg-primary/5",
   accent: "bg-accent/10"
 };
-var ScrollArea = forwardRef6(
+var ScrollArea = forwardRef7(
   ({
     className,
     contentClassName,
@@ -7836,9 +7863,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, {
@@ -17052,7 +17079,7 @@ function CategoryTreeSelect(props) {
                   // View-only mode: just display the name with folder icon
                   /* @__PURE__ */ jsxs39("div", { className: cn("flex min-w-0 items-center", TREE_NODE_GAP_CLASS), children: [
                     category.icon ? /* @__PURE__ */ jsx49("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ jsx49(FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ jsx49("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
-                    /* @__PURE__ */ jsx49("span", { className: "min-w-0 text-sm font-medium leading-snug break-words [overflow-wrap:anywhere]", children: category.name })
+                    /* @__PURE__ */ jsx49("span", { className: "min-w-0 text-sm font-medium leading-snug wrap-anywhere", children: category.name })
                   ] })
                 ) : (
                   // Single/Multi select mode: icon + text + badge
@@ -17062,7 +17089,7 @@ function CategoryTreeSelect(props) {
                       "span",
                       {
                         className: cn(
-                          "min-w-0 flex-1 text-sm leading-snug break-words [overflow-wrap:anywhere] transition-all duration-200",
+                          "min-w-0 flex-1 text-sm leading-snug wrap-anywhere transition-all duration-200",
                           isSelected ? "font-semibold text-primary" : "text-foreground/80",
                           !isSelectable && "text-foreground"
                         ),
@@ -22916,7 +22943,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,
@@ -23120,7 +23147,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(() => {
@@ -23361,7 +23388,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) {
@@ -23378,7 +23405,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);