@mirror-physics/fractal-ui 0.2.0-next.80 → 0.2.0-next.82

package/README.md

@@ -111,3 +111,20 @@ A user preference can update these properties at runtime without remounting
 components. Supply a contrasting foreground (at least 4.5:1 against every
 state). An explicit `color="pink"` preset takes precedence over the inherited
 theme. Disabled and danger styles remain independent.
+
+### Tooltip
+
+Use `Tooltip` for supplementary, non-interactive help on hover or keyboard focus.
+Pass one focusable trigger that forwards its props and ref, such as `Button`.
+Essential instructions belong in visible page text; interactive content belongs in a popover.
+
+```tsx
+<Tooltip content="Organization agents share context between their members." placement="bottom" maxWidth={360}>
+  <Button buttonType="ghost" aria-label="About organization agents" hasIconOnly icon={<CircleInfo size={20} />} />
+</Tooltip>
+```
+
+Supports `placement`, `maxWidth`, hover `delay` (default 0), `disabled`, and content `className`.
+The trigger keeps its accessible name and receives `aria-describedby` while open.
+Tooltips close on Escape, remain hoverable, flip at viewport edges, render in a portal,
+and respect reduced motion. Run `npm run test:tooltip` for browser interaction checks.

package/dist/index.cjs

@@ -107,6 +107,7 @@ __export(src_exports, {
   ToastViewport: () => ToastViewport,
   Toggle: () => Toggle,
   ToggleGhost: () => ToggleGhost,
+  Tooltip: () => Tooltip,
   UILoader: () => UILoader,
   cn: () => cn,
   useEscapeDismiss: () => useEscapeDismiss
@@ -3406,6 +3407,35 @@ function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLa
     ] }) : null
   ] });
 }
+
+// src/components/Tooltip/Tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function Tooltip({
+  content,
+  children,
+  placement = "bottom",
+  maxWidth = 320,
+  delay = 0,
+  disabled = false,
+  className
+}) {
+  if (disabled || content == null || content === "") return children;
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      TooltipPrimitive.Content,
+      {
+        side: placement,
+        sideOffset: 8,
+        collisionPadding: 8,
+        className: cn("fractal-tooltip", className),
+        style: { "--tooltip-max-width": typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
+        children: content
+      }
+    ) })
+  ] }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -3485,6 +3515,7 @@ function ColumnEditor({ items, value, onChange, label = "Edit columns", hiddenLa
   ToastViewport,
   Toggle,
   ToggleGhost,
+  Tooltip,
   UILoader,
   cn,
   useEscapeDismiss