@jmruthers/pace-core 0.2.7 → 0.4.1

package/src/components/Avatar/index.ts

@@ -1,2 +0,0 @@
-
-export { Avatar, AvatarImage, AvatarFallback } from './Avatar';

package/src/components/Button/Button.tsx

@@ -1,270 +0,0 @@
-/**
- * @file Button Component Suite
- * @package @jmruthers/pace-core
- * @module Components
- * @since 0.1.0
- *
- * A comprehensive button component suite including Button, ButtonGroup, and IconButton.
- * Provides flexible, accessible button components with consistent styling and behavior.
- *
- * Features:
- * - Multiple variants (default, destructive, outline, secondary, ghost, link)
- * - Multiple sizes (default, sm, lg, icon)
- * - Button grouping with consistent styling
- * - Icon-only buttons with accessibility support
- * - Tooltip integration for icon buttons
- * - Composition support with asChild prop
- *
- * @example
- * ```tsx
- * // Basic button
- * <Button>Click me</Button>
- * 
- * // Button with variants
- * <Button variant="destructive" size="lg">Delete</Button>
- * 
- * // Button group
- * <ButtonGroup variant="outline" spacing="md">
- *   <Button>Cancel</Button>
- *   <Button variant="primary">Save</Button>
- * </ButtonGroup>
- * 
- * // Icon button
- * <IconButton 
- *   icon={<Settings />} 
- *   aria-label="Settings"
- *   tooltip="Open settings"
- * />
- * ```
- *
- * @accessibility
- * - Proper ARIA attributes and roles
- * - Keyboard navigation support
- * - Screen reader friendly
- * - Focus management
- */
-
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../utils/cn';
-import { Tooltip } from '../Tooltip';
-
-// ============================================================================
-// BASE BUTTON COMPONENT
-// ============================================================================
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Visual variant of the button */
-  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-  /** Size of the button */
-  size?: 'default' | 'sm' | 'lg' | 'icon';
-  /** Whether to render as a different element using Radix Slot */
-  asChild?: boolean;
-}
-
-/**
- * Get button classes based on variant and size
- */
-function getButtonClasses(variant: ButtonProps['variant'] = 'default', size: ButtonProps['size'] = 'default'): string {
-  const baseClasses = 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50';
-  
-  const variantClasses = {
-    default: 'bg-main-600 text-main-50 shadow hover:bg-acc-400',
-    destructive: 'bg-acc-600 text-acc-50 shadow-sm hover:bg-acc-400',
-    outline: 'border border-main-300 bg-background shadow-sm hover:bg-acc-400',
-    secondary: 'bg-sec-100 text-sec-900 shadow-sm hover:bg-acc-400',
-    ghost: 'hover:bg-acc-400',
-    link: 'text-primary underline-offset-4 hover:underline text-shadow-md hover:text-shadow-accent',
-  };
-  
-  const sizeClasses = {
-    default: 'h-9 px-4 py-2',
-    sm: 'h-8 rounded-md px-3 text-xs',
-    lg: 'h-10 rounded-md px-8',
-    icon: 'h-8 w-8',
-  };
-  
-  return `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`;
-}
-
-/**
- * Button Component
- * A flexible, accessible button component with multiple variants and sizes.
- * 
- * @component
- * @example
- * ```tsx
- * // Basic button
- * <Button>Click me</Button>
- * 
- * // Button with variant and size
- * <Button variant="destructive" size="lg">Delete</Button>
- * 
- * // Button as child (composition)
- * <Button asChild>
- *   <Link href="/dashboard">Go to Dashboard</Link>
- * </Button>
- * ```
- */
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, type = 'button', disabled, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(getButtonClasses(variant, size), className)}
-        ref={ref}
-        type={!asChild ? type : undefined}
-        disabled={disabled}
-        aria-disabled={disabled ? 'true' : undefined}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-// ============================================================================
-// BUTTON GROUP COMPONENT
-// ============================================================================
-
-export type ButtonGroupProps = {
-  /** Child elements to be rendered in the group */
-  children: React.ReactNode;
-  /** Layout orientation of the button group */
-  orientation?: 'horizontal' | 'vertical';
-  /** Visual variant to apply to all buttons in the group */
-  variant?: 'default' | 'outline' | 'ghost';
-  /** Size to apply to all buttons in the group */
-  size?: 'sm' | 'default' | 'lg';
-  /** Additional CSS classes to apply to the group container */
-  className?: string;
-  /** Spacing between buttons in the group */
-  spacing?: 'none' | 'sm' | 'md' | 'lg';
-};
-
-/**
- * A component that groups multiple buttons together with consistent styling and spacing.
- * Automatically applies variant and size props to child Button components.
- * 
- * @component
- * @example
- * ```tsx
- * // Basic horizontal group
- * <ButtonGroup>
- *   <Button>Cancel</Button>
- *   <Button variant="primary">Save</Button>
- * </ButtonGroup>
- * 
- * // Vertical group with custom spacing
- * <ButtonGroup 
- *   orientation="vertical" 
- *   spacing="md"
- *   variant="outline"
- * >
- *   <Button>Option 1</Button>
- *   <Button>Option 2</Button>
- *   <Button>Option 3</Button>
- * </ButtonGroup>
- * ```
- */
-export function ButtonGroup({
-  children,
-  orientation = 'horizontal',
-  variant,
-  size,
-  className,
-  spacing = 'sm'
-}: ButtonGroupProps) {
-  const spacingClasses = {
-    none: '',
-    sm: orientation === 'horizontal' ? 'space-x-1' : 'space-y-1',
-    md: orientation === 'horizontal' ? 'space-x-2' : 'space-y-2',
-    lg: orientation === 'horizontal' ? 'space-x-4' : 'space-y-4'
-  };
-
-  return (
-    <div
-      className={cn(
-        'flex',
-        orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
-        spacingClasses[spacing],
-        className
-      )}
-      role="group"
-    >
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child) && child.type && 
-            (child.type as any).displayName === 'Button') {
-          return React.cloneElement(child, {
-            variant: child.props.variant || variant,
-            size: child.props.size || size,
-            ...child.props
-          });
-        }
-        return child;
-      })}
-    </div>
-  );
-}
-
-// ============================================================================
-// ICON BUTTON COMPONENT
-// ============================================================================
-
-export type IconButtonProps = Omit<ButtonProps, 'children'> & {
-  /** The icon element to display in the button */
-  icon: React.ReactNode;
-  /** Accessibility label for the button (required for screen readers) */
-  'aria-label': string;
-  /** Optional tooltip text to show on hover */
-  tooltip?: string;
-};
-
-/**
- * IconButton Component
- * A button component specifically designed for icon-only interactions.
- * 
- * @component
- * @example
- * ```tsx
- * <IconButton 
- *   icon={<Settings />} 
- *   aria-label="Settings"
- *   tooltip="Open settings"
- *   onClick={handleClick} 
- * />
- * ```
- */
-export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, className, size = 'icon', 'aria-label': ariaLabel, tooltip, ...props }, ref) => {
-    const button = (
-      <Button
-        ref={ref}
-        size={size}
-        className={cn('shrink-0', className)}
-        aria-label={ariaLabel}
-        {...props}
-      >
-        {icon}
-      </Button>
-    );
-
-    if (tooltip) {
-      return (
-        <Tooltip content={tooltip}>
-          {button}
-        </Tooltip>
-      );
-    }
-
-    return button;
-  }
-);
-
-IconButton.displayName = 'IconButton';
-
-// ============================================================================
-// EXPORTS
-// ============================================================================
-
-export { Button };

