@dreamtree-org/twreact-ui 1.3.8 → 1.3.10

package/dist/esm/components/core/TextToSpeech.js

@@ -1,9 +1,19 @@
 'use client';
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { Square, Volume2 } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
 
-var TextToSpeech = function TextToSpeech(_ref) {
+var _excluded = ["text", "rate", "pitch", "onSpeak", "onError", "renderButton", "disabled", "className"];
+var UNSUPPORTED_MESSAGE = "Text-to-speech is not supported in this browser";
+// `interrupted` / `canceled` fire when playback is stopped on purpose (our own
+// cancel(), or another utterance taking over) — not failures worth surfacing.
+var NON_FATAL_ERRORS = new Set(["interrupted", "canceled"]);
+var detectSupport = function detectSupport() {
+  return typeof window !== "undefined" && "speechSynthesis" in window && !!window.speechSynthesis && typeof window.SpeechSynthesisUtterance !== "undefined";
+};
+var TextToSpeech = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? "" : _ref$text,
     _ref$rate = _ref.rate,
@@ -12,41 +22,124 @@ var TextToSpeech = function TextToSpeech(_ref) {
     pitch = _ref$pitch === void 0 ? 0.5 : _ref$pitch,
     _ref$onSpeak = _ref.onSpeak,
     onSpeak = _ref$onSpeak === void 0 ? function () {} : _ref$onSpeak,
-    renderButton = _ref.renderButton;
-  var _useState = useState(text),
-    _useState2 = _slicedToArray(_useState, 1),
-    inputText = _useState2[0];
-  var _useState3 = useState(false),
+    _ref$onError = _ref.onError,
+    onError = _ref$onError === void 0 ? function () {} : _ref$onError,
+    renderButton = _ref.renderButton,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSpeaking = _useState2[0],
+    setIsSpeaking = _useState2[1];
+  var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
-    isSpeaking = _useState4[0],
-    setIsSpeaking = _useState4[1];
-  var handleSpeak = function handleSpeak() {
-    var utterance = new SpeechSynthesisUtterance(inputText);
+    isSupported = _useState4[0],
+    setIsSupported = _useState4[1];
+  var isMountedRef = useRef(true);
+  var utteranceRef = useRef(null);
+  useEffect(function () {
+    setIsSupported(detectSupport());
+  }, []);
+  var stop = useCallback(function () {
+    if (detectSupport()) window.speechSynthesis.cancel();
+    utteranceRef.current = null;
+    setIsSpeaking(false);
+  }, []);
+  var speak = useCallback(function () {
+    if (!detectSupport()) {
+      setIsSupported(false);
+      return;
+    }
+    // Always speak the *current* `text` prop, not a value captured on mount.
+    var spokenText = text;
+    var utterance = new window.SpeechSynthesisUtterance(spokenText);
     utterance.rate = rate;
     utterance.pitch = pitch;
+    var isCurrent = function isCurrent() {
+      return isMountedRef.current && utteranceRef.current === utterance;
+    };
     utterance.onstart = function () {
-      onSpeak(inputText);
+      if (!isCurrent()) return;
+      onSpeak(spokenText);
       setIsSpeaking(true);
     };
     utterance.onend = function () {
+      if (!isCurrent()) return;
+      utteranceRef.current = null;
       setIsSpeaking(false);
     };
-    if (isSpeaking) {
-      window.speechSynthesis.cancel();
+    utterance.onerror = function (event) {
+      if (!isCurrent()) return;
+      utteranceRef.current = null;
       setIsSpeaking(false);
-    } else {
+      if (!NON_FATAL_ERRORS.has(event === null || event === void 0 ? void 0 : event.error)) {
+        onError(new Error((event === null || event === void 0 ? void 0 : event.error) || "Speech synthesis error"));
+      }
+    };
+    utteranceRef.current = utterance;
+    try {
       window.speechSynthesis.speak(utterance);
+    } catch (err) {
+      utteranceRef.current = null;
+      setIsSpeaking(false);
+      onError(err);
     }
-  };
-  return jsx("div", {
-    children: renderButton && typeof renderButton === "function" ? renderButton({
-      onClick: handleSpeak,
-      isSpeaking: isSpeaking
-    }) : jsx("button", {
-      onClick: handleSpeak,
-      children: isSpeaking ? "Stop" : "Speak"
-    })
-  });
-};
+  }, [text, rate, pitch, onSpeak, onError]);
+  var isDisabled = disabled || !isSupported;
+  var handleClick = useCallback(function () {
+    if (isDisabled) return;
+    if (isSpeaking) stop();else speak();
+  }, [isDisabled, isSpeaking, speak, stop]);
+  // Stop our own speech when unmounting so it doesn't outlive the component.
+  useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+      if (utteranceRef.current && detectSupport()) {
+        utteranceRef.current = null;
+        window.speechSynthesis.cancel();
+      }
+    };
+  }, []);
+  if (typeof renderButton === "function") {
+    // speak/stop only touch refs when invoked from event handlers, never while
+    // renderButton itself is rendering.
+    // eslint-disable-next-line react-hooks/refs
+    return renderButton({
+      onClick: handleClick,
+      isSpeaking: isSpeaking,
+      isSupported: isSupported,
+      disabled: isDisabled,
+      speak: speak,
+      stop: stop
+    });
+  }
+  return jsxs("button", _objectSpread2(_objectSpread2({
+    ref: ref,
+    type: "button",
+    onClick: handleClick,
+    disabled: isDisabled,
+    "aria-pressed": isSpeaking,
+    title: !isSupported ? UNSUPPORTED_MESSAGE : undefined,
+    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "border border-gray-300 bg-transparent transition-colors motion-reduce:transition-none", "hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "disabled:opacity-50 disabled:cursor-not-allowed", {
+      "text-error-600 border-error-600": isSpeaking,
+      "text-gray-900": !isSpeaking
+    }, className)
+  }, rest), {}, {
+    children: [isSpeaking ? jsx(Square, {
+      className: "h-4 w-4",
+      "aria-hidden": "true"
+    }) : jsx(Volume2, {
+      className: "h-4 w-4",
+      "aria-hidden": "true"
+    }), isSpeaking ? "Stop" : "Speak", !isSupported && jsx("span", {
+      className: "sr-only",
+      children: " (".concat(UNSUPPORTED_MESSAGE, ")")
+    })]
+  }));
+});
+TextToSpeech.displayName = "TextToSpeech";
 
 export { TextToSpeech as default };

