@thangnqdev/ui 0.1.2 → 0.2.0

package/src/overlays/AlertDialog.tsx

@@ -1,54 +1,63 @@
-import React, { forwardRef } from 'react';
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalCloseButton } from './Modal';
-import { Button } from '../buttons/Button';
-import { cn } from '../utils/cn';
-
-export interface AlertDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  title: string;
-  description: string;
-  confirmText?: string;
-  cancelText?: string;
-  variant?: 'danger' | 'primary';
-  isLoading?: boolean;
-}
-
-export function AlertDialog({
-  isOpen,
-  onClose,
-  onConfirm,
-  title,
-  description,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
-  variant = 'danger',
-  isLoading = false,
-}: AlertDialogProps) {
-  return (
-    <Modal isOpen={isOpen} onClose={onClose}>
-      <ModalOverlay />
-      <ModalContent size="sm">
-        <ModalCloseButton />
-        <ModalHeader>
-          <ModalTitle>{title}</ModalTitle>
-          <ModalDescription>{description}</ModalDescription>
-        </ModalHeader>
-        <ModalFooter>
-          <Button variant="outline" size="sm" onClick={onClose} disabled={isLoading}>
-            {cancelText}
-          </Button>
-          <Button
-            variant={variant === 'danger' ? 'danger' : 'primary'}
-            size="sm"
-            loading={isLoading}
-            onClick={onConfirm}
-          >
-            {confirmText}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
+import React, { forwardRef } from 'react';
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalCloseButton } from './Modal';
+import { Button } from '../buttons/Button';
+import { cn } from '../utils/cn';
+
+export interface AlertDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'primary';
+  isLoading?: boolean;
+  closeOnOverlayClick?: boolean;
+}
+
+export function AlertDialog({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  variant = 'danger',
+  isLoading = false,
+  closeOnOverlayClick = false,
+}: AlertDialogProps) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      role="alertdialog"
+      closeOnOverlayClick={closeOnOverlayClick}
+    >
+      <ModalOverlay />
+      <ModalContent size="sm">
+        <ModalCloseButton />
+        <ModalHeader>
+          <ModalTitle>{title}</ModalTitle>
+          <ModalDescription>{description}</ModalDescription>
+        </ModalHeader>
+        <ModalFooter>
+          <Button variant="outline" size="sm" onClick={onClose} disabled={isLoading} autoFocus>
+            {cancelText}
+          </Button>
+          <Button
+            variant={variant === 'danger' ? 'danger' : 'primary'}
+            size="sm"
+            loading={isLoading}
+            onClick={onConfirm}
+          >
+            {confirmText}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+AlertDialog.displayName = 'AlertDialog';

package/src/overlays/BottomSheet.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useId } from 'react';
 import { X } from 'lucide-react';
 import { cn } from '../utils/cn';
 import { Portal } from './Portal';
 import { FocusTrap } from './FocusTrap';
