@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

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

@@ -0,0 +1,289 @@
+'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 { cn } from '../../utils/cn.js';
+
+var _excluded = ["children", "defaultIndex", "index", "onChange", "orientation", "size", "variant", "animated", "className"];
+/*
+  Tabs.jsx
+  - Default export: Tabs (provider wrapper)
+  - Subcomponents attached: Tabs.List, Tabs.Tab, Tabs.Panels, Tabs.Panel
+
+  Features:
+  - Controlled / uncontrolled usage
+  - Keyboard navigation (Arrow keys, Home, End)
+  - ARIA attributes for accessibility
+  - Variants: "line" | "pills" | "unstyled"
+  - Sizes: "sm" | "md" | "lg"
+  - Simple fade animation
+  - Tailwind CSS only
+
+  Usage example (see bottom of file comment):
+    <Tabs defaultIndex={0} variant="pills" size="md">
+      <Tabs.List>
+        <Tabs.Tab>Home</Tabs.Tab>
+        <Tabs.Tab>Profile</Tabs.Tab>
+        <Tabs.Tab>Settings</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panels>
+        <Tabs.Panel>Home content</Tabs.Panel>
+        <Tabs.Panel>Profile content</Tabs.Panel>
+        <Tabs.Panel>Settings content</Tabs.Panel>
+      </Tabs.Panels>
+    </Tabs>
+*/
+var TabsContext = /*#__PURE__*/createContext(null);
+// One useId() per Tabs keeps ids stable across SSR and unique per instance (STUDIO-58).
+var tabId = function tabId(baseId, index) {
+  return "".concat(baseId, "-tab-").concat(index);
+};
+var panelId = function panelId(baseId, index) {
+  return "".concat(baseId, "-panel-").concat(index);
+};
+function useTabsContext(componentName) {
+  var ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("".concat(componentName, " must be used inside <Tabs>"));
+  return ctx;
+}
+var Tabs = /*#__PURE__*/forwardRef(function Tabs(_ref, ref) {
+  var children = _ref.children,
+    _ref$defaultIndex = _ref.defaultIndex,
+    defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
+    controlledIndex = _ref.index,
+    onChange = _ref.onChange,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "line" : _ref$variant,
+    _ref$animated = _ref.animated,
+    animated = _ref$animated === void 0 ? true : _ref$animated,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var isControlled = controlledIndex != null;
+  var _useState = useState(defaultIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var activeIndex = isControlled ? controlledIndex : internalIndex;
+  var tabsRef = useRef([]); // DOM refs for keyboard navigation
+  var baseId = useId();
+  var changeTab = function changeTab(idx) {
+    if (!isControlled) setActiveIndex(idx);
+    onChange === null || onChange === void 0 || onChange(idx);
+  };
+  var registerTab = function registerTab(el, idx) {
+    tabsRef.current[idx] = el;
+  };
+  var value = {
+    activeIndex: activeIndex,
+    changeTab: changeTab,
+    registerTab: registerTab,
+    tabsRef: tabsRef,
+    baseId: baseId,
+    orientation: orientation,
+    size: size,
+    variant: variant,
+    animated: animated
+  };
+  return jsx(TabsContext.Provider, {
+    value: value,
+    children: jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn("tabs-root", className)
+    }, rest), {}, {
+      children: children
+    }))
+  });
+});
+Tabs.displayName = "Tabs";
+/* ------------------------- TabList ------------------------- */
+function TabList(_ref2) {
+  var children = _ref2.children,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "" : _ref2$className;
+  var _useTabsContext = useTabsContext("Tabs.List"),
+    orientation = _useTabsContext.orientation;
+  return jsx("div", {
+    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) {
+      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
+      });
+    })
+  });
+}
+/* ------------------------- 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,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    _ref3$tabClassName = _ref3.tabClassName,
+    tabClassName = _ref3$tabClassName === void 0 ? "" : _ref3$tabClassName;
+  var _useTabsContext2 = useTabsContext("Tab"),
+    activeIndex = _useTabsContext2.activeIndex,
+    changeTab = _useTabsContext2.changeTab,
+    registerTab = _useTabsContext2.registerTab,
+    tabsRef = _useTabsContext2.tabsRef,
+    baseId = _useTabsContext2.baseId,
+    size = _useTabsContext2.size,
+    variant = _useTabsContext2.variant;
+  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 () {
+    // find index in tabsRef if index not provided
+    var idx = typeof index === "number" ? index : tabsRef.current.findIndex(function (el) {
+      return el === internalRef.current;
+    });
+    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
+  // 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";
+  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",
+    unstyled: ""
+  };
+  var computedClass = cn(base, sizeClasses[size] || sizeClasses.md, variantClasses[variant], tabClassName, className);
+  var focusNext = function focusNext(dir) {
+    if (!tabsRef.current || tabsRef.current.length === 0) return;
+    var next = idx + dir;
+    var len = tabsRef.current.length;
+    if (next < 0) next = len - 1;
+    if (next >= len) next = 0;
+    var el = tabsRef.current[next];
+    el === null || el === void 0 || el.focus();
+    changeTab(next);
+  };
+  var onKeyDown = function onKeyDown(e) {
+    if (disabled) return;
+    var key = e.key;
+    if (key === "Home") {
+      var _tabsRef$current$;
+      e.preventDefault();
+      (_tabsRef$current$ = tabsRef.current[0]) === null || _tabsRef$current$ === void 0 || _tabsRef$current$.focus();
+      changeTab(0);
+    } else if (key === "End") {
+      var _tabsRef$current$last;
+      e.preventDefault();
+      var last = tabsRef.current.length - 1;
+      (_tabsRef$current$last = tabsRef.current[last]) === null || _tabsRef$current$last === void 0 || _tabsRef$current$last.focus();
+      changeTab(last);
+    } else if (key === "ArrowRight") {
+      e.preventDefault();
+      focusNext(1);
+    } else if (key === "ArrowLeft") {
+      e.preventDefault();
+      focusNext(-1);
+    } else if (key === "ArrowDown") {
+      // for vertical lists treat Down like ArrowRight
+      e.preventDefault();
+      focusNext(1);
+    } else if (key === "ArrowUp") {
+      e.preventDefault();
+      focusNext(-1);
+    }
+  };
+  return jsxs("button", {
+    ref: internalRef,
+    id: id,
+    role: "tab",
+    "aria-selected": selected,
+    "aria-controls": selected ? panelId(baseId, idx) : undefined,
+    tabIndex: selected ? 0 : -1,
+    disabled: disabled,
+    className: computedClass,
+    onClick: function onClick() {
+      return !disabled && changeTab(idx);
+    },
+    onKeyDown: onKeyDown,
+    children: [iconLeft && jsx("span", {
+      className: "shrink-0",
+      children: iconLeft
+    }), jsx("span", {
+      children: children
+    }), iconRight && jsx("span", {
+      className: "shrink-0",
+      children: iconRight
+    })]
+  });
+}
+/* ------------------------- Panels & Panel ------------------------- */
+function Panels(_ref4) {
+  var children = _ref4.children,
+    _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),
+    children: React.Children.map(children, function (child, i) {
+      var _child$props$index2;
+      // inject index if missing
+      if (! /*#__PURE__*/React.isValidElement(child)) return child;
+      return /*#__PURE__*/React.cloneElement(child, {
+        index: (_child$props$index2 = child.props.index) !== null && _child$props$index2 !== void 0 ? _child$props$index2 : i,
+        animated: animated
+      });
+    })
+  });
+}
+function Panel(_ref5) {
+  var children = _ref5.children,
+    index = _ref5.index,
+    _ref5$className = _ref5.className,
+    className = _ref5$className === void 0 ? "" : _ref5$className,
+    _ref5$animated = _ref5.animated,
+    animated = _ref5$animated === void 0 ? true : _ref5$animated;
+  var _useTabsContext4 = useTabsContext("Tab.Panel"),
+    activeIndex = _useTabsContext4.activeIndex,
+    baseId = _useTabsContext4.baseId;
+  var isActive = index === activeIndex;
+  var _useState3 = useState(isActive),
+    _useState4 = _slicedToArray(_useState3, 2),
+    wasActive = _useState4[0],
+    setWasActive = _useState4[1];
+  // Remember that the panel has been shown once (adjust-during-render pattern).
+  if (isActive && !wasActive) setWasActive(true);
+  if (!wasActive && !isActive) return null;
+  var base = "w-full transition-all duration-200 ease-in-out";
+  var activeClasses = animated ? "opacity-100 translate-y-0 pointer-events-auto relative" : "opacity-100 pointer-events-auto relative";
+  var inactiveClasses = animated ? "opacity-0 -translate-y-2 pointer-events-none absolute inset-0" : "hidden pointer-events-none absolute inset-0";
+  return jsx("div", {
+    id: panelId(baseId, index),
+    role: "tabpanel",
+    "aria-labelledby": tabId(baseId, index),
+    hidden: !isActive,
+    className: "".concat(base, " ").concat(isActive ? activeClasses : inactiveClasses, " ").concat(className),
+    children: children
+  });
+}
+Tabs.List = TabList;
+Tabs.Tab = Tab;
+Tabs.Panels = Panels;
+Tabs.Panel = Panel;
+
+export { Panel, Panels, Tab, TabList, Tabs as default };

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