package/dist/esm/components/core/Tooltip.js

@@ -6,6 +6,24 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
 
 var _excluded = ["position", "trigger", "content", "customTrigger", "children", "open", "defaultOpen", "onChange", "delay", "offset", "textClass", "bgClass", "className", "portal", "id"];
+// Grace period (ms) before a hover tooltip closes after the pointer leaves the
+// trigger, so the pointer can cross the `offset` gap onto the tooltip itself
+// (WCAG 1.4.13 "hoverable").
+var HOVER_CLOSE_GRACE = 100;
+/**
+ * Nearest ancestor that establishes the containing block for an absolutely
+ * positioned element. Uses `offsetParent` where the browser provides it and
+ * falls back to walking computed styles (jsdom has no layout).
+ */
+var getContainingBlock = function getContainingBlock(el) {
+  if (el.offsetParent) return el.offsetParent;
+  for (var p = el.parentElement; p && p !== document.body; p = p.parentElement) {
+    var cs = window.getComputedStyle(p);
+    if (cs.position && cs.position !== "static") return p;
+    if (cs.transform && cs.transform !== "none") return p;
+  }
+  return null;
+};
 var NATIVE_FOCUSABLE_TAGS = new Set(["button", "input", "select", "textarea"]);
 /**
  * True when `el` is a single intrinsic element that is keyboard-focusable on
@@ -62,9 +80,9 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     _ref$offset = _ref.offset,
     offset = _ref$offset === void 0 ? 8 : _ref$offset,
     _ref$textClass = _ref.textClass,
-    textClass = _ref$textClass === void 0 ? "text-black" : _ref$textClass,
+    textClass = _ref$textClass === void 0 ? "text-foreground" : _ref$textClass,
     _ref$bgClass = _ref.bgClass,
-    bgClass = _ref$bgClass === void 0 ? "bg-white" : _ref$bgClass,
+    bgClass = _ref$bgClass === void 0 ? "bg-surface" : _ref$bgClass,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$portal = _ref.portal,
@@ -74,6 +92,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   var triggerRef = useRef(null);
   var tooltipRef = useRef(null);
   var delayRef = useRef(null);
+  var closeTimerRef = useRef(null);
   var _useState = useState(Boolean(controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : defaultOpen)),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -176,10 +195,22 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     var pad = 8;
     left = Math.max(pad, Math.min(left, winW - ttW - pad));
     top = Math.max(pad, Math.min(top, winH - ttH - pad));
+    // `left`/`top` are viewport coords; convert to the containing block of the
+    // absolutely positioned tooltip. Portaled into <body> (or inline with no
+    // positioned ancestor) that is the document, so add page scroll; inline
+    // inside a positioned ancestor, offset by that ancestor instead.
+    var cb = getContainingBlock(el);
+    var originX = -window.scrollX;
+    var originY = -window.scrollY;
+    if (cb && cb !== document.body && cb !== document.documentElement) {
+      var cr = cb.getBoundingClientRect();
+      originX = cr.left + (cb.clientLeft || 0) - cb.scrollLeft;
+      originY = cr.top + (cb.clientTop || 0) - cb.scrollTop;
+    }
     setPlacement(chosen);
     setCoords({
-      left: Math.round(left) + window.scrollX,
-      top: Math.round(top) + window.scrollY
+      left: Math.round(left - originX),
+      top: Math.round(top - originY)
     });
   }, [offset, position]);
   useEffect(function () {
@@ -202,9 +233,13 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     };
   }, [open, computePosition]);
   // open/close helpers
+  var cancelScheduledClose = useCallback(function () {
+    clearTimeout(closeTimerRef.current);
+  }, []);
   var openTooltip = useCallback(function () {
     var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     clearTimeout(delayRef.current);
+    clearTimeout(closeTimerRef.current);
     if (immediate || !delay) {
       setOpen(true);
       notify(true);
@@ -217,9 +252,22 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   }, [delay, notify]);
   var closeTooltip = useCallback(function () {
     clearTimeout(delayRef.current);
+    clearTimeout(closeTimerRef.current);
     setOpen(false);
     notify(false);
   }, [notify]);
+  // Hover close is deferred so the pointer can move onto the tooltip.
+  var scheduleClose = useCallback(function () {
+    clearTimeout(delayRef.current);
+    clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = setTimeout(closeTooltip, HOVER_CLOSE_GRACE);
+  }, [closeTooltip]);
+  useEffect(function () {
+    return function () {
+      clearTimeout(delayRef.current);
+      clearTimeout(closeTimerRef.current);
+    };
+  }, []);
   // triggers normalization
   var triggers = useMemo(function () {
     return Array.isArray(trigger) ? trigger : [trigger];
@@ -228,34 +276,23 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
   useEffect(function () {
     var t = triggerRef.current;
     if (!t) return;
+    // The tooltip element itself keeps the tip open via its onMouseEnter /
+    // onMouseLeave props (see tooltipNode) — it doesn't exist yet here.
     if (triggers.includes("hover")) {
       var onMouseEnter = function onMouseEnter() {
         return openTooltip();
       };
       var onMouseLeave = function onMouseLeave() {
-        return closeTooltip();
+        return scheduleClose();
       };
       t.addEventListener("mouseenter", onMouseEnter);
       t.addEventListener("mouseleave", onMouseLeave);
-      // also attach to tooltip to prevent flicker
-      var tip = function tip() {
-        return tooltipRef.current;
-      };
-      var tryTip = tip();
-      if (tryTip) {
-        tryTip.addEventListener("mouseenter", onMouseEnter);
-        tryTip.addEventListener("mouseleave", onMouseLeave);
-      }
       return function () {
         t.removeEventListener("mouseenter", onMouseEnter);
         t.removeEventListener("mouseleave", onMouseLeave);
-        if (tryTip) {
-          tryTip.removeEventListener("mouseenter", onMouseEnter);
-          tryTip.removeEventListener("mouseleave", onMouseLeave);
-        }
       };
     }
-  }, [triggers, openTooltip, closeTooltip]);
+  }, [triggers, openTooltip, scheduleClose]);
   // click handlers (toggle and outside click)
   useEffect(function () {
     var t = triggerRef.current;
@@ -283,16 +320,21 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
       };
     }
   }, [triggers, notify]);
-  // focus handlers: use focusin / focusout which bubble and handle inner focusables
+  // focus handlers: use focusin / focusout which bubble and handle inner focusables.
+  // A hover tooltip also opens on keyboard focus (WCAG 1.4.13), unless click
+  // is a trigger too (focus-on-click would open it and the click toggle it shut).
+  var opensOnFocus = triggers.includes("focus") || triggers.includes("hover") && !triggers.includes("click");
   useEffect(function () {
     var t = triggerRef.current;
     if (!t) return;
-    if (triggers.includes("focus")) {
+    if (opensOnFocus) {
       var onFocusIn = function onFocusIn() {
         return openTooltip(true);
       };
-      var onFocusOut = function onFocusOut() {
-        return closeTooltip();
+      var onFocusOut = function onFocusOut(e) {
+        var tip = tooltipRef.current;
+        if (e.relatedTarget && tip && tip.contains(e.relatedTarget)) return;
+        closeTooltip();
       };
       t.addEventListener("focusin", onFocusIn);
       t.addEventListener("focusout", onFocusOut);
@@ -301,7 +343,22 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
         t.removeEventListener("focusout", onFocusOut);
       };
     }
-  }, [triggers, openTooltip, closeTooltip]);
+  }, [opensOnFocus, openTooltip, closeTooltip]);
+  // Dismiss on a pointer/tap outside. Touch has no mouseleave, so without this
+  // a tapped-open hover tooltip would never close.
+  useEffect(function () {
+    if (!open) return;
+    var onPointerDown = function onPointerDown(e) {
+      var t = triggerRef.current;
+      var tip = tooltipRef.current;
+      if (t && t.contains(e.target) || tip && tip.contains(e.target)) return;
+      closeTooltip();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return function () {
+      return document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open, closeTooltip]);
   // Escape key closes tooltip
   useEffect(function () {
     if (!open) return;
@@ -345,20 +402,35 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
     "aria-describedby": id,
     children: children
   });
+  // Hovering the tooltip itself keeps it open (attached as props so they are
+  // live as soon as the tip mounts); consumer handlers in ...rest still run.
+  var hoverable = triggers.includes("hover");
+  var restMouseEnter = rest.onMouseEnter,
+    restMouseLeave = rest.onMouseLeave;
+  var tipHoverProps = hoverable ? {
+    onMouseEnter: function onMouseEnter(e) {
+      cancelScheduledClose();
+      restMouseEnter === null || restMouseEnter === void 0 || restMouseEnter(e);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      scheduleClose();
+      restMouseLeave === null || restMouseLeave === void 0 || restMouseLeave(e);
+    }
+  } : {};
   // Tooltip box element
-  var tooltipNode = open ? jsx("div", _objectSpread2(_objectSpread2({
+  var tooltipNode = open ? jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
     ref: tooltipRef,
     id: id,
     role: "tooltip"
-  }, rest), {}, {
-    className: cn("absolute z-50 transform-gpu transition-opacity duration-150", className),
+  }, rest), tipHoverProps), {}, {
+    className: cn("absolute z-50 transform-gpu transition-opacity duration-150 motion-reduce:transition-none", className),
     style: {
       left: coords.left,
       top: coords.top,
       position: "absolute"
     },
     children: jsx("div", {
-      className: cn("max-w-xs rounded-md border border-gray-200 px-3 py-2 text-sm shadow-lg shadow-black/5", bgClass, textClass),
+      className: cn("max-w-xs rounded-md border border-line px-3 py-2 text-sm shadow-lg shadow-black/5", bgClass, textClass),
       children: renderContent()
     })
   })) : null;

package/dist/esm/components/feedback/Alert.js

@@ -4,8 +4,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { cn } from '../../utils/cn.js';
 import { Info, AlertTriangle, AlertCircle, CheckCircle, X } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["variant", "title", "children", "dismissible", "onDismiss", "className"];
+// error / warning need attention now (role="alert", assertive); info / success
+// are neutral and must not interrupt (role="status", polite).
+var URGENT_VARIANTS = new Set(['error', 'warning']);
 var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
@@ -20,7 +24,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     success: {
       container: 'bg-success-50 border-success-200',
       icon: jsx(CheckCircle, {
-        className: "h-5 w-5 text-success-500"
+        className: "h-5 w-5 text-success-500",
+        "aria-hidden": "true"
       }),
       title: 'text-success-800',
       content: 'text-success-700'
@@ -28,7 +33,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     error: {
       container: 'bg-error-50 border-error-200',
       icon: jsx(AlertCircle, {
-        className: "h-5 w-5 text-error-500"
+        className: "h-5 w-5 text-error-500",
+        "aria-hidden": "true"
       }),
       title: 'text-error-800',
       content: 'text-error-700'
@@ -36,7 +42,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     warning: {
       container: 'bg-warning-50 border-warning-200',
       icon: jsx(AlertTriangle, {
-        className: "h-5 w-5 text-warning-500"
+        className: "h-5 w-5 text-warning-500",
+        "aria-hidden": "true"
       }),
       title: 'text-warning-800',
       content: 'text-warning-700'
@@ -44,7 +51,8 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     info: {
       container: 'bg-primary-50 border-primary-200',
       icon: jsx(Info, {
-        className: "h-5 w-5 text-primary-500"
+        className: "h-5 w-5 text-primary-500",
+        "aria-hidden": "true"
       }),
       title: 'text-primary-800',
       content: 'text-primary-700'
@@ -54,7 +62,7 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('rounded-md border p-4', variantStyles.container, className),
-    role: "alert"
+    role: URGENT_VARIANTS.has(variant) ? 'alert' : 'status'
   }, props), {}, {
     children: jsxs("div", {
       className: "flex",
@@ -76,15 +84,17 @@ var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: "ml-auto pl-3",
         children: jsx("button", {
           type: "button",
-          className: cn('inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2', {
-            'text-success-500 hover:bg-success-100 focus:ring-success-600': variant === 'success',
-            'text-error-500 hover:bg-error-100 focus:ring-error-600': variant === 'error',
-            'text-warning-500 hover:bg-warning-100 focus:ring-warning-600': variant === 'warning',
-            'text-primary-500 hover:bg-primary-100 focus:ring-primary-600': variant === 'info'
+          className: cn('inline-flex items-center justify-center rounded-md p-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', TOUCH_TARGET, {
+            'text-success-500 hover:bg-success-100 focus-visible:ring-success-600': variant === 'success',
+            'text-error-500 hover:bg-error-100 focus-visible:ring-error-600': variant === 'error',
+            'text-warning-500 hover:bg-warning-100 focus-visible:ring-warning-600': variant === 'warning',
+            'text-primary-500 hover:bg-primary-100 focus-visible:ring-primary-600': variant === 'info'
           }),
           onClick: onDismiss,
+          "aria-label": "Dismiss",
           children: jsx(X, {
-            className: "h-4 w-4"
+            className: "h-4 w-4",
+            "aria-hidden": "true"
           })
         })
       })]