rift-ds 1.0.0

package/components/Globe/Globe.js

@@ -0,0 +1,416 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useCallback, useSyncExternalStore, useEffect } from "react";
+import "./Globe.css";
+const VIEW = 480;
+const CENTER = VIEW / 2;
+const RADIUS = 180;
+const GRATICULE_SAMPLES = 60;
+const ARC_SAMPLES = 48;
+const DRAG_DEGREES_PER_RADIUS = 90;
+const KEY_STEP = 10;
+const MAX_LAT = 80;
+const MARKER = 5;
+const DEG = Math.PI / 180;
+const toVec = (lat, lng) => {
+  const φ = lat * DEG;
+  const λ = lng * DEG;
+  return [Math.cos(φ) * Math.cos(λ), Math.cos(φ) * Math.sin(λ), Math.sin(φ)];
+};
+const makeProjector = ([lng0, lat0]) => {
+  const λ0 = lng0 * DEG;
+  const φ0 = lat0 * DEG;
+  const cosλ = Math.cos(λ0);
+  const sinλ = Math.sin(λ0);
+  const cosφ = Math.cos(φ0);
+  const sinφ = Math.sin(φ0);
+  return ([x, y, z], altitude = 0) => {
+    const x1 = x * cosλ + y * sinλ;
+    const y1 = -x * sinλ + y * cosλ;
+    const depth = x1 * cosφ + z * sinφ;
+    const up = -x1 * sinφ + z * cosφ;
+    const s = 1 + altitude;
+    const sx = y1 * s;
+    const sy = up * s;
+    return {
+      x: CENTER + RADIUS * sx,
+      y: CENTER - RADIUS * sy,
+      visible: depth >= 0 || sx * sx + sy * sy > 1
+    };
+  };
+};
+const round = (n) => Math.round(n * 10) / 10;
+const splitRuns = (pts) => {
+  let front = "";
+  let back = "";
+  let prev;
+  for (const p of pts) {
+    const cmd = `${prev && prev.visible === p.visible ? "L" : "M"}${round(p.x)} ${round(p.y)}`;
+    if (p.visible) front += cmd;
+    else back += cmd;
+    if (prev && prev.visible !== p.visible) {
+      const start = `M${round(prev.x)} ${round(prev.y)}L${round(p.x)} ${round(p.y)}`;
+      if (p.visible) front += start;
+      else back += start;
+    }
+    prev = p;
+  }
+  return { front, back };
+};
+const arcVectors = (a, b, altitude) => {
+  const dot = Math.max(-1, Math.min(1, a[0] * b[0] + a[1] * b[1] + a[2] * b[2]));
+  const ω = Math.acos(dot);
+  const sinω = Math.sin(ω);
+  const out = [];
+  for (let i = 0; i <= ARC_SAMPLES; i++) {
+    const t = i / ARC_SAMPLES;
+    let v;
+    if (sinω < 1e-6) {
+      v = a;
+    } else {
+      const wa = Math.sin((1 - t) * ω) / sinω;
+      const wb = Math.sin(t * ω) / sinω;
+      v = [wa * a[0] + wb * b[0], wa * a[1] + wb * b[1], wa * a[2] + wb * b[2]];
+    }
+    out.push([v, altitude * Math.sin(t * Math.PI)]);
+  }
+  return out;
+};
+const normalizeLng = (lng) => ((lng + 180) % 360 + 360) % 360 - 180;
+const clampLat = (lat) => Math.max(-MAX_LAT, Math.min(MAX_LAT, lat));
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const subscribeReducedMotion = (callback) => {
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", callback);
+  return () => query.removeEventListener("change", callback);
+};
+const getReducedMotion = () => window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const getServerReducedMotion = () => false;
+const KEY_DELTAS = {
+  ArrowLeft: [KEY_STEP, 0],
+  ArrowRight: [-KEY_STEP, 0],
+  ArrowUp: [0, -KEY_STEP],
+  ArrowDown: [0, KEY_STEP],
+  a: [KEY_STEP, 0],
+  d: [-KEY_STEP, 0],
+  w: [0, -KEY_STEP],
+  s: [0, KEY_STEP]
+};
+const Globe = React.forwardRef(
+  ({
+    points = [],
+    arcs = [],
+    rotation: rotationProp,
+    defaultRotation = [-20, 20],
+    onRotationChange,
+    autoRotate = 3,
+    interactive = true,
+    graticuleStep = 30,
+    showLabels = true,
+    activePointId,
+    onPointHover,
+    onPointClick,
+    renderCallout,
+    label = "Globe",
+    className = "",
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    onPointerEnter,
+    onPointerLeave,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-globe";
+    const gradientId = useId();
+    const isControlled = rotationProp !== void 0;
+    const [innerRotation, setInnerRotation] = useState(defaultRotation);
+    const rotation = isControlled ? rotationProp : innerRotation;
+    const rotationRef = useRef(rotation);
+    rotationRef.current = rotation;
+    const onRotationChangeRef = useRef(onRotationChange);
+    onRotationChangeRef.current = onRotationChange;
+    const commit = useCallback(
+      (next) => {
+        const clean = [normalizeLng(next[0]), clampLat(next[1])];
+        if (!isControlled) setInnerRotation(clean);
+        onRotationChangeRef.current?.(clean);
+      },
+      [isControlled]
+    );
+    const [hoveredId, setHoveredId] = useState(null);
+    const [paused, setPaused] = useState(false);
+    const reducedMotion = useSyncExternalStore(
+      subscribeReducedMotion,
+      getReducedMotion,
+      getServerReducedMotion
+    );
+    const spinning = autoRotate !== 0 && !paused && !reducedMotion;
+    useEffect(() => {
+      if (!spinning) return;
+      let frame = 0;
+      let last = performance.now();
+      const tick = (now) => {
+        const dt = (now - last) / 1e3;
+        last = now;
+        const [lng, lat] = rotationRef.current;
+        commit([lng - autoRotate * dt, lat]);
+        frame = requestAnimationFrame(tick);
+      };
+      frame = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frame);
+    }, [spinning, autoRotate, commit]);
+    const rootRef = useRef(null);
+    const drag = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const setRef = (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const handlePointerDown = (e) => {
+      onPointerDown?.(e);
+      if (!interactive || e.button !== 0) return;
+      drag.current = { x: e.clientX, y: e.clientY, rotation: rotationRef.current };
+      setDragging(true);
+      setPaused(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const handlePointerMove = (e) => {
+      onPointerMove?.(e);
+      if (!drag.current || !rootRef.current) return;
+      const radiusPx = rootRef.current.clientWidth * (RADIUS / VIEW) || 1;
+      const perPx = DRAG_DEGREES_PER_RADIUS / radiusPx;
+      const [lng, lat] = drag.current.rotation;
+      commit([
+        lng - (e.clientX - drag.current.x) * perPx,
+        lat + (e.clientY - drag.current.y) * perPx
+      ]);
+    };
+    const endDrag = (e) => {
+      if (!drag.current) return;
+      drag.current = null;
+      setDragging(false);
+      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      }
+    };
+    const handlePointerUp = (e) => {
+      onPointerUp?.(e);
+      endDrag(e);
+    };
+    const handlePointerCancel = (e) => {
+      onPointerCancel?.(e);
+      endDrag(e);
+    };
+    const handlePointerEnter = (e) => {
+      onPointerEnter?.(e);
+      setPaused(true);
+    };
+    const handlePointerLeave = (e) => {
+      onPointerLeave?.(e);
+      if (document.activeElement !== e.currentTarget) setPaused(false);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (!interactive || e.defaultPrevented) return;
+      const delta = KEY_DELTAS[e.key] ?? KEY_DELTAS[e.key.toLowerCase()];
+      if (!delta) return;
+      e.preventDefault();
+      const [lng, lat] = rotationRef.current;
+      commit([lng + delta[0], lat + delta[1]]);
+    };
+    const handleFocus = (e) => {
+      onFocus?.(e);
+      setPaused(true);
+    };
+    const handleBlur = (e) => {
+      onBlur?.(e);
+      if (!e.currentTarget.matches(":hover")) setPaused(false);
+    };
+    const project = makeProjector(rotation);
+    let graticuleFront = "";
+    let graticuleBack = "";
+    if (graticuleStep > 0) {
+      for (let lng = -180; lng < 180; lng += graticuleStep) {
+        const pts = [];
+        for (let i = 0; i <= GRATICULE_SAMPLES; i++) {
+          pts.push(project(toVec(-90 + 180 * i / GRATICULE_SAMPLES, lng)));
+        }
+        const runs = splitRuns(pts);
+        graticuleFront += runs.front;
+        graticuleBack += runs.back;
+      }
+      for (let lat = -90 + graticuleStep; lat < 90; lat += graticuleStep) {
+        const pts = [];
+        for (let i = 0; i <= GRATICULE_SAMPLES; i++) {
+          pts.push(project(toVec(lat, -180 + 360 * i / GRATICULE_SAMPLES)));
+        }
+        const runs = splitRuns(pts);
+        graticuleFront += runs.front;
+        graticuleBack += runs.back;
+      }
+    }
+    const byId = new Map(points.map((p) => [p.id, p]));
+    const projectedPoints = points.map((p) => ({ point: p, at: project(toVec(p.lat, p.lng)) }));
+    const drawnArcs = arcs.flatMap((arc, i) => {
+      const from = byId.get(arc.from);
+      const to = byId.get(arc.to);
+      if (!from || !to) return [];
+      const altitude = arc.altitude ?? 0.25;
+      const samples = arcVectors(toVec(from.lat, from.lng), toVec(to.lat, to.lng), altitude);
+      const pts = samples.map(([v, h]) => project(v, h));
+      const runs = splitRuns(pts);
+      return [
+        {
+          key: `${arc.from}-${arc.to}-${i}`,
+          color: arc.color,
+          start: pts[0],
+          end: pts[pts.length - 1],
+          ...runs
+        }
+      ];
+    });
+    const calloutId = activePointId ?? hoveredId;
+    const callout = calloutId ? projectedPoints.find((p) => p.point.id === calloutId) : void 0;
+    const calloutSide = callout && callout.at.x < CENTER ? "left" : "right";
+    const classes = [
+      baseClass,
+      interactive ? `${baseClass}--interactive` : "",
+      dragging ? `${baseClass}--dragging` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const description = `${points.length} ${points.length === 1 ? "point" : "points"}, ${arcs.length} ${arcs.length === 1 ? "arc" : "arcs"}.${interactive ? " Drag to rotate, or use the arrow keys when focused." : ""}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setRef,
+        className: classes,
+        role: interactive ? "application" : "img",
+        "aria-roledescription": "globe",
+        "aria-label": `${label}. ${description}`,
+        tabIndex: interactive ? 0 : void 0,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: `${baseClass}__svg`,
+              viewBox: `0 0 ${VIEW} ${VIEW}`,
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              focusable: "false",
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: drawnArcs.map(
+                  (arc) => arc.color ? null : /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: `${gradientId}-${arc.key}`,
+                      gradientUnits: "userSpaceOnUse",
+                      x1: round(arc.start.x),
+                      y1: round(arc.start.y),
+                      x2: round(arc.end.x),
+                      y2: round(arc.end.y),
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0", className: `${baseClass}__arc-stop-start` }),
+                        /* @__PURE__ */ jsx("stop", { offset: "1", className: `${baseClass}__arc-stop-end` })
+                      ]
+                    },
+                    arc.key
+                  )
+                ) }),
+                /* @__PURE__ */ jsx("circle", { className: `${baseClass}__limb`, cx: CENTER, cy: CENTER, r: RADIUS }),
+                graticuleBack && /* @__PURE__ */ jsx("path", { className: `${baseClass}__graticule-back`, d: graticuleBack }),
+                graticuleFront && /* @__PURE__ */ jsx("path", { className: `${baseClass}__graticule`, d: graticuleFront }),
+                /* @__PURE__ */ jsx("g", { className: `${baseClass}__arcs`, children: drawnArcs.map((arc) => {
+                  const stroke = arc.color ?? `url(#${gradientId}-${arc.key})`;
+                  return /* @__PURE__ */ jsxs("g", { children: [
+                    arc.back && /* @__PURE__ */ jsx("path", { className: `${baseClass}__arc-back`, d: arc.back, stroke }),
+                    arc.front && /* @__PURE__ */ jsx("path", { className: `${baseClass}__arc`, d: arc.front, stroke })
+                  ] }, arc.key);
+                }) }),
+                /* @__PURE__ */ jsx("g", { className: `${baseClass}__points`, children: projectedPoints.map(({ point, at }) => {
+                  const x = round(at.x);
+                  const y = round(at.y);
+                  const active = point.id === calloutId;
+                  const markerClasses = [
+                    `${baseClass}__point`,
+                    `${baseClass}__point--${point.kind ?? "point"}`,
+                    at.visible ? "" : `${baseClass}__point--back`,
+                    active ? `${baseClass}__point--active` : ""
+                  ].filter(Boolean).join(" ");
+                  return /* @__PURE__ */ jsxs(
+                    "g",
+                    {
+                      className: markerClasses,
+                      style: point.color ? { color: point.color } : void 0,
+                      transform: `translate(${x} ${y})`,
+                      onPointerEnter: () => {
+                        setHoveredId(point.id);
+                        onPointHover?.(point);
+                      },
+                      onPointerLeave: () => {
+                        setHoveredId((id) => id === point.id ? null : id);
+                        onPointHover?.(null);
+                      },
+                      onClick: onPointClick ? () => onPointClick(point) : void 0,
+                      children: [
+                        /* @__PURE__ */ jsx("circle", { className: `${baseClass}__hit`, r: MARKER * 2.4 }),
+                        point.kind === "anchor" ? /* @__PURE__ */ jsx(
+                          "rect",
+                          {
+                            className: `${baseClass}__glyph`,
+                            x: -MARKER,
+                            y: -MARKER,
+                            width: MARKER * 2,
+                            height: MARKER * 2
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            className: `${baseClass}__glyph`,
+                            d: `M${-MARKER} 0H${MARKER}M0 ${-MARKER}V${MARKER}`
+                          }
+                        ),
+                        showLabels && point.label && /* @__PURE__ */ jsx("text", { className: `${baseClass}__label`, x: MARKER * 1.8, y: -MARKER * 1.2, children: point.label })
+                      ]
+                    },
+                    point.id
+                  );
+                }) })
+              ]
+            }
+          ),
+          callout && renderCallout && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `${baseClass}__callout`,
+              "data-side": calloutSide,
+              style: {
+                left: `${callout.at.x / VIEW * 100}%`,
+                top: `${callout.at.y / VIEW * 100}%`
+              },
+              children: renderCallout(callout.point)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Globe.displayName = "Globe";
+export {
+  Globe
+};

