@duskmoon-dev/components 0.5.2 → 0.5.3

package/dist/components/chat/index.js

@@ -1,7 +1,13 @@
 "use client";
 
 // src/components/chat/Chat.tsx
-import { forwardRef as forwardRef3 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useId as useId3,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
 
 // src/components/chat/ChatComposer.tsx
 import {
@@ -1099,6 +1105,9 @@ var ChatComposer = forwardRef2(({
 });
 ChatComposer.displayName = "Chat.Composer";
 
+// src/components/chat/ChatPrimitives.tsx
+import { forwardRef as forwardRef3, useId as useId2 } from "react";
+
 // src/classes/chat.ts
 var chatBaseClass = "chat";
 var chatAvatarClass = "chat-avatar";
@@ -1173,88 +1182,373 @@ function getChatToolClasses({
   return cn(chatToolBaseClass, status && chatToolStateClasses[status], className);
 }
 
-// src/components/chat/Chat.tsx
+// src/components/chat/ChatPrimitives.tsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var ChatAvatar = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatAgent = forwardRef3(({ timeline, className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  "data-chat-tl": timeline ?? props["data-chat-tl"],
+  className: getChatClasses({ className: cn("chat-agent", className) })
+}));
+ChatAgent.displayName = "Chat.Agent";
+var ChatContent = forwardRef3(({ streaming, className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  className: cn("chat-content", streaming && "chat-streaming", className)
+}));
+ChatContent.displayName = "Chat.Content";
+var ChatWork = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("details", {
+  ...props,
+  ref,
+  className: cn("chat-work", className)
+}));
+ChatWork.displayName = "Chat.Work";
+var ChatWorkSummary = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("summary", {
+  ...props,
+  ref,
+  className: cn("chat-work-summary", className)
+}));
+ChatWorkSummary.displayName = "Chat.WorkSummary";
+var ChatWorkBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  className: cn("chat-work-body", className)
+}));
+ChatWorkBody.displayName = "Chat.WorkBody";
+var ChatInputArea = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  className: cn("chat-input-area", className)
+}));
+ChatInputArea.displayName = "Chat.InputArea";
+var ChatComposerForm = forwardRef3(({ color, ghost, className, ...props }, ref) => /* @__PURE__ */ jsx4("form", {
+  ...props,
+  ref,
+  className: cn("chat-composer", color && `chat-composer-${color}`, ghost && "chat-composer-ghost", className)
+}));
+ChatComposerForm.displayName = "Chat.ComposerForm";
+var ChatComposerInput = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("textarea", {
+  ...props,
+  ref,
+  className: cn("chat-composer-input", className)
+}));
+ChatComposerInput.displayName = "Chat.ComposerInput";
+var ChatComposerActions = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+  ...props,
+  ref,
+  className: cn("chat-composer-actions", className)
+}));
+ChatComposerActions.displayName = "Chat.ComposerActions";
+var ChatComposerHint = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("kbd", {
+  ...props,
+  ref,
+  className: cn("chat-composer-hint", className)
+}));
+ChatComposerHint.displayName = "Chat.ComposerHint";
+var ChatQueue = forwardRef3(({
+  items,
+  activeId = items[0]?.id,
+  pendingIds = [],
+  steerDisabled,
+  onSteer,
+  onRemove,
+  label = "Waiting messages",
+  hidden,
+  className,
+  ...props
+}, ref) => {
+  const titleId = `${useId2()}-queue-title`;
+  return /* @__PURE__ */ jsxs4("section", {
+    ...props,
+    ref,
+    hidden: hidden || items.length === 0,
+    "aria-labelledby": props["aria-labelledby"] ?? (props["aria-label"] ? undefined : titleId),
+    className: cn("chat-queue", className),
+    children: [
+      /* @__PURE__ */ jsxs4("div", {
+        className: "chat-queue-header sr-only",
+        children: [
+          /* @__PURE__ */ jsx4("h3", {
+            className: "chat-queue-title",
+            id: titleId,
+            children: label
+          }),
+          /* @__PURE__ */ jsxs4("span", {
+            className: "chat-queue-count",
+            children: [
+              items.length,
+              " queued"
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx4("ol", {
+        className: "chat-queue-list",
+        role: "list",
+        tabIndex: 0,
+        "aria-label": label,
+        children: items.map((item, index) => {
+          const pending = pendingIds.includes(item.id);
+          return /* @__PURE__ */ jsxs4("li", {
+            className: cn("chat-queue-item", item.id === activeId && "chat-queue-item-active"),
+            "aria-busy": pending || undefined,
+            children: [
+              /* @__PURE__ */ jsx4("svg", {
+                className: "chat-queue-icon",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "aria-hidden": "true",
+                focusable: "false",
+                children: /* @__PURE__ */ jsx4("path", {
+                  d: "m8 6 4 4-4 4M12 10H5m10-4h4m-4 6h4m-4 6h4"
+                })
+              }),
+              /* @__PURE__ */ jsxs4("span", {
+                className: "chat-queue-number sr-only",
+                children: [
+                  "#",
+                  index + 1
+                ]
+              }),
+              item.attachment ? /* @__PURE__ */ jsx4("img", {
+                className: "chat-queue-attachment",
+                src: item.attachment.src,
+                alt: item.attachment.alt
+              }) : null,
+              /* @__PURE__ */ jsx4("div", {
+                className: "chat-queue-content",
+                title: item.text,
+                children: item.text
+              }),
+              /* @__PURE__ */ jsxs4("div", {
+                className: "chat-actions chat-queue-actions",
+                children: [
+                  /* @__PURE__ */ jsxs4("button", {
+                    className: "btn btn-ghost btn-sm chat-queue-steer",
+                    type: "button",
+                    disabled: pending || steerDisabled,
+                    "aria-label": `Steer waiting message ${index + 1}`,
+                    onClick: () => onSteer(item.id),
+                    children: [
+                      /* @__PURE__ */ jsx4("svg", {
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        children: /* @__PURE__ */ jsx4("path", {
+                          d: "m15 4 5 5-5 5M20 9h-9a6 6 0 0 0-6 6v4"
+                        })
+                      }),
+                      "Steer"
+                    ]
+                  }),
+                  /* @__PURE__ */ jsx4("button", {
+                    className: "btn btn-ghost btn-sm btn-square chat-queue-remove",
+                    type: "button",
+                    disabled: pending,
+                    "aria-label": `Remove waiting message ${index + 1}`,
+                    onClick: () => onRemove(item.id),
+                    children: /* @__PURE__ */ jsx4("svg", {
+                      width: "16",
+                      height: "16",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      children: /* @__PURE__ */ jsx4("path", {
+                        d: "M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7m4-7v7"
+                      })
+                    })
+                  })
+                ]
+              })
+            ]
+          }, item.id);
+        })
+      })
+    ]
+  });
+});
+ChatQueue.displayName = "Chat.Queue";
+
+// src/components/chat/Chat.tsx
+import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment3 } from "react/jsx-runtime";
+var ChatAvatar = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatAvatarClass, className)
 }));
 ChatAvatar.displayName = "Chat.Avatar";
-var ChatHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatHeaderClass, className)
 }));
 ChatHeader.displayName = "Chat.Header";
