@thangnqdev/ui 0.1.2 → 0.2.0

package/dist/overlays/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var react = require('react');
+var React8 = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
@@ -8,10 +8,14 @@ var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React8__default = /*#__PURE__*/_interopDefault(React8);
+
 // src/overlays/Portal.tsx
 function Portal({ children, container }) {
-  const [mounted, setMounted] = react.useState(false);
-  react.useEffect(() => {
+  const [mounted, setMounted] = React8.useState(false);
+  React8.useEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
@@ -20,44 +24,119 @@ function Portal({ children, container }) {
   if (!target) return null;
   return reactDom.createPortal(children, target);
 }
-var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function FocusTrap({ children, active = true }) {
-  const rootRef = react.useRef(null);
-  react.useEffect(() => {
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]'
+].join(", ");
+var trapStack = [];
+function FocusTrap({
+  children,
+  active = true,
+  autoFocus = true,
+  restoreFocus = true
+}) {
+  const rootRef = React8.useRef(null);
+  const previousActiveElementRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (!active) return;
+    if (typeof document !== "undefined") {
+      previousActiveElementRef.current = document.activeElement;
+    }
     const root = rootRef.current;
     if (!root) return;
-    const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (first) {
-      first.focus();
+    trapStack.push(root);
+    if (autoFocus) {
+      const timer = setTimeout(() => {
+        const focusable = root.querySelectorAll(FOCUSABLE_SELECTOR);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else if (typeof root.focus === "function") {
+          root.focus();
+        }
+      }, 0);
+      return () => clearTimeout(timer);
     }
+    return () => {
+      const idx = trapStack.indexOf(root);
+      if (idx !== -1) trapStack.splice(idx, 1);
+    };
+  }, [active, autoFocus]);
+  React8.useEffect(() => {
+    if (!active) return;
     const handleKeyDown = (e) => {
       if (e.key !== "Tab") return;
+      const root = rootRef.current;
+      if (!root) return;
+      if (trapStack.length > 0 && trapStack[trapStack.length - 1] !== root) {
+        return;
+      }
+      const focusable = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
+        (el) => el.offsetParent !== null || el.getClientRects().length > 0
+      );
+      if (focusable.length === 0) {
+        e.preventDefault();
+        root.focus();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
       if (e.shiftKey) {
-        if (document.activeElement === first) {
+        if (document.activeElement === first || !root.contains(document.activeElement)) {
           e.preventDefault();
-          last?.focus();
+          last.focus();
         }
       } else {
-        if (document.activeElement === last) {
+        if (document.activeElement === last || !root.contains(document.activeElement)) {
           e.preventDefault();
-          first?.focus();
+          first.focus();
         }
       }
     };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [active]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: "contents", children });
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      const root = rootRef.current;
+      if (root) {
+        const idx = trapStack.indexOf(root);
+        if (idx !== -1) trapStack.splice(idx, 1);
+      }
+      if (restoreFocus && previousActiveElementRef.current && typeof previousActiveElementRef.current.focus === "function") {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [active, restoreFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, tabIndex: -1, className: "contents", style: { outline: "none" }, children });
+}
+
+// src/utils/scroll-lock.ts
+var lockCount = 0;
+var previousOverflow = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  lockCount++;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = previousOverflow;
+  }
 }
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var ModalContext = react.createContext(null);
+var ModalContext = React8.createContext(null);
 function useModal() {
-  const context = react.useContext(ModalContext);
+  const context = React8.useContext(ModalContext);
   if (!context) {
     throw new Error("Modal compound components must be used within a <Modal />");
   }
@@ -68,35 +147,78 @@ function Modal({
   onClose,
   children,
   closeOnEsc = true,
-  closeOnOverlayClick = true
+  closeOnOverlayClick = true,
+  role = "dialog",
+  "aria-label": ariaLabel,
+  "aria-labelledby": customLabelledBy,
+  "aria-describedby": customDescribedBy
 }) {
-  react.useEffect(() => {
+  const generatedId = React8.useId();
+  const titleId = customLabelledBy || `modal-title-${generatedId}`;
+  const descriptionId = customDescribedBy || `modal-desc-${generatedId}`;
+  const [mountedTitleId, setMountedTitleId] = React8.useState(null);
+  const [mountedDescId, setMountedDescId] = React8.useState(null);
+  const registerTitle = React8.useCallback(
+    (id) => {
+      const activeId = id || titleId;
+      setMountedTitleId(activeId);
+      return () => setMountedTitleId(null);
+    },
+    [titleId]
+  );
+  const registerDescription = React8.useCallback(
+    (id) => {
+      const activeId = id || descriptionId;
+      setMountedDescId(activeId);
+      return () => setMountedDescId(null);
+    },
+    [descriptionId]
+  );
+  React8.useEffect(() => {
     if (!isOpen) return;
+    lockBodyScroll();
     const handleKeyDown = (e) => {
       if (closeOnEsc && e.key === "Escape") {
         onClose();
       }
     };
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = originalOverflow;
+      unlockBodyScroll();
     };
   }, [isOpen, closeOnEsc, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalContext.Provider, { value: { isOpen, onClose, closeOnOverlayClick }, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  const resolvedLabelledBy = customLabelledBy || (ariaLabel ? void 0 : mountedTitleId || void 0);
+  const resolvedDescribedBy = customDescribedBy || (mountedDescId || void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    ModalContext.Provider,
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
-      role: "dialog",
-      "aria-modal": "true",
-      children
+      value: {
+        isOpen,
+        onClose,
+        closeOnOverlayClick,
+        titleId,
+        descriptionId,
+        registerTitle,
+        registerDescription
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
+          role,
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          "aria-labelledby": resolvedLabelledBy,
+          "aria-describedby": resolvedDescribedBy,
+          children
+        }
+      ) })
     }
-  ) }) }) });
+  ) });
 }
