@slithy/base-ui 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,296 +1,451 @@
 // src/Dropdown/Dropdown.tsx
-import { Menu } from "@base-ui/react/menu";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { Menu } from "@base-ui/react/menu";
 import {
   cloneElement,
   createContext,
   isValidElement,
-  useCallback,
+  useCallback as useCallback3,
   useContext,
   useEffect,
-  useRef,
-  useState
+  useRef as useRef3
 } from "react";
 
-// #style-inject:#style-inject
-function styleInject(css, { insertAt } = {}) {
-  if (!css || typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (insertAt === "top") {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
+// src/Dropdown/DropdownStore.ts
+import { useCallback, useRef, useSyncExternalStore } from "react";
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every(
+    (k) => Object.is(
+      a[k],
+      b[k]
+    )
+  );
 }
-
-// src/Dropdown/Dropdown.css
-styleInject(".slithy-dropdown-positioner {\n  z-index: 1000;\n}\n.slithy-dropdown-popup {\n  background: var(--slithy-dropdown-bg, #fff);\n  color: var(--slithy-dropdown-color, #222);\n  font-size: var(--slithy-dropdown-font-size, 0.875rem);\n  line-height: 1.4;\n  padding: var(--slithy-dropdown-padding, 4px 0);\n  border-radius: var(--slithy-dropdown-radius, 6px);\n  min-width: var(--slithy-dropdown-min-width, 160px);\n  box-shadow: var( --slithy-dropdown-shadow, 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) );\n  border: var(--slithy-dropdown-border, 1px solid rgba(0, 0, 0, 0.08));\n  transform-origin: var(--transform-origin);\n  transition-property: opacity, transform;\n  transition-duration: 150ms;\n  transition-timing-function: ease;\n  outline: none;\n}\n.slithy-dropdown-popup[data-open] {\n  opacity: 1;\n  transform: scale(1);\n}\n.slithy-dropdown-popup[data-starting-style],\n.slithy-dropdown-popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\n}\n.slithy-dropdown-popup[data-instant] {\n  transition-duration: 0ms;\n}\n.slithy-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: var(--slithy-dropdown-item-padding, 6px 12px);\n  cursor: default;\n  outline: none;\n  user-select: none;\n}\n.slithy-dropdown-item[data-highlighted] {\n  background: var(--slithy-dropdown-item-highlighted-bg, rgba(0, 0, 0, 0.06));\n}\n.slithy-dropdown-item[data-disabled] {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.slithy-dropdown-separator {\n  height: 1px;\n  margin: 4px 0;\n  background: var(--slithy-dropdown-separator-color, rgba(0, 0, 0, 0.1));\n}\n.slithy-dropdown-group-label {\n  padding: var(--slithy-dropdown-group-label-padding, 6px 12px 2px);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--slithy-dropdown-group-label-color, rgba(0, 0, 0, 0.5));\n  user-select: none;\n}\n.slithy-dropdown-item-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n}\n.slithy-dropdown-arrow {\n  width: 8px;\n  height: 8px;\n  transform: rotate(45deg);\n  background: var(--slithy-dropdown-bg, #fff);\n  border: var(--slithy-dropdown-border, 1px solid rgba(0, 0, 0, 0.08));\n}\n.slithy-dropdown-arrow[data-side=top] {\n  bottom: -4px;\n  border-top: none;\n  border-left: none;\n}\n.slithy-dropdown-arrow[data-side=bottom] {\n  top: -4px;\n  border-bottom: none;\n  border-right: none;\n}\n.slithy-dropdown-arrow[data-side=left] {\n  right: -4px;\n  border-bottom: none;\n  border-left: none;\n}\n.slithy-dropdown-arrow[data-side=right] {\n  left: -4px;\n  border-top: none;\n  border-right: none;\n}\n");
-
-// src/Dropdown/Dropdown.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var DeferredContext = createContext(null);
-function InnerRoot({
-  children,
-  defaultOpen,
-  shouldOpenRef,
-  unmountOnClose,
-  onDeactivate,
-  onMenuOpenChange,
-  onOpenChange,
-  onOpenChangeComplete,
-  ...props
-}) {
-  const shouldOpen = useRef(false);
-  const [deferredOpen, setDeferredOpen] = useState(false);
-  if (!shouldOpen.current && shouldOpenRef.current) {
-    shouldOpenRef.current = false;
-    shouldOpen.current = true;
+function createDropdownStore() {
+  const listeners = /* @__PURE__ */ new Set();
+  function notify() {
+    listeners.forEach((l) => l());
   }
-  useEffect(() => {
-    if (!shouldOpen.current) return;
-    const frame = requestAnimationFrame(() => {
-      setDeferredOpen(true);
-    });
-    return () => cancelAnimationFrame(frame);
+  let state = {
+    open: false,
+    content: null,
+    anchor: null,
+    keyboardOpen: false,
+    callbacks: {},
+    menuConfig: {},
+    positionConfig: {},
+    openGeneration: 0,
+    openDropdown(content, anchor, options) {
+      state = {
+        ...state,
+        open: true,
+        content,
+        anchor,
+        keyboardOpen: options?.keyboard ?? false,
+        callbacks: options?.callbacks ?? {},
+        menuConfig: options?.menuConfig ?? {},
+        positionConfig: options?.positionConfig ?? {},
+        openGeneration: state.openGeneration + 1
+      };
+      notify();
+    },
+    closeDropdown(generation) {
+      if (generation !== void 0 && generation !== state.openGeneration) return;
+      state = {
+        ...state,
+        open: false,
+        content: null,
+        anchor: null,
+        keyboardOpen: false
+      };
+      notify();
+    },
+    updateContent(content) {
+      if (!state.open || state.content === content) return;
+      state = { ...state, content };
+      notify();
+    }
+  };
+  return {
+    getState: () => state,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var store = createDropdownStore();
+function useDropdownStore(selector) {
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
+  const prevRef = useRef(void 0);
+  const getSnapshot = useCallback(() => {
+    const result = selectorRef.current(store.getState());
+    const prev = prevRef.current;
+    if (prev !== void 0 && shallowEqual(prev, result)) {
+      return prev;
+    }
+    prevRef.current = result;
+    return result;
   }, []);
-  const { open: externalOpen, ...restProps } = props;
-  const menuProps = {};
-  if (externalOpen !== void 0) {
-    menuProps.open = externalOpen;
-  } else if (shouldOpen.current) {
-    menuProps.open = deferredOpen;
-  } else if (defaultOpen !== void 0) {
-    menuProps.defaultOpen = defaultOpen;
+  return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+useDropdownStore.getState = store.getState;
+
+// src/Tooltip/TooltipStore.ts
+import { useCallback as useCallback2, useRef as useRef2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+function shallowEqual2(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+    return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  return keysA.every(
+    (k) => Object.is(
+      a[k],
+      b[k]
+    )
+  );
+}
+function createTooltipStore() {
+  const listeners = /* @__PURE__ */ new Set();
+  function notify() {
+    listeners.forEach((l) => l());
   }
-  return /* @__PURE__ */ jsx(
-    Menu.Root,
-    {
-      ...restProps,
-      ...menuProps,
-      onOpenChange: (isOpen, event) => {
-        onOpenChange?.(isOpen, event);
-        onMenuOpenChange(isOpen);
-        if (shouldOpen.current) setDeferredOpen(isOpen);
-      },
-      onOpenChangeComplete: (isOpen) => {
-        onOpenChangeComplete?.(isOpen);
-        if (!isOpen && unmountOnClose) onDeactivate();
-      },
-      children
+  let state = {
+    open: false,
+    content: null,
+    anchor: null,
+    positionConfig: {},
+    hoverable: false,
+    closeDelay: 300,
+    popupId: null,
+    lastCloseTime: 0,
+    setPopupId(id) {
+      if (state.popupId === id) return;
+      state = { ...state, popupId: id };
+      notify();
+    },
+    openTooltip(content, anchor, options) {
+      state = {
+        ...state,
+        open: true,
+        content,
+        anchor,
+        positionConfig: options?.positionConfig ?? {},
+        hoverable: options?.hoverable ?? false,
+        closeDelay: options?.closeDelay ?? 300
+      };
+      notify();
+    },
+    closeTooltip(options) {
+      if (!state.open) return;
+      state = {
+        ...state,
+        open: false,
+        content: null,
+        anchor: null,
+        lastCloseTime: options?.skipWarmUp ? 0 : Date.now()
+      };
+      notify();
+    },
+    updateContent(content) {
+      if (!state.open || state.content === content) return;
+      state = { ...state, content };
+      notify();
     }
-  );
+  };
+  return {
+    getState: () => state,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
 }
-function Root({
-  children,
-  open,
-  defaultOpen,
-  disabled,
-  unmountOnClose = false,
-  onOpenChangeComplete,
-  ...props
-}) {
-  const [wasActivated, setWasActivated] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const shouldRefocusRef = useRef(false);
-  const shouldOpenRef = useRef(false);
-  const activated = wasActivated || !!open || !!defaultOpen;
-  const activate = useCallback(() => {
-    if (!disabled) {
-      if (shouldOpenRef.current) setMenuOpen(true);
-      setWasActivated(true);
-    }
-  }, [disabled]);
-  const deactivate = useCallback(() => {
-    setMenuOpen(false);
-    setWasActivated(false);
+var store2 = createTooltipStore();
+function useTooltipStore(selector) {
+  const selectorRef = useRef2(selector);
+  selectorRef.current = selector;
+  const prevRef = useRef2(void 0);
+  const getSnapshot = useCallback2(() => {
+    const result = selectorRef.current(store2.getState());
+    const prev = prevRef.current;
+    if (prev !== void 0 && shallowEqual2(prev, result)) {
+      return prev;
+    }
+    prevRef.current = result;
+    return result;
   }, []);
+  return useSyncExternalStore2(store2.subscribe, getSnapshot, getSnapshot);
+}
+useTooltipStore.getState = store2.getState;
+
+// src/Dropdown/Dropdown.tsx
+import { jsx } from "react/jsx-runtime";
+var DropdownCtx = createContext(null);
+function Root({ children, open, defaultOpen, disabled = false, modal, openOn = "click", loopFocus, highlightItemOnHover, orientation, side, sideOffset, align, alignOffset, collisionPadding, onOpenChange, onOpenChangeComplete }) {
+  const contentRef = useRef3(null);
+  const triggerRef = useRef3(null);
+  const callbacks = { onOpenChange, onOpenChangeComplete };
+  const menuConfig = { modal, loopFocus, highlightItemOnHover, orientation };
+  const positionConfig = { side, sideOffset, align, alignOffset, collisionPadding };
+  const initializedRef = useRef3(false);
+  useEffect(() => {
+    if (open === void 0) return;
+    const store3 = useDropdownStore.getState();
+    if (open && !store3.open) {
+      const content = contentRef.current;
+      const anchor = triggerRef.current;
+      if (content && anchor) {
+        store3.openDropdown(content, anchor, { callbacks, menuConfig, positionConfig });
+      }
+    } else if (!open && store3.open && store3.anchor === triggerRef.current) {
+      store3.closeDropdown();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (initializedRef.current || defaultOpen === void 0 || !defaultOpen) return;
+    initializedRef.current = true;
+    requestAnimationFrame(() => {
+      const content = contentRef.current;
+      const anchor = triggerRef.current;
+      if (content && anchor) {
+        useDropdownStore.getState().openDropdown(content, anchor, { callbacks, menuConfig, positionConfig });
+      }
+    });
+  }, [defaultOpen]);
   const ctx = {
-    activated,
-    activate,
-    shouldRefocusRef,
-    shouldOpenRef,
-    menuOpen
+    contentRef,
+    triggerRef,
+    disabled,
+    openOn,
+    callbacks,
+    menuConfig,
+    positionConfig
   };
-  if (!activated) {
-    return /* @__PURE__ */ jsx(DeferredContext.Provider, { value: ctx, children });
-  }
-  return /* @__PURE__ */ jsx(DeferredContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    InnerRoot,
-    {
-      open,
-      defaultOpen,
-      disabled,
-      shouldOpenRef,
-      unmountOnClose,
-      onDeactivate: deactivate,
-      onMenuOpenChange: setMenuOpen,
-      onOpenChangeComplete,
-      ...props,
-      children
-    }
-  ) });
-}
-var BASE_UI_KEYS = /* @__PURE__ */ new Set([
-  "handle",
-  "payload",
-  "delay",
-  "closeDelay",
-  "openOnHover",
-  "render",
-  "tooltip"
-]);
-function pickHtmlProps(props) {
-  const html = {};
-  for (const key in props) {
-    if (!BASE_UI_KEYS.has(key)) html[key] = props[key];
-  }
-  return html;
+  return /* @__PURE__ */ jsx(DropdownCtx.Provider, { value: ctx, children });
 }
-function Trigger({
-  children,
-  className,
-  style,
-  disabled,
-  tooltip,
-  ...rest
-}) {
-  const deferred = useContext(DeferredContext);
-  const triggerElRef = useRef(null);
-  const [tooltipActivated, setTooltipActivated] = useState(false);
-  const isHoveringRef = useRef(false);
-  const pendingRef = useRef(0);
-  const lastPointerTypeRef = useRef("");
-  const shouldRefocusRef = deferred?.shouldRefocusRef;
-  const triggerRef = useCallback(
+function Trigger({ children, onClick, onPointerDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, render, tooltip, tooltipDelay = 600, ...props }) {
+  const ctx = useContext(DropdownCtx);
+  const triggerRef = useRef3(null);
+  const openOn = ctx?.openOn ?? "click";
+  const setTriggerRef = useCallback3(
     (el) => {
-      triggerElRef.current = el;
-      if (shouldRefocusRef?.current && el) {
-        shouldRefocusRef.current = false;
-        el.focus();
-      }
+      triggerRef.current = el;
+      if (ctx) ctx.triggerRef.current = el;
     },
-    [shouldRefocusRef]
+    [ctx]
   );
+  const storeState = useDropdownStore((s) => ({
+    open: s.open,
+    anchor: s.anchor
+  }));
+  const isActive = storeState.open && storeState.anchor === triggerRef.current;
+  const tooltipOpenTimerRef = useRef3(0);
+  const tooltipCloseTimerRef = useRef3(0);
+  const lastPointerTypeRef = useRef3("");
+  const tooltipState = useTooltipStore((s) => ({
+    open: s.open,
+    anchor: s.anchor,
+    popupId: s.popupId
+  }));
+  const isTooltipActive = tooltip != null && tooltipState.open && tooltipState.anchor === triggerRef.current;
+  const wasActiveRef = useRef3(false);
+  const skipFocusTooltipRef = useRef3(false);
   useEffect(() => {
-    if (!tooltipActivated || !isHoveringRef.current) return;
-    const el = triggerElRef.current;
-    if (!el) return;
-    const frame = requestAnimationFrame(() => {
-      if (!isHoveringRef.current) return;
-      el.dispatchEvent(
-        new PointerEvent("pointerenter", {
-          bubbles: false,
-          pointerType: "mouse"
-        })
-      );
-      el.dispatchEvent(new MouseEvent("mouseenter", { bubbles: false }));
-      el.dispatchEvent(new MouseEvent("mousemove", { bubbles: true }));
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [tooltipActivated]);
-  const tooltipHoverHandlers = tooltip ? {
-    onMouseEnter: () => {
-      if (lastPointerTypeRef.current === "touch") return;
-      isHoveringRef.current = true;
-      pendingRef.current = requestAnimationFrame(() => {
-        if (isHoveringRef.current) setTooltipActivated(true);
+    if (wasActiveRef.current && !isActive) {
+      skipFocusTooltipRef.current = true;
+      const id = requestAnimationFrame(() => {
+        skipFocusTooltipRef.current = false;
       });
-    },
-    onMouseLeave: () => {
-      isHoveringRef.current = false;
-      cancelAnimationFrame(pendingRef.current);
-    }
-  } : {};
-  const menuOpen = deferred?.menuOpen ?? false;
-  const tooltipPortal = !!tooltip ? /* @__PURE__ */ jsx(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx(BaseTooltip.Positioner, { sideOffset: 8, children: /* @__PURE__ */ jsx(BaseTooltip.Popup, { className: "slithy-tooltip-popup", children: tooltip }) }) }) : null;
-  if (deferred && !deferred.activated) {
-    const { render: renderProp } = rest;
-    const htmlProps = pickHtmlProps(rest);
-    const callHandler = (handler, event) => {
-      if (typeof handler === "function") handler(event);
-    };
-    const preProps = {
-      ...htmlProps,
-      ref: triggerRef,
-      className: typeof className === "function" ? void 0 : className,
-      style: typeof style === "function" ? void 0 : style,
-      disabled,
-      ...tooltipHoverHandlers,
-      // Activation strategy: mouse/pen uses onPointerDown for snappy
-      // desktop UX, matching Base UI's Menu.Trigger (which opens on
-      // mousedown). Touch skips onPointerDown and falls through to
-      // onClick instead, because Base UI's Menu.Trigger opens on
-      // touch-up timing on iOS — activating earlier would make the
-      // pre-activation and post-activation triggers feel inconsistent.
-      onPointerDown: (e) => {
-        callHandler(htmlProps.onPointerDown, e);
-        lastPointerTypeRef.current = e.pointerType;
-        if (e.button !== 0 || e.pointerType === "touch") return;
-        deferred.shouldOpenRef.current = true;
-        deferred.shouldRefocusRef.current = true;
-        deferred.activate();
-      },
-      onClick: (e) => {
-        callHandler(htmlProps.onClick, e);
-        deferred.shouldOpenRef.current = true;
-        deferred.shouldRefocusRef.current = true;
-        deferred.activate();
-      },
-      onKeyDown: (e) => {
-        callHandler(htmlProps.onKeyDown, e);
-        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
-          deferred.shouldOpenRef.current = true;
-          deferred.shouldRefocusRef.current = true;
-          deferred.activate();
+      return () => cancelAnimationFrame(id);
+    }
+    wasActiveRef.current = isActive;
+  });
+  const dismissTooltip = useCallback3(() => {
+    clearTimeout(tooltipOpenTimerRef.current);
+    clearTimeout(tooltipCloseTimerRef.current);
+    const ts = useTooltipStore.getState();
+    if (ts.open && ts.anchor === triggerRef.current) {
+      ts.closeTooltip({ skipWarmUp: true });
+    }
+  }, []);
+  const scheduleTooltip = useCallback3(() => {
+    if (!tooltip || !triggerRef.current) return;
+    const ds = useDropdownStore.getState();
+    if (ds.open) return;
+    clearTimeout(tooltipOpenTimerRef.current);
+    clearTimeout(tooltipCloseTimerRef.current);
+    const ts = useTooltipStore.getState();
+    if (ts.open && ts.anchor === triggerRef.current) return;
+    const tooltipContent = /* @__PURE__ */ jsx(BaseTooltip.Popup, { className: "slithy-tooltip-popup", children: tooltip });
+    const isSwitch = ts.open && ts.anchor !== triggerRef.current;
+    const elapsed = Date.now() - ts.lastCloseTime;
+    const isWarmUp = !isSwitch && elapsed < 300;
+    const effectiveDelay = isSwitch || isWarmUp ? 0 : tooltipDelay;
+    if (effectiveDelay === 0) {
+      ts.openTooltip(tooltipContent, triggerRef.current);
+    } else {
+      tooltipOpenTimerRef.current = window.setTimeout(() => {
+        const dds = useDropdownStore.getState();
+        if (dds.open) return;
+        if (triggerRef.current) {
+          const content = /* @__PURE__ */ jsx(BaseTooltip.Popup, { className: "slithy-tooltip-popup", children: tooltip });
+          useTooltipStore.getState().openTooltip(content, triggerRef.current);
         }
+      }, effectiveDelay);
+    }
+  }, [tooltip, tooltipDelay]);
+  const scheduleTooltipClose = useCallback3(() => {
+    clearTimeout(tooltipOpenTimerRef.current);
+    const ts = useTooltipStore.getState();
+    if (!ts.open || ts.anchor !== triggerRef.current) return;
+    tooltipCloseTimerRef.current = window.setTimeout(() => {
+      const s = useTooltipStore.getState();
+      if (s.open && s.anchor === triggerRef.current) {
+        s.closeTooltip();
       }
+    }, 300);
+  }, []);
+  useEffect(() => {
+    return () => {
+      clearTimeout(tooltipOpenTimerRef.current);
+      clearTimeout(tooltipCloseTimerRef.current);
     };
-    let button;
-    if (isValidElement(renderProp)) {
-      button = cloneElement(renderProp, preProps, children);
-    } else if (typeof renderProp === "function") {
-      button = renderProp({ ...preProps, children }, {});
-    } else {
-      button = /* @__PURE__ */ jsx("button", { ...preProps, children });
-    }
-    if (!tooltip || !tooltipActivated) return button;
-    return /* @__PURE__ */ jsx(BaseTooltip.Provider, { children: /* @__PURE__ */ jsxs(BaseTooltip.Root, { children: [
-      /* @__PURE__ */ jsx(BaseTooltip.Trigger, { render: button }),
-      !menuOpen && tooltipPortal
-    ] }) });
-  }
-  const menuTrigger = /* @__PURE__ */ jsx(
-    Menu.Trigger,
-    {
-      ref: triggerRef,
-      className,
-      style,
-      disabled,
-      ...rest,
-      children
-    }
+  }, []);
+  const toggleDropdown = useCallback3(
+    (options) => {
+      if (ctx?.disabled) return;
+      dismissTooltip();
+      const store3 = useDropdownStore.getState();
+      if (store3.open && store3.anchor === triggerRef.current) {
+        store3.closeDropdown();
+        return;
+      }
+      const content = ctx?.contentRef.current;
+      if (content && triggerRef.current) {
+        store3.openDropdown(content, triggerRef.current, {
+          keyboard: options?.keyboard,
+          callbacks: ctx?.callbacks,
+          menuConfig: ctx?.menuConfig,
+          positionConfig: ctx?.positionConfig
+        });
+      }
+    },
+    [ctx, dismissTooltip]
+  );
+  const handlePointerDown = useCallback3(
+    (e) => {
+      lastPointerTypeRef.current = e.pointerType;
+      onPointerDown?.(e);
+      if (e.defaultPrevented || openOn !== "pointerdown") return;
+      toggleDropdown();
+    },
+    [onPointerDown, openOn, toggleDropdown]
+  );
+  const handleClick = useCallback3(
+    (e) => {
+      onClick?.(e);
+      if (e.defaultPrevented) return;
+      if (openOn === "click") {
+        toggleDropdown();
+      }
+    },
+    [onClick, openOn, toggleDropdown]
   );
-  if (!tooltip) return menuTrigger;
-  return /* @__PURE__ */ jsx(BaseTooltip.Provider, { children: /* @__PURE__ */ jsxs(BaseTooltip.Root, { children: [
-    /* @__PURE__ */ jsx(BaseTooltip.Trigger, { render: menuTrigger }),
-    !menuOpen && tooltipPortal
-  ] }) });
+  const handlePointerEnter = useCallback3(
+    (e) => {
+      onPointerEnter?.(e);
+      if (e.defaultPrevented) return;
+      if (lastPointerTypeRef.current === "touch") return;
+      scheduleTooltip();
+    },
+    [onPointerEnter, scheduleTooltip]
+  );
+  const handlePointerLeave = useCallback3(
+    (e) => {
+      onPointerLeave?.(e);
+      if (e.defaultPrevented) return;
+      scheduleTooltipClose();
+    },
+    [onPointerLeave, scheduleTooltipClose]
+  );
+  const handleFocus = useCallback3(
+    (e) => {
+      onFocus?.(e);
+      if (e.defaultPrevented) return;
+      if (skipFocusTooltipRef.current) {
+        skipFocusTooltipRef.current = false;
+        return;
+      }
+      if (lastPointerTypeRef.current === "touch") return;
+      scheduleTooltip();
+    },
+    [onFocus, scheduleTooltip]
+  );
+  const handleBlur = useCallback3(
+    (e) => {
+      onBlur?.(e);
+      if (e.defaultPrevented) return;
+      dismissTooltip();
+    },
+    [onBlur, dismissTooltip]
+  );
+  const handleKeyDown = useCallback3(
+    (e) => {
+      onKeyDown?.(e);
+      if (ctx?.disabled || e.defaultPrevented) return;
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        toggleDropdown({ keyboard: true });
+      }
+    },
+    [ctx, onKeyDown, toggleDropdown]
+  );
+  const triggerProps = {
+    ref: setTriggerRef,
+    type: "button",
+    "aria-haspopup": "menu",
+    "aria-expanded": isActive,
+    "aria-describedby": isTooltipActive && tooltipState.popupId ? tooltipState.popupId : void 0,
+    onPointerDown: handlePointerDown,
+    onClick: handleClick,
+    onPointerEnter: handlePointerEnter,
+    onPointerLeave: handlePointerLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    ...props
+  };
+  if (isValidElement(render)) {
+    return cloneElement(render, triggerProps, children);
+  }
+  if (typeof render === "function") {
+    return render({ ...triggerProps, children });
+  }
+  return /* @__PURE__ */ jsx("button", { ...triggerProps, children });
 }
-function Portal(props) {
-  const deferred = useContext(DeferredContext);
-  if (deferred && !deferred.activated) return null;
-  return /* @__PURE__ */ jsx(Menu.Portal, { ...props });
+function Portal({ children }) {
+  const ctx = useContext(DropdownCtx);
+  const storeAnchor = useDropdownStore((s) => s.anchor);
+  if (ctx) {
+    ctx.contentRef.current = children;
+  }
+  const isActive = !!(ctx && storeAnchor && storeAnchor === ctx.triggerRef.current);
+  useEffect(() => {
+    if (isActive) {
+      useDropdownStore.getState().updateContent(children);
+    }
+  });
+  return null;
 }
 function Positioner({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -397,199 +552,351 @@ var Dropdown = {
   RadioItemIndicator
 };
 
+// src/Dropdown/DropdownRenderer.tsx
+import { Menu as Menu2 } from "@base-ui/react/menu";
+import { useEffect as useEffect2, useRef as useRef4, useState } from "react";
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/Dropdown/Dropdown.css
+styleInject(".slithy-dropdown-positioner {\n  z-index: 1000;\n}\n.slithy-dropdown-popup {\n  background: var(--slithy-dropdown-bg, #fff);\n  color: var(--slithy-dropdown-color, #222);\n  font-size: var(--slithy-dropdown-font-size, 0.875rem);\n  line-height: 1.4;\n  padding: var(--slithy-dropdown-padding, 4px 0);\n  border-radius: var(--slithy-dropdown-radius, 6px);\n  min-width: var(--slithy-dropdown-min-width, 160px);\n  box-shadow: var( --slithy-dropdown-shadow, 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08) );\n  border: var(--slithy-dropdown-border, 1px solid rgba(0, 0, 0, 0.08));\n  transform-origin: var(--transform-origin);\n  transition-property: opacity, transform;\n  transition-duration: 150ms;\n  transition-timing-function: ease;\n  outline: none;\n}\n.slithy-dropdown-popup[data-open] {\n  opacity: 1;\n  transform: scale(1);\n}\n.slithy-dropdown-popup[data-starting-style],\n.slithy-dropdown-popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\n}\n.slithy-dropdown-popup[data-instant] {\n  transition-duration: 0ms;\n}\n.slithy-dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: var(--slithy-dropdown-item-padding, 6px 12px);\n  cursor: default;\n  outline: none;\n  user-select: none;\n}\n.slithy-dropdown-item[data-highlighted] {\n  background: var(--slithy-dropdown-item-highlighted-bg, rgba(0, 0, 0, 0.06));\n}\n.slithy-dropdown-item[data-disabled] {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.slithy-dropdown-separator {\n  height: 1px;\n  margin: 4px 0;\n  background: var(--slithy-dropdown-separator-color, rgba(0, 0, 0, 0.1));\n}\n.slithy-dropdown-group-label {\n  padding: var(--slithy-dropdown-group-label-padding, 6px 12px 2px);\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--slithy-dropdown-group-label-color, rgba(0, 0, 0, 0.5));\n  user-select: none;\n}\n.slithy-dropdown-item-indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n}\n.slithy-dropdown-arrow {\n  width: 8px;\n  height: 8px;\n  transform: rotate(45deg);\n  background: var(--slithy-dropdown-bg, #fff);\n  border: var(--slithy-dropdown-border, 1px solid rgba(0, 0, 0, 0.08));\n}\n.slithy-dropdown-arrow[data-side=top] {\n  bottom: -4px;\n  border-top: none;\n  border-left: none;\n}\n.slithy-dropdown-arrow[data-side=bottom] {\n  top: -4px;\n  border-bottom: none;\n  border-right: none;\n}\n.slithy-dropdown-arrow[data-side=left] {\n  right: -4px;\n  border-bottom: none;\n  border-left: none;\n}\n.slithy-dropdown-arrow[data-side=right] {\n  left: -4px;\n  border-top: none;\n  border-right: none;\n}\n");
+
+// src/Dropdown/DropdownRenderer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function DropdownRenderer() {
+  const open = useDropdownStore((s) => s.open);
+  const content = useDropdownStore((s) => s.content);
+  const anchor = useDropdownStore((s) => s.anchor);
+  const keyboardOpen = useDropdownStore((s) => s.keyboardOpen);
+  const generation = useDropdownStore((s) => s.openGeneration);
+  const lastContentRef = useRef4(content);
+  const lastAnchorRef = useRef4(anchor);
+  if (content) lastContentRef.current = content;
+  if (anchor) lastAnchorRef.current = anchor;
+  const activeContent = content ?? lastContentRef.current;
+  const activeAnchor = anchor ?? lastAnchorRef.current;
+  const [hasOpened, setHasOpened] = useState(false);
+  const [deferredOpen, setDeferredOpen] = useState(false);
+  useEffect2(() => {
+    if (open && !hasOpened) {
+      setHasOpened(true);
+      requestAnimationFrame(() => setDeferredOpen(true));
+    } else {
+      setDeferredOpen(open);
+    }
+  }, [open, hasOpened]);
+  const prevOpenRef = useRef4(false);
+  useEffect2(() => {
+    if (prevOpenRef.current && !open && lastAnchorRef.current) {
+      const el = lastAnchorRef.current;
+      requestAnimationFrame(() => el.focus());
+    }
+    prevOpenRef.current = open;
+  }, [open]);
+  const callbacks = useDropdownStore((s) => s.callbacks);
+  const menuConfig = useDropdownStore((s) => s.menuConfig);
+  const positionConfig = useDropdownStore((s) => s.positionConfig);
+  useEffect2(() => {
+    if (!open || !anchor || menuConfig.modal !== false) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          useDropdownStore.getState().closeDropdown();
+        }
+      },
+      { threshold: 0 }
+    );
+    observer.observe(anchor);
+    return () => observer.disconnect();
+  }, [open, anchor, menuConfig.modal]);
+  const lastCallbacksRef = useRef4(callbacks);
+  if (callbacks.onOpenChange) lastCallbacksRef.current = callbacks;
+  const handleOpenChangeComplete = (isOpen) => {
+    lastCallbacksRef.current.onOpenChangeComplete?.(isOpen);
+    if (!isOpen) {
+      lastContentRef.current = null;
+      lastAnchorRef.current = null;
+    }
+  };
+  if (!hasOpened) return null;
+  return /* @__PURE__ */ jsx2(
+    Menu2.Root,
+    {
+      open: deferredOpen,
+      modal: menuConfig.modal,
+      loopFocus: menuConfig.loopFocus,
+      highlightItemOnHover: menuConfig.highlightItemOnHover,
+      orientation: menuConfig.orientation,
+      onOpenChange: (isOpen, eventDetails) => {
+        if (!isOpen && eventDetails.reason !== "trigger-hover") {
+          lastCallbacksRef.current.onOpenChange?.(false);
+          useDropdownStore.getState().closeDropdown(generation);
+        }
+      },
+      onOpenChangeComplete: handleOpenChangeComplete,
+      children: /* @__PURE__ */ jsx2(Menu2.Portal, { children: /* @__PURE__ */ jsx2(
+        Menu2.Positioner,
+        {
+          anchor: activeAnchor,
+          className: "slithy-dropdown-positioner",
+          side: positionConfig.side,
+          sideOffset: positionConfig.sideOffset ?? 4,
+          align: positionConfig.align,
+          alignOffset: positionConfig.alignOffset,
+          collisionPadding: positionConfig.collisionPadding,
+          children: activeContent
+        }
+      ) })
+    }
+  );
+}
+
 // src/Tooltip/Tooltip.tsx
 import { Tooltip as BaseTooltip2 } from "@base-ui/react/tooltip";
 import {
   cloneElement as cloneElement2,
   createContext as createContext2,
   isValidElement as isValidElement2,
-  useCallback as useCallback2,
+  useCallback as useCallback4,
   useContext as useContext2,
-  useEffect as useEffect2,
-  useRef as useRef2,
-  useState as useState2
+  useEffect as useEffect3,
+  useRef as useRef5
 } from "react";
-
-// src/Tooltip/Tooltip.css
-styleInject(".slithy-tooltip-positioner {\n  z-index: 1000;\n}\n.slithy-tooltip-popup {\n  background: var(--slithy-tooltip-bg, #222);\n  color: var(--slithy-tooltip-color, #fff);\n  font-size: var(--slithy-tooltip-font-size, 0.8125rem);\n  line-height: 1.4;\n  padding: var(--slithy-tooltip-padding, 4px 8px);\n  border-radius: var(--slithy-tooltip-radius, 4px);\n  max-width: var(--slithy-tooltip-max-width, 300px);\n  transform-origin: var(--transform-origin);\n  transition-property: opacity, transform;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slithy-tooltip-popup[data-open] {\n  opacity: 1;\n  transform: scale(1);\n}\n.slithy-tooltip-popup[data-starting-style],\n.slithy-tooltip-popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\n}\n.slithy-tooltip-popup[data-instant] {\n  transition-duration: 0ms;\n}\n.slithy-tooltip-arrow {\n  width: 8px;\n  height: 8px;\n  transform: rotate(45deg);\n  background: var(--slithy-tooltip-bg, #222);\n}\n.slithy-tooltip-arrow[data-side=top] {\n  bottom: -4px;\n}\n.slithy-tooltip-arrow[data-side=bottom] {\n  top: -4px;\n}\n.slithy-tooltip-arrow[data-side=left] {\n  right: -4px;\n}\n.slithy-tooltip-arrow[data-side=right] {\n  left: -4px;\n}\n");
-
-// src/Tooltip/Tooltip.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var DeferredContext2 = createContext2(null);
-var Provider = BaseTooltip2.Provider;
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TooltipCtx = createContext2(null);
 function Root2({
   children,
   open,
   defaultOpen,
-  disabled,
+  disabled = false,
   touchDisabled = true,
-  unmountOnClose = false,
-  onOpenChangeComplete,
-  ...props
+  hoverable = false,
+  delay = 600,
+  closeDelay = 300,
+  warmUpDelay = 300,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionPadding
 }) {
-  const [wasActivated, setWasActivated] = useState2(false);
-  const isHoveringRef = useRef2(false);
-  const shouldRefocusRef = useRef2(false);
-  const activated = wasActivated || !!open || !!defaultOpen;
-  const activate = useCallback2(() => {
-    if (!disabled) setWasActivated(true);
-  }, [disabled]);
+  const contentRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const positionConfig = { side, sideOffset, align, alignOffset, collisionPadding };
+  const initializedRef = useRef5(false);
+  useEffect3(() => {
+    if (open === void 0) return;
+    const store3 = useTooltipStore.getState();
+    if (open && !store3.open) {
+      const content = contentRef.current;
+      const anchor = triggerRef.current;
+      if (content && anchor) {
+        store3.openTooltip(content, anchor, { positionConfig, hoverable, closeDelay });
+      }
+    } else if (!open && store3.open && store3.anchor === triggerRef.current) {
+      store3.closeTooltip();
+    }
+  }, [open]);
+  useEffect3(() => {
+    if (initializedRef.current || defaultOpen === void 0 || !defaultOpen) return;
+    initializedRef.current = true;
+    requestAnimationFrame(() => {
+      const content = contentRef.current;
+      const anchor = triggerRef.current;
+      if (content && anchor) {
+        useTooltipStore.getState().openTooltip(content, anchor, { positionConfig, hoverable, closeDelay });
+      }
+    });
+  }, [defaultOpen]);
   const ctx = {
-    activated,
-    activate,
-    isHoveringRef,
-    shouldRefocusRef,
-    touchDisabled
+    contentRef,
+    triggerRef,
+    disabled,
+    touchDisabled,
+    hoverable,
+    delay,
+    closeDelay,
+    warmUpDelay,
+    positionConfig
   };
-  if (!activated) {
-    return /* @__PURE__ */ jsx2(DeferredContext2.Provider, { value: ctx, children });
-  }
-  return /* @__PURE__ */ jsx2(DeferredContext2.Provider, { value: ctx, children: /* @__PURE__ */ jsx2(
-    BaseTooltip2.Root,
-    {
-      open,
-      defaultOpen,
-      disabled,
-      onOpenChangeComplete: (isOpen) => {
-        onOpenChangeComplete?.(isOpen);
-        if (!isOpen && unmountOnClose) setWasActivated(false);
-      },
-      ...props,
-      children
-    }
-  ) });
-}
-var BASE_UI_KEYS2 = /* @__PURE__ */ new Set([
-  "closeOnClick",
-  "handle",
-  "payload",
-  "delay",
-  "closeDelay",
-  "render"
-]);
-function pickHtmlProps2(props) {
-  const html = {};
-  for (const key in props) {
-    if (!BASE_UI_KEYS2.has(key)) html[key] = props[key];
-  }
-  return html;
+  return /* @__PURE__ */ jsx3(TooltipCtx.Provider, { value: ctx, children });
 }
-function Trigger2({
-  children,
-  className,
-  style,
-  disabled,
-  ...rest
-}) {
-  const deferred = useContext2(DeferredContext2);
-  const triggerElRef = useRef2(null);
-  const pendingRef = useRef2(0);
-  const lastPointerTypeRef = useRef2("");
-  const shouldRefocusRef = deferred?.shouldRefocusRef;
-  const triggerRef = useCallback2(
+function Trigger2({ children, render, ...props }) {
+  const ctx = useContext2(TooltipCtx);
+  const triggerRef = useRef5(null);
+  const openTimerRef = useRef5(0);
+  const closeTimerRef = useRef5(0);
+  const lastPointerTypeRef = useRef5("");
+  const setTriggerRef = useCallback4(
     (el) => {
-      triggerElRef.current = el;
-      if (shouldRefocusRef?.current && el) {
-        shouldRefocusRef.current = false;
-        el.focus();
-      }
+      triggerRef.current = el;
+      if (ctx) ctx.triggerRef.current = el;
     },
-    [shouldRefocusRef]
+    [ctx]
   );
-  const activated = deferred?.activated ?? true;
-  useEffect2(() => {
-    if (!activated || !deferred?.isHoveringRef.current) return;
-    const el = triggerElRef.current;
-    if (!el) return;
-    const frame = requestAnimationFrame(() => {
-      if (!deferred.isHoveringRef.current) return;
-      el.dispatchEvent(
-        new PointerEvent("pointerenter", {
-          bubbles: false,
-          pointerType: "mouse"
-        })
-      );
-      el.dispatchEvent(new MouseEvent("mouseenter", { bubbles: false }));
-      el.dispatchEvent(new MouseEvent("mousemove", { bubbles: true }));
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [activated]);
-  if (deferred && !deferred.activated) {
-    const { render: renderProp } = rest;
-    const htmlProps = pickHtmlProps2(rest);
-    const preProps = {
-      ...htmlProps,
-      ref: triggerRef,
-      className: typeof className === "function" ? void 0 : className,
-      style: typeof style === "function" ? void 0 : style,
-      disabled,
-      onPointerDown: (e) => {
-        lastPointerTypeRef.current = e.pointerType;
-      },
-      onMouseEnter: () => {
-        if (deferred.touchDisabled && lastPointerTypeRef.current === "touch")
-          return;
-        deferred.isHoveringRef.current = true;
-        pendingRef.current = requestAnimationFrame(() => {
-          if (deferred.isHoveringRef.current) deferred.activate();
-        });
-      },
-      onMouseLeave: () => {
-        deferred.isHoveringRef.current = false;
-        cancelAnimationFrame(pendingRef.current);
-      },
-      onFocus: () => {
-        if (deferred.touchDisabled && lastPointerTypeRef.current === "touch")
-          return;
-        deferred.shouldRefocusRef.current = true;
-        deferred.activate();
-      }
+  useEffect3(() => {
+    return () => {
+      clearTimeout(openTimerRef.current);
+      clearTimeout(closeTimerRef.current);
     };
-    if (isValidElement2(renderProp)) {
-      return cloneElement2(renderProp, preProps, children);
-    }
-    if (typeof renderProp === "function") {
-      return renderProp({ ...preProps, children }, {});
+  }, []);
+  const storeState = useTooltipStore((s) => ({
+    open: s.open,
+    anchor: s.anchor,
+    popupId: s.popupId
+  }));
+  const isActive = storeState.open && storeState.anchor === triggerRef.current;
+  const scheduleOpen = useCallback4(() => {
+    if (ctx?.disabled || !triggerRef.current) return;
+    clearTimeout(closeTimerRef.current);
+    const content = ctx?.contentRef.current;
+    if (!content) return;
+    const store3 = useTooltipStore.getState();
+    if (store3.open && store3.anchor === triggerRef.current) return;
+    const isSwitch = store3.open && store3.anchor !== triggerRef.current;
+    const elapsed = Date.now() - store3.lastCloseTime;
+    const isWarmUp = !isSwitch && elapsed < (ctx?.warmUpDelay ?? 300);
+    const effectiveDelay = isSwitch || isWarmUp ? 0 : ctx?.delay ?? 600;
+    const openOptions = { positionConfig: ctx?.positionConfig, hoverable: ctx?.hoverable, closeDelay: ctx?.closeDelay };
+    if (effectiveDelay === 0) {
+      store3.openTooltip(content, triggerRef.current, openOptions);
+    } else {
+      openTimerRef.current = window.setTimeout(() => {
+        const currentContent = ctx?.contentRef.current;
+        if (currentContent && triggerRef.current) {
+          useTooltipStore.getState().openTooltip(currentContent, triggerRef.current, openOptions);
+        }
+      }, effectiveDelay);
     }
-    return /* @__PURE__ */ jsx2("button", { ...preProps, children });
-  }
-  return /* @__PURE__ */ jsx2(
-    BaseTooltip2.Trigger,
-    {
-      ref: triggerRef,
-      className,
-      style,
-      disabled,
-      ...rest,
-      children
+  }, [ctx]);
+  const scheduleClose = useCallback4(() => {
+    clearTimeout(openTimerRef.current);
+    if (ctx?.hoverable) return;
+    const store3 = useTooltipStore.getState();
+    if (!store3.open || store3.anchor !== triggerRef.current) return;
+    const closeDelay = ctx?.closeDelay ?? 300;
+    if (closeDelay === 0) {
+      store3.closeTooltip();
+    } else {
+      closeTimerRef.current = window.setTimeout(() => {
+        const s = useTooltipStore.getState();
+        if (s.open && s.anchor === triggerRef.current) {
+          s.closeTooltip();
+        }
+      }, closeDelay);
     }
+  }, [ctx]);
+  const handlePointerDown = useCallback4(
+    (e) => {
+      lastPointerTypeRef.current = e.pointerType;
+      props.onPointerDown?.(e);
+    },
+    [props.onPointerDown]
   );
+  const handlePointerEnter = useCallback4(
+    (e) => {
+      props.onPointerEnter?.(e);
+      if (e.defaultPrevented) return;
+      if (ctx?.touchDisabled && lastPointerTypeRef.current === "touch") return;
+      scheduleOpen();
+    },
+    [ctx, props.onPointerEnter, scheduleOpen]
+  );
+  const handlePointerLeave = useCallback4(
+    (e) => {
+      props.onPointerLeave?.(e);
+      if (e.defaultPrevented) return;
+      scheduleClose();
+    },
+    [props.onPointerLeave, scheduleClose]
+  );
+  const handleFocus = useCallback4(
+    (e) => {
+      props.onFocus?.(e);
+      if (e.defaultPrevented) return;
+      if (ctx?.touchDisabled && lastPointerTypeRef.current === "touch") return;
+      scheduleOpen();
+    },
+    [ctx, props.onFocus, scheduleOpen]
+  );
+  const handleBlur = useCallback4(
+    (e) => {
+      props.onBlur?.(e);
+      if (e.defaultPrevented) return;
+      clearTimeout(openTimerRef.current);
+      const store3 = useTooltipStore.getState();
+      if (store3.open && store3.anchor === triggerRef.current) {
+        store3.closeTooltip();
+      }
+    },
+    [props.onBlur]
+  );
+  const triggerProps = {
+    ref: setTriggerRef,
+    type: "button",
+    "aria-describedby": isActive && storeState.popupId ? storeState.popupId : void 0,
+    onPointerDown: handlePointerDown,
+    onPointerEnter: handlePointerEnter,
+    onPointerLeave: handlePointerLeave,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ...props
+  };
+  if (isValidElement2(render)) {
+    return cloneElement2(render, triggerProps, children);
+  }
+  if (typeof render === "function") {
+    return render({ ...triggerProps, children });
+  }
+  return /* @__PURE__ */ jsx3("button", { ...triggerProps, children });
 }
-function Portal2(props) {
-  const deferred = useContext2(DeferredContext2);
-  if (deferred && !deferred.activated) return null;
-  return /* @__PURE__ */ jsx2(BaseTooltip2.Portal, { ...props });
-}
-function Positioner2({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
-    BaseTooltip2.Positioner,
-    {
-      className: className ?? "slithy-tooltip-positioner",
-      ...props
+function Portal2({ children }) {
+  const ctx = useContext2(TooltipCtx);
+  const storeAnchor = useTooltipStore((s) => s.anchor);
+  if (ctx) {
+    ctx.contentRef.current = children;
+  }
+  const isActive = !!(ctx && storeAnchor && storeAnchor === ctx.triggerRef.current);
+  useEffect3(() => {
+    if (isActive) {
+      useTooltipStore.getState().updateContent(children);
     }
-  );
+  });
+  return null;
 }
-function Popup2({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+function Popup2({ className, id, ...props }) {
+  const popupId = useTooltipStore((s) => s.popupId);
+  return /* @__PURE__ */ jsx3(
     BaseTooltip2.Popup,
     {
+      id: id ?? popupId ?? void 0,
       className: className ?? "slithy-tooltip-popup",
       ...props
     }
   );
 }
 function Arrow2({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     BaseTooltip2.Arrow,
     {
       className: className ?? "slithy-tooltip-arrow",
@@ -598,15 +905,195 @@ function Arrow2({ className, ...props }) {
   );
 }
 var Tooltip = {
-  Provider,
   Root: Root2,
   Trigger: Trigger2,
   Portal: Portal2,
-  Positioner: Positioner2,
   Popup: Popup2,
   Arrow: Arrow2
 };
+
+// src/Tooltip/TooltipRenderer.tsx
+import { Tooltip as BaseTooltip3 } from "@base-ui/react/tooltip";
+import { useCallback as useCallback5, useEffect as useEffect5, useId, useRef as useRef7, useState as useState2 } from "react";
+
+// src/useSafePolygon.ts
+import { useEffect as useEffect4, useRef as useRef6 } from "react";
+function useSafePolygon({
+  enabled,
+  anchor,
+  popupRef,
+  onClose
+}) {
+  const exitPointRef = useRef6(null);
+  useEffect4(() => {
+    if (!enabled || !anchor) return;
+    const handlePointerLeave = (e) => {
+      exitPointRef.current = { x: e.clientX, y: e.clientY };
+    };
+    anchor.addEventListener("pointerleave", handlePointerLeave);
+    return () => anchor.removeEventListener("pointerleave", handlePointerLeave);
+  }, [enabled, anchor]);
+  useEffect4(() => {
+    if (!enabled || !anchor) return;
+    const handlePointerMove = (e) => {
+      const exit = exitPointRef.current;
+      if (!exit) return;
+      const popup = popupRef.current;
+      if (!popup) return;
+      const popupRect = popup.getBoundingClientRect();
+      if (e.clientX >= popupRect.left && e.clientX <= popupRect.right && e.clientY >= popupRect.top && e.clientY <= popupRect.bottom) {
+        exitPointRef.current = null;
+        return;
+      }
+      const triangle = getTriangle(exit, popupRect);
+      if (!pointInTriangle({ x: e.clientX, y: e.clientY }, triangle)) {
+        exitPointRef.current = null;
+        onClose();
+      }
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    return () => document.removeEventListener("pointermove", handlePointerMove);
+  }, [enabled, anchor, popupRef, onClose]);
+  useEffect4(() => {
+    if (!enabled) {
+      exitPointRef.current = null;
+    }
+  }, [enabled]);
+}
+function getTriangle(exit, rect) {
+  const cx = rect.left + rect.width / 2;
+  const cy = rect.top + rect.height / 2;
+  const dx = cx - exit.x;
+  const dy = cy - exit.y;
+  if (Math.abs(dy) >= Math.abs(dx)) {
+    if (dy > 0) {
+      return [exit, { x: rect.left, y: rect.top }, { x: rect.right, y: rect.top }];
+    }
+    return [exit, { x: rect.left, y: rect.bottom }, { x: rect.right, y: rect.bottom }];
+  }
+  if (dx > 0) {
+    return [exit, { x: rect.left, y: rect.top }, { x: rect.left, y: rect.bottom }];
+  }
+  return [exit, { x: rect.right, y: rect.top }, { x: rect.right, y: rect.bottom }];
+}
+function pointInTriangle(p, [a, b, c]) {
+  const d1 = sign(p, a, b);
+  const d2 = sign(p, b, c);
+  const d3 = sign(p, c, a);
+  const hasNeg = d1 < 0 || d2 < 0 || d3 < 0;
+  const hasPos = d1 > 0 || d2 > 0 || d3 > 0;
+  return !(hasNeg && hasPos);
+}
+function sign(p1, p2, p3) {
+  return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+
+// src/Tooltip/Tooltip.css
+styleInject(".slithy-tooltip-positioner {\n  z-index: 1000;\n}\n.slithy-tooltip-popup {\n  background: var(--slithy-tooltip-bg, #222);\n  color: var(--slithy-tooltip-color, #fff);\n  font-size: var(--slithy-tooltip-font-size, 0.8125rem);\n  line-height: 1.4;\n  padding: var(--slithy-tooltip-padding, 4px 8px);\n  border-radius: var(--slithy-tooltip-radius, 4px);\n  max-width: var(--slithy-tooltip-max-width, 300px);\n  transform-origin: var(--transform-origin);\n  transition-property: opacity, transform;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.slithy-tooltip-popup[data-open] {\n  opacity: 1;\n  transform: scale(1);\n}\n.slithy-tooltip-popup[data-starting-style],\n.slithy-tooltip-popup[data-ending-style] {\n  opacity: 0;\n  transform: scale(0.95);\n}\n.slithy-tooltip-popup[data-instant] {\n  transition-duration: 0ms;\n}\n.slithy-tooltip-arrow {\n  width: 8px;\n  height: 8px;\n  transform: rotate(45deg);\n  background: var(--slithy-tooltip-bg, #222);\n}\n.slithy-tooltip-arrow[data-side=top] {\n  bottom: -4px;\n}\n.slithy-tooltip-arrow[data-side=bottom] {\n  top: -4px;\n}\n.slithy-tooltip-arrow[data-side=left] {\n  right: -4px;\n}\n.slithy-tooltip-arrow[data-side=right] {\n  left: -4px;\n}\n");
+
+// src/Tooltip/TooltipRenderer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function TooltipRenderer() {
+  const popupId = useId();
+  useEffect5(() => {
+    useTooltipStore.getState().setPopupId(popupId);
+  }, [popupId]);
+  const open = useTooltipStore((s) => s.open);
+  const content = useTooltipStore((s) => s.content);
+  const anchor = useTooltipStore((s) => s.anchor);
+  const positionConfig = useTooltipStore((s) => s.positionConfig);
+  const lastContentRef = useRef7(content);
+  const lastAnchorRef = useRef7(anchor);
+  if (content) lastContentRef.current = content;
+  if (anchor) lastAnchorRef.current = anchor;
+  const activeContent = content ?? lastContentRef.current;
+  const activeAnchor = anchor ?? lastAnchorRef.current;
+  const [hasOpened, setHasOpened] = useState2(false);
+  const [deferredOpen, setDeferredOpen] = useState2(false);
+  useEffect5(() => {
+    if (open && !hasOpened) {
+      setHasOpened(true);
+      requestAnimationFrame(() => setDeferredOpen(true));
+    } else {
+      setDeferredOpen(open);
+    }
+  }, [open, hasOpened]);
+  useEffect5(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        useTooltipStore.getState().closeTooltip();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
+  const hoverable = useTooltipStore((s) => s.hoverable);
+  const storeCloseDelay = useTooltipStore((s) => s.closeDelay);
+  const popupRef = useRef7(null);
+  const popupCloseTimerRef = useRef7(0);
+  const handleSafePolygonClose = useCallback5(() => {
+    useTooltipStore.getState().closeTooltip();
+  }, []);
+  useSafePolygon({
+    enabled: open && hoverable,
+    anchor,
+    popupRef,
+    onClose: handleSafePolygonClose
+  });
+  const handlePopupPointerEnter = useCallback5(() => {
+    if (!hoverable) return;
+    clearTimeout(popupCloseTimerRef.current);
+  }, [hoverable]);
+  const handlePopupPointerLeave = useCallback5(() => {
+    if (!hoverable) return;
+    popupCloseTimerRef.current = window.setTimeout(() => {
+      useTooltipStore.getState().closeTooltip();
+    }, storeCloseDelay);
+  }, [hoverable, storeCloseDelay]);
+  useEffect5(() => {
+    if (!open) clearTimeout(popupCloseTimerRef.current);
+    return () => clearTimeout(popupCloseTimerRef.current);
+  }, [open]);
+  const handleOpenChangeComplete = (isOpen) => {
+    if (!isOpen) {
+      lastContentRef.current = null;
+      lastAnchorRef.current = null;
+    }
+  };
+  if (!hasOpened) return null;
+  return /* @__PURE__ */ jsx4(
+    BaseTooltip3.Root,
+    {
+      open: deferredOpen,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          useTooltipStore.getState().closeTooltip();
+        }
+      },
+      onOpenChangeComplete: handleOpenChangeComplete,
+      children: /* @__PURE__ */ jsx4(BaseTooltip3.Portal, { children: /* @__PURE__ */ jsx4(
+        BaseTooltip3.Positioner,
+        {
+          ref: popupRef,
+          anchor: activeAnchor,
+          className: "slithy-tooltip-positioner",
+          side: positionConfig.side ?? "top",
+          sideOffset: positionConfig.sideOffset ?? 6,
+          align: positionConfig.align,
+          alignOffset: positionConfig.alignOffset,
+          collisionPadding: positionConfig.collisionPadding,
+          onPointerEnter: handlePopupPointerEnter,
+          onPointerLeave: handlePopupPointerLeave,
+          children: activeContent
+        }
+      ) })
+    }
+  );
+}
 export {
   Dropdown,
-  Tooltip
+  DropdownRenderer,
+  Tooltip,
+  TooltipRenderer
 };