package/src/components/Button/__tests__/Button.accessibility.test.tsx

@@ -1,131 +0,0 @@
-/**
- * @file Button Accessibility Tests
- * @description Accessibility tests for Button, IconButton, and ButtonGroup
- */
-
-import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { Button, IconButton, ButtonGroup } from '../Button';
-import { Settings } from 'lucide-react';
-import { renderWithProviders, testComponentAccessibility } from '../../../__tests__/shared';
-
-// Mock Tooltip to passthrough
-vi.mock('../../Tooltip', () => ({
-  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-// Mock Settings icon
-vi.mock('lucide-react', () => ({
-  Settings: () => <span data-testid="mock-settings-icon">icon</span>,
-}));
-
-// Button Accessibility
-
-describe('Button Accessibility', () => {
-  it('should render a button with correct role and label', () => {
-      renderWithProviders(<Button>Click me</Button>);
-    const btn = screen.getByRole('button', { name: 'Click me' });
-    expect(btn).toBeInTheDocument();
-    expect(btn).toHaveAttribute('type', 'button');
-  });
-
-  it('should support all variants and sizes', () => {
-    renderWithProviders(
-      <>
-        <Button variant="destructive">Destructive</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button variant="link">Link</Button>
-        <Button size="sm">Small</Button>
-        <Button size="lg">Large</Button>
-        <Button size="icon">Icon</Button>
-      </>
-    );
-    expect(screen.getByRole('button', { name: 'Destructive' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Outline' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Secondary' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Ghost' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Link' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Small' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Large' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Icon' })).toBeInTheDocument();
-  });
-
-  it('should be focusable and clickable with keyboard', () => {
-    const handleClick = vi.fn();
-      renderWithProviders(<Button onClick={handleClick}>Press</Button>);
-    const btn = screen.getByRole('button', { name: 'Press' });
-    btn.focus();
-    expect(document.activeElement).toBe(btn);
-    fireEvent.keyDown(btn, { key: 'Enter' });
-    fireEvent.click(btn);
-    expect(handleClick).toHaveBeenCalled();
-  });
-
-  it('should have aria-disabled and not be clickable when disabled', () => {
-    const handleClick = vi.fn();
-      renderWithProviders(<Button disabled onClick={handleClick}>Disabled</Button>);
-    const btn = screen.getByRole('button', { name: 'Disabled' });
-    expect(btn).toHaveAttribute('aria-disabled', 'true');
-    expect(btn).toBeDisabled();
-    fireEvent.click(btn);
-    expect(handleClick).not.toHaveBeenCalled();
-  });
-});
-
-// IconButton Accessibility
-
-describe('IconButton Accessibility', () => {
-  it('should have aria-label for screen readers', () => {
-      renderWithProviders(<IconButton icon={<Settings />} aria-label="Settings" />);
-    const btn = screen.getByRole('button', { name: 'Settings' });
-    expect(btn).toBeInTheDocument();
-    expect(btn).toHaveAttribute('aria-label', 'Settings');
-  });
-
-  it('should be focusable and clickable', () => {
-    const handleClick = vi.fn();
-      renderWithProviders(<IconButton icon={<Settings />} aria-label="Settings" onClick={handleClick} />);
-    const btn = screen.getByRole('button', { name: 'Settings' });
-    btn.focus();
-    expect(document.activeElement).toBe(btn);
-    fireEvent.click(btn);
-    expect(handleClick).toHaveBeenCalled();
-  });
-});
-
-// ButtonGroup Accessibility
-
-describe('ButtonGroup Accessibility', () => {
-  it('should have role group and contain buttons', () => {
-    renderWithProviders(
-      <ButtonGroup>
-        <Button>One</Button>
-        <Button>Two</Button>
-      </ButtonGroup>
-    );
-    const group = screen.getByRole('group');
-    expect(group).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'One' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Two' })).toBeInTheDocument();
-  });
-
-  it('should support keyboard navigation between buttons', () => {
-    renderWithProviders(
-      <ButtonGroup>
-        <Button>First</Button>
-        <Button>Second</Button>
-      </ButtonGroup>
-    );
-    const first = screen.getByRole('button', { name: 'First' });
-    const second = screen.getByRole('button', { name: 'Second' });
-    first.focus();
-    expect(document.activeElement).toBe(first);
-    fireEvent.keyDown(first, { key: 'Tab' });
-    // Note: jsdom does not move focus on Tab, so we only check initial focus
-    expect(document.activeElement).toBe(first);
-  });
-});