@dreamtree-org/twreact-ui 1.3.10 → 2.0.0

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

@@ -1,10 +1,19 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useRef, useId, useEffect, createContext, useContext } from 'react';
+import React, { forwardRef, useState, useRef, useId, useEffect, createContext, useContext, useLayoutEffect } from 'react';
 import { cn } from '../../utils/cn.js';
 
-var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "className"];
+var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "swipeable", "className"],
+  _excluded2 = ["children", "className"];
+// useLayoutEffect warns during SSR; fall back to useEffect on the server.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+// Minimum horizontal travel (px) for a swipe to change tabs, and how much more
+// horizontal than vertical it must be, so vertical page scrolls never switch tabs.
+var SWIPE_THRESHOLD = 50;
+var SWIPE_DOMINANCE = 1.5;
+// Variants whose active state is drawn by the sliding indicator (horizontal only).
+var INDICATOR_VARIANTS = ["line", "segmented"];
 /*
   Tabs.jsx
   - Default export: Tabs (provider wrapper)
@@ -14,7 +23,10 @@ var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation",
   - Controlled / uncontrolled usage
   - Keyboard navigation (Arrow keys, Home, End)
   - ARIA attributes for accessibility
-  - Variants: "line" | "pills" | "unstyled"
+  - Variants: "line" | "pills" | "segmented" | "unstyled"
+  - Horizontal lists scroll with snap; the active tab is kept in view
+  - Animated active indicator for "line" / "segmented" (off under reduced motion)
+  - Optional `swipeable` panels (touch / pen pointer swipes)
   - Sizes: "sm" | "md" | "lg"
   - Simple fade animation
   - Tailwind CSS only
@@ -60,6 +72,8 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     variant = _ref$variant === void 0 ? "line" : _ref$variant,
     _ref$animated = _ref.animated,
     animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$swipeable = _ref.swipeable,
+    swipeable = _ref$swipeable === void 0 ? false : _ref$swipeable,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -71,6 +85,12 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
   var activeIndex = isControlled ? controlledIndex : internalIndex;
   var tabsRef = useRef([]); // DOM refs for keyboard navigation
   var baseId = useId();
+  // Set by TabList once the sliding indicator has been measured; until then
+  // (SSR, first paint) tabs draw their own active styling.
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    indicatorReady = _useState4[0],
+    setIndicatorReady = _useState4[1];
   var changeTab = function changeTab(idx) {
     if (!isControlled) setActiveIndex(idx);
     onChange === null || onChange === void 0 || onChange(idx);
@@ -87,7 +107,10 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
     orientation: orientation,
     size: size,
     variant: variant,
-    animated: animated
+    animated: animated,
+    swipeable: swipeable,
+    indicatorReady: indicatorReady,
+    setIndicatorReady: setIndicatorReady
   };
   return jsx(TabsContext.Provider, {
     value: value,
@@ -101,33 +124,104 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
 });
 Tabs.displayName = "Tabs";
 /* ------------------------- TabList ------------------------- */
