@dreamtree-org/twreact-ui 1.3.8 → 1.3.10

package/dist/esm/components/charts/DonutChart.js

@@ -4,7 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, PieChart, Tooltip, Pie } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
 
 var _excluded = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 var DonutChart = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

package/dist/esm/components/charts/Sparkline.js

@@ -4,7 +4,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { ResponsiveContainer, AreaChart, LineChart, YAxis, Tooltip, Area, Line } from 'recharts';
 import { ChartFrame, ChartTooltipContent } from './ChartFrame.js';
-import { useChartTheme, useReducedMotion, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useChartTheme, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
 
 var _excluded = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
 /** A word-sized trend line: no axes, grid or legend — just the shape of the data. */

package/dist/esm/components/charts/chartTheme.js

@@ -1,7 +1,6 @@
 'use client';
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { useSyncExternalStore, useId } from 'react';
-import { prefersReducedMotion } from '../../utils/position.js';
 
 var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
 var DEFAULT_CHART_COLORS = ["primary", "success", "warning", "error", "info", "secondary", "gray"];
@@ -90,26 +89,6 @@ function useChartTheme(categories, colors) {
     series: seriesColors(categories, colors, live)
   };
 }
-function subscribeReducedMotion(onChange) {
-  var _query$addEventListen;
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return function () {};
-  var query = window.matchMedia("(prefers-reduced-motion: reduce)");
-  (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", onChange);
-  return function () {
-    var _query$removeEventLis;
-    return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", onChange);
-  };
-}
-var serverReducedMotion = function serverReducedMotion() {
-  return false;
-};
-/**
- * `true` while the user asks the OS for reduced motion; follows changes live.
- * `false` on the server and while hydrating, so the first render matches.
- */
-function useReducedMotion() {
-  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
-}
 var defaultValueFormatter = function defaultValueFormatter(value) {
   return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
 };
@@ -123,4 +102,4 @@ function useChartId() {
   return "dt-chart-".concat(useId().replace(/[^A-Za-z0-9_-]/g, ""));
 }
 
-export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme, useReducedMotion };
+export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme };

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

@@ -26,15 +26,15 @@ 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:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:pointer-events-none', {
+  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:ring-primary-500': variant === 'primary',
-    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
-    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-800 dark:focus:ring-offset-gray-900': variant === 'outline',
-    'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
-    'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
-    'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
-    'bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500': variant === 'warning',
+    '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',
     // 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',

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

@@ -1,7 +1,7 @@
 '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';
 
 var _excluded = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