@@ -0,0 +1,52 @@
+'use client';
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+var TextToSpeech = function TextToSpeech(_ref) {
+  var _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "" : _ref$text,
+    _ref$rate = _ref.rate,
+    rate = _ref$rate === void 0 ? 1 : _ref$rate,
+    _ref$pitch = _ref.pitch,
+    pitch = _ref$pitch === void 0 ? 0.5 : _ref$pitch,
+    _ref$onSpeak = _ref.onSpeak,
+    onSpeak = _ref$onSpeak === void 0 ? function () {} : _ref$onSpeak,
+    renderButton = _ref.renderButton;
+  var _useState = useState(text),
+    _useState2 = _slicedToArray(_useState, 1),
+    inputText = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isSpeaking = _useState4[0],
+    setIsSpeaking = _useState4[1];
+  var handleSpeak = function handleSpeak() {
+    var utterance = new SpeechSynthesisUtterance(inputText);
+    utterance.rate = rate;
+    utterance.pitch = pitch;
+    utterance.onstart = function () {
+      onSpeak(inputText);
+      setIsSpeaking(true);
+    };
+    utterance.onend = function () {
+      setIsSpeaking(false);
+    };
+    if (isSpeaking) {
+      window.speechSynthesis.cancel();
+      setIsSpeaking(false);
+    } else {
+      window.speechSynthesis.speak(utterance);
+    }
+  };
+  return jsx("div", {
+    children: renderButton && typeof renderButton === "function" ? renderButton({
+      onClick: handleSpeak,
+      isSpeaking: isSpeaking
+    }) : jsx("button", {
+      onClick: handleSpeak,
+      children: isSpeaking ? "Stop" : "Speak"
+    })
+  });
+};
+
+export { TextToSpeech as default };

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

