@dreamtree-org/twreact-ui 1.3.10 → 1.3.11

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

@@ -19,6 +19,14 @@ var sizeToPx = function sizeToPx(size) {
       return 24;
   }
 };
+// Keyframes live in tailwind.config.js (DTUI-48) — no per-instance <style> tag.
+// `speed` reaches the animation through the --dt-loader-speed custom property.
+// Under prefers-reduced-motion the spinner slows right down (it still signals
+// "busy"); the bouncing dots and sliding bar stop.
+var SPIN = "animate-loader-spin motion-reduce:[animation-duration:3s]";
+// Default track colour, dark-safe. A `secondaryColor` prop overrides it inline.
+var TRACK_STROKE = "stroke-black/[0.08] dark:stroke-white/15";
+var TRACK_BG = "bg-black/[0.08] dark:bg-white/15";
 var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "md" : _ref$size,
@@ -28,8 +36,7 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
     thickness = _ref$thickness === void 0 ? 2.5 : _ref$thickness,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    _ref$secondaryColor = _ref.secondaryColor,
-    secondaryColor = _ref$secondaryColor === void 0 ? "rgba(0,0,0,0.08)" : _ref$secondaryColor,
+    secondaryColor = _ref.secondaryColor,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? "spinner" : _ref$variant,
     _ref$className = _ref.className,
@@ -45,32 +52,29 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var px = sizeToPx(size);
   var wrapperClass = cn(inline ? "inline-flex" : "flex", "items-center gap-2", className);
-  // animation attributes for SVG rotate
-  var animDur = "".concat(speed, "s");
-  var rotateFrom = reverse ? "360 12 12" : "0 12 12";
-  var rotateTo = reverse ? "0 12 12" : "360 12 12";
+  var rootStyle = _objectSpread2({
+    "--dt-loader-speed": "".concat(speed, "s")
+  }, style);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     role: "progressbar",
     "aria-label": ariaLabel,
     className: wrapperClass,
