@dreamtree-org/twreact-ui 1.2.1 → 1.3.1

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

@@ -0,0 +1,372 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, createForOfIteratorHelper as _createForOfIteratorHelper, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, useRef, useState, useId, useCallback, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["position", "trigger", "content", "customTrigger", "children", "open", "defaultOpen", "onChange", "delay", "offset", "textClass", "bgClass", "className", "portal", "id"];
+var NATIVE_FOCUSABLE_TAGS = new Set(["button", "input", "select", "textarea"]);
+/**
+ * True when `el` is a single intrinsic element that is keyboard-focusable on
+ * its own (an enabled <button>/<input>/<select>/<textarea>, an <a href>, or any
+ * element with tabIndex >= 0). In that case the wrapper span must NOT add a
+ * second tab stop. Component elements (e.g. <Button>) can't be inspected
+ * statically, so they keep the focusable wrapper — use `customTrigger` there.
+ * Disabled controls are not focusable, so they also keep the wrapper (that is
+ * what makes a tooltip on a disabled button reachable by keyboard).
+ */
+var isNativelyFocusable = function isNativelyFocusable(el) {
+  if (! /*#__PURE__*/React.isValidElement(el) || typeof el.type !== "string") return false;
+  var p = el.props || {};
+  if (p.disabled) return false;
+  if (p.tabIndex !== undefined && p.tabIndex !== null) {
+    return Number(p.tabIndex) >= 0;
+  }
+  if (el.type === "a") return p.href != null;
+  if (el.type === "input") return p.type !== "hidden";
+  return NATIVE_FOCUSABLE_TAGS.has(el.type);
+};
+/**
+ * Tooltip props
+ * - position: 'auto' | 'top' | 'bottom' | 'left' | 'right' (default 'auto')
+ * - trigger: 'hover' | 'click' | 'focus' | Array of those (default 'hover')
+ * - content: ReactNode | ( { close } ) => ReactNode
+ * - customTrigger: ReactElement (rendered in place of children as trigger)
+ * - children: ReactNode (trigger content if customTrigger not provided)
+ * - open: controlled boolean
+ * - defaultOpen: boolean
+ * - onChange: (open) => void
+ * - delay: number ms for hover open (default 80)
+ * - offset: spacing between trigger and tooltip (default 8)
+ * - textClass: string (CSS class for text color)
+ * - bgClass: string (CSS class for background color)
+ * - className: extra classes for tooltip box
+ * - portal: boolean (default true) -> render to document.body
+ */
+var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, forwardedRef) {
+  var _customTrigger$props$, _customTrigger$props;
+  var _ref$position = _ref.position,
+    position = _ref$position === void 0 ? "auto" : _ref$position,
+    _ref$trigger = _ref.trigger,
+    trigger = _ref$trigger === void 0 ? "hover" : _ref$trigger,
+    content = _ref.content,
+    customTrigger = _ref.customTrigger,
+    children = _ref.children,
+    controlledOpen = _ref.open,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    onChange = _ref.onChange,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 80 : _ref$delay,
+    _ref$offset = _ref.offset,
+    offset = _ref$offset === void 0 ? 8 : _ref$offset,
+    _ref$textClass = _ref.textClass,
+    textClass = _ref$textClass === void 0 ? "text-black" : _ref$textClass,
+    _ref$bgClass = _ref.bgClass,
+    bgClass = _ref$bgClass === void 0 ? "bg-white" : _ref$bgClass,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$portal = _ref.portal,
+    portal = _ref$portal === void 0 ? true : _ref$portal,
+    propsId = _ref.id,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var triggerRef = useRef(null);
+  var tooltipRef = useRef(null);
+  var delayRef = useRef(null);
+  var _useState = useState(Boolean(controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : defaultOpen)),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState("top"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    setPlacement = _useState4[1];
+  var _useState5 = useState({
+      left: 0,
+      top: 0
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    coords = _useState6[0],
+    setCoords = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    mounted = _useState8[0],
+    setMounted = _useState8[1];
+  var reactId = useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : "tooltip-".concat(reactId);
+  var setTriggerRef = useCallback(function (node) {
+    triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  }, [forwardedRef]);
+  // sync controlled (adjust-during-render pattern)
+  var _useState9 = useState(controlledOpen),
+    _useState0 = _slicedToArray(_useState9, 2),
+    prevControlledOpen = _useState0[0],
+    setPrevControlledOpen = _useState0[1];
+  if (controlledOpen !== prevControlledOpen) {
+    setPrevControlledOpen(controlledOpen);
+    if (typeof controlledOpen === "boolean") setOpen(controlledOpen);
+  }
+  useEffect(function () {
+    return setMounted(true);
+  }, []);
+  var notify = useCallback(function (val) {
+    if (typeof onChange === "function") onChange(val);
+  }, [onChange]);
+  var computePosition = useCallback(function () {
+    var t = triggerRef.current;
+    var el = tooltipRef.current;
+    if (!t || !el) return;
+    var tr = t.getBoundingClientRect();
+    var ttW = el.offsetWidth;
+    var ttH = el.offsetHeight;
+    var winW = window.innerWidth;
+    var winH = window.innerHeight;
+    var candidates = ["top", "bottom", "left", "right"];
+    var chosen = position === "auto" ? "top" : position;
+    if (position === "auto") {
+      var _iterator = _createForOfIteratorHelper(candidates),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var p = _step.value;
+          if (p === "top" && tr.top >= ttH + offset) {
+            chosen = "top";
+            break;
+          }
+          if (p === "bottom" && winH - tr.bottom >= ttH + offset) {
+            chosen = "bottom";
+            break;
+          }
+          if (p === "right" && winW - tr.right >= ttW + offset) {
+            chosen = "right";
+            break;
+          }
+          if (p === "left" && tr.left >= ttW + offset) {
+            chosen = "left";
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    var left = 0;
+    var top = 0;
+    switch (chosen) {
+      case "top":
+        left = tr.left + tr.width / 2 - ttW / 2;
+        top = tr.top - ttH - offset;
+        break;
+      case "bottom":
+        left = tr.left + tr.width / 2 - ttW / 2;
+        top = tr.bottom + offset;
+        break;
+      case "left":
+        left = tr.left - ttW - offset;
+        top = tr.top + tr.height / 2 - ttH / 2;
+        break;
+      case "right":
+        left = tr.right + offset;
+        top = tr.top + tr.height / 2 - ttH / 2;
+        break;
+    }
+    var pad = 8;
+    left = Math.max(pad, Math.min(left, winW - ttW - pad));
+    top = Math.max(pad, Math.min(top, winH - ttH - pad));
+    setPlacement(chosen);
+    setCoords({
+      left: Math.round(left) + window.scrollX,
+      top: Math.round(top) + window.scrollY
+    });
+  }, [offset, position]);
+  useEffect(function () {
+    if (!open) return;
+    computePosition();
+    var ro = new ResizeObserver(function () {
+      return computePosition();
+    });
+    if (triggerRef.current) ro.observe(triggerRef.current);
+    if (tooltipRef.current) ro.observe(tooltipRef.current);
+    var onScroll = function onScroll() {
+      return computePosition();
+    };
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", computePosition);
+    return function () {
+      ro.disconnect();
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", computePosition);
+    };
+  }, [open, computePosition]);
+  // open/close helpers
+  var openTooltip = useCallback(function () {
+    var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    clearTimeout(delayRef.current);
+    if (immediate || !delay) {
+      setOpen(true);
+      notify(true);
+    } else {
+      delayRef.current = setTimeout(function () {
+        setOpen(true);
+        notify(true);
+      }, delay);
+    }
+  }, [delay, notify]);
+  var closeTooltip = useCallback(function () {
+    clearTimeout(delayRef.current);
+    setOpen(false);
+    notify(false);
+  }, [notify]);
+  // triggers normalization
+  var triggers = useMemo(function () {
+    return Array.isArray(trigger) ? trigger : [trigger];
+  }, [trigger]);
+  // hover handlers
+  useEffect(function () {
+    var t = triggerRef.current;
+    if (!t) return;
+    if (triggers.includes("hover")) {
+      var onMouseEnter = function onMouseEnter() {
+        return openTooltip();
+      };
+      var onMouseLeave = function onMouseLeave() {
+        return closeTooltip();
+      };
+      t.addEventListener("mouseenter", onMouseEnter);
+      t.addEventListener("mouseleave", onMouseLeave);
+      // also attach to tooltip to prevent flicker
+      var tip = function tip() {
+        return tooltipRef.current;
+      };
+      var tryTip = tip();
+      if (tryTip) {
+        tryTip.addEventListener("mouseenter", onMouseEnter);
+        tryTip.addEventListener("mouseleave", onMouseLeave);
+      }
+      return function () {
+        t.removeEventListener("mouseenter", onMouseEnter);
+        t.removeEventListener("mouseleave", onMouseLeave);
+        if (tryTip) {
+          tryTip.removeEventListener("mouseenter", onMouseEnter);
+          tryTip.removeEventListener("mouseleave", onMouseLeave);
+        }
+      };
+    }
+  }, [triggers, openTooltip, closeTooltip]);
+  // click handlers (toggle and outside click)
+  useEffect(function () {
+    var t = triggerRef.current;
+    if (!t) return;
+    if (triggers.includes("click")) {
+      var onClick = function onClick(e) {
+        e.stopPropagation();
+        setOpen(function (s) {
+          var next = !s;
+          notify(next);
+          return next;
+        });
+      };
+      var onDocClick = function onDocClick(e) {
+        if (!t.contains(e.target) && tooltipRef.current && !tooltipRef.current.contains(e.target)) {
+          setOpen(false);
+          notify(false);
+        }
+      };
+      t.addEventListener("click", onClick);
+      document.addEventListener("click", onDocClick);
+      return function () {
+        t.removeEventListener("click", onClick);
+        document.removeEventListener("click", onDocClick);
+      };
+    }
+  }, [triggers, notify]);
+  // focus handlers: use focusin / focusout which bubble and handle inner focusables
+  useEffect(function () {
+    var t = triggerRef.current;
+    if (!t) return;
+    if (triggers.includes("focus")) {
+      var onFocusIn = function onFocusIn() {
+        return openTooltip(true);
+      };
+      var onFocusOut = function onFocusOut() {
+        return closeTooltip();
+      };
+      t.addEventListener("focusin", onFocusIn);
+      t.addEventListener("focusout", onFocusOut);
+      return function () {
+        t.removeEventListener("focusin", onFocusIn);
+        t.removeEventListener("focusout", onFocusOut);
+      };
+    }
+  }, [triggers, openTooltip, closeTooltip]);
+  // Escape key closes tooltip
+  useEffect(function () {
+    if (!open) return;
+    var onKey = function onKey(e) {
+      if (e.key === "Escape") closeTooltip();
+    };
+    document.addEventListener("keydown", onKey);
+    return function () {
+      return document.removeEventListener("keydown", onKey);
+    };
+  }, [open, closeTooltip]);
+  // content renderer
+  var renderContent = function renderContent() {
+    if (typeof content === "function") return content({
+      close: closeTooltip
+    });
+    return content;
+  };
+  // A lone natively-focusable child is already a tab stop: don't wrap it in a
+  // second one (doubled tab stops in grids/toolbars). It gets the
+  // aria-describedby instead, so screen readers still announce the tooltip.
+  var focusableChild = !customTrigger && isNativelyFocusable(children) ? children : null;
+  // trigger element (attach ref)
+  var triggerElement = customTrigger ? (
+  /*#__PURE__*/
+  // eslint-disable-next-line react-hooks/refs -- setTriggerRef is a callback ref, run by React at commit
+  React.cloneElement(customTrigger, {
+    ref: setTriggerRef,
+    "aria-describedby": id,
+    tabIndex: (_customTrigger$props$ = (_customTrigger$props = customTrigger.props) === null || _customTrigger$props === void 0 ? void 0 : _customTrigger$props.tabIndex) !== null && _customTrigger$props$ !== void 0 ? _customTrigger$props$ : 0
+  })) : focusableChild ? jsx("span", {
+    ref: setTriggerRef,
+    className: "inline-flex",
+    children: /*#__PURE__*/React.cloneElement(focusableChild, {
+      "aria-describedby": [focusableChild.props["aria-describedby"], id].filter(Boolean).join(" ")
+    })
+  }) : jsx("span", {
+    ref: setTriggerRef,
+    className: "inline-flex",
+    tabIndex: 0,
+    "aria-describedby": id,
+    children: children
+  });
+  // Tooltip box element
+  var tooltipNode = open ? jsx("div", _objectSpread2(_objectSpread2({
+    ref: tooltipRef,
+    id: id,
+    role: "tooltip"
+  }, rest), {}, {
+    className: cn("absolute z-50 transform-gpu transition-opacity duration-150", className),
+    style: {
+      left: coords.left,
+      top: coords.top,
+      position: "absolute"
+    },
+    children: jsx("div", {
+      className: cn("max-w-xs rounded-md border border-gray-200 px-3 py-2 text-sm shadow-lg shadow-black/5", bgClass, textClass),
+      children: renderContent()
+    })
+  })) : null;
+  // Render either inline or as portal
+  return jsxs(Fragment, {
+    children: [triggerElement, mounted && portal ? /*#__PURE__*/createPortal(tooltipNode, document.body) : tooltipNode]
+  });
+});
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip as default };

package/dist/esm/components/feedback/Alert.js

@@ -0,0 +1,96 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import { Info, AlertTriangle, AlertCircle, CheckCircle, X } from 'lucide-react';
+
+var _excluded = ["variant", "title", "children", "dismissible", "onDismiss", "className"];
+var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+    title = _ref.title,
+    children = _ref.children,
+    _ref$dismissible = _ref.dismissible,
+    dismissible = _ref$dismissible === void 0 ? false : _ref$dismissible,
+    onDismiss = _ref.onDismiss,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var variants = {
+    success: {
+      container: 'bg-success-50 border-success-200',
+      icon: jsx(CheckCircle, {
+        className: "h-5 w-5 text-success-500"
+      }),
+      title: 'text-success-800',
+      content: 'text-success-700'
+    },
+    error: {
+      container: 'bg-error-50 border-error-200',
+      icon: jsx(AlertCircle, {
+        className: "h-5 w-5 text-error-500"
+      }),
+      title: 'text-error-800',
+      content: 'text-error-700'
+    },
+    warning: {
+      container: 'bg-warning-50 border-warning-200',
+      icon: jsx(AlertTriangle, {
+        className: "h-5 w-5 text-warning-500"
+      }),
+      title: 'text-warning-800',
+      content: 'text-warning-700'
+    },
+    info: {
+      container: 'bg-primary-50 border-primary-200',
+      icon: jsx(Info, {
+        className: "h-5 w-5 text-primary-500"
+      }),
+      title: 'text-primary-800',
+      content: 'text-primary-700'
+    }
+  };
+  var variantStyles = variants[variant];
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('rounded-md border p-4', variantStyles.container, className),
+    role: "alert"
+  }, props), {}, {
+    children: jsxs("div", {
+      className: "flex",
+      children: [jsx("div", {
+        className: "flex-shrink-0",
+        children: variantStyles.icon
+      }), jsxs("div", {
+        className: "ml-3 flex-1",
+        children: [title && jsx("h3", {
+          className: cn('text-sm font-medium', variantStyles.title),
+          children: title
+        }), jsx("div", {
+          className: cn('text-sm', variantStyles.content, {
+            'mt-1': title
+          }),
+          children: children
+        })]
+      }), dismissible && jsx("div", {
+        className: "ml-auto pl-3",
+        children: jsx("button", {
+          type: "button",
+          className: cn('inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2', {
+            'text-success-500 hover:bg-success-100 focus:ring-success-600': variant === 'success',
+            'text-error-500 hover:bg-error-100 focus:ring-error-600': variant === 'error',
+            'text-warning-500 hover:bg-warning-100 focus:ring-warning-600': variant === 'warning',
+            'text-primary-500 hover:bg-primary-100 focus:ring-primary-600': variant === 'info'
+          }),
+          onClick: onDismiss,
+          children: jsx(X, {
+            className: "h-4 w-4"
+          })
+        })
+      })]
+    })
+  }));
+});
+Alert.displayName = 'Alert';
+
+export { Alert as default };

