@particle-academy/react-fancy 1.6.1 → 1.7.0

package/dist/index.cjs

@@ -1924,10 +1924,157 @@ var Textarea = react.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
+function Portal({ children, container }) {
+  if (typeof document === "undefined") return null;
+  const target = container ?? document.body;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(PortalDarkWrapper, { children }),
+    target
+  );
+}
+function PortalDarkWrapper({ children }) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const root = document.documentElement;
+    const wrapper = ref.current;
+    if (!wrapper) return;
+    const sync = () => {
+      const isDark = root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
+      wrapper.classList.toggle("dark", isDark);
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-portal": "", style: { display: "contents" }, children });
+}
+function getPosition(anchor, floating, placement, offset) {
+  let x = 0;
+  let y = 0;
+  const base = placement.split("-")[0];
+  const align = placement.split("-")[1];
+  switch (base) {
+    case "top":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.top - floating.height - offset;
+      break;
+    case "bottom":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.bottom + offset;
+      break;
+    case "left":
+      x = anchor.left - floating.width - offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+    case "right":
+      x = anchor.right + offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+  }
+  if (base === "top" || base === "bottom") {
+    if (align === "start") x = anchor.left;
+    else if (align === "end") x = anchor.right - floating.width;
+  }
+  if (base === "left" || base === "right") {
+    if (align === "start") y = anchor.top;
+    else if (align === "end") y = anchor.bottom - floating.height;
+  }
+  let finalPlacement = placement;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (base === "bottom" && y + floating.height > vh) {
+    y = anchor.top - floating.height - offset;
+    finalPlacement = placement.replace("bottom", "top");
+  } else if (base === "top" && y < 0) {
+    y = anchor.bottom + offset;
+    finalPlacement = placement.replace("top", "bottom");
+  }
+  x = Math.max(4, Math.min(x, vw - floating.width - 4));
+  y = Math.max(4, Math.min(y, vh - floating.height - 4));
+  return { x, y, placement: finalPlacement };
+}
+function useFloatingPosition(anchorRef, floatingRef, options = {}) {
+  const { placement = "bottom", offset = 8, enabled = true } = options;
+  const [position, setPosition] = react.useState({
+    x: -9999,
+    y: -9999,
+    placement
+  });
+  const update = react.useCallback(() => {
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!anchor || !floating) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const floatingRect = floating.getBoundingClientRect();
+    setPosition(getPosition(anchorRect, floatingRect, placement, offset));
+  }, [anchorRef, floatingRef, placement, offset]);
+  react.useLayoutEffect(() => {
+    if (!enabled) return;
+    update();
+    const raf = requestAnimationFrame(() => {
+      update();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [update, enabled]);
+  react.useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [update, enabled]);
+  return position;
+}
+function useOutsideClick(ref, handler, enabled = true, ignoreRef) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) return;
+      if (ignoreRef?.current?.contains(event.target)) return;
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler, enabled, ignoreRef]);
+}
+function useEscapeKey(handler, enabled = true) {
+  react.useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      if (event.key === "Escape") {
+        handler();
+      }
+    };
+    document.addEventListener("keydown", listener);
+    return () => document.removeEventListener("keydown", listener);
+  }, [handler, enabled]);
+}
 function isOptionGroup(item) {
   return typeof item === "object" && "options" in item;
 }
-function renderOption(option, index) {
+function flattenOptions(list) {
+  const flat = [];
+  for (const item of list) {
+    if (isOptionGroup(item)) {
+      flat.push(...item.options);
+    } else {
+      flat.push(item);
+    }
+  }
+  return flat;
+}
+function renderNativeOption(option, index) {
   const resolved = resolveOption(option);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "option",
@@ -1939,7 +2086,7 @@ function renderOption(option, index) {
     `${resolved.value}-${index}`
   );
 }
-var Select = react.forwardRef(
+var NativeSelect = react.forwardRef(
   ({
     size = "md",
     dirty,
@@ -1997,8 +2144,8 @@ var Select = react.forwardRef(
               placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
               list.map(
                 (item, index) => isOptionGroup(item) ? /* @__PURE__ */ jsxRuntime.jsx("optgroup", { label: item.label, children: item.options.map(
-                  (opt, optIndex) => renderOption(opt, optIndex)
-                ) }, `group-${index}`) : renderOption(item, index)
+                  (opt, optIndex) => renderNativeOption(opt, optIndex)
+                ) }, `group-${index}`) : renderNativeOption(item, index)
               )
             ]
           }
@@ -2022,6 +2169,270 @@ var Select = react.forwardRef(
     return select;
   }
 );
