@thangnqdev/ui 0.2.1 → 0.2.2

package/src/overlays/ContextMenu.tsx

@@ -1,161 +1,161 @@
-import React, { useState, useEffect, useRef, forwardRef } from 'react';
-import { cn } from '../utils/cn';
-import { Portal } from './Portal';
-import { Kbd } from '../typography/Kbd';
-
-export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  icon?: React.ReactNode;
-  shortcut?: string;
-  disabled?: boolean;
-  destructive?: boolean;
-  onSelect?: () => void;
-}
-
-export const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
-  icon,
-  shortcut,
-  disabled = false,
-  destructive = false,
-  onSelect,
-  children,
-  className,
-  ...props
-}) => {
-  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 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 focus:bg-rose-500/10'
-          : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
-        className
-      )}
-      {...props}
-    >
-      <div className="flex items-center gap-2 truncate">
-        {icon && <span className="w-4 h-4 shrink-0">{icon}</span>}
-        <span className="truncate">{children}</span>
-      </div>
-
-      {shortcut && <Kbd className="text-[10px] py-0 px-1">{shortcut}</Kbd>}
-    </div>
-  );
-};
-
-export const ContextMenuSeparator: React.FC = () => (
-  <div className="h-px my-1 bg-[var(--ui-border-subtle)]" role="separator" />
-);
-
-export interface ContextMenuProps {
-  children: React.ReactNode;
-  menuContent: React.ReactNode;
-  className?: string;
-}
-
-export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
-  ({ children, menuContent, className }, ref) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
-    const menuRef = useRef<HTMLDivElement | null>(null);
-
-    const handleContextMenu = (e: React.MouseEvent) => {
-      e.preventDefault();
-      const x = Math.min(window.innerWidth - 220, e.clientX);
-      const y = Math.min(window.innerHeight - 260, e.clientY);
-      setPosition({ x, y });
-      setIsOpen(true);
-    };
-
-    useEffect(() => {
-      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 (!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);
-        }
-      };
-
-      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);
-      };
-    }, [isOpen]);
-
-    return (
-      <>
-        <div ref={ref} onContextMenu={handleContextMenu} className={className}>
-          {children}
-        </div>
-
-        {isOpen && (
-          <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 focus:outline-none"
-            >
-              {menuContent}
-            </div>
-          </Portal>
-        )}
-      </>
-    );
-  }
-);
-ContextMenu.displayName = 'ContextMenu';
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import { cn } from '../utils/cn';
+import { Portal } from './Portal';
+import { Kbd } from '../typography/Kbd';
+
+export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  destructive?: boolean;
+  onSelect?: () => void;
+}
+
+export const ContextMenuItem: React.FC<ContextMenuItemProps> = ({
+  icon,
+  shortcut,
+  disabled = false,
+  destructive = false,
+  onSelect,
+  children,
+  className,
+  ...props
+}) => {
+  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 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 focus:bg-rose-500/10'
+          : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2 truncate">
+        {icon && <span className="w-4 h-4 shrink-0">{icon}</span>}
+        <span className="truncate">{children}</span>
+      </div>
+
+      {shortcut && <Kbd className="text-[10px] py-0 px-1">{shortcut}</Kbd>}
+    </div>
+  );
+};
+
+export const ContextMenuSeparator: React.FC = () => (
+  <div className="h-px my-1 bg-[var(--ui-border-subtle)]" role="separator" />
+);
+
+export interface ContextMenuProps {
+  children: React.ReactNode;
+  menuContent: React.ReactNode;
+  className?: string;
+}
+
+export const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
+  ({ children, menuContent, className }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+    const menuRef = useRef<HTMLDivElement | null>(null);
+
+    const handleContextMenu = (e: React.MouseEvent) => {
+      e.preventDefault();
+      const x = Math.min(window.innerWidth - 220, e.clientX);
+      const y = Math.min(window.innerHeight - 260, e.clientY);
+      setPosition({ x, y });
+      setIsOpen(true);
+    };
+
+    useEffect(() => {
+      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 (!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);
+        }
+      };
+
+      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);
+      };
+    }, [isOpen]);
+
+    return (
+      <>
+        <div ref={ref} onContextMenu={handleContextMenu} className={className}>
+          {children}
+        </div>
+
+        {isOpen && (
+          <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 focus:outline-none"
+            >
+              {menuContent}
+            </div>
+          </Portal>
+        )}
+      </>
+    );
+  }
+);
+ContextMenu.displayName = 'ContextMenu';

package/src/overlays/Drawer.tsx

@@ -1,160 +1,160 @@
-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';
+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';