Generate a component library for a B2B SaaS dashboard:
- Button (primary, secondary, ghost, danger, sizes: sm/md/lg)
- Text Input (with label, error, helper text, prefix/suffix)
- Modal (with focus trap, close on Escape, accessible title)
- Card (with header, body, footer, clickable variant)
- Navigation sidebar (collapsible, with active states, keyboard nav)
- Dropdown Select (searchable, multi-select, accessible)
- Toast/Notification (auto-dismiss, screen reader announce)
- Data Table (sortable, selectable rows, pagination)

// Button.tsx
import { forwardRef, ButtonHTMLAttributes } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';
import { Loader2 } from 'lucide-react';

const buttonVariants = cva(
  // Base styles with focus-visible ring for keyboard navigation
  'inline-flex items-center justify-center rounded-md font-medium transition-colors ' +
  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
  'disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary:   'bg-indigo-600 text-white hover:bg-indigo-700 focus-visible:ring-indigo-500',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500',
        ghost:     'hover:bg-gray-100 text-gray-700 focus-visible:ring-gray-500',
        danger:    'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
);

interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  loading?: boolean;
  icon?: React.ReactNode;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, loading, icon, children, disabled, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(buttonVariants({ variant, size }), className)}
        disabled={disabled || loading}
        aria-disabled={disabled || loading}
        aria-busy={loading}
        {...props}
      >
        {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />}
        {icon && !loading && <span className="mr-2" aria-hidden="true">{icon}</span>}
        {children}
      </button>
    );
  }
);
Button.displayName = 'Button';

export { Button, buttonVariants };
export type { ButtonProps };

## Button — Spec Sheet

### States
| State    | Visual                          | Keyboard       | Screen Reader          |
|----------|---------------------------------|----------------|------------------------|
| Default  | Standard styling                | Tab to focus    | Reads label            |
| Hover    | Darker background               | N/A             | N/A                    |
| Focus    | Ring outline (2px offset)       | Tab             | "Button, [label]"      |
| Active   | Slight scale/press effect       | Enter or Space  | N/A                    |
| Disabled | 50% opacity, no pointer events  | Skipped in tab  | "Button, [label], dimmed" |
| Loading  | Spinner icon, disabled state    | Skipped in tab  | "Button, [label], busy"|

### A11y Checklist
- [x] Minimum touch target: 44x44px (sm is 32px — add padding zone)
- [x] Color contrast: 4.5:1 minimum (all variants pass AA)
- [x] Focus indicator visible on keyboard nav
- [x] aria-disabled instead of removing from DOM
- [x] aria-busy for loading state
- [x] Icon marked aria-hidden (decorative)

// Focus trap hook used by Modal
function useFocusTrap(ref: RefObject<HTMLElement>, isOpen: boolean) {
  useEffect(() => {
    if (!isOpen || !ref.current) return;

    const focusableElements = ref.current.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    const firstEl = focusableElements[0] as HTMLElement;
    const lastEl = focusableElements[focusableElements.length - 1] as HTMLElement;

    firstEl?.focus();

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') { /* close modal */ }
      if (e.key !== 'Tab') return;

      if (e.shiftKey && document.activeElement === firstEl) {
        e.preventDefault();
        lastEl?.focus();
      } else if (!e.shiftKey && document.activeElement === lastEl) {
        e.preventDefault();
        firstEl?.focus();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, ref]);
}