@xsolla/xui-tooltip 0.216.1 → 0.218.0

package/README.md

@@ -55,7 +55,11 @@ npm install @xsolla/xui-tooltip
 ```tsx
 import {
   Tooltip,
+  TooltipText,
+  TooltipLink,
   type TooltipProps,
+  type TooltipTextProps,
+  type TooltipLinkProps,
   type TooltipPlacement,
   type TooltipSize,
 } from "@xsolla/xui-tooltip";
@@ -83,7 +87,7 @@ export default function Example() {
 
 | Prop                | Type                           | Default | Description                                                                                                   |
 | ------------------- | ------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------- |
-| `content`           | `ReactNode`                    | —       | **Required.** Tooltip content. Strings/numbers render as themed text; `\n` in a string is preserved as a line break (`white-space: pre-line`) while long lines still wrap normally.  |
+| `content`           | `ReactNode`                    | —       | **Required.** Tooltip content. Strings/numbers render as themed text; `\n` in a string is preserved as a line break (`white-space: pre-line`) while long lines still wrap normally. Any other node renders as-is and inherits the tooltip's type scale — see [Rich content](#rich-content). |
 | `children`          | `ReactNode`                    | —       | **Required.** Trigger element.                                                                                |
 | `size`              | `"sm" \| "md" \| "lg" \| "xl"` | `"md"`  | Typography size.                                                                                              |
 | `placement`         | `TooltipPlacement`             | `"top"` | Position relative to trigger.                                                                                 |
@@ -108,14 +112,47 @@ than 34px cannot fit the arrow's 17px inset from that edge, so the tooltip slide
 out by the shortfall to keep the arrow on the trigger's centre; icon-sized
 triggers stay correctly aimed.
 
+### `<TooltipText>`
+
+Text inside a tooltip's `content`, styled with the surrounding tooltip's size scale.
+
+| Prop          | Type                           | Default     | Description                                                                                             |
+| ------------- | ------------------------------ | ----------- | --------------------------------------------------------------------------------------------------- |
+| `children`    | `ReactNode`                    | —           | Copy to render.                                                                                       |
+| `accent`      | `boolean`                      | `false`     | Render with the **accent** (bold) weight of the body token matching the tooltip's size.               |
+| `size`        | `"sm" \| "md" \| "lg" \| "xl"` | *inherited* | Overrides the size taken from the surrounding tooltip. Falls back to `"md"` when used outside one.     |
+| `color`       | `string`                       | *inherited* | Overrides the inherited `content/primary` colour.                                                      |
+| `style`       | `CSSProperties`                | —           | Merged into the rendered text's inline styles.                                                         |
+| `data-testid` | `string`                       | —           | Test identifier.                                                                                      |
+| `testID`      | `string`                       | —           | Test ID for testing frameworks.                                                                       |
+
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
+
+### `<TooltipLink>`
+
+A link inside a tooltip's `content`, using the `content/brand-primary` token. Accepts every `TooltipText` prop plus:
+
+| Prop        | Type         | Default | Description                                                                     |
+| ----------- | ------------ | ------- | ----------------------------------------------------------------------------- |
+| `href`      | `string`     | —       | Destination. Omit when navigation is driven by `onPress`.                       |
+| `target`    | `string`     | —       | Anchor target. `"_blank"` automatically adds `noopener noreferrer` to `rel`.    |
+| `rel`       | `string`     | —       | Extra `rel` tokens, merged with the `_blank` hardening above.                   |
+| `onPress`   | `() => void` | —       | Click handler. When supplied, the anchor's default navigation is prevented.     |
+| `underline` | `boolean`    | `false` | Underline the link text.                                                        |
+
 ### Size typography
 
-| Size | Font size | Line height |
-| ---- | --------- | ----------- |
-| `sm` | 14px      | 16px        |
-| `md` | 16px      | 18px        |
-| `lg` | 18px      | 20px        |
-| `xl` | 20px      | 22px        |
+| Size | Font size | Line height | Body token for `accent` |
+| ---- | --------- | ----------- | ----------------------- |
+| `sm` | 14px      | 16px        | `body-sm`               |
+| `md` | 16px      | 18px        | `body-md`               |
+| `lg` | 18px      | 20px        | `body-lg`               |
+| `xl` | 20px      | 22px        | `body-lg`               |
+
+`accent` resolves its weight from the body token in the right-hand column, so
+bold tooltip copy follows the active product context (500 for b2b/b2c, 600 for
+corpsite) instead of a fixed weight. `xl` reuses `body-lg` because the body
+scale tops out at 18px.
 
 ## Examples
 
@@ -237,9 +274,43 @@ export default function Multiline() {
 
 ### Rich content
 
+`content` is not restricted to a string — pass any node. The tooltip publishes
+its resolved type scale and colour tokens to whatever it renders, so
+`TooltipText` and `TooltipLink` pick up the tooltip's `size` without repeating
+it, and bare markup inherits the same font size, line height and colour.
+
 ```tsx
 import * as React from "react";
