@godxjp/ui 23.2.1 → 23.4.0

package/dist/components/general/typography.js

@@ -1,13 +1,379 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Check, Copy, LoaderCircle, Pencil } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const Text = React.forwardRef(
-  ({
-    as = "span",
+import { useTranslation } from "../../i18n/use-translation.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { Textarea } from "../data-entry/textarea.js";
+const COPIED_RESET_MS = 3e3;
+const DECORATION_ELEMENTS = [
+  ["strong", "strong"],
+  ["underline", "u"],
+  ["delete", "del"],
+  ["code", "code"],
+  ["mark", "mark"],
+  ["keyboard", "kbd"],
+  ["italic", "i"]
+];
+function toList(value) {
+  if (value === void 0) return [];
+  return Array.isArray(value) ? value : [value];
+}
+function getNode(node, fallback, needDom = false) {
+  if (node === true || node === void 0) return fallback;
+  if (node === false) return needDom ? fallback : null;
+  return node || (needDom ? fallback : null);
+}
+function toCopyConfigList(value) {
+  if (value === false) return [false, false];
+  return toList(value);
+}
+function useMergedConfig(propConfig, template) {
+  const support = Boolean(propConfig);
+  return React.useMemo(() => {
+    const isObject = propConfig !== null && typeof propConfig === "object";
+    return [support, { ...template, ...support && isObject ? propConfig : null }];
+  }, [support, propConfig]);
+}
+function useControlledFlag(initial, controlled) {
+  const [internal, setInternal] = React.useState(initial);
+  return [controlled ?? internal, setInternal];
+}
+const TYPE_TO_TONE = {
+  secondary: "muted",
+  success: "success",
+  warning: "warning",
+  danger: "destructive"
+};
+async function writeClipboard(text, format) {
+  if (format === "text/html" && typeof ClipboardItem !== "undefined") {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        "text/html": new Blob([text], { type: "text/html" }),
+        "text/plain": new Blob([text], { type: "text/plain" })
+      })
+    ]);
+    return;
+  }
+  await navigator.clipboard.writeText(text);
+}
+function childrenToText(children) {
+  return React.Children.toArray(children).map((node) => typeof node === "string" || typeof node === "number" ? String(node) : "").join("");
+}
+function ActionTooltip({ title, children }) {
+  if (title === null || title === void 0 || title === false || title === "") return children;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: title })
+  ] });
+}
+const TypographyAction = React.forwardRef(({ slot, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    ref,
+    type: "button",
+    "data-slot": slot,
+    className: cn("ui-typography-action", className),
+    ...props
+  }
+));
+TypographyAction.displayName = "TypographyAction";
+function TypographyEditor({
+  value,
+  ariaLabel,
+  maxLength,
+  autoSize = true,
+  enterIcon,
+  className,
+  style,
+  onSave,
+  onCancel,
+  onEnd
+}) {
+  const ref = React.useRef(null);
+  const inComposition = React.useRef(false);
+  const lastKey = React.useRef(null);
+  const [current, setCurrent] = React.useState(value);
+  React.useEffect(() => {
+    setCurrent(value);
+  }, [value]);
+  React.useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    node.focus();
+    node.setSelectionRange(node.value.length, node.value.length);
+  }, []);
+  const confirm = () => {
+    onSave(current.trim());
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "typography-edit", className: cn("ui-typography-edit", className), style, children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        ref,
+        variant: "borderless",
+        className: "ui-typography-edit-textarea",
+        rows: 1,
+        autoSize,
+        maxLength,
+        "aria-label": ariaLabel,
+        value: current,
+        onChange: (event) => {
+          setCurrent(event.target.value.replace(/[\n\r]/g, ""));
+        },
+        onCompositionStart: () => {
+          inComposition.current = true;
+        },
+        onCompositionEnd: () => {
+          inComposition.current = false;
+        },
+        onKeyDown: (event) => {
+          if (inComposition.current) return;
+          lastKey.current = event.key;
+        },
+        onKeyUp: (event) => {
+          if (lastKey.current !== event.key || inComposition.current || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            return;
+          }
+          if (event.key === "Enter") {
+            confirm();
+            onEnd?.();
+          } else if (event.key === "Escape") {
+            onCancel();
+          }
+        },
+        onBlur: confirm
+      }
+    ),
+    enterIcon !== null ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-typography-edit-confirm", children: enterIcon ?? "\u23CE" }) : null
+  ] });
+}
+function useTypographyBlock(props, allowRows) {
+  const { t } = useTranslation();
+  const { children, copyable, editable, ellipsis, actions, disabled } = props;
+  const placement = actions?.placement ?? "end";
+  const [enableEdit, editConfig] = useMergedConfig(editable);
+  const [editing, setEditing] = useControlledFlag(false, editConfig.editing);
+  const triggerType = editConfig.triggerType ?? ["icon"];
+  const editButtonRef = React.useRef(null);
+  const wasEditing = React.useRef(false);
+  React.useEffect(() => {
+    if (!editing && wasEditing.current) editButtonRef.current?.focus();
+    wasEditing.current = editing;
+  }, [editing]);
+  const startEditing = (event) => {
+    event?.preventDefault();
+    editConfig.onStart?.();
+    setEditing(true);
+  };
+  const [enableCopy, copyConfig] = useMergedConfig(copyable);
+  const [copied, setCopied] = React.useState(false);
+  const [copyLoading, setCopyLoading] = React.useState(false);
+  const copyTimer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+    },
+    []
+  );
+  const onCopyClick = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setCopyLoading(true);
+    try {
+      const configured = typeof copyConfig.text === "function" ? await copyConfig.text() : copyConfig.text;
+      await writeClipboard(configured || childrenToText(children) || "", copyConfig.format);
+      setCopyLoading(false);
+      setCopied(true);
+      if (copyTimer.current) clearTimeout(copyTimer.current);
+      copyTimer.current = setTimeout(() => {
+        setCopied(false);
+      }, COPIED_RESET_MS);
+      copyConfig.onCopy?.(event);
+    } catch {
+      setCopyLoading(false);
+    }
+  };
+  const [enableEllipsis, ellipsisConfig] = useMergedConfig(ellipsis);
+  const [expanded, setExpanded] = useControlledFlag(
+    ellipsisConfig.defaultExpanded ?? false,
+    ellipsisConfig.expanded
+  );
+  const rows = allowRows ? ellipsisConfig.rows ?? 1 : 1;
+  const expandable = allowRows ? ellipsisConfig.expandable : void 0;
+  const clamping = enableEllipsis && (!expanded || expandable === "collapsible");
+  const [isEllipsis, setIsEllipsis] = React.useState(false);
+  const elementRef = React.useRef(null);
+  const onEllipsisRef = React.useRef(ellipsisConfig.onEllipsis);
+  onEllipsisRef.current = ellipsisConfig.onEllipsis;
+  const measure = React.useCallback(() => {
+    const node = elementRef.current;
+    if (!node || !enableEllipsis) return;
+    const next = rows > 1 ? node.scrollHeight > node.clientHeight : node.scrollWidth > node.clientWidth;
+    setIsEllipsis((prev) => {
+      if (prev === next) return prev;
+      onEllipsisRef.current?.(next);
+      return next;
+    });
+  }, [enableEllipsis, rows]);
+  const measureRef = React.useCallback((node) => {
+    elementRef.current = node;
+  }, []);
+  React.useLayoutEffect(() => {
+    measure();
+  }, [measure, children, expanded, clamping]);
+  React.useEffect(() => {
+    const node = elementRef.current;
+    if (!node || !enableEllipsis || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      measure();
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [measure, enableEllipsis]);
+  const onExpandClick = (event) => {
+    const next = !expanded;
+    setExpanded(next);
+    ellipsisConfig.onExpand?.(event, { expanded: next });
+  };
+  const copyLabels = toCopyConfigList(copyConfig.tooltips);
+  const copyIcons = toCopyConfigList(copyConfig.icon);
+  const systemCopyLabel = copied ? t("ui.typography.copied") : t("ui.typography.copy");
+  const copyTitle = getNode(copyLabels[copied ? 1 : 0], systemCopyLabel);
+  const copyAriaLabel = typeof copyTitle === "string" ? copyTitle : systemCopyLabel;
+  const copyNode = enableCopy ? /* @__PURE__ */ jsx(ActionTooltip, { title: copyTitle, children: /* @__PURE__ */ jsx(
+    TypographyAction,
+    {
+      slot: "typography-copy",
+      "data-copied": copied ? "" : void 0,
+      "aria-label": copyAriaLabel,
+      tabIndex: copyConfig.tabIndex,
+      onClick: onCopyClick,
+      children: copied ? getNode(copyIcons[1], /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "ui-typography-icon" }), true) : getNode(
+        copyIcons[0],
+        copyLoading ? /* @__PURE__ */ jsx(LoaderCircle, { "aria-hidden": true, className: "ui-typography-icon ui-typography-icon-spin" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true, className: "ui-typography-icon" }),
+        true
+      )
+    }
+  ) }, "copy") : null;
+  const editTitle = toList(editConfig.tooltip)[0] ?? t("ui.typography.edit");
+  const editNode = enableEdit && triggerType.includes("icon") ? /* @__PURE__ */ jsx(ActionTooltip, { title: editConfig.tooltip === false ? null : editTitle, children: /* @__PURE__ */ jsx(
+    TypographyAction,
+    {
+      ref: editButtonRef,
+      slot: "typography-edit-trigger",
+      "aria-label": typeof editTitle === "string" ? editTitle : t("ui.typography.edit"),
+      tabIndex: editConfig.tabIndex,
+      onClick: startEditing,
+      children: editConfig.icon ?? /* @__PURE__ */ jsx(Pencil, { "aria-hidden": true, className: "ui-typography-icon" })
+    }
+  ) }, "edit") : null;
+  const showExpand = Boolean(expandable) && (isEllipsis || expanded);
+  const expandSymbol = typeof ellipsisConfig.symbol === "function" ? ellipsisConfig.symbol(expanded) : ellipsisConfig.symbol ?? (expanded ? t("ui.typography.collapse") : t("ui.typography.expand"));
+  const expandNode = showExpand ? /* @__PURE__ */ jsx(
+    TypographyAction,
+    {
+      slot: expanded ? "typography-collapse" : "typography-expand",
+      "aria-expanded": expanded,
+      "aria-label": expanded ? t("ui.typography.collapse") : t("ui.typography.expand"),
+      onClick: onExpandClick,
+      children: expandSymbol
+    },
+    "expand"
+  ) : null;
+  const hasActions = Boolean(copyNode || editNode || expandNode);
+  const actionsNode = hasActions ? /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "typography-actions",
+      "data-placement": placement,
+      className: "ui-typography-actions",
+      children: [
+        expandNode,
+        editNode,
+        copyNode
+      ]
+    },
+    "actions"
+  ) : null;
+  let decorated = children;
+  for (const [flag, tag] of DECORATION_ELEMENTS) {
+    if (props[flag]) decorated = React.createElement(tag, {}, decorated);
+  }
+  const suffix = ellipsisConfig.suffix;
+  const wrapsContent = clamping && Boolean(hasActions || suffix !== void 0);
+  const ellipsisTooltip = ellipsisConfig.tooltip === true ? editConfig.text ?? children : ellipsisConfig.tooltip;
+  const attrs = {
+    "data-disabled": disabled ? "" : void 0,
+    "data-ellipsis": enableEllipsis ? "" : void 0,
+    "data-expanded": enableEllipsis && expanded ? "" : void 0
+  };
+  return {
+    editing: enableEdit && editing,
+    editor: /* @__PURE__ */ jsx(
+      TypographyEditor,
+      {
+        value: editConfig.text ?? (typeof children === "string" ? children : ""),
+        ariaLabel: typeof editConfig.text === "string" ? editConfig.text : void 0,
+        maxLength: editConfig.maxLength,
+        autoSize: editConfig.autoSize,
+        enterIcon: editConfig.enterIcon,
+        onSave: (value) => {
+          editConfig.onChange?.(value);
+          setEditing(false);
+        },
+        onCancel: () => {
+          editConfig.onCancel?.();
+          setEditing(false);
+        },
+        onEnd: editConfig.onEnd
+      }
+    ),
+    leading: placement === "start" ? actionsNode : null,
+    text: decorated,
+    trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+      suffix,
+      placement === "start" ? null : actionsNode
+    ] }),
+    attrs,
+    measureRef,
+    wrapsContent,
+    onTextClick: enableEdit && triggerType.includes("text") ? startEditing : void 0,
+    ellipsisTooltip,
+    isEllipsis
+  };
+}
+function usesBlockBehaviour(props) {
+  if (props.copyable || props.editable || props.ellipsis || props.actions || props.disabled) {
+    return true;
+  }
+  return DECORATION_ELEMENTS.some(([flag]) => props[flag]);
+}
+function ellipsisRows(ellipsis) {
+  if (!ellipsis || ellipsis === true) return 1;
+  const rows = ellipsis.rows;
+  return typeof rows === "number" && rows >= 1 ? Math.floor(rows) : 1;
+}
+function composeRefs(measureRef, forwarded) {
+  return (node) => {
+    measureRef(node);
+    if (typeof forwarded === "function") forwarded(node);
+    else if (forwarded) forwarded.current = node;
+  };
+}
+const TextBase = React.forwardRef((props, ref) => {
+  const {
+    as,
+    component,
     asChild = false,
     size = "sm",
     // `link` is an affordance, not a colour: it only moves the DEFAULT tone, so
     // `link tone="destructive"` is a destructive link rather than an argument between two rules.
     tone,
+    type,
     weight = "regular",
     align,
     truncate,
@@ -21,60 +387,144 @@ const Text = React.forwardRef(
     className,
     style,
     children,
-    ...props
-  }, ref) => {
-    const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
-    const truncating = truncate === true && clampLines === void 0;
-    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
-      if (clamp !== void 0 && clampLines === void 0) {
-        console.warn(
-          `Text: \`clamp\` must be a finite number \u2265 1 (got ${String(clamp)}); ignored.`
-        );
-      }
-      if (truncate && clampLines !== void 0) {
-        console.warn(
-          "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
-        );
-      }
-      if (whitespace === "pre-wrap" && truncating) {
-        console.warn(
-          'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
-        );
-      }
+    allowRows = false,
+    // antd block behaviour — read by `useTypographyBlock`, never spread onto the DOM.
+    copyable: _copyable,
+    editable: _editable,
+    ellipsis,
+    actions: _actions,
+    disabled,
+    code: _code,
+    mark: _mark,
+    underline: _underline,
+    delete: _delete,
+    strong: _strong,
+    keyboard: _keyboard,
+    italic: _italic,
+    ...rest
+  } = props;
+  const block = useTypographyBlock(props, allowRows);
+  const element = as ?? component ?? "span";
+  const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
+  const ellipsisRowCount = ellipsis ? ellipsisRows(ellipsis) : 0;
+  const effectiveClamp = ellipsisRowCount > 1 ? ellipsisRowCount : ellipsis ? void 0 : clampLines;
+  const truncating = (truncate === true || ellipsisRowCount === 1) && effectiveClamp === void 0;
+  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+    if (clamp !== void 0 && clampLines === void 0) {
+      console.warn(`Text: \`clamp\` must be a finite number \u2265 1 (got ${String(clamp)}); ignored.`);
     }
-    const typography = {
-      "data-slot": "text",
-      "data-size": size,
-      "data-tone": tone ?? (link ? "primary" : "default"),
-      "data-link": link ? "" : void 0,
-      "data-weight": weight,
-      "data-align": align,
-      "data-truncate": truncating ? "" : void 0,
-      "data-clamp": clampLines !== void 0 ? "" : void 0,
-      // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
-      // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
-      "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
-      style: clampLines !== void 0 ? { ...style, "--text-clamp": clampLines } : style,
-      "data-tabular": tabular ? "" : void 0,
-      "data-decoration": decoration,
-      "data-chip": chip ? "" : void 0,
-      "data-mono": mono ? "" : void 0,
-      className: cn("ui-text", className),
-      ...props
-    };
-    if (asChild) {
-      const child = React.Children.only(children);
-      return React.cloneElement(child, {
-        ...typography,
-        ...child.props,
-        ref,
-        className: cn(typography.className, child.props.className)
-      });
+    if (truncate && clampLines !== void 0) {
+      console.warn(
+        "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
+      );
+    }
+    if (whitespace === "pre-wrap" && truncating) {
+      console.warn(
+        'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
+      );
+    }
+    if (ellipsis && (truncate || clamp !== void 0)) {
+      console.warn(
+        "Text: `ellipsis` (antd) and `truncate`/`clamp` are the same axis \u2014 `ellipsis` takes precedence; drop the other."
+      );
+    }
+    if (tone && type) {
+      console.warn(
+        "Text: `tone` and `type` (antd) are the same axis \u2014 `tone` takes precedence; drop `type`."
+      );
     }
-    return React.createElement(as, { ref, ...typography }, children);
   }
-);
+  const resolvedTone = tone ?? (type ? TYPE_TO_TONE[type] : void 0) ?? (link ? "primary" : "default");
+  const clampStyle = effectiveClamp !== void 0 ? { ...style, "--text-clamp": effectiveClamp } : style;
+  const typography = {
+    "data-slot": "text",
+    "data-size": size,
+    "data-tone": resolvedTone,
+    "data-link": link ? "" : void 0,
+    "data-weight": weight,
+    "data-align": align,
+    // When the action cluster or a suffix is present the clamp moves ONTO the inner wrapper, so the
+    // buttons are not eaten by the clamped box. Everything else keeps the attribute where it has
+    // always been, on the element itself.
+    "data-truncate": truncating && !block.wrapsContent ? "" : void 0,
+    "data-clamp": effectiveClamp !== void 0 && !block.wrapsContent ? "" : void 0,
+    // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
+    // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
+    "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
+    style: clampStyle,
+    "data-tabular": tabular ? "" : void 0,
+    "data-decoration": decoration,
+    "data-chip": chip ? "" : void 0,
+    "data-mono": mono ? "" : void 0,
+    "aria-disabled": disabled ? true : void 0,
+    ...block.attrs,
+    onClick: block.onTextClick,
+    className: cn("ui-text", className),
+    ...rest
+  };
+  if (block.editing) return block.editor;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    block.leading,
+    block.wrapsContent ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "typography-content",
+        "data-truncate": truncating ? "" : void 0,
+        "data-clamp": effectiveClamp !== void 0 ? "" : void 0,
+        className: "ui-typography-content",
+        style: clampStyle,
+        children: block.text
+      }
+    ) : block.text,
+    block.trailing
+  ] });
+  if (asChild) {
+    const child = React.Children.only(children);
+    const cloned = {
+      ...typography,
+      ...child.props,
+      ref,
+      className: cn(typography.className, child.props.className)
+    };
+    return usesBlockBehaviour(props) ? React.cloneElement(child, cloned, body) : React.cloneElement(child, cloned);
+  }
+  return React.createElement(
+    element,
+    { ref: composeRefs(block.measureRef, ref), ...typography },
+    body
+  );
+});
+TextBase.displayName = "TextBase";
+const Text = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextBase, { ref, ...props }));
 Text.displayName = "Text";