-var ModalOverlay = react.forwardRef(
+var ModalOverlay = React8.forwardRef(
   ({ className, onClick, ...props }, ref) => {
     const { onClose, closeOnOverlayClick } = useModal();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -136,7 +258,7 @@ var modalContentVariants = classVarianceAuthority.cva(
     }
   }
 );
-var ModalContent = react.forwardRef(
+var ModalContent = React8.forwardRef(
   ({ className, size, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -150,37 +272,65 @@ var ModalContent = react.forwardRef(
   }
 );
 ModalContent.displayName = "ModalContent";
-var ModalHeader = react.forwardRef(
+var ModalHeader = React8.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 mb-4", className), ...props, children });
   }
 );
 ModalHeader.displayName = "ModalHeader";
-var ModalTitle = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className), ...props, children });
+var ModalTitle = React8.forwardRef(
+  ({ className, children, id, ...props }, ref) => {
+    const { titleId, registerTitle } = useModal();
+    const activeId = id || titleId;
+    React8.useEffect(() => {
+      return registerTitle(activeId);
+    }, [registerTitle, activeId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        ref,
+        id: activeId,
+        className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className),
+        ...props,
+        children
+      }
+    );
   }
 );
 ModalTitle.displayName = "ModalTitle";
-var ModalDescription = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-[var(--ui-text-muted)]", className), ...props, children });
+var ModalDescription = React8.forwardRef(
+  ({ className, children, id, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useModal();
+    const activeId = id || descriptionId;
+    React8.useEffect(() => {
+      return registerDescription(activeId);
+    }, [registerDescription, activeId]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: activeId,
+        className: cn("text-sm text-[var(--ui-text-muted)]", className),
+        ...props,
+        children
+      }
+    );
   }
 );
 ModalDescription.displayName = "ModalDescription";
-var ModalBody = react.forwardRef(
+var ModalBody = React8.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("py-2", className), ...props, children });
   }
 );
 ModalBody.displayName = "ModalBody";
-var ModalFooter = react.forwardRef(
+var ModalFooter = React8.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center justify-end gap-3 mt-6 pt-4 border-t border-[var(--ui-border-subtle)]", className), ...props, children });
   }
 );
 ModalFooter.displayName = "ModalFooter";