@@ -0,0 +1,125 @@
+'use client';
+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, useCallback, useState, useLayoutEffect, useEffect } from 'react';
+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 useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function fitToContent(el, maxRows) {
+  if (!el) return;
+  el.style.height = "auto";
+  var height = el.scrollHeight;
+  if (maxRows) {
+    var style = window.getComputedStyle(el);
+    var line = parseFloat(style.lineHeight) || 20;
+    var chrome = parseFloat(style.paddingTop || 0) + parseFloat(style.paddingBottom || 0) + parseFloat(style.borderTopWidth || 0) + parseFloat(style.borderBottomWidth || 0);
+    var cap = line * maxRows + chrome;
+    el.style.overflowY = height > cap ? "auto" : "hidden";
+    height = Math.min(height, cap);
+  } else {
+    el.style.overflowY = "hidden";
+  }
+  el.style.height = "".concat(height, "px");
+}
+var Textarea = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
+  var id = _ref.id,
+    className = _ref.className,
+    label = _ref.label,
+    error = _ref.error,
+    helperText = _ref.helperText,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showCount = _ref.showCount,
+    showCount = _ref$showCount === void 0 ? false : _ref$showCount,
+    maxLength = _ref.maxLength,
+    _ref$autoResize = _ref.autoResize,
+    autoResize = _ref$autoResize === void 0 ? false : _ref$autoResize,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? 3 : _ref$rows,
+    maxRows = _ref.maxRows,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var reactId = useId();
+  var textareaId = id || "textarea-".concat(reactId);
+  var errorId = "".concat(textareaId, "-error");
+  var helperId = "".concat(textareaId, "-helper");
+  var localRef = useRef(null);
+  var setRef = useCallback(function (node) {
+    return setRefs(node, localRef, forwardedRef);
+  }, [forwardedRef]);
+  var isControlled = value !== undefined;
+  var _useState = useState(function () {
+      return String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "").length;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledLength = _useState2[0],
+    setUncontrolledLength = _useState2[1];
+  var length = isControlled ? String(value !== null && value !== void 0 ? value : "").length : uncontrolledLength;
+  useIsomorphicLayoutEffect(function () {
+    if (autoResize) fitToContent(localRef.current, maxRows);
+  }, [autoResize, maxRows, value]);
+  var handleChange = function handleChange(e) {
+    if (!isControlled) setUncontrolledLength(e.target.value.length);
+    if (autoResize) fitToContent(e.target, maxRows);
+    onChange === null || onChange === void 0 || onChange(e);
+  };
+  var describedBy = [error ? errorId : null, helperText ? helperId : null, rest["aria-describedby"]].filter(Boolean).join(" ") || undefined;
+  return jsxs("div", {
+    className: "w-full",
+    children: [label && jsxs("label", {
+      htmlFor: textareaId,
+      className: "mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200",
+      children: [label, required && jsx("span", {
+        className: "ml-1 text-error-500",
+        "aria-hidden": "true",
+        children: "*"
+      })]
+    }), jsx("textarea", _objectSpread2(_objectSpread2({}, rest), {}, {
+      id: textareaId,
+      ref: setRef,
+      rows: rows,
+      required: required,
+      disabled: disabled,
+      maxLength: maxLength,
+      value: value,
+      defaultValue: defaultValue,
+      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)
+    })), (error || helperText || showCount && maxLength) && jsxs("div", {
+      className: "mt-1 flex items-start justify-between gap-3 text-sm",
+      children: [jsxs("div", {
+        className: "min-w-0",
+        children: [error && jsxs("p", {
+          id: errorId,
+          className: "flex items-center gap-1 text-error-600 dark:text-error-400",
+          "aria-live": "polite",
+          children: [jsx(AlertCircle, {
+            className: "h-4 w-4 shrink-0",
+            "aria-hidden": "true"
+          }), error]
+        }), helperText && jsx("p", {
+          id: helperId,
+          className: "text-gray-500 dark:text-gray-400",
+          children: helperText
+        })]
+      }), showCount && maxLength && jsxs("span", {
+        className: "shrink-0 text-xs text-gray-500 dark:text-gray-400",
+        "aria-hidden": "true",
+        "data-testid": "textarea-count",
+        children: [length, "/", maxLength]
+      })]
+    })]
+  });
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea as default };

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

