@thangnqdev/ui 0.1.2 → 0.2.0

package/dist/{chunk-5FZ6ZFII.js → chunk-PC5SZFZC.js}

@@ -1,10 +1,10 @@
-import { Popover } from './chunk-H3LCNPMC.js';
-import { FocusTrap } from './chunk-LBUBXUYQ.js';
-import { Portal } from './chunk-IABPUCAQ.js';
-import { Kbd } from './chunk-EU2LPUYP.js';
-import { Button } from './chunk-66VWUJEI.js';
-import { __export, cn } from './chunk-4S6L5V7X.js';
-import { createContext, useContext, useEffect, forwardRef, useState, useRef, useCallback } from 'react';
+import { Popover } from './chunk-YOCGBORV.js';
+import { FocusTrap } from './chunk-ZEDXARXW.js';
+import { Portal } from './chunk-ADO3SVUA.js';
+import { Kbd } from './chunk-I5O2WCGF.js';
+import { Button } from './chunk-I2FQBMVW.js';
+import { __export, cn } from './chunk-2YJBW4E2.js';
+import React4, { createContext, useContext, useId, useState, useCallback, useEffect, forwardRef, useRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { X, AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -37,6 +37,7 @@ __export(overlays_exports, {
   ModalTitle: () => ModalTitle,
   Popover: () => Popover,
   Portal: () => Portal,
+  Toast: () => Toast,
   ToasterProvider: () => ToasterProvider,
   Tooltip: () => Tooltip,
   drawerVariants: () => drawerVariants,
@@ -47,6 +48,25 @@ __export(overlays_exports, {
   useModal: () => useModal,
   useToast: () => useToast
 });
+
+// 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;
+  }
+}
 var ModalContext = createContext(null);
 function useModal() {
   const context = useContext(ModalContext);
@@ -60,33 +80,76 @@ function Modal({
   onClose,
   children,
   closeOnEsc = true,
-  closeOnOverlayClick = true
+  closeOnOverlayClick = true,
+  role = "dialog",
+  "aria-label": ariaLabel,
+  "aria-labelledby": customLabelledBy,
+  "aria-describedby": customDescribedBy
 }) {
+  const generatedId = useId();
+  const titleId = customLabelledBy || `modal-title-${generatedId}`;
+  const descriptionId = customDescribedBy || `modal-desc-${generatedId}`;
+  const [mountedTitleId, setMountedTitleId] = useState(null);
+  const [mountedDescId, setMountedDescId] = useState(null);
+  const registerTitle = useCallback(
+    (id) => {
+      const activeId = id || titleId;
+      setMountedTitleId(activeId);
+      return () => setMountedTitleId(null);
+    },
+    [titleId]
+  );
+  const registerDescription = useCallback(
+    (id) => {
+      const activeId = id || descriptionId;
+      setMountedDescId(activeId);
+      return () => setMountedDescId(null);
+    },
+    [descriptionId]
+  );
   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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ModalContext.Provider, { value: { isOpen, onClose, closeOnOverlayClick }, children: /* @__PURE__ */ jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsx(
-    "div",
+  const resolvedLabelledBy = customLabelledBy || (ariaLabel ? void 0 : mountedTitleId || void 0);
+  const resolvedDescribedBy = customDescribedBy || (mountedDescId || void 0);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ 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__ */ jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ 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 = forwardRef(
   ({ className, onClick, ...props }, ref) => {
@@ -149,14 +212,42 @@ var ModalHeader = forwardRef(
 );
 ModalHeader.displayName = "ModalHeader";
 var ModalTitle = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("h2", { ref, className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className), ...props, children });
+  ({ className, children, id, ...props }, ref) => {
+    const { titleId, registerTitle } = useModal();
+    const activeId = id || titleId;
+    useEffect(() => {
+      return registerTitle(activeId);
+    }, [registerTitle, activeId]);
+    return /* @__PURE__ */ 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 = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-[var(--ui-text-muted)]", className), ...props, children });
+  ({ className, children, id, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useModal();
+    const activeId = id || descriptionId;
+    useEffect(() => {
+      return registerDescription(activeId);
+    }, [registerDescription, activeId]);
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: activeId,
+        className: cn("text-sm text-[var(--ui-text-muted)]", className),
+        ...props,
+        children
+      }
+    );
   }
 );
 ModalDescription.displayName = "ModalDescription";
@@ -186,7 +277,7 @@ var ModalCloseButton = 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,
@@ -205,32 +296,43 @@ function AlertDialog({
   confirmText = "Confirm",
   cancelText = "Cancel",
   variant = "danger",
-  isLoading = false
+  isLoading = false,
+  closeOnOverlayClick = false
 }) {
-  return /* @__PURE__ */ jsxs(Modal, { isOpen, onClose, children: [
-    /* @__PURE__ */ jsx(ModalOverlay, {}),
-    /* @__PURE__ */ jsxs(ModalContent, { size: "sm", children: [
-      /* @__PURE__ */ jsx(ModalCloseButton, {}),
-      /* @__PURE__ */ jsxs(ModalHeader, { children: [
-        /* @__PURE__ */ jsx(ModalTitle, { children: title }),
-        /* @__PURE__ */ jsx(ModalDescription, { children: description })
-      ] }),
-      /* @__PURE__ */ jsxs(ModalFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: isLoading, children: cancelText }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: variant === "danger" ? "danger" : "primary",
-            size: "sm",
-            loading: isLoading,
-            onClick: onConfirm,
-            children: confirmText
-          }
-        )
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      role: "alertdialog",
+      closeOnOverlayClick,
+      children: [
+        /* @__PURE__ */ jsx(ModalOverlay, {}),
+        /* @__PURE__ */ jsxs(ModalContent, { size: "sm", children: [
+          /* @__PURE__ */ jsx(ModalCloseButton, {}),
+          /* @__PURE__ */ jsxs(ModalHeader, { children: [
+            /* @__PURE__ */ jsx(ModalTitle, { children: title }),
+            /* @__PURE__ */ jsx(ModalDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsxs(ModalFooter, { children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onClose, disabled: isLoading, autoFocus: true, children: cancelText }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: variant === "danger" ? "danger" : "primary",
+                size: "sm",
+                loading: isLoading,
+                onClick: onConfirm,
+                children: confirmText
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
+AlertDialog.displayName = "AlertDialog";
 var DrawerContext = createContext(null);
 function useDrawer() {
   const context = useContext(DrawerContext);
@@ -260,54 +362,68 @@ function Drawer({
   onClose,
   placement = "right",
   children,
-  closeOnEsc = true
+  closeOnEsc = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": customLabelledBy
 }) {
+  const generatedId = useId();
+  const titleId = customLabelledBy || `drawer-title-${generatedId}`;
   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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { isOpen, onClose }, children: /* @__PURE__ */ jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
-    /* @__PURE__ */ 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__ */ jsx("div", { className: cn(drawerVariants({ placement })), children })
-  ] }) }) }) });
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { isOpen, onClose, titleId }, children: /* @__PURE__ */ jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: cn(drawerVariants({ placement })), children })
+      ]
+    }
+  ) }) }) });
 }
 var DrawerHeader = forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { onClose } = useDrawer();
+  ({ className, children, id, ...props }, ref) => {
+    const { onClose, titleId } = useDrawer();
     return /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 font-semibold text-base text-[var(--ui-text-primary)]", children }),
           /* @__PURE__ */ 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__ */ jsx(X, { className: "w-4 h-4" })
             }
           )
