@thangnqdev/ui 0.1.0

package/dist/chunk-5FZ6ZFII.js

@@ -0,0 +1,728 @@
+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 { cva } from 'class-variance-authority';
+import { X, AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/overlays/index.ts
+var overlays_exports = {};
+__export(overlays_exports, {
+  AlertDialog: () => AlertDialog,
+  BottomSheet: () => BottomSheet,
+  BottomSheetBody: () => BottomSheetBody,
+  BottomSheetFooter: () => BottomSheetFooter,
+  BottomSheetHeader: () => BottomSheetHeader,
+  ContextMenu: () => ContextMenu,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  Drawer: () => Drawer,
+  DrawerBody: () => DrawerBody,
+  DrawerFooter: () => DrawerFooter,
+  DrawerHeader: () => DrawerHeader,
+  FocusTrap: () => FocusTrap,
+  HoverCard: () => HoverCard,
+  Modal: () => Modal,
+  ModalBody: () => ModalBody,
+  ModalCloseButton: () => ModalCloseButton,
+  ModalContent: () => ModalContent,
+  ModalDescription: () => ModalDescription,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
+  ModalOverlay: () => ModalOverlay,
+  ModalTitle: () => ModalTitle,
+  Popover: () => Popover,
+  Portal: () => Portal,
+  ToasterProvider: () => ToasterProvider,
+  Tooltip: () => Tooltip,
+  drawerVariants: () => drawerVariants,
+  modalContentVariants: () => modalContentVariants,
+  toastVariants: () => toastVariants,
+  tooltipVariants: () => tooltipVariants,
+  useDrawer: () => useDrawer,
+  useModal: () => useModal,
+  useToast: () => useToast
+});
+var ModalContext = createContext(null);
+function useModal() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal compound components must be used within a <Modal />");
+  }
+  return context;
+}
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  closeOnEsc = true,
+  closeOnOverlayClick = true
+}) {
+  useEffect(() => {
+    if (!isOpen) return;
+    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;
+    };
+  }, [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",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
+      role: "dialog",
+      "aria-modal": "true",
+      children
+    }
+  ) }) }) });
+}
+var ModalOverlay = forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose, closeOnOverlayClick } = useModal();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        onClick: (e) => {
+          onClick?.(e);
+          if (closeOnOverlayClick) onClose();
+        },
+        className: cn(
+          "fixed inset-0 bg-[var(--ui-bg-overlay)] backdrop-blur-sm transition-opacity animate-in fade-in duration-200",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ModalOverlay.displayName = "ModalOverlay";
+var modalContentVariants = cva(
+  "relative w-full max-w-lg rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-6 text-[var(--ui-text-primary)] shadow-2xl transition-all animate-in zoom-in-95 duration-200 z-10",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl",
+        "2xl": "max-w-2xl",
+        full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var ModalContent = forwardRef(
+  ({ className, size, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(modalContentVariants({ size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalContent.displayName = "ModalContent";
+var ModalHeader = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 mb-4", className), ...props, children });
+  }
+);
+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 });
+  }
+);
+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 });
+  }
+);
+ModalDescription.displayName = "ModalDescription";
+var ModalBody = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("py-2", className), ...props, children });
+  }
+);
+ModalBody.displayName = "ModalBody";
+var ModalFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ 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 = forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose } = useModal();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: (e) => {
+          onClick?.(e);
+          onClose();
+        },
+        "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",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+      }
+    );
+  }
+);
+ModalCloseButton.displayName = "ModalCloseButton";
+function AlertDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "danger",
+  isLoading = 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
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var DrawerContext = createContext(null);
+function useDrawer() {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error("Drawer compound components must be used within a <Drawer />");
+  }
+  return context;
+}
+var drawerVariants = cva(
+  "fixed z-50 bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border-[var(--ui-border-default)] shadow-2xl transition-transform duration-300 ease-in-out flex flex-col",
+  {
+    variants: {
+      placement: {
+        right: "inset-y-0 right-0 h-full w-full sm:max-w-md border-l animate-in slide-in-from-right",
+        left: "inset-y-0 left-0 h-full w-full sm:max-w-md border-r animate-in slide-in-from-left",
+        top: "inset-x-0 top-0 w-full max-h-[80vh] border-b animate-in slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 w-full max-h-[80vh] border-t rounded-t-[var(--ui-radius-xl)] animate-in slide-in-from-bottom"
+      }
+    },
+    defaultVariants: {
+      placement: "right"
+    }
+  }
+);
+function Drawer({
+  isOpen,
+  onClose,
+  placement = "right",
+  children,
+  closeOnEsc = true
+}) {
+  useEffect(() => {
+    if (!isOpen) return;
+    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;
+    };
+  }, [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 })
+  ] }) }) }) });
+}
+var DrawerHeader = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { onClose } = useDrawer();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        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(
+            "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",
+              children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerBody = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 p-5 overflow-y-auto", className), ...props, children });
+  }
+);
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("p-4 border-t border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)] flex items-center justify-end gap-3", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DrawerFooter.displayName = "DrawerFooter";
+var tooltipVariants = cva(
+  "z-50 overflow-hidden rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg-primary)] border border-[var(--ui-border-default)] px-2.5 py-1 text-xs font-medium text-[var(--ui-text-primary)] shadow-md animate-in fade-in zoom-in-95 pointer-events-none select-none",
+  {
+    variants: {
+      placement: {
+        top: "-translate-x-1/2 -translate-y-full mb-1.5",
+        bottom: "-translate-x-1/2 mt-1.5",
+        left: "-translate-x-full -translate-y-1/2 mr-1.5",
+        right: "translate-y-[-50%] ml-1.5"
+      }
+    },
+    defaultVariants: {
+      placement: "top"
+    }
+  }
+);
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  delayDuration = 200,
+  className
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+  const timeoutRef = useRef(null);
+  const triggerRef = useRef(null);
+  const handleMouseEnter = () => {
+    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);
+      }
+    }, delayDuration);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleMouseEnter,
+        onBlur: handleMouseLeave,
+        className: "inline-flex cursor-pointer",
+        children
+      }
+    ),
+    isVisible && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: { top: `${coords.top}px`, left: `${coords.left}px`, position: "absolute" },
+        role: "tooltip",
+        className: cn(tooltipVariants({ placement }), className),
+        children: content
+      }
+    ) })
+  ] });
+}
+var ToastContext = createContext(null);
+function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToasterProvider");
+  }
+  return context;
+}
+var toastVariants = cva(
+  "pointer-events-auto flex w-full max-w-md items-start gap-3 rounded-[var(--ui-radius-lg)] border p-4 shadow-lg transition-all animate-in slide-in-from-bottom-5 duration-300",
+  {
+    variants: {
+      type: {
+        info: "bg-[var(--ui-bg-surface)] border-[var(--ui-info)]/30 text-[var(--ui-text-primary)]",
+        success: "bg-[var(--ui-bg-surface)] border-[var(--ui-success)]/30 text-[var(--ui-text-primary)]",
+        warning: "bg-[var(--ui-bg-surface)] border-[var(--ui-warning)]/30 text-[var(--ui-text-primary)]",
+        error: "bg-[var(--ui-bg-surface)] border-[var(--ui-error)]/30 text-[var(--ui-text-primary)]"
+      }
+    },
+    defaultVariants: {
+      type: "info"
+    }
+  }
+);
+var toastIcons = {
+  info: /* @__PURE__ */ jsx(Info, { className: "w-5 h-5 text-[var(--ui-info)] flex-shrink-0" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { className: "w-5 h-5 text-[var(--ui-success)] flex-shrink-0" }),
+  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" })
+};
+function ToasterProvider({ children, position = "bottom-right" }) {
+  const [toasts, setToasts] = useState([]);
+  const dismiss = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const toast = 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]);
+      if (duration > 0) {
+        setTimeout(() => {
+          dismiss(id);
+        }, duration);
+      }
+      return id;
+    },
+    [dismiss]
+  );
+  const getPositionClasses = () => {
+    switch (position) {
+      case "top-left":
+        return "top-4 left-4 items-start";
+      case "top-center":
+        return "top-4 left-1/2 -translate-x-1/2 items-center";
+      case "top-right":
+        return "top-4 right-4 items-end";
+      case "bottom-left":
+        return "bottom-4 left-4 items-start";
+      case "bottom-center":
+        return "bottom-4 left-1/2 -translate-x-1/2 items-center";
+      case "bottom-right":
+      default:
+        return "bottom-4 right-4 items-end";
+    }
+  };
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast, dismiss, toasts }, children: [
+    children,
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        className: cn("fixed z-[100] flex flex-col gap-2 pointer-events-none p-4 w-full max-w-sm sm:max-w-md", getPositionClasses()),
+        children: toasts.map((t) => /* @__PURE__ */ jsxs("div", { className: cn(toastVariants({ type: t.type })), children: [
+          toastIcons[t.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: t.title }),
+            t.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: t.description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => dismiss(t.id),
+              "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",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }, t.id))
+      }
+    ) })
+  ] });
+}
+var BottomSheet = forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    title,
+    description,
+    className,
+    showHandle = true,
+    maxHeight = "max-h-[85vh]"
+  }, ref) => {
+    useRef(null);
+    useEffect(() => {
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && isOpen) {
+          onClose();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [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
+          ),
+          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 })
+          ]
+        }
+      )
+    ] }) }) });
+  }
+);
+BottomSheet.displayName = "BottomSheet";
+var BottomSheetHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("px-6 pb-2", className), ...props, children });
+var BottomSheetBody = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("px-6 py-2 overflow-y-auto", className), ...props, children });
+var BottomSheetFooter = ({ className, children, ...props }) => /* @__PURE__ */ 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 ContextMenuItem = ({
+  icon,
+  shortcut,
+  disabled = false,
+  destructive = false,
+  onSelect,
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "menuitem",
+      "aria-disabled": disabled,
+      onClick: () => {
+        if (!disabled) 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",
+        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)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children })
+        ] }),
+        shortcut && /* @__PURE__ */ jsx(Kbd, { className: "text-[10px] py-0 px-1", children: shortcut })
+      ]
+    }
+  );
+};
+var ContextMenuSeparator = () => /* @__PURE__ */ jsx("div", { className: "h-px my-1 bg-[var(--ui-border-subtle)]", role: "separator" });
+var ContextMenu = forwardRef(
+  ({ children, menuContent, className }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const menuRef = useRef(null);
+    const handleContextMenu = (e) => {
+      e.preventDefault();
+      const x = Math.min(window.innerWidth - 220, e.clientX);
+      const y = Math.min(window.innerHeight - 260, e.clientY);
+      setPosition({ x, y });
+      setIsOpen(true);
+    };
+    useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (menuRef.current && !menuRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape") setIsOpen(false);
+      };
+      if (isOpen) {
+        window.addEventListener("click", handleClickOutside);
+        window.addEventListener("contextmenu", handleClickOutside);
+        window.addEventListener("keydown", handleKeyDown);
+      }
+      return () => {
+        window.removeEventListener("click", handleClickOutside);
+        window.removeEventListener("contextmenu", handleClickOutside);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [isOpen]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { ref, onContextMenu: handleContextMenu, className, children }),
+      isOpen && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          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",
+          children: menuContent
+        }
+      ) })
+    ] });
+  }
+);
+ContextMenu.displayName = "ContextMenu";
+var HoverCard = forwardRef(
+  ({ trigger, content, openDelay = 200, closeDelay = 250, className }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const openTimerRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const handleMouseEnter = () => {
+      clearTimeout(closeTimerRef.current);
+      openTimerRef.current = setTimeout(() => {
+        if (triggerRef.current) {
+          const rect = triggerRef.current.getBoundingClientRect();
+          setCoords({
+            top: rect.bottom + window.scrollY + 8,
+            left: Math.max(16, Math.min(window.innerWidth - 320, rect.left + window.scrollX))
+          });
+          setIsOpen(true);
+        }
+      }, openDelay);
+    };
+    const handleMouseLeave = () => {
+      clearTimeout(openTimerRef.current);
+      closeTimerRef.current = setTimeout(() => {
+        setIsOpen(false);
+      }, closeDelay);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: "inline-block relative",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: triggerRef, className: "inline-block", children: trigger }),
+          isOpen && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { top: `${coords.top}px`, left: `${coords.left}px` },
+              onMouseEnter: () => clearTimeout(closeTimerRef.current),
+              onMouseLeave: handleMouseLeave,
+              className: cn(
+                "fixed z-50 w-72 p-4 rounded-2xl bg-[var(--ui-bg-surface)] backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl animate-in fade-in zoom-in-95 duration-200",
+                className
+              ),
+              children: content
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+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