@dreamtree-org/twreact-ui 1.3.11 → 2.0.0

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

@@ -1,251 +1,65 @@
 'use client';
-import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useRef, useState, useLayoutEffect, useEffect } from 'react';
-import { createPortal } from 'react-dom';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
 import { cn } from '../../../utils/cn.js';
-import { useLatestRef } from '../../../hooks/useLatestRef.js';
+import ActionMenuSurface from '../menu/ActionMenuSurface.js';
 
 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";
+/**
+ * Table's row action menu. Rendered by TableRow / MobileCard while a row's
+ * kebab is open (the Table owns the open state), on the shared action-menu
+ * primitive: a portaled floating menu on desktop, an action sheet on phones.
+ *
+ * Actions: { name, label, icon?, render?(row), disabled?, tone?: 'destructive', destructive? }.
+ */
 function ActionMenu(_ref) {
   var _theme$menuBg, _theme$menuItemHover;
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     row = _ref.row,
     onAction = _ref.onAction,
-    onClose = _ref.onClose,
-    externalMenuRef = _ref.menuRef,
+    _onClose = _ref.onClose,
+    menuRef = _ref.menuRef,
     anchorEl = _ref.anchorEl,
-    theme = _ref.theme;
-  var internalRef = useRef(null);
-  var menuRef = externalMenuRef || internalRef;
-  var _useState = useState(-1),
-    _useState2 = _slicedToArray(_useState, 2),
-    focusedIndex = _useState2[0],
-    setFocusedIndex = _useState2[1];
+    theme = _ref.theme,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation;
   var menuBg = (_theme$menuBg = theme === null || theme === void 0 ? void 0 : theme.menuBg) !== null && _theme$menuBg !== void 0 ? _theme$menuBg : DEFAULT_MENU_BG;
   var menuItemHover = (_theme$menuItemHover = theme === null || theme === void 0 ? void 0 : theme.menuItemHover) !== null && _theme$menuItemHover !== void 0 ? _theme$menuItemHover : DEFAULT_MENU_ITEM_HOVER;
-  var _useState3 = useState({
-      left: 0,
-      top: 0,
-      transformOrigin: "top right",
-      maxHeight: 300,
-      width: 190,
-      opacity: 0
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    style = _useState4[0],
-    setStyle = _useState4[1];
-  var menuWidth = 190;
-  var maxMenuHeight = 320;
-  var minMenuHeight = 80;
-  var margin = 8;
-  var computePosition = function computePosition() {
-    if (!anchorEl || typeof window === "undefined") return;
-    var rect = anchorEl.getBoundingClientRect();
-    var scrollY = window.scrollY || window.pageYOffset || 0;
-    var scrollX = window.scrollX || window.pageXOffset || 0;
-    var spaceBelow = window.innerHeight - rect.bottom;
-    var spaceAbove = rect.top;
-    // Estimate or measure menu height
-    var menuEl = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current;
-    var actionCount = Array.isArray(actions) && actions.length > 0 ? actions.length : 1;
-    var estimatedHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, actionCount * 42 + 16));
-    var actualContentHeight = estimatedHeight;
-    if (menuEl) {
-      actualContentHeight = Math.min(maxMenuHeight, menuEl.scrollHeight || menuEl.offsetHeight || estimatedHeight);
-    }
-    // Determine placement (top vs bottom) based on available viewport space
-    var placement = "bottom";
-    if (spaceBelow < actualContentHeight + margin && spaceAbove > spaceBelow) {
-      placement = "top";
-    }
-    var availableSpace = placement === "top" ? spaceAbove - margin : spaceBelow - margin;
-    var allowedMaxHeight = Math.min(maxMenuHeight, Math.max(minMenuHeight, availableSpace));
-    var finalMenuHeight = Math.min(actualContentHeight, allowedMaxHeight);
-    // Compute top coordinate based on placement
-    var top;
-    if (placement === "top") {
-      top = rect.top + scrollY - finalMenuHeight - margin;
-    } else {
-      top = rect.bottom + scrollY + margin;
-    }
-    // Clamp top within viewport scroll bounds
-    var minTop = margin + scrollY;
-    var maxTop = window.innerHeight + scrollY - finalMenuHeight - margin;
-    if (top < minTop) top = minTop;
-    if (top > maxTop) top = maxTop;
-    // Compute left coordinate (align right edge to anchor right, fallback to left align if overflow)
-    var left = rect.right + scrollX - menuWidth;
-    if (left < margin) {
-      left = rect.left + scrollX;
-    }
-    if (left + menuWidth > window.innerWidth - margin) {
-      left = Math.max(margin, window.innerWidth - menuWidth - margin);
-    }
-    var transformOrigin = placement === "bottom" ? "top right" : "bottom right";
-    setStyle({
-      left: left,
-      top: top,
-      transformOrigin: transformOrigin,
-      maxHeight: allowedMaxHeight,
-      width: menuWidth,
-      opacity: 1
-    });
-  };
-  // computePosition is rebuilt every render; read it through a ref so the
-  // listeners below are only re-bound when the anchor/actions change.
-  var computePositionRef = useLatestRef(computePosition);
-  useLayoutEffect(function () {
-    // Measuring the anchor and positioning the menu before paint is the
-    // intended use of a layout effect.
-    computePositionRef.current();
-    var rafId = window.requestAnimationFrame(function () {
-      return computePositionRef.current();
-    });
-    var handleResize = function handleResize() {
-      window.requestAnimationFrame(function () {
-        return computePositionRef.current();
-      });
-    };
-    var handleScroll = function handleScroll(e) {
-      // If scroll event originates inside the menu container itself,
-      // do NOT close the menu! Let the user scroll through options.
-      if (menuRef !== null && menuRef !== void 0 && menuRef.current && e.target && e.target instanceof Node && (menuRef.current === e.target || menuRef.current.contains(e.target))) {
-        return;
+  var items = (Array.isArray(actions) ? actions : []).map(function (action, idx) {
+    var _action$name;
+    return {
+      key: (_action$name = action.name) !== null && _action$name !== void 0 ? _action$name : "action-".concat(idx),
+      label: action.label,
+      icon: action.icon ? jsx("span", {
+        className: "inline-flex text-muted",
+        children: action.icon
+      }) : null,
+      content: action.render ? action.render(row) : undefined,
+      disabled: Boolean(action.disabled),
+      tone: action.tone,
+      destructive: action.destructive,
+      className: cn("gap-2.5 rounded-lg font-medium", menuItemHover),
+      onSelect: function onSelect() {
+        return onAction === null || onAction === void 0 ? void 0 : onAction(action, row);
       }
-      onClose === null || onClose === void 0 || onClose();
-    };
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleScroll, true);
-    return function () {
-      window.cancelAnimationFrame(rafId);
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleScroll, true);
     };
-  }, [anchorEl, actions, menuRef, onClose, computePositionRef]);
-  // Focus management & Keyboard navigation
-  useEffect(function () {
-    var handleKeyDown = function handleKeyDown(e) {
-      if (!Array.isArray(actions) || actions.length === 0) return;
-      if (e.key === "Escape") {
-        var _anchorEl$focus;
-        e.preventDefault();
-        onClose === null || onClose === void 0 || onClose();
-        anchorEl === null || anchorEl === void 0 || (_anchorEl$focus = anchorEl.focus) === null || _anchorEl$focus === void 0 || _anchorEl$focus.call(anchorEl);
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        setFocusedIndex(function (prev) {
-          var next = prev + 1;
-          while (next < actions.length && (_actions$next = actions[next]) !== null && _actions$next !== void 0 && _actions$next.disabled) {
-            var _actions$next;
-            next++;
-          }
-          return next < actions.length ? next : prev;
-        });
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        setFocusedIndex(function (prev) {
-          var next = prev - 1;
-          while (next >= 0 && (_actions$next2 = actions[next]) !== null && _actions$next2 !== void 0 && _actions$next2.disabled) {
-            var _actions$next2;
-            next--;
-          }
-          return next >= 0 ? next : prev;
-        });
-        return;
-      }
-      if (e.key === "Home") {
-        e.preventDefault();
-        var first = actions.findIndex(function (a) {
-          return !a.disabled;
-        });
-        if (first !== -1) setFocusedIndex(first);
-        return;
-      }
-      if (e.key === "End") {
-        e.preventDefault();
-        var last = _toConsumableArray(actions).reverse().findIndex(function (a) {
-          return !a.disabled;
-        });
-        if (last !== -1) setFocusedIndex(actions.length - 1 - last);
-        return;
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return function () {
-      return window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [actions, onClose, anchorEl]);
-  // Automatically focus focused item
-  useEffect(function () {
-    if (focusedIndex >= 0 && menuRef !== null && menuRef !== void 0 && menuRef.current) {
-      var buttons = menuRef.current.querySelectorAll("button:not([disabled])");
-      if (buttons[focusedIndex]) {
-        buttons[focusedIndex].focus();
-      }
-    }
-  }, [focusedIndex, menuRef]);
-  return /*#__PURE__*/createPortal(jsx("div", {
-    ref: menuRef,
-    role: "menu",
-    "aria-orientation": "vertical",
-    style: {
-      position: "absolute",
-      top: style.top,
-      left: style.left,
-      width: style.width,
-      maxHeight: style.maxHeight,
-      transformOrigin: style.transformOrigin,
-      opacity: style.opacity
-    },
-    className: cn("absolute z-50 rounded-xl shadow-xl ring-1 ring-black/10 overflow-y-auto transition-opacity duration-150 ease-out focus:outline-none", menuBg),
-    onClick: function onClick(e) {
-      return e.stopPropagation();
+  });
+  return jsx(ActionMenuSurface, {
+    open: true,
+    onClose: function onClose() {
+      return _onClose === null || _onClose === void 0 ? void 0 : _onClose();
     },
-    children: jsx("div", {
-      className: "p-1.5 space-y-0.5",
-      children: !Array.isArray(actions) || actions.length === 0 ? jsx("div", {
-        className: "px-3 py-2 text-sm text-muted italic",
-        children: "No actions"
-      }) : actions.map(function (action, idx) {
-        var _action$name;
-        var isDisabled = !!action.disabled;
-        var isFocused = focusedIndex === idx;
-        return jsx("div", {
-          children: jsx("button", {
-            type: "button",
-            disabled: isDisabled,
-            "aria-disabled": isDisabled || undefined,
-            className: cn("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);
-            },
-            onClick: function onClick(e) {
-              e.stopPropagation();
-              if (isDisabled) return;
-              onAction === null || onAction === void 0 || onAction(action, row);
-              onClose === null || onClose === void 0 || onClose();
-            },
-            children: action.render ? action.render(row) : jsxs(Fragment, {
-              children: [action.icon && jsx("span", {
-                className: "inline-flex text-muted flex-shrink-0",
-                children: action.icon
-              }), jsx("span", {
-                className: "truncate",
-                children: action.label
-              })]
-            })
-          })
-        }, (_action$name = action.name) !== null && _action$name !== void 0 ? _action$name : "action-".concat(idx));
-      })
-    })
-  }), document.body);
+    anchorEl: anchorEl,
+    items: items,
+    presentation: presentation,
+    placement: "bottom-end",
+    closeOnScroll: true,
+    menuRef: menuRef,
+    label: "Row actions",
+    menuClassName: cn("w-[190px] rounded-xl p-1.5 shadow-xl ring-1 ring-black/10", menuBg)
+  });
 }
 
 export { ActionMenu as default };

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

@@ -21,7 +21,7 @@ function ColumnMenu(_ref) {
     role: "group",
     "aria-label": "Show / hide columns",
     ref: menuRef,
-    className: "absolute right-4 mt-2 w-56 z-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
+    className: "absolute right-4 mt-2 w-56 z-dropdown rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 p-3 lg:block sm:block hidden",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },

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

@@ -4,8 +4,22 @@ import React from 'react';
 import { cn } from '../../../utils/cn.js';
 import { MoreVertical } from 'lucide-react';
 import ActionMenu from './ActionMenu.js';
+import SwipeableListItem from '../SwipeableListItem.js';
 import { getRowKey, resolveActions, rowHasDetails, getActionLabelText, getStripeProps } from './helpers.js';
 
+// Card controls are phone controls: 44×44 px hit areas (WCAG 2.5.5).
+var CARD_ICON_BUTTON = "inline-flex min-h-11 min-w-11 items-center justify-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+/** Resolves `swipeActions(row, index)` to `{ leading, trailing }` arrays. */
+function resolveSwipeActions(swipeActions, row, index) {
+  if (typeof swipeActions !== "function") return null;
+  var result = swipeActions(row, index) || {};
+  var leading = Array.isArray(result.leading) ? result.leading : [];
+  var trailing = Array.isArray(result.trailing) ? result.trailing : [];
+  return leading.length || trailing.length ? {
+    leading: leading,
+    trailing: trailing
+  } : null;
+}
 /**
  * Mobile card view for a single table row
  */
@@ -32,12 +46,17 @@ function MobileCard(_ref) {
     activeAnchorEl = _ref.activeAnchorEl,
     registerActionButton = _ref.registerActionButton,
     actionMenuRef = _ref.actionMenuRef,
+    _ref$actionMenuPresen = _ref.actionMenuPresentation,
+    actionMenuPresentation = _ref$actionMenuPresen === void 0 ? "auto" : _ref$actionMenuPresen,
     toggleExpandRow = _ref.toggleExpandRow,
     handleSelectRow = _ref.handleSelectRow,
     toggleActions = _ref.toggleActions,
     handleOnAction = _ref.handleOnAction,
     closeActionMenu = _ref.closeActionMenu,
-    renderCell = _ref.renderCell;
+    renderCell = _ref.renderCell,
+    swipeActions = _ref.swipeActions,
+    openSwipe = _ref.openSwipe,
+    setOpenSwipe = _ref.setOpenSwipe;
   var globalIndex = startIndex + rowIndexInPage;
   var key = getRowKey(row, globalIndex);
   var actionCellKey = "actions-".concat(key);
@@ -62,9 +81,12 @@ function MobileCard(_ref) {
   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 jsxs("div", {
+  var swipe = React.useMemo(function () {
+    return resolveSwipeActions(swipeActions, row, globalIndex);
+  }, [swipeActions, row, globalIndex]);
+  var card = jsxs("div", {
     style: stripeProps.style,
-    className: cn(stripeProps.className, "border border-line rounded-lg mb-3 shadow-sm overflow-hidden transition-all duration-200", {
+    className: cn(stripeProps.className, "border border-line rounded-lg shadow-sm overflow-hidden transition-all duration-200 motion-reduce:transition-none", !swipe && "mb-3", {
       "cursor-pointer": !!onRowClick,
       "bg-primary-50 border-primary-200": isSelected,
       "hover:shadow-md": !isSelected
@@ -84,19 +106,28 @@ function MobileCard(_ref) {
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
-          className: "p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
+          className: cn(CARD_ICON_BUTTON, "hover:bg-line/60"),
           children: isExpanded ? "▾" : "▸"
-        }), selectable && jsx("input", {
-          type: "checkbox",
-          className: "rounded border-gray-300 h-4 w-4",
-          checked: isSelected,
-          onChange: function onChange(e) {
-            e.stopPropagation();
-            handleSelectRow(row, rowIndexInPage);
-          },
+        }), selectable &&
+        // The label is the 44px hit area around the 20px box.
+        jsx("label", {
+          className: "inline-flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-lg",
           onClick: function onClick(e) {
             return e.stopPropagation();
-          }
+          },
+          children: jsx("input", {
+            type: "checkbox",
+            "aria-label": "Select row ".concat(globalIndex + 1),
+            className: "h-5 w-5 rounded border-line focus-visible:ring-2 focus-visible:ring-primary-500",
+            checked: isSelected,
+            onChange: function onChange(e) {
+              e.stopPropagation();
+              handleSelectRow(row, rowIndexInPage);
+            },
+            onClick: function onClick(e) {
+              return e.stopPropagation();
+            }
+          })
         }), showSerial && jsxs("span", {
           className: "text-sm font-medium",
           children: ["#", globalIndex + 1]
@@ -118,7 +149,7 @@ function MobileCard(_ref) {
               if (action.disabled) return;
               handleOnAction(action, row);
             },
-            className: cn("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200 dark:hover:bg-gray-700"),
+            className: cn(CARD_ICON_BUTTON, action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-line/60"),
             children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsx("span", {
               className: "text-xs",
               children: actionLabel
@@ -134,8 +165,9 @@ function MobileCard(_ref) {
             onClick: function onClick(e) {
               return toggleActions(e, actionCellKey, row);
             },
+            "aria-haspopup": "menu",
             "aria-expanded": activeActionRowKey === actionCellKey,
-            className: "p-1.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700",
+            className: cn(CARD_ICON_BUTTON, "hover:bg-line/60"),
             title: "Actions",
             "aria-label": "Actions",
             children: jsx(MoreVertical, {
@@ -151,6 +183,7 @@ function MobileCard(_ref) {
             menuRef: actionMenuRef,
             anchorEl: activeAnchorEl,
             onClose: closeActionMenu,
+            presentation: actionMenuPresentation,
             theme: theme
           })]
         })]
@@ -184,6 +217,23 @@ function MobileCard(_ref) {
       })
     })]
   }, key);
+  if (!swipe) return card;
+  return jsx(SwipeableListItem, {
+    className: "mb-3 rounded-lg",
+    contentClassName: "rounded-lg",
+    leadingActions: swipe.leading,
+    trailingActions: swipe.trailing,
+    open: (openSwipe === null || openSwipe === void 0 ? void 0 : openSwipe.key) === key ? openSwipe.side : null,
+    onOpenChange: function onOpenChange(side) {
+      return setOpenSwipe === null || setOpenSwipe === void 0 ? void 0 : setOpenSwipe(side ? {
+        key: key,
+        side: side
+      } : null);
+    },
+    moreActionsLabel: "Swipe actions",
+    "data-row-key": key,
+    children: card
+  });
 }
 
-export { MobileCard as default };
+export { MobileCard as default, resolveSwipeActions };

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

@@ -1,23 +1,194 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { Search } from 'lucide-react';
+import { Search, SlidersHorizontal } from 'lucide-react';
+import { cn } from '../../../utils/cn.js';
+import Sheet from '../../feedback/Sheet.js';
 
+var FIELD_CLASSES = "w-full rounded-md border border-line bg-surface px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
+var FOOTER_BUTTON = "inline-flex min-h-11 flex-1 items-center justify-center rounded-lg px-4 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-primary-500 transition-colors duration-fast motion-reduce:transition-none";
+/** Number of non-empty filters (the global search counts as one). */
+function countActiveFilters(filters) {
+  return Object.values(filters || {}).filter(function (v) {
+    return v != null && String(v).trim() !== "";
+  }).length;
+}
 /**
- * Mobile-specific filters panel
+ * Phone presentation: a "Filters" button opening a bottom Sheet. Edits are a
+ * draft until Apply; Clear empties the draft.
  */
-function MobileFilters(_ref) {
-  var showMobileFilters = _ref.showMobileFilters,
-    setShowMobileFilters = _ref.setShowMobileFilters,
-    globalSearch = _ref.globalSearch,
+function FilterSheet(_ref) {
+  var _draft$global;
+  var globalSearch = _ref.globalSearch,
     searchInput = _ref.searchInput,
-    setSearchInput = _ref.setSearchInput,
-    onGlobalKeyDown = _ref.onGlobalKeyDown,
     filterable = _ref.filterable,
     visibleColumns = _ref.visibleColumns,
     filters = _ref.filters,
+    applyFilters = _ref.applyFilters,
     handleFilter = _ref.handleFilter;
   var idPrefix = React.useId();
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var _React$useState3 = React.useState({}),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    draft = _React$useState4[0],
+    setDraft = _React$useState4[1];
+  var active = countActiveFilters(filters);
+  var openSheet = function openSheet() {
+    var _ref2;
+    var next = {};
+    if (filterable) visibleColumns.forEach(function (c) {
+      return next[c.key] = filters[c.key] || "";
+    });
+    if (globalSearch) next.global = (_ref2 = searchInput !== null && searchInput !== void 0 ? searchInput : filters.global) !== null && _ref2 !== void 0 ? _ref2 : "";
+    setDraft(next);
+    setOpen(true);
+  };
+  var apply = function apply(e) {
+    var _e$preventDefault;
+    e === null || e === void 0 || (_e$preventDefault = e.preventDefault) === null || _e$preventDefault === void 0 || _e$preventDefault.call(e);
+    if (applyFilters) applyFilters(draft);else Object.entries(draft).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        k = _ref4[0],
+        v = _ref4[1];
+      return handleFilter(k, v);
+    });
+    setOpen(false);
+  };
+  var clear = function clear() {
+    return setDraft(function (prev) {
+      return Object.fromEntries(Object.keys(prev).map(function (k) {
+        return [k, ""];
+      }));
+    });
+  };
+  var setField = function setField(key, value) {
+    return setDraft(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, key, value));
+    });
+  };
+  var formId = "".concat(idPrefix, "-filters");
+  return jsxs("div", {
+    className: "mb-4 flex items-center justify-between gap-3 p-3",
+    children: [jsxs("button", {
+      type: "button",
+      onClick: openSheet,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      className: cn(FOOTER_BUTTON, "flex-none gap-2 border border-line bg-surface text-foreground hover:bg-line/50"),
+      children: [jsx(SlidersHorizontal, {
+        className: "h-4 w-4",
+        "aria-hidden": "true"
+      }), jsx("span", {
+        children: "Filters"
+      }), active > 0 && jsxs("span", {
+        className: "rounded-full bg-primary-600 px-2 py-0.5 text-xs font-semibold text-primary-50",
+        children: [jsx("span", {
+          className: "sr-only",
+          children: ", active: "
+        }), active]
+      })]
+    }), jsxs(Sheet, {
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
+      },
+      title: "Filters",
+      placement: "bottom",
+      children: [jsx(Sheet.Body, {
+        children: jsxs("form", {
+          id: formId,
+          className: "space-y-4",
+          onSubmit: apply,
+          children: [globalSearch && jsxs("div", {
+            className: "relative",
+            children: [jsx("label", {
+              htmlFor: "".concat(idPrefix, "-global"),
+              className: "mb-1 block text-xs font-medium text-muted",
+              children: "Search"
+            }), jsx("input", {
+              id: "".concat(idPrefix, "-global"),
+              type: "search",
+              placeholder: "Search...",
+              className: cn(FIELD_CLASSES, "pr-10"),
+              value: (_draft$global = draft.global) !== null && _draft$global !== void 0 ? _draft$global : "",
+              onChange: function onChange(e) {
+                return setField("global", e.target.value);
+              }
+            }), jsx(Search, {
+              className: "pointer-events-none absolute bottom-3 right-3 h-4 w-4 text-muted",
+              "aria-hidden": "true"
+            })]
+          }), filterable && visibleColumns.map(function (column) {
+            var _draft$column$key;
+            return jsxs("div", {
+              children: [jsx("label", {
+                htmlFor: "".concat(idPrefix, "-filter-").concat(column.key),
+                className: "mb-1 block text-xs font-medium text-muted",
+                children: column.label
+              }), jsx("input", {
+                id: "".concat(idPrefix, "-filter-").concat(column.key),
+                type: "text",
+                placeholder: "Filter ".concat(column.label),
+                className: FIELD_CLASSES,
+                value: (_draft$column$key = draft[column.key]) !== null && _draft$column$key !== void 0 ? _draft$column$key : "",
+                onChange: function onChange(e) {
+                  return setField(column.key, e.target.value);
+                }
+              })]
+            }, column.key);
+          })]
+        })
+      }), jsxs(Sheet.Footer, {
+        children: [jsx("button", {
+          type: "button",
+          onClick: clear,
+          className: cn(FOOTER_BUTTON, "border border-line bg-surface text-foreground hover:bg-line/50"),
+          children: "Clear"
+        }), jsx("button", {
+          type: "submit",
+          form: formId,
+          className: cn(FOOTER_BUTTON, "bg-primary-600 text-primary-50 hover:bg-primary-700"),
+          children: "Apply"
+        })]
+      })]
+    })]
+  });
+}
+/**
+ * Mobile filters. `presentation="inline"` (default) is the collapsible panel;
+ * `presentation="sheet"` is a Filters button opening a bottom Sheet with an
+ * Apply / Clear footer.
+ */
+function MobileFilters(_ref5) {
+  var showMobileFilters = _ref5.showMobileFilters,
+    setShowMobileFilters = _ref5.setShowMobileFilters,
+    globalSearch = _ref5.globalSearch,
+    searchInput = _ref5.searchInput,
+    setSearchInput = _ref5.setSearchInput,
+    onGlobalKeyDown = _ref5.onGlobalKeyDown,
+    filterable = _ref5.filterable,
+    visibleColumns = _ref5.visibleColumns,
+    filters = _ref5.filters,
+    handleFilter = _ref5.handleFilter,
+    applyFilters = _ref5.applyFilters,
+    _ref5$presentation = _ref5.presentation,
+    presentation = _ref5$presentation === void 0 ? "inline" : _ref5$presentation;
+  var idPrefix = React.useId();
+  if (presentation === "sheet") {
+    return jsx(FilterSheet, {
+      globalSearch: globalSearch,
+      searchInput: searchInput,
+      filterable: filterable,
+      visibleColumns: visibleColumns,
+      filters: filters,
+      applyFilters: applyFilters,
+      handleFilter: handleFilter
+    });
+  }
   return jsxs("div", {
     className: "mb-4 p-3 bg-background rounded-lg",
     children: [jsxs("div", {
@@ -76,4 +247,4 @@ function MobileFilters(_ref) {
   });
 }
 
-export { MobileFilters as default };
+export { countActiveFilters, MobileFilters as default };