-var ChatBubble = forwardRef3(({ color, size = "md", filled, streaming, className, children, ...props }, ref) => /* @__PURE__ */ jsxs4("div", {
-  ...props,
-  ref,
-  className: getChatBubbleClasses({
-    color,
-    size,
-    filled,
-    streaming,
-    className
-  }),
-  children: [
-    children,
-    streaming ? /* @__PURE__ */ jsx4("span", {
-      className: "chat-bubble-content chat-bubble-streaming",
-      "aria-hidden": "true"
-    }) : null
-  ]
-}));
+var ChatBubble = forwardRef4(({
+  color,
+  size = "md",
+  filled,
+  streaming,
+  collapsible,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const contentId = `${useId3()}-content`;
+  const contentRef = useRef3(null);
+  const toggleRef = useRef3(null);
+  const collapseRequestedRef = useRef3(false);
+  const [overflows, setOverflows] = useState3(false);
+  const [internalExpanded, setInternalExpanded] = useState3(defaultExpanded);
+  const requestedExpanded = expanded ?? internalExpanded;
+  const isExpanded = overflows && requestedExpanded;
+  useLayoutEffect2(() => {
+    const content = contentRef.current;
+    if (!collapsible || !content) {
+      collapseRequestedRef.current = false;
+      return;
+    }
+    const view = content.ownerDocument.defaultView;
+    function measure() {
+      if (!content || !view)
+        return;
+      const lineHeight = parseFloat(view.getComputedStyle(content).lineHeight);
+      if (!Number.isFinite(lineHeight))
+        return;
+      const next = content.scrollHeight > 6 * lineHeight + 1;
+      if (next || !requestedExpanded)
+        collapseRequestedRef.current = false;
+      if (!next) {
+        if (content.ownerDocument.activeElement === toggleRef.current)
+          content.focus();
+        if (requestedExpanded && !collapseRequestedRef.current) {
+          collapseRequestedRef.current = true;
+          if (expanded === undefined)
+            setInternalExpanded(false);
+          onExpandedChange?.(false);
+        }
+      }
+      setOverflows(next);
+    }
+    measure();
+    const resize = view?.ResizeObserver ? new view.ResizeObserver(measure) : undefined;
+    const mutation = view?.MutationObserver ? new view.MutationObserver(measure) : undefined;
+    resize?.observe(content);
+    mutation?.observe(content, {
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    return () => {
+      resize?.disconnect();
+      mutation?.disconnect();
+    };
+  }, [collapsible, children, requestedExpanded, expanded, onExpandedChange]);
+  const body = /* @__PURE__ */ jsxs5(Fragment3, {
+    children: [
+      children,
+      streaming ? /* @__PURE__ */ jsx5("span", {
+        className: "chat-bubble-content chat-bubble-streaming",
+        "aria-hidden": "true"
+      }) : null
+    ]
+  });
+  return /* @__PURE__ */ jsx5("div", {
+    ...props,
+    ref,
+    className: getChatBubbleClasses({
+      color,
+      size,
+      filled,
+      streaming,
+      className: cn(collapsible && "chat-bubble-collapsible", className)
+    }),
+    children: collapsible ? /* @__PURE__ */ jsxs5(Fragment3, {
+      children: [
+        /* @__PURE__ */ jsx5("div", {
+          ref: contentRef,
+          className: "chat-bubble-content",
+          id: contentId,
+          tabIndex: -1,
+          children: body
+        }),
+        /* @__PURE__ */ jsx5("button", {
+          ref: toggleRef,
+          type: "button",
+          className: "btn btn-ghost btn-xs chat-bubble-toggle",
+          "aria-controls": contentId,
+          "aria-expanded": isExpanded,
+          hidden: !overflows,
+          onClick: () => {
+            if (expanded === undefined)
+              setInternalExpanded(!isExpanded);
+            onExpandedChange?.(!isExpanded);
+          },
+          children: isExpanded ? "Show less" : "Show more"
+        })
+      ]
+    }) : body
+  });
+});
 ChatBubble.displayName = "Chat.Bubble";
-var ChatFooter = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatFooter = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatFooterClass, className)
 }));
 ChatFooter.displayName = "Chat.Footer";