-    style: style
+    style: rootStyle
   }, rest), {}, {
-    children: [jsx("style", {
-      children: "\n        @keyframes loader-bounce {\n          0%, 80%, 100% { transform: translateY(0); opacity: 0.9 }\n          40% { transform: translateY(-6px); opacity: 1 }\n        }\n        @keyframes loader-bar {\n          0% { transform: translateX(-35%); }\n          100% { transform: translateX(135%); }\n        }\n      "
-    }), variant === "spinner" && jsxs("svg", {
+    children: [variant === "spinner" && jsxs("svg", {
       width: px,
       height: px,
       viewBox: "0 0 24 24",
       fill: "none",
-      style: {
-        display: "block"
-      },
+      "aria-hidden": "true",
+      className: cn("block", SPIN, reverse && "[animation-direction:reverse]"),
       xmlns: "http://www.w3.org/2000/svg",
       children: [jsx("circle", {
         cx: "12",
         cy: "12",
         r: 10 - thickness,
+        className: secondaryColor ? undefined : TRACK_STROKE,
         stroke: secondaryColor,
         strokeWidth: thickness
       }), jsx("path", {
@@ -79,60 +83,42 @@ var Loader = /*#__PURE__*/forwardRef(function Loader(_ref, ref) {
         strokeWidth: thickness,
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        strokeDasharray: "24",
-        children: jsx("animateTransform", {
-          attributeName: "transform",
-          attributeType: "XML",
-          type: "rotate",
-          from: rotateFrom,
-          to: rotateTo,
-          dur: animDur,
-          repeatCount: "indefinite"
-        })
+        strokeDasharray: "24"
       })]
     }), variant === "dots" && jsx("div", {
+      className: "inline-flex items-center",
       style: {
-        display: "inline-flex",
-        alignItems: "center",
         gap: Math.max(2, Math.round(px / 8))
       },
       children: [0, 1, 2].map(function (i) {
         return jsx("span", {
           "aria-hidden": true,
+          className: "inline-block rounded-full animate-loader-bounce motion-reduce:animate-none",
           style: {
             width: px / 4,
             height: px / 4,
-            borderRadius: "9999px",
-            display: "inline-block",
             background: color,
-            animation: "loader-bounce ".concat(speed, "s ").concat(i * (speed / 6), "s infinite ease-in-out")
+            animationDelay: "".concat(Math.round(i * speed * 1000 / 6) / 1000, "s")
           }
         }, i);
       })
     }), variant === "bar" && jsx("div", {
       "aria-hidden": true,
-      style: {
+      className: cn("relative overflow-hidden rounded-full", !secondaryColor && TRACK_BG),
+      style: _objectSpread2({
         width: Math.max(72, px * 2.5),
-        height: Math.max(6, px / 6),
-        background: secondaryColor,
-        overflow: "hidden",
-        borderRadius: 9999,
-        position: "relative"
-      },
+        height: Math.max(6, px / 6)
+      }, secondaryColor ? {
+        background: secondaryColor
+      } : {}),
       children: jsx("div", {
+        className: "absolute inset-y-0 left-0 w-[35%] animate-loader-bar motion-reduce:animate-none",
         style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: "35%",
-          background: "linear-gradient(90deg, ".concat(color, ", ").concat(secondaryColor, ")"),
-          transform: "translateX(-35%)",
-          animation: "loader-bar ".concat(speed, "s linear infinite")
+          background: "linear-gradient(90deg, ".concat(color, ", ").concat(secondaryColor || "transparent", ")")
         }
       })
     }), text && jsx("span", {
-      className: "text-sm text-primary-500",
+      className: "text-sm text-primary-500 dark:text-primary-400",
       children: text
     })]
   }));

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

@@ -1,10 +1,19 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, cloneElement } from 'react';
+import React, { forwardRef, useState, useId, cloneElement } from 'react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK, TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["value", "onChange", "inputProps", "icon", "iconProps", "iconPosition", "placeholder", "className"];
+var _excluded = ["value", "onChange", "inputProps", "icon", "iconProps", "iconPosition", "placeholder", "fullWidth", "className"];
+// User-facing copy for GeolocationPositionError codes (and "unsupported").
+var LOCATION_ERROR_MESSAGES = {
+  unsupported: "Location isn't available in this browser.",
+  1: "Location permission was denied. Allow it in your browser settings, or type the coordinates.",
+  2: "Your location couldn't be determined. Try again, or type the coordinates.",
+  3: "Finding your location took too long. Try again.",
+  "default": "Couldn't get your location. Try again, or type the coordinates."
+};
 function formatCoords(coords) {
   if (!coords) return "";
   var lat = Number(coords.lat);
@@ -40,6 +49,8 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
     iconPosition = _ref$iconPosition === void 0 ? "right" : _ref$iconPosition,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? "lat, lng" : _ref$placeholder,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(function () {
@@ -48,12 +59,23 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  // Geolocation request state, shown in the UI (DTUI-42).
+  var _useState3 = useState("idle"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    status = _useState4[0],
+    setStatus = _useState4[1]; // "idle" | "loading" | "error"
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errorMessage = _useState6[0],
+    setErrorMessage = _useState6[1];
+  var messageId = "location-picker-msg-".concat(useId());
+  var loading = status === "loading";
   // Re-sync the text when the external `value` changes (adjust-during-render
   // pattern, avoids a cascading effect render).
-  var _useState3 = useState(value),
-    _useState4 = _slicedToArray(_useState3, 2),
-    prevValue = _useState4[0],
-    setPrevValue = _useState4[1];
+  var _useState7 = useState(value),
+    _useState8 = _slicedToArray(_useState7, 2),
+    prevValue = _useState8[0],
+    setPrevValue = _useState8[1];
   if (value !== prevValue) {
     setPrevValue(value);
     setText(formatCoords(value));
@@ -77,15 +99,22 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       lng: Number(position.coords.longitude)
     };
     setText(formatCoords(coords));
+    setStatus("idle");
+    setErrorMessage("");
     if (typeof onChange === "function") onChange(coords);
   };
   var handleGeoError = function handleGeoError(err) {
     console.error("LocationPicker geolocation error:", err);
+    setStatus("error");
+    setErrorMessage(LOCATION_ERROR_MESSAGES[err === null || err === void 0 ? void 0 : err.code] || LOCATION_ERROR_MESSAGES["default"]);
   };
   var handleIconClick = function handleIconClick(e) {
     var _navigator;
+    if (loading) return;
     if (!((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.geolocation)) {
       console.error("LocationPicker: geolocation not supported in this browser");
+      setStatus("error");
+      setErrorMessage(LOCATION_ERROR_MESSAGES.unsupported);
       if (typeof iconProps.onClick === "function") {
         try {
           iconProps.onClick(e);
@@ -95,6 +124,8 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       }
       return;
     }
+    setStatus("loading");
+    setErrorMessage("");
     navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError, {
       enableHighAccuracy: true,
       timeout: 10000
@@ -127,33 +158,68 @@ var LocationPicker = /*#__PURE__*/forwardRef(function LocationPicker(_ref, ref)
       strokeWidth: "1.2"
     })]
   });
+  var Spinner = jsxs("svg", {
+    className: "w-4 h-4 animate-spin motion-reduce:animate-none",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    "aria-hidden": "true",
+    "data-testid": "location-picker-spinner",
+    children: [jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "9",
+      stroke: "currentColor",
+      strokeOpacity: "0.25",
+      strokeWidth: "2.5"
+    }), jsx("path", {
+      d: "M21 12a9 9 0 0 0-9-9",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    })]
+  });
   var iconButton = jsx("button", _objectSpread2(_objectSpread2({
     type: "button",
     onClick: handleIconClick
   }, iconProps), {}, {
     "aria-label": iconProps["aria-label"] || "Use my location",
-    className: "inline-flex items-center justify-center p-1 focus:outline-none ".concat(iconProps.className || ""),
-    children: icon ? /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon) : icon : DefaultIcon
+    "aria-busy": loading || undefined,
+    "aria-describedby": status !== "idle" ? messageId : iconProps["aria-describedby"],
+    className: cn("inline-flex items-center justify-center rounded-md p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", "transition-colors duration-fast motion-reduce:transition-none", loading && "cursor-wait", TOUCH_TARGET, PRESS_FEEDBACK, "transition-[color,background-color,border-color,transform]", iconProps.className),
+    children: loading ? Spinner : icon ? /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon) : icon : DefaultIcon
   }));
