@dreamtree-org/twreact-ui 1.3.2 → 1.3.3

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

@@ -1,6 +1,6 @@
 'use client';
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useEffect } from 'react';
+import { useSyncExternalStore, useId } from 'react';
 import { prefersReducedMotion } from '../../utils/position.js';
 
 var CHART_PALETTES = ["primary", "secondary", "success", "warning", "error", "info", "gray"];
@@ -23,9 +23,11 @@ function readVar(name) {
 }
 // SVG presentation attributes do not resolve var() in every engine, so a token is
 // turned into a concrete rgb() string when the browser can tell us its value. The
-// var() form is the SSR / jsdom fallback.
+// var() form is the SSR / jsdom fallback, and what the first (hydrating) client
+// render uses so it matches the server's HTML (`live` = false).
 function resolveVar(name) {
-  var value = readVar(name);
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var value = live ? readVar(name) : "";
   return value ? "rgb(".concat(value.split(/[\s,]+/).join(" "), ")") : "rgb(var(".concat(name, "))");
 }
 /**
@@ -34,76 +36,91 @@ function resolveVar(name) {
  * by the consumer (e.g. a colour stored with the data).
  */
 function resolveColor(color) {
+  var live = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   var name = tokenVar(color);
-  return name ? resolveVar(name) : color;
+  return name ? resolveVar(name, live) : color;
 }
 function seriesColors(categories, colors) {
+  var live = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   var palette = colors && colors.length ? colors : DEFAULT_CHART_COLORS;
   return categories.map(function (_, i) {
-    return resolveColor(palette[i % palette.length]);
+    return resolveColor(palette[i % palette.length], live);
   });
 }
-function readChrome() {
+function readChrome(live) {
   return Object.fromEntries(Object.entries(CHROME_VARS).map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       k = _ref2[0],
       v = _ref2[1];
-    return [k, resolveVar(v)];
+    return [k, resolveVar(v, live)];
   }));
 }
+// The theme is an external store: the attributes on <html> that flip it. The
+// server snapshot is null, so a hydrating render keeps the var() fallback the
+// server rendered and React re-renders with live colours right after (#130).
+function subscribeTheme(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver !== "function") return function () {};
+  var observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-theme", "style"]
+  });
+  return function () {
+    return observer.disconnect();
+  };
+}
+function themeSnapshot() {
+  if (typeof document === "undefined") return null;
+  var el = document.documentElement;
+  return "".concat(el.className, "|").concat(el.getAttribute("data-theme") || "", "|").concat(el.getAttribute("style") || "");
+}
+var serverThemeSnapshot = function serverThemeSnapshot() {
+  return null;
+};
 /**
  * Chart chrome + series colours, re-read whenever the theme flips (the `dark`
  * class or `data-theme` on <html>) so axes and series follow dark mode without
  * a remount.
  */
 function useChartTheme(categories, colors) {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setVersion = _useState2[1];
-  useEffect(function () {
-    if (typeof MutationObserver !== "function") return undefined;
-    var observer = new MutationObserver(function () {
-      return setVersion(function (v) {
-        return v + 1;
-      });
-    });
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme", "style"]
-    });
-    return function () {
-      return observer.disconnect();
-    };
-  }, []);
+  // The snapshot only signals a change; the values come from the live document.
+  var live = useSyncExternalStore(subscribeTheme, themeSnapshot, serverThemeSnapshot) !== null;
   return {
-    chrome: readChrome(),
-    series: seriesColors(categories, colors)
+    chrome: readChrome(live),
+    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);
   };
 }
