@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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

@@ -1,10 +1,19 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useRef, useId, useEffect, createContext, useContext } from 'react';
+import React, { forwardRef, useState, useRef, useId, useEffect, createContext, useContext, useLayoutEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "className"];
+var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "swipeable", "className"],
+  _excluded2 = ["children", "className"];
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// Minimum horizontal travel (px) for a swipe to change tabs, and how much more
+// horizontal than vertical it must be, so vertical page scrolls never switch tabs.
+var SWIPE_THRESHOLD = 50;
+var SWIPE_DOMINANCE = 1.5;
+// Variants whose active state is drawn by the sliding indicator (horizontal only).
+var INDICATOR_VARIANTS = ["line", "segmented"];
 /*
   Tabs.jsx
   - Default export: Tabs (provider wrapper)
@@ -14,7 +23,10 @@ var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation",
   - Controlled / uncontrolled usage
   - Keyboard navigation (Arrow keys, Home, End)
   - ARIA attributes for accessibility
-  - Variants: "line" | "pills" | "unstyled"
+  - Variants: "line" | "pills" | "segmented" | "unstyled"
+  - Horizontal lists scroll with snap; the active tab is kept in view
+  - Animated active indicator for "line" / "segmented" (off under reduced motion)
+  - Optional `swipeable` panels (touch / pen pointer swipes)
   - Sizes: "sm" | "md" | "lg"
   - Simple fade animation
   - Tailwind CSS only
@@ -60,6 +72,8 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     variant = _ref$variant === void 0 ? "line" : _ref$variant,
     _ref$animated = _ref.animated,
     animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$swipeable = _ref.swipeable,
+    swipeable = _ref$swipeable === void 0 ? false : _ref$swipeable,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +85,12 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
   var activeIndex = isControlled ? controlledIndex : internalIndex;
   var tabsRef = useRef([]); // DOM refs for keyboard navigation
   var baseId = useId();
+  // Set by TabList once the sliding indicator has been measured; until then
+  // (SSR, first paint) tabs draw their own active styling.
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    indicatorReady = _useState4[0],
+    setIndicatorReady = _useState4[1];
   var changeTab = function changeTab(idx) {
     if (!isControlled) setActiveIndex(idx);
     onChange === null || onChange === void 0 || onChange(idx);
@@ -87,7 +107,10 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     orientation: orientation,
     size: size,
     variant: variant,
-    animated: animated
+    animated: animated,
+    swipeable: swipeable,
+    indicatorReady: indicatorReady,
+    setIndicatorReady: setIndicatorReady
   };
   return jsx(TabsContext.Provider, {
     value: value,
@@ -101,25 +124,96 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
 });
 Tabs.displayName = "Tabs";
 /* ------------------------- TabList ------------------------- */