+const Paragraph = React.forwardRef(
+  ({ as = "div", className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    TextBase,
+    {
+      ref,
+      as,
+      allowRows: true,
+      className: cn("ui-typography-paragraph", className),
+      ...rest
+    }
+  )
+);
+Paragraph.displayName = "Paragraph";
+const Link = React.forwardRef(
+  ({ as = "a", rel, target, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+    TextBase,
+    {
+      ref,
+      as,
+      link: true,
+      target,
+      rel: rel === void 0 && target === "_blank" ? "noopener noreferrer" : rel,
+      className: cn("ui-typography-link", className),
+      ...rest
+    }
+  )
+);
+Link.displayName = "Link";
 const Heading = React.forwardRef(
   ({ level = 2, as, tone = "default", align, truncate, weight = "medium", className, ...props }, ref) => React.createElement(as ?? `h${level}`, {
     ref,
@@ -89,7 +539,101 @@ const Heading = React.forwardRef(
   })
 );
 Heading.displayName = "Heading";
+const Title = React.forwardRef((props, ref) => {
+  const {
+    level = 1,
+    as,
+    component,
+    tone,
+    type,
+    align,
+    truncate,
+    weight = "medium",
+    className,
+    style,
+    children: _children,
+    ellipsis,
+    copyable: _copyable,
+    editable: _editable,
+    actions: _actions,
+    disabled,
+    code: _code,
+    mark: _mark,
+    underline: _underline,
+    delete: _delete,
+    keyboard: _keyboard,
+    italic: _italic,
+    ...rest
+  } = props;
+  const block = useTypographyBlock(props, true);
+  const safeLevel = level >= 1 && level <= 5 ? level : 1;
+  const element = as ?? component ?? `h${safeLevel}`;
+  const ellipsisRowCount = ellipsis ? ellipsisRows(ellipsis) : 0;
+  const effectiveClamp = ellipsisRowCount > 1 ? ellipsisRowCount : void 0;
+  const truncating = (truncate === true || ellipsisRowCount === 1) && effectiveClamp === void 0;
+  const clampStyle = effectiveClamp !== void 0 ? { ...style, "--text-clamp": effectiveClamp } : style;
+  if (block.editing) return block.editor;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    block.leading,
+    block.wrapsContent ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "typography-content",
+        "data-truncate": truncating ? "" : void 0,
+        "data-clamp": effectiveClamp !== void 0 ? "" : void 0,
+        className: "ui-typography-content",
+        style: clampStyle,
+        children: block.text
+      }
+    ) : block.text,
+    block.trailing
+  ] });
+  return React.createElement(
+    element,
+    {
+      ref: composeRefs(block.measureRef, ref),
+      "data-slot": "heading",
+      "data-level": safeLevel,
+      "data-tone": tone ?? (type ? TYPE_TO_TONE[type] : void 0) ?? "default",
+      "data-align": align,
+      "data-weight": weight,
+      "data-truncate": truncating && !block.wrapsContent ? "" : void 0,
+      "data-clamp": effectiveClamp !== void 0 && !block.wrapsContent ? "" : void 0,
+      "aria-disabled": disabled ? true : void 0,
+      style: clampStyle,
+      ...block.attrs,
+      onClick: block.onTextClick,
+      className: cn("ui-heading", "ui-typography-title", className),
+      ...rest
+    },
+    body
+  );
+});
+Title.displayName = "Title";
+const TypographyRoot = React.forwardRef(
+  ({ as, component, className, children, ...rest }, ref) => React.createElement(
+    as ?? component ?? "article",
+    {
+      ref,
+      "data-slot": "typography",
+      className: cn("ui-typography", className),
+      ...rest
+    },
+    children
+  )
+);
+TypographyRoot.displayName = "Typography";
+const Typography = Object.assign(TypographyRoot, {
+  Text,
+  Title,
+  Paragraph,
+  Link
+});
 export {
   Heading,
-  Text
+  Link,
+  Paragraph,
+  Text,
+  Title,
+  Typography
 };