@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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,9 +2,11 @@
 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';
+import { useHaptics } from '../../hooks/useHaptics.js';
 
-var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
+var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "color", "iconClass", "checkedClass", "wrapperProps", "haptics"];
 var SIZE_CLASSES = {
   sm: {
     box: "h-4 w-4",
@@ -22,52 +24,56 @@ 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.
+// Token presets only: the raw-palette presets (blue / indigo / purple) were
+// removed in 2.0.0 (DTUI-65).
 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"
-  },
-  blue: {
-    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
-    ring: "peer-focus:ring-blue-300"
-  },
-  indigo: {
-    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
-    ring: "peer-focus:ring-indigo-300"
-  },
-  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-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"
   }
 };
+// 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,
@@ -90,12 +96,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref.variant;
     var _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
-    borderColor = _ref.borderColor,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "primary" : _ref$color,
     iconClass = _ref.iconClass,
     checkedClass = _ref.checkedClass,
     wrapperProps = _ref.wrapperProps,
+    _ref$haptics = _ref.haptics,
+    haptics = _ref$haptics === void 0 ? false : _ref$haptics,
     props = _objectWithoutProperties(_ref, _excluded);
   var autoId = useId();
   var inputId = id || "".concat(autoId, "-checkbox");
@@ -116,45 +123,45 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
+  var _useHaptics = useHaptics({
+      enabled: haptics
+    }),
+    haptic = _useHaptics.trigger;
   var handleChange = useCallback(function (e) {
     if (!isControlled) setInternalChecked(e.target.checked);
+    haptic("selection");
     if (typeof onChange === "function") onChange(e);
-  }, [isControlled, onChange]);
+  }, [isControlled, onChange, haptic]);
   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" : ""),
-      style: disabled || !showBoxBorder || !borderColor ? {} : {
-        borderColor: borderColor
-      },
+      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 && "border-gray-300 dark:border-gray-600"),
       "aria-disabled": disabled,
       children: [jsx("input", _objectSpread2({
         id: inputId,
         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 +169,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

@@ -3,6 +3,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 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,
@@ -224,8 +233,10 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
       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 : {
@@ -234,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-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary-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)
               })]
             })]
@@ -282,7 +296,7 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             className: "w-10 h-10 p-0 border-none bg-transparent",
             "aria-label": "Native color input"
           }), jsxs("div", {
-            className: "flex-1",
+            className: "min-w-[8rem] flex-1",
             children: [jsx("span", {
               id: valueLabelId,
               className: "sr-only",
@@ -303,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",
+              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)
@@ -327,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 };