-var ModalCloseButton = react.forwardRef(
+var ModalCloseButton = React8.forwardRef(
   ({ className, onClick, ...props }, ref) => {
     const { onClose } = useModal();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -194,7 +344,7 @@ var ModalCloseButton = react.forwardRef(
         },
         "aria-label": "Close dialog",
         className: cn(
-          "absolute top-4 right-4 p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors",
+          "absolute top-4 right-4 p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
           className
         ),
         ...props,
@@ -236,7 +386,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = react.forwardRef(
+var Button = React8.forwardRef(
   ({
     className,
     variant,
@@ -289,35 +439,46 @@ function AlertDialog({
   confirmText = "Confirm",
   cancelText = "Cancel",
   variant = "danger",
-  isLoading = false
+  isLoading = false,
+  closeOnOverlayClick = false
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size: "sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ModalCloseButton, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
-        /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: isLoading, children: cancelText }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: variant === "danger" ? "danger" : "primary",
-            size: "sm",
-            loading: isLoading,
-            onClick: onConfirm,
-            children: confirmText
-          }
-        )
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      role: "alertdialog",
+      closeOnOverlayClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalContent, { size: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ModalCloseButton, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ModalFooter, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: isLoading, autoFocus: true, children: cancelText }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                variant: variant === "danger" ? "danger" : "primary",
+                size: "sm",
+                loading: isLoading,
+                onClick: onConfirm,
+                children: confirmText
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
-var DrawerContext = react.createContext(null);
+AlertDialog.displayName = "AlertDialog";
+var DrawerContext = React8.createContext(null);
 function useDrawer() {
-  const context = react.useContext(DrawerContext);
+  const context = React8.useContext(DrawerContext);
   if (!context) {
     throw new Error("Drawer compound components must be used within a <Drawer />");
   }
@@ -344,54 +505,68 @@ function Drawer({
   onClose,
   placement = "right",
   children,
-  closeOnEsc = true
+  closeOnEsc = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": customLabelledBy
 }) {
-  react.useEffect(() => {
+  const generatedId = React8.useId();
+  const titleId = customLabelledBy || `drawer-title-${generatedId}`;
+  React8.useEffect(() => {
     if (!isOpen) return;
+    lockBodyScroll();
     const handleKeyDown = (e) => {
       if (closeOnEsc && e.key === "Escape") {
         onClose();
       }
     };
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
     window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = originalOverflow;
+      unlockBodyScroll();
     };
   }, [isOpen, closeOnEsc, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        onClick: onClose,
-        className: "fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(drawerVariants({ placement })), children })
-  ] }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { isOpen, onClose, titleId }, children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 overflow-hidden",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabel ? void 0 : titleId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            onClick: onClose,
+            className: "fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(drawerVariants({ placement })), children })
+      ]
+    }
+  ) }) }) });
 }
-var DrawerHeader = react.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { onClose } = useDrawer();
+var DrawerHeader = React8.forwardRef(
+  ({ className, children, id, ...props }, ref) => {
+    const { onClose, titleId } = useDrawer();
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
+        id: id || titleId,
         className: cn("flex items-center justify-between p-5 border-b border-[var(--ui-border-subtle)]", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 font-semibold text-base text-[var(--ui-text-primary)]", children }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               onClick: onClose,
               "aria-label": "Close drawer",
-              className: "p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors ml-4",
+              className: "p-1.5 rounded-full text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors ml-4 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
             }
           )
@@ -401,13 +576,13 @@ var DrawerHeader = react.forwardRef(
   }
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerBody = react.forwardRef(
+var DrawerBody = React8.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex-1 p-5 overflow-y-auto", className), ...props, children });
   }
 );
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = react.forwardRef(
+var DrawerFooter = React8.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -442,40 +617,57 @@ function Tooltip({
   children,
   placement = "top",
   delayDuration = 200,
-  className
+  className,
+  id: customId
 }) {
-  const [isVisible, setIsVisible] = react.useState(false);
-  const [coords, setCoords] = react.useState({ top: 0, left: 0 });
-  const timeoutRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
+  const generatedId = React8.useId();
+  const tooltipId = customId || `tooltip-${generatedId}`;
+  const [isVisible, setIsVisible] = React8.useState(false);
+  const [coords, setCoords] = React8.useState({ top: 0, left: 0 });
+  const timeoutRef = React8.useRef(null);
+  const triggerRef = React8.useRef(null);
+  const calculatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      let top = 0;
+      let left = 0;
+      if (placement === "top") {
+        top = rect.top + window.scrollY;
+        left = rect.left + rect.width / 2 + window.scrollX;
+      } else if (placement === "bottom") {
+        top = rect.bottom + window.scrollY;
+        left = rect.left + rect.width / 2 + window.scrollX;
+      } else if (placement === "left") {
+        top = rect.top + rect.height / 2 + window.scrollY;
+        left = rect.left + window.scrollX;
+      } else if (placement === "right") {
+        top = rect.top + rect.height / 2 + window.scrollY;
+        left = rect.right + window.scrollX;
+      }
+      setCoords({ top, left });
+    }
+  };
   const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
