@ataraui/ataraui-react 0.3.0 → 0.4.0

package/dist/index.js

@@ -2,13 +2,14 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var React3 = require('react');
+var React13 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React13__default = /*#__PURE__*/_interopDefault(React13);
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -94,7 +95,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React3__default.default.forwardRef(
+var Button = React13__default.default.forwardRef(
   ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
@@ -133,7 +134,7 @@ var inputVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Input = React3__default.default.forwardRef(
+var Input = React13__default.default.forwardRef(
   ({ className, label, error, hint, id, inputSize, ...props }, ref) => {
     const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
@@ -200,7 +201,7 @@ var cardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Card = React3__default.default.forwardRef(
+var Card = React13__default.default.forwardRef(
   ({ className, variant, padding, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -211,23 +212,23 @@ var Card = React3__default.default.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React3__default.default.forwardRef(
+var CardHeader = React13__default.default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-1.5 mb-4", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React3__default.default.forwardRef(
+var CardTitle = React13__default.default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-lg font-semibold text-(--color-neutral-900)", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React3__default.default.forwardRef(
+var CardDescription = React13__default.default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-(--color-neutral-500)", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React3__default.default.forwardRef(
+var CardContent = React13__default.default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("text-sm text-(--color-neutral-700)", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React3__default.default.forwardRef(
+var CardFooter = React13__default.default.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-2 mt-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -248,9 +249,9 @@ var avatarVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Avatar = React3__default.default.forwardRef(
+var Avatar = React13__default.default.forwardRef(
   ({ className, size, src, alt, fallback, ...props }, ref) => {
-    const [imgError, setImgError] = React3__default.default.useState(false);
+    const [imgError, setImgError] = React13__default.default.useState(false);
     const initials = fallback == null ? void 0 : fallback.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -294,7 +295,7 @@ var separatorVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Separator = React3__default.default.forwardRef(
+var Separator = React13__default.default.forwardRef(
   ({ className, orientation, label, ...props }, ref) => {
     if (label && orientation !== "vertical") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
@@ -333,7 +334,7 @@ var spinnerVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Spinner = React3__default.default.forwardRef(
+var Spinner = React13__default.default.forwardRef(
   ({ className, size, label, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, role: "status", className: cn("inline-flex flex-col items-center gap-2", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(spinnerVariants({ size })) }),
     label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-(--color-neutral-500)", children: label }),
@@ -361,7 +362,7 @@ var selectVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Select = React3__default.default.forwardRef(
+var Select = React13__default.default.forwardRef(
   ({ className, label, error, hint, placeholder, options, selectSize, id, children, ...props }, ref) => {
     const selectId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
@@ -401,7 +402,7 @@ var Select = React3__default.default.forwardRef(
   }
 );
 Select.displayName = "Select";
-var Checkbox = React3__default.default.forwardRef(
+var Checkbox = React13__default.default.forwardRef(
   ({ className, label, description, error, id, disabled, ...props }, ref) => {
     const checkboxId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
@@ -520,10 +521,10 @@ var RadioGroup = ({
   ] });
 };
 RadioGroup.displayName = "RadioGroup";
-var Switch = React3__default.default.forwardRef(
+var Switch = React13__default.default.forwardRef(
   ({ className, label, description, error, id, disabled, checked, defaultChecked, onChange, ...props }, ref) => {
     const switchId = id != null ? id : `switch-${Math.random().toString(36).slice(2, 9)}`;
-    const [internalChecked, setInternalChecked] = React3__default.default.useState(
+    const [internalChecked, setInternalChecked] = React13__default.default.useState(
       defaultChecked != null ? defaultChecked : false
     );
     const isControlled = checked !== void 0;
@@ -592,6 +593,529 @@ var Switch = React3__default.default.forwardRef(
   }
 );
 Switch.displayName = "Switch";
+var modalVariants = classVarianceAuthority.cva(
+  "relative bg-white rounded-(--radius-xl) shadow-lg w-full mx-4 transition-all",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        full: "max-w-full mx-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Modal = ({
+  open,
+  onClose,
+  children,
+  size,
+  className,
+  closeOnOverlayClick = true
+}) => {
+  React13__default.default.useEffect(() => {
+    if (open) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [open]);
+  React13__default.default.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: closeOnOverlayClick ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(modalVariants({ size }), className), children })
+  ] });
+};
+Modal.displayName = "Modal";
+var ModalHeader = ({
+  className,
+  children,
+  onClose,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: cn("flex items-start justify-between p-6 pb-4", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children }),
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "ml-4 shrink-0 rounded-(--radius-md) p-1 text-(--color-neutral-400) hover:bg-(--color-neutral-100) hover:text-(--color-neutral-700) transition-colors",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-4 w-4",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+            }
+          )
+        }
+      )
+    ]
+  }
+);
+ModalHeader.displayName = "ModalHeader";
+var ModalTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h2",
+  {
+    className: cn(
+      "text-lg font-semibold text-(--color-neutral-900)",
+      className
+    ),
+    ...props
+  }
+);
+ModalTitle.displayName = "ModalTitle";
+var ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    className: cn("text-sm text-(--color-neutral-500)", className),
+    ...props
+  }
+);
+ModalDescription.displayName = "ModalDescription";
+var ModalBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("px-6 py-2 text-sm text-(--color-neutral-700)", className),
+    ...props
+  }
+);
+ModalBody.displayName = "ModalBody";
+var ModalFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex items-center justify-end gap-2 p-6 pt-4", className),
+    ...props
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+var drawerVariants = classVarianceAuthority.cva(
+  "fixed z-50 bg-white shadow-xl transition-transform duration-300 ease-in-out",
+  {
+    variants: {
+      side: {
+        left: "inset-y-0 left-0 h-full",
+        right: "inset-y-0 right-0 h-full",
+        top: "inset-x-0 top-0 w-full",
+        bottom: "inset-x-0 bottom-0 w-full"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var sizeStyle = {
+  sm: { width: "20rem" },
+  md: { width: "24rem" },
+  lg: { width: "32rem" },
+  full: { width: "100%" }
+};
+var translateMap = {
+  left: { closed: "translateX(-100%)", open: "translateX(0)" },
+  right: { closed: "translateX(100%)", open: "translateX(0)" },
+  top: { closed: "translateY(-100%)", open: "translateY(0)" },
+  bottom: { closed: "translateY(100%)", open: "translateY(0)" }
+};
+var Drawer = ({
+  open,
+  onClose,
+  children,
+  side = "right",
+  size = "md",
+  className,
+  closeOnOverlayClick = true
+}) => {
+  React13__default.default.useEffect(() => {
+    if (open) {
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    };
+  }, [open]);
+  React13__default.default.useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  const resolvedSide = side != null ? side : "right";
+  const transform = open ? translateMap[resolvedSide].open : translateMap[resolvedSide].closed;
+  const isHorizontal = resolvedSide === "left" || resolvedSide === "right";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("fixed inset-0 z-50", !open && "pointer-events-none"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-0 bg-black/50 transition-opacity duration-300",
+          open ? "opacity-100" : "opacity-0"
+        ),
+        onClick: closeOnOverlayClick ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(drawerVariants({ side }), className),
+        style: {
+          transform,
+          ...isHorizontal ? sizeStyle[size] : { height: "auto", maxHeight: "80vh" }
+        },
+        children
+      }
+    )
+  ] });
+};
+Drawer.displayName = "Drawer";
+var DrawerHeader = ({
+  className,
+  children,
+  onClose,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: cn("flex items-start justify-between p-6 pb-4 border-b border-(--color-neutral-200)", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children }),
+      onClose && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "ml-4 shrink-0 rounded-(--radius-md) p-1 text-(--color-neutral-400) hover:bg-(--color-neutral-100) hover:text-(--color-neutral-700) transition-colors",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+        }
+      )
+    ]
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h2",
+  {
+    className: cn("text-lg font-semibold text-(--color-neutral-900)", className),
+    ...props
+  }
+);
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    className: cn("text-sm text-(--color-neutral-500)", className),
+    ...props
+  }
+);
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex-1 overflow-y-auto p-6 text-sm text-(--color-neutral-700)", className),
+    ...props
+  }
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex items-center justify-end gap-2 p-6 pt-4 border-t border-(--color-neutral-200)", className),
+    ...props
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var Tooltip = ({
+  content,
+  children,
+  side = "top",
+  delay = 300,
+  className
+}) => {
+  var _a, _b;
+  const [visible, setVisible] = React13__default.default.useState(false);
+  const [coords, setCoords] = React13__default.default.useState(null);
+  const triggerRef = React13__default.default.useRef(null);
+  const tooltipRef = React13__default.default.useRef(null);
+  const timerRef = React13__default.default.useRef(null);
+  const computeCoords = React13__default.default.useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const t = triggerRef.current.getBoundingClientRect();
+    const tt = tooltipRef.current.getBoundingClientRect();
+    const offset = 8;
+    switch (side) {
+      case "top":
+        setCoords({
+          top: t.top - tt.height - offset,
+          left: t.left + t.width / 2 - tt.width / 2
+        });
+        break;
+      case "bottom":
+        setCoords({
+          top: t.bottom + offset,
+          left: t.left + t.width / 2 - tt.width / 2
+        });
+        break;
+      case "left":
+        setCoords({
+          top: t.top + t.height / 2 - tt.height / 2,
+          left: t.left - tt.width - offset
+        });
+        break;
+      case "right":
+        setCoords({
+          top: t.top + t.height / 2 - tt.height / 2,
+          left: t.right + offset
+        });
+        break;
+    }
+  }, [side]);
+  React13__default.default.useLayoutEffect(() => {
+    if (!visible) return;
+    computeCoords();
+  }, [computeCoords, content, visible]);
+  React13__default.default.useEffect(() => {
+    if (!visible) return;
+    window.addEventListener("resize", computeCoords);
+    window.addEventListener("scroll", computeCoords, true);
+    return () => {
+      window.removeEventListener("resize", computeCoords);
+      window.removeEventListener("scroll", computeCoords, true);
+    };
+  }, [computeCoords, visible]);
+  const show = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      setCoords(null);
+      setVisible(true);
+    }, delay);
+  };
+  const hide = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setVisible(false);
+    setCoords(null);
+  };
+  React13__default.default.useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "inline-flex",
+        onMouseEnter: show,
+        onMouseLeave: hide,
+        onFocus: show,
+        onBlur: hide,
+        children
+      }
+    ),
+    visible && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: tooltipRef,
+        role: "tooltip",
+        className: cn(
+          "fixed z-50 px-2.5 py-1.5 text-xs font-medium text-white rounded-(--radius-md) shadow-md pointer-events-none whitespace-nowrap transition-opacity",
+          coords ? "opacity-100" : "opacity-0",
+          className
+        ),
+        style: {
+          top: (_a = coords == null ? void 0 : coords.top) != null ? _a : 0,
+          left: (_b = coords == null ? void 0 : coords.left) != null ? _b : 0,
+          backgroundColor: "var(--color-neutral-900)"
+        },
+        children: content
+      }
+    )
+  ] });
+};
+Tooltip.displayName = "Tooltip";
+var Popover = ({
+  content,
+  children,
+  side = "bottom",
+  align = "center",
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  closeOnOutsideClick = true
+}) => {
+  var _a, _b;
+  const [uncontrolledOpen, setUncontrolledOpen] = React13__default.default.useState(defaultOpen);
+  const [coords, setCoords] = React13__default.default.useState(null);
+  const [mounted, setMounted] = React13__default.default.useState(false);
+  const triggerRef = React13__default.default.useRef(null);
+  const popoverRef = React13__default.default.useRef(null);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  const setOpen = React13__default.default.useCallback((nextOpen) => {
+    if (!isControlled) setUncontrolledOpen(nextOpen);
+    onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+  }, [isControlled, onOpenChange]);
+  const close = React13__default.default.useCallback(() => setOpen(false), [setOpen]);
+  const openPopover = React13__default.default.useCallback(() => setOpen(true), [setOpen]);
+  const controls = React13__default.default.useMemo(() => ({
+    close,
+    open: openPopover,
+    setOpen
+  }), [close, openPopover, setOpen]);
+  const computeCoords = React13__default.default.useCallback(() => {
+    if (!triggerRef.current || !popoverRef.current) return;
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const popover2 = popoverRef.current.getBoundingClientRect();
+    const offset = 8;
+    let top = 0;
+    let left = 0;
+    if (side === "top") top = trigger.top - popover2.height - offset;
+    if (side === "bottom") top = trigger.bottom + offset;
+    if (side === "left") left = trigger.left - popover2.width - offset;
+    if (side === "right") left = trigger.right + offset;
+    if (side === "top" || side === "bottom") {
+      if (align === "start") left = trigger.left;
+      if (align === "center") left = trigger.left + trigger.width / 2 - popover2.width / 2;
+      if (align === "end") left = trigger.right - popover2.width;
+    }
+    if (side === "left" || side === "right") {
+      if (align === "start") top = trigger.top;
+      if (align === "center") top = trigger.top + trigger.height / 2 - popover2.height / 2;
+      if (align === "end") top = trigger.bottom - popover2.height;
+    }
+    setCoords({
+      top: Math.max(8, Math.min(top, window.innerHeight - popover2.height - 8)),
+      left: Math.max(8, Math.min(left, window.innerWidth - popover2.width - 8))
+    });
+  }, [align, side]);
+  React13__default.default.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React13__default.default.useLayoutEffect(() => {
+    if (!isOpen) return;
+    computeCoords();
+  }, [computeCoords, content, isOpen]);
+  React13__default.default.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    const handlePointerDown = (event) => {
+      var _a2, _b2;
+      const target = event.target;
+      const clickedTrigger = (_a2 = triggerRef.current) == null ? void 0 : _a2.contains(target);
+      const clickedPopover = (_b2 = popoverRef.current) == null ? void 0 : _b2.contains(target);
+      if (!clickedTrigger && !clickedPopover) close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    if (closeOnOutsideClick) document.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("resize", computeCoords);
+    window.addEventListener("scroll", computeCoords, true);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("resize", computeCoords);
+      window.removeEventListener("scroll", computeCoords, true);
+    };
+  }, [close, closeOnOutsideClick, computeCoords, isOpen]);
+  const popover = isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: popoverRef,
+      role: "dialog",
+      className: cn(
+        "fixed z-50 min-w-48 rounded-(--radius-lg) border border-(--color-neutral-200) bg-white p-4 text-sm text-(--color-neutral-700) shadow-lg outline-none transition-opacity",
+        coords ? "opacity-100" : "opacity-0",
+        className
+      ),
+      style: {
+        top: (_a = coords == null ? void 0 : coords.top) != null ? _a : 0,
+        left: (_b = coords == null ? void 0 : coords.left) != null ? _b : 0
+      },
+      children: typeof content === "function" ? content(controls) : content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "inline-flex",
+        "aria-expanded": isOpen,
+        onClick: () => setOpen(!isOpen),
+        children
+      }
+    ),
+    mounted && popover ? reactDom.createPortal(popover, document.body) : null
+  ] });
+};
+Popover.displayName = "Popover";
 
 exports.Avatar = Avatar;
 exports.Badge = Badge;
@@ -603,20 +1127,36 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Checkbox = Checkbox;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerTitle = DrawerTitle;
 exports.Input = Input;
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalDescription = ModalDescription;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalTitle = ModalTitle;
+exports.Popover = Popover;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
 exports.Separator = Separator;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
+exports.Tooltip = Tooltip;
 exports.avatarVariants = avatarVariants;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cardVariants = cardVariants;
 exports.cn = cn;
 exports.colors = colors;
+exports.drawerVariants = drawerVariants;
 exports.fontSize = fontSize;
 exports.inputVariants = inputVariants;
+exports.modalVariants = modalVariants;
 exports.radius = radius;
 exports.selectVariants = selectVariants;
 exports.separatorVariants = separatorVariants;