@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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

@@ -1,53 +1,23 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef, useId, useCallback, useEffect, useLayoutEffect } from 'react';
+import React, { useRef, useId, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn.js';
-import { setRefs, computePosition } from '../../utils/position.js';
+import { setRefs } from '../../utils/position.js';
 import { useFocusTrap, getFocusable } from '../../hooks/useFocusTrap.js';
 import { useControllableState } from '../../hooks/useControllableState.js';
+import { useFloatingPosition } from '../../hooks/useFloatingPosition.js';
+import { usePresentation } from '../../hooks/usePresentation.js';
+import Sheet from '../feedback/Sheet.js';
 
-var _excluded = ["trigger", "children", "open", "defaultOpen", "onOpenChange", "placement", "offset", "title", "initialFocusRef", "disabled", "id", "className"];
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-function usePopoverPosition(open, anchorRef, panelRef, placement, offset) {
-  useIsomorphicLayoutEffect(function () {
-    if (!open) return undefined;
-    var update = function update() {
-      var _anchorRef$current;
-      var anchor = ((_anchorRef$current = anchorRef.current) === null || _anchorRef$current === void 0 ? void 0 : _anchorRef$current.firstElementChild) || anchorRef.current;
-      var panel = panelRef.current;
-      if (!anchor || !panel) return;
-      var size = {
-        width: panel.offsetWidth,
-        height: panel.offsetHeight
-      };
-      var _computePosition = computePosition(anchor.getBoundingClientRect(), size, {
-          placement: placement,
-          offset: offset
-        }),
-        top = _computePosition.top,
-        left = _computePosition.left,
-        side = _computePosition.side;
-      panel.style.top = "".concat(top, "px");
-      panel.style.left = "".concat(left, "px");
-      panel.setAttribute("data-side", side);
-    };
-    update();
-    window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
-    return function () {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
-    };
-  }, [open, placement, offset, anchorRef, panelRef]);
-}
+var _excluded = ["trigger", "children", "open", "defaultOpen", "onOpenChange", "placement", "offset", "title", "initialFocusRef", "disabled", "presentation", "id", "className", "style"];
 function useOutsideClose(open, anchorRef, panelRef, close) {
   useEffect(function () {
     if (!open) return undefined;
     var onDown = function onDown(e) {
-      var _panelRef$current, _anchorRef$current2;
-      if ((_panelRef$current = panelRef.current) !== null && _panelRef$current !== void 0 && _panelRef$current.contains(e.target) || (_anchorRef$current2 = anchorRef.current) !== null && _anchorRef$current2 !== void 0 && _anchorRef$current2.contains(e.target)) return;
+      var _panelRef$current, _anchorRef$current;
+      if ((_panelRef$current = panelRef.current) !== null && _panelRef$current !== void 0 && _panelRef$current.contains(e.target) || (_anchorRef$current = anchorRef.current) !== null && _anchorRef$current !== void 0 && _anchorRef$current.contains(e.target)) return;
       close();
     };
     document.addEventListener("mousedown", onDown);
@@ -74,8 +44,11 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
     initialFocusRef = _ref.initialFocusRef,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
     idProp = _ref.id,
     className = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var anchorRef = useRef(null);
   var panelRef = useRef(null);
@@ -90,6 +63,18 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     open = _useControllableState2[0],
     setOpen = _useControllableState2[1];
+  var asSheet = usePresentation(presentation) === "sheet";
+  var popoverOpen = open && !asSheet;
+  var _useFloatingPosition = useFloatingPosition({
+      placement: placement,
+      offset: offset,
+      open: popoverOpen
+    }),
+    refs = _useFloatingPosition.refs,
+    floatingStyles = _useFloatingPosition.floatingStyles,
+    resolvedPlacement = _useFloatingPosition.placement;
+  var setReference = refs.setReference,
+    setFloating = refs.setFloating;
   var close = useCallback(function () {
     return setOpen(false);
   }, [setOpen]);
@@ -97,10 +82,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
     var _getFocusable$;
     return (_getFocusable$ = getFocusable(anchorRef.current)[0]) === null || _getFocusable$ === void 0 ? void 0 : _getFocusable$.focus();
   };
-  usePopoverPosition(open, anchorRef, panelRef, placement, offset);
-  useOutsideClose(open, anchorRef, panelRef, close);
+  useOutsideClose(popoverOpen, anchorRef, panelRef, close);
   useFocusTrap(panelRef, {
-    active: open,
+    active: popoverOpen,
     trap: false,
     initialFocusRef: initialFocusRef,
     onEscape: function onEscape() {
@@ -142,21 +126,48 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, _ref2) {
   var content = typeof children === "function" ? children({
     close: close
   }) : children;
+  var anchor = jsx("span", {
+    ref: function ref(node) {
+      return setRefs(node, anchorRef, setReference);
+    },
+    className: "inline-flex",
+    children: triggerNode
+  });
+  // Phones (ADR 0001): the same content in a bottom sheet. Sheet owns the
+  // backdrop, the modal focus trap, Escape and focus return.
+  if (asSheet) {
+    return jsxs(Fragment, {
+      children: [anchor, jsx(Sheet, _objectSpread2(_objectSpread2({
+        ref: _ref2,
+        open: open,
+        onClose: close,
+        title: title,
+        initialFocus: initialFocusRef,
+        id: panelId,
+        className: className,
+        style: style,
+        "data-presentation": "sheet"
+      }, props), {}, {
+        children: jsx(Sheet.Body, {
+          children: content
+        })
+      }))]
+    });
+  }
   return jsxs(Fragment, {
-    children: [jsx("span", {
-      ref: anchorRef,
-      className: "inline-flex",
-      children: triggerNode
-    }), open && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", _objectSpread2(_objectSpread2({
+    children: [anchor, open && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", _objectSpread2(_objectSpread2({
       ref: function ref(node) {
-        return setRefs(node, panelRef, _ref2);
+        return setRefs(node, panelRef, _ref2, setFloating);
       },
       id: panelId,
       role: "dialog",
       "aria-labelledby": title ? titleId : undefined,
       tabIndex: -1,
       onKeyDown: handlePanelKeyDown,
-      className: cn("fixed left-0 top-0 z-50 min-w-[12rem] max-w-sm rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-900 shadow-lg focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", className)
+      "data-side": resolvedPlacement.split("-")[0],
+      "data-presentation": "popover",
+      className: cn("z-popover min-w-[12rem] max-w-sm rounded-lg border border-gray-200 bg-white p-4 text-sm text-gray-900 shadow-lg focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", className),
+      style: _objectSpread2(_objectSpread2({}, floatingStyles), style)
     }, props), {}, {
       children: [title && jsx("h2", {
         id: titleId,

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

@@ -4,50 +4,41 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["value", "max", "size", "showValue", "rounded", "color", "bgColor", "valueColor", "striped", "animated", "label", "ariaLabel", "className", "style"];
-// ProgressBar. Without colour props it uses the primary token classes, so it follows the brand (STUDIO-59).
-// color, bgColor and valueColor still accept HEX for backwards compatibility (deprecated).
+var _excluded = ["value", "max", "size", "showValue", "rounded", "variant", "striped", "animated", "label", "ariaLabel", "className", "style"];
+// ProgressBar. Colours come only from role tokens, so it follows the brand and
+// dark mode (STUDIO-59). The HEX props `color` / `bgColor` / `valueColor` were
+// removed in 2.0.0 (DTUI-65); pick a token tone with `variant` instead.
 var SIZE_MAP = {
   xs: "h-1",
   sm: "h-2",
   md: "h-3",
   lg: "h-5"
 };
-function isHexColor(str) {
-  return typeof str === "string" && /^#([0-9A-F]{3}){1,2}$/i.test(str);
-}
-function hexToRgb(hex) {
-  if (!isHexColor(hex)) return null;
-  var h = hex.replace('#', '');
-  if (h.length === 3) h = h.split('').map(function (ch) {
-    return ch + ch;
-  }).join('');
-  var bigint = parseInt(h, 16);
-  return {
-    r: bigint >> 16 & 255,
-    g: bigint >> 8 & 255,
-    b: bigint & 255
-  };
-}
-function luminance(hex) {
-  var rgb = hexToRgb(hex);
-  if (!rgb) return 0;
-  // relative luminance
-  var srgb = [rgb.r, rgb.g, rgb.b].map(function (v) {
-    var s = v / 255;
-    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
-  });
-  return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
-}
-function readableTextColor(bgHex, preferred) {
-  // If preferred is provided and valid, use it; otherwise pick black/white based on contrast
-  if (isHexColor(preferred)) return preferred;
-  var L = luminance(bgHex);
-  // WCAG suggests threshold around 0.179 for black/white contrast — we'll use 0.179
-  return L > 0.179 ? '#000000' : '#ffffff';
-}
+// Static class strings (no runtime-built Tailwind classes) per token tone.
+var VARIANT_MAP = {
+  primary: {
+    fill: "bg-primary-600",
+    track: "bg-primary-100 dark:bg-primary-900/40"
+  },
+  secondary: {
+    fill: "bg-secondary-600",
+    track: "bg-secondary-100 dark:bg-secondary-900/40"
+  },
+  success: {
+    fill: "bg-success-600",
+    track: "bg-success-100 dark:bg-success-900/40"
+  },
+  warning: {
+    fill: "bg-warning-600",
+    track: "bg-warning-100 dark:bg-warning-900/40"
+  },
+  destructive: {
+    fill: "bg-error-600",
+    track: "bg-error-100 dark:bg-error-900/40"
+  }
+};
 var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
-  var _SIZE_MAP$size;
+  var _VARIANT_MAP$variant, _SIZE_MAP$size;
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
     _ref$max = _ref.max,
@@ -58,12 +49,8 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
     showValue = _ref$showValue === void 0 ? false : _ref$showValue,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? true : _ref$rounded,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? undefined : _ref$color,
-    _ref$bgColor = _ref.bgColor,
-    bgColor = _ref$bgColor === void 0 ? undefined : _ref$bgColor,
-    _ref$valueColor = _ref.valueColor,
-    valueColor = _ref$valueColor === void 0 ? undefined : _ref$valueColor,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
     _ref$striped = _ref.striped,
     striped = _ref$striped === void 0 ? false : _ref$striped,
     _ref$animated = _ref.animated,
@@ -81,13 +68,7 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
   var safeValue = typeof value === 'number' ? value : 0;
   var clamped = Math.max(0, Math.min(safeValue, safeMax));
   var percent = safeMax === 0 ? 0 : clamped / safeMax * 100;
-  // A valid HEX override is applied inline; anything else falls back to the token classes.
-  var fillHex = isHexColor(color) ? color : null;
-  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 textClass = textHex ? '' : 'text-white';
+  var tone = (_VARIANT_MAP$variant = VARIANT_MAP[variant]) !== null && _VARIANT_MAP$variant !== void 0 ? _VARIANT_MAP$variant : VARIANT_MAP.primary;
   // 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'];
   var heightStyle = typeof size === 'number' ? {
@@ -101,46 +82,33 @@ 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({
     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", {
-      className: cn('w-full relative overflow-hidden', trackRadiusClass, trackClass),
-      style: _objectSpread2(_objectSpread2({}, trackHex ? {
-        backgroundColor: trackHex
-      } : {}), heightStyle),
+      className: cn('w-full relative overflow-hidden', trackRadiusClass, tone.track),
+      style: heightStyle,
       role: "progressbar",
       "aria-label": ariaLabel,
       "aria-valuemin": 0,
       "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, tone.fill, 'text-white', '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",
-          style: textHex ? {
-            color: textHex
-          } : undefined,
           children: [Math.round(percent), "%"]
         }) : null
       })

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

@@ -5,7 +5,7 @@ import { forwardRef, useState, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["count", "value", "defaultValue", "readOnly", "icon", "toggledIcon", "activeColor", "inactiveColor", "size", "onChange", "onClick", "text", "className", "id", "name"];
+var _excluded = ["count", "value", "defaultValue", "readOnly", "icon", "toggledIcon", "size", "onChange", "onClick", "text", "className", "id", "name"];
 function StarFilled(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 20 : _ref$size;
@@ -50,8 +50,6 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
     readOnly = _ref3$readOnly === void 0 ? false : _ref3$readOnly,
     icon = _ref3.icon,
     toggledIcon = _ref3.toggledIcon,
-    activeColor = _ref3.activeColor,
-    inactiveColor = _ref3.inactiveColor,
     _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? 20 : _ref3$size,
     onChange = _ref3.onChange,
@@ -71,6 +69,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 +104,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,18 +189,26 @@ 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) {
         var starNumber = i + 1;
         var filled = starNumber <= (displayValue || 0);
         var checked = starNumber === selectedValue;
-        var color = filled ? activeColor : inactiveColor;
-        // Token classes unless a colour override is passed, so brands and dark mode apply (STUDIO-59).
-        var colorClass = color ? "" : filled ? " text-warning-400" : " text-gray-200";
+        // Token classes only, so brands and dark mode apply (STUDIO-59). The inline
+        // activeColor / inactiveColor overrides were removed in 2.0.0 (DTUI-65).
+        var colorClass = filled ? "text-warning-400" : "text-gray-200";
         return jsx("button", {
           ref: function ref(el) {
             starRefs.current[i] = el;
@@ -153,7 +219,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);
@@ -166,10 +232,7 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
           },
           disabled: readOnly,
           title: "".concat(starNumber, " of ").concat(count),
-          className: cn("p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 rounded", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "transition-colors motion-reduce:transition-none", TOUCH_TARGET, colorClass.trim()),
-          style: color ? {
-            color: color
-          } : undefined,
+          className: cn("p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 rounded", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "transition-colors motion-reduce:transition-none", TOUCH_TARGET, colorClass),
           children: filled ? ActiveIcon : InactiveIcon
         }, i);
       })

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