@fangxinyan/lumina 0.6.17 → 0.7.0

package/dist/{chunk-6HF6UF73.js → chunk-UQI4R32R.js}

@@ -1,8 +1,11 @@
-import { useFloating } from './chunk-DUFRASGO.js';
-import { Icon } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Icon } from './chunk-LQMOYVQF.js';
+import { useComponentPortalTheme, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Typography-32QQLD4F.css';
+import './Typography-CQ2OZXQH.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -41,8 +44,44 @@ function assignRef(ref, value) {
   }
   ref.current = value;
 }
+function getNativeTypographyProps(props) {
+  const {
+    type: _type,
+    disabled: _disabled,
+    mark: _mark,
+    code: _code,
+    keyboard: _keyboard,
+    underline: _underline,
+    delete: _delete,
+    strong: _strong,
+    italic: _italic,
+    copyable: _copyable,
+    editable: _editable,
+    ellipsis: _ellipsis,
+    className: _className,
+    style: _style,
+    children: _children,
+    ...nativeProps
+  } = props;
+  return nativeProps;
+}
+function composeTypographyRef(internalRef, forwardedRef) {
+  return (node) => {
+    internalRef.current = node;
+    assignRef(forwardedRef, node);
+  };
+}
 var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) => {
   const [open, setOpen] = React.useState(false);
+  const tooltipId = React.useId();
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme([
+    "Typography",
+    "Title",
+    "Text",
+    "Paragraph",
+    "Link"
+  ]);
   const openTimerRef = React.useRef();
   const closeTimerRef = React.useRef();
   const childRef = children.ref;
@@ -50,7 +89,8 @@ var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) =>
     triggerRef,
     floatingRef,
     floatingStyle,
-    placement
+    placement,
+    zIndex: tooltipZIndex
   } = useFloating({
     open,
     placement: "top",
@@ -58,6 +98,13 @@ var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) =>
     panelHeight: 96,
     alignCross: "center"
   });
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: floatingRef,
+    ownerRef: triggerRef,
+    zIndex: tooltipZIndex,
+    onEscape: () => setOpen(false)
+  });
   React.useEffect(() => {
     return () => {
       window.clearTimeout(openTimerRef.current);
@@ -90,6 +137,7 @@ var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) =>
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     React.cloneElement(children, {
       ref: setTriggerRef,
+      "aria-describedby": open ? [childProps["aria-describedby"], tooltipId].filter(Boolean).join(" ") : childProps["aria-describedby"],
       onMouseEnter: (event) => {
         childProps.onMouseEnter?.(event);
         show();
@@ -127,13 +175,15 @@ var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) =>
         hide();
       }
     }),
-    open && typeof document !== "undefined" && createPortal(
+    open && portalContainer && createPortal(
       /* @__PURE__ */ jsx(
         "div",
         {
+          id: tooltipId,
           ref: floatingRef,
           className: `typo-ellipsis-tooltip ${placement}`,
-          style: floatingStyle,
+          ...portalTheme.dataAttributes,
+          style: { ...floatingStyle, ...portalTheme.style, ...portalTheme.styles.popup },
           role: "tooltip",
           onMouseEnter: show,
           onMouseMove: show,
@@ -144,58 +194,80 @@ var EllipsisTooltip = React.forwardRef(({ content, children }, forwardedRef) =>
           children: content
         }
       ),
-      document.body
+      portalContainer
     )
   ] });
 });
 EllipsisTooltip.displayName = "Typography.EllipsisTooltip";