-      if (triggerRef.current) {
-        const rect = triggerRef.current.getBoundingClientRect();
-        let top = 0;
-        let left = 0;
-        if (placement === "top") {
-          top = rect.top + window.scrollY;
-          left = rect.left + rect.width / 2 + window.scrollX;
-        } else if (placement === "bottom") {
-          top = rect.bottom + window.scrollY;
-          left = rect.left + rect.width / 2 + window.scrollX;
-        } else if (placement === "left") {
-          top = rect.top + rect.height / 2 + window.scrollY;
-          left = rect.left + window.scrollX;
-        } else if (placement === "right") {
-          top = rect.top + rect.height / 2 + window.scrollY;
-          left = rect.right + window.scrollX;
-        }
-        setCoords({ top, left });
-        setIsVisible(true);
-      }
+      calculatePosition();
+      setIsVisible(true);
     }, delayDuration);
   };
   const handleMouseLeave = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
+  React8.useEffect(() => {
+    if (!isVisible) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -485,6 +677,7 @@ function Tooltip({
         onMouseLeave: handleMouseLeave,
         onFocus: handleMouseEnter,
         onBlur: handleMouseLeave,
+        "aria-describedby": isVisible ? tooltipId : void 0,
         className: "inline-flex cursor-pointer",
         children
       }
@@ -492,28 +685,76 @@ function Tooltip({
     isVisible && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        style: { top: `${coords.top}px`, left: `${coords.left}px`, position: "absolute" },
+        id: tooltipId,
         role: "tooltip",
+        style: { top: `${coords.top}px`, left: `${coords.left}px`, position: "absolute" },
         className: cn(tooltipVariants({ placement }), className),
         children: content
       }
     ) })
   ] });
 }
+function useControllableState({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  name
+}) {
+  const isControlled = controlledValue !== void 0;
+  const isControlledRef = React8.useRef(isControlled);
+  React8.useEffect(() => {
+    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && isControlledRef.current !== isControlled) {
+      console.warn(
+        `[${name}] is changing from ${isControlledRef.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Check the value/defaultValue props.`
+      );
+    }
+    isControlledRef.current = isControlled;
+  }, [isControlled, name]);
+  const [internalState, setInternalState] = React8.useState(defaultValue);
+  const value = isControlled ? controlledValue : internalState;
+  const setValue = React8.useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setInternalState(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, value, onChange]
+  );
+  return [value, setValue, isControlled];
+}
 var Popover = ({
   trigger,
   children,
-  isOpen: controlledIsOpen,
+  open: controlledOpen,
+  isOpen: legacyIsOpen,
+  defaultOpen = false,
+  onOpenChange,
   onClose,
   placement = "bottom",
   className
 }) => {
-  const [internalIsOpen, setInternalIsOpen] = react.useState(false);
-  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const [coords, setCoords] = react.useState({ top: 0, left: 0 });
-  const triggerRef = react.useRef(null);
-  const popoverRef = react.useRef(null);
-  const calculatePosition = () => {
+  const activeControlled = controlledOpen !== void 0 ? controlledOpen : legacyIsOpen;
+  const handleStateChange = React8.useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+      if (!nextOpen) {
+        onClose?.();
+      }
+    },
+    [onOpenChange, onClose]
+  );
+  const [isOpen, setIsOpen] = useControllableState({
+    value: activeControlled,
+    defaultValue: defaultOpen,
+    onChange: handleStateChange,
+    name: "Popover"
+  });
+  const [coords, setCoords] = React8.useState({ top: 0, left: 0 });
+  const triggerRef = React8.useRef(null);
+  const popoverRef = React8.useRef(null);
+  const calculatePosition = React8.useCallback(() => {
     if (triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
       let top = 0;
@@ -533,45 +774,52 @@ var Popover = ({
       }
       setCoords({ top, left });
     }
-  };
+  }, [placement]);
   const handleToggle = () => {
     if (!isOpen) {
       calculatePosition();
     }
-    if (controlledIsOpen !== void 0) {
-      if (isOpen) onClose?.();
-    } else {
-      setInternalIsOpen(!internalIsOpen);
-    }
+    setIsOpen(!isOpen);
   };
