@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

package/dist/esm/components/core/Slider.js

@@ -1,11 +1,11 @@
 'use client';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useId, useRef, useMemo } from 'react';
+import { forwardRef, useId, useRef, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useSliderValues, useSliderPointer, toPercent, keyToValue } from '../../hooks/useSliderValues.js';
 
-var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "formatValue", "thumbLabels", "name", "className", "aria-label"];
+var _excluded = ["value", "defaultValue", "onChange", "onChangeEnd", "min", "max", "step", "largeStep", "disabled", "label", "showValue", "showBubble", "formatValue", "thumbLabels", "name", "className", "aria-label"];
 var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
 var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
@@ -24,6 +24,8 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label = _ref.label,
     _ref$showValue = _ref.showValue,
     showValue = _ref$showValue === void 0 ? false : _ref$showValue,
+    _ref$showBubble = _ref.showBubble,
+    showBubble = _ref$showBubble === void 0 ? true : _ref$showBubble,
     _ref$formatValue = _ref.formatValue,
     formatValue = _ref$formatValue === void 0 ? String : _ref$formatValue,
     _ref$thumbLabels = _ref.thumbLabels,
@@ -52,12 +54,18 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     values = _useSliderValues.values,
     isRange = _useSliderValues.isRange,
     setThumb = _useSliderValues.setThumb;