-/** `true` while the user asks the OS for reduced motion; follows changes live. */
+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() {
-  var _useState3 = useState(prefersReducedMotion),
-    _useState4 = _slicedToArray(_useState3, 2),
-    reduced = _useState4[0],
-    setReduced = _useState4[1];
-  useEffect(function () {
-    var _query$addEventListen;
-    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return undefined;
-    var query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    var update = function update() {
-      return setReduced(query.matches);
-    };
-    (_query$addEventListen = query.addEventListener) === null || _query$addEventListen === void 0 || _query$addEventListen.call(query, "change", update);
-    return function () {
-      var _query$removeEventLis;
-      return (_query$removeEventLis = query.removeEventListener) === null || _query$removeEventLis === void 0 ? void 0 : _query$removeEventLis.call(query, "change", update);
-    };
-  }, []);
-  return reduced;
+  return useSyncExternalStore(subscribeReducedMotion, prefersReducedMotion, serverReducedMotion);
 }
 var defaultValueFormatter = function defaultValueFormatter(value) {
   return typeof value === "number" ? value.toLocaleString() : value == null ? "" : String(value);
 };
+/**
+ * A per-instance id for the SVG defs recharts draws (clip paths). recharts 2
+ * falls back to a module-level counter, which differs between the server and the
+ * client; an id from React.useId() is the same on both. Only [A-Za-z0-9_-] so it
+ * is safe inside `url(#…)`.
+ */
+function useChartId() {
+  return "dt-chart-".concat(useId().replace(/[^A-Za-z0-9_-]/g, ""));
+}
 
-export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartTheme, useReducedMotion };
+export { CHART_PALETTES, DEFAULT_CHART_COLORS, defaultValueFormatter, resolveColor, seriesColors, tokenVar, useChartId, useChartTheme, useReducedMotion };

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

@@ -127,7 +127,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     onMenuItemRender = _ref.onMenuItemRender,
     className = _ref.className,
     _ref$allowClear = _ref.allowClear,
-    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
     _ref$creatable = _ref.creatable,
     creatable = _ref$creatable === void 0 ? false : _ref$creatable,
     onCreateOption = _ref.onCreateOption,
@@ -564,7 +564,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             }, opt.value);
           })
         }), jsxs("div", {
-          className: "text-xs text-primary-500",
+          className: "text-xs text-primary-700",
           children: ["+", rest]
         })]
       });

package/dist/esm/components/core/Table/MobileCard.js