-  react.useEffect(() => {
+  React8.useEffect(() => {
     if (isOpen) {
       calculatePosition();
     }
-  }, [isOpen]);
-  react.useEffect(() => {
+  }, [isOpen, calculatePosition]);
+  React8.useEffect(() => {
+    if (!isOpen) return;
     const handleOutside = (e) => {
       if (popoverRef.current && !popoverRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
-        if (controlledIsOpen !== void 0) {
-          onClose?.();
-        } else {
-          setInternalIsOpen(false);
-        }
+        setIsOpen(false);
       }
     };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleOutside);
-      window.addEventListener("resize", calculatePosition);
-      window.addEventListener("scroll", calculatePosition);
-    }
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
     return () => {
       document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition);
     };
-  }, [isOpen, controlledIsOpen, onClose]);
+  }, [isOpen, setIsOpen, calculatePosition]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleToggle, className: "w-full inline-block cursor-pointer", children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleToggle,
+        className: "w-full inline-block cursor-pointer",
+        "aria-expanded": isOpen,
+        children: trigger
+      }
+    ),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -592,9 +840,9 @@ var Popover = ({
     ) })
   ] });
 };
-var ToastContext = react.createContext(null);
+var ToastContext = React8.createContext(null);
 function useToast() {
-  const context = react.useContext(ToastContext);
+  const context = React8.useContext(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToasterProvider");
   }
@@ -622,12 +870,44 @@ var toastIcons = {
   warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "w-5 h-5 text-[var(--ui-warning)] flex-shrink-0" }),
   error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "w-5 h-5 text-[var(--ui-error)] flex-shrink-0" })
 };