-function TabList(_ref2) {
+var TabList = /*#__PURE__*/forwardRef(function TabList(_ref2, ref) {
   var children = _ref2.children,
     _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? "" : _ref2$className;
+    className = _ref2$className === void 0 ? "" : _ref2$className,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useTabsContext = useTabsContext("Tabs.List"),
-    orientation = _useTabsContext.orientation;
-  return jsx("div", {
+    orientation = _useTabsContext.orientation,
+    variant = _useTabsContext.variant,
+    activeIndex = _useTabsContext.activeIndex,
+    tabsRef = _useTabsContext.tabsRef,
+    indicatorReady = _useTabsContext.indicatorReady,
+    setIndicatorReady = _useTabsContext.setIndicatorReady;
+  var listRef = useRef(null);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    indicator = _useState6[0],
+    setIndicator = _useState6[1];
+  var horizontal = orientation !== "vertical";
+  var hasIndicator = horizontal && INDICATOR_VARIANTS.includes(variant);
+  var childCount = React.Children.count(children);
+  var setRefs = function setRefs(node) {
+    listRef.current = node;
+    if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+  };
+  // Measure the active tab: position the indicator and scroll the tab into view.
+  useIsomorphicLayoutEffect(function () {
+    var list = listRef.current;
+    var tab = tabsRef.current[activeIndex];
+    if (!list || !tab) return undefined;
+    var measure = function measure() {
+      if (horizontal) {
+        var left = tab.offsetLeft;
+        var right = left + tab.offsetWidth;
+        if (left < list.scrollLeft) list.scrollLeft = left;else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth;
+      }
+      // jsdom / display:none report 0; keep the tabs' own active styling then.
+      if (!hasIndicator || !tab.offsetWidth) return;
+      setIndicator({
+        left: tab.offsetLeft,
+        top: tab.offsetTop,
+        width: tab.offsetWidth,
+        height: tab.offsetHeight
+      });
+      setIndicatorReady(true);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var ro = new ResizeObserver(measure);
+    ro.observe(list);
+    ro.observe(tab);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [activeIndex, hasIndicator, horizontal, childCount]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Leaving an indicator variant hands the active styling back to the tabs.
+  useEffect(function () {
+    if (!hasIndicator && indicatorReady) setIndicatorReady(false);
+  }, [hasIndicator, indicatorReady, setIndicatorReady]);
+  var showIndicator = hasIndicator && indicatorReady && indicator;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: setRefs,
     role: "tablist",
     "aria-orientation": orientation,
-    className: "flex ".concat(orientation === "vertical" ? "flex-col" : "flex-row", " gap-1 ").concat(className),
-    children: React.Children.map(children, function (child, i) {
+    className: cn("relative flex gap-1", horizontal ?
+    // Scroll with snap, scrollbar hidden; native smooth scrolling unless reduced motion.
+    "flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth motion-reduce:scroll-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "flex-col", variant === "segmented" && "rounded-lg bg-gray-100 p-1 dark:bg-gray-800", className)
+  }, rest), {}, {
+    children: [showIndicator && jsx("span", {
+      "aria-hidden": "true",
+      "data-tabs-indicator": "",
+      className: cn("pointer-events-none absolute left-0 top-0", "transition-[transform,width,height] duration-base ease-standard motion-reduce:transition-none", variant === "line" ? "bg-primary-500" : "rounded-md bg-surface shadow-sm"),
+      style: variant === "line" ? {
+        width: indicator.width,
+        height: 2,
+        transform: "translate(".concat(indicator.left, "px, ").concat(indicator.top + indicator.height - 2, "px)")
+      } : {
+        width: indicator.width,
+        height: indicator.height,
+        transform: "translate(".concat(indicator.left, "px, ").concat(indicator.top, "px)")
+      }
+    }), React.Children.map(children, function (child, i) {
       var _child$props$index;
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
       return /*#__PURE__*/React.cloneElement(child, {
         index: (_child$props$index = child.props.index) !== null && _child$props$index !== void 0 ? _child$props$index : i
       });
-    })
-  });
-}
+    })]
+  }));
+});
+TabList.displayName = "Tabs.List";
 /* ------------------------- Tab ------------------------- */
 function Tab(_ref3) {
   var children = _ref3.children,
@@ -139,32 +233,45 @@ function Tab(_ref3) {
     tabsRef = _useTabsContext2.tabsRef,
     baseId = _useTabsContext2.baseId,
     size = _useTabsContext2.size,
-    variant = _useTabsContext2.variant;
+    variant = _useTabsContext2.variant,
+    orientation = _useTabsContext2.orientation,
+    indicatorReady = _useTabsContext2.indicatorReady;
   var internalRef = useRef(null);
   // If the user didn't provide `index` we derive from DOM position by registering nulls until mount.
   // However it's recommended to always keep Tabs.Tab order consistent with Panels.
-  useEffect(function () {
+  // Registered from a ref callback (runs at commit, before any layout effect) so
+  // Tabs.List can measure the active tab on mount without a flash.
+  var setTabRef = function setTabRef(el) {
+    internalRef.current = el;
+    if (!el) return;
     // find index in tabsRef if index not provided
-    var idx = typeof index === "number" ? index : tabsRef.current.findIndex(function (el) {
-      return el === internalRef.current;
+    var slot = typeof index === "number" ? index : tabsRef.current.findIndex(function (node) {
+      return node === el;
     });
-    if (idx === -1) idx = tabsRef.current.length; // fallback
-    registerTab(internalRef.current, idx);
-    // ensure the tab has the correct array slot
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    if (slot === -1) slot = tabsRef.current.length; // fallback
+    registerTab(el, slot);
+  };
   // TabList always injects `index`; a Tab rendered outside it is never selected.
   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 horizontal = orientation !== "vertical";
+  // Once the sliding indicator is measured it draws the active state; until then
+  // (SSR / first paint) the tab draws it itself so nothing flashes.
+  var indicatorDraws = indicatorReady && horizontal && INDICATOR_VARIANTS.includes(variant);
+  var base = cn("relative inline-flex items-center gap-2 whitespace-nowrap outline-none select-none", "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1", "transition-colors duration-fast motion-reduce:transition-none", "disabled:cursor-not-allowed disabled:opacity-50",
+  // The scrolling list clips outside rings, so horizontal tabs draw theirs inset.
+  horizontal && "shrink-0 snap-start focus-visible:ring-inset focus-visible:ring-offset-0");
   var sizeClasses = {
     sm: "px-2 py-1 text-sm",
     md: "px-3 py-2 text-sm",
     lg: "px-4 py-3 text-base"
   };
   var variantClasses = {
-    line: selected ? "border-b-2 border-primary-500" : "border-b-2 border-transparent hover:border-gray-200",
-    pills: selected ? "bg-primary-600 text-white rounded-full shadow-sm" : "bg-transparent rounded-full hover:bg-gray-100",
+    line: selected ? cn("border-b-2", indicatorDraws ? "border-transparent" : "border-primary-500") : "border-b-2 border-transparent hover:border-gray-200 dark:hover:border-gray-700",
+    pills: selected ? "bg-primary-600 text-white rounded-full shadow-sm" : "bg-transparent rounded-full hover:bg-gray-100 dark:hover:bg-gray-800",
+    // iOS-style segmented control: equal-width segments on a tinted track.
+    segmented: cn("z-10 flex-1 justify-center rounded-md font-medium", selected ? cn("text-foreground", !indicatorDraws && "bg-surface shadow-sm") : "text-muted hover:text-foreground"),
     unstyled: ""
   };
   var computedClass = cn(base, sizeClasses[size] || sizeClasses.md, variantClasses[variant], tabClassName, className);
@@ -208,7 +315,7 @@ function Tab(_ref3) {
     }
   };
   return jsxs("button", {
-    ref: internalRef,
+    ref: setTabRef,
     id: id,
     role: "tab",
     "aria-selected": selected,
@@ -237,9 +344,49 @@ function Panels(_ref4) {
     _ref4$className = _ref4.className,
     className = _ref4$className === void 0 ? "" : _ref4$className;
   var _useTabsContext3 = useTabsContext("Tabs.Panels"),
-    animated = _useTabsContext3.animated;
-  return jsx("div", {
-    className: "relative w-full ".concat(className),
+    animated = _useTabsContext3.animated,
+    swipeable = _useTabsContext3.swipeable,
+    activeIndex = _useTabsContext3.activeIndex,
+    changeTab = _useTabsContext3.changeTab,
+    tabsRef = _useTabsContext3.tabsRef;
+  var start = useRef(null);
+  // Next enabled tab in `dir`, or -1 at either end (no wrap-around on swipe).
+  var neighbour = function neighbour(dir) {
+    var tabs = tabsRef.current;
+    for (var i = activeIndex + dir; i >= 0 && i < tabs.length; i += dir) {
+      if (tabs[i] && !tabs[i].disabled) return i;
+    }
+    return -1;
+  };
+  var swipeHandlers = swipeable ? {
+    onPointerDown: function onPointerDown(e) {
+      // Touch and pen only: a mouse drag selects text instead.
+      if (e.pointerType === "mouse" || e.isPrimary === false) return;
+      start.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    },
+    onPointerUp: function onPointerUp(e) {
+      var from = start.current;
+      start.current = null;
+      if (!from) return;
+      var dx = e.clientX - from.x;
+      var dy = e.clientY - from.y;
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) return;
+      if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy) * SWIPE_DOMINANCE) return;
+      // Swipe left -> next tab, swipe right -> previous tab.
+      var next = neighbour(dx < 0 ? 1 : -1);
+      if (next !== -1) changeTab(next);
+    },
+    onPointerCancel: function onPointerCancel() {
+      start.current = null;
+    }
+  } : {};
+  return jsx("div", _objectSpread2(_objectSpread2({
+    // touch-pan-y: the browser keeps vertical scrolling; horizontal moves reach us.
+    className: cn("relative w-full", swipeable && "touch-pan-y", className)
+  }, swipeHandlers), {}, {
     children: React.Children.map(children, function (child, i) {
       var _child$props$index2;
       // inject index if missing
@@ -249,7 +396,7 @@ function Panels(_ref4) {
         animated: animated
       });
     })
-  });
+  }));
 }
 function Panel(_ref5) {
   var children = _ref5.children,
@@ -262,22 +409,23 @@ function Panel(_ref5) {
     activeIndex = _useTabsContext4.activeIndex,
     baseId = _useTabsContext4.baseId;
   var isActive = index === activeIndex;
-  var _useState3 = useState(isActive),
-    _useState4 = _slicedToArray(_useState3, 2),
-    wasActive = _useState4[0],
-    setWasActive = _useState4[1];
+  var _useState7 = useState(isActive),
+    _useState8 = _slicedToArray(_useState7, 2),
+    wasActive = _useState8[0],
+    setWasActive = _useState8[1];
   // 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 };

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

@@ -6,7 +6,7 @@ import { AlertCircle } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { setRefs } from '../../utils/position.js';
 
-var _excluded = ["id", "className", "label", "error", "helperText", "required", "disabled", "showCount", "maxLength", "autoResize", "rows", "maxRows", "value", "defaultValue", "onChange"];
+var _excluded = ["id", "className", "label", "error", "helperText", "required", "disabled", "showCount", "maxLength", "autoResize", "rows", "maxRows", "value", "defaultValue", "onChange", "size"];
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function fitToContent(el, maxRows) {
   if (!el) return;
@@ -24,6 +24,12 @@ function fitToContent(el, maxRows) {
   }
   el.style.height = "".concat(height, "px");
 }
+// Padding / text per size; `md` is the original look. Rows set the height.
+var SIZE_CLASSES = {
+  sm: "px-2.5 py-1.5 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
 var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var id = _ref.id,
     className = _ref.className,
@@ -45,6 +51,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var reactId = useId();
   var textareaId = id || "textarea-".concat(reactId);
@@ -93,7 +101,7 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       onChange: handleChange,
       "aria-invalid": error ? true : undefined,
       "aria-describedby": describedBy,
-      className: cn("block w-full rounded-md border bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:ring-offset-gray-900", error ? "border-error-500 focus:ring-error-500" : "border-gray-300 dark:border-gray-600", autoResize ? "resize-none" : "resize-y", className)
+      className: cn("block w-full rounded-md border bg-surface text-foreground placeholder-gray-400", SIZE_CLASSES[size] || SIZE_CLASSES.md, "transition-colors duration-fast ease-standard motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "dark:placeholder-gray-500 dark:focus-visible:ring-offset-gray-900", error ? "border-error-500 focus-visible:ring-error-500 dark:border-error-400" : "border-gray-300 focus-visible:ring-primary-500 dark:border-gray-600", autoResize ? "resize-none" : "resize-y", className)
     })), (error || helperText || showCount && maxLength) && jsxs("div", {
       className: "mt-1 flex items-start justify-between gap-3 text-sm",
       children: [jsxs("div", {