@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

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

@@ -142,13 +142,22 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               onChange = _ref3$field.onChange,
               value = _ref3$field.value,
               ref = _ref3$field.ref;
-            return jsx(Input, _objectSpread2({
+            return jsx(Input, _objectSpread2(_objectSpread2({
               type: type,
               value: value || "",
               onChange: onChange,
               ref: ref,
               helperText: helperText
-            }, commonProps));
+            }, commonProps), {}, {
+              // Input's clear no longer fires a synthetic onChange (2.0), so a
+              // clearable field resets the form value here, then calls the
+              // field's own onClear.
+              onClear: function onClear() {
+                var _commonProps$onClear;
+                onChange("");
+                (_commonProps$onClear = commonProps.onClear) === null || _commonProps$onClear === void 0 || _commonProps$onClear.call(commonProps);
+              }
+            }));
           }
         }, name);
       case "select":

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

@@ -6,7 +6,7 @@ import { Search, EyeOff, Eye, X } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { TOUCH_TARGET } from '../../utils/touchTarget.js';
 
-var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue", "size", "floatingLabel", "otp"];
+var _excluded = ["id", "className", "type", "label", "placeholder", "error", "success", "helperText", "disabled", "required", "clearable", "leftIcon", "rightIcon", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue", "size", "floatingLabel", "otp"];
 // Field heights. `md` keeps its 40px desktop look and grows to the 44px touch
 // target on coarse pointers (same rule as Select); `lg` is 44px everywhere.
 var SIZE_CLASSES = {
@@ -63,9 +63,8 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     required = _props$required === void 0 ? false : _props$required,
     _props$clearable = props.clearable,
     clearable = _props$clearable === void 0 ? false : _props$clearable,
-    icon = props.icon,
-    _props$iconPosition = props.iconPosition,
-    iconPosition = _props$iconPosition === void 0 ? "left" : _props$iconPosition,
+    leftIcon = props.leftIcon,
+    rightIcon = props.rightIcon,
     onClear = props.onClear,
     _props$showCount = props.showCount,
     showCount = _props$showCount === void 0 ? false : _props$showCount,
@@ -125,27 +124,23 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     if (!isControlled) setUncontrolledLength(val.length);
     onChange === null || onChange === void 0 || onChange(e);
   };
+  // Clear (2.0, DTUI-65): no synthetic `onChange` event any more. Controlled
+  // fields clear their own `value` in `onClear`; uncontrolled fields clear the
+  // DOM value themselves.
   var handleClear = function handleClear(e) {
     var _localRef$current, _localRef$current$foc;
     e === null || e === void 0 || e.preventDefault();
-    if (isControlled) {
-      // controlled — notify parent
-      onChange === null || onChange === void 0 || onChange({
-        target: {
-          value: ""
-        }
-      });
-    } else if (localRef.current) {
+    if (!isControlled && localRef.current) {
       localRef.current.value = "";
-      // update local state
       setUncontrolledLength(0);
     }
     (_localRef$current = localRef.current) === null || _localRef$current === void 0 || (_localRef$current$foc = _localRef$current.focus) === null || _localRef$current$foc === void 0 || _localRef$current$foc.call(_localRef$current);
     onClear === null || onClear === void 0 || onClear();
   };
   // padding logic: left and right padding depend on icons/buttons visible
-  var leftHasIcon = Boolean(icon && iconPosition === "left") || isSearch;
-  var rightHasIcon = Boolean(icon && iconPosition === "right") || isPassword || clearable && currentLength > 0;
+  var leftHasIcon = Boolean(leftIcon) || isSearch;
+  var showRightIcon = Boolean(rightIcon) && !isPassword && !(clearable && currentLength > 0);
+  var rightHasIcon = showRightIcon || isPassword || clearable && currentLength > 0;
   var paddingClass = cn(leftHasIcon ? "pl-10" : "pl-3", rightHasIcon ? "pr-12" : "pr-3");
   var baseClasses = cn("w-full rounded-md border bg-surface text-foreground placeholder-gray-400 dark:placeholder-gray-500", "transition-colors duration-fast ease-standard motion-reduce:transition-none", "disabled:cursor-not-allowed disabled:opacity-50", isFloating ? FLOATING_SIZE_CLASSES[size] : SIZE_CLASSES[size],
   // The floated label replaces the placeholder until the field is focused.
@@ -171,7 +166,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
           className: "h-4 w-4 text-primary-400"
         }) : jsx("span", {
           className: "text-primary-400",
-          children: icon
+          children: leftIcon
         })
       }), jsx("input", _objectSpread2(_objectSpread2({
         id: inputId,
@@ -194,9 +189,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
         "data-floating-label": "",
         className: cn("pointer-events-none absolute top-1 origin-left text-xs font-medium text-muted", leftHasIcon ? "left-10" : "left-3", "transition-[top,transform,font-size,color] duration-fast ease-standard motion-reduce:transition-none", "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-sm", "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-primary-600 dark:peer-focus:text-primary-400"),
         children: labelContent
-      }), icon && iconPosition === "right" && !isPassword && !(clearable && currentLength > 0) && jsx("div", {
+      }), showRightIcon && jsx("div", {
         className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none text-primary-400",
-        children: icon
+        children: rightIcon
       }), isPassword && jsx("button", {
         type: "button",
         className: ADORNMENT_BUTTON,

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 dark:bg-primary-900/40';
-  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' ? {
@@ -104,13 +85,9 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
   // 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({
+  var finalFillStyle = _objectSpread2({
     width: "".concat(percent, "%")
-  }, fillHex ? {
-    backgroundColor: fillHex
-  } : {}), textHex ? {
-    color: textHex
-  } : {}), stripeStyle);
+  }, stripeStyle);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn("w-full", className),
@@ -120,23 +97,18 @@ var ProgressBar = /*#__PURE__*/forwardRef(function ProgressBar(_ref, ref) {
       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', 'transition-[width] duration-300 ease-out motion-reduce:transition-none', animatedClass),
+        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/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,
@@ -208,9 +206,9 @@ var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
         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;
@@ -234,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);
       })