@thangnqdev/ui 0.2.0 → 0.2.2

package/src/overlays/AlertDialog.tsx

@@ -1,63 +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;
-  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';
+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,143 +1,143 @@
-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;
-  onClose: () => void;
-  children: React.ReactNode;
-  title?: string;
-  description?: string;
-  className?: string;
-  showHandle?: boolean;
-  maxHeight?: string;
-  'aria-label'?: string;
-}
-
-export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
-  (
-    {
-      isOpen,
-      onClose,
-      children,
-      title,
-      description,
-      className,
-      showHandle = true,
-      maxHeight = 'max-h-[85vh]',
-      'aria-label': ariaLabel,
-    },
-    ref
-  ) => {
-    const generatedId = useId();
-    const titleId = `bottomsheet-title-${generatedId}`;
-    const descId = `bottomsheet-desc-${generatedId}`;
-
-    useEffect(() => {
-      if (!isOpen) return;
-
-      lockBodyScroll();
-
-      const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          onClose();
-        }
-      };
-
-      window.addEventListener('keydown', handleKeyDown);
-      return () => {
-        window.removeEventListener('keydown', handleKeyDown);
-        unlockBodyScroll();
-      };
-    }, [isOpen, onClose]);
-
-    if (!isOpen) return null;
-
-    return (
-      <Portal>
-        <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}
-              className="fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-in fade-in duration-300"
-              aria-hidden="true"
-            />
-
-            {/* Slide-up Sheet Panel */}
-            <div
-              ref={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
-              )}
-            >
-              {/* Drag Handle */}
-              {showHandle && (
-                <div
-                  onClick={onClose}
-                  className="w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing"
-                >
-                  <div className="w-12 h-1.5 rounded-full bg-[var(--ui-text-muted)]/40 hover:bg-[var(--ui-text-muted)] transition-colors" />
-                </div>
-              )}
-
-              {/* Header */}
-              {(title || description) && (
-                <div className="px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]">
-                  <div>
-                    {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}
-                    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>
-                </div>
-              )}
-
-              {/* Content Body */}
-              <div className="p-6 overflow-y-auto flex-1 space-y-4">
-                {children}
-              </div>
-            </div>
-          </div>
-        </FocusTrap>
-      </Portal>
-    );
-  }
-);
-BottomSheet.displayName = 'BottomSheet';
-
-export const BottomSheetHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
-  <div className={cn('px-6 pb-2', className)} {...props}>
-    {children}
-  </div>
-);
-
-export const BottomSheetBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
-  <div className={cn('px-6 py-2 overflow-y-auto', className)} {...props}>
-    {children}
-  </div>
-);
-
-export const BottomSheetFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
-  <div className={cn('p-6 pt-3 border-t border-[var(--ui-border-subtle)] flex items-center justify-end gap-3', className)} {...props}>
-    {children}
-  </div>
-);
+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;
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  className?: string;
+  showHandle?: boolean;
+  maxHeight?: string;
+  'aria-label'?: string;
+}
+
+export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
+  (
+    {
+      isOpen,
+      onClose,
+      children,
+      title,
+      description,
+      className,
+      showHandle = true,
+      maxHeight = 'max-h-[85vh]',
+      'aria-label': ariaLabel,
+    },
+    ref
+  ) => {
+    const generatedId = useId();
+    const titleId = `bottomsheet-title-${generatedId}`;
+    const descId = `bottomsheet-desc-${generatedId}`;
+
+    useEffect(() => {
+      if (!isOpen) return;
+
+      lockBodyScroll();
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        window.removeEventListener('keydown', handleKeyDown);
+        unlockBodyScroll();
+      };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+      <Portal>
+        <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}
+              className="fixed inset-0 bg-black/60 backdrop-blur-md transition-opacity animate-in fade-in duration-300"
+              aria-hidden="true"
+            />
+
+            {/* Slide-up Sheet Panel */}
+            <div
+              ref={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
+              )}
+            >
+              {/* Drag Handle */}
+              {showHandle && (
+                <div
+                  onClick={onClose}
+                  className="w-full py-3 flex items-center justify-center cursor-grab active:cursor-grabbing"
+                >
+                  <div className="w-12 h-1.5 rounded-full bg-[var(--ui-text-muted)]/40 hover:bg-[var(--ui-text-muted)] transition-colors" />
+                </div>
+              )}
+
+              {/* Header */}
+              {(title || description) && (
+                <div className="px-6 pb-3 flex items-center justify-between border-b border-[var(--ui-border-subtle)]">
+                  <div>
+                    {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}
+                    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>
+                </div>
+              )}
+
+              {/* Content Body */}
+              <div className="p-6 overflow-y-auto flex-1 space-y-4">
+                {children}
+              </div>
+            </div>
+          </div>
+        </FocusTrap>
+      </Portal>
+    );
+  }
+);
+BottomSheet.displayName = 'BottomSheet';
+
+export const BottomSheetHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
+  <div className={cn('px-6 pb-2', className)} {...props}>
+    {children}
+  </div>
+);
+
+export const BottomSheetBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
+  <div className={cn('px-6 py-2 overflow-y-auto', className)} {...props}>
+    {children}
+  </div>
+);
+
+export const BottomSheetFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
+  <div className={cn('p-6 pt-3 border-t border-[var(--ui-border-subtle)] flex items-center justify-end gap-3', className)} {...props}>
+    {children}
+  </div>
+);