@thangnqdev/ui 0.1.0

package/dist/overlays/index.cjs

@@ -0,0 +1,954 @@
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+// src/overlays/Portal.tsx
+function Portal({ children, container }) {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  if (!mounted) return null;
+  const target = container || (typeof document !== "undefined" ? document.body : null);
+  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(() => {
+    if (!active) return;
+    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();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [active]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: rootRef, className: "contents", children });
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var ModalContext = react.createContext(null);
+function useModal() {
+  const context = react.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
+}) {
+  react.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__ */ 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",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6",
+      role: "dialog",
+      "aria-modal": "true",
+      children
+    }
+  ) }) }) });
+}
+var ModalOverlay = react.forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose, closeOnOverlayClick } = useModal();
+    return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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 = react.forwardRef(
+  ({ className, size, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn(modalContentVariants({ size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalContent.displayName = "ModalContent";
+var ModalHeader = react.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 });
+  }
+);
+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 });
+  }
+);
+ModalDescription.displayName = "ModalDescription";
+var ModalBody = react.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(
+  ({ 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(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose } = useModal();
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+      }
+    );
+  }
+);
+ModalCloseButton.displayName = "ModalCloseButton";
+var buttonVariants = classVarianceAuthority.cva(
+  "relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20",
+        secondary: "bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm",
+        outline: "border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm",
+        ghost: "bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70",
+        danger: "bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15",
+        link: "bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal",
+        glass: "bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]"
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1",
+        sm: "h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5",
+        md: "h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold",
+        lg: "h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold",
+        xl: "h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      fullWidth: false
+    }
+  }
+);
+var Button = react.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    fullWidth,
+    loading = false,
+    loadingText,
+    leftIcon,
+    rightIcon,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        disabled: isDisabled,
+        className: cn(buttonVariants({ variant, size, fullWidth }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText || children })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: leftIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+            rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex items-center", children: rightIcon })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function AlertDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "danger",
+  isLoading = 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
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var DrawerContext = react.createContext(null);
+function useDrawer() {
+  const context = react.useContext(DrawerContext);
+  if (!context) {
+    throw new Error("Drawer compound components must be used within a <Drawer />");
+  }
+  return context;
+}
+var drawerVariants = classVarianceAuthority.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
+}) {
+  react.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__ */ 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 })
+  ] }) }) }) });
+}
+var DrawerHeader = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { onClose } = useDrawer();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        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(
+            "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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerBody = react.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(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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] = react.useState(false);
+  const [coords, setCoords] = react.useState({ top: 0, left: 0 });
+  const timeoutRef = react.useRef(null);
+  const triggerRef = react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleMouseEnter,
+        onBlur: handleMouseLeave,
+        className: "inline-flex cursor-pointer",
+        children
+      }
+    ),
+    isVisible && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { top: `${coords.top}px`, left: `${coords.left}px`, position: "absolute" },
+        role: "tooltip",
+        className: cn(tooltipVariants({ placement }), className),
+        children: content
+      }
+    ) })
+  ] });
+}
+var Popover = ({
+  trigger,
+  children,
+  isOpen: controlledIsOpen,
+  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 = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      let top = 0;
+      let left = 0;
+      if (placement === "bottom") {
+        top = rect.bottom + window.scrollY + 8;
+        left = rect.left + window.scrollX;
+      } else if (placement === "top") {
+        top = rect.top + window.scrollY - 8;
+        left = rect.left + window.scrollX;
+      } else if (placement === "right") {
+        top = rect.top + window.scrollY;
+        left = rect.right + window.scrollX + 8;
+      } else if (placement === "left") {
+        top = rect.top + window.scrollY;
+        left = rect.left + window.scrollX - 8;
+      }
+      setCoords({ top, left });
+    }
+  };
+  const handleToggle = () => {
+    if (!isOpen) {
+      calculatePosition();
+    }
+    if (controlledIsOpen !== void 0) {
+      if (isOpen) onClose?.();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
+  };
+  react.useEffect(() => {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    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);
+        }
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleOutside);
+      window.addEventListener("resize", calculatePosition);
+      window.addEventListener("scroll", calculatePosition);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [isOpen, controlledIsOpen, onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleToggle, className: "w-full inline-block cursor-pointer", children: trigger }),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: popoverRef,
+        style: {
+          top: `${coords.top}px`,
+          left: `${coords.left}px`,
+          position: "absolute"
+        },
+        className: cn(
+          "z-50 min-w-[12rem] rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] p-4 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95",
+          placement === "top" && "-translate-y-full",
+          placement === "left" && "-translate-x-full",
+          className
+        ),
+        children
+      }
+    ) })
+  ] });
+};
+var ToastContext = react.createContext(null);
+function useToast() {
+  const context = react.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToasterProvider");
+  }
+  return context;
+}
+var toastVariants = classVarianceAuthority.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__ */ jsxRuntime.jsx(lucideReact.Info, { className: "w-5 h-5 text-[var(--ui-info)] flex-shrink-0" }),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-5 h-5 text-[var(--ui-success)] flex-shrink-0" }),
+  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" })
+};
+function ToasterProvider({ children, position = "bottom-right" }) {
+  const [toasts, setToasts] = react.useState([]);
+  const dismiss = react.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const toast = react.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__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast, dismiss, toasts }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(toastVariants({ type: t.type })), children: [
+          toastIcons[t.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: t.title }),
+            t.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--ui-text-muted)]", children: t.description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+            }
+          )
+        ] }, t.id))
+      }
+    ) })
+  ] });
+}
+var BottomSheet = react.forwardRef(
+  ({
+    isOpen,
+    onClose,
+    children,
+    title,
+    description,
+    className,
+    showHandle = true,
+    maxHeight = "max-h-[85vh]"
+  }, ref) => {
+    react.useRef(null);
+    react.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__ */ 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
+          ),
+          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 })
+          ]
+        }
+      )
+    ] }) }) });
+  }
+);
+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(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        ref,
+        className: cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-default)] bg-[var(--ui-bg-tertiary)] px-1.5 font-mono text-[10px] font-semibold text-[var(--ui-text-muted)] opacity-100 shadow-sm",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+var ContextMenuItem = ({
+  icon,
+  shortcut,
+  disabled = false,
+  destructive = false,
+  onSelect,
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 shrink-0", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children })
+        ] }),
+        shortcut && /* @__PURE__ */ jsxRuntime.jsx(Kbd, { className: "text-[10px] py-0 px-1", children: shortcut })
+      ]
+    }
+  );
+};
+var ContextMenuSeparator = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px my-1 bg-[var(--ui-border-subtle)]", role: "separator" });
+var ContextMenu = react.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 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);
+    };
+    react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref, onContextMenu: handleContextMenu, className, children }),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.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 = react.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 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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: "inline-block relative",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, className: "inline-block", children: trigger }),
+          isOpen && /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.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";
+
+exports.AlertDialog = AlertDialog;
+exports.BottomSheet = BottomSheet;
+exports.BottomSheetBody = BottomSheetBody;
+exports.BottomSheetFooter = BottomSheetFooter;
+exports.BottomSheetHeader = BottomSheetHeader;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.Drawer = Drawer;
+exports.DrawerBody = DrawerBody;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.FocusTrap = FocusTrap;
+exports.HoverCard = HoverCard;
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalContent = ModalContent;
+exports.ModalDescription = ModalDescription;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalOverlay = ModalOverlay;
+exports.ModalTitle = ModalTitle;
+exports.Popover = Popover;
+exports.Portal = Portal;
+exports.ToasterProvider = ToasterProvider;
+exports.Tooltip = Tooltip;
+exports.drawerVariants = drawerVariants;
+exports.modalContentVariants = modalContentVariants;
+exports.toastVariants = toastVariants;
+exports.tooltipVariants = tooltipVariants;
+exports.useDrawer = useDrawer;
+exports.useModal = useModal;
+exports.useToast = useToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map