@dreamtree-org/twreact-ui 1.3.9 → 1.3.11

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

@@ -1,9 +1,10 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect, useId, useLayoutEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useLatestRef } from '../../hooks/useLatestRef.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
 
 var _excluded = ["items", "allowMultiple", "defaultOpenIndexes", "onChange", "className", "headerClassName", "contentClassName", "chevronPosition", "chevronIcon", "bordered", "rounded", "size", "transitionDuration"];
 /**
@@ -65,15 +66,45 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
   useEffect(function () {
     if (typeof onChangeRef.current === "function") onChangeRef.current(openIndexes);
   }, [openIndexes, onChangeRef]);
-  // Size panels from their measured content before paint. Done imperatively
-  // (not via the style prop) so render never reads refs / the DOM.
+  // Unique per instance so two accordions on one page never share ids.
+  var uid = useId();
+  var reducedMotion = useReducedMotion();
+  var duration = reducedMotion ? 0 : transitionDuration;
+  // Which panels were open on the previous layout pass (null = first mount).
+  var prevOpenRef = useRef(null);
+  // Size panels imperatively (not via the style prop) so render never reads
+  // refs / the DOM. An open panel settles on `max-height: none` so content
+  // that grows after opening is never clipped; closed panels are `inert` so
+  // Tab cannot land inside collapsed content.
   useLayoutEffect(function () {
+    var prevOpen = prevOpenRef.current;
+    var timers = [];
     panelRefs.current.forEach(function (panelEl, idx) {
       if (!panelEl) return;
       var open = openIndexes.includes(idx);
-      panelEl.style.maxHeight = open ? panelEl.scrollHeight + "px" : "0px";
+      var wasOpen = prevOpen ? prevOpen.includes(idx) : open;
+      if (open) panelEl.removeAttribute("inert");else panelEl.setAttribute("inert", "");
+      if (open === wasOpen || duration === 0) {
+        panelEl.style.maxHeight = open ? "none" : "0px";
+        return;
+      }
+      if (open) {
+        panelEl.style.maxHeight = panelEl.scrollHeight + "px";
+        timers.push(setTimeout(function () {
+          if (panelEl.getAttribute("inert") === null) panelEl.style.maxHeight = "none";
+        }, duration));
+      } else {
+        // Collapse from a concrete height; `none` -> 0 cannot be transitioned.
+        panelEl.style.maxHeight = panelEl.scrollHeight + "px";
+        void panelEl.offsetHeight; // force reflow so the transition starts
+        panelEl.style.maxHeight = "0px";
+      }
     });
-  }, [openIndexes, items]);
+    prevOpenRef.current = openIndexes;
+    return function () {
+      return timers.forEach(clearTimeout);
+    };
+  }, [openIndexes, items, duration]);
   var isOpen = function isOpen(index) {
     return openIndexes.includes(index);
   };
@@ -166,8 +197,8 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
       var _item$id;
       var id = (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index;
       var open = isOpen(index);
-      var headerId = "accordion-header-".concat(id);
-      var panelId = "accordion-panel-".concat(id);
+      var headerId = "".concat(uid, "accordion-header-").concat(id);
+      var panelId = "".concat(uid, "accordion-panel-").concat(id);
       var leftIconEl = renderLeftIcon(item, index);
       return jsxs("div", {
         className: "bg-white",
@@ -187,7 +218,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
               return handleHeaderKeyDown(e, index);
             },
             type: "button",
-            className: "w-full flex items-center ".concat(sizeMap[size].header, " justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 ").concat(headerClassName, " ").concat(item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+            className: "w-full flex items-center ".concat(sizeMap[size].header, " justify-between focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 ").concat(headerClassName, " ").concat(item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
             children: jsxs("div", {
               className: "flex items-center gap-3 w-full",
               children: [chevronPosition === "left" ? jsx("span", {
@@ -242,7 +273,7 @@ var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
             return panelRefs.current[index] = el;
           },
           style: {
-            transition: "max-height ".concat(transitionDuration, "ms ease"),
+            transition: duration ? "max-height ".concat(duration, "ms ease") : "none",
             overflow: "hidden"
           },
           className: "".concat(contentClassName, " ").concat(sizeMap[size].content),

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

@@ -1,11 +1,18 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET, PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 import { Loader2 } from 'lucide-react';
 
 var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
+// Square, icon-only sizes. Pair with an `aria-label` (there is no visible text).
+var ICON_SIZES = {
+  'icon-sm': 'h-8 w-8 p-0',
+  icon: 'h-10 w-10 p-0',
+  'icon-lg': 'h-12 w-12 p-0'
+};
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -26,26 +33,37 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var Component = as || (props.href !== undefined ? 'a' : 'button');
   var isNativeButton = Component === 'button';
   var isDisabled = disabled || loading;
-  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
-    // Variants
-    'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500': variant === 'primary',
-    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 hover:bg-gray-50 focus-visible:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus-visible:ring-offset-gray-900': variant === 'outline',
-    'bg-transparent text-primary-600 hover:bg-primary-50 focus-visible:ring-primary-500': variant === 'ghost',
-    'bg-error-600 text-white hover:bg-error-700 focus-visible:ring-error-500': variant === 'destructive',
-    'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500': variant === 'success',
-    'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500': variant === 'warning',
+  var isIconSize = Boolean(ICON_SIZES[size]);
+  var baseClasses = cn('relative inline-flex items-center justify-center rounded-md font-medium',
+  // Press shrink + an explicit transition for colours and the shrink;
+  // both are off under prefers-reduced-motion.
+  PRESS_FEEDBACK, 'transition duration-fast ease-standard motion-reduce:transition-none', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', 'disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', _defineProperty(_defineProperty({
+    // Variants (each with dark-mode colours).
+    'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500 dark:hover:bg-primary-500': variant === 'primary',
+    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500 dark:bg-secondary-800 dark:text-secondary-100 dark:hover:bg-secondary-700': variant === 'secondary',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus-visible:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800': variant === 'outline',
+    'bg-transparent text-primary-600 hover:bg-primary-50 focus-visible:ring-primary-500 dark:text-primary-300 dark:hover:bg-primary-900/40': variant === 'ghost',
+    'bg-error-600 text-white hover:bg-error-700 focus-visible:ring-error-500 dark:hover:bg-error-500': variant === 'destructive',
+    'bg-success-600 text-white hover:bg-success-700 focus-visible:ring-success-500 dark:hover:bg-success-500': variant === 'success',
+    'bg-warning-600 text-white hover:bg-warning-700 focus-visible:ring-warning-500 dark:hover:bg-warning-500': variant === 'warning',
     // Sizes — every value of the shared `Size` type gets a real height.
     'h-7 px-2 text-xs': size === 'xs',
     'h-8 px-3 text-xs': size === 'sm',
     'h-10 px-4 text-sm': size === 'md',
     'h-12 px-6 text-base': size === 'lg',
     'h-14 px-8 text-lg': size === 'xl',
-    'h-16 px-10 text-xl': size === '2xl',
-    // Full width
-    'w-full': fullWidth
-  }, className);
-  return jsxs(Component, _objectSpread2(_objectSpread2(_objectSpread2({
+    'h-16 px-10 text-xl': size === '2xl'
+  }, TOUCH_TARGET, size === 'xs' || size === 'sm' || size === 'icon-sm' || size === 'icon'), 'w-full', fullWidth), ICON_SIZES[size], className);
+  var content = jsxs(Fragment, {
+    children: [leftIcon && jsx("span", {
+      className: isIconSize ? undefined : 'mr-2',
+      children: leftIcon
+    }), children, rightIcon && jsx("span", {
+      className: isIconSize ? undefined : 'ml-2',
+      children: rightIcon
+    })]
+  });
+  return jsx(Component, _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref,
     className: baseClasses
   }, isNativeButton ? {
@@ -56,19 +74,25 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'aria-disabled': true,
     tabIndex: -1
   }), {}, {
+    "aria-busy": loading ? true : undefined,
     onClick: !isNativeButton && isDisabled ? function (e) {
       return e.preventDefault();
     } : onClick
   }, props), {}, {
-    children: [loading && jsx(Loader2, {
-      className: "mr-2 h-4 w-4 animate-spin"
-    }), !loading && leftIcon && jsx("span", {
-      className: "mr-2",
-      children: leftIcon
-    }), children, !loading && rightIcon && jsx("span", {
-      className: "ml-2",
-      children: rightIcon
-    })]
+    children: loading ? jsxs(Fragment, {
+      children: [jsx("span", {
+        className: "inline-flex items-center opacity-0",
+        "data-slot": "label",
+        children: content
+      }), jsx("span", {
+        className: "absolute inset-0 flex items-center justify-center",
+        "data-slot": "spinner",
+        "aria-hidden": "true",
+        children: jsx(Loader2, {
+          className: "h-4 w-4 animate-spin motion-reduce:animate-none"
+        })
+      })]
+    }) : content
   }));
 });
 Button.displayName = 'Button';

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

@@ -2,7 +2,8 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';
-import { Check } from 'lucide-react';
+import { Check, Minus } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
 
 var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
 var SIZE_CLASSES = {
@@ -22,52 +23,71 @@ var SIZE_CLASSES = {
     icon: "w-4 h-4"
   }
 };
+// `checked` paints the box from the native :checked state; `fill` is the same
+// paint applied from React state for the indeterminate (mixed) state.
+// blue / indigo / purple are raw-palette presets kept for compatibility
+// (deprecated; removed in 2.0 — use the token names).
 var COLOR_PRESETS = {
   primary: {
-    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white",
-    ring: "peer-focus:ring-primary-300"
+    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white dark:peer-checked:bg-primary-500 dark:peer-checked:border-primary-500",
+    fill: "bg-primary-600 border-primary-600 text-white dark:bg-primary-500 dark:border-primary-500",
+    ring: "peer-focus-visible:ring-primary-500"
   },
   secondary: {
-    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white",
-    ring: "peer-focus:ring-secondary-300"
+    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white dark:peer-checked:bg-secondary-500 dark:peer-checked:border-secondary-500",
+    fill: "bg-secondary-600 border-secondary-600 text-white dark:bg-secondary-500 dark:border-secondary-500",
+    ring: "peer-focus-visible:ring-secondary-500"
   },
   success: {
-    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
-    ring: "peer-focus:ring-success-300"
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white dark:peer-checked:bg-success-500 dark:peer-checked:border-success-500",
+    fill: "bg-success-600 border-success-600 text-white dark:bg-success-500 dark:border-success-500",
+    ring: "peer-focus-visible:ring-success-500"
   },
   green: {
-    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
-    ring: "peer-focus:ring-success-300"
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white dark:peer-checked:bg-success-500 dark:peer-checked:border-success-500",
+    fill: "bg-success-600 border-success-600 text-white dark:bg-success-500 dark:border-success-500",
+    ring: "peer-focus-visible:ring-success-500"
   },
   error: {
-    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
-    ring: "peer-focus:ring-error-300"
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white dark:peer-checked:bg-error-500 dark:peer-checked:border-error-500",
+    fill: "bg-error-600 border-error-600 text-white dark:bg-error-500 dark:border-error-500",
+    ring: "peer-focus-visible:ring-error-500"
   },
   danger: {
-    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
-    ring: "peer-focus:ring-error-300"
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white dark:peer-checked:bg-error-500 dark:peer-checked:border-error-500",
+    fill: "bg-error-600 border-error-600 text-white dark:bg-error-500 dark:border-error-500",
+    ring: "peer-focus-visible:ring-error-500"
   },
   red: {
-    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
-    ring: "peer-focus:ring-error-300"
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white dark:peer-checked:bg-error-500 dark:peer-checked:border-error-500",
+    fill: "bg-error-600 border-error-600 text-white dark:bg-error-500 dark:border-error-500",
+    ring: "peer-focus-visible:ring-error-500"
   },
   warning: {
-    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white",
-    ring: "peer-focus:ring-warning-300"
+    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white dark:peer-checked:bg-warning-500 dark:peer-checked:border-warning-500",
+    fill: "bg-warning-600 border-warning-600 text-white dark:bg-warning-500 dark:border-warning-500",
+    ring: "peer-focus-visible:ring-warning-500"
   },
   blue: {
-    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
-    ring: "peer-focus:ring-blue-300"
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white dark:peer-checked:bg-blue-500 dark:peer-checked:border-blue-500",
+    fill: "bg-blue-600 border-blue-600 text-white dark:bg-blue-500 dark:border-blue-500",
+    ring: "peer-focus-visible:ring-blue-500"
   },
   indigo: {
-    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
-    ring: "peer-focus:ring-indigo-300"
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-500",
+    fill: "bg-indigo-600 border-indigo-600 text-white dark:bg-indigo-500 dark:border-indigo-500",
+    ring: "peer-focus-visible:ring-indigo-500"
   },
   purple: {
-    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white",
-    ring: "peer-focus:ring-purple-300"
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white dark:peer-checked:bg-purple-500 dark:peer-checked:border-purple-500",
+    fill: "bg-purple-600 border-purple-600 text-white dark:bg-purple-500 dark:border-purple-500",
+    ring: "peer-focus-visible:ring-purple-500"
   }
 };
+// The invisible native input is the hit area: the box size with a mouse,
+// 44×44 centred on the box on coarse pointers.
+var HIT_AREA = "absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 [@media(pointer:coarse)]:h-11 [@media(pointer:coarse)]:w-11";
+var ICON_MOTION = "pointer-events-none absolute transition-[opacity,transform] duration-fast ease-standard motion-reduce:transition-none";
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -121,30 +141,28 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (typeof onChange === "function") onChange(e);
   }, [isControlled, onChange]);
   var sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.md;
-  var wrapperCls = "inline-flex items-center ".concat(className);
-  var boxOuterCls = "relative inline-flex items-center justify-center rounded-sm border transition-shadow ".concat(sizeClass.box, " ").concat(disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", " ");
-  // Icon classes driven by React state (reliable)
-  var iconBase = "pointer-events-none transform transition-all duration-150 ease-out";
-  var iconShown = "opacity-100 scale-100";
-  var iconHidden = "opacity-0 scale-75";
   var isPreset = COLOR_PRESETS[color];
-  var colorClasses = isPreset ? "".concat(isPreset.checked, " peer-focus:ring-2 peer-focus:ring-offset-1 ").concat(isPreset.ring) : "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-primary-300";
-  var customColorStyle = currentChecked && !isPreset && !checkedClass ? {
+  var isMixed = Boolean(indeterminate);
+  var isPainted = Boolean(currentChecked) || isMixed;
+  var customColorStyle = isPainted && !isPreset && !checkedClass ? {
     backgroundColor: color,
     borderColor: color,
     color: "#ffffff"
   } : {};
   // The outer box shows its own border unless a checked preset or custom colour paints it.
-  var showBoxBorder = !(currentChecked && (isPreset || customColorStyle.borderColor));
+  var showBoxBorder = !(isPainted && (isPreset || customColorStyle.borderColor));
+  var iconState = function iconState(shown) {
+    return shown ? "opacity-100 scale-100" : "opacity-0 scale-50";
+  };
   return jsxs("div", _objectSpread2(_objectSpread2({
-    className: wrapperCls
+    className: cn("inline-flex items-center", className)
   }, wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), {}, {
     children: [label && labelPosition === "left" && jsx("label", {
       htmlFor: inputId,
-      className: "".concat(sizeClass.label, " select-none mr-2"),
+      className: cn(sizeClass.label, "select-none mr-2 text-foreground"),
       children: label
     }), jsxs("div", {
-      className: "".concat(boxOuterCls).concat(!disabled && showBoxBorder && !borderColor ? " border-gray-300" : ""),
+      className: cn("relative inline-flex shrink-0 items-center justify-center rounded-sm border transition-shadow duration-fast motion-reduce:transition-none", sizeClass.box, disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", !disabled && showBoxBorder && !borderColor && "border-gray-300 dark:border-gray-600"),
       style: disabled || !showBoxBorder || !borderColor ? {} : {
         borderColor: borderColor
       },
@@ -154,7 +172,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         ref: inputRef,
         name: name,
         type: "checkbox",
-        className: "peer absolute inset-0 m-0 p-0 opacity-0 z-10",
+        className: cn("peer m-0 p-0 opacity-0 z-10", HIT_AREA, disabled ? "cursor-not-allowed" : "cursor-pointer"),
         // ensure we set checked only from the boolean (avoid undefined)
         checked: Boolean(currentChecked),
         onChange: handleChange,
@@ -162,23 +180,31 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         required: required,
         value: value,
         "aria-label": ariaLabel,
-        "aria-checked": Boolean(currentChecked)
-      }, props)), jsx("div", {
-        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "".concat(colorClasses, " ") + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
-        style: currentChecked && checkedClass ? {
+        "aria-checked": isMixed ? "mixed" : Boolean(currentChecked)
+      }, props)), jsxs("div", {
+        className: cn("pointer-events-none relative z-0 flex items-center justify-center rounded-sm w-full h-full", "transition-colors duration-fast ease-standard motion-reduce:transition-none",
+        // Keyboard focus ring drawn on the visual box (the input is invisible).
+        "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-1 dark:peer-focus-visible:ring-offset-gray-900", isPreset ? isPreset.ring : "peer-focus-visible:ring-primary-500", disabled ? "bg-gray-100 text-primary-400 dark:bg-gray-800" : "bg-surface", isPreset && isPreset.checked, isPreset && isMixed && !checkedClass && isPreset.fill, checkedClass),
+        style: isPainted && checkedClass ? {
           backgroundColor: "",
           borderColor: ""
         } : customColorStyle,
         "aria-hidden": "true",
-        children: jsx(Check, {
-          className: "".concat(sizeClass.icon, " ").concat(iconBase, " ").concat(currentChecked ? iconShown : iconHidden, " ").concat(iconClass || ""),
+        children: [jsx(Check, {
+          className: cn(sizeClass.icon, ICON_MOTION, iconState(currentChecked && !isMixed), iconClass),
           strokeWidth: 2.2,
-          "aria-hidden": "true"
-        })
+          "aria-hidden": "true",
+          "data-icon": "check"
+        }), jsx(Minus, {
+          className: cn(sizeClass.icon, ICON_MOTION, iconState(isMixed), iconClass),
+          strokeWidth: 2.6,
+          "aria-hidden": "true",
+          "data-icon": "indeterminate"
+        })]
       })]
     }), label && labelPosition === "right" && jsx("label", {
       htmlFor: inputId,
-      className: "".concat(sizeClass.label, " select-none ml-2"),
+      className: cn(sizeClass.label, "select-none ml-2 text-foreground"),
       children: label
     })]
   }));

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

@@ -1,8 +1,9 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo, useState } from 'react';
+import { forwardRef, useId, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
+import Slider from './Slider.js';
 
 var _excluded = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
 /**
@@ -121,6 +122,14 @@ function parseColor(input) {
   }
   return null;
 }
+// Same colour (alpha compared to 3 decimals, like the output string).
+function sameColor(x, y) {
+  var _x$a, _y$a;
+  if (!x || !y) return false;
+  var ax = +((_x$a = x.a) !== null && _x$a !== void 0 ? _x$a : 1).toFixed(3);
+  var ay = +((_y$a = y.a) !== null && _y$a !== void 0 ? _y$a : 1).toFixed(3);
+  return x.r === y.r && x.g === y.g && x.b === y.b && ax === ay;
+}
 function rgbaToString(_ref2) {
   var r = _ref2.r,
     g = _ref2.g,
@@ -132,7 +141,7 @@ function rgbaToString(_ref2) {
 }
 // ---------- Component ----------
 var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
-  var _internal$a, _internal$a2;
+  var _internal$a;
   var value = props.value,
     defaultValue = props.defaultValue,
     onChange = props.onChange,
@@ -150,6 +159,12 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
     label = _props$label === void 0 ? "Pick a color" : _props$label,
     id = props.id,
     rest = _objectWithoutProperties(props, _excluded);
+  // The visible <label> must point at a real control: the text value input
+  // takes the caller's `id` (or a generated one).
+  var autoId = useId();
+  var inputId = id !== null && id !== void 0 ? id : "".concat(autoId, "color-input");
+  var labelId = "".concat(inputId, "-label");
+  var valueLabelId = "".concat(inputId, "-value-label");
   var parsedControlled = useMemo(function () {
     return parseColor(value !== null && value !== void 0 ? value : null);
   }, [value]);
@@ -212,13 +227,16 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
     className: cn("inline-block", className)
   }, rest), {}, {
     children: [jsx("label", {
+      id: labelId,
       className: "block mb-2 ".concat(sizeMap.font),
-      htmlFor: id,
+      htmlFor: inputId,
       children: label
     }), jsxs("div", {
       className: "flex ".concat(sizeMap.gap, " items-start flex-col"),
-      children: [jsx("div", {
+      children: [swatches.length > 0 && jsx("div", {
         className: "flex flex-wrap ".concat(sizeMap.gap),
+        role: "group",
+        "aria-label": "Swatches",
         children: swatches.map(function (s, i) {
           var _parseColor;
           var c = (_parseColor = parseColor(s)) !== null && _parseColor !== void 0 ? _parseColor : {
@@ -227,38 +245,41 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             b: 0,
             a: 1
           };
+          var selected = sameColor(c, internal);
           return jsx("button", {
             type: "button",
             "aria-label": "Select ".concat(s),
+            "aria-pressed": selected,
             disabled: disabled,
             onClick: function onClick() {
               return pushChange(c);
             },
-            className: "rounded-md border border-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 ".concat(sizeMap.swatch, " overflow-hidden"),
+            className: cn("rounded-md border border-line overflow-hidden transition-shadow duration-fast motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900", "disabled:cursor-not-allowed disabled:opacity-50", selected && "ring-2 ring-offset-2 ring-primary-500 dark:ring-offset-gray-900", sizeMap.swatch),
             style: {
               background: "rgba(".concat(c.r, ",").concat(c.g, ",").concat(c.b, ",").concat(c.a, ")")
             },
-            title: s
+            title: s,
+            "data-selected": selected || undefined
           }, i);
         })
       }), jsxs("div", {
-        className: "flex-1 min-w-[220px]",
+        className: "w-full sm:flex-1 sm:min-w-[220px]",
         children: [jsxs("div", {
-          className: "flex items-center gap-3",
+          className: "flex flex-wrap items-center gap-3",
           children: [jsxs("div", {
             className: "flex items-center gap-2",
             children: [jsx("div", {
-              className: "rounded-md border border-gray-200 overflow-hidden w-12 h-12 flex items-center justify-center",
+              className: "rounded-md border border-line overflow-hidden w-12 h-12 flex items-center justify-center",
               style: {
                 background: "rgba(".concat(internal.r, ", ").concat(internal.g, ", ").concat(internal.b, ", ").concat(internal.a, ")")
               }
             }), jsxs("div", {
               className: "flex flex-col",
               children: [jsx("div", {
-                className: "text-xs text-primary-500",
+                className: "text-xs text-primary-500 dark:text-primary-300",
                 children: "Current"
               }), jsx("div", {
-                className: "font-mono text-sm",
+                className: "font-mono text-sm text-foreground",
                 children: rgbaToHex(internal, showAlpha)
               })]
             })]
@@ -274,9 +295,14 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             },
             className: "w-10 h-10 p-0 border-none bg-transparent",
             "aria-label": "Native color input"
-          }), jsx("div", {
-            className: "flex-1",
-            children: jsx("input", {
+          }), jsxs("div", {
+            className: "min-w-[8rem] flex-1",
+            children: [jsx("span", {
+              id: valueLabelId,
+              className: "sr-only",
+              children: "Color value"
+            }), jsx("input", {
+              id: inputId,
               type: "text",
               disabled: disabled,
               value: showAlpha ? rgbaToString(internal) : rgbaToHex(internal, showAlpha),
@@ -291,17 +317,21 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
                   }));
                 }
               },
-              className: "w-full rounded-md border border-gray-200 px-2 py-1 font-mono",
-              "aria-label": "Color value"
-            })
+              className: "w-full rounded-md border border-line bg-surface px-2 py-1 font-mono text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:opacity-50",
+              "aria-labelledby": "".concat(labelId, " ").concat(valueLabelId)
+            })]
           })]
         }), jsx("div", {
           className: "mt-3 space-y-2",
           children: showAlpha && jsx(Slider, {
-            label: "Alpha (".concat(Math.round(((_internal$a = internal.a) !== null && _internal$a !== void 0 ? _internal$a : 1) * 100), "%)"),
+            label: "Alpha",
+            showValue: true,
+            formatValue: function formatValue(v) {
+              return "".concat(v, "%");
+            },
             min: 0,
             max: 100,
-            value: Math.round(((_internal$a2 = internal.a) !== null && _internal$a2 !== void 0 ? _internal$a2 : 1) * 100),
+            value: Math.round(((_internal$a = internal.a) !== null && _internal$a !== void 0 ? _internal$a : 1) * 100),
             onChange: function onChange(v) {
               pushChange(_objectSpread2(_objectSpread2({}, internal), {}, {
                 a: clamp(v / 100, 0, 1)
@@ -315,34 +345,5 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
   }));
 });
 ColorPicker.displayName = "ColorPicker";
-function Slider(_ref4) {
-  var label = _ref4.label,
-    min = _ref4.min,
-    max = _ref4.max,
-    value = _ref4.value,
-    _onChange = _ref4.onChange,
-    disabled = _ref4.disabled;
-  return jsxs("div", {
-    className: "flex items-center gap-3",
-    children: [jsx("div", {
-      className: "w-36 text-sm text-primary-600",
-      children: label
-    }), jsx("input", {
-      type: "range",
-      min: min,
-      max: max,
-      value: value,
-      disabled: disabled,
-      onChange: function onChange(e) {
-        return _onChange(Number(e.target.value));
-      },
-      className: "w-full h-2 rounded-lg appearance-none bg-gray-200",
-      "aria-label": label
-    }), jsx("div", {
-      className: "w-14 text-right font-mono text-sm",
-      children: value
-    })]
-  });
-}
 
 export { ColorPicker as default };