+  // Index of the thumb being dragged (drives the value bubble), else null.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
   var pointer = useSliderPointer({
     trackRef: trackRef,
     values: values,
     setThumb: setThumb,
     bounds: bounds,
-    disabled: disabled
+    disabled: disabled,
+    onActiveChange: setDragging
   });
   var handleKeyDown = function handleKeyDown(index) {
     return function (e) {
@@ -90,7 +98,9 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
       })]
     }), jsxs("div", _objectSpread2(_objectSpread2({
       ref: trackRef,
-      className: cn("relative flex h-5 touch-none select-none items-center", disabled ? "cursor-not-allowed" : "cursor-pointer")
+      className: cn(
+      // 44px tall row on coarse pointers so the whole strip is easy to grab.
+      "relative flex h-5 touch-none select-none items-center [@media(pointer:coarse)]:h-11", disabled ? "cursor-not-allowed" : "cursor-pointer")
     }, pointer), {}, {
       children: [jsx("div", {
         className: "h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700"
@@ -117,7 +127,15 @@ var Slider = /*#__PURE__*/forwardRef(function (_ref, ref) {
           style: {
             left: "".concat(toPercent(v, min, max), "%")
           },
-          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-white shadow", "transition-shadow motion-reduce:transition-none", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "dark:border-primary-500 dark:bg-gray-900 dark:focus:ring-offset-gray-900")
+          className: cn("absolute h-4 w-4 -translate-x-1/2 rounded-full border-2 border-primary-600 bg-surface shadow", "transition-shadow duration-fast motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", "dark:border-primary-500 dark:focus-visible:ring-offset-gray-900",
+          // Grow the hit area to 44px on touch without changing the visual size.
+          "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2", "[@media(pointer:coarse)]:before:h-11 [@media(pointer:coarse)]:before:w-11 before:content-['']"),
+          children: showBubble && dragging === i && jsx("span", {
+            "aria-hidden": "true",
+            "data-slider-bubble": "",
+            className: cn("pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-line", "bg-surface px-2 py-1 text-xs tabular-nums text-foreground shadow-sm", "animate-scale-in motion-reduce:animate-none"),
+            children: formatValue(v)
+          })
         }, i);
       })]
     })), name && values.map(function (v, i) {

package/dist/esm/components/core/SpeechToText.js

@@ -4,8 +4,21 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
 import { MicOff, Mic } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { PRESS_FEEDBACK } from '../../utils/touchTarget.js';
 
 var _excluded = ["lang", "continuous", "interimResults", "onSpeechComplete", "onSpeaking", "onError", "onStart", "onStop", "renderButton", "autoStart", "disabled", "resetOnStart", "className"];
+// Level bars (DTUI-42). There is no audio-level API without getUserMedia, so the
+// bars show *whether* speech is being heard (speechstart / results), not volume.
+var LEVEL_BARS = [{
+  height: "h-2",
+  delay: "[animation-delay:0ms]"
+}, {
+  height: "h-3.5",
+  delay: "[animation-delay:150ms]"
+}, {
+  height: "h-2.5",
+  delay: "[animation-delay:300ms]"
+}];
 var isProbablyMobile = function isProbablyMobile() {
   if (typeof navigator === "undefined") return false;
   return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
@@ -48,14 +61,19 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     _isListening = _useState2[0],
     setIsListening = _useState2[1];
-  var _useState3 = useState(true),
+  // True while the engine reports speech (speechstart → speechend, or results).
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    _isSupported = _useState4[0],
-    setIsSupported = _useState4[1];
-  var _useState5 = useState(null),
+    isHearing = _useState4[0],
+    setIsHearing = _useState4[1];
+  var _useState5 = useState(true),
     _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
+    _isSupported = _useState6[0],
+    setIsSupported = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
   useEffect(function () {
     var hasSpeechRecognition = typeof window !== "undefined" && ("SpeechRecognition" in window || "webkitSpeechRecognition" in window);
     setIsSupported(hasSpeechRecognition);
@@ -76,6 +94,14 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     recognition.continuous = isProbablyMobile() ? false : continuous;
     recognition.interimResults = interimResults;
     recognition.lang = lang;
+    recognition.onspeechstart = function () {
+      if (!isMountedRef.current) return;
+      setIsHearing(true);
+    };
+    recognition.onspeechend = function () {
+      if (!isMountedRef.current) return;
+      setIsHearing(false);
+    };
     recognition.onstart = function () {
       if (!isMountedRef.current) return;
       setIsListening(true);
@@ -97,6 +123,7 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
           interim += text;
         }
       }
+      if (interim || finalChunk) setIsHearing(true);
       if (interim) onSpeaking(interim.trim());
       if (finalChunk) onSpeechComplete(finalChunk.trim());
     };
@@ -107,11 +134,13 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
       var err = new Error((event === null || event === void 0 ? void 0 : event.error) || "Speech recognition error");
       setError(err);
       setIsListening(false);
+      setIsHearing(false);
       onError(err);
     };
     recognition.onend = function () {
       if (!isMountedRef.current) return;
       setIsListening(false);
+      setIsHearing(false);
       onStop();
     };
     recognitionRef.current = recognition;
@@ -192,6 +221,7 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // eslint-disable-next-line react-hooks/refs
     return renderButton({
       isListening: _isListening,
+      isHearing: isHearing,
       isSupported: _isSupported,
       error: error,
       start: startListening,
@@ -207,18 +237,40 @@ var SpeechToText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-label": _isListening ? "Stop listening" : "Start listening",
     onClick: toggleListening,
     disabled: isDisabled,
-    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "border border-gray-300 bg-transparent transition-colors", "hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:opacity-50 disabled:pointer-events-none", {
-      "text-error-600 border-error-600": _isListening,
-      "text-gray-900": !_isListening
+    "data-listening": _isListening || undefined,
+    "data-hearing": _isListening && isHearing || undefined,
+    className: cn("inline-flex items-center gap-2 rounded-md px-4 h-10 text-sm font-medium", "[@media(pointer:coarse)]:min-h-11", "border border-gray-300 bg-transparent transition-colors duration-fast motion-reduce:transition-none", "hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500 dark:focus-visible:ring-offset-gray-900", "disabled:opacity-50 disabled:pointer-events-none", PRESS_FEEDBACK,
+    // PRESS_FEEDBACK sets transition-transform; keep the colour transition too.
+    "transition-[color,background-color,border-color,transform]", {
+      "text-error-600 border-error-600 dark:text-error-400 dark:border-error-400": _isListening,
+      "text-gray-900 dark:text-gray-100": !_isListening
     }, className)
   }, rest), {}, {
-    children: [_isListening ? jsx(MicOff, {
-      className: "h-4 w-4",
-      "aria-hidden": "true"
-    }) : jsx(Mic, {
-      className: "h-4 w-4",
-      "aria-hidden": "true"
-    }), _isListening ? "Stop" : "Start"]
+    children: [jsxs("span", {
+      className: "relative inline-flex h-4 w-4 items-center justify-center",
+      "aria-hidden": "true",
+      children: [_isListening &&
+      // Listening pulse; a static ring replaces it under reduced motion.
+      jsx("span", {
+        "data-testid": "stt-pulse",
+        className: "absolute -inset-1.5 rounded-full bg-error-500/30 animate-ping motion-reduce:animate-none motion-reduce:bg-transparent motion-reduce:ring-2 motion-reduce:ring-error-500/60"
+      }), _isListening ? jsx(MicOff, {
+        className: "relative h-4 w-4",
+        "aria-hidden": "true"
+      }) : jsx(Mic, {
+        className: "relative h-4 w-4",
+        "aria-hidden": "true"
+      })]
+    }), _isListening ? "Stop" : "Start", _isListening && jsx("span", {
+      className: "inline-flex h-3.5 items-end gap-0.5",
+      "aria-hidden": "true",
+      "data-testid": "stt-level",
+      children: LEVEL_BARS.map(function (bar, i) {
+        return jsx("span", {
+          className: cn("w-0.5 rounded-full transition-colors duration-base motion-reduce:transition-none", isHearing ? cn("bg-current animate-pulse motion-reduce:animate-none", bar.height, bar.delay) : "h-1 bg-current opacity-40")
+        }, i);
+      })
+    })]
   }));
 });
 SpeechToText.displayName = "SpeechToText";