@@ -150,6 +150,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,8 +218,9 @@ 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"),
@@ -234,7 +241,7 @@ var ColorPicker = /*#__PURE__*/forwardRef(function ColorPicker(props, ref) {
             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: "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"),
             style: {
               background: "rgba(".concat(c.r, ",").concat(c.g, ",").concat(c.b, ",").concat(c.a, ")")
             },
@@ -274,9 +281,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", {
+          }), jsxs("div", {
             className: "flex-1",
-            children: jsx("input", {
+            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),
@@ -292,8 +304,8 @@ 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"
-            })
+              "aria-labelledby": "".concat(labelId, " ").concat(valueLabelId)
+            })]
           })]
         }), jsx("div", {
           className: "mt-3 space-y-2",

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

@@ -3,9 +3,10 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId, useMemo, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, subMonths, format, addMonths, isSameDay, isSameMonth, isToday, isBefore, isAfter } from 'date-fns';
+import { parseISO, startOfMonth, startOfWeek, endOfMonth, endOfWeek, eachDayOfInterval, startOfDay, isSameDay, subMonths, format, addMonths, isSameMonth, isToday, isBefore, isAfter, addDays } from 'date-fns';
 import { cn } from '../../utils/cn.js';
-import { ChevronLeft, ChevronRight, X, Calendar } from 'lucide-react';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import { ChevronLeft, ChevronRight, Calendar, X } from 'lucide-react';
 
 var _excluded = ["value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "minDate", "maxDate", "className", "weekStartsOn", "portal", "displayFormat", "locale", "showClear", "closeOnSelect"];
 var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
@@ -64,19 +65,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     setCurrentMonth = _useState4[1];
   var datePickerRef = useRef(null);
   var popupRef = useRef(null);
+  var triggerRef = useRef(null);
   var gridButtonRefs = useRef([]);
-  var _useState5 = useState({}),
+  // Roving tabindex: the day the user moved to with the keyboard (or focused).
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    popupStyle = _useState6[0],
-    setPopupStyle = _useState6[1];
+    focusedDate = _useState6[0],
+    setFocusedDate = _useState6[1];
+  // Set when a keyboard action / open should move DOM focus to the active day.
+  var pendingFocusRef = useRef(false);
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popupStyle = _useState8[0],
+    setPopupStyle = _useState8[1];
   useImperativeHandle(forwardedRef, function () {
     return datePickerRef.current;
   }, []);
   // Keep currentMonth in sync with external value changes
-  var _useState7 = useState(selected),
-    _useState8 = _slicedToArray(_useState7, 2),
-    prevSelected = _useState8[0],
-    setPrevSelected = _useState8[1];
+  var _useState9 = useState(selected),
+    _useState0 = _slicedToArray(_useState9, 2),
+    prevSelected = _useState0[0],
+    setPrevSelected = _useState0[1];
   if (selected !== prevSelected) {
     setPrevSelected(selected);
     if (selected) setCurrentMonth(selected);
@@ -98,7 +107,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     var handleKey = function handleKey(e) {
       if (!isOpen) return;
       if (e.key === "Escape") {
+        var _triggerRef$current;
+        var hadFocusInside = popupRef.current && popupRef.current.contains(document.activeElement);
         setIsOpen(false);
+        if (hadFocusInside) (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.focus();
       }
     };
     document.addEventListener("keydown", handleKey);
@@ -139,62 +151,81 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var handleDateSelect = function handleDateSelect(date) {
     if (isDateDisabled(date)) return;
     onChange === null || onChange === void 0 || onChange(date);
-    if (closeOnSelect) setIsOpen(false);
+    if (closeOnSelect) {
+      var _triggerRef$current2;
+      setIsOpen(false);
+      // The focused day unmounts with the popup; keep focus on the field.
+      (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 || _triggerRef$current2.focus();
+    }
   };
-  // keyboard navigation inside the calendar grid
-  var focusDayAtIndex = function focusDayAtIndex(index) {
-    var btn = gridButtonRefs.current[index];
+  // Roving tabindex target: exactly one enabled day in the grid is tabbable.
+  // Priority: keyboard-focused day ?? selected ?? today (if shown & enabled)
+  // ?? first enabled day of the visible month ?? first enabled grid day.
+  var isUsable = function isUsable(d) {
+    return d && isSameMonth(d, currentMonth) && !isDateDisabled(d);
+  };
+  var activeDate = null;
+  if (isUsable(focusedDate)) activeDate = focusedDate;else if (isUsable(selected)) activeDate = selected;else if (isUsable(new Date())) activeDate = new Date();else activeDate = days.find(function (d) {
+    return isUsable(d);
+  }) || days.find(function (d) {
+    return !isDateDisabled(d);
+  }) || null;
+  var activeIndex = activeDate ? days.findIndex(function (d) {
+    return isSameDay(d, activeDate);
+  }) : -1;
+  // Move DOM focus to the active day after a keyboard action / open.
+  useEffect(function () {
+    if (!isOpen || !pendingFocusRef.current) return;
+    pendingFocusRef.current = false;
+    var btn = gridButtonRefs.current[activeIndex];
     if (btn && typeof btn.focus === "function") btn.focus();
+  });
+  var moveFocusTo = function moveFocusTo(date) {
+    if (!date || isDateDisabled(date)) return;
+    if (!isSameMonth(date, currentMonth)) setCurrentMonth(date);
+    setFocusedDate(date);
+    pendingFocusRef.current = true;
   };
   var handleGridKeyDown = function handleGridKeyDown(e, idx) {
+    var day = days[idx];
     if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"].includes(e.key)) {
       e.preventDefault();
     }
     switch (e.key) {
       case "ArrowLeft":
-        focusDayAtIndex(Math.max(0, idx - 1));
+        moveFocusTo(addDays(day, -1));
         break;
       case "ArrowRight":
-        focusDayAtIndex(Math.min(days.length - 1, idx + 1));
+        moveFocusTo(addDays(day, 1));
         break;
       case "ArrowUp":
-        focusDayAtIndex(Math.max(0, idx - 7));
+        moveFocusTo(addDays(day, -7));
         break;
       case "ArrowDown":
-        focusDayAtIndex(Math.min(days.length - 1, idx + 7));
+        moveFocusTo(addDays(day, 7));
         break;
       case "PageUp":
-        setCurrentMonth(function (m) {
-          return subMonths(m, 1);
-        });
+        moveFocusTo(subMonths(day, 1));
         break;
       case "PageDown":
-        setCurrentMonth(function (m) {
-          return addMonths(m, 1);
-        });
+        moveFocusTo(addMonths(day, 1));
         break;
       case "Home":
-        focusDayAtIndex(Math.floor(idx / 7) * 7);
+        moveFocusTo(days[Math.floor(idx / 7) * 7]);
         break;
       case "End":
-        focusDayAtIndex(Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6));
+        moveFocusTo(days[Math.min(days.length - 1, Math.floor(idx / 7) * 7 + 6)]);
         break;
       case "Enter":
-        if (!isDateDisabled(days[idx])) handleDateSelect(days[idx]);
+        if (!isDateDisabled(day)) handleDateSelect(day);
         break;
     }
   };
   var openAndFocusSelected = function openAndFocusSelected() {
+    setFocusedDate(null);
     setIsOpen(true);
-    // focus after opening on next tick
-    setTimeout(function () {
-      var idx = selected ? days.findIndex(function (d) {
-        return isSameDay(d, selected);
-      }) : days.findIndex(function (d) {
-        return isToday(d);
-      });
-      if (idx >= 0) focusDayAtIndex(idx);
-    }, 0);
+    // the active-day effect moves focus once the grid has rendered
+    pendingFocusRef.current = true;
   };
   // compute popup position so it's aware of viewport edges (top/bottom/left/right)
   var computePopupPosition = function computePopupPosition() {
@@ -266,7 +297,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     className: "mb-4 flex items-center justify-between",
     children: [jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
       onClick: function onClick() {
         return setCurrentMonth(subMonths(currentMonth, 1));
       },
@@ -279,7 +310,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       children: format(currentMonth, "MMMM yyyy")
     }), jsx("button", {
       type: "button",
-      className: "rounded-md p-1 hover:bg-gray-100",
+      className: cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET),
       onClick: function onClick() {
         return setCurrentMonth(addMonths(currentMonth, 1));
       },
@@ -321,12 +352,15 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             return gridButtonRefs.current[idx] = el;
           },
           role: "gridcell",
-          tabIndex: isSelected ? 0 : -1,
-          "aria-selected": isSelected,
+          tabIndex: idx === activeIndex ? 0 : -1,
+          "aria-selected": Boolean(isSelected),
           onKeyDown: function onKeyDown(e) {
             return handleGridKeyDown(e, idx);
           },
-          className: cn("h-8 w-8 rounded-md text-sm transition-colors focus:outline-2 focus:outline-offset-1", {
+          onFocus: function onFocus() {
+            if (!focusedDate || !isSameDay(focusedDate, day)) setFocusedDate(day);
+          },
+          className: cn("h-8 w-8 rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", {
             "text-primary-400": !isCurrentMonth,
             "bg-primary-600 text-white": isSelected,
             "bg-primary-100 text-primary-600": isTodayDate && !isSelected,
@@ -382,6 +416,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       ref: datePickerRef,
       className: "relative",
       children: [jsxs("button", _objectSpread2(_objectSpread2({
+        ref: triggerRef,
         type: "button",
         id: fieldId,
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
@@ -389,7 +424,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected
+          "text-primary-500": !selected,
+          // leave room for the sibling clear button overlaid on the field
+          "pr-16": showClear && selected
         }, className),
         onClick: function onClick() {
           return isOpen ? setIsOpen(false) : openAndFocusSelected();
@@ -402,24 +439,26 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "truncate",
           id: valueId,
           children: formatDisplayValue()
-        }), jsxs("div", {
-          className: "flex items-center gap-2",
-          children: [showClear && selected && jsx("div", {
-            type: "button",
-            onClick: function onClick(e) {
-              e.stopPropagation();
-              onChange === null || onChange === void 0 || onChange(null);
-            },
-            "aria-label": "Clear date",
-            className: "p-1",
-            children: jsx(X, {
-              className: "h-4 w-4 text-primary-400"
-            })
-          }), jsx(Calendar, {
-            className: "h-4 w-4 text-primary-400"
-          })]
+        }), jsx(Calendar, {
+          className: "h-4 w-4 shrink-0 text-primary-400",
+          "aria-hidden": "true"
         })]
-      })), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
+      })), showClear && selected && jsx("button", {
+        type: "button",
+        "aria-label": "Clear date",
+        disabled: disabled,
+        onClick: function onClick() {
+          var _triggerRef$current3;
+          onChange === null || onChange === void 0 || onChange(null);
+          // this button unmounts once the value clears
+          (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 || _triggerRef$current3.focus();
+        },
+        className: "absolute right-9 top-1/2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-primary-400 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50",
+        children: jsx(X, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      }), isOpen && (portal ? /*#__PURE__*/ReactDOM.createPortal(calendarPopup, document.body) : calendarPopup)]
     }), error ? jsx("p", {
       id: errorId,
       className: "mt-1 text-sm text-error-500",

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

@@ -40,6 +40,19 @@ var FieldMessage = function FieldMessage(_ref) {
   }
   return null;
 };
+// Static class map for field groups (DTUI-19). A dynamic `grid-cols-${n}`
+// string is invisible to Tailwind's content scan and gets purged, so every
+// layout is spelled out here. All layouts collapse to one column below `sm`.
+var GRID_COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gridColsClass = function gridColsClass(n) {
+  var cols = Math.min(4, Math.max(1, Math.trunc(Number(n)) || 1));
+  return GRID_COLS[cols];
+};
 var describedByFor = function describedByFor(fieldId, error, helperText) {
   return error ? "".concat(fieldId, "-error") : helperText ? "".concat(fieldId, "-helper") : undefined;
 };
@@ -72,8 +85,12 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
     _methods$formState = methods.formState,
     errors = _methods$formState.errors,
     isSubmitting = _methods$formState.isSubmitting;
-  var handleFormSubmit = useCallback(function (data) {
-    onSubmit === null || onSubmit === void 0 || onSubmit(data);
+  var handleFormSubmit = useCallback(
+  // Return the handler's result so react-hook-form awaits an async
+  // onSubmit and `isSubmitting` (the submit button's loading state)
+  // reflects the real work (DTUI-19).
+  function (data) {
+    return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data);
   }, [onSubmit]);
   var handleReset = useCallback(function () {
     reset(defaultValues);
@@ -259,7 +276,8 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               ref = _ref8$field.ref;
             return jsxs("div", {
               className: "w-full",
-              children: [label && jsxs("label", {
+              children: [label && jsxs("span", {
+                id: "".concat(fieldId, "-label"),
                 className: "block text-sm font-medium mb-2",
                 children: [label, required && jsx("span", {
                   className: "text-error-500 ml-1",
@@ -268,20 +286,29 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               }), jsx("div", {
                 className: "space-y-2",
                 role: "radiogroup",
-                "aria-label": typeof label === "string" ? label : undefined,
+                "aria-labelledby": label ? "".concat(fieldId, "-label") : undefined,
+                "aria-required": required ? "true" : undefined,
                 "aria-describedby": describedBy,
-                children: options === null || options === void 0 ? void 0 : options.map(function (option) {
+                children: options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+                  // Shared `name` makes the options one native group
+                  // (arrow keys, single tab stop); id/htmlFor makes each
+                  // option label clickable and its accessible name.
+                  var optionId = "".concat(fieldId, "-option-").concat(index);
                   return jsxs("div", {
                     className: "flex items-center",
                     children: [jsx("input", {
-                      ref: ref,
+                      ref: index === 0 ? ref : undefined,
+                      id: optionId,
                       type: "radio",
+                      name: name,
+                      value: String(option.value),
                       checked: value === option.value,
                       onChange: function onChange() {
                         return _onChange2(option.value);
                       },
-                      className: "text-primary-600 focus:ring-primary-500"
+                      className: "text-primary-600 focus:ring-primary-500 focus-visible:ring-2"
                     }), jsx("label", {
+                      htmlFor: optionId,
                       className: "ml-2 text-sm",
                       children: option.label
                     })]
@@ -484,7 +511,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
           className: "text-sm text-primary-600",
           children: group.description
         }), jsx("div", {
-          className: cn("grid gap-4", group.gridCols ? "grid-cols-".concat(group.gridCols) : "grid-cols-1"),
+          className: cn("grid gap-4", gridColsClass(group.gridCols)),
           children: group.fields.map(renderField)
         })]
       }, group.name);

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

@@ -90,7 +90,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var paddingClass = cn(leftHasIcon ? "pl-10" : "pl-3", rightHasIcon ? "pr-12" : "pr-3");
   var baseClasses = cn("w-full rounded-md border bg-white text-sm placeholder-gray-400 disabled:opacity-50", "h-10 leading-10",
   // consistent height
-  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "", className);
+  paddingClass, error ? "border-red-500 focus:ring-red-500" : "border-gray-300", success ? "border-green-500 focus:ring-green-500" : "",
+  // Neutral state needs a visible keyboard focus indicator too.
+  !error && !success && "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", className);
   var inputType = isPassword && showPassword ? "text" : type;
   return jsxs("div", {
     className: "w-full",