@dreamtree-org/twreact-ui 1.3.3 → 1.3.5

package/dist/index.js

@@ -3449,7 +3449,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Input.displayName = "Input";
 
-var _excluded$N = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
+var _excluded$N = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth", "as", "onClick"];
 function ownKeys$T(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$T(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$T(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$T(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -3464,12 +3464,19 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     leftIcon = _ref.leftIcon,
     rightIcon = _ref.rightIcon,
     fullWidth = _ref.fullWidth,
+    as = _ref.as,
+    onClick = _ref.onClick,
     props = _objectWithoutProperties$1(_ref, _excluded$N);
-  var baseClasses = cn$1('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', {
+  // `as` renders any element or component (an <a>, a router Link) with the
+  // Button's look; a bare `href` implies an <a>.
+  var Component = as || (props.href !== undefined ? 'a' : 'button');
+  var isNativeButton = Component === 'button';
+  var isDisabled = disabled || loading;
+  var baseClasses = cn$1('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', {
     // 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': variant === 'outline',
+    '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',
@@ -3484,10 +3491,20 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     // Full width
     'w-full': fullWidth
   }, className);
-  return jsxRuntime.jsxs("button", _objectSpread$T(_objectSpread$T({
+  return jsxRuntime.jsxs(Component, _objectSpread$T(_objectSpread$T(_objectSpread$T({
     ref: ref,
-    className: baseClasses,
-    disabled: disabled || loading
+    className: baseClasses
+  }, isNativeButton ? {
+    disabled: isDisabled
+  }
+  // Links can't be `disabled`: announce it and swallow the click instead.
+  : isDisabled && {
+    'aria-disabled': true,
+    tabIndex: -1
+  }), {}, {
+    onClick: !isNativeButton && isDisabled ? function (e) {
+      return e.preventDefault();
+    } : onClick
   }, props), {}, {
     children: [loading && jsxRuntime.jsx(Loader2, {
       className: "mr-2 h-4 w-4 animate-spin"
@@ -3534,7 +3551,7 @@ function useLatestRef(value) {
   return ref;
 }
 
-var _excluded$M = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
+var _excluded$M = ["options", "value", "onChange", "placeholder", "label", "error", "helperText", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name", "size"];
 function ownKeys$S(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$S(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$S(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$S(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -3635,6 +3652,14 @@ var highlight = function highlight() {
     }), label.slice(idx + term.length)]
   });
 };
+// Trigger sizes. min-h (not h) so multi-select tags can wrap. `md` keeps its
+// desktop look but grows to the 44px touch target on coarse pointers; `lg` is
+// 44px everywhere.
+var SIZE_CLASSES$1 = {
+  sm: "min-h-8 px-2.5 py-1 text-xs",
+  md: "min-h-[38px] px-3 py-2 text-sm [@media(pointer:coarse)]:min-h-11",
+  lg: "min-h-11 px-4 py-2.5 text-base"
+};
 var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -3671,6 +3696,8 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     maxTagCount = _ref$maxTagCount === void 0 ? 3 : _ref$maxTagCount,
     renderGroupLabel = _ref.renderGroupLabel,
     name = _ref.name,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
     props = _objectWithoutProperties$1(_ref, _excluded$M);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -4241,7 +4268,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": describedBy,
         "aria-invalid": error ? true : undefined,
-        className: cn$1("flex w-full items-center justify-between rounded-md border border-gray-300 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", {
+        className: cn$1("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES$1[size] || SIZE_CLASSES$1.md, {
           "border-error-500 focus:ring-error-500": error,
           "text-primary-500": !selectedOptions.length,
           "pr-14": showClearButton
@@ -4822,6 +4849,21 @@ var getRowKey = function getRowKey(row, globalIndex) {
   if (row._id !== undefined && row._id !== null) return String(row._id);
   return String(globalIndex);
 };
+/**
+ * A `stripedColors` entry is either a CSS colour ("#f7fafc", "rgb(...)") applied as an
+ * inline background, or a Tailwind class ("bg-surface", "dark:bg-gray-900") applied as a
+ * className. Returns the props to spread onto the striped element.
+ */
+var getStripeProps = function getStripeProps(stripe) {
+  if (!stripe) return {};
+  return /(^|[\s:])bg-/.test(stripe) ? {
+    className: stripe
+  } : {
+    style: {
+      backgroundColor: stripe
+    }
+  };
+};
 /**
  * Resolve a value that may be supplied directly or as a per-row producer.
  * Used for an action's `label`, `icon`, `hidden` and `disabled`.
@@ -4959,7 +5001,7 @@ function useClickOutside(refs, isActive, onClickOutside) {
  * Pagination controls component for the table
  * Supports both header (icon-only) and footer (with page numbers) variants
  */
-var DEFAULT_ROW_HOVER$1 = "bg-gray-50";
+var DEFAULT_ROW_HOVER$1 = "bg-background";
 // Header pagination (compact, icon-based)
 function PaginationHeader(_ref) {
   var _theme$rowHover;
@@ -5104,7 +5146,7 @@ function PaginationFooter(_ref2) {
   });
 }
 
-var DEFAULT_ROW_HOVER = "bg-gray-50";
+var DEFAULT_ROW_HOVER = "bg-background";
 /**
  * Column visibility toggle menu
  */
@@ -5168,7 +5210,7 @@ function MobileFilters(_ref) {
     handleFilter = _ref.handleFilter;
   var idPrefix = React.useId();
   return jsxRuntime.jsxs("div", {
-    className: "mb-4 p-3 bg-gray-50 rounded-lg",
+    className: "mb-4 p-3 bg-background rounded-lg",
     children: [jsxRuntime.jsxs("div", {
       className: "flex items-center justify-between mb-3",
       children: [jsxRuntime.jsx("h3", {
@@ -5225,8 +5267,8 @@ function MobileFilters(_ref) {
   });
 }
 
-var DEFAULT_MENU_BG = "bg-white border border-gray-100 shadow-xl";
-var DEFAULT_MENU_ITEM_HOVER = "opacity-75 hover:opacity-100 hover:bg-gray-100/80 active:bg-gray-200/80";
+var DEFAULT_MENU_BG = "bg-surface border border-line shadow-xl";
+var DEFAULT_MENU_ITEM_HOVER = "opacity-75 hover:opacity-100 hover:bg-gray-100/80 active:bg-gray-200/80 dark:hover:bg-gray-800 dark:active:bg-gray-700";
 function ActionMenu(_ref) {
   var _theme$menuBg, _theme$menuItemHover;
   var _ref$actions = _ref.actions,
@@ -5430,7 +5472,7 @@ function ActionMenu(_ref) {
     children: jsxRuntime.jsx("div", {
       className: "p-1.5 space-y-0.5",
       children: !Array.isArray(actions) || actions.length === 0 ? jsxRuntime.jsx("div", {
-        className: "px-3 py-2 text-sm text-gray-400 italic",
+        className: "px-3 py-2 text-sm text-muted italic",
         children: "No actions"
       }) : actions.map(function (action, idx) {
         var _action$name;
@@ -5441,7 +5483,7 @@ function ActionMenu(_ref) {
             type: "button",
             disabled: isDisabled,
             "aria-disabled": isDisabled || undefined,
-            className: cn$1("w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 rounded-lg transition-colors font-medium", isDisabled ? "opacity-50 cursor-not-allowed text-gray-400" : ["text-gray-700 hover:text-gray-900", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300" : ""]),
+            className: cn$1("w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 rounded-lg transition-colors font-medium", isDisabled ? "opacity-50 cursor-not-allowed text-muted" : ["text-foreground", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300 dark:bg-gray-800 dark:text-foreground dark:ring-gray-600" : ""]),
             onMouseEnter: function onMouseEnter() {
               return !isDisabled && setFocusedIndex(idx);
             },
@@ -5453,7 +5495,7 @@ function ActionMenu(_ref) {
             },
             children: action.render ? action.render(row) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [action.icon && jsxRuntime.jsx("span", {
-                className: "inline-flex text-gray-500 flex-shrink-0",
+                className: "inline-flex text-muted flex-shrink-0",
                 children: action.icon
               }), jsxRuntime.jsx("span", {
                 className: "truncate",
@@ -5548,6 +5590,7 @@ function TableRow(_ref) {
   var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
   var stripeColors = theme === null || theme === void 0 ? void 0 : theme.stripedColors;
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripeColors) && stripeColors.length > 0 ? stripeColors[globalIndex % stripeColors.length] : undefined;
+  var stripeProps = getStripeProps(stripeBg);
   var rowKey = isNewRow ? row._key : key;
   var isRowActive = interactive && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey;
   var effectiveRow = React.useMemo(function () {
@@ -5556,10 +5599,8 @@ function TableRow(_ref) {
   }, [interactive, pendingEdits, rowKey, row]);
   return jsxRuntime.jsxs(React.Fragment, {
     children: [jsxRuntime.jsxs("tr", {
-      style: stripeBg ? {
-        backgroundColor: stripeBg
-      } : undefined,
-      className: cn$1(theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
+      style: stripeProps.style,
+      className: cn$1(stripeProps.className, theme !== null && theme !== void 0 && theme.rowHover ? ["hover:" + theme.rowHover] : [], {
         "cursor-pointer": !!onRowClick,
         "bg-primary-50": isSelected,
         "bg-primary-50/20": isRowActive && !isSelected,
@@ -5578,7 +5619,7 @@ function TableRow(_ref) {
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
-          className: "p-1 rounded hover:bg-gray-100",
+          className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
           children: isExpanded ? "▾" : "▸"
         })
       }), showSerial && jsxRuntime.jsx("td", {
@@ -5614,9 +5655,9 @@ function TableRow(_ref) {
           title: isCellInvalid ? "Field \"".concat(column.label || column.key, "\" is required or invalid") : undefined,
           className: cn$1("px-6 py-4 text-sm transition-all", wrapCell ? "whitespace-normal break-words" : "whitespace-nowrap", {
             "ring-2 ring-error-500 ring-inset bg-error-50/40 relative z-10": isCellInvalid && !isCellEditing,
-            "ring-2 ring-error-600 ring-inset bg-white p-1 z-20 relative": isCellEditing && isCellInvalid,
+            "ring-2 ring-error-600 ring-inset bg-surface p-1 z-20 relative": isCellEditing && isCellInvalid,
             "ring-2 ring-primary-500 ring-inset bg-primary-50/50 relative z-10": isCellActive && !isCellEditing && !isCellInvalid,
-            "ring-2 ring-primary-600 ring-inset bg-white p-1 z-20 relative": isCellEditing && !isCellInvalid
+            "ring-2 ring-primary-600 ring-inset bg-surface p-1 z-20 relative": isCellEditing && !isCellInvalid
           }, safeExtraCellClass),
           onClick: function onClick() {
             if (interactive && onCellClick) {
@@ -5663,7 +5704,7 @@ function TableRow(_ref) {
                 if (action.disabled) return;
                 handleOnAction(action, row);
               },
-              className: cn$1("p-1 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100"),
+              className: cn$1("p-1 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-100 dark:hover:bg-gray-800"),
               children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsxRuntime.jsx("span", {
                 className: "text-xs",
                 children: actionLabel
@@ -5679,7 +5720,7 @@ function TableRow(_ref) {
                 return toggleActions(e, actionCellKey, row);
               },
               "aria-expanded": activeActionRowKey === actionCellKey,
-              className: "p-1 rounded hover:bg-gray-100",
+              className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
               title: "Actions",
               children: jsxRuntime.jsx(MoreVertical, {
                 className: "h-4 w-4"
@@ -5703,7 +5744,7 @@ function TableRow(_ref) {
         colSpan: visibleCount,
         className: cn$1(_defineProperty$4(_defineProperty$4({
           "px-6 py-4": true
-        }, (_theme$accentColor = theme === null || theme === void 0 ? void 0 : theme.accentColor) !== null && _theme$accentColor !== void 0 ? _theme$accentColor : "bg-gray-50", true), (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : "bg-gray-50", true)),
+        }, (_theme$accentColor = theme === null || theme === void 0 ? void 0 : theme.accentColor) !== null && _theme$accentColor !== void 0 ? _theme$accentColor : "bg-background", true), (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : "bg-background", true)),
         children: jsxRuntime.jsx(DetailsComponent, {
           row: row,
           index: globalIndex
@@ -5768,11 +5809,10 @@ function MobileCard(_ref) {
   var hasActions = withAction && (inlineActions.length > 0 || menuActions.length > 0);
   var showHeader = showDetailsToggle || selectable || showSerial || hasActions;
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripedColors) && stripedColors.length > 0 ? stripedColors[globalIndex % stripedColors.length] : undefined;
+  var stripeProps = getStripeProps(stripeBg);
   return jsxRuntime.jsxs("div", {
-    style: stripeBg ? {
-      backgroundColor: stripeBg
-    } : undefined,
-    className: cn$1("border rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
+    style: stripeProps.style,
+    className: cn$1(stripeProps.className, "border border-line rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
       "cursor-pointer": !!onRowClick,
       "bg-primary-50 border-primary-200": isSelected,
       "hover:shadow-md": !isSelected
@@ -5781,7 +5821,7 @@ function MobileCard(_ref) {
       return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
     },
     children: [showHeader && jsxRuntime.jsxs("div", {
-      className: "flex items-center justify-between p-4 border-b bg-gray-50",
+      className: "flex items-center justify-between p-4 border-b border-line bg-background",
       children: [jsxRuntime.jsxs("div", {
         className: "flex items-center gap-3",
         children: [showDetailsToggle && jsxRuntime.jsx("button", {
@@ -5792,7 +5832,7 @@ function MobileCard(_ref) {
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
-          className: "p-1 rounded hover:bg-gray-200",
+          className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
           children: isExpanded ? "▾" : "▸"
         }), selectable && jsxRuntime.jsx("input", {
           type: "checkbox",
@@ -5826,7 +5866,7 @@ function MobileCard(_ref) {
               if (action.disabled) return;
               handleOnAction(action, row);
             },
-            className: cn$1("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200"),
+            className: cn$1("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200 dark:hover:bg-gray-700"),
             children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsxRuntime.jsx("span", {
               className: "text-xs",
               children: actionLabel
@@ -5843,7 +5883,7 @@ function MobileCard(_ref) {
               return toggleActions(e, actionCellKey, row);
             },
             "aria-expanded": activeActionRowKey === actionCellKey,
-            className: "p-1.5 rounded hover:bg-gray-200",
+            className: "p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
             title: "Actions",
             "aria-label": "Actions",
             children: jsxRuntime.jsx(MoreVertical, {
@@ -5885,7 +5925,7 @@ function MobileCard(_ref) {
         }, column.key);
       })
     }), showDetailsToggle && isExpanded && DetailsComponent && jsxRuntime.jsx("div", {
-      className: "border-t bg-gray-50 p-4",
+      className: "border-t border-line bg-background p-4",
       children: jsxRuntime.jsx(DetailsComponent, {
         row: row,
         index: globalIndex
@@ -5946,7 +5986,7 @@ function FieldInput(_ref) {
       onClick: stopProp,
       onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
-      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-white resize-y min-h-[2.5rem]", className)
+      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-surface text-foreground resize-y min-h-[2.5rem]", className)
     });
   }
   // Select / Dropdown
@@ -5966,7 +6006,7 @@ function FieldInput(_ref) {
       onKeyDown: onKeyDown,
       onClick: stopProp,
       onMouseDown: stopProp,
-      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className),
+      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className),
       children: [jsxRuntime.jsxs("option", {
         value: "",
         children: ["Select ", column.label || column.key]
@@ -6009,7 +6049,7 @@ function FieldInput(_ref) {
       onKeyDown: onKeyDown,
       onClick: stopProp,
       onMouseDown: stopProp,
-      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
     });
   }
   // Number
@@ -6025,7 +6065,7 @@ function FieldInput(_ref) {
       onClick: stopProp,
       onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
-      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+      className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
     });
   }
   // Default: Text
@@ -6040,7 +6080,7 @@ function FieldInput(_ref) {
     onClick: stopProp,
     onMouseDown: stopProp,
     placeholder: "Enter ".concat(column.label || column.key, "..."),
-    className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+    className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-surface text-foreground", className)
   });
 }
 
@@ -6051,11 +6091,11 @@ function _objectSpread$P(e) { for (var r = 1; r < arguments.length; r++) { var t
 var DEFAULT_DATA = [];
 var DEFAULT_COLUMNS = [];
 var DEFAULT_THEME = {
-  stripedColors: ["bg-[#ffffff]", "bg-[#f7fafc]"],
-  rowHover: "bg-gray-50",
-  accentColor: "bg-gray-50",
-  menuBg: "bg-white",
-  menuItemHover: "hover:bg-gray-50"
+  stripedColors: ["bg-surface", "bg-background"],
+  rowHover: "bg-background",
+  accentColor: "bg-background",
+  menuBg: "bg-surface",
+  menuItemHover: "hover:bg-background"
 };
 var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
   var _validationErrors$;
@@ -7270,7 +7310,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             onClick: handleClearChanges,
             disabled: isSaving,
             title: "Discard all pending modifications",
-            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
+            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-surface hover:bg-primary-50 dark:text-primary-300 dark:border-primary-700 dark:hover:bg-primary-900/40 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
             children: [jsxRuntime.jsx(X, {
               className: "w-4 h-4 text-primary-600"
             }), jsxRuntime.jsx("span", {
@@ -7314,7 +7354,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             onKeyDown: onGlobalKeyDown
           }), jsxRuntime.jsx("button", {
             onClick: applyGlobalSearch,
-            className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100",
+            className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800",
             title: "Search",
             children: jsxRuntime.jsx(Search, {
               className: "h-4 w-4 text-primary-400"
@@ -7325,7 +7365,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             setSearchInput("");
             handleFilter("global", "");
           },
-          className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 w-full sm:w-auto",
+          className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 w-full sm:w-auto",
           children: "Clear"
         })]
       })
@@ -7349,7 +7389,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
     }), !isMobileView && jsxRuntime.jsx("div", {
       className: "overflow-x-auto overflow-y-visible",
       children: jsxRuntime.jsxs("table", _objectSpread$P(_objectSpread$P({
-        className: cn$1("min-w-full divide-y divide-gray-200", className)
+        className: cn$1("min-w-full divide-y divide-line", className)
       }, props), {}, {
         children: [jsxRuntime.jsxs("thead", {
           className: safeTheme.accentColor,
@@ -7371,7 +7411,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
               var _column$rules;
               return jsxRuntime.jsx("th", {
                 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
+                  "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800": sortable && column.sortable !== false
                 }),
                 onClick: function onClick() {
                   return column.sortable !== false && handleSort(column.key);
@@ -7415,7 +7455,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
                       return !s;
                     });
                   },
-                  className: "p-1 rounded hover:bg-gray-100",
+                  className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800",
                   children: jsxRuntime.jsx(MoreVertical, {
                     className: "h-4 w-4"
                   })
@@ -7451,7 +7491,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
             })]
           })]
         }), jsxRuntime.jsx("tbody", {
-          className: "divide-y divide-gray-200",
+          className: "divide-y divide-line",
           children: loading ? jsxRuntime.jsx("tr", {
             children: jsxRuntime.jsx("td", {
               colSpan: visibleCount,
@@ -17225,7 +17265,8 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_ref, ref) {
     props = _objectWithoutProperties$1(_ref, _excluded$A);
   var autoId = React.useId();
   var inputId = id || "".concat(autoId, "-radio");
-  var accentColor = radioColor || "blue";
+  // Default to the brand's primary token so the radio follows theming.
+  var accentColor = radioColor || "rgb(var(--dt-primary-600))";
   var _useState = React.useState(!!defaultChecked),
     _useState2 = _slicedToArray(_useState, 2),
     internalChecked = _useState2[0],
@@ -17283,7 +17324,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(_ref, ref) {
         "--radio-accent": accentColor
       },
       children: jsxRuntime.jsx("span", {
-        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300", sizeClasses.outer, disabled ? "bg-slate-100" : "bg-white", isChecked ? "shadow-inner" : ""),
+        className: cn("flex items-center justify-center rounded-full border transition-colors duration-150 ease-in-out border-slate-300 dark:border-gray-600", sizeClasses.outer, disabled ? "bg-slate-100 dark:bg-gray-800" : "bg-white dark:bg-gray-900", isChecked ? "shadow-inner" : ""),
         children: jsxRuntime.jsx("span", {
           "aria-hidden": true,
           className: cn("rounded-full transform transition-all duration-200 ease-out", sizeClasses.dot),
@@ -20058,8 +20099,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }), {}, {
       className: cn$1("flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", {
-        "bg-primary-100 text-primary-700": isActive,
-        "hover:bg-gray-100": !isActive && !item.disabled,
+        "bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300": isActive,
+        "hover:bg-gray-100 dark:hover:bg-gray-800": !isActive && !item.disabled,
         "cursor-pointer": !item.disabled,
         "cursor-not-allowed opacity-50": item.disabled,
         "justify-center": labelHidden
@@ -20088,7 +20129,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             })]
           }) : item.badge
         }), hasChildren && jsxRuntime.jsx("span", {
-          className: "ml-2 flex-shrink-0 rounded p-0.5 hover:bg-gray-200",
+          className: "ml-2 flex-shrink-0 rounded p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700",
           "aria-hidden": "true",
           "data-sidebar-chevron": "",
           onClick: hasHref ? function (e) {
@@ -20138,7 +20179,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }),
         "data-sidebar-section": section.key || "",
         children: [effectiveCollapsed && idx > 0 && jsxRuntime.jsx("hr", {
-          className: "mx-2 my-2 border-gray-200",
+          className: "mx-2 my-2 border-line",
           "aria-hidden": "true"
         }), section.key && (effectiveCollapsed ? jsxRuntime.jsx("span", {
           id: headingId,
@@ -20146,7 +20187,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           children: section.key
         }) : jsxRuntime.jsx("p", {
           id: headingId,
-          className: "px-3 pb-1 pt-2 text-micro font-semibold uppercase tracking-wide text-gray-500",
+          className: "px-3 pb-1 pt-2 text-micro font-semibold uppercase tracking-wide text-muted",
           children: section.key
         })), section.items.map(function (item) {
           return _renderMenuItem(item, 0, pane);
@@ -20185,7 +20226,7 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return jsxRuntime.jsx("button", {
       type: "button",
       onClick: handleUserClick,
-      className: cn$1(base, "cursor-pointer hover:bg-gray-100 transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),
+      className: cn$1(base, "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),
       "aria-label": effectiveCollapsed && !user.avatar ? user.name : undefined,
       children: content
     });
@@ -20199,26 +20240,26 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }) : footer;
     if (content === undefined || content === null || content === false) return null;
     return jsxRuntime.jsx("div", {
-      className: "border-t border-gray-200 p-4",
+      className: "border-t border-line p-4",
       "data-sidebar-footer": "",
       children: content
     });
   };
   var renderSidebarContent = function renderSidebarContent(pane) {
     return jsxRuntime.jsxs("div", {
-      className: cn$1("flex h-full flex-col bg-white border-r border-gray-200 shadow-sm", "w-64 transition-all duration-200", {
+      className: cn$1("flex h-full flex-col bg-surface text-foreground border-r border-line shadow-sm", "w-64 transition-all duration-200", {
         "w-16": effectiveCollapsed,
         "w-64": !effectiveCollapsed
       }),
       children: [jsxRuntime.jsxs("div", {
-        className: "flex h-16 items-center justify-between border-b border-gray-200 px-4",
+        className: "flex h-16 items-center justify-between border-b border-line px-4",
         children: [!effectiveCollapsed && logo && jsxRuntime.jsx("div", {
           className: "flex items-center",
           children: logo
         }), jsxRuntime.jsx("button", {
           type: "button",
           onClick: handleToggleClick,
-          className: "rounded-md p-1 hover:bg-gray-100",
+          className: "rounded-md p-1 hover:bg-gray-100 dark:hover:bg-gray-800",
           "aria-label": effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar",
           children: effectiveCollapsed ? jsxRuntime.jsx(ChevronRight, {
             className: "h-5 w-5"
@@ -20227,10 +20268,10 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           })
         })]
       }), jsxRuntime.jsx("nav", {
-        className: "flex-1 space-y-1 overflow-y-auto p-4 [&::-webkit-scrollbar]:w-2\n  [&::-webkit-scrollbar-track]:bg-gray-100\n  [&::-webkit-scrollbar-thumb]:bg-gray-300\n  hover:[&::-webkit-scrollbar-thumb]:bg-gray-400",
+        className: "flex-1 space-y-1 overflow-y-auto p-4 [&::-webkit-scrollbar]:w-2\n  [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-gray-800\n  [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700\n  hover:[&::-webkit-scrollbar-thumb]:bg-gray-400",
         children: renderNavContent(pane)
       }), renderFooter(pane), user && jsxRuntime.jsx("div", {
-        className: "border-t border-gray-200 p-4",
+        className: "border-t border-line p-4",
         children: jsxRuntime.jsx("div", {
           className: "relative",
           children: renderUserBlock()
@@ -20331,7 +20372,7 @@ var Dropdown = function Dropdown(_ref) {
       },
       children: trigger
     }), isOpen && jsxRuntime.jsx("div", {
-      className: "absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
+      className: "absolute z-50 bg-surface text-foreground border border-line rounded-md shadow-lg ".concat(placementClasses[placement], " min-w-48"),
       children: children
     })]
   }));
@@ -20481,7 +20522,7 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
   // For simplicity, shows notifications in the dropdown, can be expanded
   return jsxRuntime.jsx(Dropdown, {
     trigger: jsxRuntime.jsxs("button", {
-      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+      className: "relative rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
       "aria-label": "notifications",
       children: [jsxRuntime.jsx(Bell, {
         className: "h-5 w-5"
@@ -20494,9 +20535,9 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
     children: jsxRuntime.jsxs("div", {
       className: "py-2 min-w-56 max-h-80 overflow-y-auto",
       children: [jsxRuntime.jsxs("div", {
-        className: "px-4 py-2 border-b border-gray-100 flex items-center justify-between",
+        className: "px-4 py-2 border-b border-line flex items-center justify-between",
         children: [jsxRuntime.jsx("span", {
-          className: "font-medium text-primary-800 text-sm",
+          className: "font-medium text-primary-800 dark:text-primary-100 text-sm",
           children: "Notifications"
         }), jsxRuntime.jsx("button", {
           className: "text-xs text-primary-400 hover:text-error-600",
@@ -20512,16 +20553,16 @@ var NotificationsDropdown = function NotificationsDropdown(_ref) {
         children: "No notifications"
       }) : notifications.map(function (n) {
         return jsxRuntime.jsxs("div", {
-          className: cn$1("flex items-start gap-3 px-4 py-2 hover:bg-gray-50 cursor-pointer group", !n.read ? "bg-primary-50" : ""),
+          className: cn$1("flex items-start gap-3 px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer group", !n.read ? "bg-primary-50 dark:bg-primary-900/40" : ""),
           onClick: function onClick() {
             return onView();
           },
           children: [jsxRuntime.jsx("span", {
-            className: cn$1("h-2 w-2 mt-2 rounded-full", !n.read ? "bg-primary-500" : "bg-gray-300")
+            className: cn$1("h-2 w-2 mt-2 rounded-full", !n.read ? "bg-primary-500" : "bg-gray-300 dark:bg-gray-600")
           }), jsxRuntime.jsxs("div", {
             className: "flex-1",
             children: [jsxRuntime.jsx("div", {
-              className: "text-sm text-primary-800",
+              className: "text-sm text-primary-800 dark:text-primary-100",
               children: n.title
             }), n.message && jsxRuntime.jsx("div", {
               className: "text-xs text-primary-500",
@@ -20573,10 +20614,10 @@ var RightMenuContent = function RightMenuContent(_ref2) {
   });
 };
 var styledClassNames = {
-  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+  button: "rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
   mobileItem: "md:hidden",
   icon: "h-6 w-6",
-  dropdown: "w-56 rounded-md border border-gray-200 bg-white py-1 shadow-lg"
+  dropdown: "w-56 rounded-md border border-line bg-surface py-1 shadow-lg"
 };
 var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var emitter = _ref3.emitter,
@@ -20661,7 +20702,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           },
           className: cn$1("block w-full text-left px-4 py-2 text-sm", {
             "text-primary-600": item.active,
-            "hover:bg-gray-50": !item.active
+            "hover:bg-gray-50 dark:hover:bg-gray-800": !item.active
           }),
           children: item.label
         }, item.id);
@@ -20676,7 +20717,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   };
   return jsxRuntime.jsxs("nav", _objectSpread$p(_objectSpread$p({
     ref: ref,
-    className: cn$1("bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8", className)
+    className: cn$1("bg-surface text-foreground border-b border-line px-4 sm:px-6 lg:px-8", className)
   }, props), {}, {
     children: [jsxRuntime.jsxs("div", {
       className: "flex h-16 min-w-0 items-center justify-between gap-2 sm:gap-4",
@@ -20689,7 +20730,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
           className: "flex min-w-0 items-center",
           children: [leftIcon !== false && jsxRuntime.jsx("button", {
             onClick: onLeftIconClick,
-            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100",
+            className: "shrink-0 md:hidden rounded-md p-2 text-primary-400 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800",
             "aria-label": "back",
             children: leftIcon
           }), logo && jsxRuntime.jsx("div", {
@@ -20716,7 +20757,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
             }), jsxRuntime.jsx("input", {
               type: "text",
               placeholder: "Search...",
-              className: "w-64 rounded-md border border-gray-300 bg-white pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
+              className: "w-64 rounded-md border border-gray-300 bg-surface text-foreground dark:border-gray-700 pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
               value: searchTerm,
               onChange: function onChange(e) {
                 return setSearchTerm(e.target.value);
@@ -20779,9 +20820,9 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
             children: jsxRuntime.jsxs("div", {
               className: styledClassNames.dropdown,
               children: [jsxRuntime.jsxs("div", {
-                className: "px-4 py-2 border-b border-gray-200",
+                className: "px-4 py-2 border-b border-line",
                 children: [jsxRuntime.jsx("p", {
-                  className: "text-sm font-medium text-primary-900",
+                  className: "text-sm font-medium text-primary-900 dark:text-primary-100",
                   children: user.name
                 }), jsxRuntime.jsx("p", {
                   className: "text-xs text-primary-500",
@@ -20791,23 +20832,23 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
                 className: "py-1",
                 children: renderNavItems(true)
               }), user.menuItems && user.menuItems.length > 0 && jsxRuntime.jsx("div", {
-                className: "border-t border-gray-100",
+                className: "border-t border-line",
                 children: user.menuItems.map(function (mi) {
                   return jsxRuntime.jsx("button", {
                     onClick: function onClick(e) {
                       var _mi$onClick;
                       return mi === null || mi === void 0 || (_mi$onClick = mi.onClick) === null || _mi$onClick === void 0 ? void 0 : _mi$onClick.call(mi, e);
                     },
-                    className: "block w-full px-4 py-2 text-left text-sm hover:bg-gray-100",
+                    className: "block w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                     children: mi.label
                   }, mi.id);
                 })
               }), jsxRuntime.jsx("div", {
-                className: "border-t border-gray-100 sm:hidden",
+                className: "border-t border-line sm:hidden",
                 children: jsxRuntime.jsxs("button", {
                   type: "button",
                   onClick: handleLogoutClick,
-                  className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm hover:bg-gray-100",
+                  className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-800",
                   children: [jsxRuntime.jsx(LogOut, {
                     className: "h-4 w-4",
                     "aria-hidden": "true"
@@ -20821,13 +20862,13 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     }), isMobileMenuOpen && !user && jsxRuntime.jsx("div", {
       className: "md:hidden h-full",
       children: jsxRuntime.jsx("div", {
-        className: "space-y-1 border-t border-gray-200 px-2 pt-4 pb-3",
+        className: "space-y-1 border-t border-line px-2 pt-4 pb-3",
         children: items.map(function (item) {
           return jsxRuntime.jsx("a", {
             href: item.href,
             className: cn$1("block rounded-md px-3 py-2 text-base font-medium", {
-              "bg-primary-50 text-primary-700": item.active,
-              "hover:bg-gray-50": !item.active
+              "bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300": item.active,
+              "hover:bg-gray-50 dark:hover:bg-gray-800": !item.active
             }),
             children: item.label
           }, item.id);
@@ -20854,11 +20895,28 @@ function _objectSpread$o(e) { for (var r = 1; r < arguments.length; r++) { var t
 var hasBadge = function hasBadge(badge) {
   return badge === 0 || Boolean(badge);
 };
-var FootNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    className = _ref.className,
-    props = _objectWithoutProperties$1(_ref, _excluded$k);
+// Only aria-* and data-* item keys reach the DOM (e.g. aria-haspopup="dialog"
+// on an item that opens a sheet); the rest of the item is data, not attributes.
+var passthrough = function passthrough(item) {
+  return Object.fromEntries(Object.entries(item).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      key = _ref2[0];
+    return /^(aria|data)-/.test(key);
+  }));
+};
+var Badge$1 = function Badge(_ref3) {
+  var badge = _ref3.badge;
+  return jsxRuntime.jsx("span", {
+    className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
+    "data-slot": "badge",
+    children: badge
+  });
+};
+var FootNav = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
+  var _ref4$items = _ref4.items,
+    items = _ref4$items === void 0 ? [] : _ref4$items,
+    className = _ref4.className,
+    props = _objectWithoutProperties$1(_ref4, _excluded$k);
   return jsxRuntime.jsx("nav", _objectSpread$o(_objectSpread$o({
     ref: ref,
     className: cn$1('fixed bottom-0 left-0 right-0 bg-surface border-t border-line px-2 py-2 md:hidden', className)
@@ -20867,27 +20925,37 @@ var FootNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "flex items-stretch justify-around gap-1",
       children: items.map(function (item, index) {
         var _item$id;
-        return jsxRuntime.jsxs("button", {
+        var isAction = item.variant === 'action';
+        return jsxRuntime.jsxs("button", _objectSpread$o(_objectSpread$o({
           type: "button",
           "aria-current": item.active ? 'page' : undefined,
-          className: cn$1('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
+          "data-variant": isAction ? 'action' : undefined
+        }, passthrough(item)), {}, {
+          className: cn$1('relative flex min-w-0 flex-1 flex-col items-center gap-1 rounded-md px-1 py-2 text-xs transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1 motion-reduce:transition-none', isAction ? 'group justify-start py-0 font-medium text-muted' : item.active ? 'bg-primary-50 font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300' : 'font-medium text-muted hover:bg-gray-100 hover:text-foreground dark:hover:bg-gray-800'),
           onClick: function onClick() {
             var _item$onClick;
             return (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, item);
           },
-          children: [jsxRuntime.jsxs("span", {
+          children: [isAction ?
+          // Raised primary circle (FAB): 56px, lifted above the bar and
+          // ringed in the surface colour so it reads as cut out of the bar.
+          jsxRuntime.jsxs("span", {
+            className: "relative -mt-7 inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary-600 text-2xl text-white shadow-lg ring-4 ring-surface transition-colors group-hover:bg-primary-700 motion-reduce:transition-none",
+            "data-slot": "icon",
+            children: [item.icon, hasBadge(item.badge) && jsxRuntime.jsx(Badge$1, {
+              badge: item.badge
+            })]
+          }) : jsxRuntime.jsxs("span", {
             className: "relative inline-flex text-lg",
             "data-slot": "icon",
-            children: [item.icon, hasBadge(item.badge) && jsxRuntime.jsx("span", {
-              className: "absolute -top-1.5 left-full -ml-2 flex h-4 min-w-4 items-center justify-center rounded-full bg-error-600 px-1 text-micro font-semibold text-white",
-              "data-slot": "badge",
-              children: item.badge
+            children: [item.icon, hasBadge(item.badge) && jsxRuntime.jsx(Badge$1, {
+              badge: item.badge
             })]
           }), jsxRuntime.jsx("span", {
             className: "block max-w-full truncate",
             children: item.label
           })]
-        }, (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
+        }), (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index);
       })
     })
   }));
@@ -20963,6 +21031,11 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 });
 Breadcrumbs.displayName = 'Breadcrumbs';
 
+// Internal (not exported). Grows an icon-only control to the 44×44 px minimum
+// touch target (WCAG 2.5.5, Apple HIG) on coarse pointers only, so desktop
+// layouts keep their compact size. Pair with inline-flex centering.
+var TOUCH_TARGET = "[@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:min-w-11";
+
 var _excluded$i = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
   _excluded2$2 = ["children", "className"],
   _excluded3$2 = ["children", "className"],
@@ -21099,11 +21172,12 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
           children: title
         }), showCloseButton && jsxRuntime.jsx("button", {
           type: "button",
-          className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+          className: cn$1('inline-flex items-center justify-center rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100', TOUCH_TARGET),
           onClick: onClose,
           "aria-label": "Close dialog",
           children: jsxRuntime.jsx(X, {
-            className: "h-5 w-5"
+            className: "h-5 w-5",
+            "aria-hidden": "true"
           })
         })]
       }), jsxRuntime.jsx("div", {
@@ -21622,7 +21696,68 @@ function useScrollLock(active) {
   }, [active]);
 }
 
-var _excluded$f = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "className"],
+// Internal (not exported). Drag-down-to-dismiss for a bottom sheet. Spread
+// `dragProps` on the grab zone (handle + header), not the scrolling body, so a
+// swipe never fights the content's own scroll. Past `threshold` px (or a quick
+// flick) the drag calls onClose; otherwise the sheet snaps back.
+var FLICK_VELOCITY = 0.5; // px per ms
+function useSwipeToClose(_ref) {
+  var enabled = _ref.enabled,
+    onClose = _ref.onClose,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 80 : _ref$threshold;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
+  var start = React.useRef(null);
+  var end = React.useCallback(function (e) {
+    if (!start.current) return;
+    var dy = Math.max(0, e.clientY - start.current.y);
+    var elapsed = Math.max(1, Date.now() - start.current.t);
+    start.current = null;
+    setDragging(false);
+    setOffset(0);
+    if (dy >= threshold || dy > 16 && dy / elapsed >= FLICK_VELOCITY) onClose === null || onClose === void 0 || onClose();
+  }, [onClose, threshold]);
+  if (!enabled) return {
+    dragProps: {},
+    offset: 0,
+    dragging: false
+  };
+  return {
+    offset: offset,
+    dragging: dragging,
+    dragProps: {
+      onPointerDown: function onPointerDown(e) {
+        var _e$currentTarget$setP, _e$currentTarget;
+        if (e.button !== undefined && e.button !== 0) return;
+        start.current = {
+          y: e.clientY,
+          t: Date.now()
+        };
+        setDragging(true);
+        (_e$currentTarget$setP = (_e$currentTarget = e.currentTarget).setPointerCapture) === null || _e$currentTarget$setP === void 0 || _e$currentTarget$setP.call(_e$currentTarget, e.pointerId);
+      },
+      onPointerMove: function onPointerMove(e) {
+        if (!start.current) return;
+        setOffset(Math.max(0, e.clientY - start.current.y));
+      },
+      onPointerUp: end,
+      onPointerCancel: function onPointerCancel() {
+        start.current = null;
+        setDragging(false);
+        setOffset(0);
+      }
+    }
+  };
+}
+
+var _excluded$f = ["isOpen", "onClose", "title", "description", "children", "placement", "size", "dismissible", "showCloseButton", "footer", "initialFocusRef", "handle", "swipeToClose", "className", "style"],
   _excluded2$1 = ["className"],
   _excluded3$1 = ["className"],
   _excluded4$1 = ["className"];
@@ -21632,7 +21767,8 @@ var PLACEMENT_CLASSES = {
   right: "inset-y-0 right-0 h-full w-full border-l",
   left: "inset-y-0 left-0 h-full w-full border-r",
   top: "inset-x-0 top-0 w-full border-b",
-  bottom: "inset-x-0 bottom-0 w-full border-t"
+  // Bottom sheet: rounded top and room for the home indicator (safe area).
+  bottom: "inset-x-0 bottom-0 w-full overflow-hidden rounded-t-2xl border-t pb-[env(safe-area-inset-bottom)]"
 };
 var SIDE_SIZES = {
   sm: "max-w-xs",
@@ -21655,7 +21791,7 @@ var CloseButton = function CloseButton(_ref) {
     type: "button",
     onClick: onClose,
     "aria-label": "Close drawer",
-    className: cn$1("rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900", className),
+    className: cn$1("inline-flex items-center justify-center rounded-md p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 dark:focus:ring-offset-gray-900", TOUCH_TARGET, className),
     children: jsxRuntime.jsx(X, {
       className: "h-5 w-5",
       "aria-hidden": "true"
@@ -21678,7 +21814,11 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
     showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
     footer = _ref2.footer,
     initialFocusRef = _ref2.initialFocusRef,
+    handle = _ref2.handle,
+    _ref2$swipeToClose = _ref2.swipeToClose,
+    swipeToClose = _ref2$swipeToClose === void 0 ? false : _ref2$swipeToClose,
     className = _ref2.className,
+    style = _ref2.style,
     props = _objectWithoutProperties$1(_ref2, _excluded$f);
   var panelRef = React.useRef(null);
   var titleId = "drawer-title-".concat(React.useId());
@@ -21688,6 +21828,17 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
   // Without title/description/footer the children are the panel content, so
   // Drawer.Header / Drawer.Body / Drawer.Footer compose without double padding.
   var composed = !title && !description && !footer;
+  var showHandle = handle !== null && handle !== void 0 ? handle : side === "bottom";
+  var swipe = useSwipeToClose({
+    enabled: swipeToClose && side === "bottom" && dismissible,
+    onClose: onClose
+  });
+  // The grab zone (handle + header) starts a swipe; the scrolling body never does.
+  var grabProps = swipeToClose && side === "bottom" && dismissible ? _objectSpread$j(_objectSpread$j({}, swipe.dragProps), {}, {
+    className: "touch-none cursor-grab"
+  }) : {
+    className: ""
+  };
   useScrollLock(isOpen);
   useFocusTrap(panelRef, {
     active: isOpen,
@@ -21706,7 +21857,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       onClick: function onClick() {
         return dismissible && (onClose === null || onClose === void 0 ? void 0 : onClose());
       }
-    }), jsxRuntime.jsx("div", _objectSpread$j(_objectSpread$j({
+    }), jsxRuntime.jsxs("div", _objectSpread$j(_objectSpread$j({
       ref: function ref(node) {
         return setRefs$1(node, panelRef, _ref3);
       },
@@ -21716,16 +21867,27 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
       "aria-describedby": description ? descriptionId : undefined,
       tabIndex: -1,
       "data-placement": side,
-      className: cn$1("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), className)
+      className: cn$1("absolute flex flex-col border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "animate-fade-in motion-reduce:animate-none", PLACEMENT_CLASSES[side], (isEdge ? EDGE_SIZES : SIDE_SIZES)[size] || (isEdge ? EDGE_SIZES.md : SIDE_SIZES.md), !swipe.dragging && "transition-transform duration-200 ease-out motion-reduce:transition-none", className),
+      style: swipe.offset ? _objectSpread$j(_objectSpread$j({}, style), {}, {
+        transform: "translateY(".concat(swipe.offset, "px)")
+      }) : style
     }, props), {}, {
-      children: composed ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [showHandle && jsxRuntime.jsx("div", _objectSpread$j(_objectSpread$j({
+        "aria-hidden": "true",
+        "data-testid": "drawer-handle"
+      }, grabProps), {}, {
+        className: cn$1("flex shrink-0 justify-center pb-1 pt-3", grabProps.className),
+        children: jsxRuntime.jsx("span", {
+          className: "h-1.5 w-10 rounded-full bg-gray-300 dark:bg-gray-600"
+        })
+      })), composed ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [showCloseButton && jsxRuntime.jsx(CloseButton, {
           onClose: onClose,
           className: "absolute right-3 top-3"
         }), children]
       }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsxs("div", {
-          className: "flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700",
+        children: [jsxRuntime.jsxs("div", _objectSpread$j(_objectSpread$j({}, grabProps), {}, {
+          className: cn$1("flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", showHandle && "pt-2", grabProps.className),
           children: [jsxRuntime.jsxs("div", {
             className: "min-w-0",
             children: [title && jsxRuntime.jsx("h2", {
@@ -21740,14 +21902,14 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref2, _ref3) {
           }), showCloseButton && jsxRuntime.jsx(CloseButton, {
             onClose: onClose
           })]
-        }), jsxRuntime.jsx("div", {
+        })), jsxRuntime.jsx("div", {
           className: "min-h-0 flex-1 overflow-y-auto px-6 py-4",
           children: children
         }), footer && jsxRuntime.jsx("div", {
           className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
           children: footer
         })]
-      })
+      })]
     }))]
   }), document.body);
 });
@@ -22155,6 +22317,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     success: 'bg-success-100 text-success-800',
     warning: 'bg-warning-100 text-warning-800',
     error: 'bg-error-100 text-error-800',
+    info: 'bg-info-100 text-info-800',
     outline: 'border border-gray-300'
   };
   var sizes = {
@@ -22193,7 +22356,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     props = _objectWithoutProperties$1(_ref, _excluded$c);
   return jsxRuntime.jsx("div", _objectSpread$g(_objectSpread$g({
     ref: ref,
-    className: cn$1('rounded-lg border border-gray-200 bg-white shadow-sm', {
+    className: cn$1('rounded-lg border border-line bg-surface shadow-sm', {
       'hover:shadow-md transition-shadow': hover
     }, className)
   }, props), {}, {
@@ -22206,7 +22369,7 @@ var CardHeader = function CardHeader(_ref2) {
     className = _ref2.className,
     props = _objectWithoutProperties$1(_ref2, _excluded2);
   return jsxRuntime.jsx("div", _objectSpread$g(_objectSpread$g({
-    className: cn$1('px-6 py-4 border-b border-gray-200', className)
+    className: cn$1('px-6 py-4 border-b border-line', className)
   }, props), {}, {
     children: children
   }));
@@ -22216,7 +22379,7 @@ var CardTitle = function CardTitle(_ref3) {
     className = _ref3.className,
     props = _objectWithoutProperties$1(_ref3, _excluded3);
   return jsxRuntime.jsx("h3", _objectSpread$g(_objectSpread$g({
-    className: cn$1('text-lg font-semibold text-primary-900', className)
+    className: cn$1('text-lg font-semibold text-primary-900 dark:text-primary-100', className)
   }, props), {}, {
     children: children
   }));
@@ -22226,7 +22389,7 @@ var CardDescription = function CardDescription(_ref4) {
     className = _ref4.className,
     props = _objectWithoutProperties$1(_ref4, _excluded4);
   return jsxRuntime.jsx("p", _objectSpread$g(_objectSpread$g({
-    className: cn$1('text-sm text-primary-600', className)
+    className: cn$1('text-sm text-primary-600 dark:text-primary-300', className)
   }, props), {}, {
     children: children
   }));
@@ -22246,7 +22409,7 @@ var CardFooter = function CardFooter(_ref6) {
     className = _ref6.className,
     props = _objectWithoutProperties$1(_ref6, _excluded6);
   return jsxRuntime.jsx("div", _objectSpread$g(_objectSpread$g({
-    className: cn$1('px-6 py-4 border-t border-gray-200', className)
+    className: cn$1('px-6 py-4 border-t border-line', className)
   }, props), {}, {
     children: children
   }));
@@ -22407,9 +22570,12 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": "Progress"
   }, props), {}, {
     children: steps.map(function (step, stepIndex) {
+      var _step$title;
       var status = getStepStatus(stepIndex);
       var isLast = stepIndex === steps.length - 1;
       var colors = statusColors[status];
+      // `label` is accepted as an alias for `title` (the docs used `label`).
+      var stepTitle = (_step$title = step.title) !== null && _step$title !== void 0 ? _step$title : step.label;
       return jsxRuntime.jsxs("div", {
         className: cn$1('flex items-center', {
           'flex-col': orientation === 'horizontal',
@@ -22429,7 +22595,7 @@ 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)' : ''),
+            "aria-label": "Step ".concat(stepIndex + 1).concat(stepTitle ? ": ".concat(stepTitle) : '').concat(status === 'completed' ? ' (completed)' : ''),
             children: status === 'completed' ? jsxRuntime.jsx(Check, {
               className: "h-4 w-4",
               "aria-hidden": "true"
@@ -22447,7 +22613,7 @@ var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           }),
           children: [jsxRuntime.jsx("span", {
             className: cn$1('text-sm font-medium', colors.text),
-            children: step.title
+            children: stepTitle
           }), step.description && jsxRuntime.jsx("span", {
             className: "text-xs text-muted",
             children: step.description
@@ -23547,7 +23713,7 @@ function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t
 // One map from domain state to tone + human label; unknown states are humanized, never shown raw.
 var TONE_TO_VARIANT = {
   neutral: 'secondary',
-  info: 'primary',
+  info: 'info',
   success: 'success',
   warning: 'warning',
   danger: 'error',