@@ -0,0 +1,160 @@
+'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 { MoreVertical } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["items", "trigger", "className", "menuClass", "menuItemClass", "closeOnSelect", "ariaLabel", "wrapperClassName"];
+/**
+ * ThreeDotPopover (Simple)
+ *
+ * A minimal three-dot popover for your UI library.
+ *
+ * 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? }.
+ *
+ * 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} />
+ */
+var ThreeDotPopoverSimple = /*#__PURE__*/forwardRef(function ThreeDotPopoverSimple(_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? null : _ref$trigger,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$menuClass = _ref.menuClass,
+    menuClass = _ref$menuClass === void 0 ? "" : _ref$menuClass,
+    _ref$menuItemClass = _ref.menuItemClass,
+    menuItemClass = _ref$menuItemClass === void 0 ? "" : _ref$menuItemClass,
+    _ref$closeOnSelect = _ref.closeOnSelect,
+    closeOnSelect = _ref$closeOnSelect === void 0 ? true : _ref$closeOnSelect,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "More options" : _ref$ariaLabel,
+    _ref$wrapperClassName = _ref.wrapperClassName,
+    wrapperClassName = _ref$wrapperClassName === void 0 ? "" : _ref$wrapperClassName,
+    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 setTriggerNode = useCallback(function (node) {
+    triggerRef.current = 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]);
+  function toggleOpen(e) {
+    e && e.stopPropagation();
+    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();
+  }
+  var DefaultTrigger = jsx("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    "aria-expanded": open,
+    ref: triggerRef,
+    onClick: toggleOpen,
+    className: cn("inline-flex items-center justify-center rounded-md focus:outline-none", className),
+    children: jsx(MoreVertical, {})
+  });
+  var triggerNode = trigger ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react-hooks/refs -- setTriggerNode is a callback ref, run by React at commit
+  React.cloneElement(trigger, {
+    ref: setTriggerNode,
+    onClick: function onClick(e) {
+      trigger.props && trigger.props.onClick && trigger.props.onClick(e);
+      toggleOpen(e);
+    },
+    "aria-expanded": open,
+    "aria-haspopup": "menu"
+  }) : 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"
+      },
+      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);
+        })
+      })
+    })]
+  }));
+});
+ThreeDotPopoverSimple.displayName = "ThreeDotPopover";
+
+export { ThreeDotPopoverSimple as default };