@@ -128,6 +128,7 @@ function MobileCard(_ref) {
         }), menuActions.length > 0 && jsxs("div", {
           className: "relative",
           children: [jsx("button", {
+            type: "button",
             ref: function ref(el) {
               return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
             },
@@ -137,8 +138,10 @@ function MobileCard(_ref) {
             "aria-expanded": activeActionRowKey === actionCellKey,
             className: "p-1.5 rounded hover:bg-gray-200",
             title: "Actions",
+            "aria-label": "Actions",
             children: jsx(MoreVertical, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             })
           }), activeActionRowKey === actionCellKey && jsx(ActionMenu, {
             actions: menuActions,
@@ -166,7 +169,7 @@ function MobileCard(_ref) {
         return jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsx("div", {
-            className: "text-xs font-medium text-primary-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsx("div", {
             className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",

package/dist/esm/components/core/Table/MobileFilters.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
+import React from 'react';
 import { Search } from 'lucide-react';
 
 /**
@@ -17,6 +17,7 @@ function MobileFilters(_ref) {
     visibleColumns = _ref.visibleColumns,
     filters = _ref.filters,
     handleFilter = _ref.handleFilter;
+  var idPrefix = React.useId();
   return jsxs("div", {
     className: "mb-4 p-3 bg-gray-50 rounded-lg",
     children: [jsxs("div", {
@@ -25,12 +26,14 @@ function MobileFilters(_ref) {
         className: "text-sm font-medium",
         children: "Filters"
       }), jsx("button", {
+        type: "button",
         onClick: function onClick() {
           return setShowMobileFilters(function (s) {
             return !s;
           });
         },
-        className: "text-xs text-primary-500",
+        "aria-expanded": !!showMobileFilters,
+        className: "text-xs font-medium text-primary-700",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxs("div", {
@@ -40,6 +43,7 @@ function MobileFilters(_ref) {
         children: [jsx("input", {
           type: "text",
           placeholder: "Search...",
+          "aria-label": "Search",
           className: "w-full rounded-md border border-gray-300 px-4 py-2 text-sm",
           value: searchInput,
           onChange: function onChange(e) {
@@ -47,14 +51,17 @@ function MobileFilters(_ref) {
           },
           onKeyDown: onGlobalKeyDown
         }), jsx(Search, {
-          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400"
+          className: "absolute right-3 top-2.5 h-4 w-4 text-primary-400",
+          "aria-hidden": "true"
         })]
       }), filterable && visibleColumns.map(function (column) {
         return jsxs("div", {
           children: [jsx("label", {
+            htmlFor: "".concat(idPrefix, "-filter-").concat(column.key),
             className: "block text-xs font-medium mb-1",
             children: column.label
           }), jsx("input", {
+            id: "".concat(idPrefix, "-filter-").concat(column.key),
             type: "text",
             placeholder: "Filter ".concat(column.label),
             className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm",

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

@@ -1179,10 +1179,13 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         children: [showReloadButton && jsx(Fragment, {
           children: renderReloadButton ? typeof renderReloadButton === "function" ? renderReloadButton() : renderReloadButton : jsxs("button", {
             type: "button",
+            "aria-label": "Reload",
+            title: "Reload",
             className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
             onClick: onReload,
             children: [jsx(RefreshCcw, {
-              className: "size-4"
+              className: "size-4",
+              "aria-hidden": "true"
             }), jsx("span", {
               className: "hidden sm:inline",
               children: "Reload"
@@ -1323,7 +1326,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
               children: "#"
             }), selectable && jsx("th", {
               className: "w-12 px-6 py-3",
@@ -1336,7 +1339,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             }), visibleColumns.map(function (column) {
               var _column$rules;
               return jsx("th", {
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider", {
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", {
                   "cursor-pointer hover:bg-gray-100": sortable && column.sortable !== false
                 }),
                 onClick: function onClick() {
@@ -1427,7 +1430,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                 children: [jsx("div", {
                   className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
                 }), jsx("span", {
-                  className: "text-sm text-primary-500",
+                  className: "text-sm text-muted",
                   children: "Loading..."
                 })]
               })
@@ -1445,7 +1448,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
                       className: "h-8 w-8"
                     })
                   }), jsx("span", {
-                    className: "text-sm text-primary-500",
+                    className: "text-sm text-muted",
                     children: "No results found."
                   })]
                 })
@@ -1490,7 +1493,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
           children: [jsx("div", {
             className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
           }), jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "Loading..."
           })]
         })
@@ -1504,7 +1507,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               className: "h-8 w-8"
             })
           }), jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "No results found."
           })]
         })

package/dist/esm/components/utility/Stepper.js

@@ -34,9 +34,9 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       text: 'text-primary-600'
     },
     upcoming: {
-      circle: 'bg-gray-300 text-primary-500',
+      circle: 'bg-gray-300 text-gray-700',
       line: 'bg-gray-300',
-      text: 'text-primary-500'
+      text: 'text-muted'
     }
   };
   return jsx("nav", _objectSpread2(_objectSpread2({
@@ -70,8 +70,10 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             },
             disabled: !onStepClick || stepIndex > currentStep,
             "aria-current": status === 'current' ? 'step' : undefined,
+            "aria-label": "Step ".concat(stepIndex + 1).concat(step.title ? ": ".concat(step.title) : '').concat(status === 'completed' ? ' (completed)' : ''),
             children: status === 'completed' ? jsx(Check, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             }) : stepIndex + 1
           }), !isLast && jsx("div", {
             className: cn('bg-gray-300', {
@@ -88,7 +90,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             className: cn('text-sm font-medium', colors.text),
             children: step.title
           }), step.description && jsx("span", {
-            className: "text-xs text-primary-500",
+            className: "text-xs text-muted",
             children: step.description
           })]
         })]