@thangnqdev/ui 0.1.0

package/src/overlays/HoverCard.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef, forwardRef } from 'react';
+import { cn } from '../utils/cn';
+import { Portal } from './Portal';
+
+export interface HoverCardProps {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  openDelay?: number;
+  closeDelay?: number;
+  className?: string;
+}
+
+export const HoverCard = forwardRef<HTMLDivElement, HoverCardProps>(
+  ({ trigger, content, openDelay = 200, closeDelay = 250, className }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+    const triggerRef = useRef<HTMLDivElement | null>(null);
+    const openTimerRef = useRef<any>(null);
+    const closeTimerRef = useRef<any>(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 (
+      <div
+        ref={ref}
+        className="inline-block relative"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <div ref={triggerRef} className="inline-block">
+          {trigger}
+        </div>
+
+        {isOpen && (
+          <Portal>
+            <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
+              )}
+            >
+              {content}
+            </div>
+          </Portal>
+        )}
+      </div>
+    );
+  }
+);
+HoverCard.displayName = 'HoverCard';

package/src/overlays/Modal.tsx

@@ -0,0 +1,219 @@
+import React, { forwardRef, createContext, useContext, useEffect } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { Portal } from './Portal';
+import { FocusTrap } from './FocusTrap';
+import { cn } from '../utils/cn';
+
+interface ModalContextType {
+  isOpen: boolean;
+  onClose: () => void;
+  closeOnOverlayClick?: boolean;
+}
+
+const ModalContext = createContext<ModalContextType | null>(null);
+
+export function useModal() {
+  const context = useContext(ModalContext);
+  if (!context) {
+    throw new Error('Modal compound components must be used within a <Modal />');
+  }
+  return context;
+}
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  closeOnEsc?: boolean;
+  closeOnOverlayClick?: boolean;
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  closeOnEsc = true,
+  closeOnOverlayClick = true,
+}: ModalProps) {
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      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 (
+    <Portal>
+      <ModalContext.Provider value={{ isOpen, onClose, closeOnOverlayClick }}>
+        <FocusTrap active={isOpen}>
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+            role="dialog"
+            aria-modal="true"
+          >
+            {children}
+          </div>
+        </FocusTrap>
+      </ModalContext.Provider>
+    </Portal>
+  );
+}
+
+export interface ModalOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose, closeOnOverlayClick } = useModal();
+
+    return (
+      <div
+        ref={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';
+
+export const 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',
+    },
+  }
+);
+
+export interface ModalContentProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof modalContentVariants> {}
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
+  ({ className, size, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(modalContentVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ModalContent.displayName = 'ModalContent';
+
+export const ModalHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col space-y-1.5 mb-4', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalTitle = forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <h2 ref={ref} className={cn('text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]', className)} {...props}>
+        {children}
+      </h2>
+    );
+  }
+);
+ModalTitle.displayName = 'ModalTitle';
+
+export const ModalDescription = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <p ref={ref} className={cn('text-sm text-[var(--ui-text-muted)]', className)} {...props}>
+        {children}
+      </p>
+    );
+  }
+);
+ModalDescription.displayName = 'ModalDescription';
+
+export const ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('py-2', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex items-center justify-end gap-3 mt-6 pt-4 border-t border-[var(--ui-border-subtle)]', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalFooter.displayName = 'ModalFooter';
+
+export const ModalCloseButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose } = useModal();
+
+    return (
+      <button
+        ref={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}
+      >
+        <X className="w-4 h-4" />
+      </button>
+    );
+  }
+);
+ModalCloseButton.displayName = 'ModalCloseButton';

