@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/core/internal/Calendar.js

@@ -0,0 +1,381 @@
+'use client';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useState, useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { parseISO, startOfDay, isBefore, isAfter, startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval, format, isSameMonth, isToday, isSameDay, addMonths, subMonths, addDays } from 'date-fns';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../utils/cn.js';
+import { TOUCH_TARGET } from '../../../utils/touchTarget.js';
+import Sheet from '../../feedback/Sheet.js';
+
+// Internal (not exported). The month calendar shared by DatePicker and
+// DateRangePicker: month header, weekday row and an ARIA grid of days with a
+// roving tabindex, arrow/Home/End/PageUp/PageDown navigation and (in sheet
+// presentation) a horizontal swipe to change month.
+var WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var SWIPE_THRESHOLD = 50; // px of horizontal travel that changes month
+var SWIPE_RATIO = 1.5; // horizontal travel must beat vertical by this much
+/** Date | ISO string | null → Date | null. */
+function normalizeDate(d) {
+  if (!d) return null;
+  if (typeof d === "string") {
+    var parsed = parseISO(d);
+    return Number.isNaN(parsed.getTime()) ? null : parsed;
+  }
+  return d instanceof Date ? d : null;
+}
+/** Builds an `isDisabled(date)` predicate from optional min / max bounds. */
+function makeIsDisabled(minDate, maxDate) {
+  var minD = normalizeDate(minDate);
+  var maxD = normalizeDate(maxDate);
+  var min = minD ? startOfDay(minD) : null;
+  var max = maxD ? startOfDay(maxD) : null;
+  return function (date) {
+    var d = startOfDay(date);
+    if (min && isBefore(d, min)) return true;
+    if (max && isAfter(d, max)) return true;
+    return false;
+  };
+}
+/** Is `d` within [a, b] (either order), by calendar day. */
+function isBetween(d, a, b) {
+  if (!a || !b) return false;
+  var _ref = isBefore(b, a) ? [b, a] : [a, b],
+    _ref2 = _slicedToArray(_ref, 2),
+    lo = _ref2[0],
+    hi = _ref2[1];
+  var day = startOfDay(d);
+  return !isBefore(day, startOfDay(lo)) && !isAfter(day, startOfDay(hi));
+}
+/** Pointer-event swipe on the grid: left → next month, right → previous. */
+function useMonthSwipe(enabled, onSwipe) {
+  var start = useRef(null);
+  var swiped = useRef(false);
+  if (!enabled) return {};
+  return {
+    onPointerDown: function onPointerDown(e) {
+      swiped.current = false;
+      start.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    },
+    onPointerUp: function onPointerUp(e) {
+      var s = start.current;
+      start.current = null;
+      if (!s) return;
+      var dx = e.clientX - s.x;
+      var dy = e.clientY - s.y;
+      if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy) * SWIPE_RATIO) return;
+      swiped.current = true;
+      onSwipe(dx < 0 ? 1 : -1);
+    },
+    onPointerCancel: function onPointerCancel() {
+      start.current = null;
+    },
+    // A swipe that ends over a day must not also select it.
+    onClickCapture: function onClickCapture(e) {
+      if (!swiped.current) return;
+      swiped.current = false;
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+}
+/**
+ * @param {object} props
+ * @param {Date} props.month - any date in the visible month.
+ * @param {(month: Date) => void} props.onMonthChange
+ * @param {0|1} [props.weekStartsOn=0]
+ * @param {(d: Date) => boolean} props.isDisabled
+ * @param {(d: Date) => { selected?: boolean, edge?: boolean, inRange?: boolean }} props.getDayState
+ *   - `selected` sets aria-selected; `edge` paints the solid (selected / range end) style;
+ *   `inRange` paints the in-between tint.
+ * @param {(d: Date) => void} props.onSelect
+ * @param {(d: Date | null) => void} [props.onPreview] - hovered / focused day, null on leave.
+ * @param {Date|null} [props.preferredDate] - tabbable day when nothing was focused yet.
+ * @param {'popover'|'sheet'} [props.size='popover'] - sheet uses 44px day cells.
+ * @param {boolean} [props.fullDateLabels=false] - aria-label each day with its full date.
+ * @param {boolean} [props.autoFocus=false] - focus the tabbable day on mount.
+ * @param {boolean} [props.swipe=false] - horizontal swipe changes month.
+ * @param {boolean} [props.multiSelectable=false]
+ * @param {object} [props.locale] - date-fns locale for the day labels.
+ * @param {React.Ref} [props.gridRef]
+ */
+function Calendar(_ref3) {
+  var month = _ref3.month,
+    onMonthChange = _ref3.onMonthChange,
+    _ref3$weekStartsOn = _ref3.weekStartsOn,
+    weekStartsOn = _ref3$weekStartsOn === void 0 ? 0 : _ref3$weekStartsOn,
+    isDisabled = _ref3.isDisabled,
+    getDayState = _ref3.getDayState,
+    onSelect = _ref3.onSelect,
+    onPreview = _ref3.onPreview,
+    _ref3$preferredDate = _ref3.preferredDate,
+    preferredDate = _ref3$preferredDate === void 0 ? null : _ref3$preferredDate,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "popover" : _ref3$size,
+    _ref3$fullDateLabels = _ref3.fullDateLabels,
+    fullDateLabels = _ref3$fullDateLabels === void 0 ? false : _ref3$fullDateLabels,
+    _ref3$autoFocus = _ref3.autoFocus,
+    autoFocus = _ref3$autoFocus === void 0 ? false : _ref3$autoFocus,
+    _ref3$swipe = _ref3.swipe,
+    swipe = _ref3$swipe === void 0 ? false : _ref3$swipe,
+    _ref3$multiSelectable = _ref3.multiSelectable,
+    multiSelectable = _ref3$multiSelectable === void 0 ? false : _ref3$multiSelectable,
+    locale = _ref3.locale,
+    gridRef = _ref3.gridRef;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedDate = _useState2[0],
+    setFocusedDate = _useState2[1];
+  // Set when a keyboard action / mount should move DOM focus to the active day.
+  var pendingFocus = useRef(autoFocus);
+  var ownGridRef = useRef(null);
+  var grid = gridRef || ownGridRef;
+  var sheet = size === "sheet";
+  var gridStart = startOfWeek(startOfMonth(month), {
+    weekStartsOn: weekStartsOn
+  });
+  var gridEnd = endOfWeek(endOfMonth(month), {
+    weekStartsOn: weekStartsOn
+  });
+  var days = eachDayOfInterval({
+    start: gridStart,
+    end: gridEnd
+  });
+  var weeks = [];
+  for (var i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+  // Roving tabindex: exactly one enabled day is tabbable. Priority:
+  // keyboard-focused ?? preferred (selected) ?? today ?? first enabled day.
+  var usable = function usable(d) {
+    return d && isSameMonth(d, month) && !isDisabled(d);
+  };
+  var today = new Date();
+  var activeDate = null;
+  if (usable(focusedDate)) activeDate = focusedDate;else if (usable(preferredDate)) activeDate = preferredDate;else if (usable(today)) activeDate = today;else activeDate = days.find(function (d) {
+    return usable(d);
+  }) || days.find(function (d) {
+    return !isDisabled(d);
+  }) || null;
+  useEffect(function () {
+    var _grid$current, _grid$current$querySe, _grid$current$querySe2;
+    if (!pendingFocus.current) return;
+    pendingFocus.current = false;
+    (_grid$current = grid.current) === null || _grid$current === void 0 || (_grid$current$querySe = _grid$current.querySelector) === null || _grid$current$querySe === void 0 || (_grid$current$querySe = _grid$current$querySe.call(_grid$current, '[data-active-day="true"]')) === null || _grid$current$querySe === void 0 || (_grid$current$querySe2 = _grid$current$querySe.focus) === null || _grid$current$querySe2 === void 0 || _grid$current$querySe2.call(_grid$current$querySe);
+  });
+  var moveFocusTo = function moveFocusTo(date) {
+    if (!date || isDisabled(date)) return;
+    if (!isSameMonth(date, month)) onMonthChange(date);
+    setFocusedDate(date);
+    onPreview === null || onPreview === void 0 || onPreview(date);
+    pendingFocus.current = true;
+  };
+  var changeMonth = function changeMonth(step) {
+    var next = step > 0 ? addMonths(month, 1) : subMonths(month, 1);
+    onMonthChange(next);
+  };
+  var swipeProps = useMonthSwipe(swipe, changeMonth);
+  var handleKeyDown = function handleKeyDown(e, day, idx) {
+    var keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", "Enter"];
+    if (!keys.includes(e.key)) return;
+    e.preventDefault();
+    var rowStart = Math.floor(idx / 7) * 7;
+    switch (e.key) {
+      case "ArrowLeft":
+        moveFocusTo(addDays(day, -1));
+        break;
+      case "ArrowRight":
+        moveFocusTo(addDays(day, 1));
+        break;
+      case "ArrowUp":
+        moveFocusTo(addDays(day, -7));
+        break;
+      case "ArrowDown":
+        moveFocusTo(addDays(day, 7));
+        break;
+      case "PageUp":
+        moveFocusTo(subMonths(day, 1));
+        break;
+      case "PageDown":
+        moveFocusTo(addMonths(day, 1));
+        break;
+      case "Home":
+        moveFocusTo(days[rowStart]);
+        break;
+      case "End":
+        moveFocusTo(days[Math.min(days.length - 1, rowStart + 6)]);
+        break;
+      case "Enter":
+        if (!isDisabled(day)) onSelect(day);
+        break;
+    }
+  };
+  var navClass = cn("inline-flex items-center justify-center rounded-md p-1 hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500", TOUCH_TARGET);
+  return jsxs("div", {
+    children: [jsxs("div", {
+      className: cn("flex items-center justify-between", sheet ? "mb-3" : "mb-2"),
+      children: [jsx("button", {
+        type: "button",
+        className: navClass,
+        onClick: function onClick() {
+          return changeMonth(-1);
+        },
+        "aria-label": "Previous month",
+        children: jsx(ChevronLeft, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      }), jsx("h3", {
+        className: "text-sm font-medium",
+        "aria-live": "polite",
+        children: format(month, "MMMM yyyy")
+      }), jsx("button", {
+        type: "button",
+        className: navClass,
+        onClick: function onClick() {
+          return changeMonth(1);
+        },
+        "aria-label": "Next month",
+        children: jsx(ChevronRight, {
+          className: "h-4 w-4",
+          "aria-hidden": "true"
+        })
+      })]
+    }), jsx("div", {
+      className: "mb-1 grid grid-cols-7 gap-1",
+      "aria-hidden": "true",
+      children: Array.from({
+        length: 7
+      }).map(function (_, i) {
+        var label = WEEKDAYS[(i + weekStartsOn) % 7];
+        return jsx("div", {
+          className: "p-2 text-center text-xs font-medium text-primary-500",
+          children: label
+        }, label);
+      })
+    }), jsx("div", _objectSpread2(_objectSpread2({
+      ref: grid,
+      role: "grid",
+      "aria-label": format(month, "MMMM yyyy"),
+      "aria-multiselectable": multiSelectable || undefined,
+      "data-swipe": swipe ? "" : undefined,
+      className: cn("grid grid-cols-7", sheet ? "touch-pan-y gap-y-1" : "gap-1"),
+      onMouseLeave: onPreview ? function () {
+        return onPreview(null);
+      } : undefined
+    }, swipeProps), {}, {
+      children: weeks.map(function (week, w) {
+        return jsx("div", {
+          role: "row",
+          className: "contents",
+          children: week.map(function (day, i) {
+            var idx = w * 7 + i;
+            var state = getDayState(day) || {};
+            var disabled = isDisabled(day);
+            var currentMonth = isSameMonth(day, month);
+            var todayDate = isToday(day);
+            var active = activeDate != null && isSameDay(day, activeDate);
+            return jsx("button", {
+              type: "button",
+              role: "gridcell",
+              tabIndex: active ? 0 : -1,
+              "data-active-day": active ? "true" : undefined,
+              "data-in-range": state.inRange ? "" : undefined,
+              "aria-selected": Boolean(state.selected),
+              "aria-current": todayDate ? "date" : undefined,
+              "aria-label": fullDateLabels ? format(day, "EEEE, d MMMM yyyy", {
+                locale: locale
+              }) : undefined,
+              disabled: disabled,
+              onKeyDown: function onKeyDown(e) {
+                return handleKeyDown(e, day, idx);
+              },
+              onFocus: function onFocus() {
+                if (!focusedDate || !isSameDay(focusedDate, day)) setFocusedDate(day);
+                onPreview === null || onPreview === void 0 || onPreview(day);
+              },
+              onMouseEnter: onPreview ? function () {
+                return onPreview(day);
+              } : undefined,
+              onClick: function onClick() {
+                return !disabled && onSelect(day);
+              },
+              className: cn("mx-auto rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", sheet ? "h-11 w-full min-w-0 text-base" : "h-9 w-full max-w-9", {
+                "text-primary-400": !currentMonth,
+                "bg-primary-600 text-primary-50": state.edge,
+                "bg-primary-200": state.inRange && !state.edge,
+                "bg-primary-100 text-primary-600": todayDate && !state.edge && !state.inRange,
+                "hover:bg-background": currentMonth && !state.edge && !state.inRange && !disabled,
+                "cursor-not-allowed opacity-50": disabled
+              }),
+              children: format(day, "d")
+            }, day.toISOString());
+          })
+        }, w);
+      })
+    }))]
+  });
+}
+/** Popover surface classes: fluid width that never overflows a 320px screen. */
+var POPOVER_CLASSES = "z-popover w-[min(20rem,calc(100vw-2rem))] rounded-md border border-line bg-surface p-4 shadow-lg";
+/**
+ * A ref-like object for Sheet's `initialFocus`: the grid's tabbable day.
+ * Read lazily (when the sheet opens), never during render.
+ */
+function useActiveDayFocusRef(gridRef) {
+  return useMemo(function () {
+    return {
+      get current() {
+        var _gridRef$current$quer, _gridRef$current, _gridRef$current$quer2;
+        return (_gridRef$current$quer = (_gridRef$current = gridRef.current) === null || _gridRef$current === void 0 || (_gridRef$current$quer2 = _gridRef$current.querySelector) === null || _gridRef$current$quer2 === void 0 ? void 0 : _gridRef$current$quer2.call(_gridRef$current, '[data-active-day="true"]')) !== null && _gridRef$current$quer !== void 0 ? _gridRef$current$quer : null;
+      }
+    };
+  }, [gridRef]);
+}
+/**
+ * Where the calendar lives: a bottom Sheet, or an anchored popover positioned
+ * by useFloatingPosition (fixed strategy, `z-popover`, fluid width).
+ */
+function PickerSurface(_ref4) {
+  var mode = _ref4.mode,
+    open = _ref4.open,
+    onClose = _ref4.onClose,
+    title = _ref4.title,
+    _ref4$portal = _ref4.portal,
+    portal = _ref4$portal === void 0 ? false : _ref4$portal,
+    floatingRef = _ref4.floatingRef,
+    floatingStyles = _ref4.floatingStyles,
+    _ref4$isPositioned = _ref4.isPositioned,
+    isPositioned = _ref4$isPositioned === void 0 ? true : _ref4$isPositioned,
+    initialFocus = _ref4.initialFocus,
+    sheetFooter = _ref4.sheetFooter,
+    children = _ref4.children;
+  if (mode === "sheet") {
+    return jsxs(Sheet, {
+      open: open,
+      onClose: onClose,
+      title: title,
+      initialFocus: initialFocus,
+      children: [jsx(Sheet.Body, {
+        children: children
+      }), sheetFooter ? jsx(Sheet.Footer, {
+        className: "justify-between",
+        children: sheetFooter
+      }) : null]
+    });
+  }
+  if (!open) return null;
+  var popup = jsx("div", {
+    ref: floatingRef,
+    className: cn(POPOVER_CLASSES, !isPositioned && "opacity-0"),
+    role: "dialog",
+    "aria-modal": "false",
+    style: floatingStyles,
+    children: children
+  });
+  return portal && typeof document !== "undefined" ? /*#__PURE__*/ReactDOM.createPortal(popup, document.body) : popup;
+}
+
+export { Calendar, POPOVER_CLASSES, PickerSurface, SWIPE_THRESHOLD, isBetween, makeIsDisabled, normalizeDate, useActiveDayFocusRef };

package/dist/esm/components/core/menu/ActionMenuSurface.js

@@ -0,0 +1,110 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { usePresentation } from '../../../hooks/usePresentation.js';
+import MenuPopover from './MenuPopover.js';
+import ActionSheetMenu from './ActionSheetMenu.js';
+
+// Internal (not exported). The one action-menu primitive behind
+// ThreeDotPopover and Table's row ActionMenu (DTUI-36). It resolves
+// `presentation` (ADR 0001) and renders either:
+//   - popover: a portaled floating role="menu" next to `anchorEl`, or
+//   - sheet:   an iOS-style action sheet in a bottom Sheet.
+// The caller owns the open state and the trigger.
+var RETURN_FOCUS_REASONS = new Set(["select", "escape", "tab", "cancel"]);
+/**
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {(reason: string) => void} props.onClose - reason is one of 'select',
+ *   'escape', 'outside', 'tab', 'scroll' (popover) or 'cancel', 'backdrop',
+ *   'drag' (sheet).
+ * @param {HTMLElement|null} props.anchorEl - trigger element; focus returns to
+ *   it after select / Escape / Tab / Cancel.
+ * @param {Array<object>} props.items - normalized items (see menuItems.js).
+ * @param {'auto'|'popover'|'sheet'} [props.presentation='auto']
+ * @param {string} [props.placement='bottom-start'] - popover placement.
+ * @param {'first'|'last'} [props.initialFocus='first'] - popover item focused on open.
+ * @param {boolean} [props.closeOnSelect=true]
+ * @param {boolean} [props.closeOnScroll=false] - popover only.
+ * @param {React.Ref} [props.menuRef] - receives the menu (popover) or sheet panel element.
+ * @param {string} [props.menuClassName] - popover menu classes.
+ * @param {string} [props.itemClassName] - classes for every item (both modes).
+ * @param {string} [props.label] - accessible name of the menu / sheet.
+ * @param {React.ReactNode} [props.sheetTitle] - optional heading in the sheet.
+ * @param {React.ReactNode} [props.cancelLabel='Cancel'] - sheet Cancel button text.
+ * @param {React.ReactNode} [props.emptyLabel='No actions']
+ */
+function ActionMenuSurface(_ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    anchorEl = _ref.anchorEl,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    _ref$initialFocus = _ref.initialFocus,
+    initialFocus = _ref$initialFocus === void 0 ? "first" : _ref$initialFocus,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    _ref$closeOnScroll = _ref.closeOnScroll,
+    closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    menuRef = _ref.menuRef,
+    id = _ref.id,
+    menuClassName = _ref.menuClassName,
+    itemClassName = _ref.itemClassName,
+    label = _ref.label,
+    sheetTitle = _ref.sheetTitle,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
+    _ref$emptyLabel = _ref.emptyLabel,
+    emptyLabel = _ref$emptyLabel === void 0 ? "No actions" : _ref$emptyLabel;
+  var mode = usePresentation(presentation);
+  var list = Array.isArray(items) ? items : [];
+  var close = function close(reason) {
+    var _anchorEl$focus;
+    onClose === null || onClose === void 0 || onClose(reason);
+    if (RETURN_FOCUS_REASONS.has(reason)) anchorEl === null || anchorEl === void 0 || (_anchorEl$focus = anchorEl.focus) === null || _anchorEl$focus === void 0 || _anchorEl$focus.call(anchorEl, {
+      preventScroll: true
+    });
+  };
+  var selectItem = function selectItem(item) {
+    var _item$onSelect;
+    if (item.disabled) return;
+    (_item$onSelect = item.onSelect) === null || _item$onSelect === void 0 || _item$onSelect.call(item);
+    if (closeOnSelect) close("select");
+  };
+  if (mode === "sheet") {
+    return jsx(ActionSheetMenu, {
+      ref: menuRef,
+      open: Boolean(open),
+      onClose: close,
+      groups: [list],
+      onSelectItem: selectItem,
+      title: sheetTitle,
+      label: label || "Actions",
+      cancelLabel: cancelLabel,
+      emptyLabel: emptyLabel,
+      itemClassName: itemClassName
+    });
+  }
+  if (!open) return null;
+  return jsx(MenuPopover, {
+    anchorEl: anchorEl,
+    items: list,
+    onSelectItem: selectItem,
+    onRequestClose: close,
+    placement: placement,
+    initialFocus: initialFocus,
+    closeOnScroll: closeOnScroll,
+    menuRef: menuRef,
+    id: id,
+    label: label,
+    className: menuClassName,
+    itemClassName: itemClassName,
+    emptyLabel: emptyLabel
+  });
+}
+
+export { ActionMenuSurface as default };

package/dist/esm/components/core/menu/ActionSheetMenu.js

@@ -0,0 +1,140 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import { cn } from '../../../utils/cn.js';
+import Sheet from '../../feedback/Sheet.js';
+import { isDestructive } from './menuItems.js';
+
+var _excluded = ["open", "onClose", "groups", "onSelectItem", "title", "message", "label", "cancelLabel", "emptyLabel", "itemClassName", "className"];
+// Internal. The one action-sheet implementation: an iOS-style action sheet in
+// a bottom Sheet. Actions sit in rounded cards (one card per group),
+// destructive actions use the error tone, and a separate Cancel button closes
+// the sheet. Rows are at least 48px tall. Shared by the phone presentation of
+// ThreeDotPopover / Table's row menu (via ActionMenuSurface) and the public
+// `ActionSheet` (DTUI-53), so it depends only on Sheet and normalized items.
+var CARD_CLASSES = "overflow-hidden rounded-card bg-surface divide-y divide-line";
+var ROW_CLASSES = "flex min-h-12 w-full items-center justify-center gap-3 px-4 py-2 text-center text-base outline-none transition-colors motion-reduce:transition-none active:bg-line/50 focus-visible:bg-line/50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500";
+function rowToneClass(item) {
+  if (item.disabled) return "cursor-not-allowed opacity-50 text-muted";
+  if (isDestructive(item)) return "text-error-600 dark:text-error-400";
+  return "text-primary-600 dark:text-primary-400";
+}
+/**
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {(reason: string) => void} props.onClose - 'cancel' | 'escape' | 'backdrop' | 'drag'.
+ * @param {Array<Array<object>>} props.groups - normalized items, one card per group.
+ * @param {(item: object) => void} props.onSelectItem
+ * @param {React.ReactNode} [props.title] - small muted heading at the top of the first card.
+ * @param {React.ReactNode} [props.message] - muted text under the title (the sheet's description).
+ * @param {string} [props.label] - accessible name of the sheet; without it the
+ *   title names the sheet, and with neither it is "Actions".
+ * @param {React.ReactNode} [props.cancelLabel='Cancel']
+ * Other props are forwarded to the Sheet panel.
+ */
+var ActionSheetMenu = /*#__PURE__*/React.forwardRef(function ActionSheetMenu(_ref, ref) {
+  var open = _ref.open,
+    onClose = _ref.onClose,
+    groups = _ref.groups,
+    onSelectItem = _ref.onSelectItem,
+    title = _ref.title,
+    message = _ref.message,
+    label = _ref.label,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
+    _ref$emptyLabel = _ref.emptyLabel,
+    emptyLabel = _ref$emptyLabel === void 0 ? "No actions" : _ref$emptyLabel,
+    itemClassName = _ref.itemClassName,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var nonEmpty = (groups || []).filter(function (g) {
+    return Array.isArray(g) && g.length > 0;
+  });
+  var id = useId();
+  var titleId = "action-sheet-title-".concat(id);
+  var messageId = "action-sheet-message-".concat(id);
+  var hasTitle = title != null;
+  var hasMessage = message != null;
+  var labelledByTitle = label == null && hasTitle;
+  var header = hasTitle || hasMessage ? jsxs("div", {
+    className: "px-4 py-3 text-center",
+    children: [hasTitle && jsx("div", {
+      id: titleId,
+      className: cn("text-xs text-muted", hasMessage && "font-semibold"),
+      children: title
+    }), hasMessage && jsx("div", {
+      id: messageId,
+      className: cn("text-xs text-muted", hasTitle && "mt-1"),
+      children: message
+    })]
+  }) : null;
+  return jsx(Sheet, _objectSpread2(_objectSpread2({
+    ref: ref,
+    open: open,
+    onClose: onClose,
+    handle: false,
+    showCloseButton: false,
+    "aria-label": labelledByTitle ? undefined : label !== null && label !== void 0 ? label : "Actions",
+    "aria-labelledby": labelledByTitle ? titleId : undefined,
+    "aria-describedby": hasMessage ? messageId : undefined,
+    "data-presentation": "sheet",
+    // The panel is a transparent tray; the cards carry the surface.
+    className: cn("border-0 bg-transparent !shadow-none", className)
+  }, rest), {}, {
+    children: jsxs(Sheet.Body, {
+      className: "flex flex-col gap-2 p-2",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      children: [nonEmpty.length === 0 ? jsxs("div", {
+        className: CARD_CLASSES,
+        children: [header, jsx("div", {
+          className: "flex min-h-12 items-center justify-center px-4 text-sm italic text-muted",
+          children: emptyLabel
+        })]
+      }) : nonEmpty.map(function (group, g) {
+        return jsxs("div", {
+          role: "group",
+          className: CARD_CLASSES,
+          children: [g === 0 && header, group.map(function (item, idx) {
+            var _item$content, _item$key;
+            return jsx("button", {
+              type: "button",
+              disabled: item.disabled || undefined,
+              "aria-disabled": item.disabled || undefined,
+              "data-tone": isDestructive(item) ? "destructive" : undefined,
+              className: cn(ROW_CLASSES, rowToneClass(item), itemClassName),
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                if (!item.disabled) onSelectItem(item);
+              },
+              children: (_item$content = item.content) !== null && _item$content !== void 0 ? _item$content : jsxs(Fragment, {
+                children: [item.icon != null && jsx("span", {
+                  className: "inline-flex shrink-0",
+                  "aria-hidden": "true",
+                  children: item.icon
+                }), jsx("span", {
+                  className: "min-w-0 truncate",
+                  children: item.label
+                })]
+              })
+            }, (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : "item-".concat(idx));
+          })]
+        }, "group-".concat(g));
+      }), jsx("button", {
+        type: "button",
+        "data-action-sheet-cancel": "",
+        className: cn(CARD_CLASSES, ROW_CLASSES, "font-semibold text-primary-600 dark:text-primary-400"),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onClose === null || onClose === void 0 || onClose("cancel");
+        },
+        children: cancelLabel
+      })]
+    })
+  }));
+});
+ActionSheetMenu.displayName = "ActionSheetMenu";
+
+export { ActionSheetMenu as default };