+NativeSelect.displayName = "NativeSelect";
+var ListboxSelect = react.forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    list,
+    placeholder = "Select...",
+    multiple = false,
+    values: controlledValues,
+    defaultValues,
+    onValueChange,
+    onValuesChange,
+    searchable = false,
+    selectedSuffix = "selected",
+    indicator = "check",
+    value: controlledSingleValue,
+    defaultValue: defaultSingleValue
+  }, _ref) => {
+    const autoId = react.useId();
+    const selectId = id ?? autoId;
+    const [open, setOpen] = react.useState(false);
+    const [search2, setSearch] = react.useState("");
+    const [activeIndex, setActiveIndex] = react.useState(-1);
+    const [singleValue, setSingleValue] = react.useState(
+      controlledSingleValue ?? defaultSingleValue ?? ""
+    );
+    const currentSingle = controlledSingleValue ?? singleValue;
+    const [multiValues, setMultiValues] = react.useState(
+      controlledValues ?? defaultValues ?? []
+    );
+    const currentMulti = controlledValues ?? multiValues;
+    react.useEffect(() => {
+      if (controlledValues) setMultiValues(controlledValues);
+    }, [controlledValues]);
+    react.useEffect(() => {
+      if (controlledSingleValue !== void 0) setSingleValue(controlledSingleValue);
+    }, [controlledSingleValue]);
+    const anchorRef = react.useRef(null);
+    const listRef = react.useRef(null);
+    const wrapperRef = react.useRef(null);
+    const searchRef = react.useRef(null);
+    const position = useFloatingPosition(anchorRef, listRef, {
+      placement: "bottom-start",
+      offset: 4,
+      enabled: open
+    });
+    const close = react.useCallback(() => {
+      setOpen(false);
+      setSearch("");
+      setActiveIndex(-1);
+    }, []);
+    useOutsideClick(wrapperRef, close, open);
+    useEscapeKey(close, open);
+    react.useEffect(() => {
+      if (open && searchable) {
+        requestAnimationFrame(() => searchRef.current?.focus());
+      }
+    }, [open, searchable]);
+    const allOptions = flattenOptions(list);
+    const resolvedOptions = allOptions.map(resolveOption);
+    const filtered = search2 ? resolvedOptions.filter(
+      (o) => o.label.toLowerCase().includes(search2.toLowerCase())
+    ) : resolvedOptions;
+    const isSelected = (value) => {
+      if (multiple) return currentMulti.includes(value);
+      return currentSingle === value;
+    };
+    const toggleOption = react.useCallback(
+      (value) => {
+        if (multiple) {
+          const next = currentMulti.includes(value) ? currentMulti.filter((v) => v !== value) : [...currentMulti, value];
+          setMultiValues(next);
+          onValuesChange?.(next);
+        } else {
+          setSingleValue(value);
+          onValueChange?.(value);
+          close();
+        }
+      },
+      [multiple, currentMulti, onValuesChange, onValueChange, close]
+    );
+    const getDisplayText = () => {
+      if (multiple) {
+        if (currentMulti.length === 0) return placeholder;
+        if (currentMulti.length === 1) {
+          const opt2 = resolvedOptions.find((o) => o.value === currentMulti[0]);
+          return opt2?.label ?? currentMulti[0];
+        }
+        return `${currentMulti.length} ${selectedSuffix}`;
+      }
+      if (!currentSingle) return placeholder;
+      const opt = resolvedOptions.find((o) => o.value === currentSingle);
+      return opt?.label ?? currentSingle;
+    };
+    const hasValue = multiple ? currentMulti.length > 0 : !!currentSingle;
+    const handleKeyDown = (e) => {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setOpen(true);
+        }
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => Math.max(i - 1, 0));
+      } else if (e.key === "Enter" && activeIndex >= 0) {
+        e.preventDefault();
+        const item = filtered[activeIndex];
+        if (item && !item.disabled) toggleOption(item.value);
+      }
+    };
+    const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: anchorRef,
+        type: "button",
+        id: selectId,
+        disabled,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: handleKeyDown,
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "data-react-fancy-select": "",
+        "data-variant": "listbox",
+        className: cn(
+          inputBaseClasses,
+          inputSizeClasses[size],
+          dirtyClasses(dirty),
+          errorClasses(error),
+          "flex w-full cursor-pointer items-center justify-between gap-2 text-left",
+          !hasValue && "text-zinc-400 dark:text-zinc-500",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: getDisplayText() }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: cn("h-4 w-4 shrink-0 text-zinc-400 transition-transform", open && "rotate-180"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+    const dropdown = open && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: listRef,
+        role: "listbox",
+        "aria-multiselectable": multiple || void 0,
+        className: "fixed z-50 max-h-60 min-w-[8rem] overflow-y-auto rounded-xl border border-zinc-200 bg-white p-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 dark:shadow-zinc-950/50 fancy-scale-in",
+        style: {
+          left: position.x,
+          top: position.y,
+          width: anchorRef.current?.offsetWidth
+        },
+        children: [
+          searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: searchRef,
+              type: "text",
+              value: search2,
+              onChange: (e) => {
+                setSearch(e.target.value);
+                setActiveIndex(-1);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder: "Search...",
+              className: "w-full rounded-md border-0 bg-zinc-100 px-2.5 py-1.5 text-sm text-zinc-900 placeholder:text-zinc-400 outline-none dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+            }
+          ) }),
+          filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-zinc-400", children: "No results found" }) : filtered.map((option, i) => {
+            const selected = isSelected(option.value);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": selected,
+                disabled: option.disabled,
+                onClick: () => toggleOption(option.value),
+                className: cn(
+                  "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
+                  i === activeIndex ? "bg-zinc-100 dark:bg-zinc-800" : "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
+                  selected ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-700 dark:text-zinc-300",
+                  option.disabled && "cursor-not-allowed opacity-50"
+                ),
+                children: [
+                  indicator === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors",
+                        selected ? "border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400" : "border-zinc-300 dark:border-zinc-600"
+                      ),
+                      children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2.5 6 5 8.5 9.5 3.5" }) })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: selected && /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4 text-blue-500 dark:text-blue-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z", clipRule: "evenodd" }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate", children: option.label }),
+                    option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-zinc-400 dark:text-zinc-500", children: option.description })
+                  ] })
+                ]
+              },
+              option.value
+            );
+          })
+        ]
+      }
+    ) });
+    const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: "relative", children: [
+      trigger,
+      dropdown
+    ] });
+    if (label || error || description) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Field,
+        {
+          label,
+          description,
+          error,
+          required,
+          htmlFor: selectId,
+          size,
+          children: content
+        }
+      );
+    }
+    return content;
+  }
+);
+ListboxSelect.displayName = "ListboxSelect";
+var Select = react.forwardRef(
+  (props, ref) => {
+    const variant = props.variant ?? (props.multiple ? "listbox" : "native");
+    if (variant === "listbox") {
+      return /* @__PURE__ */ jsxRuntime.jsx(ListboxSelect, { ...props, ref });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(NativeSelect, { ...props, ref });
+  }
+);
 Select.displayName = "Select";
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
@@ -3690,34 +4101,6 @@ var Table = Object.assign(TableRoot, {
   Tray: TableTray,
   RowTray: TableRowTray
 });
-function Portal({ children, container }) {
-  if (typeof document === "undefined") return null;
-  const target = container ?? document.body;
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(PortalDarkWrapper, { children }),
-    target
-  );
-}
-function PortalDarkWrapper({ children }) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    const root = document.documentElement;
-    const wrapper = ref.current;
-    if (!wrapper) return;
-    const sync = () => {
-      const isDark = root.classList.contains("dark") || root.getAttribute("data-theme") === "dark";
-      wrapper.classList.toggle("dark", isDark);
-    };
-    sync();
-    const observer = new MutationObserver(sync);
-    observer.observe(root, {
-      attributes: true,
-      attributeFilter: ["class", "data-theme"]
-    });
-    return () => observer.disconnect();
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-portal": "", style: { display: "contents" }, children });
-}
 var sizeClasses3 = {
   xs: "text-xs",
   sm: "text-sm",
@@ -4759,85 +5142,6 @@ var Timeline = Object.assign(TimelineRoot, {
   Item: TimelineItem,
   Block: TimelineBlock
 });
-function getPosition(anchor, floating, placement, offset) {
-  let x = 0;
-  let y = 0;
-  const base = placement.split("-")[0];
-  const align = placement.split("-")[1];
-  switch (base) {
-    case "top":
-      x = anchor.left + anchor.width / 2 - floating.width / 2;
-      y = anchor.top - floating.height - offset;
-      break;
-    case "bottom":
-      x = anchor.left + anchor.width / 2 - floating.width / 2;
-      y = anchor.bottom + offset;
-      break;
-    case "left":
-      x = anchor.left - floating.width - offset;
-      y = anchor.top + anchor.height / 2 - floating.height / 2;
-      break;
-    case "right":
-      x = anchor.right + offset;
-      y = anchor.top + anchor.height / 2 - floating.height / 2;
-      break;
-  }
-  if (base === "top" || base === "bottom") {
-    if (align === "start") x = anchor.left;
-    else if (align === "end") x = anchor.right - floating.width;
-  }
-  if (base === "left" || base === "right") {
-    if (align === "start") y = anchor.top;
-    else if (align === "end") y = anchor.bottom - floating.height;
-  }
-  let finalPlacement = placement;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  if (base === "bottom" && y + floating.height > vh) {
-    y = anchor.top - floating.height - offset;
-    finalPlacement = placement.replace("bottom", "top");
-  } else if (base === "top" && y < 0) {
-    y = anchor.bottom + offset;
-    finalPlacement = placement.replace("top", "bottom");
-  }
-  x = Math.max(4, Math.min(x, vw - floating.width - 4));
-  y = Math.max(4, Math.min(y, vh - floating.height - 4));
-  return { x, y, placement: finalPlacement };
-}
-function useFloatingPosition(anchorRef, floatingRef, options = {}) {
-  const { placement = "bottom", offset = 8, enabled = true } = options;
-  const [position, setPosition] = react.useState({
-    x: -9999,
-    y: -9999,
-    placement
-  });
-  const update = react.useCallback(() => {
-    const anchor = anchorRef.current;
-    const floating = floatingRef.current;
-    if (!anchor || !floating) return;
-    const anchorRect = anchor.getBoundingClientRect();
-    const floatingRect = floating.getBoundingClientRect();
-    setPosition(getPosition(anchorRect, floatingRect, placement, offset));
-  }, [anchorRef, floatingRef, placement, offset]);
-  react.useLayoutEffect(() => {
-    if (!enabled) return;
-    update();
-    const raf = requestAnimationFrame(() => {
-      update();
-    });
-    return () => cancelAnimationFrame(raf);
-  }, [update, enabled]);
-  react.useEffect(() => {
-    if (!enabled) return;
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [update, enabled]);
-  return position;
-}
 var Tooltip = react.forwardRef(
   function Tooltip2({ children, content, placement = "top", delay = 200, offset = 8, className }, _ref) {
     const [open, setOpen] = react.useState(false);
@@ -4905,78 +5209,26 @@ function usePopover() {
   }
   return ctx;
 }
-function PopoverTrigger({ children }) {
-  const { setOpen, open, anchorRef } = usePopover();
-  return react.cloneElement(children, {
-    ref: anchorRef,
-    onClick: () => setOpen(!open),
-    "aria-expanded": open,
-    "aria-haspopup": true
-  });
-}
-PopoverTrigger.displayName = "PopoverTrigger";
-function useOutsideClick(ref, handler, enabled = true, ignoreRef) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const listener = (event) => {
-      const el = ref.current;
-      if (!el || el.contains(event.target)) return;
-      if (ignoreRef?.current?.contains(event.target)) return;
-      handler(event);
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [ref, handler, enabled, ignoreRef]);
-}
-function useEscapeKey(handler, enabled = true) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const listener = (event) => {
-      if (event.key === "Escape") {
-        handler();
-      }
-    };
-    document.addEventListener("keydown", listener);
-    return () => document.removeEventListener("keydown", listener);
-  }, [handler, enabled]);
-}
-function useAnimation({
-  open,
-  enterClass,
-  exitClass
-}) {
-  const [mounted, setMounted] = react.useState(open);
-  const [animClass, setAnimClass] = react.useState(open ? enterClass : "");
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (open) {
-      setMounted(true);
-      setAnimClass(enterClass);
-    } else if (mounted) {
-      setAnimClass(exitClass);
-    }
-  }, [open, enterClass, exitClass, mounted]);
-  const handleAnimationEnd = react.useCallback(() => {
-    if (!open) {
-      setMounted(false);
-      setAnimClass("");
+function PopoverTrigger({ children, className }) {
+  const { setOpen, open, anchorRef, hover, onHoverEnter, onHoverLeave } = usePopover();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: anchorRef,
+      "data-react-fancy-popover-trigger": "",
+      className: cn("inline-flex", className),
+      onClick: hover ? void 0 : () => setOpen(!open),
+      onMouseEnter: hover ? onHoverEnter : void 0,
+      onMouseLeave: hover ? onHoverLeave : void 0,
+      "aria-expanded": open,
+      "aria-haspopup": true,
+      children
     }
-  }, [open]);
-  react.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    el.addEventListener("animationend", handleAnimationEnd);
-    return () => el.removeEventListener("animationend", handleAnimationEnd);
-  }, [handleAnimationEnd, mounted]);
-  return { mounted, className: animClass, ref };
+  );
 }