+async function writeTypographyClipboard(text, format) {
+  if (typeof navigator !== "undefined" && navigator.clipboard) {
+    if (format === "text/html" && navigator.clipboard.write && typeof ClipboardItem !== "undefined") {
+      await navigator.clipboard.write([
+        new ClipboardItem({ "text/html": new Blob([text], { type: "text/html" }) })
+      ]);
+      return;
+    }
+    if (navigator.clipboard.writeText) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+  }
+  if (typeof document === "undefined") throw new Error("Clipboard is unavailable");
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.style.position = "fixed";
+  textarea.style.inset = "-9999px auto auto -9999px";
+  document.body.appendChild(textarea);
+  textarea.select();
+  const copied = document.execCommand?.("copy") ?? false;
+  textarea.remove();
+  if (!copied) throw new Error("Clipboard write failed");
+}
 var CopyAction = ({ config, fallbackText }) => {
-  const [copied, setCopied] = React.useState(false);
+  const [status, setStatus] = React.useState("idle");
   const timerRef = React.useRef(null);
   React.useEffect(() => {
     return () => {
       if (timerRef.current != null) window.clearTimeout(timerRef.current);
     };
   }, []);
-  const handleCopy = (event) => {
+  const handleCopy = async (event) => {
     event.stopPropagation();
     const text = config.text ?? fallbackText;
-    if (typeof navigator !== "undefined" && navigator.clipboard) {
-      navigator.clipboard.writeText(text).catch(() => {
-      });
+    try {
+      await writeTypographyClipboard(text, config.format ?? "text/plain");
+      config.onCopy?.(event);
+      setStatus("copied");
+    } catch (error) {
+      config.onCopyError?.(error);
+      setStatus("error");
     }
-    config.onCopy?.(event);
-    setCopied(true);
     if (timerRef.current != null) window.clearTimeout(timerRef.current);
-    timerRef.current = window.setTimeout(() => setCopied(false), 2400);
+    timerRef.current = window.setTimeout(() => setStatus("idle"), 2400);
   };
   const [defIcon, doneIcon] = config.icon ?? [
     /* @__PURE__ */ jsx(Icon, { name: "copy", size: 12 }, "def"),
     /* @__PURE__ */ jsx(Icon, { name: "check", size: 12 }, "done")
   ];
-  const tipText = config.tooltips === false ? void 0 : Array.isArray(config.tooltips) ? copied ? config.tooltips[1] : config.tooltips[0] : copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236";
+  const tipText = config.tooltips === false ? void 0 : status === "error" ? "\u590D\u5236\u5931\u8D25" : Array.isArray(config.tooltips) ? status === "copied" ? config.tooltips[1] : config.tooltips[0] : status === "copied" ? "\u5DF2\u590D\u5236" : "\u590D\u5236";
   return /* @__PURE__ */ jsx(
-    "span",
+    "button",
     {
-      role: "button",
-      "aria-label": typeof tipText === "string" ? tipText : "Copy",
-      tabIndex: 0,
+      type: "button",
+      "aria-label": typeof tipText === "string" ? tipText : "\u590D\u5236",
       title: typeof tipText === "string" ? tipText : void 0,
-      onClick: handleCopy,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleCopy(e);
-        }
-      },
-      className: `typo-action typo-copy ${copied ? "copied" : ""}`,
-      children: copied ? doneIcon : defIcon
+      onClick: (event) => void handleCopy(event),
+      className: `typo-action typo-copy ${status}`,
+      children: status === "copied" ? doneIcon : defIcon
     }
   );
 };
