@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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

@@ -1,12 +1,14 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useState, useEffect, useMemo } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect, useRef, useMemo } from 'react';
 import { cn } from '../../utils/cn.js';
+import { toPercent, keyToValue } from '../../hooks/useSliderValues.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
 var _excluded = ["min", "max", "step", "minGap", "value", "defaultValue", "onChange", "onFinalChange", "showInputs", "showTooltips", "disabled", "presets", "formatValue", "className", "size", "colorClass", "ariaLabel"];
 /**
- * PriceRangeSlider - UI library component (Tailwind)
+ * PriceRangePicker - dual-thumb range picker (Tailwind)
  *
  * Props
  * - min: number (default 0)
@@ -16,7 +18,7 @@ var _excluded = ["min", "max", "step", "minGap", "value", "defaultValue", "onCha
  * - value: { min: number, max: number } | null (controlled)
  * - defaultValue: { min: number, max: number } (uncontrolled initial)
  * - onChange: (value) => void
- * - onFinalChange: (value) => void // called on mouseup/touchend or Enter in inputs
+ * - onFinalChange: (value) => void // called when a drag ends, on thumb keys, or Enter/blur in inputs
  * - showInputs: boolean (default true)
  * - showTooltips: boolean (default true)
  * - disabled: boolean
@@ -24,16 +26,29 @@ var _excluded = ["min", "max", "step", "minGap", "value", "defaultValue", "onCha
  * - formatValue: (n) => string (formatting callback, default: n => n)
  * - className: string (container custom classes)
  * - size: 'sm' | 'md' | 'lg' (affects thumb size & spacing)
- * - colorClass: Tailwind class for active track/thumb, default 'bg-pink-500'
+ * - colorClass: Tailwind bg class for the active track and thumbs, default 'bg-primary-600'
  * - ariaLabel: string
  *
- * Usage notes
- * - Controlled mode: pass `value` and handle updates via onChange.
- * - Uncontrolled mode: omit `value` and use `defaultValue`.
- *
  * Accessibility
- * - Inputs are labelled and thumbs are keyboard-focusable
+ * - Each thumb is a `role="slider"` with arrow / Page / Home / End keys.
+ * - Dragging uses pointer capture, so mouse, touch and pen all work and a
+ *   release outside the track still ends the drag.
  */