+var Toast = React8__default.default.forwardRef(
+  ({ className, title, description, type = "info", onDismiss, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(toastVariants({ type }), className),
+        ...props,
+        children: [
+          toastIcons[type || "info"],
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-[var(--ui-text-primary)]", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
+          ] }),
+          onDismiss && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              "aria-label": "Dismiss toast",
+              className: "p-1 rounded text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] transition-colors cursor-pointer",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
 function ToasterProvider({ children, position = "bottom-right" }) {
-  const [toasts, setToasts] = react.useState([]);
-  const dismiss = react.useCallback((id) => {
+  const [toasts, setToasts] = React8.useState([]);
+  const dismiss = React8.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const toast = react.useCallback(
+  const toast = React8.useCallback(
     ({ id = Math.random().toString(36).slice(2, 9), title, description, type = "info", duration = 4e3 }) => {
       const item = { id, title, description, type, duration };
       setToasts((prev) => [...prev, item]);
@@ -685,7 +965,7 @@ function ToasterProvider({ children, position = "bottom-right" }) {
     ) })
   ] });
 }
-var BottomSheet = react.forwardRef(
+var BottomSheet = React8.forwardRef(
   ({
     isOpen,
     onClose,
@@ -694,73 +974,93 @@ var BottomSheet = react.forwardRef(
     description,
     className,
     showHandle = true,
-    maxHeight = "max-h-[85vh]"
+    maxHeight = "max-h-[85vh]",
+    "aria-label": ariaLabel
   }, ref) => {
-    react.useRef(null);
-    react.useEffect(() => {
+    const generatedId = React8.useId();
+    const titleId = `bottomsheet-title-${generatedId}`;
+    const descId = `bottomsheet-desc-${generatedId}`;
+    React8.useEffect(() => {
+      if (!isOpen) return;
+      lockBodyScroll();
       const handleKeyDown = (e) => {
-        if (e.key === "Escape" && isOpen) {
+        if (e.key === "Escape") {
           onClose();
         }
       };
       window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        unlockBodyScroll();
+      };
     }, [isOpen, onClose]);
     if (!isOpen) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col justify-end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          onClick: onClose,
-          className: "fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-in fade-in duration-300",
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref,
-          className: cn(
-            "relative z-50 w-full max-w-2xl mx-auto rounded-t-[2rem] border-t border-x border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] backdrop-blur-3xl shadow-2xl overflow-hidden flex flex-col transition-transform animate-in slide-in-from-bottom duration-300",
-            maxHeight,
-            className
+    return /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex flex-col justify-end",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        "aria-labelledby": title ? titleId : void 0,
+        "aria-describedby": description ? descId : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              onClick: onClose,
+              className: "fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-in fade-in duration-300",
+              "aria-hidden": "true"
+            }
           ),
-          children: [
-            showHandle && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: onClose,
-                className: "w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing",
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-[var(--ui-text-muted)]/40 hover:bg-[var(--ui-text-muted)] transition-colors" })
-              }
-            ),
-            (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
-                description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClose,
-                  className: "p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 overflow-y-auto flex-1 space-y-4", children })
-          ]
-        }
-      )
-    ] }) }) });
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref,
+              className: cn(
+                "relative z-50 w-full max-w-2xl mx-auto rounded-t-[2rem] border-t border-x border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] backdrop-blur-3xl shadow-2xl overflow-hidden flex flex-col transition-transform animate-in slide-in-from-bottom duration-300",
+                maxHeight,
+                className
+              ),
+              children: [
+                showHandle && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    onClick: onClose,
+                    className: "w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-1.5 rounded-full bg-[var(--ui-text-muted)]/40 hover:bg-[var(--ui-text-muted)] transition-colors" })
+                  }
+                ),
+                (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                    title && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: titleId, className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
+                    description && /* @__PURE__ */ jsxRuntime.jsx("p", { id: descId, className: "text-xs text-[var(--ui-text-muted)]", children: description })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClose,
+                      "aria-label": "Close sheet",
+                      className: "p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 overflow-y-auto flex-1 space-y-4", children })
+              ]
+            }
+          )
+        ]
+      }
+    ) }) });
   }
 );
 BottomSheet.displayName = "BottomSheet";
 var BottomSheetHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 pb-2", className), ...props, children });
 var BottomSheetBody = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 py-2 overflow-y-auto", className), ...props, children });
 var BottomSheetFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 pt-3 border-t border-[var(--ui-border-subtle)] flex items-center justify-end gap-3", className), ...props, children });