-  var inputPaddingClass = iconPosition === "right" ? "pr-10" : "pl-10";
-  return jsx("div", _objectSpread2(_objectSpread2({
-    className: cn("inline-flex items-center", className)
+  // The 44px touch target is wider than p-1, so leave room for it on coarse pointers.
+  var inputPaddingClass = iconPosition === "right" ? "pr-10 [@media(pointer:coarse)]:pr-12" : "pl-10 [@media(pointer:coarse)]:pl-12";
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    className: cn(fullWidth ? "flex w-full flex-col" : "inline-flex flex-col", className),
+    "data-status": status
   }, rest), {}, {
-    children: jsxs("div", {
-      className: "relative",
+    children: [jsxs("div", {
+      className: cn("relative", fullWidth && "w-full"),
       children: [jsx("input", _objectSpread2(_objectSpread2({
         ref: ref,
         type: "text",
-        placeholder: placeholder
+        placeholder: placeholder,
+        "aria-describedby": status !== "idle" ? messageId : undefined
       }, inputProps), {}, {
         value: text,
         onChange: handleInputChange,
-        className: cn("min-w-[200px] rounded-md border border-gray-300 bg-white py-2 px-3 text-sm placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", inputProps.className, inputPaddingClass)
+        className: cn("rounded-md border border-gray-300 bg-white py-2 px-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-primary-500", "dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", "[@media(pointer:coarse)]:text-base", fullWidth ? "w-full" : "min-w-[200px]", status === "error" && "border-error-500 dark:border-error-400", inputProps.className, inputPaddingClass)
       })), jsx("div", {
         className: cn("absolute inset-y-0 flex items-center", iconPosition === "right" ? "right-2" : "left-2"),
         children: iconButton
       })]
-    })
+    }), status === "loading" && jsx("p", {
+      id: messageId,
+      role: "status",
+      className: "mt-1 text-xs text-gray-500 dark:text-gray-400",
+      children: "Finding your location\u2026"
+    }), status === "error" && jsx("p", {
+      id: messageId,
+      role: "alert",
+      className: "mt-1 text-xs text-error-600 dark:text-error-400",
+      children: errorMessage
+    })]
   }));
 });
 LocationPicker.displayName = "LocationPicker";

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",

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

