@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

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

@@ -0,0 +1,251 @@
+'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 { cn } from '../../../utils/cn.js';
+import { useLatestRef } from '../../../hooks/useLatestRef.js';
+
+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";
+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,
+    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];
+  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;
+      }
+      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();
+    },
+    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-gray-400 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-gray-400" : ["text-gray-700 hover:text-gray-900", menuItemHover, isFocused ? "bg-gray-100 text-gray-900 ring-1 ring-gray-300" : ""]),
+            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-gray-500 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);
+}
+
+export { ActionMenu as default };

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

@@ -0,0 +1,55 @@
+'use client';
+import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../../utils/cn.js';
+
+var DEFAULT_ROW_HOVER = "bg-gray-50";
+/**
+ * Column visibility toggle menu
+ */
+function ColumnMenu(_ref) {
+  var _theme$rowHover;
+  var id = _ref.id,
+    columns = _ref.columns,
+    onToggle = _ref.onToggle,
+    menuRef = _ref.menuRef,
+    theme = _ref.theme;
+  var rowHover = (_theme$rowHover = theme === null || theme === void 0 ? void 0 : theme.rowHover) !== null && _theme$rowHover !== void 0 ? _theme$rowHover : DEFAULT_ROW_HOVER;
+  return jsxs("div", {
+    id: id,
+    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",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    children: [jsx("p", {
+      className: "text-sm font-medium text-center mb-2",
+      children: "Show / hide columns"
+    }), jsx("div", {
+      className: "max-h-56 overflow-auto",
+      children: columns.map(function (col) {
+        return jsxs("label", {
+          className: cn(_defineProperty({
+            "flex cursor-pointer items-center gap-2 px-2 py-1.5 rounded": true
+          }, "hover:" + rowHover, true)),
+          children: [jsx("input", {
+            type: "checkbox",
+            checked: col.isVisible !== false,
+            onChange: function onChange() {
+              return onToggle(col.key);
+            },
+            className: "rounded"
+          }), jsx("span", {
+            className: "text-sm font-normal",
+            children: col.label
+          })]
+        }, col.key);
+      })
+    })]
+  });
+}
+
+export { ColumnMenu as default };

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

@@ -0,0 +1,157 @@
+'use client';
+import { typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Unified FieldInput component for cell editing and new rows.
+ * Reuses existing onRender pattern and supports text, number, select, date, boolean, textarea.
+ */
+function FieldInput(_ref) {
+  var column = _ref.column,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    onKeyDown = _ref.onKeyDown,
+    _ref$isEditing = _ref.isEditing,
+    isEditing = _ref$isEditing === void 0 ? true : _ref$isEditing,
+    _ref$row = _ref.row,
+    row = _ref$row === void 0 ? {} : _ref$row,
+    _ref$rowIndex = _ref.rowIndex,
+    rowIndex = _ref$rowIndex === void 0 ? 0 : _ref$rowIndex,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
+  var currentValue = value !== null && value !== void 0 ? value : "";
+  var inputType = column.type || column.inputType || "text";
+  var stopProp = function stopProp(e) {
+    e.stopPropagation();
+  };
+  // Check if custom onRender renderer is provided on the column definition
+  if (typeof column.onRender === "function") {
+    return jsx("div", {
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      children: column.onRender(row, rowIndex, column, {
+        value: currentValue,
+        onChange: function onChange(newVal) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(newVal);
+        },
+        onKeyDown: onKeyDown,
+        isEditing: isEditing
+      })
+    });
+  }
+  // Textarea / Longtext
+  if (inputType === "textarea" || inputType === "longtext") {
+    return jsx("textarea", {
+      autoFocus: autoFocus,
+      rows: 2,
+      value: currentValue,
+      onChange: function onChange(e) {
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+      },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      placeholder: "Enter ".concat(column.label || column.key, "..."),
+      className: cn("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)
+    });
+  }
+  // Select / Dropdown
+  if (inputType === "select" || inputType === "dropdown") {
+    var options = Array.isArray(column.options) ? column.options.map(function (opt) {
+      return _typeof(opt) === "object" ? opt : {
+        label: opt,
+        value: opt
+      };
+    }) : [];
+    return jsxs("select", {
+      autoFocus: autoFocus,
+      value: currentValue,
+      onChange: function onChange(e) {
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+      },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className),
+      children: [jsxs("option", {
+        value: "",
+        children: ["Select ", column.label || column.key]
+      }), options.map(function (opt) {
+        return jsx("option", {
+          value: opt.value,
+          children: opt.label
+        }, String(opt.value));
+      })]
+    });
+  }
+  // Checkbox / Boolean
+  if (inputType === "checkbox" || inputType === "boolean") {
+    var checked = Boolean(currentValue);
+    return jsx("div", {
+      className: cn("flex items-center justify-center py-1", className),
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      children: jsx("input", {
+        type: "checkbox",
+        autoFocus: autoFocus,
+        checked: checked,
+        onChange: function onChange(e) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.checked);
+        },
+        onKeyDown: onKeyDown,
+        className: "w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500 cursor-pointer"
+      })
+    });
+  }
+  // Date
+  if (inputType === "date") {
+    return jsx("input", {
+      type: "date",
+      autoFocus: autoFocus,
+      value: currentValue,
+      onChange: function onChange(e) {
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+      },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+    });
+  }
+  // Number
+  if (inputType === "number") {
+    return jsx("input", {
+      type: "number",
+      autoFocus: autoFocus,
+      value: currentValue,
+      onChange: function onChange(e) {
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value === "" ? "" : Number(e.target.value));
+      },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      placeholder: "Enter ".concat(column.label || column.key, "..."),
+      className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+    });
+  }
+  // Default: Text
+  return jsx("input", {
+    type: "text",
+    autoFocus: autoFocus,
+    value: currentValue,
+    onChange: function onChange(e) {
+      return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
+    },
+    onKeyDown: onKeyDown,
+    onClick: stopProp,
+    onMouseDown: stopProp,
+    placeholder: "Enter ".concat(column.label || column.key, "..."),
+    className: cn("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
+  });
+}
+
+export { FieldInput as default };

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

