@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

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

@@ -1,11 +1,11 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useMemo } from 'react';
+import { forwardRef, useId, useRef, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useSliderValues, useSliderPointer, toPercent, keyToValue } from '../../hooks/useSliderValues.js';
 
-var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "formatValue", "thumbLabels", "name", "className", "aria-label"];
+var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "showBubble", "formatValue", "thumbLabels", "name", "className", "aria-label"];
 var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
 var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
@@ -24,6 +24,8 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label = _ref.label,
     _ref$showValue = _ref.showValue,
     showValue = _ref$showValue === void 0 ? false : _ref$showValue,
+    _ref$showBubble = _ref.showBubble,
+    showBubble = _ref$showBubble === void 0 ? true : _ref$showBubble,
     _ref$formatValue = _ref.formatValue,
     formatValue = _ref$formatValue === void 0 ? String : _ref$formatValue,
     _ref$thumbLabels = _ref.thumbLabels,
@@ -52,12 +54,18 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     values = _useSliderValues.values,
     isRange = _useSliderValues.isRange,
     setThumb = _useSliderValues.setThumb;
+  // Index of the thumb being dragged (drives the value bubble), else null.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
   var pointer = useSliderPointer({
     trackRef: trackRef,
     values: values,
     setThumb: setThumb,
     bounds: bounds,
-    disabled: disabled
+    disabled: disabled,
+    onActiveChange: setDragging
   });
   var handleKeyDown = function handleKeyDown(index) {
     return function (e) {
@@ -90,7 +98,9 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
       })]
     }), jsxs("div", _objectSpread2(_objectSpread2({
       ref: trackRef,
-      className: cn("relative flex h-5 touch-none select-none items-center", disabled ? "cursor-not-allowed" : "cursor-pointer")
+      className: cn(
+      // 44px tall row on coarse pointers so the whole strip is easy to grab.
+      "relative flex h-5 touch-none select-none items-center [@media(pointer:coarse)]:h-11", disabled ? "cursor-not-allowed" : "cursor-pointer")
     }, pointer), {}, {
       children: [jsx("div", {
         className: "h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700"
@@ -117,7 +127,15 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           style: {
             left: "".concat(toPercent(v, min, max), "%")
           },
-          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-white shadow", "transition-shadow motion-reduce:transition-none", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "dark:border-primary-500 dark:bg-gray-900 dark:focus:ring-offset-gray-900")
+          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-surface shadow", "transition-shadow duration-fast motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "dark:border-primary-500 dark:focus-visible:ring-offset-gray-900",
+          // Grow the hit area to 44px on touch without changing the visual size.
+          "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2", "[@media(pointer:coarse)]:before:h-11 [@media(pointer:coarse)]:before:w-11 before:content-['']"),
+          children: showBubble && dragging === i && jsx("span", {
+            "aria-hidden": "true",
+            "data-slider-bubble": "",
+            className: cn("pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-line", "bg-surface px-2 py-1 text-xs tabular-nums text-foreground shadow-sm", "animate-scale-in motion-reduce:animate-none"),
+            children: formatValue(v)
+          })
         }, i);
       })]
     })), name && values.map(function (v, i) {

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

@@ -4,8 +4,21 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
 import { MicOff, Mic } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
 var _excluded = ["lang", "continuous", "interimResults", "onSpeechComplete", "onSpeaking", "onError", "onStart", "onStop", "renderButton", "autoStart", "disabled", "resetOnStart", "className"];
+// Level bars (DTUI-42). There is no audio-level API without getUserMedia, so the
+// bars show *whether* speech is being heard (speechstart / results), not volume.
+var LEVEL_BARS = [{
+  height: "h-2",
+  delay: "[animation-delay:0ms]"
+}, {
+  height: "h-3.5",
+  delay: "[animation-delay:150ms]"
+}, {
+  height: "h-2.5",
+  delay: "[animation-delay:300ms]"
+}];
 var isProbablyMobile = function isProbablyMobile() {
   if (typeof navigator === "undefined") return false;
   return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -48,14 +61,19 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     _isListening = _useState2[0],
     setIsListening = _useState2[1];
-  var _useState3 = useState(true),
+  // True while the engine reports speech (speechstart → speechend, or results).
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    _isSupported = _useState4[0],
-    setIsSupported = _useState4[1];
-  var _useState5 = useState(null),
+    isHearing = _useState4[0],
+    setIsHearing = _useState4[1];
+  var _useState5 = useState(true),
     _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
+    _isSupported = _useState6[0],
+    setIsSupported = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
   useEffect(function () {
     var hasSpeechRecognition = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
     setIsSupported(hasSpeechRecognition);
@@ -76,6 +94,14 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     recognition.continuous = isProbablyMobile() ? false : continuous;
     recognition.interimResults = interimResults;
     recognition.lang = lang;
+    recognition.onspeechstart = function () {
+      if (!isMountedRef.current) return;
+      setIsHearing(true);
+    };
+    recognition.onspeechend = function () {
+      if (!isMountedRef.current) return;
+      setIsHearing(false);
+    };
     recognition.onstart = function () {
       if (!isMountedRef.current) return;
       setIsListening(true);
@@ -97,6 +123,7 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
           interim += text;
         }
       }
+      if (interim || finalChunk) setIsHearing(true);
       if (interim) onSpeaking(interim.trim());
       if (finalChunk) onSpeechComplete(finalChunk.trim());
     };
@@ -107,11 +134,13 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var err = new Error((event === null || event === void 0 ? void 0 : event.error) || "Speech recognition error");
       setError(err);
       setIsListening(false);
+      setIsHearing(false);
       onError(err);
     };
     recognition.onend = function () {
       if (!isMountedRef.current) return;
       setIsListening(false);
+      setIsHearing(false);
       onStop();
     };
     recognitionRef.current = recognition;
@@ -192,6 +221,7 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // eslint-disable-next-line react-hooks/refs
     return renderButton({
       isListening: _isListening,
+      isHearing: isHearing,
       isSupported: _isSupported,
       error: error,
       start: startListening,
@@ -207,18 +237,40 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": _isListening ? "Stop listening" : "Start listening",
     onClick: toggleListening,
     disabled: isDisabled,
-    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", "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:opacity-50 disabled:pointer-events-none", {
-      "text-error-600 border-error-600": _isListening,
-      "text-gray-900": !_isListening
+    "data-listening": _isListening || undefined,
+    "data-hearing": _isListening && isHearing || undefined,
+    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "[@media(pointer:coarse)]:min-h-11", "border border-gray-300 bg-transparent transition-colors duration-fast motion-reduce:transition-none", "hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900", "disabled:opacity-50 disabled:pointer-events-none", PRESS_FEEDBACK,
+    // PRESS_FEEDBACK sets transition-transform; keep the colour transition too.
+    "transition-[color,background-color,border-color,transform]", {
+      "text-error-600 border-error-600 dark:text-error-400 dark:border-error-400": _isListening,
+      "text-gray-900 dark:text-gray-100": !_isListening
     }, className)
   }, rest), {}, {
-    children: [_isListening ? jsx(MicOff, {
-      className: "h-4 w-4",
-      "aria-hidden": "true"
-    }) : jsx(Mic, {
-      className: "h-4 w-4",
-      "aria-hidden": "true"
-    }), _isListening ? "Stop" : "Start"]
+    children: [jsxs("span", {
+      className: "relative inline-flex h-4 w-4 items-center justify-center",
+      "aria-hidden": "true",
+      children: [_isListening &&
+      // Listening pulse; a static ring replaces it under reduced motion.
+      jsx("span", {
+        "data-testid": "stt-pulse",
+        className: "absolute -inset-1.5 rounded-full bg-error-500/30 animate-ping motion-reduce:animate-none motion-reduce:bg-transparent motion-reduce:ring-2 motion-reduce:ring-error-500/60"
+      }), _isListening ? jsx(MicOff, {
+        className: "relative h-4 w-4",
+        "aria-hidden": "true"
+      }) : jsx(Mic, {
+        className: "relative h-4 w-4",
+        "aria-hidden": "true"
+      })]
+    }), _isListening ? "Stop" : "Start", _isListening && jsx("span", {
+      className: "inline-flex h-3.5 items-end gap-0.5",
+      "aria-hidden": "true",
+      "data-testid": "stt-level",
+      children: LEVEL_BARS.map(function (bar, i) {
+        return jsx("span", {
+          className: cn("w-0.5 rounded-full transition-colors duration-base motion-reduce:transition-none", isHearing ? cn("bg-current animate-pulse motion-reduce:animate-none", bar.height, bar.delay) : "h-1 bg-current opacity-40")
+        }, i);
+      })
+    })]
   }));
 });
 SpeechToText.displayName = "SpeechToText";

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