-var Kbd = react.forwardRef(
+var Kbd = React8.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "kbd",
@@ -791,14 +1091,21 @@ var ContextMenuItem = ({
     "div",
     {
       role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
       "aria-disabled": disabled,
       onClick: () => {
         if (!disabled) onSelect?.();
       },
+      onKeyDown: (e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          onSelect?.();
+        }
+      },
       className: cn(
-        "flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none",
+        "flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none focus:outline-none focus:bg-[var(--ui-bg-tertiary)]",
         disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-        destructive ? "text-rose-500 hover:bg-rose-500/10" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]",
+        destructive ? "text-rose-500 hover:bg-rose-500/10 focus:bg-rose-500/10" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]",
         className
       ),
       ...props,
@@ -813,11 +1120,11 @@ var ContextMenuItem = ({
   );
 };
 var ContextMenuSeparator = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px my-1 bg-[var(--ui-border-subtle)]", role: "separator" });
-var ContextMenu = react.forwardRef(
+var ContextMenu = React8.forwardRef(
   ({ children, menuContent, className }, ref) => {
-    const [isOpen, setIsOpen] = react.useState(false);
-    const [position, setPosition] = react.useState({ x: 0, y: 0 });
-    const menuRef = react.useRef(null);
+    const [isOpen, setIsOpen] = React8.useState(false);
+    const [position, setPosition] = React8.useState({ x: 0, y: 0 });
+    const menuRef = React8.useRef(null);
     const handleContextMenu = (e) => {
       e.preventDefault();
       const x = Math.min(window.innerWidth - 220, e.clientX);
@@ -825,21 +1132,48 @@ var ContextMenu = react.forwardRef(
       setPosition({ x, y });
       setIsOpen(true);
     };
-    react.useEffect(() => {
+    React8.useEffect(() => {
+      if (!isOpen) return;
+      const timer = setTimeout(() => {
+        const firstItem = menuRef.current?.querySelector('[role="menuitem"]:not([aria-disabled="true"])');
+        firstItem?.focus();
+      }, 10);
       const handleClickOutside = (e) => {
         if (menuRef.current && !menuRef.current.contains(e.target)) {
           setIsOpen(false);
         }
       };
       const handleKeyDown = (e) => {
-        if (e.key === "Escape") setIsOpen(false);
+        if (!menuRef.current) return;
+        const items = Array.from(
+          menuRef.current.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+        );
+        if (items.length === 0) return;
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === "End") {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          setIsOpen(false);
+        }
       };
-      if (isOpen) {
-        window.addEventListener("click", handleClickOutside);
-        window.addEventListener("contextmenu", handleClickOutside);
-        window.addEventListener("keydown", handleKeyDown);
-      }
+      window.addEventListener("click", handleClickOutside);
+      window.addEventListener("contextmenu", handleClickOutside);
+      window.addEventListener("keydown", handleKeyDown);
       return () => {
+        clearTimeout(timer);
         window.removeEventListener("click", handleClickOutside);
         window.removeEventListener("contextmenu", handleClickOutside);
         window.removeEventListener("keydown", handleKeyDown);
@@ -851,9 +1185,11 @@ var ContextMenu = react.forwardRef(
         "div",
         {
           ref: menuRef,
+          role: "menu",
+          tabIndex: -1,
           style: { top: `${position.y}px`, left: `${position.x}px` },
           onClick: () => setIsOpen(false),
-          className: "fixed z-50 min-w-48 p-1.5 rounded-2xl bg-[var(--ui-bg-surface)]/90 backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl space-y-0.5 animate-in fade-in zoom-in-95 duration-150",
+          className: "fixed z-50 min-w-48 p-1.5 rounded-2xl bg-[var(--ui-bg-surface)]/90 backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl space-y-0.5 animate-in fade-in zoom-in-95 duration-150 focus:outline-none",
           children: menuContent
         }
       ) })
@@ -861,13 +1197,13 @@ var ContextMenu = react.forwardRef(
   }
 );
 ContextMenu.displayName = "ContextMenu";
-var HoverCard = react.forwardRef(
+var HoverCard = React8.forwardRef(
   ({ trigger, content, openDelay = 200, closeDelay = 250, className }, ref) => {
-    const [isOpen, setIsOpen] = react.useState(false);
-    const [coords, setCoords] = react.useState({ top: 0, left: 0 });
-    const triggerRef = react.useRef(null);
-    const openTimerRef = react.useRef(null);
-    const closeTimerRef = react.useRef(null);
+    const [isOpen, setIsOpen] = React8.useState(false);
+    const [coords, setCoords] = React8.useState({ top: 0, left: 0 });
+    const triggerRef = React8.useRef(null);
+    const openTimerRef = React8.useRef(null);
+    const closeTimerRef = React8.useRef(null);
     const handleMouseEnter = () => {
       clearTimeout(closeTimerRef.current);
       openTimerRef.current = setTimeout(() => {
@@ -941,6 +1277,7 @@ exports.ModalOverlay = ModalOverlay;
 exports.ModalTitle = ModalTitle;
 exports.Popover = Popover;
 exports.Portal = Portal;
+exports.Toast = Toast;
 exports.ToasterProvider = ToasterProvider;
 exports.Tooltip = Tooltip;
 exports.drawerVariants = drawerVariants;