@thangnqdev/ui 0.1.0

package/src/layout/Stack.tsx

@@ -0,0 +1,88 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const stackVariants = cva('flex', {
+  variants: {
+    direction: {
+      row: 'flex-row',
+      'row-reverse': 'flex-row-reverse',
+      column: 'flex-col',
+      'column-reverse': 'flex-col-reverse',
+    },
+    gap: {
+      0: 'gap-0',
+      1: 'gap-1',
+      2: 'gap-2',
+      3: 'gap-3',
+      4: 'gap-4',
+      5: 'gap-5',
+      6: 'gap-6',
+      8: 'gap-8',
+      10: 'gap-10',
+      12: 'gap-12',
+    },
+    align: {
+      start: 'items-start',
+      center: 'items-center',
+      end: 'items-end',
+      stretch: 'items-stretch',
+      baseline: 'items-baseline',
+    },
+    justify: {
+      start: 'justify-start',
+      center: 'justify-center',
+      end: 'justify-end',
+      between: 'justify-between',
+      around: 'justify-around',
+      evenly: 'justify-evenly',
+    },
+    wrap: {
+      nowrap: 'flex-nowrap',
+      wrap: 'flex-wrap',
+      'wrap-reverse': 'flex-wrap-reverse',
+    },
+  },
+  defaultVariants: {
+    direction: 'column',
+    gap: 4,
+    align: 'stretch',
+    justify: 'start',
+    wrap: 'nowrap',
+  },
+});
+
+export interface StackProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof stackVariants> {
+  as?: React.ElementType;
+}
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  ({ className, direction, gap, align, justify, wrap, as: Component = 'div', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(stackVariants({ direction, gap, align, justify, wrap }), className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+Stack.displayName = 'Stack';
+
+export const HStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  ({ align = 'center', ...props }, ref) => {
+    return <Stack ref={ref} direction="row" align={align} {...props} />;
+  }
+);
+HStack.displayName = 'HStack';
+
+export const VStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  ({ align = 'stretch', ...props }, ref) => {
+    return <Stack ref={ref} direction="column" align={align} {...props} />;
+  }
+);
+VStack.displayName = 'VStack';

package/src/layout/index.ts

@@ -0,0 +1,10 @@
+export * from './Container';
+export * from './Section';
+export * from './Stack';
+export * from './Grid';
+export * from './Flex';
+export * from './Divider';
+export * from './Spacer';
+export * from './AspectRatio';
+export * from './PageLayout';
+export * from './ScrollArea';

package/src/layout/tokens.css

@@ -0,0 +1,8 @@
+/* Layout Tokens */
+:root {
+  --ui-container-sm: 640px;
+  --ui-container-md: 768px;
+  --ui-container-lg: 1024px;
+  --ui-container-xl: 1280px;
+  --ui-container-2xl: 1536px;
+}

package/src/navigation/Breadcrumb.tsx

@@ -0,0 +1,73 @@
+import React, { forwardRef } from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const Breadcrumb = forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <nav ref={ref} aria-label="Breadcrumb" className={cn('flex items-center text-sm', className)} {...props}>
+        <ol className="flex items-center gap-1.5 sm:gap-2">{children}</ol>
+      </nav>
+    );
+  }
+);
+Breadcrumb.displayName = 'Breadcrumb';
+
+export const BreadcrumbItem = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props}>
+        {children}
+      </li>
+    );
+  }
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  as?: React.ElementType;
+}
+
+export const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
+  ({ className, as: Component = 'a', children, ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn('text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)] transition-colors font-medium', className)}
+        {...props}
+      >
+        {children}
+      </Component>
+    );
+  }
+);
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+export const BreadcrumbPage = forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn('font-semibold text-[var(--ui-text-primary)]', className)}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+export const BreadcrumbSeparator = forwardRef<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <li ref={ref} role="presentation" aria-hidden="true" className={cn('text-[var(--ui-text-muted)] opacity-60', className)} {...props}>
+        {children || <ChevronRight className="w-3.5 h-3.5" />}
+      </li>
+    );
+  }
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';

package/src/navigation/CommandPalette.tsx

