@dreamtree-org/twreact-ui 1.3.9 → 1.3.10

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

@@ -1,8 +1,9 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["count", "value", "defaultValue", "readOnly", "icon", "toggledIcon", "activeColor", "inactiveColor", "size", "onChange", "onClick", "text", "className", "id", "name"];
 function StarFilled(_ref) {
@@ -69,45 +70,39 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     hoverValue = _useState4[0],
     setHoverValue = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    focusValue = _useState6[0],
-    setFocusValue = _useState6[1];
+  var starRefs = useRef([]);
   var isControlled = value != null;
   var selectedValue = isControlled ? value : internalValue;
-  var displayValue = hoverValue != null ? hoverValue : focusValue != null ? focusValue : selectedValue;
+  // Hover preview (pointer devices only) wins over the committed value.
+  var displayValue = hoverValue != null ? hoverValue : selectedValue;
+  // Roving tabindex (DTUI-23): the group is a single tab stop — the star
+  // equal to the value, or the first star when nothing is selected.
+  var tabStop = selectedValue >= 1 ? Math.min(count, selectedValue) : 1;
   var InactiveIcon = icon !== null && icon !== void 0 ? icon : jsx(StarOutline, {
     size: size
   });
   var ActiveIcon = toggledIcon !== null && toggledIcon !== void 0 ? toggledIcon : jsx(StarFilled, {
     size: size
   });
-  var commit = function commit(n) {
-    if (readOnly) return;
+  var setValue = function setValue(n) {
     if (!isControlled) setInternalValue(n);
     if (typeof onChange === "function") onChange(n);
-    if (typeof onClick === "function") onClick(n);
   };
-  var handleMouseEnter = function handleMouseEnter(n) {
+  var commit = function commit(n) {
     if (readOnly) return;
-    setHoverValue(n);
+    setValue(n);
+    if (typeof onClick === "function") onClick(n);
   };
-  var handleMouseMove = function handleMouseMove(n) {
-    if (readOnly) return;
+  // Touch taps emit pointer/compat-mouse events with no matching "leave",
+  // which used to leave the preview stuck. Only real hover devices preview.
+  var handlePointerHover = function handlePointerHover(e, n) {
+    if (readOnly || e.pointerType === "touch") return;
     setHoverValue(n);
   };
-  var handleMouseLeave = function handleMouseLeave() {
+  var clearHover = function clearHover() {
     if (readOnly) return;
     setHoverValue(null);
   };
-  var handleFocus = function handleFocus(n) {
-    if (readOnly) return;
-    setFocusValue(n);
-  };
-  var handleBlur = function handleBlur() {
-    if (readOnly) return;
-    setFocusValue(null);
-  };
   var handleKeyDown = function handleKeyDown(e, n) {
     if (readOnly) return;
     if (e.key === "Enter" || e.key === " ") {
@@ -115,22 +110,16 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
       commit(n);
       return;
     }
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      setFocusValue(function (prev) {
-        var base = prev != null ? prev : selectedValue || 0;
-        return Math.max(0, base - 1);
-      });
-      return;
-    }
-    if (e.key === "ArrowRight") {
-      e.preventDefault();
-      setFocusValue(function (prev) {
-        var base = prev != null ? prev : selectedValue || 0;
-        return Math.min(count, base + 1);
-      });
-      return;
-    }
+    var next = null;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") next = n + 1;else if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = n - 1;else if (e.key === "Home") next = 1;else if (e.key === "End") next = count;
+    if (next == null) return;
+    e.preventDefault();
+    next = Math.max(1, Math.min(count, next));
+    // Radio-group semantics: arrows move real focus AND the selection.
+    setHoverValue(null);
+    var target = starRefs.current[next - 1];
+    if (target) target.focus();
+    if (next !== selectedValue) setValue(next);
   };
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
@@ -141,41 +130,43 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     children: [jsx("div", {
       role: "radiogroup",
       "aria-label": name || "Rating",
+      "aria-readonly": readOnly ? "true" : undefined,
       className: "inline-flex gap-1",
-      onMouseLeave: handleMouseLeave,
+      onPointerLeave: clearHover,
+      onPointerCancel: clearHover,
       children: Array.from({
         length: count
       }, function (_, i) {
         var starNumber = i + 1;
         var filled = starNumber <= (displayValue || 0);
+        var checked = starNumber === selectedValue;
         var color = filled ? activeColor : inactiveColor;
         // Token classes unless a colour override is passed, so brands and dark mode apply (STUDIO-59).
         var colorClass = color ? "" : filled ? " text-warning-400" : " text-gray-200";
         return jsx("button", {
+          ref: function ref(el) {
+            starRefs.current[i] = el;
+          },
           type: "button",
           role: "radio",
-          "aria-checked": filled,
+          "aria-checked": checked,
           "aria-label": "".concat(starNumber, " star").concat(starNumber > 1 ? "s" : ""),
-          tabIndex: readOnly ? -1 : 0,
+          tabIndex: !readOnly && starNumber === tabStop ? 0 : -1,
           onClick: function onClick() {
             return commit(starNumber);
           },
           onKeyDown: function onKeyDown(e) {
             return handleKeyDown(e, starNumber);
           },
-          onMouseEnter: function onMouseEnter() {
-            return handleMouseEnter(starNumber);
-          },
-          onMouseMove: function onMouseMove() {
-            return handleMouseMove(starNumber);
+          onPointerEnter: function onPointerEnter(e) {
+            return handlePointerHover(e, starNumber);
           },
-          onFocus: function onFocus() {
-            return handleFocus(starNumber);
+          onPointerMove: function onPointerMove(e) {
+            return handlePointerHover(e, starNumber);
           },
-          onBlur: handleBlur,
           disabled: readOnly,
           title: "".concat(starNumber, " of ").concat(count),
-          className: "p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-300 rounded".concat(colorClass),
+          className: cn("p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 rounded", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "transition-colors motion-reduce:transition-none", TOUCH_TARGET, colorClass.trim()),
           style: color ? {
             color: color
           } : undefined,

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

@@ -3,8 +3,9 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["label", "avatarSrc", "avatarAlt", "initials", "size", "onRemove", "onClick", "className", "closeClass", "ariaLabel", "avatarPosition", "avatarClassname", "initialClassname"];
+var _excluded = ["label", "avatarSrc", "avatarAlt", "initials", "size", "onRemove", "onClick", "className", "closeClass", "ariaLabel", "onKeyDown", "avatarPosition", "avatarClassname", "initialClassname"];
 var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
   var label = _ref.label,
     _ref$avatarSrc = _ref.avatarSrc,
@@ -23,8 +24,8 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
     className = _ref$className === void 0 ? "" : _ref$className,
     _ref$closeClass = _ref.closeClass,
     closeClass = _ref$closeClass === void 0 ? "" : _ref$closeClass,
-    _ref$ariaLabel = _ref.ariaLabel,
-    ariaLabel = _ref$ariaLabel === void 0 ? "tag" : _ref$ariaLabel,
+    ariaLabel = _ref.ariaLabel,
+    onKeyDown = _ref.onKeyDown,
     _ref$avatarPosition = _ref.avatarPosition,
     avatarPosition = _ref$avatarPosition === void 0 ? "left" : _ref$avatarPosition,
     _ref$avatarClassname = _ref.avatarClassname,
@@ -63,6 +64,19 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
     e && e.stopPropagation();
     onRemove && onRemove({});
   }
+  var clickable = typeof _onClick === "function";
+  // Enter / Space activate a clickable tag like a native button. Keys from
+  // nested controls (the remove button) are left alone.
+  function handleKeyDown(e) {
+    onKeyDown && onKeyDown(e);
+    if (!clickable || e.defaultPrevented || e.target !== e.currentTarget) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      _onClick(e);
+    }
+  }
+  var labelText = typeof label === "string" || typeof label === "number" ? String(label) : "";
+  var removeLabel = labelText ? "Remove ".concat(labelText) : "Remove";
   var s = sizes[size] || sizes.md;
   var paddingClass = showAvatar ? s.paddingWithAvatar : s.paddingNoAvatar;
   var gapClass = showAvatar ? s.gapWithAvatar : s.gapNoAvatar;
@@ -83,22 +97,25 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
   });
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("inline-flex items-center rounded-full bg-gray-100 text-primary-800", paddingClass, gapClass, s.text, className),
-    role: "group",
+    className: cn("inline-flex items-center rounded-full bg-gray-100 text-primary-800", paddingClass, gapClass, s.text, clickable && "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1", className),
+    role: clickable ? "button" : "group",
+    tabIndex: clickable ? 0 : undefined,
     "aria-label": ariaLabel,
     onClick: function onClick(e) {
       return _onClick && _onClick(e);
-    }
+    },
+    onKeyDown: handleKeyDown
   }, rest), {}, {
     children: [avatarPosition === "left" && AvatarNode, jsx("div", {
       className: "truncate max-w-[10rem]",
       children: label
     }), avatarPosition === "right" && AvatarNode, onRemove && jsx("button", {
       type: "button",
-      "aria-label": "Remove",
+      "aria-label": removeLabel,
       onClick: handleRemove,
-      className: "inline-flex items-center justify-center rounded-full p-1 hover:bg-gray-200 focus:outline-none ".concat(closeClass),
+      className: cn("inline-flex items-center justify-center rounded-full p-1 hover:bg-gray-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET, closeClass),
       children: jsx("svg", {
+        "aria-hidden": "true",
         className: "w-3 h-3",
         viewBox: "0 0 24 24",
         fill: "none",

package/dist/esm/components/core/Table/ColumnMenu.js

@@ -1,8 +1,8 @@
 'use client';
-import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { cn } from '../../../utils/cn.js';
+import { getHoverClass } from './helpers.js';
 
 var DEFAULT_ROW_HOVER = "bg-background";
 /**
@@ -32,9 +32,7 @@ function ColumnMenu(_ref) {
       className: "max-h-56 overflow-auto",
       children: columns.map(function (col) {
         return jsxs("label", {
-          className: cn(_defineProperty({
-            "flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded": true
-          }, "hover:" + rowHover, true)),
+          className: cn("flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded", getHoverClass(rowHover)),
           children: [jsx("input", {
             type: "checkbox",
             checked: col.isVisible !== false,

package/dist/esm/components/core/Table/Pagination.js

@@ -1,27 +1,27 @@
 'use client';
-import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import { cn } from '../../../utils/cn.js';
+import { TOUCH_TARGET } from '../../../utils/touchTarget.js';
+import { getHoverClass } from './helpers.js';
 import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight } from 'lucide-react';
 
 /**
  * Pagination controls component for the table
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
-var DEFAULT_ROW_HOVER = "bg-background";
+var NAV_BUTTON_BASE = "inline-flex items-center justify-center rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
 // Header pagination (compact, icon-based)
 function PaginationHeader(_ref) {
-  var _theme$rowHover;
   var currentPage = _ref.currentPage,
     totalPages = _ref.totalPages,
     onPageChange = _ref.onPageChange,
     theme = _ref.theme;
-  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER;
+  var hoverClass = getHoverClass(theme === null || theme === void 0 ? void 0 : theme.rowHover);
   return jsxs("div", {
     className: "flex items-center gap-1",
     children: [totalPages >= 4 && jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === 1,
       onClick: function onClick() {
         return onPageChange(1);
@@ -31,7 +31,7 @@ function PaginationHeader(_ref) {
         className: "size-4 md:size-5 text-primary-800"
       })
     }), jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === 1,
       onClick: function onClick() {
         return onPageChange(Math.max(1, currentPage - 1));
@@ -41,7 +41,7 @@ function PaginationHeader(_ref) {
         className: "size-4 md:size-5 text-primary-800"
       })
     }), jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === totalPages,
       onClick: function onClick() {
         return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -51,7 +51,7 @@ function PaginationHeader(_ref) {
         className: "size-4 md:size-5 text-primary-800"
       })
     }), totalPages >= 4 && jsx("button", {
-      className: cn("rounded-lg md:rounded-md border border-gray-300 p-2 disabled:opacity-50", ["hover:" + rowHover]),
+      className: cn(NAV_BUTTON_BASE, "p-2", TOUCH_TARGET, hoverClass),
       disabled: currentPage === totalPages,
       onClick: function onClick() {
         return onPageChange(totalPages);
@@ -65,13 +65,12 @@ function PaginationHeader(_ref) {
 }
 // Footer pagination (with page numbers)
 function PaginationFooter(_ref2) {
-  var _theme$rowHover2;
   var currentPage = _ref2.currentPage,
     totalPages = _ref2.totalPages,
     onPageChange = _ref2.onPageChange,
     isMobileView = _ref2.isMobileView,
     theme = _ref2.theme;
-  var rowHover = (_theme$rowHover2 = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover2 !== void 0 ? _theme$rowHover2 : DEFAULT_ROW_HOVER;
+  var hoverClass = getHoverClass(theme === null || theme === void 0 ? void 0 : theme.rowHover);
   var visiblePageCount = isMobileView ? 5 : 3;
   return jsx("div", {
     className: "p-4 border-t",
@@ -83,7 +82,7 @@ function PaginationFooter(_ref2) {
       }), jsxs("div", {
         className: "flex items-center gap-1 sm:gap-2",
         children: [totalPages >= 4 && jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === 1,
           onClick: function onClick() {
             return onPageChange(1);
@@ -93,7 +92,7 @@ function PaginationFooter(_ref2) {
             className: "size-4 text-primary-800"
           }) : "First"
         }), jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === 1,
           onClick: function onClick() {
             return onPageChange(Math.max(1, currentPage - 1));
@@ -118,10 +117,8 @@ function PaginationFooter(_ref2) {
               pageNum = currentPage - 2 + i;
             }
             return jsx("button", {
-              className: cn("h-8 w-8 rounded-lg md:rounded-md text-sm", _defineProperty({
-                "bg-primary-600 text-white": pageNum === currentPage,
-                "border border-gray-300": pageNum !== currentPage
-              }, "hover:" + rowHover, pageNum !== currentPage)),
+              className: cn("inline-flex items-center justify-center h-8 w-8 rounded-lg md:rounded-md text-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET, pageNum === currentPage ? "bg-primary-600 text-white" : ["border border-gray-300", hoverClass]),
+              "aria-current": pageNum === currentPage ? "page" : undefined,
               onClick: function onClick() {
                 return onPageChange(pageNum);
               },
@@ -129,7 +126,7 @@ function PaginationFooter(_ref2) {
             }, pageNum);
           })
         }), jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === totalPages,
           onClick: function onClick() {
             return onPageChange(Math.min(totalPages, currentPage + 1));
@@ -139,7 +136,7 @@ function PaginationFooter(_ref2) {
             className: "size-4 text-primary-800"
           }) : "Next"
         }), totalPages >= 4 && jsx("button", {
-          className: cn("rounded-lg md:rounded-md border border-gray-300 disabled:opacity-50", isMobileView ? "p-2" : "px-4 py-2 text-sm", ["hover:" + rowHover]),
+          className: cn(NAV_BUTTON_BASE, isMobileView ? "p-2" : "px-4 py-2 text-sm", TOUCH_TARGET, hoverClass),
           disabled: currentPage === totalPages,
           onClick: function onClick() {
             return onPageChange(totalPages);

package/dist/esm/components/core/Table/TableRow.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Trash2, MoreVertical } from 'lucide-react';
 import ActionMenu from './ActionMenu.js';
-import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getStripeProps } from './helpers.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getHoverClass, getStripeProps } from './helpers.js';
 
 /**
  * Desktop table row component
@@ -96,7 +96,7 @@ function TableRow(_ref) {
   return jsxs(React.Fragment, {
     children: [jsxs("tr", {
       style: stripeProps.style,
-      className: cn(stripeProps.className, theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
+      className: cn(stripeProps.className, theme !== null && theme !== void 0 && theme.rowHover ? getHoverClass(theme.rowHover) : [], {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": isSelected,
         "bg-primary-50/20": isRowActive && !isSelected,

package/dist/esm/components/core/Table/helpers.js

@@ -135,5 +135,37 @@ var resolveActions = function resolveActions(actions, row, index) {
     menuActions: menuActions
   };
 };
+/**
+ * Tailwind only generates classes it can see as complete literals in source, so a
+ * runtime-built `"hover:" + token` is purged from the compiled CSS. Bare `rowHover`
+ * tokens (the shipped defaults, past and present) map to static literals here.
+ */
+var HOVER_BG_CLASSES = {
+  "bg-background": "hover:bg-background",
+  "bg-surface": "hover:bg-surface",
+  "bg-gray-50": "hover:bg-gray-50",
+  "bg-gray-100": "hover:bg-gray-100",
+  "bg-primary-50": "hover:bg-primary-50",
+  "bg-primary-100": "hover:bg-primary-100"
+};
+var DEFAULT_HOVER_CLASS = HOVER_BG_CLASSES["bg-background"];
+/**
+ * Resolve `theme.rowHover` to a full hover class string.
+ * - A value that already contains a `hover:` variant is used as-is (preferred: pass
+ *   the full literal, e.g. `"hover:bg-gray-100"`, so your Tailwind build sees it).
+ * - A bare token from the static map resolves to its literal.
+ * - Any other bare token falls back to a `hover:` prefix for backward compatibility;
+ *   it only works if the consumer's own Tailwind build generates that class.
+ */
+var getHoverClass = function getHoverClass(rowHover) {
+  if (!rowHover || typeof rowHover !== "string") return DEFAULT_HOVER_CLASS;
+  var value = rowHover.trim();
+  if (!value) return DEFAULT_HOVER_CLASS;
+  if (/(^|\s)hover:/.test(value)) return value;
+  if (HOVER_BG_CLASSES[value]) return HOVER_BG_CLASSES[value];
+  return value.split(/\s+/).map(function (cls) {
+    return "hover:".concat(cls);
+  }).join(" ");
+};
 
-export { getActionLabelText, getRowKey, getStripeProps, mergeDefaultActions, resolveActions, rowHasDetails };
+export { DEFAULT_HOVER_CLASS, getActionLabelText, getHoverClass, getRowKey, getStripeProps, mergeDefaultActions, resolveActions, rowHasDetails };

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

@@ -156,7 +156,7 @@ function Tab(_ref3) {
   var idx = typeof index === "number" ? index : -1;
   var selected = idx === activeIndex;
   var id = tabId(baseId, idx);
-  var base = "inline-flex items-center gap-2 outline-none select-none";
+  var base = "inline-flex items-center gap-2 outline-none select-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1";
   var sizeClasses = {
     sm: "px-2 py-1 text-sm",
     md: "px-3 py-2 text-sm",
@@ -269,15 +269,16 @@ function Panel(_ref5) {
   // Remember that the panel has been shown once (adjust-during-render pattern).
   if (isActive && !wasActive) setWasActive(true);
   if (!wasActive && !isActive) return null;
-  var base = "w-full transition-all duration-200 ease-in-out";
-  var activeClasses = animated ? "opacity-100 translate-y-0 pointer-events-auto relative" : "opacity-100 pointer-events-auto relative";
-  var inactiveClasses = animated ? "opacity-0 -translate-y-2 pointer-events-none absolute inset-0" : "hidden pointer-events-none absolute inset-0";
+  // Inactive panels are `hidden` (display: none), so a CSS *transition* can
+  // never run. A keyframe animation does replay each time the panel leaves
+  // display:none, so the active panel fades in on every switch.
+  var activeClasses = animated ? "animate-fade-in motion-reduce:animate-none" : "";
   return jsx("div", {
     id: panelId(baseId, index),
     role: "tabpanel",
     "aria-labelledby": tabId(baseId, index),
     hidden: !isActive,
-    className: "".concat(base, " ").concat(isActive ? activeClasses : inactiveClasses, " ").concat(className),
+    className: cn("w-full", isActive && activeClasses, className),
     children: children
   });
 }

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