@dreamtree-org/twreact-ui 1.3.2 → 1.3.3

package/dist/index.js

@@ -3656,7 +3656,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,
@@ -4093,7 +4093,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
             }, opt.value);
           })
         }), jsxRuntime.jsxs("div", {
-          className: "text-xs text-primary-500",
+          className: "text-xs text-primary-700",
           children: ["+", rest]
         })]
       });
@@ -5166,6 +5166,7 @@ function MobileFilters(_ref) {
     visibleColumns = _ref.visibleColumns,
     filters = _ref.filters,
     handleFilter = _ref.handleFilter;
+  var idPrefix = React.useId();
   return jsxRuntime.jsxs("div", {
     className: "mb-4 p-3 bg-gray-50 rounded-lg",
     children: [jsxRuntime.jsxs("div", {
@@ -5174,12 +5175,14 @@ function MobileFilters(_ref) {
         className: "text-sm font-medium",
         children: "Filters"
       }), jsxRuntime.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 && jsxRuntime.jsxs("div", {
@@ -5189,6 +5192,7 @@ function MobileFilters(_ref) {
         children: [jsxRuntime.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) {
@@ -5196,14 +5200,17 @@ function MobileFilters(_ref) {
           },
           onKeyDown: onGlobalKeyDown
         }), jsxRuntime.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 jsxRuntime.jsxs("div", {
           children: [jsxRuntime.jsx("label", {
+            htmlFor: "".concat(idPrefix, "-filter-").concat(column.key),
             className: "block text-xs font-medium mb-1",
             children: column.label
           }), jsxRuntime.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",
@@ -5828,6 +5835,7 @@ function MobileCard(_ref) {
         }), menuActions.length > 0 && jsxRuntime.jsxs("div", {
           className: "relative",
           children: [jsxRuntime.jsx("button", {
+            type: "button",
             ref: function ref(el) {
               return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
             },
@@ -5837,8 +5845,10 @@ function MobileCard(_ref) {
             "aria-expanded": activeActionRowKey === actionCellKey,
             className: "p-1.5 rounded hover:bg-gray-200",
             title: "Actions",
+            "aria-label": "Actions",
             children: jsxRuntime.jsx(MoreVertical, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             })
           }), activeActionRowKey === actionCellKey && jsxRuntime.jsx(ActionMenu, {
             actions: menuActions,
@@ -5866,7 +5876,7 @@ function MobileCard(_ref) {
         return jsxRuntime.jsxs("div", {
           className: cn$1("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsxRuntime.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
           }), jsxRuntime.jsx("div", {
             className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
@@ -7200,10 +7210,13 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
         children: [showReloadButton && jsxRuntime.jsx(jsxRuntime.Fragment, {
           children: renderReloadButton ? typeof renderReloadButton === "function" ? renderReloadButton() : renderReloadButton : jsxRuntime.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: [jsxRuntime.jsx(RefreshCcw, {
-              className: "size-4"
+              className: "size-4",
+              "aria-hidden": "true"
             }), jsxRuntime.jsx("span", {
               className: "hidden sm:inline",
               children: "Reload"
@@ -7344,7 +7357,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsxRuntime.jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsxRuntime.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 && jsxRuntime.jsx("th", {
               className: "w-12 px-6 py-3",
@@ -7357,7 +7370,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             }), visibleColumns.map(function (column) {
               var _column$rules;
               return jsxRuntime.jsx("th", {
-                className: cn$1("px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider", {
+                className: cn$1("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() {
@@ -7448,7 +7461,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
                 children: [jsxRuntime.jsx("div", {
                   className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
                 }), jsxRuntime.jsx("span", {
-                  className: "text-sm text-primary-500",
+                  className: "text-sm text-muted",
                   children: "Loading..."
                 })]
               })
@@ -7466,7 +7479,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
                       className: "h-8 w-8"
                     })
                   }), jsxRuntime.jsx("span", {
-                    className: "text-sm text-primary-500",
+                    className: "text-sm text-muted",
                     children: "No results found."
                   })]
                 })
@@ -7511,7 +7524,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
           children: [jsxRuntime.jsx("div", {
             className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
           }), jsxRuntime.jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "Loading..."
           })]
         })
@@ -7525,7 +7538,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
               className: "h-8 w-8"
             })
           }), jsxRuntime.jsx("span", {
-            className: "text-sm text-primary-500",
+            className: "text-sm text-muted",
             children: "No results found."
           })]
         })
@@ -22380,9 +22393,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 jsxRuntime.jsx("nav", _objectSpread$e(_objectSpread$e({
@@ -22416,8 +22429,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' ? jsxRuntime.jsx(Check, {
-              className: "h-4 w-4"
+              className: "h-4 w-4",
+              "aria-hidden": "true"
             }) : stepIndex + 1
           }), !isLast && jsxRuntime.jsx("div", {
             className: cn$1('bg-gray-300', {
@@ -22434,7 +22449,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             className: cn$1('text-sm font-medium', colors.text),
             children: step.title
           }), step.description && jsxRuntime.jsx("span", {
-            className: "text-xs text-primary-500",
+            className: "text-xs text-muted",
             children: step.description
           })]
         })]
@@ -23506,7 +23521,7 @@ var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }), change && !loading && jsxRuntime.jsxs("p", {
           className: "mt-1 flex items-center gap-1 text-xs text-muted",
           children: [jsxRuntime.jsxs("span", {
-            className: cn$1('inline-flex items-center gap-0.5 font-semibold', good ? 'text-success-600' : 'text-error-600'),
+            className: cn$1('inline-flex items-center gap-0.5 font-semibold', good ? 'text-success-700 dark:text-success-400' : 'text-error-700 dark:text-error-400'),
             children: [up ? jsxRuntime.jsx(ArrowUp, {
               className: "h-3.5 w-3.5",
               "aria-hidden": "true"

package/dist/tokens/brands/practicepro.json

@@ -1,6 +1,7 @@
 {
   "name": "practicepro",
   "label": "PracticePro",
+  "$deprecated": "Moved to the PracticePro repo's dreamtree.brand.json. Shipped here until 1.5.0; build your own with `npx @dreamtree-org/twreact-ui brand build`.",
   "$description": "Teal primary and navy shell, taken from PracticePro/app/globals.css (brand-50/100/500/600/700, shell, shell-active). Steps PracticePro does not define are interpolated on the same hue. PracticePro's own muted grey (#64748b) is not carried over: on the #f6f8fb background it is about 4.4:1, below WCAG AA, so the shared muted token (#475569, 7.5:1) is used.",
   "color": {
     "primary": {

package/dist/tokens/brands/studio.json

@@ -1,6 +1,7 @@
 {
   "name": "studio",
   "label": "Dreamtree Studio",
+  "$deprecated": "Moved to the ProtoPro repo's dreamtree.brand.json (formerly Dreamtree Studio). Shipped here until 1.5.0; build your own with `npx @dreamtree-org/twreact-ui brand build`.",
   "$description": "Indigo primary for Dreamtree Studio, the MCP prototyping harness (its own app pages, not the prototypes it renders). The shell, background and text roles are the shared slate defaults, so only the primary scale changes. Indigo 600 (#4f46e5) is 6.3:1 on white and 600/700 pass WCAG AA for text on white.",
   "color": {
     "primary": {