package/dist/esm/components/feedback/Dialog.js

@@ -0,0 +1,200 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../utils/cn.js';
+import { X } from 'lucide-react';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+
+var _excluded = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
+  _excluded2 = ["children", "className"],
+  _excluded3 = ["children", "className"],
+  _excluded4 = ["children", "className"];
+// Elements that can receive keyboard focus. Used to drive the focus trap and to
+// pick the first element to focus when the dialog opens (WAI-ARIA APG dialog).
+var FOCUSABLE_SELECTOR = ['a[href]', 'button:not([disabled])', 'textarea:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(',');
+var getFocusable = function getFocusable(root) {
+  return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
+    return el.getAttribute('aria-hidden') !== 'true';
+  }) : [];
+};
+// Assign one node to several refs (callback or object). Lets the dialog keep
+// its internal `dialogRef` for the focus trap while still exposing the panel
+// node to a consumer-supplied `ref` (issue #56).
+var setRefs = function setRefs(node) {
+  for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    refs[_key - 1] = arguments[_key];
+  }
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') ref(node);else ref.current = node;
+  });
+};
+var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
+  var isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    title = _ref.title,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$dismissible = _ref.dismissible,
+    dismissible = _ref$dismissible === void 0 ? true : _ref$dismissible,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    footer = _ref.footer,
+    className = _ref.className,
+    onOpen = _ref.onOpen,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var dialogRef = useRef(null);
+  // The element that had focus when the dialog opened, so we can restore it on close.
+  var lastFocusedRef = useRef(null);
+  // Latest onOpen without re-running the open effect when the prop identity changes.
+  var onOpenRef = useLatestRef(onOpen);
+  useEffect(function () {
+    var _ref2, _focusables$, _onOpenRef$current;
+    if (!isOpen) return undefined;
+    // Remember the opener so focus can return to it when the dialog closes.
+    lastFocusedRef.current = document.activeElement;
+    document.body.style.overflow = 'hidden';
+    // Move focus into the panel: first focusable descendant, else the panel itself.
+    var panel = dialogRef.current;
+    var focusables = getFocusable(panel);
+    (_ref2 = (_focusables$ = focusables[0]) !== null && _focusables$ !== void 0 ? _focusables$ : panel) === null || _ref2 === void 0 || _ref2.focus();
+    (_onOpenRef$current = onOpenRef.current) === null || _onOpenRef$current === void 0 || _onOpenRef$current.call(onOpenRef, {
+      dialogRef: panel
+    });
+    return function () {
+      var _lastFocusedRef$curre, _lastFocusedRef$curre2;
+      document.body.style.overflow = 'unset';
+      // Restore focus to whatever opened the dialog (APG focus-restore requirement).
+      (_lastFocusedRef$curre = lastFocusedRef.current) === null || _lastFocusedRef$curre === void 0 || (_lastFocusedRef$curre2 = _lastFocusedRef$curre.focus) === null || _lastFocusedRef$curre2 === void 0 || _lastFocusedRef$curre2.call(_lastFocusedRef$curre);
+    };
+  }, [isOpen, onOpenRef]);
+  // Escape-to-close + Tab focus trap. An aria-modal element must keep keyboard
+  // focus inside the panel; without this, Tab walks into the page behind it.
+  useEffect(function () {
+    if (!isOpen) return undefined;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape') {
+        if (dismissible) onClose === null || onClose === void 0 || onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      var panel = dialogRef.current;
+      if (!panel) return;
+      var focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        // Nothing focusable inside — pin focus to the panel.
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      var first = focusables[0];
+      var last = focusables[focusables.length - 1];
+      var active = document.activeElement;
+      var outside = !panel.contains(active) || active === panel;
+      if (e.shiftKey && (active === first || outside)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || outside)) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, dismissible, onClose]);
+  if (!isOpen) return null;
+  var sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-full mx-4'
+  };
+  var handleBackdropClick = function handleBackdropClick(e) {
+    if (dismissible && e.target === e.currentTarget) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  };
+  return /*#__PURE__*/createPortal(jsx("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4",
+    onClick: handleBackdropClick,
+    children: jsxs("div", _objectSpread2(_objectSpread2({
+      ref: function ref(node) {
+        return setRefs(node, dialogRef, _ref3);
+      },
+      className: cn('w-full rounded-lg bg-white shadow-xl animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
+      tabIndex: -1,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": title ? 'dialog-title' : undefined
+    }, props), {}, {
+      children: [(title || showCloseButton) && jsxs("div", {
+        className: "flex items-center justify-between border-b border-gray-200 px-6 py-4",
+        children: [title && jsx("h2", {
+          id: "dialog-title",
+          className: "text-lg font-semibold text-primary-900",
+          children: title
+        }), showCloseButton && jsx("button", {
+          type: "button",
+          className: "rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
+          onClick: onClose,
+          "aria-label": "Close dialog",
+          children: jsx(X, {
+            className: "h-5 w-5"
+          })
+        })]
+      }), jsx("div", {
+        className: "px-6 py-4",
+        children: children
+      }), footer && jsx("div", {
+        className: "flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4",
+        children: footer
+      })]
+    }))
+  }), document.body);
+});
+Dialog.displayName = 'Dialog';
+// Dialog components for composition
+var DialogHeader = function DialogHeader(_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded2);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn('border-b border-gray-200 px-6 py-4', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+var DialogBody = function DialogBody(_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded3);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn('px-6 py-4', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+var DialogFooter = function DialogFooter(_ref6) {
+  var children = _ref6.children,
+    className = _ref6.className,
+    props = _objectWithoutProperties(_ref6, _excluded4);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    className: cn('flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4', className)
+  }, props), {}, {
+    children: children
+  }));
+};
+DialogHeader.displayName = 'Dialog.Header';
+DialogBody.displayName = 'Dialog.Body';
+DialogFooter.displayName = 'Dialog.Footer';
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+
+export { Dialog as default };