package/components/HoverCard/HoverCard.css

@@ -0,0 +1,125 @@
+/* ============================================
+   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>. */
+  position: absolute;
+  z-index: 50;
+  min-width: 240px;
+  max-width: 320px;
+  padding: var(--padding-400);
+  border-radius: var(--radius-200);
+  background-color: var(--color-bg-page-primary);
+  border: var(--border-025) 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);
+  /* display:none keeps the hidden panel out of the accessibility tree and
+     tab order AND out of the page's scrollable overflow — an edge-adjacent
+     trigger's 240px+ panel would otherwise add horizontal scroll while
+     invisible (see Tooltip, where the leak was found). The display flip
+     transitions discretely: allow-discrete holds the panel through the exit
+     fade, @starting-style below supplies the entry frame; browsers without
+     those skip the fades but open and close correctly. */
+  display: none;
+  opacity: 0;
+  transition-property: opacity, transform, display;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-ease-standard);
+  transition-behavior: allow-discrete;
+}
+
+.ds-hover-card__panel--visible {
+  display: block;
+  opacity: 1;
+}
+
+/* ============================================
+   POSITIONS
+   ============================================ */
+
+.ds-hover-card__panel--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+  margin-bottom: var(--gap-100);
+}
+
+.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-100);
+}
+
+.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-100);
+}
+
+.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-100);
+}
+
+.ds-hover-card__panel--right.ds-hover-card__panel--visible {
+  transform: translateY(-50%) translateX(0);
+}
+
+/* Entry states for the display flip: a panel arriving from display:none has
+   no prior computed style, so these supply the fade's starting frame. Each
+   mirrors its position's hidden transform above. */
+@starting-style {
+  .ds-hover-card__panel--top.ds-hover-card__panel--visible {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+
+  .ds-hover-card__panel--bottom.ds-hover-card__panel--visible {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+
+  .ds-hover-card__panel--left.ds-hover-card__panel--visible {
+    opacity: 0;
+    transform: translateY(-50%) translateX(4px);
+  }
+
+  .ds-hover-card__panel--right.ds-hover-card__panel--visible {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-4px);
+  }
+}

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 {};

package/components/HoverCard/HoverCard.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useId, useEffect } from "react";
+import "./HoverCard.css";
+import { MOTION_HOVER_SHOW_DELAY_MS, MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
+const HoverCard = React.forwardRef(
+  ({
+    children,
+    content,
+    position = "bottom",
+    showDelay = MOTION_HOVER_SHOW_DELAY_MS,
+    hideDelay = MOTION_HOVER_HIDE_DELAY_MS,
+    className = "",
+    ...rest
+  }, ref) => {
+    const [visible, setVisible] = useState(false);
+    const showTimeoutRef = useRef(void 0);
+    const hideTimeoutRef = useRef(void 0);
+    const panelId = useId();
+    const baseClass = "ds-hover-card";
+    const show = () => {
+      clearTimeout(hideTimeoutRef.current);
+      showTimeoutRef.current = setTimeout(() => setVisible(true), showDelay);
+    };
+    const hide = () => {
+      clearTimeout(showTimeoutRef.current);
+      hideTimeoutRef.current = setTimeout(() => setVisible(false), hideDelay);
+    };
+    useEffect(() => {
+      return () => {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+      };
+    }, []);
+    useEffect(() => {
+      if (!visible) return;
+      const onKeyDown = (e) => {
+        if (e.key === "Escape") {
+          clearTimeout(showTimeoutRef.current);
+          clearTimeout(hideTimeoutRef.current);
+          setVisible(false);
+        }
+      };
+      document.addEventListener("keydown", onKeyDown);
+      return () => document.removeEventListener("keydown", onKeyDown);
+    }, [visible]);
+    const handleBlur = (event) => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        hide();
+      }
+    };
+    const trigger = React.isValidElement(children) ? React.cloneElement(children, {
+      "aria-expanded": visible,
+      "aria-controls": visible ? panelId : void 0
+    }) : children;
+    const containerClasses = [baseClass, className].filter(Boolean).join(" ");
+    const panelClasses = [
+      `${baseClass}__panel`,
+      `${baseClass}__panel--${position}`,
+      visible ? `${baseClass}__panel--visible` : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ...rest,
+        ref,
+        className: containerClasses,
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: handleBlur,
+        children: [
+          trigger,
+          /* @__PURE__ */ jsx("span", { className: panelClasses, id: panelId, children: content })
+        ]
+      }
+    );
+  }
+);
+HoverCard.displayName = "HoverCard";
+export {
+  HoverCard
+};