+import { lockBodyScroll, unlockBodyScroll } from '../utils/scroll-lock';
 
 export interface BottomSheetProps {
   isOpen: boolean;
@@ -13,6 +14,7 @@ export interface BottomSheetProps {
   className?: string;
   showHandle?: boolean;
   maxHeight?: string;
+  'aria-label'?: string;
 }
 
 export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
@@ -26,28 +28,45 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
       className,
       showHandle = true,
       maxHeight = 'max-h-[85vh]',
+      'aria-label': ariaLabel,
     },
     ref
   ) => {
-    const sheetRef = useRef<HTMLDivElement | null>(null);
+    const generatedId = useId();
+    const titleId = `bottomsheet-title-${generatedId}`;
+    const descId = `bottomsheet-desc-${generatedId}`;
 
-    // Escape key listener
     useEffect(() => {
+      if (!isOpen) return;
+
+      lockBodyScroll();
+
       const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && isOpen) {
+        if (e.key === 'Escape') {
           onClose();
         }
       };
+
       window.addEventListener('keydown', handleKeyDown);
-      return () => window.removeEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+        unlockBodyScroll();
+      };
     }, [isOpen, onClose]);
 
     if (!isOpen) return null;
 
     return (
       <Portal>
-        <FocusTrap active={isOpen}>
-          <div className="fixed inset-0 z-50 flex flex-col justify-end">
+        <FocusTrap active={isOpen} restoreFocus={true}>
+          <div
+            className="fixed inset-0 z-50 flex flex-col justify-end"
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={description ? descId : undefined}
+          >
             {/* Backdrop */}
             <div
               onClick={onClose}
@@ -78,13 +97,14 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
               {(title || description) && (
                 <div className="px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]">
                   <div>
-                    {title && <h3 className="text-base font-bold tracking-tight text-[var(--ui-text-primary)]">{title}</h3>}
-                    {description && <p className="text-xs text-[var(--ui-text-muted)]">{description}</p>}
+                    {title && <h3 id={titleId} className="text-base font-bold tracking-tight text-[var(--ui-text-primary)]">{title}</h3>}
+                    {description && <p id={descId} className="text-xs text-[var(--ui-text-muted)]">{description}</p>}
                   </div>
                   <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"
+                    aria-label="Close sheet"
+                    className="p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]"
                   >
                     <X className="w-4 h-4" />
                   </button>

package/src/overlays/ContextMenu.tsx

@@ -24,15 +24,22 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
   return (
     <div
       role="menuitem"
+      tabIndex={disabled ? -1 : 0}
       aria-disabled={disabled}
       onClick={() => {
         if (!disabled) onSelect?.();
       }}
+      onKeyDown={(e) => {
+        if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault();
+          onSelect?.();
+        }
+      }}
       className={cn(
-        'flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none',
+        'flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-medium cursor-pointer transition-colors select-none focus:outline-none focus:bg-[var(--ui-bg-tertiary)]',
         disabled && 'opacity-40 cursor-not-allowed pointer-events-none',
         destructive
-          ? 'text-rose-500 hover:bg-rose-500/10'
+          ? 'text-rose-500 hover:bg-rose-500/10 focus:bg-rose-500/10'
           : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
         className
       )}
@@ -73,21 +80,54 @@ export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
     };
 
     useEffect(() => {
+      if (!isOpen) return;
+
+      const timer = setTimeout(() => {
+        const firstItem = menuRef.current?.querySelector<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])');
+        firstItem?.focus();
+      }, 10);
+
       const handleClickOutside = (e: MouseEvent) => {
         if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
           setIsOpen(false);
         }
       };
+
       const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') setIsOpen(false);
+        if (!menuRef.current) return;
+        const items = Array.from(
+          menuRef.current.querySelectorAll<HTMLElement>('[role="menuitem"]:not([aria-disabled="true"])')
+        );
+        if (items.length === 0) return;
+
+        const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          const prevIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          items[prevIndex]?.focus();
+        } else if (e.key === 'Home') {
+          e.preventDefault();
+          items[0]?.focus();
+        } else if (e.key === 'End') {
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          setIsOpen(false);
+        }
       };
 
