@robr0/design-system 0.13.0 → 0.15.0

package/components/FunnelChart/FunnelChart.d.ts

@@ -1,25 +1,34 @@
 import { default as React } from 'react';
 /** One stage of the funnel, ordered widest first. */
 export interface FunnelStage {
-    /** Stage name, read into the chart's accessible label. */
+    /** Stage name, shown beside the stage and read into the chart's accessible label. */
     label: string;
-    /** Raw count for the stage — drives the bar's height as a share of the first stage. */
+    /** Raw count for the stage — drives the stage's width as a share of the first stage. */
     value: number;
     /**
-     * Preformatted value ("96.4K") for the accessible label and any consumer
-     * legend. Falls back to the raw `value`, locale-formatted.
+     * Preformatted value ("96.4K") for the tooltip and the accessible label.
+     * Falls back to the raw `value`, locale-formatted.
      */
     displayValue?: string;
 }
 /** Props owned by FunnelChart itself — everything else falls through to the root div. */
 type FunnelChartOwnProps = {
-    /** Ordered stages, first stage widest. Each later stage's height is its share of the first. */
+    /** Ordered stages, first stage widest. Each later stage's width is its share of the first. */
     data: FunnelStage[];
-    /** Chart height in pixels. */
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Chart area height in pixels. */
     height?: number;
+    /** Shows each stage's name beside its band. Turn off when a legend under the chart already carries the names. */
+    showLabels?: boolean;
     /**
-     * Floor percentage for a stage's height, so steep drop-offs stay readable.
-     * Shares are clamped to the range from this floor up to 100.
+     * Floor percentage from the stepped-bar rendering this chart used to have.
+     * @deprecated The funnel now draws true trapezoids sized by value, so a
+     * height floor no longer applies; the prop is ignored.
      */
     minStageShare?: number;
     /** Additional CSS classes */
@@ -28,13 +37,15 @@ type FunnelChartOwnProps = {
 export interface FunnelChartProps extends FunnelChartOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FunnelChartOwnProps | 'children'> {
 }
 /**
- * FunnelChart — ordered stages as side-by-side vertical bars whose heights
- * step down with each stage's share of the first, each carrying a centred
- * percentage pill. Pure JSX and CSS computed from props: no recharts, no
- * hooks, no browser APIs, so it deliberately omits 'use client' and renders
- * from a Server Component. Degenerate data stays safe: an empty array
- * renders an empty root, and a zero or negative first value draws every
- * stage at the floor height.
+ * FunnelChart — ordered stages as a centred funnel of trapezoid bands, built
+ * on Recharts' native Funnel so the stages sweep in on load and share the
+ * family's tooltip and palette. Each band's width is its stage's share of the
+ * first, the honest recharts geometry: the taper itself is the conversion
+ * story, and the glass tooltip carries each stage's reading and percentage.
+ * It wears the chart family's card chrome (title, subtitle, padding) and
+ * takes `bare` to drop it inside a Panel, like every other chart. The whole
+ * funnel is summarised in one accessible label, stage by stage. Degenerate
+ * data stays safe: an empty array renders an empty chart area.
  */
 export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/FunnelChart/FunnelChart.js

@@ -1,45 +1,93 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useCallback } from "react";
+import { ResponsiveContainer, FunnelChart as FunnelChart$1, Tooltip, Funnel, LabelList } from "recharts";
+import { getChartSeriesColors } from "../Chart/palette.js";
+import "../Chart/Chart.css";
 import "./FunnelChart.css";
-const SERIES_COUNT = 7;
+function getCSSVar(name, fallback) {
+  return `var(${name}, ${fallback})`;
+}
+function FunnelTooltip({ active, payload }) {
+  if (!active || !payload?.length) return null;
+  const entry = payload[0];
+  const stage = entry.payload;
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip", children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chart__tooltip-label", children: stage?.name }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chart__tooltip-row", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "ds-chart__tooltip-dot",
+          style: { backgroundColor: stage?.fill }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-name", children: stage?.share !== void 0 ? `${stage.share}%` : "" }),
+      /* @__PURE__ */ jsx("span", { className: "ds-chart__tooltip-value", children: stage?.displayValue ?? entry.value?.toLocaleString() })
+    ] })
+  ] });
+}
 const FunnelChart = React.forwardRef(
-  ({ data, height = 190, minStageShare = 16, className = "", style, ...rest }, ref) => {
+  ({
+    data,
+    title,
+    subtitle,
+    bare = false,
+    height = 190,
+    showLabels = true,
+    minStageShare,
+    className = "",
+    ...rest
+  }, ref) => {
     const baseClass = "ds-funnel-chart";
-    const classes = [baseClass, className].filter(Boolean).join(" ");
+    const chartClass = "ds-chart";
+    const classes = [chartClass, bare && `${chartClass}--bare`, baseClass, className].filter(Boolean).join(" ");
+    const seriesColors = getChartSeriesColors();
+    const textSecondary = getCSSVar("--color-text-secondary", "#A2A2A2");
+    const surfaceColor = getCSSVar("--color-bg-container-primary", "#FFFFFF");
     const firstValue = data.length > 0 ? data[0].value : 0;
-    const clampShare = (share) => Math.min(Math.max(share, minStageShare), 100);
     const stages = data.map((stage, i) => ({
-      ...stage,
-      share: clampShare(firstValue > 0 ? stage.value / firstValue * 100 : 0),
-      color: `var(--color-chart-series-${i % SERIES_COUNT + 1})`
+      name: stage.label,
+      value: stage.value,
+      displayValue: stage.displayValue,
+      share: firstValue > 0 ? Math.round(stage.value / firstValue * 100) : 0,
+      fill: seriesColors[i % seriesColors.length]
     }));
-    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.label} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...rest,
-        ref,
-        className: classes,
-        style: { ...style, height },
-        role: "img",
-        "aria-label": ariaLabel,
-        children: stages.map((stage, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `${baseClass}__stage`,
-            style: {
-              "--funnel-stage-size": stage.share,
-              "--funnel-stage-color": stage.color
-            },
-            children: /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pct`, children: [
-              Math.round(firstValue > 0 ? stage.value / firstValue * 100 : 0),
-              "%"
-            ] })
-          },
-          `${stage.label}-${i}`
-        ))
-      }
+    const ariaLabel = stages.length > 0 ? `Funnel: ${stages.map((s) => `${s.name} ${s.displayValue ?? s.value.toLocaleString()}`).join(", ")}` : "Funnel, no data";
+    const renderTooltip = useCallback(
+      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+      (props) => /* @__PURE__ */ jsx(FunnelTooltip, { ...props }),
+      []
     );
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${chartClass}__body`, role: "img", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(FunnelChart$1, { margin: { top: 4, right: 4, bottom: 4, left: 4 }, children: [
+        /* @__PURE__ */ jsx(Tooltip, { content: renderTooltip }),
+        /* @__PURE__ */ jsx(
+          Funnel,
+          {
+            dataKey: "value",
+            nameKey: "name",
+            data: stages,
+            lastShapeType: "rectangle",
+            stroke: surfaceColor,
+            strokeWidth: 2,
+            children: showLabels && /* @__PURE__ */ jsx(
+              LabelList,
+              {
+                position: "right",
+                dataKey: "name",
+                fill: textSecondary,
+                stroke: "none",
+                fontSize: 12
+              }
+            )
+          }
+        )
+      ] }) }) })
+    ] });
   }
 );
 FunnelChart.displayName = "FunnelChart";