@@ -0,0 +1,142 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Search } from 'lucide-react';
+import { Portal } from '../overlays/Portal';
+import { FocusTrap } from '../overlays/FocusTrap';
+import { Kbd } from '../typography/Kbd';
+import { cn } from '../utils/cn';
+
+export interface CommandItem {
+  id: string;
+  title: string;
+  category?: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect: () => void;
+}
+
+export interface CommandPaletteProps {
+  isOpen: boolean;
+  onClose: () => void;
+  items: CommandItem[];
+  placeholder?: string;
+}
+
+export function CommandPalette({
+  isOpen,
+  onClose,
+  items,
+  placeholder = 'Type a command or search...',
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const filteredItems = items.filter((item) =>
+    item.title.toLowerCase().includes(query.toLowerCase()) ||
+    item.category?.toLowerCase().includes(query.toLowerCase())
+  );
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setQuery('');
+      setSelectedIndex(0);
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev < filteredItems.length - 1 ? prev + 1 : 0));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : filteredItems.length - 1));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (filteredItems[selectedIndex]) {
+          filteredItems[selectedIndex].onSelect();
+          onClose();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, filteredItems, selectedIndex, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <Portal>
+      <FocusTrap active={isOpen}>
+        <div className="fixed inset-0 z-50 flex items-start justify-center pt-20 p-4 sm:p-6">
+          {/* 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"
+          />
+
+          {/* Palette Box */}
+          <div className="relative w-full max-w-xl rounded-[var(--ui-radius-xl)] bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] shadow-2xl overflow-hidden z-10 animate-in zoom-in-95 duration-150">
+            {/* Search Bar */}
+            <div className="flex items-center px-4 py-3 border-b border-[var(--ui-border-subtle)] gap-3">
+              <Search className="w-5 h-5 text-[var(--ui-text-muted)]" />
+              <input
+                type="text"
+                autoFocus
+                placeholder={placeholder}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                className="flex-1 bg-transparent text-sm text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] focus:outline-none"
+              />
+              <Kbd>ESC</Kbd>
+            </div>
+
+            {/* List items */}
+            <div className="max-h-80 overflow-y-auto p-2">
+              {filteredItems.length === 0 ? (
+                <div className="py-8 text-center text-xs text-[var(--ui-text-muted)]">
+                  No commands found matching "{query}".
+                </div>
+              ) : (
+                filteredItems.map((item, idx) => {
+                  const isSelected = idx === selectedIndex;
+                  return (
+                    <div
+                      key={item.id}
+                      onClick={() => {
+                        item.onSelect();
+                        onClose();
+                      }}
+                      onMouseEnter={() => setSelectedIndex(idx)}
+                      className={cn(
+                        'flex items-center gap-3 px-3 py-2.5 rounded-[var(--ui-radius-md)] cursor-pointer text-xs font-medium transition-colors',
+                        isSelected
+                          ? 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]'
+                          : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
+                      )}
+                    >
+                      {item.icon && <span className="flex-shrink-0">{item.icon}</span>}
+                      <span className="flex-1 truncate">{item.title}</span>
+                      {item.category && (
+                        <span className={cn('text-[10px] uppercase font-semibold tracking-wider opacity-70', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')}>
+                          {item.category}
+                        </span>
+                      )}
+                      {item.shortcut && <Kbd>{item.shortcut}</Kbd>}
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        </div>
+      </FocusTrap>
+    </Portal>
+  );
+}

package/src/navigation/DropdownMenu.tsx

@@ -0,0 +1,160 @@
+import React, { createContext, useContext, useState, useRef, useEffect, forwardRef } from 'react';
+import { Portal } from '../overlays/Portal';
+import { cn } from '../utils/cn';
+
+interface DropdownContextType {
+  isOpen: boolean;
+  setIsOpen: (val: boolean) => void;
+  triggerRect: DOMRect | null;
+  setTriggerRect: (rect: DOMRect | null) => void;
+}
+
+const DropdownContext = createContext<DropdownContextType | null>(null);
+
+export function useDropdown() {
+  const context = useContext(DropdownContext);
+  if (!context) throw new Error('DropdownMenu components must be used within <DropdownMenu />');
+  return context;
+}
+
+export interface DropdownMenuProps {
+  children: React.ReactNode;
+}
+
+export function DropdownMenu({ children }: DropdownMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null);
+
+  return (
+    <DropdownContext.Provider value={{ isOpen, setIsOpen, triggerRect, setTriggerRect }}>
+      <div className="relative inline-block text-left">{children}</div>
+    </DropdownContext.Provider>
+  );
+}
+
+export const DropdownMenuTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, onClick, ...props }, ref) => {
+    const { isOpen, setIsOpen, setTriggerRect } = useDropdown();
+    const triggerRef = useRef<HTMLDivElement>(null);
+
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (triggerRef.current) {
+        setTriggerRect(triggerRef.current.getBoundingClientRect());
+      }
+      setIsOpen(!isOpen);
+      onClick?.(e);
+    };
+
+    return (
+      <div ref={triggerRef} onClick={handleClick} className="inline-flex cursor-pointer" {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+
+export interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  align?: 'start' | 'end';
+}
+
+export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ className, align = 'start', children, ...props }, ref) => {
+    const { isOpen, setIsOpen, triggerRect } = useDropdown();
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const handleOutside = (e: MouseEvent) => {
+        if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener('mousedown', handleOutside);
+      }
+      return () => document.removeEventListener('mousedown', handleOutside);
+    }, [isOpen, setIsOpen]);
+
+    if (!isOpen || !triggerRect) return null;
+
+    const top = triggerRect.bottom + window.scrollY + 6;
+    const left =
+      align === 'end'
+        ? triggerRect.right + window.scrollX
+        : triggerRect.left + window.scrollX;
+
+    return (
+      <Portal>
+        <div
+          ref={menuRef}
+          style={{
+            position: 'absolute',
+            top: `${top}px`,
+            left: `${left}px`,
+          }}
+          className={cn(
+            'z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] p-1 text-[var(--ui-text-primary)] shadow-xl animate-in fade-in zoom-in-95',
+            align === 'end' && '-translate-x-full',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </Portal>
+    );
+  }
+);
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+export interface DropdownMenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+  shortcut?: string;
+  destructive?: boolean;
+}
+
+export const DropdownMenuItem = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(
+  ({ className, icon, shortcut, destructive = false, children, onClick, ...props }, ref) => {
+    const { setIsOpen } = useDropdown();
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={(e) => {
+          onClick?.(e);
+          setIsOpen(false);
+        }}
+        className={cn(
+          'relative flex w-full cursor-pointer select-none items-center gap-2 rounded-[var(--ui-radius-sm)] px-2.5 py-1.5 text-xs font-medium outline-none transition-colors hover:bg-[var(--ui-bg-tertiary)] disabled:pointer-events-none disabled:opacity-50 text-left',
+          destructive && 'text-[var(--ui-error)] hover:bg-[var(--ui-error-subtle)]',
+          className
+        )}
+        {...props}
+      >
+        {icon && <span className="flex-shrink-0 text-current">{icon}</span>}
+        <span className="flex-1 truncate">{children}</span>
+        {shortcut && <span className="ml-auto text-[10px] text-[var(--ui-text-muted)] tracking-widest">{shortcut}</span>}
+      </button>
+    );
+  }
+);
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+export const DropdownMenuSeparator = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return <div ref={ref} className={cn('-mx-1 my-1 h-px bg-[var(--ui-border-subtle)]', className)} {...props} />;
+  }
+);
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+export const DropdownMenuLabel = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('px-2.5 py-1.5 text-[11px] font-semibold text-[var(--ui-text-muted)] uppercase tracking-wider', className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';

package/src/navigation/Pagination.tsx

@@ -0,0 +1,114 @@
+import React, { forwardRef } from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Button } from '../buttons/Button';
+import { cn } from '../utils/cn';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+}
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  ({ className, currentPage, totalPages, onPageChange, siblingCount = 1, ...props }, ref) => {
+    const generatePages = () => {
+      const totalPageNumbers = siblingCount * 2 + 5;
+
+      if (totalPages <= totalPageNumbers) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+      }
+
+      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+      const shouldShowLeftDots = leftSiblingIndex > 2;
+      const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+
+      if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemCount = 3 + 2 * siblingCount;
+        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+        return [...leftRange, 'DOTS', totalPages];
+      }
+
+      if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemCount = 3 + 2 * siblingCount;
+        const rightRange = Array.from(
+          { length: rightItemCount },
+          (_, i) => totalPages - rightItemCount + i + 1
+        );
+        return [1, 'DOTS', ...rightRange];
+      }
+
+      if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = Array.from(
+          { length: rightSiblingIndex - leftSiblingIndex + 1 },
+          (_, i) => leftSiblingIndex + i
+        );
+        return [1, 'DOTS', ...middleRange, 'DOTS', totalPages];
+      }
+
+      return [];
+    };
+
+    const pages = generatePages();
+
+    return (
+      <nav
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        className={cn('flex items-center justify-center gap-1.5', className)}
+        {...props}
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage <= 1}
+          onClick={() => onPageChange(currentPage - 1)}
+          aria-label="Go to previous page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+
+        {pages.map((p, index) => {
+          if (p === 'DOTS') {
+            return (
+              <span key={`dots-${index}`} className="flex items-center justify-center w-8 h-8 text-[var(--ui-text-muted)]">
+                <MoreHorizontal className="w-4 h-4" />
+              </span>
+            );
+          }
+
+          const pageNum = Number(p);
+          const isActive = pageNum === currentPage;
+
+          return (
+            <Button
+              key={pageNum}
+              variant={isActive ? 'primary' : 'ghost'}
+              size="sm"
+              aria-current={isActive ? 'page' : undefined}
+              onClick={() => onPageChange(pageNum)}
+              className="w-8 h-8 p-0 text-xs font-semibold"
+            >
+              {pageNum}
+            </Button>
+          );
+        })}
+
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage >= totalPages}
+          onClick={() => onPageChange(currentPage + 1)}
+          aria-label="Go to next page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = 'Pagination';