@@ -358,40 +474,57 @@ function Tooltip({
   children,
   placement = "top",
   delayDuration = 200,
-  className
+  className,
+  id: customId
 }) {
+  const generatedId = useId();
+  const tooltipId = customId || `tooltip-${generatedId}`;
   const [isVisible, setIsVisible] = useState(false);
   const [coords, setCoords] = useState({ top: 0, left: 0 });
   const timeoutRef = useRef(null);
   const triggerRef = 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);
   };
+  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__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -401,6 +534,7 @@ function Tooltip({
         onMouseLeave: handleMouseLeave,
         onFocus: handleMouseEnter,
         onBlur: handleMouseLeave,
+        "aria-describedby": isVisible ? tooltipId : void 0,
         className: "inline-flex cursor-pointer",
         children
       }
@@ -408,8 +542,9 @@ function Tooltip({
     isVisible && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ 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
       }
@@ -446,6 +581,38 @@ var toastIcons = {
   warning: /* @__PURE__ */ jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--ui-warning)] flex-shrink-0" }),
   error: /* @__PURE__ */ jsx(AlertCircle, { className: "w-5 h-5 text-[var(--ui-error)] flex-shrink-0" })
 };
+var Toast = React4.forwardRef(
+  ({ className, title, description, type = "info", onDismiss, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(toastVariants({ type }), className),
+        ...props,
+        children: [
+          toastIcons[type || "info"],
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-[var(--ui-text-primary)]", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
+          ] }),
+          onDismiss && /* @__PURE__ */ 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__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Toast.displayName = "Toast";
 function ToasterProvider({ children, position = "bottom-right" }) {
   const [toasts, setToasts] = useState([]);
   const dismiss = useCallback((id) => {
@@ -518,66 +685,86 @@ var BottomSheet = forwardRef(
     description,
     className,
     showHandle = true,
-    maxHeight = "max-h-[85vh]"
+    maxHeight = "max-h-[85vh]",
+    "aria-label": ariaLabel
   }, ref) => {
-    useRef(null);
+    const generatedId = useId();
+    const titleId = `bottomsheet-title-${generatedId}`;
+    const descId = `bottomsheet-desc-${generatedId}`;
     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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(FocusTrap, { active: isOpen, children: /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col justify-end", children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(FocusTrap, { active: isOpen, restoreFocus: true, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(
-              "div",
-              {
-                onClick: onClose,
-                className: "w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing",
-                children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]", children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                title && /* @__PURE__ */ jsx("h3", { className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
-                description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: description })
-              ] }),
-              /* @__PURE__ */ 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__ */ jsx(X, { className: "w-4 h-4" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "p-6 overflow-y-auto flex-1 space-y-4", children })
-          ]
-        }
-      )
-    ] }) }) });
+          /* @__PURE__ */ 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__ */ jsx(
+                  "div",
+                  {
+                    onClick: onClose,
+                    className: "w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing",
+                    children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]", children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    title && /* @__PURE__ */ jsx("h3", { id: titleId, className: "text-base font-bold tracking-tight text-[var(--ui-text-primary)]", children: title }),
+                    description && /* @__PURE__ */ jsx("p", { id: descId, className: "text-xs text-[var(--ui-text-muted)]", children: description })
+                  ] }),
+                  /* @__PURE__ */ 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__ */ jsx(X, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "p-6 overflow-y-auto flex-1 space-y-4", children })
+              ]
+            }
+          )
+        ]
+      }
+    ) }) });
   }
 );
 BottomSheet.displayName = "BottomSheet";