-var ChatStatus = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatStatus = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatStatusClass, className)
 }));
 ChatStatus.displayName = "Chat.Status";
-var ChatStatusItem = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("span", {
+var ChatStatusItem = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("span", {
   ...props,
   ref,
   className: cn(chatStatusItemClass, className)
 }));
 ChatStatusItem.displayName = "Chat.StatusItem";
-var ChatStatusValue = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("span", {
+var ChatStatusValue = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("span", {
   ...props,
   ref,
   className: cn(chatStatusValueClass, className)
 }));
 ChatStatusValue.displayName = "Chat.StatusValue";
-var ChatActions = forwardRef3(({ hover, className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatActions = forwardRef4(({ hover, className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatActionsClass, hover && chatActionsHoverClass, className)
 }));
 ChatActions.displayName = "Chat.Actions";
-var ChatScroll = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatScroll = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatScrollClass, className)
 }));
 ChatScroll.displayName = "Chat.Scroll";
-var ChatScrollBody = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatScrollBody = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatScrollBodyClass, className)
 }));
 ChatScrollBody.displayName = "Chat.ScrollBody";
-var ChatScrollTrack = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatScrollTrack = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatScrollTrackClass, className)
 }));
 ChatScrollTrack.displayName = "Chat.ScrollTrack";