package/src/overlays/Popover.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Portal } from './Portal';
+import { cn } from '../utils/cn';
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  isOpen?: boolean;
+  onClose?: () => void;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  className?: string;
+}
+
+export const Popover = ({
+  trigger,
+  children,
+  isOpen: controlledIsOpen,
+  onClose,
+  placement = 'bottom',
+  className,
+}: PopoverProps) => {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+
+  const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const popoverRef = useRef<HTMLDivElement | null>(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 !== undefined) {
+      if (isOpen) onClose?.();
+    } else {
+      setInternalIsOpen(!internalIsOpen);
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      calculatePosition();
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleOutside = (e: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(e.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node)
+      ) {
+        if (controlledIsOpen !== undefined) {
+          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 (
+    <>
+      <div ref={triggerRef} onClick={handleToggle} className="w-full inline-block cursor-pointer">
+        {trigger}
+      </div>
+
+      {isOpen && (
+        <Portal>
+          <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}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};

package/src/overlays/Portal.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+export interface PortalProps {
+  children: React.ReactNode;
+  container?: Element | null;
+}
+
+export function Portal({ children, container }: PortalProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) return null;
+
+  const target = container || (typeof document !== 'undefined' ? document.body : null);
+  if (!target) return null;
+
+  return createPortal(children, target);
+}

package/src/overlays/Toast.tsx

@@ -0,0 +1,137 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { CheckCircle2, AlertTriangle, AlertCircle, Info, X } from 'lucide-react';
+import { Portal } from './Portal';
+import { cn } from '../utils/cn';
+
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+export interface ToastOptions {
+  id?: string;
+  title: string;
+  description?: string;
+  type?: ToastType;
+  duration?: number;
+}
+
+export interface ToastItem extends ToastOptions {
+  id: string;
+}
+
+interface ToastContextType {
+  toast: (options: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  toasts: ToastItem[];
+}
+
+const ToastContext = createContext<ToastContextType | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToasterProvider');
+  }
+  return context;
+}
+
+export const 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',
+    },
+  }
+);
+
+const toastIcons: Record<ToastType, React.ReactNode> = {
+  info: <Info className="w-5 h-5 text-[var(--ui-info)] flex-shrink-0" />,
+  success: <CheckCircle2 className="w-5 h-5 text-[var(--ui-success)] flex-shrink-0" />,
+  warning: <AlertTriangle className="w-5 h-5 text-[var(--ui-warning)] flex-shrink-0" />,
+  error: <AlertCircle className="w-5 h-5 text-[var(--ui-error)] flex-shrink-0" />,
+};
+
+export interface ToasterProviderProps {
+  children: React.ReactNode;
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+
+export function ToasterProvider({ children, position = 'bottom-right' }: ToasterProviderProps) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const toast = useCallback(
+    ({ id = Math.random().toString(36).slice(2, 9), title, description, type = 'info', duration = 4000 }: ToastOptions) => {
+      const item: ToastItem = { 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 (
+    <ToastContext.Provider value={{ toast, dismiss, toasts }}>
+      {children}
+      <Portal>
+        <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())}
+        >
+          {toasts.map((t) => (
+            <div key={t.id} className={cn(toastVariants({ type: t.type }))}>
+              {toastIcons[t.type || 'info']}
+              <div className="flex-1 space-y-1">
+                <h4 className="text-sm font-semibold text-[var(--ui-text-primary)]">{t.title}</h4>
+                {t.description && <p className="text-xs text-[var(--ui-text-muted)]">{t.description}</p>}
+              </div>
+              <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"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </Portal>
+    </ToastContext.Provider>
+  );
+}

package/src/overlays/Tooltip.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Portal } from './Portal';
+import { cn } from '../utils/cn';
+
+export const 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',
+    },
+  }
+);
+
+export interface TooltipProps extends VariantProps<typeof tooltipVariants> {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  delayDuration?: number;
+  className?: string;
+}
+
+export function Tooltip({
+  content,
+  children,
+  placement = 'top',
+  delayDuration = 200,
+  className,
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const triggerRef = useRef<HTMLDivElement | null>(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 (
+    <>
+      <div
+        ref={triggerRef}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onFocus={handleMouseEnter}
+        onBlur={handleMouseLeave}
+        className="inline-flex cursor-pointer"
+      >
+        {children}
+      </div>
+
+      {isVisible && (
+        <Portal>
+          <div
+            style={{ top: `${coords.top}px`, left: `${coords.left}px`, position: 'absolute' }}
+            role="tooltip"
+            className={cn(tooltipVariants({ placement }), className)}
+          >
+            {content}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+}

package/src/overlays/index.ts

@@ -0,0 +1,11 @@
+export * from './Portal';
+export * from './FocusTrap';
+export * from './Modal';
+export * from './AlertDialog';
+export * from './Drawer';
+export * from './Tooltip';
+export * from './Popover';
+export * from './Toast';
+export * from './BottomSheet';
+export * from './ContextMenu';
+export * from './HoverCard';

package/src/overlays/tokens.css

@@ -0,0 +1,8 @@
+/* Overlay Tokens */
+:root {
+  --ui-z-drawer: 40;
+  --ui-z-modal: 50;
+  --ui-z-popover: 60;
+  --ui-z-tooltip: 70;
+  --ui-z-toast: 100;
+}

package/src/styles/tokens.css

@@ -0,0 +1,2 @@
+@import '../glass/tokens.css';
+@import '../bento/tokens.css';