@@ -1,10 +1,10 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useId, useEffect } from 'react';
+import { forwardRef, useState, useId, useEffect, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
+var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel"];
 /**
  * Switch.jsx
  * - Plain JSX (no TypeScript)
@@ -17,23 +17,29 @@ var _excluded = ["id", "name", "checked", "defaultChecked", "onChange", "disable
  * New props:
  * - topLabel, bottomLabel, rightLabel, leftLabel (renders label in those positions)
  */
+// `md` takes the iOS 51×31 size on coarse pointers (27px knob, 2px inset).
 var SIZE_MAP = {
   sm: {
     track: "w-9 h-5",
     knob: "w-4 h-4",
-    knobTranslate: "translate-x-4"
+    knobOn: "translate-x-4",
+    knobOff: "translate-x-1"
   },
   md: {
-    track: "w-11 h-6",
-    knob: "w-5 h-5",
-    knobTranslate: "translate-x-5"
+    track: "w-11 h-6 [@media(pointer:coarse)]:h-[31px] [@media(pointer:coarse)]:w-[51px]",
+    knob: "w-5 h-5 [@media(pointer:coarse)]:h-[27px] [@media(pointer:coarse)]:w-[27px]",
+    knobOn: "translate-x-5 [@media(pointer:coarse)]:translate-x-[22px]",
+    knobOff: "translate-x-1 [@media(pointer:coarse)]:translate-x-0.5"
   },
   lg: {
     track: "w-14 h-8",
     knob: "w-6 h-6",
-    knobTranslate: "translate-x-6"
+    knobOn: "translate-x-6",
+    knobOff: "translate-x-1"
   }
 };
+// Horizontal travel (px) before a press becomes a drag.
+var DRAG_THRESHOLD = 4;
 var COLOR_PRESETS = {
   primary: {
     bg: "bg-primary-600",
@@ -102,6 +108,10 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     rightLabel = props.rightLabel,
     leftLabel = props.leftLabel,
     ariaLabel = props.ariaLabel,
+    onPointerDown = props.onPointerDown,
+    onPointerMove = props.onPointerMove,
+    onPointerUp = props.onPointerUp,
+    onPointerCancel = props.onPointerCancel,
     rest = _objectWithoutProperties(props, _excluded);
   var isControlled = typeof checked === "boolean";
   var _useState = useState(defaultChecked),
@@ -115,31 +125,89 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     if (!isControlled) setInternalChecked(defaultChecked);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultChecked]);
-  var toggle = function toggle() {
-    if (disabled) return;
-    var next = !isOn;
+  // Drag-to-toggle: slide the knob (iOS style). A tap still toggles via click.
+  var drag = useRef(null);
+  var suppressClick = useRef(false);
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragPreview = _useState4[0],
+    setDragPreview = _useState4[1];
+  var setOn = function setOn(next) {
+    if (disabled || next === isOn) return;
     if (!isControlled) setInternalChecked(next);
     onChange && onChange(next);
   };
+  var toggle = function toggle() {
+    if (disabled) return;
+    if (suppressClick.current) {
+      // The click that follows a drag's pointerup; the drag already decided.
+      suppressClick.current = false;
+      return;
+    }
+    setOn(!isOn);
+  };
+  var dragTarget = function dragTarget(dx, start) {
+    return dx > DRAG_THRESHOLD ? true : dx < -DRAG_THRESHOLD ? false : start;
+  };
+  var handlePointerDown = function handlePointerDown(e) {
+    var _e$currentTarget$setP, _e$currentTarget;
+    onPointerDown && onPointerDown(e);
+    if (disabled || e.button > 0) return;
+    suppressClick.current = false;
+    drag.current = {
+      x: e.clientX,
+      start: isOn,
+      moved: false
+    };
+    (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
+  };
+  var handlePointerMove = function handlePointerMove(e) {
+    onPointerMove && onPointerMove(e);
+    if (!drag.current) return;
+    var dx = e.clientX - drag.current.x;
+    if (Math.abs(dx) > DRAG_THRESHOLD) drag.current.moved = true;
+    if (drag.current.moved) setDragPreview(dragTarget(dx, drag.current.start));
+  };
+  var endDrag = function endDrag(e, commit) {
+    var d = drag.current;
+    drag.current = null;
+    setDragPreview(null);
+    if (!d || !d.moved) return;
+    suppressClick.current = true;
+    if (commit) setOn(dragTarget(e.clientX - d.x, d.start));
+  };
+  var handlePointerUp = function handlePointerUp(e) {
+    onPointerUp && onPointerUp(e);
+    endDrag(e, true);
+  };
+  var handlePointerCancel = function handlePointerCancel(e) {
+    onPointerCancel && onPointerCancel(e);
+    endDrag(e, false);
+  };
   var handleKeyDown = function handleKeyDown(e) {
     if (disabled) return;
     if (e.key === " " || e.key === "Spacebar" || e.key === "Enter") {
       e.preventDefault();
-      toggle();
+      setOn(!isOn);
     }
   };
   var sizeStuff = SIZE_MAP[size] || SIZE_MAP.md;
   var isPreset = COLOR_PRESETS[color];
   // Classes for the track (we use inline style for arbitrary trackClass when ON)
-  var trackClasses = cn("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
+  // While dragging, the knob and track follow the drag's preview state.
+  var shownOn = dragPreview !== null && dragPreview !== void 0 ? dragPreview : isOn;
+  var trackClasses = cn("relative inline-flex shrink-0 items-center rounded-full touch-pan-y select-none", "transition-colors duration-base ease-standard motion-reduce:transition-none", sizeStuff.track,
+  // Off track: a visible grey on white (light) and on dark surfaces.
+  shownOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-300 dark:bg-gray-600", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
   );
   // Knob classes (thumb)
-  var knobBase = cn("inline-block rounded-full bg-white shadow transform ring-0 transition-transform duration-200 ease-in-out", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
+  // The knob stays white in both themes (it sits on a coloured or grey track).
+  var knobBase = cn("pointer-events-none inline-block rounded-full bg-white shadow-sm transform ring-0", "transition-transform duration-base ease-spring-out motion-reduce:transition-none", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
   );
-  var knobTransform = isOn ? sizeStuff.knobTranslate : "translate-x-1";
+  var knobTransform = shownOn ? sizeStuff.knobOn : sizeStuff.knobOff;
   var ringClass = isPreset ? isPreset.ring : "focus-visible:ring-primary-300";
-  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ".concat(ringClass);
-  var trackStyle = isOn && !trackClass && !isPreset ? {
+  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900 ".concat(ringClass);
+  var trackStyle = shownOn && !trackClass && !isPreset ? {
     backgroundColor: color
   } : undefined; // Fallback to default trackClass if trackClass is not a class
   var accessibleLabel = ariaLabel || rightLabel || leftLabel || topLabel || bottomLabel || "Toggle";
@@ -171,6 +239,10 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
         className: cn(trackClasses, focusClasses),
         onClick: toggle,
         onKeyDown: handleKeyDown,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
         style: trackStyle
       }, rest), {}, {
         children: [jsx("span", {