@@ -3,14 +3,9 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from '../../_vendor/prop-types/index.js';
+import { cn } from '../../utils/cn.js';
 
 var _excluded = ["id", "name", "value", "checked", "defaultChecked", "onChange", "disabled", "required", "label", "size", "labelPosition", "radioColor", "className", "ariaLabel"];
-var cn = function cn() {
-  for (var _len = arguments.length, vals = new Array(_len), _key = 0; _key < _len; _key++) {
-    vals[_key] = arguments[_key];
-  }
-  return vals.filter(Boolean).join(" ");
-};
 var SIZE_MAP = {
   sm: {
     outer: "h-4 w-4",
@@ -108,10 +103,13 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
   var showLabelLeft = label && labelPosition === "left";
   return jsxs("label", {
     htmlFor: inputId,
-    className: cn("relative inline-flex items-center select-none gap-2", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
+    className: cn(
+    // The invisible input covers the whole label, so the row is the hit
+    // area; on coarse pointers it is at least 44px tall.
+    "relative inline-flex items-center select-none gap-2 [@media(pointer:coarse)]:min-h-11", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", className),
     "aria-disabled": disabled ? "true" : undefined,
     children: [showLabelLeft && jsxs("span", {
-      className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400"),
+      className: cn(sizeClasses.label, "leading-none text-foreground", disabled && "text-primary-400"),
       children: [label, required ? jsx("span", {
         "aria-hidden": "true",
         children: " *"
@@ -132,7 +130,7 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
     }, props)), jsx("span", {
       "aria-hidden": true,
       "data-state": isChecked ? "checked" : "unchecked",
-      className: cn("inline-flex items-center justify-center rounded-full transition-all motion-reduce:transition-none",
+      className: cn("inline-flex shrink-0 items-center justify-center rounded-full transition-shadow duration-fast motion-reduce:transition-none",
       // Visible focus indicator: the native input is opacity-0, so the
       // ring is drawn on the visual circle when the input has focus.
       "peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 peer-focus-visible:ring-offset-2 dark:peer-focus-visible:ring-offset-gray-900"),
@@ -140,10 +138,10 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
         "--radio-accent": accentColor
       },
       children: jsx("span", {
-        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out motion-reduce:transition-none border-slate-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-slate-100 dark:bg-gray-800" : "bg-white dark:bg-gray-900", isChecked ? "shadow-inner" : ""),
+        className: cn("flex items-center justify-center rounded-full border transition-colors duration-fast ease-standard motion-reduce:transition-none", isChecked ? "border-[color:var(--radio-accent)]" : "border-gray-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-gray-100 dark:bg-gray-800" : "bg-surface", isChecked ? "shadow-inner" : ""),
         children: jsx("span", {
           "aria-hidden": true,
-          className: cn("rounded-full transform transition-all duration-200 ease-out motion-reduce:transition-none", sizeClasses.dot),
+          className: cn("rounded-full transform transition-[opacity,transform] duration-base ease-spring-out motion-reduce:transition-none", sizeClasses.dot),
           style: {
             backgroundColor: isChecked ? accentColor : "transparent",
             opacity: isChecked ? 1 : 0,
@@ -152,7 +150,7 @@ var Radio = /*#__PURE__*/forwardRef(function Radio(_ref, ref) {
         })
       })
     }), !showLabelLeft && label && jsxs("span", {
-      className: cn(sizeClasses.label, "leading-none", disabled && "text-primary-400"),
+      className: cn(sizeClasses.label, "leading-none text-foreground", disabled && "text-primary-400"),
       children: [label, required ? jsx("span", {
         "aria-hidden": "true",
         children: " *"

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

@@ -71,6 +71,9 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     hoverValue = _useState4[0],
     setHoverValue = _useState4[1];
   var starRefs = useRef([]);
+  // Touch drag (DTUI-42): { pointerId, moved, value } while a finger is down.
+  var drag = useRef(null);
+  var suppressClick = useRef(false);
   var isControlled = value != null;
   var selectedValue = isControlled ? value : internalValue;
   // Hover preview (pointer devices only) wins over the committed value.
@@ -103,6 +106,63 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     if (readOnly) return;
     setHoverValue(null);
   };
+  // Star under clientX: the last star whose left edge is at or before the finger,
+  // clamped to 1..count so sliding off either end keeps a valid rating.
+  var starAt = function starAt(clientX) {
+    var n = 1;
+    starRefs.current.slice(0, count).forEach(function (el, i) {
+      if (el && el.getBoundingClientRect().left <= clientX) n = i + 1;
+    });
+    return n;
+  };
+  var handleDragStart = function handleDragStart(e) {
+    var _e$currentTarget$setP, _e$currentTarget;
+    if (readOnly || e.pointerType !== "touch") return;
+    var start = starAt(e.clientX);
+    drag.current = {
+      pointerId: e.pointerId,
+      moved: false,
+      value: start,
+      startX: e.clientX
+    };
+    (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
+  };
+  var handleDragMove = function handleDragMove(e) {
+    var d = drag.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    if (!d.moved && Math.abs(e.clientX - d.startX) < 4) return;
+    d.moved = true;
+    d.value = starAt(e.clientX);
+    setHoverValue(d.value);
+  };
+  var handleDragEnd = function handleDragEnd(e) {
+    var _e$currentTarget$rele, _e$currentTarget2, _starRefs$current;
+    var d = drag.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    drag.current = null;
+    (_e$currentTarget$rele = (_e$currentTarget2 = e.currentTarget).releasePointerCapture) === null || _e$currentTarget$rele === void 0 || _e$currentTarget$rele.call(_e$currentTarget2, e.pointerId);
+    setHoverValue(null);
+    if (!d.moved) return; // a plain tap: the star's click commits it
+    // The compat click that follows a drag must not re-commit the start star.
+    suppressClick.current = true;
+    setTimeout(function () {
+      suppressClick.current = false;
+    }, 400);
+    commit(d.value);
+    (_starRefs$current = starRefs.current[d.value - 1]) === null || _starRefs$current === void 0 || _starRefs$current.focus();
+  };
+  var handleDragCancel = function handleDragCancel(e) {
+    if (!drag.current || drag.current.pointerId !== e.pointerId) return;
+    drag.current = null;
+    setHoverValue(null);
+  };
+  var handleStarClick = function handleStarClick(n) {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    commit(n);
+  };
   var handleKeyDown = function handleKeyDown(e, n) {
     if (readOnly) return;
     if (e.key === "Enter" || e.key === " ") {
@@ -131,9 +191,17 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
       role: "radiogroup",
       "aria-label": name || "Rating",
       "aria-readonly": readOnly ? "true" : undefined,
-      className: "inline-flex gap-1",
-      onPointerLeave: clearHover,
-      onPointerCancel: clearHover,
+      className: cn("inline-flex gap-1", !readOnly && "touch-pan-y select-none"),
+      onPointerLeave: function onPointerLeave(e) {
+        if (!drag.current) clearHover();
+      },
+      onPointerCancel: function onPointerCancel(e) {
+        handleDragCancel(e);
+        clearHover();
+      },
+      onPointerDown: handleDragStart,
+      onPointerMove: handleDragMove,
+      onPointerUp: handleDragEnd,
       children: Array.from({
         length: count
       }, function (_, i) {
@@ -153,7 +221,7 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
           "aria-label": "".concat(starNumber, " star").concat(starNumber > 1 ? "s" : ""),
           tabIndex: !readOnly && starNumber === tabStop ? 0 : -1,
           onClick: function onClick() {
-            return commit(starNumber);
+            return handleStarClick(starNumber);
           },
           onKeyDown: function onKeyDown(e) {
             return handleKeyDown(e, starNumber);

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

@@ -3,7 +3,7 @@ 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';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
 var _excluded = ["label", "avatarSrc", "avatarAlt", "initials", "size", "onRemove", "onClick", "className", "closeClass", "ariaLabel", "onKeyDown", "avatarPosition", "avatarClassname", "initialClassname"];
 var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
@@ -82,7 +82,7 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
   var gapClass = showAvatar ? s.gapWithAvatar : s.gapNoAvatar;
   var AvatarNode = showAvatar && jsx(Fragment, {
     children: avatarSrc ? jsx("div", {
-      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 flex items-center justify-center ".concat(s.avatar, " ").concat(avatarClassname),
+      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 dark:bg-gray-600 dark:text-gray-100 flex items-center justify-center ".concat(s.avatar, " ").concat(avatarClassname),
       "aria-hidden": avatarSrc ? undefined : "true",
       children: jsx("img", {
         src: avatarSrc,
@@ -90,14 +90,14 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
         className: "w-full h-full object-cover"
       })
     }) : jsx("div", {
-      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 flex items-center justify-center ".concat(s.avatar, " ").concat(initialClassname),
+      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 dark:bg-gray-600 dark:text-gray-100 flex items-center justify-center ".concat(s.avatar, " ").concat(initialClassname),
       "aria-hidden": avatarSrc ? undefined : "true",
       children: initials
     })
   });
   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, clickable && "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1", className),
+    className: cn("inline-flex items-center rounded-full bg-gray-100 text-primary-800 dark:bg-gray-800 dark:text-gray-100", paddingClass, gapClass, s.text, clickable && ["cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 dark:focus-visible:ring-offset-gray-900", PRESS_FEEDBACK], className),
     role: clickable ? "button" : "group",
     tabIndex: clickable ? 0 : undefined,
     "aria-label": ariaLabel,
@@ -113,7 +113,7 @@ var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
       type: "button",
       "aria-label": removeLabel,
       onClick: handleRemove,
-      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),
+      className: cn("inline-flex items-center justify-center rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-fast motion-reduce:transition-none 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",

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

@@ -1,6 +1,6 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 
@@ -21,6 +21,11 @@ var _excluded = ["count", "circle", "height", "width", "rounded", "animated", "a
  * - className (string) - extra wrapper classes
  * - children - optional children to render when active === false
  */
+var BONE_CLASSES = "relative inline-block overflow-hidden bg-gray-200 dark:bg-gray-700";
+// Shimmer (DTUI-48): a Tailwind animation, no per-instance <style> tag. The
+// highlight is a soft white in light mode and a faint one in dark mode (no white
+// streak); under prefers-reduced-motion the bone is static and plain.
+var SHIMMER_CLASSES = ["bg-gradient-to-r from-transparent via-white/50 to-transparent dark:via-white/10", "bg-[length:200%_100%] bg-no-repeat animate-shimmer", "motion-reduce:animate-none motion-reduce:bg-none"].join(" ");
 function toPxOrUnit(value) {
   if (typeof value === "number") return "".concat(value, "px");
   if (typeof value === "string") return value;
@@ -61,8 +66,7 @@ var Skeleton = /*#__PURE__*/forwardRef(function Skeleton(_ref, ref) {
   var items = Array.from({
     length: Math.max(1, Math.floor(count))
   });
-  var shimmerOverlay = animated ? "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%)" : "none";
-  return jsxs("div", _objectSpread2(_objectSpread2({
+  return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn("skeleton-wrapper", className),
     role: "status",
@@ -75,24 +79,19 @@ var Skeleton = /*#__PURE__*/forwardRef(function Skeleton(_ref, ref) {
       alignItems: "center"
     }, style)
   }, rest), {}, {
-    children: [jsx("style", {
-      children: "\n        @keyframes skeleton-shimmer {\n          0% { background-position: -150% 0; }\n          100% { background-position: 150% 0; }\n        }\n        .skeleton-wrapper .skeleton-item {\n          display: inline-block;\n          position: relative;\n          overflow: hidden;\n        }\n      "
-    }), items.map(function (_, i) {
+    children: items.map(function (_, i) {
       return jsx("div", {
         // Token classes rather than an inline hex, so brands and dark mode apply (STUDIO-59).
-        className: "skeleton-item bg-gray-200 dark:bg-gray-700",
+        // Plain join, not cn(): tailwind-merge would treat the gradient / bg-size
+        // utilities as conflicts of the bg-gray-200 colour and drop it.
+        className: ["skeleton-item", BONE_CLASSES, animated && SHIMMER_CLASSES].filter(Boolean).join(" "),
         style: {
           height: resolvedHeight,
           width: resolvedWidth,
-          borderRadius: borderRadius,
-          backgroundImage: shimmerOverlay,
-          backgroundSize: animated ? "200% 100%" : undefined,
-          backgroundRepeat: "no-repeat",
-          animation: animated ? "skeleton-shimmer 1.2s linear infinite" : undefined,
-          willChange: animated ? "background-position" : undefined
+          borderRadius: borderRadius
         }
       }, i);
-    })]
+    })
   }));
 });
 Skeleton.displayName = "Skeleton";