-      if (isOpen) {
-        window.addEventListener('click', handleClickOutside);
-        window.addEventListener('contextmenu', handleClickOutside);
-        window.addEventListener('keydown', handleKeyDown);
-      }
+      window.addEventListener('click', handleClickOutside);
+      window.addEventListener('contextmenu', handleClickOutside);
+      window.addEventListener('keydown', handleKeyDown);
+
       return () => {
+        clearTimeout(timer);
         window.removeEventListener('click', handleClickOutside);
         window.removeEventListener('contextmenu', handleClickOutside);
         window.removeEventListener('keydown', handleKeyDown);
@@ -104,9 +144,11 @@ export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
           <Portal>
             <div
               ref={menuRef}
+              role="menu"
+              tabIndex={-1}
               style={{ top: `${position.y}px`, left: `${position.x}px` }}
               onClick={() => setIsOpen(false)}
-              className="fixed z-50 min-w-48 p-1.5 rounded-2xl bg-[var(--ui-bg-surface)]/90 backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl space-y-0.5 animate-in fade-in zoom-in-95 duration-150"
+              className="fixed z-50 min-w-48 p-1.5 rounded-2xl bg-[var(--ui-bg-surface)]/90 backdrop-blur-3xl border border-[var(--ui-border-default)] shadow-2xl space-y-0.5 animate-in fade-in zoom-in-95 duration-150 focus:outline-none"
             >
               {menuContent}
             </div>

package/src/overlays/Drawer.tsx

@@ -1,145 +1,160 @@
-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 DrawerContextType {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const DrawerContext = createContext<DrawerContextType | null>(null);
-
-export function useDrawer() {
-  const context = useContext(DrawerContext);
-  if (!context) {
-    throw new Error('Drawer compound components must be used within a <Drawer />');
-  }
-  return context;
-}
-
-export const 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',
-    },
-  }
-);
-
-export interface DrawerProps extends VariantProps<typeof drawerVariants> {
-  isOpen: boolean;
-  onClose: () => void;
-  children: React.ReactNode;
-  closeOnEsc?: boolean;
-}
-
-export function Drawer({
-  isOpen,
-  onClose,
-  placement = 'right',
-  children,
-  closeOnEsc = true,
-}: DrawerProps) {
-  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>
-      <DrawerContext.Provider value={{ isOpen, onClose }}>
-        <FocusTrap active={isOpen}>
-          <div className="fixed inset-0 z-50 overflow-hidden">
-            {/* Backdrop */}
-            <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"
-            />
-            {/* Drawer Panel */}
-            <div className={cn(drawerVariants({ placement }))}>
-              {children}
-            </div>
-          </div>
-        </FocusTrap>
-      </DrawerContext.Provider>
-    </Portal>
-  );
-}
-
-export const DrawerHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    const { onClose } = useDrawer();
-    return (
-      <div
-        ref={ref}
-        className={cn('flex items-center justify-between p-5 border-b border-[var(--ui-border-subtle)]', className)}
-        {...props}
-      >
-        <div className="flex-1">{children}</div>
-        <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"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-    );
-  }
-);
-DrawerHeader.displayName = 'DrawerHeader';
-
-export const DrawerBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn('flex-1 p-5 overflow-y-auto', className)} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-DrawerBody.displayName = 'DrawerBody';
-
-export const DrawerFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div
-        ref={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}
-      </div>
-    );
-  }
-);
-DrawerFooter.displayName = 'DrawerFooter';
+import React, { forwardRef, createContext, useContext, useEffect, useId } 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 DrawerContextType {
+  isOpen: boolean;
+  onClose: () => void;
+  titleId: string;
+}
+
+const DrawerContext = createContext<DrawerContextType | null>(null);
+
+export function useDrawer() {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error('Drawer compound components must be used within a <Drawer />');
+  }
+  return context;
+}
+
+export const 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',
+    },
+  }
+);
+
+export interface DrawerProps extends VariantProps<typeof drawerVariants> {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  closeOnEsc?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export function Drawer({
+  isOpen,
+  onClose,
+  placement = 'right',
+  children,
+  closeOnEsc = true,
+  'aria-label': ariaLabel,
+  'aria-labelledby': customLabelledBy,
+}: DrawerProps) {
+  const generatedId = useId();
+  const titleId = customLabelledBy || `drawer-title-${generatedId}`;
+
+  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;
+
+  return (
+    <Portal>
+      <DrawerContext.Provider value={{ isOpen, onClose, titleId }}>
+        <FocusTrap active={isOpen} restoreFocus={true}>
+          <div
+            className="fixed inset-0 z-50 overflow-hidden"
+            role="dialog"
+            aria-modal="true"
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : titleId}
+          >
+            {/* Backdrop */}
+            <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"
+            />
+            {/* Drawer Panel */}
+            <div className={cn(drawerVariants({ placement }))}>
+              {children}
+            </div>
+          </div>
+        </FocusTrap>
+      </DrawerContext.Provider>
+    </Portal>
+  );
+}
+
+export const DrawerHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, id, ...props }, ref) => {
+    const { onClose, titleId } = useDrawer();
+    return (
+      <div
+        ref={ref}
+        id={id || titleId}
+        className={cn('flex items-center justify-between p-5 border-b border-[var(--ui-border-subtle)]', className)}
+        {...props}
+      >
+        <div className="flex-1 font-semibold text-base text-[var(--ui-text-primary)]">{children}</div>
+        <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 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+    );
+  }
+);
+DrawerHeader.displayName = 'DrawerHeader';
+
+export const DrawerBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex-1 p-5 overflow-y-auto', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+DrawerBody.displayName = 'DrawerBody';
+
+export const DrawerFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={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}
+      </div>
+    );
+  }
+);
+DrawerFooter.displayName = 'DrawerFooter';