@lindle/linoardo 1.0.10 → 1.0.12

package/dist/index.js

@@ -1,7 +1,7 @@
-import * as React5 from 'react';
+import * as React3 from 'react';
+import { forwardRef, useCallback, useContext, useId, useState, useMemo, useEffect } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
 
 // src/Containment/Button/index.tsx
 
@@ -130,7 +130,7 @@ var sizeClasses = {
   large: "px-6 py-3 text-lg",
   "x-large": "px-7 py-3.5 text-xl"
 };
-var Button = React5.forwardRef(
+var Button = React3.forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -301,7 +301,7 @@ var resolveIconClassName2 = (icon) => {
   const normalized = iconName.startsWith("mdi-") ? iconName : `mdi-${iconName}`;
   return Array.from(/* @__PURE__ */ new Set([...baseClasses, normalized])).join(" ");
 };
-var Chip = React5.forwardRef(
+var Chip = forwardRef(
   ({
     variant = "solid",
     color = "primary",
@@ -333,7 +333,7 @@ var Chip = React5.forwardRef(
     const appendIconClassName = resolveIconClassName2(appendIcon);
     const closeIconClassName = resolveIconClassName2(closeIcon);
     const filterIconClassName = filter && selected ? resolveIconClassName2(filterIcon) : void 0;
-    const handleClick = React5.useCallback(
+    const handleClick = useCallback(
       (event) => {
         if (disabled) {
           event.preventDefault();
@@ -344,7 +344,7 @@ var Chip = React5.forwardRef(
       },
       [disabled, onClick]
     );
-    const handleKeyDown = React5.useCallback(
+    const handleKeyDown = useCallback(
       (event) => {
         onKeyDown?.(event);
         if (event.defaultPrevented || disabled || !interactive) {
@@ -357,7 +357,7 @@ var Chip = React5.forwardRef(
       },
       [disabled, interactive, onKeyDown]
     );
-    const handleCloseClick = React5.useCallback(
+    const handleCloseClick = useCallback(
       (event) => {
         event.stopPropagation();
         if (disabled) {
@@ -368,7 +368,7 @@ var Chip = React5.forwardRef(
       },
       [disabled, onClose]
     );
-    const handleCloseKeyDown = React5.useCallback((event) => {
+    const handleCloseKeyDown = useCallback((event) => {
       if (event.key === " " || event.key === "Enter") {
         event.stopPropagation();
       }
@@ -440,7 +440,7 @@ var accentClasses = {
   surface: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" },
   bw: { text: "text-gray-900", bg: "bg-gray-100", indicator: "bg-gray-900" }
 };
-var ListItem = React5.forwardRef((props, ref) => {
+var ListItem = React3.forwardRef((props, ref) => {
   const {
     component,
     href,
@@ -557,13 +557,13 @@ var listRoundedClasses = {
   pill: "rounded-full"
 };
 var isListItemElement = (element) => {
-  if (!React5.isValidElement(element)) {
+  if (!React3.isValidElement(element)) {
     return false;
   }
   const elementType = element.type;
   return element.type === Item_default || elementType.displayName === Item_default.displayName;
 };
-var List = React5.forwardRef((props, ref) => {
+var List = React3.forwardRef((props, ref) => {
   const {
     variant = "solid",
     density = "default",
@@ -585,11 +585,11 @@ var List = React5.forwardRef((props, ref) => {
   const navClass = nav ? "py-1" : void 0;
   const accentColor = color;
   const enhanceChild = (child) => {
-    if (!React5.isValidElement(child)) {
+    if (!React3.isValidElement(child)) {
       return child;
     }
     if (isListItemElement(child)) {
-      return React5.cloneElement(child, {
+      return React3.cloneElement(child, {
         density: child.props.density ?? density,
         lines: child.props.lines ?? lines,
         nav: child.props.nav ?? nav,
@@ -599,14 +599,14 @@ var List = React5.forwardRef((props, ref) => {
       });
     }
     if (child.props && typeof child.props === "object" && "children" in child.props) {
-      const nestedChildren = React5.Children.map(child.props.children, enhanceChild);
+      const nestedChildren = React3.Children.map(child.props.children, enhanceChild);
       if (nestedChildren !== child.props.children) {
-        return React5.cloneElement(child, void 0, nestedChildren);
+        return React3.cloneElement(child, void 0, nestedChildren);
       }
     }
     return child;
   };
-  const resolvedChildren = React5.Children.map(children, enhanceChild);
+  const resolvedChildren = React3.Children.map(children, enhanceChild);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -620,8 +620,6 @@ var List = React5.forwardRef((props, ref) => {
 });
 List.displayName = "List";
 var List_default = List;
-var isBrowser = typeof window !== "undefined";
-var useIsomorphicLayoutEffect = isBrowser ? React5.useLayoutEffect : React5.useEffect;
 var placementClasses = {
   "bottom-start": "left-0 top-full origin-top-left",
   bottom: "left-1/2 top-full -translate-x-1/2 origin-top",
@@ -634,350 +632,75 @@ var offsetClasses = {
   top: "mb-2",
   bottom: "mt-2"
 };
-var menuBaseClasses = "absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 data-[state=open]:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
+var menuBaseClasses = "absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2";
 var overlayBaseClasses = "fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]";
-var Menu = React5.forwardRef((props, ref) => {
+var Menu = React3.forwardRef((props, ref) => {
   const {
     activator,
     children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
     placement = "bottom-start",
-    openOnHover = false,
-    closeOnContentClick = true,
+    open,
+    openOnHover = true,
+    openOnFocus = true,
     matchActivatorWidth = false,
     keepMounted = false,
-    disabled = false,
     scrim = false,
     contentClassName,
     contentProps,
     overlayClassName,
     className,
-    onMouseEnter: rootMouseEnter,
-    onMouseLeave: rootMouseLeave,
     ...rest
   } = props;
-  const baseId = React5.useId();
-  const menuId = `${baseId}-menu`;
-  const activatorId = `${baseId}-activator`;
-  const isControlled = typeof openProp === "boolean";
-  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
-  const open = isControlled ? Boolean(openProp) : internalOpen;
-  const localRootRef = React5.useRef(null);
-  const menuRef = React5.useRef(null);
-  const activatorRef = React5.useRef(null);
-  const closeTimeoutRef = React5.useRef(null);
-  const mergedRootRef = React5.useCallback(
-    (node) => {
-      localRootRef.current = node;
-      if (typeof ref === "function") {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
-      }
-    },
-    [ref]
-  );
-  const [activatorWidth, setActivatorWidth] = React5.useState();
-  const updateActivatorWidth = React5.useCallback(() => {
-    if (!matchActivatorWidth) {
-      setActivatorWidth(void 0);
-      return;
-    }
-    const node = activatorRef.current;
-    if (!node) {
-      return;
-    }
-    setActivatorWidth(node.getBoundingClientRect().width);
-  }, [matchActivatorWidth]);
-  useIsomorphicLayoutEffect(() => {
-    if (!matchActivatorWidth) {
-      return;
-    }
-    updateActivatorWidth();
-    if (!activatorRef.current || typeof ResizeObserver === "undefined") {
-      return;
-    }
-    const observer = new ResizeObserver(() => updateActivatorWidth());
-    observer.observe(activatorRef.current);
-    return () => observer.disconnect();
-  }, [matchActivatorWidth, updateActivatorWidth]);
-  const setOpen = React5.useCallback(
-    (nextOpen) => {
-      if (disabled || open === nextOpen) {
-        return;
-      }
-      if (!isControlled) {
-        setInternalOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-    },
-    [disabled, isControlled, onOpenChange, open]
-  );
-  React5.useEffect(() => {
-    if (!disabled || !open) {
-      return;
-    }
-    if (!isControlled) {
-      setInternalOpen(false);
-    }
-    onOpenChange?.(false);
-  }, [disabled, open, isControlled, onOpenChange]);
-  React5.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (!target) {
-        return;
-      }
-      if (localRootRef.current?.contains(target)) {
-        return;
-      }
-      setOpen(false);
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setOpen(false);
-        activatorRef.current?.focus();
-      }
-    };
-    document.addEventListener("pointerdown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, setOpen]);
-  React5.useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const node = menuRef.current;
-    if (!node) {
-      return;
-    }
-    const id = window.requestAnimationFrame(() => {
-      node.focus({ preventScroll: true });
-    });
-    return () => window.cancelAnimationFrame(id);
-  }, [open]);
-  const setActivatorNode = React5.useCallback(
-    (node) => {
-      activatorRef.current = node;
-      if (node && matchActivatorWidth) {
-        setActivatorWidth(node.getBoundingClientRect().width);
-      }
-    },
-    [matchActivatorWidth]
-  );
-  const handleActivatorClick = React5.useCallback(
-    (event) => {
-      event.preventDefault();
-      if (disabled) {
-        return;
-      }
-      setOpen(!open);
-    },
-    [disabled, open, setOpen]
-  );
-  const handleActivatorKeyDown = React5.useCallback(
-    (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        setOpen(!open);
-      }
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setOpen(true);
-      }
-    },
-    [open, setOpen]
-  );
-  const clearCloseTimeout = React5.useCallback(() => {
-    if (closeTimeoutRef.current !== null) {
-      if (isBrowser) {
-        window.clearTimeout(closeTimeoutRef.current);
-      }
-      closeTimeoutRef.current = null;
-    }
-  }, []);
-  const scheduleClose = React5.useCallback(() => {
-    if (!isBrowser) {
-      setOpen(false);
-      return;
+  const hasContent = children !== void 0 && children !== null;
+  const manual = typeof open === "boolean";
+  const visible = Boolean(open);
+  const shouldRenderContent = hasContent && (keepMounted || visible || !manual && (openOnHover || openOnFocus));
+  const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
+  const visibilityClasses = (() => {
+    if (manual) {
+      return visible ? "pointer-events-auto opacity-100 scale-100" : "pointer-events-none opacity-0 scale-95";
     }
-    clearCloseTimeout();
-    closeTimeoutRef.current = window.setTimeout(() => {
-      setOpen(false);
-      closeTimeoutRef.current = null;
-    }, 150);
-  }, [clearCloseTimeout, setOpen]);
-  React5.useEffect(() => {
-    return () => clearCloseTimeout();
-  }, [clearCloseTimeout]);
-  const isMovingWithinMenu = React5.useCallback(
-    (event) => {
-      const nextTarget = event.relatedTarget;
-      if (!nextTarget || !localRootRef.current) {
-        return false;
-      }
-      return localRootRef.current.contains(nextTarget);
-    },
-    [localRootRef]
-  );
-  const handleRootMouseEnter = React5.useCallback(
-    (event) => {
-      rootMouseEnter?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (openOnHover) {
-        clearCloseTimeout();
-        setOpen(true);
-      }
-    },
-    [clearCloseTimeout, openOnHover, rootMouseEnter, setOpen]
-  );
-  const handleRootMouseLeave = React5.useCallback(
-    (event) => {
-      rootMouseLeave?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (openOnHover) {
-        if (isMovingWithinMenu(event)) {
-          return;
-        }
-        scheduleClose();
-      }
-    },
-    [isMovingWithinMenu, openOnHover, rootMouseLeave, scheduleClose]
-  );
-  const handleActivatorMouseEnter = React5.useCallback(
-    (_event) => {
-      if (disabled) {
-        return;
-      }
-      clearCloseTimeout();
-      setOpen(true);
-    },
-    [clearCloseTimeout, disabled, setOpen]
-  );
-  const handleActivatorMouseLeave = React5.useCallback(
-    (event) => {
-      if (disabled || !openOnHover) {
-        return;
-      }
-      if (isMovingWithinMenu(event)) {
-        return;
-      }
-      scheduleClose();
-    },
-    [disabled, isMovingWithinMenu, openOnHover, scheduleClose]
-  );
+    const base2 = "pointer-events-none opacity-0 scale-95";
+    const hover = openOnHover ? " group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : "";
+    const focus = openOnFocus ? " group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : "";
+    return `${base2}${hover}${focus}`;
+  })();
   const {
-    className: contentClass,
+    className: contentExtraClassName,
     style: contentStyle,
-    onClick: contentOnClick,
-    onMouseEnter: contentOnMouseEnter,
-    onMouseLeave: contentOnMouseLeave,
     role: contentRole,
     tabIndex: contentTabIndex,
-    ["aria-labelledby"]: ariaLabelledBy,
     ...restContentProps
   } = contentProps ?? {};
-  const shouldRenderContent = open || keepMounted;
-  const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
-  const activatorElement = activator({
-    ref: setActivatorNode,
-    id: activatorId,
-    "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": menuId,
-    onClick: handleActivatorClick,
-    onKeyDown: handleActivatorKeyDown,
-    onMouseEnter: openOnHover ? handleActivatorMouseEnter : void 0,
-    onMouseLeave: openOnHover ? handleActivatorMouseLeave : void 0,
-    disabled,
-    open
-  });
+  const overlayNode = scrim && visible ? /* @__PURE__ */ jsx("div", { className: twMerge(overlayBaseClasses, overlayClassName), "aria-hidden": true }) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    scrim && open ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: twMerge(overlayBaseClasses, overlayClassName),
-        "aria-hidden": true,
-        onClick: () => setOpen(false),
-        onMouseDown: (event) => event.preventDefault()
-      }
-    ) : null,
+    overlayNode,
     /* @__PURE__ */ jsxs(
       "div",
       {
         ...rest,
-        ref: mergedRootRef,
-        className: twMerge("relative inline-flex min-w-0", className),
-        "data-open": open || void 0,
-        onMouseEnter: openOnHover ? handleRootMouseEnter : rootMouseEnter,
-        onMouseLeave: openOnHover ? handleRootMouseLeave : rootMouseLeave,
+        ref,
+        className: twMerge("relative inline-flex min-w-0 group/menu", className),
+        "data-open": visible || void 0,
         children: [
-          activatorElement,
+          /* @__PURE__ */ jsx("div", { className: "inline-flex w-full min-w-0", children: activator }),
           shouldRenderContent ? /* @__PURE__ */ jsx(
             "div",
             {
               ...restContentProps,
-              ref: menuRef,
-              id: menuId,
-              role: contentRole ?? "menu",
-              tabIndex: contentTabIndex ?? -1,
-              "aria-labelledby": ariaLabelledBy ?? activatorId,
-              "data-state": open ? "open" : "closed",
               className: twMerge(
                 menuBaseClasses,
                 placementClasses[placement],
                 offsetClasses[verticalPlacement],
+                matchActivatorWidth ? "min-w-full" : void 0,
+                visibilityClasses,
                 contentClassName,
-                contentClass
+                contentExtraClassName
               ),
-              style: {
-                ...contentStyle,
-                ...matchActivatorWidth && activatorWidth ? { minWidth: activatorWidth, width: activatorWidth } : void 0
-              },
-              onMouseEnter: (event) => {
-                contentOnMouseEnter?.(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (openOnHover) {
-                  clearCloseTimeout();
-                  setOpen(true);
-                }
-              },
-              onMouseLeave: (event) => {
-                contentOnMouseLeave?.(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (openOnHover) {
-                  if (isMovingWithinMenu(event)) {
-                    return;
-                  }
-                  scheduleClose();
-                }
-              },
-              onClick: (event) => {
-                contentOnClick?.(event);
-                if (event.defaultPrevented) {
-                  return;
-                }
-                if (closeOnContentClick) {
-                  setOpen(false);
-                }
-              },
+              "data-state": visible ? "open" : "closed",
+              role: contentRole ?? "menu",
+              tabIndex: contentTabIndex ?? -1,
+              style: contentStyle,
               children
             }
           ) : null
@@ -988,7 +711,7 @@ var Menu = React5.forwardRef((props, ref) => {
 });
 Menu.displayName = "Menu";
 var Menu_default = Menu;
-var ExpansionPanelContext = React5.createContext(null);
+var ExpansionPanelContext = React3.createContext(null);
 var densityClasses2 = {
   comfortable: "py-5",
   default: "py-4",
@@ -1017,7 +740,7 @@ var accentClasses2 = {
   surface: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" },
   bw: { text: "text-gray-900", bg: "bg-gray-100", border: "border-gray-200" }
 };
-var ExpansionPanelItem = React5.forwardRef((props, ref) => {
+var ExpansionPanelItem = forwardRef((props, ref) => {
   const {
     value,
     title,
@@ -1036,8 +759,8 @@ var ExpansionPanelItem = React5.forwardRef((props, ref) => {
     color: colorOverride,
     ...rest
   } = props;
-  const context = React5.useContext(ExpansionPanelContext);
-  const generatedValue = React5.useId();
+  const context = useContext(ExpansionPanelContext);
+  const generatedValue = useId();
   const panelValue = value ?? generatedValue;
   const density = context?.density ?? "default";
   const color = colorOverride ?? context?.color ?? "primary";
@@ -1045,9 +768,9 @@ var ExpansionPanelItem = React5.forwardRef((props, ref) => {
   const variant = context?.variant ?? "elevated";
   const rounded = context?.rounded ?? "lg";
   const accent = accentClasses2[color] ?? accentClasses2.primary;
-  const headerId = React5.useId();
-  const contentId = React5.useId();
-  const [standaloneExpanded, setStandaloneExpanded] = React5.useState(false);
+  const headerId = useId();
+  const contentId = useId();
+  const [standaloneExpanded, setStandaloneExpanded] = useState(false);
   const isExpanded = context ? context.expandedValues.includes(panelValue) : standaloneExpanded;
   const handleToggle = () => {
     if (disabled) {
@@ -1173,7 +896,7 @@ var normalizeValues = (value, allowMultiple) => {
   return normalized.length ? [normalized[0]] : [];
 };
 var clampValues = (values, allowMultiple) => allowMultiple ? uniqueValues(values) : values.length ? [values[0]] : [];
-var ExpansionPanel = React5.forwardRef((props, ref) => {
+var ExpansionPanel = forwardRef((props, ref) => {
   const {
     variant = "elevated",
     rounded = "lg",
@@ -1189,22 +912,22 @@ var ExpansionPanel = React5.forwardRef((props, ref) => {
     ...rest
   } = props;
   const isControlled = value !== void 0;
-  const controlledValues = React5.useMemo(() => {
+  const controlledValues = useMemo(() => {
     if (!isControlled) {
       return void 0;
     }
     return normalizeValues(value, multiple);
   }, [isControlled, value, multiple]);
-  const [internalValues, setInternalValues] = React5.useState(
+  const [internalValues, setInternalValues] = useState(
     () => normalizeValues(defaultValue, multiple)
   );
   const expandedValues = controlledValues ?? internalValues;
-  React5.useEffect(() => {
+  useEffect(() => {
     if (!isControlled) {
       setInternalValues((prev) => clampValues(prev, multiple));
     }
   }, [multiple, isControlled]);
-  const handleValueChange = React5.useCallback(
+  const handleValueChange = useCallback(
     (next) => {
       if (!isControlled) {
         setInternalValues(next);
@@ -1219,7 +942,7 @@ var ExpansionPanel = React5.forwardRef((props, ref) => {
     },
     [isControlled, multiple, onChange]
   );
-  const toggle = React5.useCallback(
+  const toggle = useCallback(
     (panelValue, disabled) => {
       if (disabled) {
         return;
@@ -1230,7 +953,7 @@ var ExpansionPanel = React5.forwardRef((props, ref) => {
     },
     [expandedValues, handleValueChange, multiple]
   );
-  const providerValue = React5.useMemo(
+  const providerValue = useMemo(
     () => ({ expandedValues, toggle, density, color, divider, rounded, variant }),
     [expandedValues, toggle, density, color, divider, rounded, variant]
   );
@@ -1249,8 +972,6 @@ var ExpansionPanel = React5.forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = "ExpansionPanel";
 var ExpansionPanel_default = ExpansionPanel;
-var isBrowser2 = typeof window !== "undefined";
-var useIsomorphicLayoutEffect2 = isBrowser2 ? React5.useLayoutEffect : React5.useEffect;
 var containerBaseClasses = "fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none";
 var overlayBaseClasses2 = "absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100";
 var panelWrapperClasses = "relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100";
@@ -1261,281 +982,87 @@ var resolveSizeValue = (value) => {
   }
   return typeof value === "number" ? `${value}px` : value;
 };
-var Dialog = React5.forwardRef((props, forwardedRef) => {
+var Dialog = React3.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    persistent = false,
-    closeOnEsc = true,
-    closeOnOutsideClick = true,
-    closeOnContentClick = false,
-    scrim = true,
+    open = false,
     keepMounted = false,
+    scrim = true,
     fullscreen = false,
     maxWidth = "32rem",
     width,
     containerClassName,
     overlayClassName,
     overlayProps,
-    scrollLock = true,
-    disabled = false,
     className,
     style,
-    tabIndex: tabIndexProp,
-    role: roleProp,
-    id: idProp,
+    role: roleProp = "dialog",
+    tabIndex = -1,
+    id,
     ["aria-modal"]: ariaModalProp,
     ...rest
   } = props;
-  const { onClick: panelOnClick, ...panelProps } = rest;
-  const {
-    className: overlayPropsClassName,
-    onPointerDown: overlayOnPointerDown,
-    ...overlayRestProps
-  } = overlayProps ?? {};
-  const baseId = React5.useId();
-  const panelId = idProp ?? `${baseId}-dialog`;
-  const activatorId = `${panelId}-activator`;
-  const role = roleProp ?? "dialog";
-  const resolvedTabIndex = tabIndexProp ?? -1;
-  const isControlled = typeof openProp === "boolean";
-  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
-  const open = isControlled ? Boolean(openProp) : internalOpen;
   const state = open ? "open" : "closed";
-  const panelRef = React5.useRef(null);
-  const activatorRef = React5.useRef(null);
-  const previouslyFocusedElement = React5.useRef(null);
-  const [mounted, setMounted] = React5.useState(false);
-  useIsomorphicLayoutEffect2(() => {
-    setMounted(true);
-  }, []);
-  const setPanelRef = React5.useCallback(
-    (node) => {
-      panelRef.current = node;
-      if (typeof forwardedRef === "function") {
-        forwardedRef(node);
-      } else if (forwardedRef) {
-        forwardedRef.current = node;
-      }
-    },
-    [forwardedRef]
-  );
-  const setActivatorNode = React5.useCallback((node) => {
-    activatorRef.current = node;
-  }, []);
-  const updateOpen = React5.useCallback(
-    (nextOpen, options) => {
-      if (disabled && nextOpen) {
-        return;
-      }
-      if (!options?.force && !nextOpen && persistent) {
-        return;
-      }
-      if (!isControlled) {
-        setInternalOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-    },
-    [disabled, isControlled, onOpenChange, persistent]
-  );
-  React5.useEffect(() => {
-    if (!disabled || !open) {
-      return;
+  const shouldRenderDialog = keepMounted || open;
+  const resolvedStyle = { ...style };
+  if (fullscreen) {
+    if (resolvedStyle.maxWidth === void 0) {
+      resolvedStyle.maxWidth = "none";
     }
-    updateOpen(false, { force: true });
-  }, [disabled, open, updateOpen]);
-  React5.useEffect(() => {
-    if (!isBrowser2) {
-      return;
-    }
-    if (open) {
-      previouslyFocusedElement.current = document.activeElement;
-      const node = panelRef.current;
-      if (node) {
-        if (!node.hasAttribute("tabindex")) {
-          node.setAttribute("tabindex", resolvedTabIndex.toString());
-        }
-        requestAnimationFrame(() => node.focus({ preventScroll: true }));
-      }
-      return;
+    if (resolvedStyle.width === void 0) {
+      resolvedStyle.width = "100%";
     }
-    const previous = previouslyFocusedElement.current ?? activatorRef.current;
-    if (previous && typeof previous.focus === "function") {
-      previous.focus();
+    if (resolvedStyle.height === void 0) {
+      resolvedStyle.height = "100%";
     }
-  }, [open, resolvedTabIndex]);
-  React5.useEffect(() => {
-    if (!open || !closeOnEsc || persistent || !isBrowser2) {
-      return;
+    if (resolvedStyle.maxHeight === void 0) {
+      resolvedStyle.maxHeight = "100%";
     }
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") {
-        return;
-      }
-      event.stopPropagation();
-      updateOpen(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [closeOnEsc, open, persistent, updateOpen]);
-  React5.useEffect(() => {
-    if (!scrollLock || !open || !isBrowser2) {
-      return;
+  } else {
+    if (resolvedStyle.maxWidth === void 0) {
+      resolvedStyle.maxWidth = resolveSizeValue(maxWidth);
     }
-    const { body, documentElement } = document;
-    const previousOverflow = body.style.overflow;
-    const previousPaddingRight = body.style.paddingRight;
-    const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
-    body.style.overflow = "hidden";
-    if (scrollbarWidth > 0) {
-      const computedPaddingRight = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
-      body.style.paddingRight = `${computedPaddingRight + scrollbarWidth}px`;
+    if (width !== void 0 && resolvedStyle.width === void 0) {
+      resolvedStyle.width = resolveSizeValue(width);
     }
-    return () => {
-      body.style.overflow = previousOverflow;
-      body.style.paddingRight = previousPaddingRight;
-    };
-  }, [open, scrollLock]);
-  const handleOverlayPointerDown = React5.useCallback(
-    (event) => {
-      overlayOnPointerDown?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (!closeOnOutsideClick || event.button > 0) {
-        return;
-      }
-      updateOpen(false);
-    },
-    [closeOnOutsideClick, overlayOnPointerDown, updateOpen]
-  );
-  const handleContentClick = React5.useCallback(
-    (event) => {
-      panelOnClick?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (closeOnContentClick) {
-        updateOpen(false, { force: true });
-      }
-    },
-    [closeOnContentClick, panelOnClick, updateOpen]
-  );
-  const handleActivatorClick = React5.useCallback(
-    (event) => {
-      if (disabled) {
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
-      updateOpen(!open, { force: true });
-    },
-    [disabled, open, updateOpen]
-  );
-  const handleActivatorKeyDown = React5.useCallback(
-    (event) => {
-      if (event.key !== "Enter" && event.key !== " ") {
-        return;
-      }
-      event.preventDefault();
-      if (disabled) {
-        return;
-      }
-      updateOpen(!open, { force: true });
-    },
-    [disabled, open, updateOpen]
-  );
-  const shouldRenderOverlay = (scrim || closeOnOutsideClick) && isBrowser2;
-  const portalReady = mounted && isBrowser2 && (open || keepMounted);
-  const resolvedPanelStyle = React5.useMemo(() => {
-    const nextStyle = { ...style };
-    if (fullscreen) {
-      if (nextStyle.maxWidth === void 0) {
-        nextStyle.maxWidth = "none";
-      }
-      if (nextStyle.width === void 0) {
-        nextStyle.width = "100%";
-      }
-      if (nextStyle.height === void 0) {
-        nextStyle.height = "100%";
-      }
-      if (nextStyle.maxHeight === void 0) {
-        nextStyle.maxHeight = "100%";
-      }
-    } else {
-      if (nextStyle.maxWidth === void 0) {
-        nextStyle.maxWidth = resolveSizeValue(maxWidth);
-      }
-      if (width !== void 0 && nextStyle.width === void 0) {
-        nextStyle.width = resolveSizeValue(width);
-      }
-    }
-    return nextStyle;
-  }, [fullscreen, maxWidth, style, width]);
-  const ariaModal = ariaModalProp ?? (role === "dialog" || role === "alertdialog" ? true : void 0);
-  const overlayNode = shouldRenderOverlay && portalReady ? /* @__PURE__ */ jsx(
+  }
+  const ariaModal = ariaModalProp ?? (roleProp === "dialog" || roleProp === "alertdialog" ? true : void 0);
+  const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};
+  const overlayNode = shouldRenderDialog && scrim ? /* @__PURE__ */ jsx(
     "div",
     {
-      ...overlayRestProps,
-      className: twMerge(
-        overlayBaseClasses2,
-        scrim ? void 0 : "bg-transparent backdrop-blur-none",
-        overlayClassName,
-        overlayPropsClassName
-      ),
+      ...restOverlayProps,
+      className: twMerge(overlayBaseClasses2, overlayClassName, overlayExtraClassName),
       "data-state": state,
-      "aria-hidden": true,
-      onPointerDown: handleOverlayPointerDown
+      "aria-hidden": true
     }
   ) : null;
-  const dialogNode = portalReady && document.body ? createPortal(
-    /* @__PURE__ */ jsxs("div", { className: twMerge(containerBaseClasses, containerClassName), "data-state": state, "aria-hidden": !open, children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activator ? /* @__PURE__ */ jsx("div", { className: "inline-flex", children: activator }) : null,
+    shouldRenderDialog ? /* @__PURE__ */ jsxs("div", { className: twMerge(containerBaseClasses, containerClassName), "data-state": state, "aria-hidden": !open, children: [
       overlayNode,
       /* @__PURE__ */ jsx("div", { className: twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"), "data-state": state, children: /* @__PURE__ */ jsx(
         "div",
         {
-          ...panelProps,
-          ref: setPanelRef,
-          id: panelId,
-          role,
-          tabIndex: resolvedTabIndex,
+          ...rest,
+          ref: forwardedRef,
+          id,
+          role: roleProp,
+          tabIndex,
           "aria-modal": ariaModal,
-          className: twMerge(
-            panelBaseClasses,
-            fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
-            className
-          ),
-          style: resolvedPanelStyle,
+          className: twMerge(panelBaseClasses, fullscreen ? "h-full w-full max-w-none rounded-none" : void 0, className),
+          style: resolvedStyle,
           "data-state": state,
-          onClick: handleContentClick,
           children
         }
       ) })
-    ] }),
-    document.body
-  ) : null;
-  const activatorNode = activator ? activator({
-    ref: setActivatorNode,
-    id: activatorId,
-    disabled,
-    open,
-    "aria-haspopup": "dialog",
-    "aria-expanded": open,
-    "aria-controls": panelId,
-    onClick: handleActivatorClick,
-    onKeyDown: handleActivatorKeyDown
-  }) : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    activatorNode,
-    dialogNode
+    ] }) : null
   ] });
 });
 Dialog.displayName = "Dialog";
 var Dialog_default = Dialog;
-var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-white/10 bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-lg shadow-black/30 ring-1 ring-black/40 transition-all duration-150 data-[state=closed]:pointer-events-none data-[state=closed]:scale-95 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:scale-100";
+var tooltipBaseClasses = "absolute z-[60] max-w-xs rounded-lg border border-white/10 bg-gray-900 px-3 py-2 text-xs font-medium text-white shadow-lg shadow-black/30 ring-1 ring-black/40 transition-all duration-150";
 var wrapperBaseClasses = "relative inline-flex max-w-full align-middle";
 var arrowBaseClasses = "pointer-events-none absolute h-2 w-2 rotate-45 border border-white/10 bg-gray-900 shadow-lg shadow-black/20";
 var resolveSizeValue2 = (value) => {
@@ -1572,259 +1099,70 @@ var arrowPlacementClasses = {
   "right-start": "left-full top-4 -translate-x-1/2",
   "right-end": "left-full bottom-4 -translate-x-1/2"
 };
-var ToolTip = React5.forwardRef((props, forwardedRef) => {
+var ToolTip = React3.forwardRef((props, forwardedRef) => {
   const {
     activator,
     children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
     placement = "top",
-    openDelay = 120,
-    closeDelay = 100,
-    openOnHover = true,
-    openOnFocus = true,
-    openOnClick = false,
-    interactive = false,
     arrow = true,
     disabled = false,
+    persistent = false,
+    showOnHover = true,
+    showOnFocus = true,
+    interactive = false,
     keepMounted = false,
     maxWidth = "18rem",
     wrapperClassName,
-    closeOnContentClick = false,
     className,
     style,
-    id: idProp,
+    id,
     ...rest
   } = props;
-  const { onPointerEnter: tooltipPointerEnter, onPointerLeave: tooltipPointerLeave, onClick: tooltipOnClick, ...tooltipProps } = rest;
-  const baseId = React5.useId();
-  const tooltipId = idProp ?? `${baseId}-tooltip`;
-  const isControlled = typeof openProp === "boolean";
-  const [internalOpen, setInternalOpen] = React5.useState(defaultOpen);
-  const open = isControlled ? Boolean(openProp) : internalOpen;
-  const state = open ? "open" : "closed";
-  const describedBy = open || keepMounted ? tooltipId : void 0;
-  const openTimeoutRef = React5.useRef(null);
-  const closeTimeoutRef = React5.useRef(null);
-  const clearOpenTimer = React5.useCallback(() => {
-    if (openTimeoutRef.current !== null) {
-      window.clearTimeout(openTimeoutRef.current);
-      openTimeoutRef.current = null;
+  const hasRenderableContent = children !== void 0 && children !== null;
+  const shouldEnableTriggers = !disabled && (persistent || showOnHover || showOnFocus);
+  const shouldRenderTooltip = hasRenderableContent && (shouldEnableTriggers || keepMounted);
+  const resolvedStyle = { ...style };
+  if (resolvedStyle.maxWidth === void 0) {
+    resolvedStyle.maxWidth = resolveSizeValue2(maxWidth);
+  }
+  const baseVisibility = persistent ? "opacity-100 scale-100" : "opacity-0 scale-95";
+  const hoverClasses = !persistent && showOnHover ? " group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100" : "";
+  const focusClasses = !persistent && showOnFocus ? " group-focus-within/tooltip:opacity-100 group-focus-within/tooltip:scale-100" : "";
+  const visibilityClasses = `${baseVisibility}${hoverClasses}${focusClasses}`;
+  const pointerClasses = (() => {
+    if (persistent) {
+      return "pointer-events-auto";
     }
-  }, []);
-  const clearCloseTimer = React5.useCallback(() => {
-    if (closeTimeoutRef.current !== null) {
-      window.clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
+    if (!interactive) {
+      return "pointer-events-none";
     }
-  }, []);
-  const setOpen = React5.useCallback(
-    (nextOpen) => {
-      if (!isControlled) {
-        setInternalOpen(nextOpen);
-      }
-      onOpenChange?.(nextOpen);
-    },
-    [isControlled, onOpenChange]
-  );
-  const scheduleOpen = React5.useCallback(
-    (source) => {
-      if (disabled) {
-        return;
-      }
-      clearCloseTimer();
-      const delay = source === "click" ? 0 : openDelay;
-      if (delay <= 0) {
-        setOpen(true);
-        return;
-      }
-      openTimeoutRef.current = window.setTimeout(() => setOpen(true), delay);
-    },
-    [clearCloseTimer, disabled, openDelay, setOpen]
-  );
-  const scheduleClose = React5.useCallback(
-    (source) => {
-      clearOpenTimer();
-      const delay = source === "click" ? 0 : closeDelay;
-      if (delay <= 0) {
-        setOpen(false);
-        return;
-      }
-      closeTimeoutRef.current = window.setTimeout(() => setOpen(false), delay);
-    },
-    [clearOpenTimer, closeDelay, setOpen]
-  );
-  React5.useEffect(() => {
-    if (!disabled) {
-      return;
+    const classes = ["pointer-events-none"];
+    if (showOnHover) {
+      classes.push("group-hover/tooltip:pointer-events-auto");
     }
-    clearOpenTimer();
-    clearCloseTimer();
-    if (open) {
-      setOpen(false);
-    }
-  }, [clearCloseTimer, clearOpenTimer, disabled, open, setOpen]);
-  React5.useEffect(
-    () => () => {
-      clearOpenTimer();
-      clearCloseTimer();
-    },
-    [clearCloseTimer, clearOpenTimer]
-  );
-  const handleActivatorPointerEnter = React5.useCallback(
-    (event) => {
-      if (event.pointerType === "touch") {
-        return;
-      }
-      if (openOnHover) {
-        scheduleOpen("hover");
-      }
-    },
-    [openOnHover, scheduleOpen]
-  );
-  const handleActivatorPointerLeave = React5.useCallback(
-    (event) => {
-      if (event.pointerType === "touch") {
-        return;
-      }
-      if (openOnHover) {
-        scheduleClose("hover");
-      }
-    },
-    [openOnHover, scheduleClose]
-  );
-  const handleActivatorFocus = React5.useCallback(
-    () => {
-      if (openOnFocus) {
-        scheduleOpen("focus");
-      }
-    },
-    [openOnFocus, scheduleOpen]
-  );
-  const handleActivatorBlur = React5.useCallback(
-    () => {
-      if (openOnFocus) {
-        scheduleClose("focus");
-      }
-    },
-    [openOnFocus, scheduleClose]
-  );
-  const handleActivatorClick = React5.useCallback(
-    (event) => {
-      if (!openOnClick) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      if (disabled) {
-        return;
-      }
-      if (open) {
-        scheduleClose("click");
-      } else {
-        scheduleOpen("click");
-      }
-    },
-    [disabled, open, openOnClick, scheduleClose, scheduleOpen]
-  );
-  const handleActivatorKeyDown = React5.useCallback(
-    (event) => {
-      if (!openOnClick) {
-        return;
-      }
-      if (event.key !== "Enter" && event.key !== " ") {
-        return;
-      }
-      event.preventDefault();
-      if (open) {
-        scheduleClose("click");
-      } else {
-        scheduleOpen("click");
-      }
-    },
-    [open, openOnClick, scheduleClose, scheduleOpen]
-  );
-  const handleTooltipPointerEnter = React5.useCallback(
-    (event) => {
-      tooltipPointerEnter?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (interactive) {
-        clearCloseTimer();
-      }
-    },
-    [clearCloseTimer, interactive, tooltipPointerEnter]
-  );
-  const handleTooltipPointerLeave = React5.useCallback(
-    (event) => {
-      tooltipPointerLeave?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (interactive) {
-        scheduleClose("hover");
-      }
-    },
-    [interactive, scheduleClose, tooltipPointerLeave]
-  );
-  const handleTooltipClick = React5.useCallback(
-    (event) => {
-      tooltipOnClick?.(event);
-      if (event.defaultPrevented) {
-        return;
-      }
-      if (closeOnContentClick) {
-        scheduleClose("click");
-      }
-    },
-    [closeOnContentClick, scheduleClose, tooltipOnClick]
-  );
-  const hasRenderableContent = children !== void 0 && children !== null;
-  const shouldRenderTooltip = hasRenderableContent && (open || keepMounted);
-  const pointerClass = interactive ? "pointer-events-auto" : "pointer-events-none";
-  const resolvedStyle = React5.useMemo(() => {
-    const nextStyle = { ...style };
-    if (nextStyle.maxWidth === void 0) {
-      nextStyle.maxWidth = resolveSizeValue2(maxWidth);
+    if (showOnFocus) {
+      classes.push("group-focus-within/tooltip:pointer-events-auto");
     }
-    return nextStyle;
-  }, [maxWidth, style]);
-  const activatorNode = activator({
-    id: `${tooltipId}-activator`,
-    open,
-    disabled,
-    "aria-describedby": describedBy,
-    onPointerEnter: handleActivatorPointerEnter,
-    onPointerLeave: handleActivatorPointerLeave,
-    onFocus: handleActivatorFocus,
-    onBlur: handleActivatorBlur,
-    onClick: openOnClick ? handleActivatorClick : void 0,
-    onKeyDown: openOnClick ? handleActivatorKeyDown : void 0
-  });
-  return /* @__PURE__ */ jsxs("span", { className: twMerge(wrapperBaseClasses, wrapperClassName), children: [
-    activatorNode,
-    shouldRenderTooltip && /* @__PURE__ */ jsxs(
+    return classes.join(" ");
+  })();
+  return /* @__PURE__ */ jsxs("span", { className: twMerge(wrapperBaseClasses, "group/tooltip", wrapperClassName), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full", children: activator }),
+    shouldRenderTooltip ? /* @__PURE__ */ jsxs(
       "div",
       {
-        ...tooltipProps,
+        ...rest,
         ref: forwardedRef,
         role: "tooltip",
-        id: tooltipId,
-        "aria-hidden": !open,
-        "data-state": state,
-        className: twMerge(tooltipBaseClasses, placementClasses2[placement], pointerClass, className),
+        id,
+        "aria-hidden": persistent || disabled ? void 0 : true,
+        className: twMerge(tooltipBaseClasses, placementClasses2[placement], visibilityClasses, pointerClasses, className),
         style: resolvedStyle,
-        onPointerEnter: handleTooltipPointerEnter,
-        onPointerLeave: handleTooltipPointerLeave,
-        onClick: handleTooltipClick,
         children: [
           children,
           arrow && /* @__PURE__ */ jsx("span", { className: twMerge(arrowBaseClasses, arrowPlacementClasses[placement]), "aria-hidden": true, "data-arrow": true })
         ]
       }
-    )
+    ) : null
   ] });
 });
 ToolTip.displayName = "ToolTip";