@thangnqdev/ui 0.2.1 → 0.2.2

package/src/overlays/Modal.tsx

@@ -1,296 +1,296 @@
-import React, { forwardRef, createContext, useContext, useEffect, useId, useState, useCallback } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import { Portal } from './Portal';
-import { FocusTrap } from './FocusTrap';
-import { lockBodyScroll, unlockBodyScroll } from '../utils/scroll-lock';
-import { cn } from '../utils/cn';
-
-interface ModalContextType {
-  isOpen: boolean;
-  onClose: () => void;
-  closeOnOverlayClick?: boolean;
-  titleId: string;
-  descriptionId: string;
-  registerTitle: (id?: string) => () => void;
-  registerDescription: (id?: string) => () => void;
-}
-
-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;
-  role?: 'dialog' | 'alertdialog';
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  'aria-describedby'?: string;
-}
-
-export function Modal({
-  isOpen,
-  onClose,
-  children,
-  closeOnEsc = true,
-  closeOnOverlayClick = true,
-  role = 'dialog',
-  'aria-label': ariaLabel,
-  'aria-labelledby': customLabelledBy,
-  'aria-describedby': customDescribedBy,
-}: ModalProps) {
-  const generatedId = useId();
-  const titleId = customLabelledBy || `modal-title-${generatedId}`;
-  const descriptionId = customDescribedBy || `modal-desc-${generatedId}`;
-
-  const [mountedTitleId, setMountedTitleId] = useState<string | null>(null);
-  const [mountedDescId, setMountedDescId] = useState<string | null>(null);
-
-  const registerTitle = useCallback(
-    (id?: string) => {
-      const activeId = id || titleId;
-      setMountedTitleId(activeId);
-      return () => setMountedTitleId(null);
-    },
-    [titleId]
-  );
-
-  const registerDescription = useCallback(
-    (id?: string) => {
-      const activeId = id || descriptionId;
-      setMountedDescId(activeId);
-      return () => setMountedDescId(null);
-    },
-    [descriptionId]
-  );
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    lockBodyScroll();
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (closeOnEsc && e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      unlockBodyScroll();
-    };
-  }, [isOpen, closeOnEsc, onClose]);
-
-  if (!isOpen) return null;
-
-  const resolvedLabelledBy = customLabelledBy || (ariaLabel ? undefined : (mountedTitleId || undefined));
-  const resolvedDescribedBy = customDescribedBy || (mountedDescId || undefined);
-
-  return (
-    <Portal>
-      <ModalContext.Provider
-        value={{
-          isOpen,
-          onClose,
-          closeOnOverlayClick,
-          titleId,
-          descriptionId,
-          registerTitle,
-          registerDescription,
-        }}
-      >
-        <FocusTrap active={isOpen} restoreFocus={true}>
-          <div
-            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
-            role={role}
-            aria-modal="true"
-            aria-label={ariaLabel}
-            aria-labelledby={resolvedLabelledBy}
-            aria-describedby={resolvedDescribedBy}
-          >
-            {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, id, ...props }, ref) => {
-    const { titleId, registerTitle } = useModal();
-    const activeId = id || titleId;
-
-    useEffect(() => {
-      return registerTitle(activeId);
-    }, [registerTitle, activeId]);
-
-    return (
-      <h2
-        ref={ref}
-        id={activeId}
-        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, id, ...props }, ref) => {
-    const { descriptionId, registerDescription } = useModal();
-    const activeId = id || descriptionId;
-
-    useEffect(() => {
-      return registerDescription(activeId);
-    }, [registerDescription, activeId]);
-
-    return (
-      <p
-        ref={ref}
-        id={activeId}
-        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 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
-          className
-        )}
-        {...props}
-      >
-        <X className="w-4 h-4" />
-      </button>
-    );
-  }
-);
-ModalCloseButton.displayName = 'ModalCloseButton';
+import React, { forwardRef, createContext, useContext, useEffect, useId, useState, useCallback } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { Portal } from './Portal';
+import { FocusTrap } from './FocusTrap';
+import { lockBodyScroll, unlockBodyScroll } from '../utils/scroll-lock';
+import { cn } from '../utils/cn';
+
+interface ModalContextType {
+  isOpen: boolean;
+  onClose: () => void;
+  closeOnOverlayClick?: boolean;
+  titleId: string;
+  descriptionId: string;
+  registerTitle: (id?: string) => () => void;
+  registerDescription: (id?: string) => () => void;
+}
+
+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;
+  role?: 'dialog' | 'alertdialog';
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  closeOnEsc = true,
+  closeOnOverlayClick = true,
+  role = 'dialog',
+  'aria-label': ariaLabel,
+  'aria-labelledby': customLabelledBy,
+  'aria-describedby': customDescribedBy,
+}: ModalProps) {
+  const generatedId = useId();
+  const titleId = customLabelledBy || `modal-title-${generatedId}`;
+  const descriptionId = customDescribedBy || `modal-desc-${generatedId}`;
+
+  const [mountedTitleId, setMountedTitleId] = useState<string | null>(null);
+  const [mountedDescId, setMountedDescId] = useState<string | null>(null);
+
+  const registerTitle = useCallback(
+    (id?: string) => {
+      const activeId = id || titleId;
+      setMountedTitleId(activeId);
+      return () => setMountedTitleId(null);
+    },
+    [titleId]
+  );
+
+  const registerDescription = useCallback(
+    (id?: string) => {
+      const activeId = id || descriptionId;
+      setMountedDescId(activeId);
+      return () => setMountedDescId(null);
+    },
+    [descriptionId]
+  );
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    lockBodyScroll();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (closeOnEsc && e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      unlockBodyScroll();
+    };
+  }, [isOpen, closeOnEsc, onClose]);
+
+  if (!isOpen) return null;
+
+  const resolvedLabelledBy = customLabelledBy || (ariaLabel ? undefined : (mountedTitleId || undefined));
+  const resolvedDescribedBy = customDescribedBy || (mountedDescId || undefined);
+
+  return (
+    <Portal>
+      <ModalContext.Provider
+        value={{
+          isOpen,
+          onClose,
+          closeOnOverlayClick,
+          titleId,
+          descriptionId,
+          registerTitle,
+          registerDescription,
+        }}
+      >
+        <FocusTrap active={isOpen} restoreFocus={true}>
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+            role={role}
+            aria-modal="true"
+            aria-label={ariaLabel}
+            aria-labelledby={resolvedLabelledBy}
+            aria-describedby={resolvedDescribedBy}
+          >
+            {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, id, ...props }, ref) => {
+    const { titleId, registerTitle } = useModal();
+    const activeId = id || titleId;
+
+    useEffect(() => {
+      return registerTitle(activeId);
+    }, [registerTitle, activeId]);
+
+    return (
+      <h2
+        ref={ref}
+        id={activeId}
+        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, id, ...props }, ref) => {
+    const { descriptionId, registerDescription } = useModal();
+    const activeId = id || descriptionId;
+
+    useEffect(() => {
+      return registerDescription(activeId);
+    }, [registerDescription, activeId]);
+
+    return (
+      <p
+        ref={ref}
+        id={activeId}
+        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 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
+          className
+        )}
+        {...props}
+      >
+        <X className="w-4 h-4" />
+      </button>
+    );
+  }
+);
+ModalCloseButton.displayName = 'ModalCloseButton';