package/components/Gauge/Gauge.css

@@ -1,20 +1,34 @@
 /* ============================================
    GAUGE COMPONENT
    Radial dial for a single bounded reading.
-   Colour flows through `color` — the value arc
-   and reading draw with currentColor, so a tone
-   is one custom property swap.
+   Card chrome, header, and padding come from
+   the shared chart styles (Chart.css) — this
+   file owns the dial alone. Colour flows
+   through `color`: the value arc draws with
+   currentColor, so a tone is one custom
+   property swap.
    ============================================ */
 
-/* Base */
+/* Base — the dial centres in the shared chart body */
 
-.ds-gauge {
+.ds-gauge__body {
+  display: flex;
+  justify-content: center;
+}
+
+/* Unlike the fluid recharts bodies, the dial has intrinsic size — a bare
+   gauge shrink-wraps it so it sits inline in a Stat row or tile. */
+.ds-gauge.ds-chart--bare {
+  width: auto;
+  display: inline-flex;
+}
+
+.ds-gauge__dial {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  color: var(--color-action-primary-bg);
 }
 
 .ds-gauge__svg {
@@ -34,6 +48,16 @@
   stroke: currentColor;
   stroke-linecap: round;
   transition: stroke-dasharray var(--motion-duration-slow) var(--motion-ease-emphasized);
+  /* Sweep in from an empty dial on mount — the single keyframe animates to
+     the element's own dasharray, so one rule serves every reading. The
+     duration tokens collapse under reduced motion, guarding this for free. */
+  animation: ds-gauge-sweep var(--motion-duration-slower) var(--motion-ease-emphasized);
+}
+
+@keyframes ds-gauge-sweep {
+  from {
+    stroke-dasharray: 0 100;
+  }
 }
 
 .ds-gauge__center {
@@ -48,12 +72,15 @@
   pointer-events: none;
 }
 
+/* The centre pair mirrors the chart family's radial centre label:
+   a light sub-display numeral over a caption. */
+
 .ds-gauge__value {
-  font-family: var(--font-heading-3-family);
-  font-size: var(--font-heading-3-size);
-  font-weight: var(--font-heading-3-weight);
-  line-height: var(--font-heading-3-line-height);
-  letter-spacing: var(--font-heading-3-letter-spacing);
+  font-family: var(--font-sub-display-family);
+  font-size: var(--font-sub-display-size);
+  font-weight: var(--font-sub-display-weight);
+  line-height: var(--font-sub-display-line-height);
+  letter-spacing: var(--font-sub-display-letter-spacing);
   color: var(--color-text-primary);
 }
 
@@ -69,7 +96,7 @@
 /* Tones */
 
 .ds-gauge--accent {
-  color: var(--color-action-primary-bg);
+  color: var(--color-chart-series-1);
 }
 
 /* The status hues come from the border tokens, not the text tokens: the

package/components/Gauge/Gauge.d.ts

@@ -15,9 +15,9 @@ type GaugeOwnProps = {
     /** Upper bound of the dial. */
     max?: number;
     /**
-     * Colour role for the value arc and reading. Ignored while a threshold
-     * matches — thresholds exist so the dial recolours itself as the reading
-     * crosses them.
+     * Colour role for the value arc. `accent` (the default) follows the chart
+     * palette's lead colour. Ignored while a threshold matches — thresholds
+     * exist so the dial recolours itself as the reading crosses them.
      */
     tone?: 'accent' | 'positive' | 'warning' | 'error' | 'neutral';
     /**
@@ -35,7 +35,13 @@ type GaugeOwnProps = {
      * accessible name, e.g. "CPU usage".
      */
     label?: string;
-    /** Rendered diameter in pixels. The arc geometry scales with it. */
+    /** Chart title, in the shared chart header. */
+    title?: string;
+    /** Description text below the title. */
+    subtitle?: string;
+    /** Strip the card chrome (border, padding, fill) when the chart sits inside another panel that supplies the surface */
+    bare?: boolean;
+    /** Rendered dial diameter in pixels. The arc geometry scales with it. */
     size?: number;
     /** Arc thickness in pixels. */
     strokeWidth?: number;
@@ -47,10 +53,12 @@ export interface GaugeProps extends GaugeOwnProps, Omit<React.ComponentPropsWith
 /**
  * Gauge — a radial dial for a single bounded reading: capacity, usage, a
  * score against a target. Pure SVG computed from props — no charting library,
- * no hooks — so it renders from a Server Component and drops straight into a
- * Panel or Stat row. Thresholds recolour the dial through the status roles as
- * the reading crosses them, and the arc animates between readings via a CSS
- * transition. Announced as a `meter` with the label as its accessible name.
+ * no hooks — so it renders from a Server Component. It wears the chart
+ * family's card chrome (title, subtitle, padding) and takes `bare` to drop
+ * it inside a Panel, like every other chart. Thresholds recolour the dial
+ * through the status roles as the reading crosses them, and the arc animates
+ * between readings via a CSS transition. The dial is announced as a `meter`
+ * with the label as its accessible name.
  */
 export declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/Gauge/Gauge.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
+import "../Chart/Chart.css";
 import "./Gauge.css";
 const SWEEP_UNITS = 75;
 const Gauge = React.forwardRef(
@@ -12,81 +13,96 @@ const Gauge = React.forwardRef(
     showValue = true,
     formatValue,
     label,
+    title,
+    subtitle,
+    bare = false,
     size = 120,
-    strokeWidth = 10,
+    strokeWidth = 12,
     className = "",
     ...rest
   }, ref) => {
     const baseClass = "ds-gauge";
+    const chartClass = "ds-chart";
     const range = max - min;
     const fraction = range > 0 ? Math.min(Math.max((value - min) / range, 0), 1) : 0;
     const activeThreshold = thresholds?.filter((t) => value >= t.value).sort((a, b) => b.value - a.value)[0];
     const resolvedTone = activeThreshold?.tone ?? tone;
-    const classes = [baseClass, `${baseClass}--${resolvedTone}`, className].filter(Boolean).join(" ");
+    const classes = [
+      chartClass,
+      bare && `${chartClass}--bare`,
+      baseClass,
+      `${baseClass}--${resolvedTone}`,
+      className
+    ].filter(Boolean).join(" ");
     const radius = (size - strokeWidth) / 2;
     const center = size / 2;
     const valueUnits = Math.round(SWEEP_UNITS * fraction * 100) / 100;
     const displayValue = formatValue ? formatValue(value) : String(Math.round(value));
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...rest,
-        ref,
-        className: classes,
-        style: { width: size, height: size, ...rest.style },
-        role: "meter",
-        "aria-valuenow": value,
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuetext": displayValue,
-        "aria-label": label ?? rest["aria-label"],
-        children: [
-          /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: `${baseClass}__svg`,
-              viewBox: `0 0 ${size} ${size}`,
-              width: size,
-              height: size,
-              xmlns: "http://www.w3.org/2000/svg",
-              "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    className: `${baseClass}__track`,
-                    cx: center,
-                    cy: center,
-                    r: radius,
-                    pathLength: 100,
-                    strokeWidth,
-                    strokeDasharray: `${SWEEP_UNITS} ${100 - SWEEP_UNITS}`,
-                    transform: `rotate(135 ${center} ${center})`
-                  }
-                ),
-                valueUnits > 0 && /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    className: `${baseClass}__arc`,
-                    cx: center,
-                    cy: center,
-                    r: radius,
-                    pathLength: 100,
-                    strokeWidth,
-                    strokeDasharray: `${valueUnits} ${100 - valueUnits}`,
-                    transform: `rotate(135 ${center} ${center})`
-                  }
-                )
-              ]
-            }
-          ),
-          (showValue || label) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__center`, children: [
-            showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: displayValue }),
-            label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
-          ] })
-        ]
-      }
-    );
+    const { "aria-label": restAriaLabel, ...restProps } = rest;
+    return /* @__PURE__ */ jsxs("div", { ...restProps, ref, className: classes, children: [
+      (title || subtitle) && /* @__PURE__ */ jsx("div", { className: `${chartClass}__header`, children: /* @__PURE__ */ jsxs("div", { className: `${chartClass}__header-text`, children: [
+        title && /* @__PURE__ */ jsx("h3", { className: `${chartClass}__title`, children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: `${chartClass}__subtitle`, children: subtitle })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: `${chartClass}__body ${baseClass}__body`, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${baseClass}__dial`,
+          style: { width: size, height: size },
+          role: "meter",
+          "aria-valuenow": value,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": displayValue,
+          "aria-label": label ?? restAriaLabel,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                className: `${baseClass}__svg`,
+                viewBox: `0 0 ${size} ${size}`,
+                width: size,
+                height: size,
+                xmlns: "http://www.w3.org/2000/svg",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: `${baseClass}__track`,
+                      cx: center,
+                      cy: center,
+                      r: radius,
+                      pathLength: 100,
+                      strokeWidth,
+                      strokeDasharray: `${SWEEP_UNITS} ${100 - SWEEP_UNITS}`,
+                      transform: `rotate(135 ${center} ${center})`
+                    }
+                  ),
+                  valueUnits > 0 && /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      className: `${baseClass}__arc`,
+                      cx: center,
+                      cy: center,
+                      r: radius,
+                      pathLength: 100,
+                      strokeWidth,
+                      strokeDasharray: `${valueUnits} ${100 - valueUnits}`,
+                      transform: `rotate(135 ${center} ${center})`
+                    }
+                  )
+                ]
+              }
+            ),
+            (showValue || label) && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__center`, children: [
+              showValue && /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, children: displayValue }),
+              label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+            ] })
+          ]
+        }
+      ) })
+    ] });
   }
 );
 Gauge.displayName = "Gauge";

package/components/HoverCard/HoverCard.css

@@ -0,0 +1,97 @@
+/* ============================================
+   HOVER CARD COMPONENT
+   Rich preview panel on hover / focus
+   ============================================ */
+
+.ds-hover-card {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ============================================
+   PANEL
+   Dresses like the other floating panels:
+   page-primary fill, hairline, radius-sm,
+   floating shadow (see Popover).
+   ============================================ */
+
+.ds-hover-card__panel {
+  /* Rendered as a <span> so the card survives inside a <p>; absolute
+     positioning already computes display to block, stated here anyway. */
+  display: block;
+  position: absolute;
+  z-index: 50;
+  min-width: 240px;
+  max-width: 320px;
+  padding: var(--padding-md);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-xs) solid var(--color-bg-container-border);
+  box-shadow: var(--shadow-floating);
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  /* visibility keeps the hidden panel out of the accessibility tree and
+     tab order; opacity + transform carry the entrance. */
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard),
+    visibility var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-hover-card__panel--visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* ============================================
+   POSITIONS
+   ============================================ */
+
+.ds-hover-card__panel--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  margin-bottom: var(--gap-xs);
+}
+
+.ds-hover-card__panel--top.ds-hover-card__panel--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+.ds-hover-card__panel--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+  margin-top: var(--gap-xs);
+}
+
+.ds-hover-card__panel--bottom.ds-hover-card__panel--visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+.ds-hover-card__panel--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+  margin-right: var(--gap-xs);
+}
+
+.ds-hover-card__panel--left.ds-hover-card__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+.ds-hover-card__panel--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+  margin-left: var(--gap-xs);
+}
+
+.ds-hover-card__panel--right.ds-hover-card__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}

package/components/HoverCard/HoverCard.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+type HoverCardOwnProps = {
+    /** Trigger element */
+    children?: React.ReactNode;
+    /** Panel content — arbitrary elements, unlike Tooltip's plain text. In running text inside a `<p>`, keep it phrasing-level (spans): a block element would end the paragraph mid-parse. */
+    content: React.ReactNode;
+    /** Preferred position */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Delay before showing (in ms) */
+    showDelay?: number;
+    /** Delay before hiding (in ms) */
+    hideDelay?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface HoverCardProps extends HoverCardOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof HoverCardOwnProps> {
+}
+/**
+ * Rich preview panel that opens from hover or focus — a profile card behind
+ * a username, a component summary behind a link. Where Tooltip names a
+ * control in a line of text, HoverCard previews a destination; its panel is
+ * interactive, stays open while the pointer is inside it, and dresses like
+ * the other floating panels (Popover, the menus).
+ *
+ * The hidden panel is `visibility: hidden`, so it stays out of the
+ * accessibility tree and tab order until shown. Escape dismisses it.
+ */
+export declare const HoverCard: React.ForwardRefExoticComponent<HoverCardProps & React.RefAttributes<HTMLSpanElement>>;
+export {};