package/src/navigation/Stepper.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface StepItem {
+  title: string;
+  description?: string;
+}
+
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: StepItem[];
+  currentStep: number;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
+  ({ className, steps, currentStep, orientation = 'horizontal', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="navigation"
+        aria-label="Progress Stepper"
+        className={cn(
+          'flex',
+          orientation === 'horizontal'
+            ? 'flex-row items-center w-full justify-between'
+            : 'flex-col space-y-6',
+          className
+        )}
+        {...props}
+      >
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isActive = index === currentStep;
+          const isPending = index > currentStep;
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                'flex items-center',
+                orientation === 'horizontal' ? 'flex-1 last:flex-none' : 'flex-row items-start'
+              )}
+            >
+              <div className="flex items-center gap-3">
+                {/* Step indicator circle */}
+                <div
+                  className={cn(
+                    'flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors flex-shrink-0',
+                    isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
+                    isActive && 'border-2 border-[var(--ui-primary)] text-[var(--ui-primary)] bg-[var(--ui-bg-surface)] ring-4 ring-[var(--ui-primary)]/20',
+                    isPending && 'border border-[var(--ui-border-default)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
+                  )}
+                >
+                  {isCompleted ? <Check className="w-4 h-4 stroke-[3]" /> : index + 1}
+                </div>
+
+                {/* Step details */}
+                <div className="flex flex-col">
+                  <span
+                    className={cn(
+                      'text-xs font-semibold',
+                      isActive ? 'text-[var(--ui-text-primary)]' : 'text-[var(--ui-text-muted)]'
+                    )}
+                  >
+                    {step.title}
+                  </span>
+                  {step.description && (
+                    <span className="text-[11px] text-[var(--ui-text-muted)] opacity-80">
+                      {step.description}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Connecting line */}
+              {orientation === 'horizontal' && index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'flex-1 h-0.5 mx-4 transition-colors',
+                    isCompleted ? 'bg-[var(--ui-primary)]' : 'bg-[var(--ui-border-subtle)]'
+                  )}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Stepper.displayName = 'Stepper';