-import { Tooltip } from "@xsolla/xui-tooltip";
+import { Tooltip, TooltipText, TooltipLink } from "@xsolla/xui-tooltip";
+import { Button } from "@xsolla/xui-button";
+
+export default function RichContent() {
+  return (
+    <Tooltip
+      size="md"
+      maxWidth={280}
+      content={
+        <>
+          <TooltipText accent>Payout schedule</TooltipText>
+          <TooltipText>{" is set per project. "}</TooltipText>
+          <TooltipLink href="https://developers.xsolla.com" target="_blank">
+            Read the docs
+          </TooltipLink>
+        </>
+      }
+    >
+      <Button variant="secondary">Hover me</Button>
+    </Tooltip>
+  );
+}
+```
+
+Any component composes the same way — the tooltip is a wrapper around its
+content, not a text-only surface:
+
+```tsx
+import * as React from "react";
+import { Tooltip, TooltipText } from "@xsolla/xui-tooltip";
 import { Avatar } from "@xsolla/xui-avatar";
 
 export default function Rich() {
@@ -247,9 +318,9 @@ export default function Rich() {
     <Tooltip
       content={
         <div style={{ textAlign: "center" }}>
-          <strong>John Doe</strong>
+          <TooltipText accent>John Doe</TooltipText>
           <br />
-          <span style={{ opacity: 0.7 }}>Senior Developer</span>
+          <TooltipText style={{ opacity: 0.7 }}>Senior Developer</TooltipText>
         </div>
       }
     >
@@ -329,18 +400,21 @@ export default function DisabledTrigger() {
 
 - **Hover bridge.** Moving the cursor from the trigger onto the tooltip keeps it visible — the tooltip surface is hoverable and a short `delayLeave` grace period (default 100ms) bridges the gap between trigger and tooltip, so the tooltip no longer flickers or disappears when the cursor moves toward it. The tooltip hides once the cursor leaves *both* the trigger and the tooltip.
 - **Multiline content.** String/number `content` renders with `white-space: pre-line`, so `\n` characters are preserved as line breaks while long lines continue to wrap.
+- **Content inheritance.** Non-string `content` is rendered inside a wrapper carrying the tooltip's font size, line height and `content/primary` colour, so nested markup does not have to restate them.
 
 ## Theme
 
 - The tooltip is a floating surface: both the panel and its arrow use the `layer/float` colour token (`theme.colors.layer.float`), not a page-level `background/*` token, so the tooltip stays visibly lifted off the page in light and dark mode.
 - Label colour comes from `theme.colors.content.primary`; corner radius comes from `theme.shape.tooltip[size]`.
+- `TooltipLink` uses `theme.colors.content.brand.primary`, and its focus ring uses `theme.colors.border.brand`.
+- `TooltipText accent` resolves its weight from `theme.typographyTokens.basic[<body token>].accent.fontWeight` — see [Size typography](#size-typography).
 
 ## Accessibility
 
 - Tooltip surface uses `role="tooltip"` and `aria-hidden` reflects visibility.
 - Trigger receives `aria-describedby` while the tooltip is visible.
 - Press Escape to dismiss.
-- Tooltip content is non-interactive — for interactive content (links, buttons), prefer [Toggletip](./toggletip.md). The tooltip surface is hoverable only so the pointer can rest on it without flicker.
+- **`TooltipLink` is pointer-reachable only.** The tooltip surface is hoverable, so a link inside it can be clicked with a mouse — but tabbing away from the trigger blurs it and dismisses the tooltip, so the link cannot be reached by keyboard. Use [Toggletip](./toggletip.md) whenever the link is essential or must be keyboard-operable; reserve `TooltipLink` for supplementary "read more" affordances that are also available elsewhere in the UI.
 
 ## Related
 

package/native/index.d.mts

@@ -1,11 +1,14 @@
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type TooltipSize = "sm" | "md" | "lg" | "xl";
 type TooltipPlacement = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
 interface TooltipProps {
     /**
-     * The content of the tooltip.
+     * The content of the tooltip. Strings and numbers are rendered as themed
+     * text; any other node is rendered as-is and inherits the tooltip's
+     * typography (see `TooltipText` / `TooltipLink`).
      */
     content: ReactNode;
     /**
@@ -52,7 +55,125 @@ interface TooltipProps {
     className?: string;
     testID?: string;
 }
+/**
+ * Typography and colour tokens the tooltip publishes to its content, so nested
+ * helpers do not have to re-derive them from the tooltip's `size`.
+ */
+interface TooltipContentStyles {
+    /** Size of the surrounding tooltip. */
+    size: TooltipSize;
+    /** Font size for the surrounding tooltip's size, in pixels. */
+    fontSize: number;
+    /** Line height for the surrounding tooltip's size, as a CSS length. */
+    lineHeight: string;
+    /** `content/primary` — default colour for tooltip copy. */
+    color: string;
+    /** `content/brand-primary` — default colour for links inside a tooltip. */
+    linkColor: string;
+}
+interface TooltipTextProps {
+    children?: ReactNode;
+    /**
+     * Render with the *accent* (bold) weight of the body token matching the
+     * tooltip's size.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * Overrides the size inherited from the surrounding tooltip. Defaults to the
+     * tooltip's own `size`, or `"md"` when rendered outside one.
+     */
+    size?: TooltipSize;
+    /** Overrides the inherited text colour. */
+    color?: string;
+    style?: any;
+    "data-testid"?: string;
+    testID?: string;
+}
+interface TooltipLinkProps extends TooltipTextProps {
+    /** Destination. Omit when driving navigation through `onPress`. */
+    href?: string;
+    /**
+     * Anchor target. `"_blank"` automatically adds `noopener noreferrer` to
+     * `rel`.
+     */
+    target?: string;
+    rel?: string;
+    /**
+     * Click handler. When supplied, the anchor's default navigation is
+     * prevented.
+     */
+    onPress?: () => void;
+    /**
+     * Underline the link text.
+     * @default false
+     */
+    underline?: boolean;
+}
+
+declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & ThemeOverrideProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & ThemeOverrideProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Text inside a `Tooltip`'s `content`, styled with the tooltip's own size
+ * scale and `content/primary` colour.
+ *
+ * Pass `accent` for bold copy — the weight is read from the body accent token
+ * matching the tooltip's size, so it tracks the active product context instead
+ * of a hardcoded `700`.
+ */
+declare const TooltipText: React__default.FC<TooltipTextProps & ThemeOverrideProps>;
+
+/**
+ * A link inside a `Tooltip`'s `content`. Uses the `content/brand-primary`
+ * token and the tooltip's own size scale, so it sits inline with surrounding
+ * `TooltipText` without the caller re-deriving typography.
+ *
+ * The tooltip surface is hoverable, so the link is reachable with a pointer.
+ * It is **not** reachable by keyboard — tabbing away from the trigger blurs it
+ * and dismisses the tooltip. When a link must be keyboard-operable, use
+ * [Toggletip](../../toggletip) instead.
+ */
+declare const TooltipLink: React__default.FC<TooltipLinkProps & ThemeOverrideProps>;
+
+/**
+ * Publishes the surrounding tooltip's resolved typography and colour tokens to
+ * whatever is rendered inside its `content`, so `TooltipText` / `TooltipLink`
+ * inherit the tooltip's size without the caller repeating it.
+ *
+ * `null` when the consumer is rendered outside a `Tooltip` — the helpers then
+ * fall back to their own defaults.
+ */
+declare const TooltipContentContext: React.Context<TooltipContentStyles | null>;
+declare const useTooltipContentStyles: () => TooltipContentStyles | null;
+
+/**
+ * Per-size font metrics for tooltip copy. Mirrors the tooltip size matrix in
+ * the Figma UI kit (node 5680-32928).
+ */
+declare const getTooltipTypoStyles: (size: TooltipSize) => {
+    fontSize: number;
+    lineHeight: string;
+};
+/** Fallbacks for a resolved theme that predates `typographyTokens`. */
+declare const DEFAULT_BODY_FONT_WEIGHT = 400;
+declare const DEFAULT_ACCENT_FONT_WEIGHT = 500;
+interface TooltipTypographyTokens {
+    basic?: Record<string, {
+        fontWeight?: number;
+        accent?: {
+            fontWeight?: number;
+        };
+    } | undefined>;
+}
+/** The slice of the resolved theme this module reads. */
+interface TooltipThemeTypography {
+    typographyTokens?: TooltipTypographyTokens;
+}
+/**
+ * Resolves the accent font weight for `size` from the theme's body typography
+ * scale, so bold tooltip copy follows the active product context (b2b/b2c use
+ * 500, corpsite uses 600) instead of a hardcoded weight.
+ */
+declare const getTooltipAccentFontWeight: (typographyTokens: TooltipTypographyTokens | undefined, size: TooltipSize) => number;
 
-export { Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize };
+export { DEFAULT_ACCENT_FONT_WEIGHT, DEFAULT_BODY_FONT_WEIGHT, Tooltip, TooltipContentContext, type TooltipContentStyles, TooltipLink, type TooltipLinkProps, type TooltipPlacement, type TooltipProps, type TooltipSize, TooltipText, type TooltipTextProps, type TooltipThemeTypography, type TooltipTypographyTokens, getTooltipAccentFontWeight, getTooltipTypoStyles, useTooltipContentStyles };

package/native/index.d.ts

@@ -1,11 +1,14 @@
-import React, { ReactNode } from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type TooltipSize = "sm" | "md" | "lg" | "xl";
 type TooltipPlacement = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right";
 interface TooltipProps {
     /**
-     * The content of the tooltip.
+     * The content of the tooltip. Strings and numbers are rendered as themed
+     * text; any other node is rendered as-is and inherits the tooltip's
+     * typography (see `TooltipText` / `TooltipLink`).
      */
     content: ReactNode;
     /**
@@ -52,7 +55,125 @@ interface TooltipProps {
     className?: string;
     testID?: string;
 }
+/**
+ * Typography and colour tokens the tooltip publishes to its content, so nested
+ * helpers do not have to re-derive them from the tooltip's `size`.
+ */
+interface TooltipContentStyles {
+    /** Size of the surrounding tooltip. */
+    size: TooltipSize;
+    /** Font size for the surrounding tooltip's size, in pixels. */
+    fontSize: number;
+    /** Line height for the surrounding tooltip's size, as a CSS length. */
+    lineHeight: string;
+    /** `content/primary` — default colour for tooltip copy. */
+    color: string;
+    /** `content/brand-primary` — default colour for links inside a tooltip. */
+    linkColor: string;
+}
+interface TooltipTextProps {
+    children?: ReactNode;
+    /**
+     * Render with the *accent* (bold) weight of the body token matching the
+     * tooltip's size.
+     * @default false
+     */
+    accent?: boolean;
+    /**
+     * Overrides the size inherited from the surrounding tooltip. Defaults to the
+     * tooltip's own `size`, or `"md"` when rendered outside one.
+     */
+    size?: TooltipSize;
+    /** Overrides the inherited text colour. */
+    color?: string;
+    style?: any;
+    "data-testid"?: string;
+    testID?: string;
+}
+interface TooltipLinkProps extends TooltipTextProps {
+    /** Destination. Omit when driving navigation through `onPress`. */
+    href?: string;
+    /**
+     * Anchor target. `"_blank"` automatically adds `noopener noreferrer` to
+     * `rel`.
+     */
+    target?: string;
+    rel?: string;
+    /**
+     * Click handler. When supplied, the anchor's default navigation is
+     * prevented.
+     */
+    onPress?: () => void;
+    /**
+     * Underline the link text.
+     * @default false
+     */
+    underline?: boolean;
+}
+
+declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & ThemeOverrideProps & React__default.RefAttributes<HTMLDivElement>>;
 
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & ThemeOverrideProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Text inside a `Tooltip`'s `content`, styled with the tooltip's own size
+ * scale and `content/primary` colour.
+ *
+ * Pass `accent` for bold copy — the weight is read from the body accent token
+ * matching the tooltip's size, so it tracks the active product context instead
+ * of a hardcoded `700`.
+ */
+declare const TooltipText: React__default.FC<TooltipTextProps & ThemeOverrideProps>;
+
+/**
+ * A link inside a `Tooltip`'s `content`. Uses the `content/brand-primary`
+ * token and the tooltip's own size scale, so it sits inline with surrounding
+ * `TooltipText` without the caller re-deriving typography.
+ *
+ * The tooltip surface is hoverable, so the link is reachable with a pointer.
+ * It is **not** reachable by keyboard — tabbing away from the trigger blurs it
+ * and dismisses the tooltip. When a link must be keyboard-operable, use
+ * [Toggletip](../../toggletip) instead.
+ */
+declare const TooltipLink: React__default.FC<TooltipLinkProps & ThemeOverrideProps>;
+
+/**
+ * Publishes the surrounding tooltip's resolved typography and colour tokens to
+ * whatever is rendered inside its `content`, so `TooltipText` / `TooltipLink`
+ * inherit the tooltip's size without the caller repeating it.
+ *
+ * `null` when the consumer is rendered outside a `Tooltip` — the helpers then
+ * fall back to their own defaults.
+ */
+declare const TooltipContentContext: React.Context<TooltipContentStyles | null>;
+declare const useTooltipContentStyles: () => TooltipContentStyles | null;
+
+/**
+ * Per-size font metrics for tooltip copy. Mirrors the tooltip size matrix in
+ * the Figma UI kit (node 5680-32928).
+ */
+declare const getTooltipTypoStyles: (size: TooltipSize) => {
+    fontSize: number;
+    lineHeight: string;
+};
+/** Fallbacks for a resolved theme that predates `typographyTokens`. */
+declare const DEFAULT_BODY_FONT_WEIGHT = 400;
+declare const DEFAULT_ACCENT_FONT_WEIGHT = 500;
+interface TooltipTypographyTokens {
+    basic?: Record<string, {
+        fontWeight?: number;
+        accent?: {
+            fontWeight?: number;
+        };
+    } | undefined>;
+}
+/** The slice of the resolved theme this module reads. */
+interface TooltipThemeTypography {
+    typographyTokens?: TooltipTypographyTokens;
+}
+/**
+ * Resolves the accent font weight for `size` from the theme's body typography
+ * scale, so bold tooltip copy follows the active product context (b2b/b2c use
+ * 500, corpsite uses 600) instead of a hardcoded weight.
+ */
+declare const getTooltipAccentFontWeight: (typographyTokens: TooltipTypographyTokens | undefined, size: TooltipSize) => number;
 
-export { Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize };
+export { DEFAULT_ACCENT_FONT_WEIGHT, DEFAULT_BODY_FONT_WEIGHT, Tooltip, TooltipContentContext, type TooltipContentStyles, TooltipLink, type TooltipLinkProps, type TooltipPlacement, type TooltipProps, type TooltipSize, TooltipText, type TooltipTextProps, type TooltipThemeTypography, type TooltipTypographyTokens, getTooltipAccentFontWeight, getTooltipTypoStyles, useTooltipContentStyles };