@thangnqdev/ui 0.1.2 → 0.2.0

package/src/overlays/Portal.tsx

@@ -1,23 +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);
-}
+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

@@ -1,137 +1,175 @@
-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>
-  );
-}
+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 ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  type?: ToastType;
+  onDismiss?: () => void;
+}
+
+export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
+  ({ className, title, description, type = 'info', onDismiss, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        className={cn(toastVariants({ type }), className)}
+        {...props}
+      >
+        {toastIcons[type || 'info']}
+        <div className="flex-1 space-y-1">
+          <h4 className="text-sm font-semibold text-[var(--ui-text-primary)]">{title}</h4>
+          {description && <p className="text-xs text-[var(--ui-text-muted)]">{description}</p>}
+        </div>
+        {onDismiss && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            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 cursor-pointer"
+          >
+            <X className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Toast.displayName = 'Toast';
+
+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

@@ -1,100 +1,125 @@
-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>
-      )}
-    </>
-  );
-}
+import React, { useState, useRef, useId, useEffect } 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;
+  id?: string;
+}
+
+export function Tooltip({
+  content,
+  children,
+  placement = 'top',
+  delayDuration = 200,
+  className,
+  id: customId,
+}: TooltipProps) {
+  const generatedId = useId();
+  const tooltipId = customId || `tooltip-${generatedId}`;
+
+  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 calculatePosition = () => {
+    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 });
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      calculatePosition();
+      setIsVisible(true);
+    }, delayDuration);
+  };
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(false);
+  };
+
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isVisible]);
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onFocus={handleMouseEnter}
+        onBlur={handleMouseLeave}
+        aria-describedby={isVisible ? tooltipId : undefined}
+        className="inline-flex cursor-pointer"
+      >
+        {children}
+      </div>
+
+      {isVisible && (
+        <Portal>
+          <div
+            id={tooltipId}
+            role="tooltip"
+            style={{ top: `${coords.top}px`, left: `${coords.left}px`, position: 'absolute' }}
+            className={cn(tooltipVariants({ placement }), className)}
+          >
+            {content}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+}

package/src/overlays/tokens.css

@@ -1,8 +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;
-}
+/* Overlay Tokens */
+:root {
+  --ui-z-drawer: 40;
+  --ui-z-modal: 50;
+  --ui-z-popover: 60;
+  --ui-z-tooltip: 70;
+  --ui-z-toast: 100;
+}