-function TabList(_ref2) {
+var TabList = /*#__PURE__*/forwardRef(function TabList(_ref2, ref) {
   var children = _ref2.children,
     _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? "" : _ref2$className;
+    className = _ref2$className === void 0 ? "" : _ref2$className,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var _useTabsContext = useTabsContext("Tabs.List"),
-    orientation = _useTabsContext.orientation;
-  return jsx("div", {
+    orientation = _useTabsContext.orientation,
+    variant = _useTabsContext.variant,
+    activeIndex = _useTabsContext.activeIndex,
+    tabsRef = _useTabsContext.tabsRef,
+    indicatorReady = _useTabsContext.indicatorReady,
+    setIndicatorReady = _useTabsContext.setIndicatorReady;
+  var listRef = useRef(null);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    indicator = _useState6[0],
+    setIndicator = _useState6[1];
+  var horizontal = orientation !== "vertical";
+  var hasIndicator = horizontal && INDICATOR_VARIANTS.includes(variant);
+  var childCount = React.Children.count(children);
+  var setRefs = function setRefs(node) {
+    listRef.current = node;
+    if (typeof ref === "function") ref(node);else if (ref) ref.current = node;
+  };
+  // Measure the active tab: position the indicator and scroll the tab into view.
+  useIsomorphicLayoutEffect(function () {
+    var list = listRef.current;
+    var tab = tabsRef.current[activeIndex];
+    if (!list || !tab) return undefined;
+    var measure = function measure() {
+      if (horizontal) {
+        var left = tab.offsetLeft;
+        var right = left + tab.offsetWidth;
+        if (left < list.scrollLeft) list.scrollLeft = left;else if (right > list.scrollLeft + list.clientWidth) list.scrollLeft = right - list.clientWidth;
+      }
+      // jsdom / display:none report 0; keep the tabs' own active styling then.
+      if (!hasIndicator || !tab.offsetWidth) return;
+      setIndicator({
+        left: tab.offsetLeft,
+        top: tab.offsetTop,
+        width: tab.offsetWidth,
+        height: tab.offsetHeight
+      });
+      setIndicatorReady(true);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return undefined;
+    var ro = new ResizeObserver(measure);
+    ro.observe(list);
+    ro.observe(tab);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [activeIndex, hasIndicator, horizontal, childCount]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Leaving an indicator variant hands the active styling back to the tabs.
+  useEffect(function () {
+    if (!hasIndicator && indicatorReady) setIndicatorReady(false);
+  }, [hasIndicator, indicatorReady, setIndicatorReady]);
+  var showIndicator = hasIndicator && indicatorReady && indicator;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: setRefs,
     role: "tablist",
     "aria-orientation": orientation,
-    className: "flex ".concat(orientation === "vertical" ? "flex-col" : "flex-row", " gap-1 ").concat(className),
-    children: React.Children.map(children, function (child, i) {
+    className: cn("relative flex gap-1", horizontal ?
+    // Scroll with snap, scrollbar hidden; native smooth scrolling unless reduced motion.
+    "flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth motion-reduce:scroll-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" : "flex-col", variant === "segmented" && "rounded-lg bg-line p-1", className)
+  }, rest), {}, {
+    children: [showIndicator && jsx("span", {
+      "aria-hidden": "true",
+      "data-tabs-indicator": "",
+      className: cn("pointer-events-none absolute left-0 top-0", "transition-[transform,width,height] duration-base ease-standard motion-reduce:transition-none", variant === "line" ? "bg-primary-500" : "rounded-md bg-surface shadow-sm"),
+      style: variant === "line" ? {
+        width: indicator.width,
+        height: 2,
+        transform: "translate(".concat(indicator.left, "px, ").concat(indicator.top + indicator.height - 2, "px)")
+      } : {
+        width: indicator.width,
+        height: indicator.height,
+        transform: "translate(".concat(indicator.left, "px, ").concat(indicator.top, "px)")
+      }
+    }), React.Children.map(children, function (child, i) {
       var _child$props$index;
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
       return /*#__PURE__*/React.cloneElement(child, {
         index: (_child$props$index = child.props.index) !== null && _child$props$index !== void 0 ? _child$props$index : i
       });
-    })
-  });
-}
+    })]
+  }));
+});
+TabList.displayName = "Tabs.List";
 /* ------------------------- Tab ------------------------- */
 function Tab(_ref3) {
   var children = _ref3.children,
     index = _ref3.index,
     _ref3$className = _ref3.className,
     className = _ref3$className === void 0 ? "" : _ref3$className,
-    iconLeft = _ref3.iconLeft,
-    iconRight = _ref3.iconRight,
+    leftIcon = _ref3.leftIcon,
+    rightIcon = _ref3.rightIcon,
     _ref3$disabled = _ref3.disabled,
     disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
     _ref3$tabClassName = _ref3.tabClassName,
@@ -139,32 +233,45 @@ function Tab(_ref3) {
     tabsRef = _useTabsContext2.tabsRef,
     baseId = _useTabsContext2.baseId,
     size = _useTabsContext2.size,
-    variant = _useTabsContext2.variant;
+    variant = _useTabsContext2.variant,
+    orientation = _useTabsContext2.orientation,
+    indicatorReady = _useTabsContext2.indicatorReady;
   var internalRef = useRef(null);
   // If the user didn't provide `index` we derive from DOM position by registering nulls until mount.
   // However it's recommended to always keep Tabs.Tab order consistent with Panels.
-  useEffect(function () {
+  // Registered from a ref callback (runs at commit, before any layout effect) so
+  // Tabs.List can measure the active tab on mount without a flash.
+  var setTabRef = function setTabRef(el) {
+    internalRef.current = el;
+    if (!el) return;
     // find index in tabsRef if index not provided
-    var idx = typeof index === "number" ? index : tabsRef.current.findIndex(function (el) {
-      return el === internalRef.current;
+    var slot = typeof index === "number" ? index : tabsRef.current.findIndex(function (node) {
+      return node === el;
     });
-    if (idx === -1) idx = tabsRef.current.length; // fallback
-    registerTab(internalRef.current, idx);
-    // ensure the tab has the correct array slot
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    if (slot === -1) slot = tabsRef.current.length; // fallback
+    registerTab(el, slot);
+  };
   // TabList always injects `index`; a Tab rendered outside it is never selected.
   var idx = typeof index === "number" ? index : -1;
   var selected = idx === activeIndex;
   var id = tabId(baseId, idx);
-  var base = "inline-flex items-center gap-2 outline-none select-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1";
+  var horizontal = orientation !== "vertical";
+  // Once the sliding indicator is measured it draws the active state; until then
+  // (SSR / first paint) the tab draws it itself so nothing flashes.
+  var indicatorDraws = indicatorReady && horizontal && INDICATOR_VARIANTS.includes(variant);
+  var base = cn("relative inline-flex items-center gap-2 whitespace-nowrap outline-none select-none", "focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1", "transition-colors duration-fast motion-reduce:transition-none", "disabled:cursor-not-allowed disabled:opacity-50",
+  // The scrolling list clips outside rings, so horizontal tabs draw theirs inset.
+  horizontal && "shrink-0 snap-start focus-visible:ring-inset focus-visible:ring-offset-0");
   var sizeClasses = {
     sm: "px-2 py-1 text-sm",
     md: "px-3 py-2 text-sm",
     lg: "px-4 py-3 text-base"
   };
   var variantClasses = {
-    line: selected ? "border-b-2 border-primary-500" : "border-b-2 border-transparent hover:border-gray-200",
-    pills: selected ? "bg-primary-600 text-white rounded-full shadow-sm" : "bg-transparent rounded-full hover:bg-gray-100",
+    line: selected ? cn("border-b-2", indicatorDraws ? "border-transparent" : "border-primary-500") : "border-b-2 border-transparent hover:border-gray-200 dark:hover:border-gray-700",
+    pills: selected ? "bg-primary-600 text-white rounded-full shadow-sm" : "bg-transparent rounded-full hover:bg-gray-100 dark:hover:bg-gray-800",
+    // iOS-style segmented control: equal-width segments on a tinted track.
+    segmented: cn("z-10 flex-1 justify-center rounded-md font-medium", selected ? cn("text-foreground", !indicatorDraws && "bg-surface shadow-sm") : "text-muted hover:text-foreground"),
     unstyled: ""
   };
   var computedClass = cn(base, sizeClasses[size] || sizeClasses.md, variantClasses[variant], tabClassName, className);
@@ -208,7 +315,7 @@ function Tab(_ref3) {
     }
   };
   return jsxs("button", {
-    ref: internalRef,
+    ref: setTabRef,
     id: id,
     role: "tab",
     "aria-selected": selected,
@@ -220,14 +327,14 @@ function Tab(_ref3) {
       return !disabled && changeTab(idx);
     },
     onKeyDown: onKeyDown,
-    children: [iconLeft && jsx("span", {
+    children: [leftIcon && jsx("span", {
       className: "shrink-0",
-      children: iconLeft
+      children: leftIcon
     }), jsx("span", {
       children: children
-    }), iconRight && jsx("span", {
+    }), rightIcon && jsx("span", {
       className: "shrink-0",
-      children: iconRight
+      children: rightIcon
     })]
   });
 }
@@ -237,9 +344,49 @@ function Panels(_ref4) {
     _ref4$className = _ref4.className,
     className = _ref4$className === void 0 ? "" : _ref4$className;
   var _useTabsContext3 = useTabsContext("Tabs.Panels"),
-    animated = _useTabsContext3.animated;
-  return jsx("div", {
-    className: "relative w-full ".concat(className),
+    animated = _useTabsContext3.animated,
+    swipeable = _useTabsContext3.swipeable,
+    activeIndex = _useTabsContext3.activeIndex,
+    changeTab = _useTabsContext3.changeTab,
+    tabsRef = _useTabsContext3.tabsRef;
+  var start = useRef(null);
+  // Next enabled tab in `dir`, or -1 at either end (no wrap-around on swipe).
+  var neighbour = function neighbour(dir) {
+    var tabs = tabsRef.current;
+    for (var i = activeIndex + dir; i >= 0 && i < tabs.length; i += dir) {
+      if (tabs[i] && !tabs[i].disabled) return i;
+    }
+    return -1;
+  };
+  var swipeHandlers = swipeable ? {
+    onPointerDown: function onPointerDown(e) {
+      // Touch and pen only: a mouse drag selects text instead.
+      if (e.pointerType === "mouse" || e.isPrimary === false) return;
+      start.current = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    },
+    onPointerUp: function onPointerUp(e) {
+      var from = start.current;
+      start.current = null;
+      if (!from) return;
+      var dx = e.clientX - from.x;
+      var dy = e.clientY - from.y;
+      if (!Number.isFinite(dx) || !Number.isFinite(dy)) return;
+      if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy) * SWIPE_DOMINANCE) return;
+      // Swipe left -> next tab, swipe right -> previous tab.
+      var next = neighbour(dx < 0 ? 1 : -1);
+      if (next !== -1) changeTab(next);
+    },
+    onPointerCancel: function onPointerCancel() {
+      start.current = null;
+    }
+  } : {};
+  return jsx("div", _objectSpread2(_objectSpread2({
+    // touch-pan-y: the browser keeps vertical scrolling; horizontal moves reach us.
+    className: cn("relative w-full", swipeable && "touch-pan-y", className)
+  }, swipeHandlers), {}, {
     children: React.Children.map(children, function (child, i) {
       var _child$props$index2;
       // inject index if missing
@@ -249,7 +396,7 @@ function Panels(_ref4) {
         animated: animated
       });
     })
-  });
+  }));
 }
 function Panel(_ref5) {
   var children = _ref5.children,
@@ -262,10 +409,10 @@ function Panel(_ref5) {
     activeIndex = _useTabsContext4.activeIndex,
     baseId = _useTabsContext4.baseId;
   var isActive = index === activeIndex;
-  var _useState3 = useState(isActive),
-    _useState4 = _slicedToArray(_useState3, 2),
-    wasActive = _useState4[0],
-    setWasActive = _useState4[1];
+  var _useState7 = useState(isActive),
+    _useState8 = _slicedToArray(_useState7, 2),
+    wasActive = _useState8[0],
+    setWasActive = _useState8[1];
   // Remember that the panel has been shown once (adjust-during-render pattern).
   if (isActive && !wasActive) setWasActive(true);
   if (!wasActive && !isActive) return null;

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

@@ -6,7 +6,7 @@ import { AlertCircle } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
 import { setRefs } from '../../utils/position.js';
 
-var _excluded = ["id", "className", "label", "error", "helperText", "required", "disabled", "showCount", "maxLength", "autoResize", "rows", "maxRows", "value", "defaultValue", "onChange"];
+var _excluded = ["id", "className", "label", "error", "helperText", "required", "disabled", "showCount", "maxLength", "autoResize", "rows", "maxRows", "value", "defaultValue", "onChange", "size"];
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 function fitToContent(el, maxRows) {
   if (!el) return;
@@ -24,6 +24,12 @@ function fitToContent(el, maxRows) {
   }
   el.style.height = "".concat(height, "px");
 }
+// Padding / text per size; `md` is the original look. Rows set the height.
+var SIZE_CLASSES = {
+  sm: "px-2.5 py-1.5 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base"
+};
 var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
   var id = _ref.id,
     className = _ref.className,
@@ -45,6 +51,8 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     onChange = _ref.onChange,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var reactId = useId();
   var textareaId = id || "textarea-".concat(reactId);
@@ -93,7 +101,7 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       onChange: handleChange,
       "aria-invalid": error ? true : undefined,
       "aria-describedby": describedBy,
-      className: cn("block w-full rounded-md border bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500 dark:focus:ring-offset-gray-900", error ? "border-error-500 focus:ring-error-500" : "border-gray-300 dark:border-gray-600", autoResize ? "resize-none" : "resize-y", className)
+      className: cn("block w-full rounded-md border bg-surface text-foreground placeholder-gray-400", SIZE_CLASSES[size] || SIZE_CLASSES.md, "transition-colors duration-fast ease-standard motion-reduce:transition-none", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "dark:placeholder-gray-500 dark:focus-visible:ring-offset-gray-900", error ? "border-error-500 focus-visible:ring-error-500 dark:border-error-400" : "border-gray-300 focus-visible:ring-primary-500 dark:border-gray-600", autoResize ? "resize-none" : "resize-y", className)
     })), (error || helperText || showCount && maxLength) && jsxs("div", {
       className: "mt-1 flex items-start justify-between gap-3 text-sm",
       children: [jsxs("div", {

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

@@ -1,37 +1,28 @@
 'use client';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { forwardRef, useRef, useCallback, useState, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useCallback, useId } from 'react';
 import { MoreVertical } from 'lucide-react';
 import { cn } from '../../utils/cn.js';
+import { TOUCH_TARGET } from '../../utils/touchTarget.js';
+import ActionMenuSurface from './menu/ActionMenuSurface.js';
+import { renderIcon } from './menu/menuItems.js';
 
-var _excluded = ["items", "trigger", "className", "menuClass", "menuItemClass", "closeOnSelect", "ariaLabel", "wrapperClassName"];
+var _excluded = ["items", "trigger", "className", "menuClass", "menuItemClass", "closeOnSelect", "ariaLabel", "wrapperClassName", "presentation", "cancelLabel"];
 /**
- * ThreeDotPopover (Simple)
+ * ThreeDotPopover
  *
- * A minimal three-dot popover for your UI library.
+ * A kebab (three-dot) button that opens an action menu.
  *
- * Features (simple):
- * - Minimal, single-file React component (no animation libs, no portals).
- * - Click trigger toggles menu (default three-dot icon or custom trigger node).
- * - Close on outside click and Escape key.
- * - Menu items: { key, label, icon?, onClick?, disabled?, destructive? }.
+ * - Desktop (`presentation="popover"`): a portaled floating `role="menu"`
+ *   that flips/shifts to stay on screen, with roving focus (ArrowUp/Down,
+ *   Home/End, typeahead). Escape closes and returns focus to the trigger.
+ * - Phones (`presentation="sheet"`): an iOS-style action sheet with a
+ *   separate Cancel button.
+ * - `presentation="auto"` (default) picks the sheet on small touch screens.
  *
- * Props:
- * - items: Array of menu item objects (see above)
- * - trigger: optional React node to use as trigger (falls back to three-dot button)
- * - className: additional class for trigger wrapper
- * - menuClass: additional class for menu container
- * - menuItemClass: additional class for every menu item
- * - closeOnSelect: boolean (default true)
- *
- * Example:
- * const items = [
- *   { key: 'edit', label: 'Edit', icon: Edit2, onClick: () => {} },
- *   { key: 'view', label: 'View', icon: Eye, onClick: () => {} },
- *   { key: 'delete', label: 'Delete', destructive: true, onClick: () => {} },
- * ];
- * <ThreeDotPopoverSimple items={items} />
+ * Items: { key, label, icon?, onClick?, disabled?, destructive?, tone? }.
+ * `tone: 'destructive'` and `destructive: true` are equivalent.
  */
 var ThreeDotPopoverSimple = /*#__PURE__*/forwardRef(function ThreeDotPopoverSimple(_ref, ref) {
   var _ref$items = _ref.items,
@@ -50,108 +41,111 @@ var ThreeDotPopoverSimple = /*#__PURE__*/forwardRef(function ThreeDotPopoverSimp
     ariaLabel = _ref$ariaLabel === void 0 ? "More options" : _ref$ariaLabel,
     _ref$wrapperClassName = _ref.wrapperClassName,
     wrapperClassName = _ref$wrapperClassName === void 0 ? "" : _ref$wrapperClassName,
+    _ref$presentation = _ref.presentation,
+    presentation = _ref$presentation === void 0 ? "auto" : _ref$presentation,
+    _ref$cancelLabel = _ref.cancelLabel,
+    cancelLabel = _ref$cancelLabel === void 0 ? "Cancel" : _ref$cancelLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var triggerRef = useRef(null);
-  // Callback ref for a consumer-supplied trigger: handing a function (not the
-  // ref object) to cloneElement keeps ref access out of render.
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    anchorEl = _useState2[0],
+    setAnchorEl = _useState2[1];
+  // Callback ref for the trigger (default or consumer-supplied): handing a
+  // function (not the ref object) to cloneElement keeps ref access out of render.
   var setTriggerNode = useCallback(function (node) {
     triggerRef.current = node;
+    setAnchorEl(node);
   }, []);
-  var menuRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    open = _useState2[0],
-    setOpen = _useState2[1];
-  useEffect(function () {
-    function onDocClick(e) {
-      if (!open) return;
-      if (triggerRef.current && triggerRef.current.contains(e.target)) return;
-      if (menuRef.current && menuRef.current.contains(e.target)) return;
-      setOpen(false);
-    }
-    function onKey(e) {
-      if (!open) return;
-      if (e.key === "Escape") setOpen(false);
-    }
-    document.addEventListener("mousedown", onDocClick);
-    document.addEventListener("keydown", onKey);
-    return function () {
-      document.removeEventListener("mousedown", onDocClick);
-      document.removeEventListener("keydown", onKey);
-    };
-  }, [open]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    open = _useState4[0],
+    setOpen = _useState4[1];
+  var _useState5 = useState("first"),
+    _useState6 = _slicedToArray(_useState5, 2),
+    initialFocus = _useState6[0],
+    setInitialFocus = _useState6[1];
+  var menuId = "three-dot-menu-".concat(useId());
   function toggleOpen(e) {
     e && e.stopPropagation();
+    setInitialFocus("first");
     setOpen(function (v) {
       return !v;
     });
   }
-  function handleItemClick(item) {
-    if (item.disabled) return;
-    item.onClick && item.onClick(item);
-    if (closeOnSelect) setOpen(false);
-    // natural focus behavior: return focus to trigger
-    triggerRef.current && triggerRef.current.focus();
+  function onTriggerKeyDown(e) {
+    if (open || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    setInitialFocus(e.key === "ArrowUp" ? "last" : "first");
+    setOpen(true);
   }
-  var DefaultTrigger = jsx("button", {
-    type: "button",
-    "aria-label": ariaLabel,
+  var menuItems = (Array.isArray(items) ? items : []).map(function (it, i) {
+    var _it$key, _renderIcon;
+    return {
+      key: (_it$key = it.key) !== null && _it$key !== void 0 ? _it$key : i,
+      label: it.label,
+      icon: (_renderIcon = renderIcon(it.icon, "w-5 h-5")) !== null && _renderIcon !== void 0 ? _renderIcon : jsx("span", {
+        className: "w-5 h-5"
+      }),
+      disabled: Boolean(it.disabled),
+      tone: it.tone,
+      destructive: it.destructive,
+      onSelect: function onSelect() {
+        return it.onClick && it.onClick(it);
+      }
+    };
+  });
+  var triggerA11y = {
+    "aria-haspopup": "menu",
     "aria-expanded": open,
-    ref: triggerRef,
+    "aria-controls": open ? menuId : undefined
+  };
+  var DefaultTrigger = jsx("button", _objectSpread2(_objectSpread2({
+    type: "button",
+    "aria-label": ariaLabel
+  }, triggerA11y), {}, {
+    ref: setTriggerNode,
     onClick: toggleOpen,
-    className: cn("inline-flex items-center justify-center rounded-md focus:outline-none", className),
-    children: jsx(MoreVertical, {})
-  });
+    onKeyDown: onTriggerKeyDown,
+    className: cn("inline-flex items-center justify-center rounded-md text-muted hover:text-foreground", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2", TOUCH_TARGET, className),
+    children: jsx(MoreVertical, {
+      "aria-hidden": "true"
+    })
+  }));
   var triggerNode = trigger ?
   /*#__PURE__*/
   // eslint-disable-next-line react-hooks/refs -- setTriggerNode is a callback ref, run by React at commit
-  React.cloneElement(trigger, {
+  React.cloneElement(trigger, _objectSpread2({
     ref: setTriggerNode,
     onClick: function onClick(e) {
       trigger.props && trigger.props.onClick && trigger.props.onClick(e);
       toggleOpen(e);
     },
-    "aria-expanded": open,
-    "aria-haspopup": "menu"
-  }) : DefaultTrigger;
+    onKeyDown: function onKeyDown(e) {
+      trigger.props && trigger.props.onKeyDown && trigger.props.onKeyDown(e);
+      if (!e.defaultPrevented) onTriggerKeyDown(e);
+    }
+  }, triggerA11y)) : DefaultTrigger;
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn("inline-block relative", wrapperClassName)
   }, rest), {}, {
-    children: [triggerNode, jsx("div", {
-      ref: menuRef,
-      className: cn("absolute left-0 mt-2 min-w-[160px] rounded-lg bg-white border shadow-sm", menuClass),
-      style: {
-        display: open ? "block" : "none"
+    children: [triggerNode, jsx(ActionMenuSurface, {
+      open: open,
+      onClose: function onClose() {
+        return setOpen(false);
       },
-      role: "menu",
-      "aria-hidden": !open,
-      children: jsx("ul", {
-        className: "py-1",
-        children: items.map(function (it, i) {
-          var _it$key;
-          var Icon = it.icon || null;
-          return jsx("li", {
-            children: jsxs("button", {
-              type: "button",
-              role: "menuitem",
-              onClick: function onClick() {
-                return handleItemClick(it);
-              },
-              disabled: it.disabled,
-              className: "w-full text-left px-4 py-3 flex items-center gap-3 text-sm leading-5 ".concat(it.destructive ? "text-error-600" : "text-primary-900", " ").concat(it.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50", " ").concat(menuItemClass),
-              children: [Icon ? jsx(Icon, {
-                className: "w-5 h-5"
-              }) : jsx("span", {
-                className: "w-5 h-5"
-              }), jsx("span", {
-                className: "flex-1",
-                children: it.label
-              })]
-            })
-          }, (_it$key = it.key) !== null && _it$key !== void 0 ? _it$key : i);
-        })
-      })
+      anchorEl: anchorEl,
+      items: menuItems,
+      presentation: presentation,
+      placement: "bottom-start",
+      initialFocus: initialFocus,
+      closeOnSelect: closeOnSelect,
+      id: menuId,
+      label: typeof ariaLabel === "string" ? ariaLabel : undefined,
+      cancelLabel: cancelLabel,
+      menuClassName: menuClass,
+      itemClassName: menuItemClass
     })]
   }));
 });