-var ChatScrollIndicator = forwardRef3(({ targetId, timeline, type = "button", className, onClick, ...props }, ref) => /* @__PURE__ */ jsx4("button", {
+var ChatScrollIndicator = forwardRef4(({ targetId, timeline, type = "button", className, onClick, ...props }, ref) => /* @__PURE__ */ jsx5("button", {
   ...props,
   ref,
   type,
@@ -1276,59 +1570,59 @@ var ChatScrollIndicator = forwardRef3(({ targetId, timeline, type = "button", cl
   }
 }));
 ChatScrollIndicator.displayName = "Chat.ScrollIndicator";
-var ChatReasoning = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("details", {
+var ChatReasoning = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("details", {
   ...props,
   ref,
   className: cn(chatReasoningClass, className)
 }));
 ChatReasoning.displayName = "Chat.Reasoning";
-var ChatTool = forwardRef3(({ status, className, ...props }, ref) => /* @__PURE__ */ jsx4("details", {
+var ChatTool = forwardRef4(({ status, className, ...props }, ref) => /* @__PURE__ */ jsx5("details", {
   ...props,
   ref,
   className: getChatToolClasses({ status, className })
 }));
 ChatTool.displayName = "Chat.Tool";
-var ChatToolHeader = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("summary", {
+var ChatToolHeader = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("summary", {
   ...props,
   ref,
   className: cn(chatToolHeaderClass, className)
 }));
 ChatToolHeader.displayName = "Chat.ToolHeader";
-var ChatToolStatus = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("span", {
+var ChatToolStatus = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("span", {
   ...props,
   ref,
   className: cn(chatToolStatusClass, className)
 }));
 ChatToolStatus.displayName = "Chat.ToolStatus";
-var ChatToolCall = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatToolCall = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatToolCallClass, className)
 }));
 ChatToolCall.displayName = "Chat.ToolCall";
-var ChatToolResult = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatToolResult = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   className: cn(chatToolResultClass, className)
 }));
 ChatToolResult.displayName = "Chat.ToolResult";
-var ChatTyping = forwardRef3(({
+var ChatTyping = forwardRef4(({
   className,
   role = "status",
   "aria-label": ariaLabel = "Assistant is typing",
   ...props
-}, ref) => /* @__PURE__ */ jsx4("span", {
+}, ref) => /* @__PURE__ */ jsx5("span", {
   ...props,
   ref,
   role,
   "aria-label": ariaLabel,
   className: cn(chatTypingClass, className),
-  children: /* @__PURE__ */ jsx4("span", {
+  children: /* @__PURE__ */ jsx5("span", {
     "aria-hidden": "true"
   })
 }));
 ChatTyping.displayName = "Chat.Typing";
-var ChatRoot = forwardRef3(({ placement = "start", timeline, className, ...props }, ref) => /* @__PURE__ */ jsx4("div", {
+var ChatRoot = forwardRef4(({ placement = "start", timeline, className, ...props }, ref) => /* @__PURE__ */ jsx5("div", {
   ...props,
   ref,
   "data-chat-tl": timeline ?? props["data-chat-tl"],
@@ -1337,6 +1631,17 @@ var ChatRoot = forwardRef3(({ placement = "start", timeline, className, ...props
 ChatRoot.displayName = "Chat";
 var Chat = Object.assign(ChatRoot, {
   Composer: ChatComposer,
+  Agent: ChatAgent,
+  Content: ChatContent,
+  Work: ChatWork,
+  WorkSummary: ChatWorkSummary,
+  WorkBody: ChatWorkBody,
+  InputArea: ChatInputArea,
+  Queue: ChatQueue,
+  ComposerForm: ChatComposerForm,
+  ComposerInput: ChatComposerInput,
+  ComposerActions: ChatComposerActions,
+  ComposerHint: ChatComposerHint,
   Avatar: ChatAvatar,
   Header: ChatHeader,
   Bubble: ChatBubble,
@@ -1360,11 +1665,19 @@ var Chat = Object.assign(ChatRoot, {
 export {
   Chat,
   ChatActions,
+  ChatAgent,
   ChatAvatar,
   ChatBubble,
   ChatComposer,
+  ChatComposerActions,
+  ChatComposerForm,
+  ChatComposerHint,
+  ChatComposerInput,
+  ChatContent,
   ChatFooter,
   ChatHeader,
+  ChatInputArea,
+  ChatQueue,
   ChatReasoning,
   ChatScroll,
   ChatScrollBody,
@@ -1378,5 +1691,8 @@ export {
   ChatToolHeader,
   ChatToolResult,
   ChatToolStatus,
-  ChatTyping
+  ChatTyping,
+  ChatWork,
+  ChatWorkBody,
+  ChatWorkSummary
 };

package/dist/components/dm-truncate/index.js

@@ -93,7 +93,7 @@ var Tooltip = forwardRef(({
   open,
   defaultOpen,
   onOpenChange,
-  arrow = true,
+  arrow = false,
   size = "md",
   className,
   children,
@@ -121,12 +121,21 @@ var Tooltip = forwardRef(({
   controlledRef.current = isControlled;
   onOpenChangeRef.current = onOpenChange;
   const hasTitle = Boolean(title);
+  const nativeInterest = !isControlled && React.isValidElement(children) && (typeof children.type !== "string" || children.type === "button" || children.type === "a") && children.type !== React.Fragment;
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface)
       return;
     const tooltipSurface = surface;
     function handleToggle(event) {
+      if (nativeInterest) {
+        const next = event.newState === "open";
+        if (next !== tooltipSurface.matches(":popover-open") || next === visibleRef.current)
+          return;
+        onOpenChangeRef.current?.(next);
+        setInternalOpen(next);
+        return;
+      }
       if (event.newState !== "closed" || !visibleRef.current || isControlled || isControlled !== controlledRef.current || tooltipSurface.matches(":popover-open")) {
         return;
       }
@@ -138,7 +147,14 @@ var Tooltip = forwardRef(({
     }
     surface.addEventListener("toggle", handleToggle);
     return () => surface.removeEventListener("toggle", handleToggle);
-  }, [hasTitle, isControlled]);
+  }, [hasTitle, isControlled, nativeInterest]);
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    return () => {
+      if (surface?.matches(":popover-open"))
+        surface.hidePopover();
+    };
+  }, [hasTitle, isControlled, nativeInterest]);
   useEffect(() => {
     const surface = surfaceRef.current;
     if (!surface)
@@ -188,21 +204,29 @@ var Tooltip = forwardRef(({
   }
   function showTooltip(event) {
     onMouseEnter?.(event);
+    if (nativeInterest)
+      return;
     hoveredRef.current = true;
     updateInteraction();
   }
   function hideTooltip(event) {
     onMouseLeave?.(event);
+    if (nativeInterest)
+      return;
     hoveredRef.current = false;
     updateInteraction();
   }
   function focusTooltip(event) {
     onFocus?.(event);
+    if (nativeInterest)
+      return;
     focusedRef.current = true;
     updateInteraction();
   }
   function blurTooltip(event) {
     onBlur?.(event);
+    if (nativeInterest)
+      return;
     if (event.currentTarget.contains(event.relatedTarget))
       return;
     focusedRef.current = false;
@@ -211,6 +235,13 @@ var Tooltip = forwardRef(({
   let trigger = children;
   if (hasTitle && React.isValidElement(children) && children.type !== React.Fragment) {
     trigger = React.cloneElement(children, {
+      ...nativeInterest ? {
+        interestfor: tooltipId,
+        style: {
+          ...children.props.style,
+          anchorName: anchor
+        }
+      } : {},
       "aria-describedby": [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ")
     });
   }
@@ -218,7 +249,10 @@ var Tooltip = forwardRef(({
     ...props,
     ref,
     className: tooltipWrapperClass,
-    style: { ...style, anchorName: anchor },
+    style: {
+      ...style,
+      ...nativeInterest ? {} : { anchorName: anchor }
+    },
     "aria-describedby": hasTitle && trigger === children ? [props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : props["aria-describedby"],
     onMouseEnter: showTooltip,
     onMouseLeave: hideTooltip,