+var THUMB_SIZE = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-7 w-7"
+};
+var TRACK_HEIGHT = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2"
+};
+var INPUT_WIDTH = {
+  sm: "w-16",
+  md: "w-20",
+  lg: "w-24"
+};
 var PriceRangePicker = /*#__PURE__*/forwardRef(function PriceRangePicker(_ref, ref) {
   var _ref$min = _ref.min,
     min = _ref$min === void 0 ? 0 : _ref$min,
@@ -71,188 +86,169 @@ var PriceRangePicker = /*#__PURE__*/forwardRef(function PriceRangePicker(_ref, r
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "md" : _ref$size,
     _ref$colorClass = _ref.colorClass,
-    colorClass = _ref$colorClass === void 0 ? "bg-pink-500" : _ref$colorClass,
+    colorClass = _ref$colorClass === void 0 ? "bg-primary-600" : _ref$colorClass,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? "Price range" : _ref$ariaLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isControlled = value && _typeof(value) === "object";
-  var _useState = useState(isControlled ? value.min : defaultValue.min),
+  var _useState = useState(function () {
+      return isControlled ? {
+        min: value.min,
+        max: value.max
+      } : {
+        min: defaultValue.min,
+        max: defaultValue.max
+      };
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    internalMin = _useState2[0],
-    setInternalMin = _useState2[1];
-  var _useState3 = useState(isControlled ? value.max : defaultValue.max),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internalMax = _useState4[0],
-    setInternalMax = _useState4[1];
+    internal = _useState2[0],
+    setInternal = _useState2[1];
+  var current = isControlled ? {
+    min: value.min,
+    max: value.max
+  } : internal;
   // Inputs mirror state so editing doesn't immediately break constraints
-  var _useState5 = useState(internalMin),
+  var _useState3 = useState(current.min),
+    _useState4 = _slicedToArray(_useState3, 2),
+    minInput = _useState4[0],
+    setMinInput = _useState4[1];
+  var _useState5 = useState(current.max),
     _useState6 = _slicedToArray(_useState5, 2),
-    minInput = _useState6[0],
-    setMinInput = _useState6[1];
-  var _useState7 = useState(internalMax),
-    _useState8 = _slicedToArray(_useState7, 2),
-    maxInput = _useState8[0],
-    setMaxInput = _useState8[1];
-  // dragging state
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    isDragging = _useState0[0],
-    setIsDragging = _useState0[1];
+    maxInput = _useState6[0],
+    setMaxInput = _useState6[1];
   useEffect(function () {
-    if (isControlled) {
-      setInternalMin(value.min);
-      setInternalMax(value.max);
-      setMinInput(value.min);
-      setMaxInput(value.max);
-    }
-  }, [value, isControlled]);
-  // Update inputs when internal changes (uncontrolled)
-  useEffect(function () {
-    if (!isControlled) {
-      setMinInput(internalMin);
-      setMaxInput(internalMax);
-    }
-  }, [internalMin, internalMax, isControlled]);
+    setMinInput(current.min);
+    setMaxInput(current.max);
+  }, [current.min, current.max]);
+  var trackRef = useRef(null);
+  var thumbRefs = [useRef(null), useRef(null)];
+  // Active drag thumb ("min" | "max" | null) plus the latest value, so the
+  // pointer-up handler reports what was actually rendered, not stale state.
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dragging = _useState8[0],
+    setDragging = _useState8[1];
+  var latest = useRef(current);
+  latest.current = current;
   var clamp = function clamp(v) {
     return Math.min(max, Math.max(min, v));
   };
+  var snap = function snap(v) {
+    return clamp(Math.round((v - min) / step) * step + min);
+  };
   var setValues = function setValues(next) {
-    // next: {min, max}
-    // enforce gap and clamp
-    var a = clamp(Math.round(next.min / step) * step);
-    var b = clamp(Math.round(next.max / step) * step);
+    var a = snap(next.min);
+    var b = snap(next.max);
     if (b - a < minGap) {
-      // push them apart (prefer keeping changed thumb)
-      if (next._active === "min") {
-        a = clamp(b - minGap);
-      } else if (next._active === "max") {
-        b = clamp(a + minGap);
-      } else {
-        // equal distribution
-        if (a + minGap <= max) b = a + minGap;else a = b - minGap;
-      }
-    }
-    if (isControlled) {
-      onChange({
-        min: a,
-        max: b
-      });
-    } else {
-      setInternalMin(a);
-      setInternalMax(b);
-      onChange({
-        min: a,
-        max: b
-      });
+      // push them apart (prefer keeping the thumb that moved)
+      if (next._active === "min") a = clamp(b - minGap);else if (next._active === "max") b = clamp(a + minGap);else if (a + minGap <= max) b = a + minGap;else a = b - minGap;
     }
+    var out = {
+      min: a,
+      max: b
+    };
+    latest.current = out;
+    if (!isControlled) setInternal(out);
+    onChange(out);
+    return out;
   };
   var handleFinal = function handleFinal(next) {
-    onFinalChange({
+    return onFinalChange({
       min: next.min,
       max: next.max
     });
   };
-  // Handlers for range inputs
-  var handleMinRange = function handleMinRange(e) {
-    if (disabled) return;
-    var v = parseInt(e.target.value, 10);
-    setValues({
-      min: v,
-      max: isControlled ? value.max : internalMax,
-      _active: "min"
-    });
+  var bounds = {
+    min: min,
+    max: max,
+    step: step,
+    largeStep: Math.max(step, (max - min) / 10)
   };
-  var handleMaxRange = function handleMaxRange(e) {
-    if (disabled) return;
-    var v = parseInt(e.target.value, 10);
-    setValues({
-      min: isControlled ? value.min : internalMin,
-      max: v,
-      _active: "max"
-    });
+  // Thumb keyboard handling
+  var handleThumbKey = function handleThumbKey(which) {
+    return function (e) {
+      if (disabled) return;
+      var next = keyToValue(e.key, current[which], bounds);
+      if (next === null) return;
+      e.preventDefault();
+      handleFinal(setValues(_objectSpread2(_objectSpread2({}, current), {}, _defineProperty(_defineProperty({}, which, next), "_active", which))));
+    };
+  };
+  // Pointer drag on the track: grab the nearest thumb and follow the pointer.
+  var toValue = function toValue(clientX) {
+    var rect = trackRef.current.getBoundingClientRect();
+    var ratio = rect.width ? (clientX - rect.left) / rect.width : 0;
+    return min + Math.min(1, Math.max(0, ratio)) * (max - min);
+  };
+  var onPointerDown = function onPointerDown(e) {
+    var _e$currentTarget$setP, _e$currentTarget, _thumbRefs$current;
+    if (disabled || e.button > 0) return;
+    var raw = toValue(e.clientX);
+    var which = Math.abs(raw - current.min) < Math.abs(raw - current.max) || current.min === current.max && raw < current.min ? "min" : "max";
+    (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
+    setDragging(which);
+    setValues(_objectSpread2(_objectSpread2({}, current), {}, _defineProperty(_defineProperty({}, which, raw), "_active", which)));
+    (_thumbRefs$current = thumbRefs[which === "min" ? 0 : 1].current) === null || _thumbRefs$current === void 0 || _thumbRefs$current.focus();
+  };
+  var onPointerMove = function onPointerMove(e) {
+    if (!dragging) return;
+    setValues(_objectSpread2(_objectSpread2({}, latest.current), {}, _defineProperty(_defineProperty({}, dragging, toValue(e.clientX)), "_active", dragging)));
   };
-  // Inputs change handlers (number boxes)
-  var handleMinInputChange = function handleMinInputChange(e) {
-    var raw = e.target.value;
-    var parsed = raw === "" ? "" : parseInt(raw, 10);
-    setMinInput(parsed);
+  var onPointerUp = function onPointerUp() {
+    if (!dragging) return;
+    setDragging(null);
+    handleFinal(latest.current);
   };
-  var handleMaxInputChange = function handleMaxInputChange(e) {
-    var raw = e.target.value;
-    var parsed = raw === "" ? "" : parseInt(raw, 10);
-    setMaxInput(parsed);
+  // Number inputs
+  var parseInput = function parseInput(raw) {
+    return raw === "" ? "" : parseInt(raw, 10);
   };
   var commitMinInput = function commitMinInput() {
-    var v = minInput === "" ? min : parseInt(minInput, 10);
-    v = clamp(v);
-    setValues({
+    var v = clamp(minInput === "" ? min : parseInt(minInput, 10));
+    handleFinal(setValues({
       min: v,
-      max: isControlled ? value.max : internalMax,
+      max: current.max,
       _active: "min"
-    });
-    handleFinal({
-      min: v,
-      max: isControlled ? value.max : internalMax
-    });
+    }));
   };
   var commitMaxInput = function commitMaxInput() {
-    var v = maxInput === "" ? max : parseInt(maxInput, 10);
-    v = clamp(v);
-    setValues({
-      min: isControlled ? value.min : internalMin,
+    var v = clamp(maxInput === "" ? max : parseInt(maxInput, 10));
+    handleFinal(setValues({
+      min: current.min,
       max: v,
       _active: "max"
-    });
-    handleFinal({
-      min: isControlled ? value.min : internalMin,
-      max: v
-    });
-  };
-  // Keyboard handling for inputs
-  var handleMinInputKey = function handleMinInputKey(e) {
-    if (e.key === "Enter") commitMinInput();
+    }));
   };
-  var handleMaxInputKey = function handleMaxInputKey(e) {
-    if (e.key === "Enter") commitMaxInput();
-  };
-  // Dragging helpers
-  var startDrag = function startDrag() {
-    return setIsDragging(true);
-  };
-  var stopDrag = function stopDrag() {
-    setIsDragging(false);
-    handleFinal({
-      min: isControlled ? value.min : internalMin,
-      max: isControlled ? value.max : internalMax
-    });
-  };
-  var minPercent = useMemo(function () {
-    return ((isControlled ? value.min : internalMin) - min) / (max - min) * 100;
-  }, [value, internalMin, min, max, isControlled]);
-  var maxPercent = useMemo(function () {
-    return ((isControlled ? value.max : internalMax) - min) / (max - min) * 100;
-  }, [value, internalMax, min, max, isControlled]);
-  var thumbSize = size === "sm" ? 16 : size === "lg" ? 28 : 22;
-  var inputWidth = size === "sm" ? "w-12" : size === "lg" ? "w-20" : "w-14";
-  var trackHeight = size === "sm" ? "h-1" : size === "lg" ? "h-2" : "h-1.5";
-  // Preset helper
   var applyPreset = function applyPreset(p) {
     if (!p || !p.value) return;
-    var _p$value = p.value,
-      pmin = _p$value.min,
-      pmax = _p$value.max;
-    setValues({
-      min: pmin,
-      max: pmax
-    });
-    handleFinal({
-      min: pmin,
-      max: pmax
-    });
+    handleFinal(setValues({
+      min: p.value.min,
+      max: p.value.max
+    }));
   };
+  var minPercent = useMemo(function () {
+    return toPercent(current.min, min, max);
+  }, [current.min, min, max]);
+  var maxPercent = useMemo(function () {
+    return toPercent(current.max, min, max);
+  }, [current.max, min, max]);
+  var inputClass = cn(INPUT_WIDTH[size] || INPUT_WIDTH.md, "rounded-control border border-line bg-surface py-2 text-center text-sm text-foreground", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "disabled:opacity-50");
+  var thumbs = [{
+    which: "min",
+    percent: minPercent,
+    valueNow: current.min,
+    vmin: min,
+    vmax: current.max
+  }, {
+    which: "max",
+    percent: maxPercent,
+    valueNow: current.max,
+    vmin: current.min,
+    vmax: max
+  }];
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn("bg-white rounded-lg p-4 w-full max-w-lg", className)
+    className: cn("bg-surface rounded-lg p-4 w-full max-w-lg", className)
   }, rest), {}, {
     children: [jsxs("div", {
       className: "flex items-center justify-between",
@@ -262,37 +258,48 @@ var PriceRangePicker = /*#__PURE__*/forwardRef(function PriceRangePicker(_ref, r
           className: "flex-1",
           children: jsx("input", {
             type: "number",
+            inputMode: "decimal",
             "aria-label": "Minimum",
             value: minInput,
-            onChange: handleMinInputChange,
+            onChange: function onChange(e) {
+              return setMinInput(parseInput(e.target.value));
+            },
             onBlur: commitMinInput,
-            onKeyDown: handleMinInputKey,
-            className: "".concat(inputWidth, " py-2 border border-gray-300 rounded-md text-center text-sm disabled:opacity-50"),
+            onKeyDown: function onKeyDown(e) {
+              return e.key === "Enter" && commitMinInput();
+            },
+            className: inputClass,
             min: min,
             max: max,
             disabled: disabled
           })
         }), jsx("div", {
-          className: "text-xs text-primary-500",
+          className: "text-xs text-muted",
+          "aria-hidden": "true",
           children: "\u2014"
         }), jsx("div", {
           className: "flex-1 flex justify-end",
           children: jsx("input", {
             type: "number",
+            inputMode: "decimal",
             "aria-label": "Maximum",
             value: maxInput,
-            onChange: handleMaxInputChange,
+            onChange: function onChange(e) {
+              return setMaxInput(parseInput(e.target.value));
+            },
             onBlur: commitMaxInput,
-            onKeyDown: handleMaxInputKey,
-            className: "".concat(inputWidth, " py-2 border border-gray-300 rounded-md text-center text-sm disabled:opacity-50"),
+            onKeyDown: function onKeyDown(e) {
+              return e.key === "Enter" && commitMaxInput();
+            },
+            className: inputClass,
             min: min,
             max: max,
             disabled: disabled
           })
         })]
       }) : jsxs("div", {
-        className: "text-sm",
-        children: [formatValue(isControlled ? value.min : internalMin), " - ", formatValue(isControlled ? value.max : internalMax)]
+        className: "text-sm text-foreground",
+        children: [formatValue(current.min), " - ", formatValue(current.max)]
       }), presets && presets.length > 0 && jsx("div", {
         className: "ml-4 flex gap-2",
         children: presets.map(function (p) {
@@ -301,73 +308,53 @@ var PriceRangePicker = /*#__PURE__*/forwardRef(function PriceRangePicker(_ref, r
             onClick: function onClick() {
               return applyPreset(p);
             },
-            className: "text-xs px-2 py-1 border rounded-md hover:bg-gray-50 disabled:opacity-50",
+            className: cn("text-xs px-2 py-1 border border-line rounded-md text-foreground hover:bg-background", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:opacity-50", TOUCH_TARGET),
             disabled: disabled,
             children: p.label
           }, p.id);
         })
       })]
     }), jsxs("div", {
-      className: "relative w-full mt-4 ".concat(trackHeight, " bg-gray-300 rounded-full"),
+      ref: trackRef,
+      "data-testid": "price-range-track",
+      className: cn("relative mt-6 flex h-6 w-full touch-none select-none items-center", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"),
+      onPointerDown: onPointerDown,
+      onPointerMove: onPointerMove,
+      onPointerUp: onPointerUp,
+      onPointerCancel: onPointerUp,
       children: [jsx("div", {
-        className: "absolute ".concat(trackHeight, " rounded-full ").concat(colorClass),
+        className: cn("w-full rounded-full bg-gray-200 dark:bg-gray-700", TRACK_HEIGHT[size] || TRACK_HEIGHT.md)
+      }), jsx("div", {
+        className: cn("absolute rounded-full", TRACK_HEIGHT[size] || TRACK_HEIGHT.md, colorClass),
         style: {
           left: "".concat(minPercent, "%"),
           right: "".concat(100 - maxPercent, "%")
         }
-      }), jsx("input", {
-        type: "range",
-        min: min,
-        max: max,
-        step: step,
-        value: isControlled ? value.min : internalMin,
-        onChange: handleMinRange,
-        onMouseDown: startDrag,
-        onMouseUp: stopDrag,
-        onTouchStart: startDrag,
-        onTouchEnd: stopDrag,
-        disabled: disabled,
-        "aria-label": "".concat(ariaLabel, " - min"),
-        className: "absolute inset-0 w-full appearance-none bg-transparent pointer-events-auto",
-        style: {
-          zIndex: 20
-        }
-      }), jsx("input", {
-        type: "range",
-        min: min,
-        max: max,
-        step: step,
-        value: isControlled ? value.max : internalMax,
-        onChange: handleMaxRange,
-        onMouseDown: startDrag,
-        onMouseUp: stopDrag,
-        onTouchStart: startDrag,
-        onTouchEnd: stopDrag,
-        disabled: disabled,
-        "aria-label": "".concat(ariaLabel, " - max"),
-        className: "absolute inset-0 w-full appearance-none bg-transparent pointer-events-auto",
-        style: {
-          zIndex: 10
-        }
-      }), showTooltips && isDragging && jsxs(Fragment, {
-        children: [jsx("div", {
-          className: "absolute -top-9 text-xs bg-white px-2 py-1 rounded-md shadow-sm border",
-          style: {
-            left: "".concat(minPercent, "%"),
-            transform: "translateX(-50%)"
-          },
-          children: formatValue(isControlled ? value.min : internalMin)
-        }), jsx("div", {
-          className: "absolute -top-9 text-xs bg-white px-2 py-1 rounded-md shadow-sm border",
+      }), thumbs.map(function (t, i) {
+        return jsx("div", {
+          ref: thumbRefs[i],
+          role: "slider",
+          tabIndex: disabled ? -1 : 0,
+          "aria-label": "".concat(ariaLabel, " - ").concat(t.which),
+          "aria-valuemin": t.vmin,
+          "aria-valuemax": t.vmax,
+          "aria-valuenow": t.valueNow,
+          "aria-valuetext": formatValue(t.valueNow),
+          "aria-orientation": "horizontal",
+          "aria-disabled": disabled || undefined,
+          onKeyDown: handleThumbKey(t.which),
           style: {
-            left: "".concat(maxPercent, "%"),
-            transform: "translateX(-50%)"
+            left: "".concat(t.percent, "%")
           },
-          children: formatValue(isControlled ? value.max : internalMax)
-        })]
+          className: cn("absolute -translate-x-1/2 rounded-full border-[3px] border-white shadow-md dark:border-gray-900", "transition-shadow motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
+          // 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-['']", THUMB_SIZE[size] || THUMB_SIZE.md, colorClass),
+          children: showTooltips && dragging === t.which && jsx("span", {
+            className: "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 text-foreground shadow-sm",
+            children: formatValue(t.valueNow)
+          })
+        }, t.which);
       })]
-    }), jsx("style", {
-      children: "\n        input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }\n        input[type=range]::-webkit-slider-runnable-track { height: 6px; background: transparent; }\n        input[type=range]::-moz-range-track { height: 6px; background: transparent; }\n\n        input[type=range]::-webkit-slider-thumb {\n          -webkit-appearance: none;\n          appearance: none;\n          height: ".concat(thumbSize, "px;\n          width: ").concat(thumbSize, "px;\n          border-radius: 9999px;\n          border: 3px solid #ffffff;\n          background: #ff6b6b;\n          box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n          cursor: pointer;\n          margin-top: -").concat(Math.round(thumbSize / 2 - 6), "px; /* vertical centering tweak */\n          position: relative;\n        }\n\n        input[type=range]::-moz-range-thumb {\n          height: ").concat(thumbSize, "px;\n          width: ").concat(thumbSize, "px;\n          border-radius: 9999px;\n          border: 3px solid #ffffff;\n          background: #ff6b6b;\n          box-shadow: 0 2px 8px rgba(0,0,0,0.12);\n          cursor: pointer;\n          position: relative;\n        }\n\n        /* Make the track invisible so our styled track shows through */\n        input[type=range]::-webkit-slider-runnable-track { background: transparent; }\n        input[type=range]::-moz-range-track { background: transparent; }\n\n      ")
     })]
   }));
 });

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

@@ -86,7 +86,7 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
   var trackHex = isHexColor(bgColor) ? bgColor : null;
   var textHex = isHexColor(valueColor) ? valueColor : fillHex ? readableTextColor(fillHex, undefined) : null;
   var fillClass = fillHex ? '' : 'bg-primary-600';
-  var trackClass = trackHex ? '' : 'bg-primary-100';
+  var trackClass = trackHex ? '' : 'bg-primary-100 dark:bg-primary-900/40';
   var textClass = textHex ? '' : 'text-white';
   // height class or inline style
   var heightClass = typeof size === 'number' ? '' : (_SIZE_MAP$size = SIZE_MAP[size]) !== null && _SIZE_MAP$size !== void 0 ? _SIZE_MAP$size : SIZE_MAP['md'];
@@ -101,26 +101,22 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
     backgroundSize: '20px 20px',
     overflow: 'hidden'
   } : {};
-  var animatedStyle = animated ? {
-    animation: 'stripeShift 1s linear infinite'
-  } : {};
-  var finalFillStyle = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+  // Stripe motion is a Tailwind animation (DTUI-48) — no per-instance <style> tag —
+  // and stops under prefers-reduced-motion, as does the width transition.
+  var animatedClass = animated ? 'animate-progress-stripes motion-reduce:animate-none' : '';
+  var finalFillStyle = _objectSpread2(_objectSpread2(_objectSpread2({
     width: "".concat(percent, "%")
   }, fillHex ? {
     backgroundColor: fillHex
   } : {}), textHex ? {
     color: textHex
-  } : {}), stripeStyle), animatedStyle), {}, {
-    transition: 'width 300ms ease-out'
-  });
+  } : {}), stripeStyle);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn("w-full", className),
     style: style
   }, rest), {}, {
-    children: [jsx("style", {
-      children: "@keyframes stripeShift { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }"
-    }), label ? jsx("div", {
+    children: [label ? jsx("div", {
       className: "mb-2 text-sm font-medium",
       children: label
     }) : null, jsx("div", {
@@ -134,7 +130,7 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
       "aria-valuemax": safeMax,
       "aria-valuenow": clamped,
       children: jsx("div", {
-        className: cn(radiusClass, heightClass, fillClass, textClass, 'flex items-center justify-center text-sm font-medium'),
+        className: cn(radiusClass, heightClass, fillClass, textClass, 'flex items-center justify-center text-sm font-medium', 'transition-[width] duration-300 ease-out motion-reduce:transition-none', animatedClass),
         style: finalFillStyle,
         children: showValue ? jsxs("div", {
           className: "px-2 whitespace-nowrap truncate",