package/dist/esm/components/core/SwipeableListItem.js

@@ -0,0 +1,286 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, typeof as _typeof, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useMemo, useRef, useState, useCallback } from 'react';
+import { MoreHorizontal } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import { setRefs } from '../../utils/position.js';
+import { useControllableState } from '../../hooks/useControllableState.js';
+import { useClickOutside } from '../../hooks/useClickOutside.js';
+import ActionMenuSurface from './menu/ActionMenuSurface.js';
+import { renderIcon } from './menu/menuItems.js';
+import { useSwipeGesture, restingOffset } from './SwipeableListItemGesture.js';
+
+var _excluded = ["as", "children", "leadingActions", "trailingActions", "fullSwipe", "fullSwipeThreshold", "actionWidth", "open", "defaultOpen", "onOpenChange", "disabled", "moreActions", "moreActionsLabel", "menuPresentation", "contentClassName", "className", "onKeyDown"];
+// The iOS Mail / Gmail row: swipe horizontally to reveal actions, swipe all
+// the way to commit the first one. Every action is also reachable without a
+// gesture through the "More actions" button (a menu, or an action sheet on
+// phones).
+var TONE_CLASSES = {
+  "default": "bg-secondary-600 text-secondary-50",
+  primary: "bg-primary-600 text-primary-50",
+  secondary: "bg-secondary-600 text-secondary-50",
+  success: "bg-success-600 text-success-50",
+  warning: "bg-warning-600 text-warning-50",
+  info: "bg-info-600 text-info-50",
+  error: "bg-error-600 text-error-50",
+  destructive: "bg-error-600 text-error-50"
+};
+var MOTION = "duration-base ease-standard motion-reduce:transition-none";
+var toneClass = function toneClass(tone) {
+  return TONE_CLASSES[tone] || TONE_CLASSES["default"];
+};
+var isMenuDestructive = function isMenuDestructive(tone) {
+  return tone === "destructive" || tone === "error";
+};
+function ActionPanel(_ref) {
+  var side = _ref.side,
+    actions = _ref.actions,
+    width = _ref.width,
+    open = _ref.open,
+    armed = _ref.armed,
+    dragging = _ref.dragging,
+    onSelect = _ref.onSelect;
+  // The first action sits at the outer edge, so trailing actions render reversed.
+  var ordered = side === "trailing" ? _toConsumableArray(actions).reverse() : actions;
+  var first = actions[0];
+  return jsx("div", {
+    "data-swipe-actions": side,
+    "aria-hidden": open ? undefined : true,
+    className: cn("absolute inset-y-0 flex overflow-hidden", side === "leading" ? "left-0" : "right-0 flex-row", !dragging && cn("transition-[width]", MOTION)),
+    style: {
+      width: width
+    },
+    children: ordered.map(function (action, idx) {
+      var _action$key;
+      var grow = armed && action === first;
+      var collapsed = armed && action !== first;
+      return jsxs("button", {
+        type: "button",
+        tabIndex: open ? 0 : -1,
+        disabled: action.disabled || undefined,
+        "data-tone": action.tone || "default",
+        className: cn("flex min-w-0 flex-col items-center justify-center gap-1 overflow-hidden px-2 text-xs font-medium outline-none", "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-50", "disabled:cursor-not-allowed disabled:opacity-60", toneClass(action.tone), grow ? "flex-[1_0_auto]" : collapsed ? "w-0 flex-none px-0" : "flex-1", !dragging && cn("transition-[flex-grow,width]", MOTION)),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onSelect(action, "button");
+        },
+        children: [action.icon != null && jsx("span", {
+          className: "inline-flex shrink-0",
+          "aria-hidden": "true",
+          children: renderIcon(action.icon, "h-5 w-5")
+        }), jsx("span", {
+          className: "max-w-full truncate",
+          children: action.label
+        })]
+      }, (_action$key = action.key) !== null && _action$key !== void 0 ? _action$key : "".concat(side, "-").concat(idx));
+    })
+  });
+}
+var SwipeableListItem = /*#__PURE__*/React.forwardRef(function SwipeableListItem(_ref2, _ref4) {
+  var _ref2$as = _ref2.as,
+    Component = _ref2$as === void 0 ? "div" : _ref2$as,
+    children = _ref2.children,
+    _ref2$leadingActions = _ref2.leadingActions,
+    leadingActions = _ref2$leadingActions === void 0 ? [] : _ref2$leadingActions,
+    _ref2$trailingActions = _ref2.trailingActions,
+    trailingActions = _ref2$trailingActions === void 0 ? [] : _ref2$trailingActions,
+    _ref2$fullSwipe = _ref2.fullSwipe,
+    fullSwipe = _ref2$fullSwipe === void 0 ? true : _ref2$fullSwipe,
+    _ref2$fullSwipeThresh = _ref2.fullSwipeThreshold,
+    fullSwipeThreshold = _ref2$fullSwipeThresh === void 0 ? 0.6 : _ref2$fullSwipeThresh,
+    _ref2$actionWidth = _ref2.actionWidth,
+    actionWidth = _ref2$actionWidth === void 0 ? 80 : _ref2$actionWidth,
+    open = _ref2.open,
+    _ref2$defaultOpen = _ref2.defaultOpen,
+    defaultOpen = _ref2$defaultOpen === void 0 ? null : _ref2$defaultOpen,
+    onOpenChange = _ref2.onOpenChange,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$moreActions = _ref2.moreActions,
+    moreActions = _ref2$moreActions === void 0 ? "focus" : _ref2$moreActions,
+    _ref2$moreActionsLabe = _ref2.moreActionsLabel,
+    moreActionsLabel = _ref2$moreActionsLabe === void 0 ? "More actions" : _ref2$moreActionsLabe,
+    _ref2$menuPresentatio = _ref2.menuPresentation,
+    menuPresentation = _ref2$menuPresentatio === void 0 ? "auto" : _ref2$menuPresentatio,
+    contentClassName = _ref2.contentClassName,
+    className = _ref2.className,
+    onKeyDown = _ref2.onKeyDown,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var leading = useMemo(function () {
+    return Array.isArray(leadingActions) ? leadingActions : [];
+  }, [leadingActions]);
+  var trailing = useMemo(function () {
+    return Array.isArray(trailingActions) ? trailingActions : [];
+  }, [trailingActions]);
+  var widths = useMemo(function () {
+    return {
+      leading: leading.length * actionWidth,
+      trailing: trailing.length * actionWidth
+    };
+  }, [leading.length, trailing.length, actionWidth]);
+  var _useControllableState = useControllableState({
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    }),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    rawOpenSide = _useControllableState2[0],
+    setOpenSide = _useControllableState2[1];
+  // A side without actions can't be open.
+  var openSide = rawOpenSide && widths[rawOpenSide] > 0 ? rawOpenSide : null;
+  var rootRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    moreButtonEl = _useState2[0],
+    setMoreButtonEl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    menuOpen = _useState4[0],
+    setMenuOpen = _useState4[1];
+  var close = useCallback(function () {
+    if (openSide != null) setOpenSide(null);
+  }, [openSide, setOpenSide]);
+  var runAction = useCallback(function (action, source) {
+    var _action$onSelect;
+    if (!action || action.disabled) return;
+    (_action$onSelect = action.onSelect) === null || _action$onSelect === void 0 || _action$onSelect.call(action, {
+      action: action,
+      source: source
+    });
+    setOpenSide(null);
+  }, [setOpenSide]);
+  var allowFull = _typeof(fullSwipe) === "object" && fullSwipe !== null ? {
+    leading: fullSwipe.leading !== false,
+    trailing: fullSwipe.trailing !== false
+  } : {
+    leading: Boolean(fullSwipe),
+    trailing: Boolean(fullSwipe)
+  };
+  var onSettle = function onSettle(_ref3) {
+    var side = _ref3.side,
+      commit = _ref3.commit;
+    if (commit) {
+      runAction((side === "leading" ? leading : trailing)[0], "full-swipe");
+      return;
+    }
+    if (side !== openSide) setOpenSide(side);
+  };
+  var enabled = !disabled && (widths.leading > 0 || widths.trailing > 0);
+  var _useSwipeGesture = useSwipeGesture({
+      enabled: enabled,
+      widths: widths,
+      openSide: openSide,
+      fullSwipe: allowFull,
+      fullSwipeThreshold: fullSwipeThreshold,
+      onSettle: onSettle
+    }),
+    offset = _useSwipeGesture.offset,
+    dragging = _useSwipeGesture.dragging,
+    armed = _useSwipeGesture.armed,
+    handlers = _useSwipeGesture.handlers,
+    consumeClick = _useSwipeGesture.consumeClick;
+  useClickOutside([rootRef], close, {
+    enabled: openSide != null
+  });
+  var x = offset !== null && offset !== void 0 ? offset : restingOffset(openSide, widths);
+  var menuItems = useMemo(function () {
+    return [].concat(_toConsumableArray(leading), _toConsumableArray(trailing)).map(function (action, idx) {
+      var _action$key2;
+      return {
+        key: (_action$key2 = action.key) !== null && _action$key2 !== void 0 ? _action$key2 : "action-".concat(idx),
+        label: action.label,
+        icon: action.icon != null ? renderIcon(action.icon, "h-4 w-4") : null,
+        disabled: Boolean(action.disabled),
+        tone: isMenuDestructive(action.tone) ? "destructive" : "default",
+        onSelect: function onSelect() {
+          return runAction(action, "menu");
+        }
+      };
+    });
+  }, [leading, trailing, runAction]);
+  var hasActions = menuItems.length > 0;
+  var showMore = hasActions && moreActions !== false && !disabled;
+  var handleKeyDown = function handleKeyDown(e) {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "Escape" && openSide != null) {
+      e.stopPropagation();
+      setOpenSide(null);
+    }
+  };
+  return jsxs(Component, _objectSpread2(_objectSpread2({
+    ref: function ref(node) {
+      return setRefs(node, rootRef, _ref4);
+    },
+    "data-swipe-open": openSide !== null && openSide !== void 0 ? openSide : undefined,
+    "data-swiping": dragging || undefined,
+    className: cn("group/swipe relative isolate overflow-hidden", className),
+    onKeyDown: handleKeyDown
+  }, rest), {}, {
+    children: [widths.leading > 0 && jsx(ActionPanel, {
+      side: "leading",
+      actions: leading,
+      width: Math.max(0, x),
+      open: openSide === "leading",
+      armed: armed === "leading",
+      dragging: dragging,
+      onSelect: runAction
+    }), widths.trailing > 0 && jsx(ActionPanel, {
+      side: "trailing",
+      actions: trailing,
+      width: Math.max(0, -x),
+      open: openSide === "trailing",
+      armed: armed === "trailing",
+      dragging: dragging,
+      onSelect: runAction
+    }), jsx("div", _objectSpread2(_objectSpread2({
+      "data-swipe-content": "",
+      className: cn("relative bg-surface touch-pan-y", dragging ? "select-none" : cn("transition-transform", MOTION), contentClassName),
+      style: x ? {
+        transform: "translate3d(".concat(x, "px, 0, 0)")
+      } : undefined
+    }, handlers), {}, {
+      onClickCapture: function onClickCapture(e) {
+        // The click that ends a swipe, or a tap on an open row, only closes.
+        var endedSwipe = consumeClick();
+        if (!endedSwipe && openSide == null) return;
+        e.stopPropagation();
+        e.preventDefault();
+        if (!endedSwipe) close();
+      },
+      children: children
+    })), showMore && jsx("button", {
+      ref: setMoreButtonEl,
+      type: "button",
+      "aria-label": moreActionsLabel,
+      "aria-haspopup": "menu",
+      "aria-expanded": menuOpen,
+      "data-swipe-more": "",
+      className: cn("absolute right-2 top-1/2 inline-flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full", "border border-line bg-surface text-foreground shadow-sm outline-none", "focus-visible:ring-2 focus-visible:ring-primary-500 transition-opacity duration-fast motion-reduce:transition-none", moreActions === "focus" && !menuOpen && "pointer-events-none opacity-0 focus-visible:pointer-events-auto focus-visible:opacity-100 [@media(hover:hover)]:group-hover/swipe:pointer-events-auto [@media(hover:hover)]:group-hover/swipe:opacity-100", openSide != null && "hidden"),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setMenuOpen(function (v) {
+          return !v;
+        });
+      },
+      children: jsx(MoreHorizontal, {
+        className: "h-5 w-5",
+        "aria-hidden": "true"
+      })
+    }), showMore && jsx(ActionMenuSurface, {
+      open: menuOpen,
+      onClose: function onClose() {
+        return setMenuOpen(false);
+      },
+      anchorEl: moreButtonEl,
+      items: menuItems,
+      presentation: menuPresentation,
+      placement: "bottom-end",
+      label: moreActionsLabel
+    })]
+  }));
+});
+SwipeableListItem.displayName = "SwipeableListItem";
+
+export { SwipeableListItem as default };