+PopoverTrigger.displayName = "PopoverTrigger";
 function PopoverContent({ children, className }) {
-  const { open, setOpen, anchorRef, placement, offset } = usePopover();
-  const floatingRef = react.useRef(null);
+  const { open, setOpen, anchorRef, floatingRef, placement, offset, hover, onHoverEnter, onHoverLeave } = usePopover();
   const outsideRef = react.useRef(null);
   const position = useFloatingPosition(anchorRef, floatingRef, {
     placement,
@@ -4984,29 +5236,26 @@ function PopoverContent({ children, className }) {
     enabled: open
   });
   const close = react.useCallback(() => setOpen(false), [setOpen]);
-  useOutsideClick(outsideRef, close, open, anchorRef);
+  useOutsideClick(outsideRef, close, open && !hover, anchorRef);
   useEscapeKey(close, open);
-  const { mounted, className: animClass, ref: animRef } = useAnimation({
-    open,
-    enterClass: "fancy-scale-in",
-    exitClass: "fancy-fade-out"
-  });
-  if (!mounted) return null;
+  const positioned = position.x !== -9999 && position.y !== -9999;
+  if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: (node) => {
         outsideRef.current = node;
         floatingRef.current = node;
-        animRef.current = node;
       },
       "data-react-fancy-popover": "",
       className: cn(
         "fixed z-50 rounded-xl border border-zinc-200 bg-white p-4 text-zinc-700 shadow-lg dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 dark:shadow-zinc-950/50",
-        animClass,
+        positioned ? "fancy-scale-in" : "invisible",
         className
       ),
       style: { left: position.x, top: position.y },
+      onMouseEnter: hover ? onHoverEnter : void 0,
+      onMouseLeave: hover ? onHoverLeave : void 0,
       children
     }
   ) });
