@thangnqdev/ui 0.1.0

package/src/navigation/Tabs.tsx

@@ -0,0 +1,133 @@
+import React, { createContext, useContext, useState, forwardRef } from 'react';
+import { cn } from '../utils/cn';
+
+interface TabsContextType {
+  activeTab: string;
+  setActiveTab: (tab: string) => void;
+  variant?: 'pills' | 'line' | 'enclosed';
+}
+
+const TabsContext = createContext<TabsContextType | null>(null);
+
+export function useTabs() {
+  const context = useContext(TabsContext);
+  if (!context) throw new Error('Tabs compound components must be used within <Tabs />');
+  return context;
+}
+
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  variant?: 'pills' | 'line' | 'enclosed';
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ defaultValue = '', value: controlledValue, onValueChange, variant = 'pills', className, children, ...props }, ref) => {
+    const [selectedTab, setSelectedTab] = useState(defaultValue);
+    const activeTab = controlledValue !== undefined ? controlledValue : selectedTab;
+
+    const handleTabChange = (val: string) => {
+      setSelectedTab(val);
+      onValueChange?.(val);
+    };
+
+    return (
+      <TabsContext.Provider value={{ activeTab, setActiveTab: handleTabChange, variant }}>
+        <div ref={ref} className={cn('w-full flex flex-col space-y-4', className)} {...props}>
+          {children}
+        </div>
+      </TabsContext.Provider>
+    );
+  }
+);
+Tabs.displayName = 'Tabs';
+
+export const TabsList = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { variant } = useTabs();
+
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        className={cn(
+          'inline-flex items-center',
+          variant === 'pills' && 'p-1 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg-secondary)] border border-[var(--ui-border-subtle)] gap-1',
+          variant === 'line' && 'border-b border-[var(--ui-border-default)] gap-6',
+          variant === 'enclosed' && 'border-b border-[var(--ui-border-default)] gap-1',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+TabsList.displayName = 'TabsList';
+
+export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string;
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const { activeTab, setActiveTab, variant } = useTabs();
+    const isActive = activeTab === value;
+
+    return (
+      <button
+        ref={ref}
+        role="tab"
+        type="button"
+        aria-selected={isActive}
+        onClick={() => setActiveTab(value)}
+        className={cn(
+          'inline-flex items-center justify-center font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] disabled:pointer-events-none disabled:opacity-50 select-none cursor-pointer',
+          variant === 'pills' &&
+            'px-3.5 py-1.5 rounded-[var(--ui-radius-md)] text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
+          variant === 'pills' && isActive &&
+            'bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] font-semibold shadow-sm',
+          variant === 'line' &&
+            'pb-3 pt-2 text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] border-b-2 border-transparent -mb-[1px]',
+          variant === 'line' && isActive &&
+            'border-[var(--ui-primary)] text-[var(--ui-primary)] font-semibold',
+          variant === 'enclosed' &&
+            'px-4 py-2 rounded-t-[var(--ui-radius-md)] border border-transparent text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] -mb-[1px]',
+          variant === 'enclosed' && isActive &&
+            'bg-[var(--ui-bg-surface)] border-[var(--ui-border-default)] border-b-transparent text-[var(--ui-text-primary)] font-semibold',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const { activeTab } = useTabs();
+    if (activeTab !== value) return null;
+
+    return (
+      <div
+        ref={ref}
+        role="tabpanel"
+        tabIndex={0}
+        className={cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] animate-in fade-in duration-150', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+TabsContent.displayName = 'TabsContent';

package/src/navigation/index.ts

@@ -0,0 +1,6 @@
+export * from './Tabs';
+export * from './Breadcrumb';
+export * from './Pagination';
+export * from './Stepper';
+export * from './DropdownMenu';
+export * from './CommandPalette';

package/src/navigation/tokens.css

@@ -0,0 +1,4 @@
+/* Navigation Tokens */
+:root {
+  --ui-nav-height: 4rem;
+}

package/src/overlays/AlertDialog.tsx

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

package/src/overlays/BottomSheet.tsx

@@ -0,0 +1,123 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+import { cn } from '../utils/cn';
+import { Portal } from './Portal';
+import { FocusTrap } from './FocusTrap';
+
+export interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+  className?: string;
+  showHandle?: boolean;
+  maxHeight?: string;
+}
+
+export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
+  (
+    {
+      isOpen,
+      onClose,
+      children,
+      title,
+      description,
+      className,
+      showHandle = true,
+      maxHeight = 'max-h-[85vh]',
+    },
+    ref
+  ) => {
+    const sheetRef = useRef<HTMLDivElement | null>(null);
+
+    // Escape key listener
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape' && isOpen) {
+          onClose();
+        }
+      };
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+      <Portal>
+        <FocusTrap active={isOpen}>
+          <div className="fixed inset-0 z-50 flex flex-col justify-end">
+            {/* 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 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>}
+                  </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"
+                  >
+                    <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>
+);

package/src/overlays/ContextMenu.tsx

@@ -0,0 +1,119 @@
+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"
+      aria-disabled={disabled}
+      onClick={() => {
+        if (!disabled) 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',
+        disabled && 'opacity-40 cursor-not-allowed pointer-events-none',
+        destructive
+          ? 'text-rose-500 hover: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(() => {
+      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 (isOpen) {
+        window.addEventListener('click', handleClickOutside);
+        window.addEventListener('contextmenu', handleClickOutside);
+        window.addEventListener('keydown', handleKeyDown);
+      }
+      return () => {
+        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}
+              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"
+            >
+              {menuContent}
+            </div>
+          </Portal>
+        )}
+      </>
+    );
+  }
+);
+ContextMenu.displayName = 'ContextMenu';

package/src/overlays/Drawer.tsx

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

package/src/overlays/FocusTrap.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef } from 'react';
+
+export interface FocusTrapProps {
+  children: React.ReactNode;
+  active?: boolean;
+}
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function FocusTrap({ children, active = true }: FocusTrapProps) {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!active) return;
+
+    const root = rootRef.current;
+    if (!root) return;
+
+    const focusable = root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    if (first) {
+      first.focus();
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last?.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first?.focus();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [active]);
+
+  return <div ref={rootRef} className="contents">{children}</div>;
+}