-var EditableEditor = ({ initial, multiline, maxLength, autoSize, onConfirm, onCancel }) => {
+var EditableEditor = ({ initial, multiline, maxLength, autoSize, enterIcon, onConfirm, onCancel }) => {
   const [value, setValue] = React.useState(initial);
   const ref = React.useRef(null);
+  const groupRef = React.useRef(null);
+  const finishedRef = React.useRef(false);
   React.useEffect(() => {
     const el = ref.current;
     if (el) {
@@ -204,6 +276,10 @@ var EditableEditor = ({ initial, multiline, maxLength, autoSize, onConfirm, onCa
       el.setSelectionRange(len, len);
     }
   }, []);
+  React.useEffect(() => {
+    setValue(initial);
+    finishedRef.current = false;
+  }, [initial]);
   const resize = React.useCallback(() => {
     const el = ref.current;
     if (!el || !multiline || !autoSize) return;
@@ -221,15 +297,38 @@ var EditableEditor = ({ initial, multiline, maxLength, autoSize, onConfirm, onCa
   React.useEffect(() => {
     resize();
   }, [value, resize]);
+  const confirm = () => {
+    if (finishedRef.current) return;
+    finishedRef.current = true;
+    try {
+      onConfirm(value);
+    } finally {
+      finishedRef.current = false;
+    }
+  };
+  const cancel = () => {
+    if (finishedRef.current) return;
+    finishedRef.current = true;
+    try {
+      onCancel();
+    } finally {
+      finishedRef.current = false;
+    }
+  };
+  const handleGroupBlur = (event) => {
+    const nextTarget = event.relatedTarget;
+    if (nextTarget instanceof Node && groupRef.current?.contains(nextTarget)) return;
+    cancel();
+  };
   const handleKeyDown = (e) => {
     if (e.key === "Escape") {
       e.preventDefault();
-      onCancel();
+      cancel();
       return;
     }
     if (e.key === "Enter" && (!multiline || (e.metaKey || e.ctrlKey))) {
       e.preventDefault();
-      onConfirm(value);
+      confirm();
     }
   };
   const common = {
@@ -238,10 +337,26 @@ var EditableEditor = ({ initial, multiline, maxLength, autoSize, onConfirm, onCa
     maxLength,
     className: "typo-editor",
     onChange: (e) => setValue(e.target.value),
-    onBlur: () => onConfirm(value),
     onKeyDown: handleKeyDown
   };
-  return multiline ? /* @__PURE__ */ jsx("textarea", { rows: 1, ...common }) : /* @__PURE__ */ jsx("input", { type: "text", ...common });
+  const editor = multiline ? /* @__PURE__ */ jsx("textarea", { rows: 1, ...common }) : /* @__PURE__ */ jsx("input", { type: "text", ...common });
+  const resolvedEnterIcon = enterIcon === void 0 ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 12 }) : enterIcon;
+  const showEnterAction = !multiline && resolvedEnterIcon !== null && resolvedEnterIcon !== false;
+  return /* @__PURE__ */ jsxs("span", { ref: groupRef, className: "typo-editor-wrap", onBlur: handleGroupBlur, children: [
+    editor,
+    showEnterAction && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "typo-action typo-enter",
+        "aria-label": "\u786E\u8BA4\u7F16\u8F91",
+        title: "\u786E\u8BA4\u7F16\u8F91",
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: confirm,
+        children: resolvedEnterIcon
+      }
+    )
+  ] });
 };
 function useTypographyBody(props) {
   const fallbackText = React.useMemo(
@@ -272,9 +387,29 @@ function useTypographyBody(props) {
   };
   const ellipsis = props.ellipsis;
   const ellConf = ellipsis && typeof ellipsis === "object" ? ellipsis : {};
-  const rows = ellConf.rows ?? props.ellipsisRows ?? 1;
+  const rows = Math.max(1, Math.floor(ellConf.rows ?? props.ellipsisRows ?? 1));
   const wantClamp = !!ellipsis;
   const [expanded, setExpanded] = React.useState(false);
+  const [truncated, setTruncated] = React.useState(false);
+  const elementRef = React.useRef(null);
+  const ellipsisContentRef = React.useRef(null);
+  React.useEffect(() => setExpanded(false), [fallbackText, rows, wantClamp]);
+  React.useLayoutEffect(() => {
+    const element = ellConf.suffix ? ellipsisContentRef.current : elementRef.current;
+    if (!element || !wantClamp || expanded) {
+      setTruncated(false);
+      return;
+    }
+    const measure = () => {
+      const next = rows > 1 ? element.scrollHeight > element.clientHeight + 1 : element.scrollWidth > element.clientWidth + 1;
+      setTruncated(next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ellConf.suffix, expanded, fallbackText, rows, wantClamp]);
   let inner = props.children;
   if (props.code) inner = /* @__PURE__ */ jsx("code", { children: inner });
   if (props.keyboard) inner = /* @__PURE__ */ jsx("kbd", { children: inner });
@@ -284,41 +419,43 @@ function useTypographyBody(props) {
   if (props.strong) inner = /* @__PURE__ */ jsx("strong", { children: inner });
   if (props.italic) inner = /* @__PURE__ */ jsx("i", { children: inner });
   let copyNode = null;
-  if (props.copyable) {
+  if (props.copyable && !props.disabled) {
     const conf = typeof props.copyable === "object" ? props.copyable : {};
     copyNode = /* @__PURE__ */ jsx(CopyAction, { config: conf, fallbackText });
   }
   let editIconNode = null;
-  if (editable) {
+  if (editable && !props.disabled && triggers.includes("icon")) {
     const tip = editConf.tooltip ?? "\u7F16\u8F91";
     editIconNode = /* @__PURE__ */ jsx(
-      "span",
+      "button",
       {
-        role: "button",
-        "aria-label": typeof tip === "string" ? tip : "Edit",
-        tabIndex: 0,
+        type: "button",
+        "aria-label": typeof tip === "string" ? tip : "\u7F16\u8F91",
         title: typeof tip === "string" && tip !== "" ? tip : void 0,
         onClick: (e) => {
           e.stopPropagation();
           startEdit();
         },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            startEdit();
-          }
-        },
         className: "typo-action typo-edit",
         children: editConf.icon ?? /* @__PURE__ */ jsx(Icon, { name: "edit", size: 12 })
       }
     );
   }
-  if (editable && triggers.includes("text") && !editing) {
+  const textEditTrigger = !!editable && !props.disabled && triggers.includes("text") && !editing;
+  if (textEditTrigger && props.renderTextTrigger !== false) {
     inner = /* @__PURE__ */ jsx(
       "span",
       {
         className: "typo-edit-text-trigger",
+        role: "button",
+        tabIndex: 0,
         onClick: () => startEdit(),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            startEdit();
+          }
+        },
         children: inner
       }
     );
@@ -326,19 +463,42 @@ function useTypographyBody(props) {
   let style = props.style;
   let extraCls;
   if (wantClamp && !expanded) {
-    extraCls = rows > 1 ? "ellipsis-multi" : "ellipsis";
-    if (rows > 1) {
-      style = {
-        ...style,
-        WebkitLineClamp: rows
-      };
+    const clampClassName = rows > 1 ? "ellipsis-multi" : "ellipsis";
+    if (ellConf.suffix) {
+      extraCls = "ellipsis-with-suffix";
+      inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: ellipsisContentRef,
+            className: `typo-ellipsis-content ${clampClassName}`,
+            style: rows > 1 ? { WebkitLineClamp: rows } : void 0,
+            children: inner
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "typo-suffix", children: ellConf.suffix })
+      ] });
+    } else {
+      extraCls = clampClassName;
+      if (rows > 1) {
+        style = {
+          ...style,
+          WebkitLineClamp: rows
+        };
+      }
     }
+  } else if (ellConf.suffix) {
+    inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+      inner,
+      /* @__PURE__ */ jsx("span", { className: "typo-suffix", children: ellConf.suffix })
+    ] });
   }
   let expandNode = null;
-  if (wantClamp && ellConf.expandable && !expanded) {
+  if (wantClamp && truncated && ellConf.expandable && !expanded) {
     expandNode = /* @__PURE__ */ jsx(
-      "a",
+      "button",
       {
+        type: "button",
         className: "typo-expand",
         onClick: (e) => {
           ellConf.onExpand?.(e);
@@ -348,33 +508,40 @@ function useTypographyBody(props) {
       }
     );
   }
-  const tooltipContent = wantClamp && !expanded && ellConf.tooltip ? ellConf.tooltip === true ? fallbackText : ellConf.tooltip : void 0;
+  const tooltipContent = wantClamp && truncated && !expanded && ellConf.tooltip ? ellConf.tooltip === true ? fallbackText : ellConf.tooltip : void 0;
   return {
     editing,
     editConf,
     fallbackText,
     handleConfirm,
     handleCancel,
+    startEdit,
+    textEditTrigger,
     inner,
     copyNode,
     editIconNode,
     expandNode,
     style,
     extraCls,
-    tooltipContent
+    tooltipContent,
+    elementRef
   };
 }
-var Title = React.forwardRef((props, ref) => {
+var TitleBase = React.forwardRef((props, ref) => {
   const { level = 1, ...rest } = props;
   const body = useTypographyBody({ ...rest});
   const Tag = `h${level}`;
+  const nativeProps = getNativeTypographyProps(rest);
+  const composedRef = composeTypographyRef(body.elementRef, ref);
   if (body.editing) {
     return /* @__PURE__ */ jsx(
       Tag,
       {
-        ref,
+        ...nativeProps,
+        ref: composedRef,
         className: buildClass(rest, `typo typo-title h${level}`, "editing"),
         style: rest.style,
+        "aria-disabled": rest.disabled || void 0,
         children: /* @__PURE__ */ jsx(
           EditableEditor,
           {
@@ -382,6 +549,7 @@ var Title = React.forwardRef((props, ref) => {
             multiline: false,
             maxLength: body.editConf.maxLength,
             autoSize: body.editConf.autoSize,
+            enterIcon: body.editConf.enterIcon,
             onConfirm: body.handleConfirm,
             onCancel: body.handleCancel
           }
@@ -392,9 +560,11 @@ var Title = React.forwardRef((props, ref) => {
   const element = /* @__PURE__ */ jsxs(
     Tag,
     {
-      ref,
+      ...nativeProps,
+      ref: composedRef,
       className: buildClass(rest, `typo typo-title h${level}`, body.extraCls),
       style: body.style,
+      "aria-disabled": rest.disabled || void 0,
       children: [
         body.inner,
         body.expandNode,
@@ -403,20 +573,25 @@ var Title = React.forwardRef((props, ref) => {
       ]
     }
   );
-  return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
+  return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { content: body.tooltipContent, children: element }) : element;
 });
-Title.displayName = "Typography.Title";
-var Text = React.forwardRef((props, ref) => {
+TitleBase.displayName = "Typography.Title";
+var Title = withComponentTheme(TitleBase, "Title", "typography");
+var TextBase = React.forwardRef((props, ref) => {
   const { as = "span", ...rest } = props;
   const body = useTypographyBody({ ...rest});
   const Tag = as;
+  const nativeProps = getNativeTypographyProps(rest);
+  const composedRef = composeTypographyRef(body.elementRef, ref);
   if (body.editing) {
     return /* @__PURE__ */ jsx(
       Tag,
       {
-        ref,
+        ...nativeProps,
+        ref: composedRef,
         className: buildClass(rest, "typo typo-text", "editing"),
         style: rest.style,
+        "aria-disabled": rest.disabled || void 0,
         children: /* @__PURE__ */ jsx(
           EditableEditor,
           {
@@ -424,6 +599,7 @@ var Text = React.forwardRef((props, ref) => {
             multiline: false,
             maxLength: body.editConf.maxLength,
             autoSize: body.editConf.autoSize,
+            enterIcon: body.editConf.enterIcon,
             onConfirm: body.handleConfirm,
             onCancel: body.handleCancel
           }
@@ -434,9 +610,11 @@ var Text = React.forwardRef((props, ref) => {
   const element = /* @__PURE__ */ jsxs(
     Tag,
     {
-      ref,
+      ...nativeProps,
+      ref: composedRef,
       className: buildClass(rest, "typo typo-text", body.extraCls),
       style: body.style,
+      "aria-disabled": rest.disabled || void 0,
       children: [
         body.inner,
         body.expandNode,
@@ -445,19 +623,24 @@ var Text = React.forwardRef((props, ref) => {
       ]
     }
   );
-  return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
+  return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { content: body.tooltipContent, children: element }) : element;
 });
-Text.displayName = "Typography.Text";
-var Paragraph = React.forwardRef(
+TextBase.displayName = "Typography.Text";
+var Text = withComponentTheme(TextBase, "Text", "typography");
+var ParagraphBase = React.forwardRef(
   (props, ref) => {
     const body = useTypographyBody({ ...props});
+    const nativeProps = getNativeTypographyProps(props);
+    const composedRef = composeTypographyRef(body.elementRef, ref);
     if (body.editing) {
       return /* @__PURE__ */ jsx(
-        "div",
+        "p",
         {
-          ref,
+          ...nativeProps,
+          ref: composedRef,
           className: buildClass(props, "typo typo-paragraph", "editing"),
           style: props.style,
+          "aria-disabled": props.disabled || void 0,
           children: /* @__PURE__ */ jsx(
             EditableEditor,
             {
@@ -475,9 +658,11 @@ var Paragraph = React.forwardRef(
     const element = /* @__PURE__ */ jsxs(
       "p",
       {
-        ref,
+        ...nativeProps,
+        ref: composedRef,
         className: buildClass(props, "typo typo-paragraph", body.extraCls),
         style: body.style,
+        "aria-disabled": props.disabled || void 0,
         children: [
           body.inner,
           body.expandNode,
@@ -486,11 +671,16 @@ var Paragraph = React.forwardRef(
         ]
       }
     );
-    return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
+    return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { content: body.tooltipContent, children: element }) : element;
   }
 );
-Paragraph.displayName = "Typography.Paragraph";
-var Link = React.forwardRef(
+ParagraphBase.displayName = "Typography.Paragraph";
+var Paragraph = withComponentTheme(
+  ParagraphBase,
+  "Paragraph",
+  "typography"
+);
+var LinkBase = React.forwardRef(
   (props, ref) => {
     const {
       type,
@@ -512,9 +702,14 @@ var Link = React.forwardRef(
       externalIcon = "arrowRight",
       target,
       rel,
+      href,
+      tabIndex,
+      onClick: anchorOnClick,
+      onKeyDown: anchorOnKeyDown,
       ...anchorRest
     } = props;
     const body = useTypographyBody({
+      disabled,
       mark,
       code,
       keyboard,
@@ -526,60 +721,115 @@ var Link = React.forwardRef(
       editable,
       ellipsis,
       style,
-      children
+      children,
+      renderTextTrigger: false
     });
     const safeRel = target === "_blank" ? rel ?? "noopener noreferrer" : rel;
+    const composedRef = composeTypographyRef(body.elementRef, ref);
     if (body.editing) {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: buildClass(props, "typo typo-link", "editing"),
-          style,
-          children: /* @__PURE__ */ jsx(
-            EditableEditor,
-            {
-              initial: body.editConf.text ?? body.fallbackText,
-              multiline: false,
-              maxLength: body.editConf.maxLength,
-              autoSize: body.editConf.autoSize,
-              onConfirm: body.handleConfirm,
-              onCancel: body.handleCancel
-            }
-          )
-        }
-      );
+      return /* @__PURE__ */ jsxs("span", { className: "typo-link-group typo-link-editing-group", children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...anchorRest,
+            ref: composedRef,
+            className: [className, "typo-link-editing-anchor"].filter(Boolean).join(" "),
+            style,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            "aria-disabled": disabled || void 0,
+            onClick: (event) => event.preventDefault()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: buildClass(
+              { ...props, className: "" },
+              "typo typo-link",
+              "editing typo-link-editor-shell"
+            ),
+            style,
+            children: /* @__PURE__ */ jsx(
+              EditableEditor,
+              {
+                initial: body.editConf.text ?? body.fallbackText,
+                multiline: false,
+                maxLength: body.editConf.maxLength,
+                autoSize: body.editConf.autoSize,
+                enterIcon: body.editConf.enterIcon,
+                onConfirm: body.handleConfirm,
+                onCancel: body.handleCancel
+              }
+            )
+          }
+        )
+      ] });
     }
+    const linkExtraClass = [
+      body.extraCls,
+      body.textEditTrigger && "typo-edit-text-trigger"
+    ].filter(Boolean).join(" ");
     const element = /* @__PURE__ */ jsxs(
       "a",
       {
-        ref,
-        className: buildClass(props, "typo typo-link", body.extraCls),
+        ...anchorRest,
+        ref: composedRef,
+        className: buildClass(props, "typo typo-link", linkExtraClass),
         style: body.style,
-        target,
+        href: disabled ? void 0 : href,
+        target: disabled ? void 0 : target,
         rel: safeRel,
+        tabIndex: disabled ? -1 : tabIndex,
         "aria-disabled": disabled || void 0,
         onClick: (e) => {
           if (disabled) {
             e.preventDefault();
+            e.stopPropagation();
             return;
           }
-          anchorRest.onClick?.(e);
+          if (body.textEditTrigger) {
+            e.preventDefault();
+            e.stopPropagation();
+            body.startEdit();
+            return;
+          }
+          anchorOnClick?.(e);
+        },
+        onKeyDown: (event) => {
+          if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          anchorOnKeyDown?.(event);
+          if (!event.defaultPrevented && body.textEditTrigger && (event.key === "Enter" || event.key === " ")) {
+            event.preventDefault();
+            event.stopPropagation();
+            body.startEdit();
+          }
         },
-        ...anchorRest,
         children: [
           body.inner,
-          external && /* @__PURE__ */ jsx("span", { className: "typo-link-ext", "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: externalIcon, size: 12 }) }),
-          body.expandNode,
-          body.copyNode,
-          body.editIconNode
+          external && /* @__PURE__ */ jsx("span", { className: "typo-link-ext", "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon, { name: externalIcon, size: 12 }) })
         ]
       }
     );
-    return body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { ref, content: body.tooltipContent, children: element }) : element;
+    const linkedElement = body.tooltipContent ? /* @__PURE__ */ jsx(EllipsisTooltip, { content: body.tooltipContent, children: element }) : element;
+    if (!body.expandNode && !body.copyNode && !body.editIconNode) {
+      return linkedElement;
+    }
+    return /* @__PURE__ */ jsxs("span", { className: "typo-link-group", children: [
+      linkedElement,
+      body.expandNode,
+      body.copyNode,
+      body.editIconNode
+    ] });
   }
 );
-Link.displayName = "Typography.Link";
-var TypographyBase = React.forwardRef(
+LinkBase.displayName = "Typography.Link";
+var Link = withComponentTheme(LinkBase, "Link", "typography");
+var TypographyRoot = React.forwardRef(
   ({ className = "", children, ...rest }, ref) => /* @__PURE__ */ jsx(
     "article",
     {
@@ -590,11 +840,16 @@ var TypographyBase = React.forwardRef(
     }
   )
 );
-TypographyBase.Title = Title;
-TypographyBase.Text = Text;
-TypographyBase.Paragraph = Paragraph;
-TypographyBase.Link = Link;
-TypographyBase.displayName = "Typography";
-var Typography = TypographyBase;
+TypographyRoot.displayName = "Typography";
+var ThemedTypography = withComponentTheme(
+  TypographyRoot,
+  "Typography",
+  "typography"
+);
+var Typography = ThemedTypography;
+Typography.Title = Title;
+Typography.Text = Text;
+Typography.Paragraph = Paragraph;
+Typography.Link = Link;
 
 export { Link, Paragraph, Text, Title, Typography };