@@ -5018,17 +5267,37 @@ function PopoverRoot({
   defaultOpen = false,
   onOpenChange,
   placement = "bottom",
-  offset = 8
+  offset = 8,
+  hover = false,
+  hoverDelay = 200,
+  hoverCloseDelay = 300
 }) {
-  const [open, setOpen] = useControllableState(
-    controlledOpen,
-    defaultOpen,
-    onOpenChange
-  );
+  const [internalOpen, setInternalOpen] = react.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : internalOpen;
   const anchorRef = react.useRef(null);
+  const floatingRef = react.useRef(null);
+  const hoverTimeoutRef = react.useRef(void 0);
+  const setOpen = react.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const onHoverEnter = react.useCallback(() => {
+    if (!hover) return;
+    clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(() => setOpen(true), hoverDelay);
+  }, [hover, hoverDelay, setOpen]);
+  const onHoverLeave = react.useCallback(() => {
+    if (!hover) return;
+    clearTimeout(hoverTimeoutRef.current);
+    hoverTimeoutRef.current = setTimeout(() => setOpen(false), hoverCloseDelay);
+  }, [hover, hoverCloseDelay, setOpen]);
   const ctx = react.useMemo(
-    () => ({ open, setOpen, anchorRef, placement, offset }),
-    [open, setOpen, anchorRef, placement, offset]
+    () => ({ open, setOpen, anchorRef, floatingRef, placement, offset, hover, onHoverEnter, onHoverLeave }),
+    [open, setOpen, placement, offset, hover, onHoverEnter, onHoverLeave]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: ctx, children });
 }
@@ -5056,6 +5325,36 @@ function DropdownTrigger({ children }) {
   });
 }
 DropdownTrigger.displayName = "DropdownTrigger";
+function useAnimation({
+  open,
+  enterClass,
+  exitClass
+}) {
+  const [mounted, setMounted] = react.useState(open);
+  const [animClass, setAnimClass] = react.useState(open ? enterClass : "");
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setAnimClass(enterClass);
+    } else if (mounted) {
+      setAnimClass(exitClass);
+    }
+  }, [open, enterClass, exitClass, mounted]);
+  const handleAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      setMounted(false);
+      setAnimClass("");
+    }
+  }, [open]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.addEventListener("animationend", handleAnimationEnd);
+    return () => el.removeEventListener("animationend", handleAnimationEnd);
+  }, [handleAnimationEnd, mounted]);
+  return { mounted, className: animClass, ref };
+}
 function DropdownItems({ children, className }) {
   const { open, setOpen, anchorRef, activeIndex, setActiveIndex, placement, offset } = useDropdown();
   const floatingRef = react.useRef(null);