@@ -598,14 +785,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,
@@ -633,20 +827,47 @@ var ContextMenu = forwardRef(
       setIsOpen(true);
     };
     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);
@@ -658,9 +879,11 @@ var ContextMenu = 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
         }
       ) })
@@ -723,6 +946,6 @@ var HoverCard = forwardRef(
 );
 HoverCard.displayName = "HoverCard";
 
-export { AlertDialog, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader, ContextMenu, ContextMenuItem, ContextMenuSeparator, Drawer, DrawerBody, DrawerFooter, DrawerHeader, HoverCard, Modal, ModalBody, ModalCloseButton, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalTitle, ToasterProvider, Tooltip, drawerVariants, modalContentVariants, overlays_exports, toastVariants, tooltipVariants, useDrawer, useModal, useToast };
-//# sourceMappingURL=chunk-5FZ6ZFII.js.map
-//# sourceMappingURL=chunk-5FZ6ZFII.js.map
+export { AlertDialog, BottomSheet, BottomSheetBody, BottomSheetFooter, BottomSheetHeader, ContextMenu, ContextMenuItem, ContextMenuSeparator, Drawer, DrawerBody, DrawerFooter, DrawerHeader, HoverCard, Modal, ModalBody, ModalCloseButton, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalTitle, Toast, ToasterProvider, Tooltip, drawerVariants, modalContentVariants, overlays_exports, toastVariants, tooltipVariants, useDrawer, useModal, useToast };
+//# sourceMappingURL=chunk-PC5SZFZC.js.map
+//# sourceMappingURL=chunk-PC5SZFZC.js.map