@@ -0,0 +1,187 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../../utils/cn.js';
+import { MoreVertical } from 'lucide-react';
+import ActionMenu from './ActionMenu.js';
+import { getRowKey, resolveActions, rowHasDetails, getActionLabelText } from './helpers.js';
+
+/**
+ * Mobile card view for a single table row
+ */
+function MobileCard(_ref) {
+  var row = _ref.row,
+    rowIndexInPage = _ref.rowIndexInPage,
+    startIndex = _ref.startIndex,
+    selectedRows = _ref.selectedRows,
+    expandedRows = _ref.expandedRows,
+    rowClass = _ref.rowClass,
+    stripedRows = _ref.stripedRows,
+    stripedColors = _ref.stripedColors,
+    theme = _ref.theme,
+    onRowClick = _ref.onRowClick,
+    hasDetails = _ref.hasDetails,
+    selectable = _ref.selectable,
+    showSerial = _ref.showSerial,
+    withAction = _ref.withAction,
+    visibleColumns = _ref.visibleColumns,
+    cellClass = _ref.cellClass,
+    DetailsComponent = _ref.DetailsComponent,
+    actionsToUse = _ref.actionsToUse,
+    activeActionRowKey = _ref.activeActionRowKey,
+    activeAnchorEl = _ref.activeAnchorEl,
+    registerActionButton = _ref.registerActionButton,
+    actionMenuRef = _ref.actionMenuRef,
+    toggleExpandRow = _ref.toggleExpandRow,
+    handleSelectRow = _ref.handleSelectRow,
+    toggleActions = _ref.toggleActions,
+    handleOnAction = _ref.handleOnAction,
+    closeActionMenu = _ref.closeActionMenu,
+    renderCell = _ref.renderCell;
+  var globalIndex = startIndex + rowIndexInPage;
+  var key = getRowKey(row, globalIndex);
+  var actionCellKey = "actions-".concat(key);
+  var isSelected = selectedRows.has(key);
+  var isExpanded = expandedRows.has(key);
+  var _React$useMemo = React.useMemo(function () {
+      return resolveActions(actionsToUse, row, globalIndex);
+    }, [actionsToUse, row, globalIndex]),
+    inlineActions = _React$useMemo.inlineActions,
+    menuActions = _React$useMemo.menuActions;
+  // Unlike the desktop row there is no column grid to keep aligned, so a
+  // non-qualifying row simply renders no toggle and no placeholder.
+  var showDetailsToggle = rowHasDetails(hasDetails, row, globalIndex);
+  var extraRowClass = typeof rowClass === "function" ? rowClass({
+    row: row,
+    rowIndex: globalIndex
+  }) : "";
+  var safeExtraRowClass = typeof extraRowClass === "string" ? extraRowClass.trim() : "";
+  // The header strip only renders when it has something to hold; otherwise a
+  // card would open with an empty grey band above its first field.
+  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;
+  return jsxs("div", {
+    style: stripeBg ? {
+      backgroundColor: stripeBg
+    } : undefined,
+    className: cn("border 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
+    }, safeExtraRowClass),
+    onClick: function onClick() {
+      return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+    },
+    children: [showHeader && jsxs("div", {
+      className: "flex items-center justify-between p-4 border-b bg-gray-50",
+      children: [jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [showDetailsToggle && jsx("button", {
+          type: "button",
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            toggleExpandRow(row, rowIndexInPage);
+          },
+          "aria-expanded": isExpanded,
+          "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
+          className: "p-1 rounded hover:bg-gray-200",
+          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);
+          },
+          onClick: function onClick(e) {
+            return e.stopPropagation();
+          }
+        }), showSerial && jsxs("span", {
+          className: "text-sm font-medium",
+          children: ["#", globalIndex + 1]
+        })]
+      }), hasActions && jsxs("div", {
+        className: "flex items-center gap-1",
+        children: [inlineActions.map(function (action, idx) {
+          var _action$icon, _action$name;
+          var actionLabel = getActionLabelText(action);
+          return jsx("button", {
+            type: "button",
+            title: actionLabel,
+            "aria-label": actionLabel,
+            disabled: action.disabled,
+            onClick: function onClick(e) {
+              // The card root binds onRowClick and there is no stopping
+              // ancestor here, unlike the desktop actions <td>.
+              e.stopPropagation();
+              if (action.disabled) return;
+              handleOnAction(action, row);
+            },
+            className: cn("p-1.5 rounded", action.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-200"),
+            children: action.render ? action.render(row) : (_action$icon = action.icon) !== null && _action$icon !== void 0 ? _action$icon : jsx("span", {
+              className: "text-xs",
+              children: actionLabel
+            })
+          }, (_action$name = action.name) !== null && _action$name !== void 0 ? _action$name : "inline-".concat(idx));
+        }), menuActions.length > 0 && jsxs("div", {
+          className: "relative",
+          children: [jsx("button", {
+            ref: function ref(el) {
+              return registerActionButton === null || registerActionButton === void 0 ? void 0 : registerActionButton(actionCellKey, el);
+            },
+            onClick: function onClick(e) {
+              return toggleActions(e, actionCellKey, row);
+            },
+            "aria-expanded": activeActionRowKey === actionCellKey,
+            className: "p-1.5 rounded hover:bg-gray-200",
+            title: "Actions",
+            children: jsx(MoreVertical, {
+              className: "h-4 w-4"
+            })
+          }), activeActionRowKey === actionCellKey && jsx(ActionMenu, {
+            actions: menuActions,
+            row: row,
+            onAction: function onAction(action) {
+              return handleOnAction(action, row);
+            },
+            menuRef: actionMenuRef,
+            anchorEl: activeAnchorEl,
+            onClose: closeActionMenu,
+            theme: theme
+          })]
+        })]
+      })]
+    }), jsx("div", {
+      className: "p-4",
+      children: visibleColumns.map(function (column, colIndex) {
+        var extraCellClass = typeof cellClass === "function" ? cellClass({
+          row: row,
+          rowIndex: globalIndex,
+          column: column,
+          columnIndex: colIndex
+        }) : "";
+        var safeExtraCellClass = typeof extraCellClass === "string" ? extraCellClass.trim() : "";
+        return jsxs("div", {
+          className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
+          children: [jsx("div", {
+            className: "text-xs font-medium text-primary-500 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            children: column.label
+          }), jsx("div", {
+            className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
+            children: renderCell(column, row, globalIndex)
+          })]
+        }, column.key);
+      })
+    }), showDetailsToggle && isExpanded && DetailsComponent && jsx("div", {
+      className: "border-t bg-gray-50 p-4",
+      children: jsx(DetailsComponent, {
+        row: row,
+        index: globalIndex
+      })
+    })]
+  }, key);
+}
+
+export { MobileCard as default };