@jmruthers/pace-core 0.5.135 → 0.5.137

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,314 @@
+/**
+ * @file Badge Component Tests
+ * @description Comprehensive test suite for Badge component
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Badge } from './Badge';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import type { BadgeVariant } from './Badge';
+
+describe('Badge Component', () => {
+  describe('Rendering', () => {
+    it('renders with text content', () => {
+      renderWithProviders(<Badge>New</Badge>);
+      expect(screen.getByText('New')).toBeInTheDocument();
+    });
+
+    it('renders as span element', () => {
+      const { container } = renderWithProviders(<Badge>Test</Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Badge className="custom-class">Styled badge</Badge>);
+      const badge = screen.getByText('Styled badge');
+      expect(badge).toHaveClass('custom-class');
+    });
+
+    it('renders with data-testid', () => {
+      renderWithProviders(<Badge data-testid="test-badge">Test</Badge>);
+      expect(screen.getByTestId('test-badge')).toBeInTheDocument();
+    });
+
+    it('renders with children elements', () => {
+      renderWithProviders(
+        <Badge>
+          <span>Icon</span> Text
+        </Badge>
+      );
+      expect(screen.getByText('Icon')).toBeInTheDocument();
+      expect(screen.getByText('Text')).toBeInTheDocument();
+    });
+  });
+
+  describe('Variants', () => {
+    const allVariants: BadgeVariant[] = [
+      // Solid variants
+      'solid-main-muted',
+      'solid-main-normal',
+      'solid-main-strong',
+      'solid-sec-muted',
+      'solid-sec-normal',
+      'solid-sec-strong',
+      'solid-acc-muted',
+      'solid-acc-normal',
+      'solid-acc-strong',
+      // Outline variants
+      'outline-main-muted',
+      'outline-main-normal',
+      'outline-main-strong',
+      'outline-sec-muted',
+      'outline-sec-normal',
+      'outline-sec-strong',
+      'outline-acc-muted',
+      'outline-acc-normal',
+      'outline-acc-strong',
+      // Soft variants
+      'soft-main-muted',
+      'soft-main-normal',
+      'soft-main-strong',
+      'soft-sec-muted',
+      'soft-sec-normal',
+      'soft-sec-strong',
+      'soft-acc-muted',
+      'soft-acc-normal',
+      'soft-acc-strong',
+    ];
+
+    allVariants.forEach((variant) => {
+      it(`renders ${variant} variant correctly`, () => {
+        renderWithProviders(<Badge variant={variant}>Test {variant}</Badge>);
+        const badge = screen.getByText(`Test ${variant}`);
+        expect(badge).toBeInTheDocument();
+        expect(badge).toHaveClass('inline-flex', 'items-center', 'rounded-2xl');
+      });
+    });
+
+    it('uses default variant when not specified', () => {
+      renderWithProviders(<Badge>Default</Badge>);
+      const badge = screen.getByText('Default');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('applies solid variant classes correctly', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Solid</Badge>);
+      const badge = screen.getByText('Solid');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('applies outline variant classes correctly', () => {
+      renderWithProviders(<Badge variant="outline-sec-muted">Outline</Badge>);
+      const badge = screen.getByText('Outline');
+      expect(badge).toHaveClass('outline', 'outline-1');
+    });
+
+    it('applies soft variant classes correctly', () => {
+      renderWithProviders(<Badge variant="soft-acc-strong">Soft</Badge>);
+      const badge = screen.getByText('Soft');
+      expect(badge).toHaveClass('shadow-badge-soft');
+    });
+  });
+
+  describe('Color System', () => {
+    it('uses main color palette for main variants', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Main</Badge>);
+      const badge = screen.getByText('Main');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('uses sec color palette for sec variants', () => {
+      renderWithProviders(<Badge variant="solid-sec-normal">Sec</Badge>);
+      const badge = screen.getByText('Sec');
+      expect(badge).toHaveClass('bg-sec-500', 'text-sec-50');
+    });
+
+    it('uses acc color palette for acc variants', () => {
+      renderWithProviders(<Badge variant="solid-acc-normal">Acc</Badge>);
+      const badge = screen.getByText('Acc');
+      expect(badge).toHaveClass('bg-acc-500', 'text-acc-50');
+    });
+
+    it('does not use standard Tailwind colors', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Test</Badge>);
+      const badge = screen.getByText('Test');
+      // Should not have standard Tailwind color classes
+      expect(badge).not.toHaveClass('bg-blue-', 'text-red-', 'bg-gray-', 'bg-white', 'bg-black');
+    });
+  });
+
+  describe('Shade Variants', () => {
+    it('applies muted shade correctly (dark text on light)', () => {
+      renderWithProviders(<Badge variant="solid-main-muted">Muted</Badge>);
+      const badge = screen.getByText('Muted');
+      expect(badge).toHaveClass('bg-main-200', 'text-main-600');
+    });
+
+    it('applies normal shade correctly (light text on medium)', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Normal</Badge>);
+      const badge = screen.getByText('Normal');
+      expect(badge).toHaveClass('bg-main-500', 'text-main-50');
+    });
+
+    it('applies strong shade correctly (light text on dark)', () => {
+      renderWithProviders(<Badge variant="solid-main-strong">Strong</Badge>);
+      const badge = screen.getByText('Strong');
+      expect(badge).toHaveClass('bg-main-700', 'text-main-50');
+    });
+  });
+
+  describe('Props Forwarding', () => {
+    it('forwards HTML attributes', () => {
+      renderWithProviders(
+        <Badge id="test-id" data-custom="value" aria-label="Test badge">
+          Test
+        </Badge>
+      );
+      const badge = screen.getByText('Test');
+      expect(badge).toHaveAttribute('id', 'test-id');
+      expect(badge).toHaveAttribute('data-custom', 'value');
+      expect(badge).toHaveAttribute('aria-label', 'Test badge');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLSpanElement>();
+      renderWithProviders(<Badge ref={ref}>Ref badge</Badge>);
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+      expect(ref.current).toHaveTextContent('Ref badge');
+    });
+
+    it('merges custom className with variant classes', () => {
+      renderWithProviders(
+        <Badge variant="solid-main-normal" className="custom-class px-4">
+          Custom
+        </Badge>
+      );
+      const badge = screen.getByText('Custom');
+      expect(badge).toHaveClass('custom-class', 'px-4', 'bg-main-500');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('renders as non-interactive span element', () => {
+      const { container } = renderWithProviders(<Badge>Test</Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+      // Should not be a button or have button role
+      expect(badge).not.toHaveAttribute('role', 'button');
+    });
+
+    it('does not have focus styles by default', () => {
+      renderWithProviders(<Badge>Test</Badge>);
+      const badge = screen.getByText('Test');
+      // Badge should not have focus-visible classes since it's non-interactive
+      expect(badge).not.toHaveClass('focus-visible:outline-none');
+    });
+
+    it('supports aria-label for screen readers', () => {
+      renderWithProviders(<Badge aria-label="Status: Active">Active</Badge>);
+      const badge = screen.getByText('Active');
+      expect(badge).toHaveAttribute('aria-label', 'Status: Active');
+    });
+
+    it('supports aria-describedby', () => {
+      renderWithProviders(
+        <Badge aria-describedby="badge-description">Test</Badge>
+      );
+      const badge = screen.getByText('Test');
+      expect(badge).toHaveAttribute('aria-describedby', 'badge-description');
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with React.forwardRef', () => {
+      const ref = React.createRef<HTMLSpanElement>();
+      renderWithProviders(<Badge ref={ref}>Ref badge</Badge>);
+      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+    });
+
+    it('can be wrapped in interactive elements', () => {
+      const handleClick = vi.fn();
+      renderWithProviders(
+        <button onClick={handleClick}>
+          <Badge>Clickable badge</Badge>
+        </button>
+      );
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveTextContent('Clickable badge');
+    });
+
+    it('works in complex layouts', () => {
+      renderWithProviders(
+        <div>
+          <h2>Status</h2>
+          <Badge variant="solid-main-normal">Active</Badge>
+          <Badge variant="outline-sec-muted">Pending</Badge>
+          <Badge variant="soft-acc-strong">Featured</Badge>
+        </div>
+      );
+      expect(screen.getByText('Active')).toBeInTheDocument();
+      expect(screen.getByText('Pending')).toBeInTheDocument();
+      expect(screen.getByText('Featured')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty children gracefully', () => {
+      const { container } = renderWithProviders(<Badge></Badge>);
+      const badge = container.querySelector('span');
+      expect(badge).toBeInTheDocument();
+    });
+
+    it('handles very long text content', () => {
+      const longText = 'This is a very long badge text that might cause layout issues but should be handled gracefully';
+      renderWithProviders(<Badge>{longText}</Badge>);
+      expect(screen.getByText(longText)).toBeInTheDocument();
+    });
+
+    it('handles special characters in text', () => {
+      const specialText = 'Badge with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
+      renderWithProviders(<Badge>{specialText}</Badge>);
+      expect(screen.getByText(specialText)).toBeInTheDocument();
+    });
+
+    it('handles numeric content', () => {
+      renderWithProviders(<Badge>123</Badge>);
+      expect(screen.getByText('123')).toBeInTheDocument();
+    });
+
+    it('handles multiple className overrides', () => {
+      renderWithProviders(
+        <Badge variant="solid-main-normal" className="px-8 py-2 text-sm">
+          Override
+        </Badge>
+      );
+      const badge = screen.getByText('Override');
+      expect(badge).toHaveClass('px-8', 'py-2', 'text-sm');
+    });
+  });
+
+  describe('Style Variants', () => {
+    it('solid variant has no border or blur', () => {
+      renderWithProviders(<Badge variant="solid-main-normal">Solid</Badge>);
+      const badge = screen.getByText('Solid');
+      expect(badge).not.toHaveClass('border', 'backdrop-blur');
+    });
+
+    it('outline variant has outline', () => {
+      renderWithProviders(<Badge variant="outline-main-muted">Outline</Badge>);
+      const badge = screen.getByText('Outline');
+      expect(badge).toHaveClass('outline', 'outline-1');
+    });
+
+    it('soft variant has shadow', () => {
+      renderWithProviders(<Badge variant="soft-main-normal">Soft</Badge>);
+      const badge = screen.getByText('Soft');
+      expect(badge).toHaveClass('shadow-badge-soft');
+    });
+  });
+});
+

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,304 @@
+/**
+ * @file Badge Component
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * A small, non-interactive visual label component for displaying concise information
+ * such as status indicators, tags, or labels. Acts as a visual alternative to buttons
+ * for non-interactive content.
+ *
+ * Features:
+ * - 27 combined variants (3 styles × 3 colors × 3 shades)
+ * - Non-interactive by default (renders as <span>)
+ * - Supports all pace-core color palettes (main, sec, acc)
+ * - Customizable styling via className prop
+ * - Accessible and screen reader friendly
+ *
+ * @example
+ * ```tsx
+ * // Basic badge with default variant
+ * <Badge>New</Badge>
+ *
+ * // Badge with specific variant
+ * <Badge variant="solid-main-normal">Active</Badge>
+ *
+ * // Outline variant
+ * <Badge variant="outline-sec-muted">Pending</Badge>
+ *
+ * // Soft variant with accent color
+ * <Badge variant="soft-acc-strong">Featured</Badge>
+ *
+ * // Custom styling
+ * <Badge variant="solid-main-normal" className="px-4">
+ *   Custom Badge
+ * </Badge>
+ * ```
+ *
+ * @accessibility
+ * - Renders as semantic <span> element
+ * - No focus styles (non-interactive by default)
+ * - Screen reader friendly through semantic HTML
+ * - Can be wrapped in interactive elements if needed
+ */
+
+import * as React from 'react';
+import { cn } from '../../utils/core/cn';
+
+// ============================================================================
+// TYPE DEFINITIONS
+// ============================================================================
+
+export type BadgeVariant =
+  | 'solid-main-muted' | 'solid-main-normal' | 'solid-main-strong'
+  | 'solid-sec-muted' | 'solid-sec-normal' | 'solid-sec-strong'
+  | 'solid-acc-muted' | 'solid-acc-normal' | 'solid-acc-strong'
+  | 'outline-main-muted' | 'outline-main-normal' | 'outline-main-strong'
+  | 'outline-sec-muted' | 'outline-sec-normal' | 'outline-sec-strong'
+  | 'outline-acc-muted' | 'outline-acc-normal' | 'outline-acc-strong'
+  | 'soft-main-muted' | 'soft-main-normal' | 'soft-main-strong'
+  | 'soft-sec-muted' | 'soft-sec-normal' | 'soft-sec-strong'
+  | 'soft-acc-muted' | 'soft-acc-normal' | 'soft-acc-strong';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Visual variant of the badge (style-color-shade) */
+  variant?: BadgeVariant;
+}
+
+// ============================================================================
+// VARIANT CONFIGURATION
+// ============================================================================
+
+/**
+ * Shade configuration mapping
+ * Maps shade names to background, text, border, and outline text color shades
+ */
+const shadeConfig = {
+  muted: {
+    bg: 200,
+    text: 600,
+    border: 400,
+    outlineText: 600,
+    outlineBg: 100,
+  },
+  normal: {
+    bg: 500,
+    text: 50,
+    border: 700,
+    outlineText: 700,
+    outlineBg: 200,
+  },
+  strong: {
+    bg: 700,
+    text: 50,
+    border: 800,
+    outlineText: 900,
+    outlineBg: 400,
+  },
+} as const;
+
+type Shade = keyof typeof shadeConfig;
+
+/**
+ * Color palette options
+ */
+const colors = ['main', 'sec', 'acc'] as const;
+type Color = typeof colors[number];
+
+/**
+ * Style options
+ */
+const styles = ['solid', 'outline', 'soft'] as const;
+type Style = typeof styles[number];
+
+/**
+ * Build variant class string for a given style, color, and shade
+ * Generates classes programmatically from configuration
+ */
+function buildVariantClasses(style: Style, color: Color, shade: Shade): string {
+  const cfg = shadeConfig[shade];
+  const parts: string[] = [];
+  
+  if (style === 'solid') {
+    // Solid: flat background colors
+    parts.push(`bg-${color}-${cfg.bg}`, `text-${color}-${cfg.text}`);
+  } else if (style === 'outline') {
+    // Outline: outlined with light background
+    parts.push('outline outline-1 -outline-offset-1', `outline-${color}-${cfg.border}`, `bg-${color}-${cfg.outlineBg}`, `text-${color}-${cfg.outlineText}`);
+  } else if (style === 'soft') {
+    // Soft: uses shadow-badge-soft utility with colored shadows
+    parts.push(
+      `bg-${color}-${cfg.bg}`,
+      'shadow-badge-soft',
+      `shadow-${color}-${cfg.bg}`,
+      `text-${color}-${cfg.text}`,
+      'my-1', 'mx-1', 'py-0', 'px-2'
+    );
+  }
+  
+  return parts.join(' ');
+}
+
+/**
+ * Generate all class name patterns for Tailwind scanning
+ * This ensures Tailwind can detect all dynamically generated classes
+ * 
+ * Tailwind v4 content scanning: These classes are listed here so Tailwind
+ * can detect them during content scanning, even when built dynamically.
+ * 
+ * Classes used: shadow-badge-soft shadow-main-200 shadow-main-500 shadow-main-700
+ * shadow-sec-200 shadow-sec-500 shadow-sec-700 shadow-acc-200 shadow-acc-500 shadow-acc-700
+ */
+const tailwindClassScan = [
+  // Solid background classes
+  'bg-main-100', 'bg-main-600', 'bg-main-900',
+  'bg-sec-100', 'bg-sec-600', 'bg-sec-900',
+  'bg-acc-100', 'bg-acc-600', 'bg-acc-900',
+  // Solid text classes
+  'text-main-50', 'text-main-900',
+  'text-sec-50', 'text-sec-900',
+  'text-acc-50', 'text-acc-900',
+  // Outline classes
+  'outline outline-1',
+  'outline-main-400', 'outline-main-700', 'outline-main-800',
+  'outline-sec-400', 'outline-sec-700', 'outline-sec-800',
+  'outline-acc-400', 'outline-acc-700', 'outline-acc-800',
+  // Outline background classes
+  'bg-main-100', 'bg-main-200', 'bg-main-300',
+  'bg-sec-100', 'bg-sec-200', 'bg-sec-300',
+  'bg-acc-100', 'bg-acc-200', 'bg-acc-300',
+  // Outline text classes
+  'text-main-500', 'text-main-600', 'text-main-800',
+  'text-sec-500', 'text-sec-600', 'text-sec-800',
+  'text-acc-500', 'text-acc-600', 'text-acc-800',
+  // Soft background classes (solid, no opacity)
+  'bg-main-200', 'bg-main-500', 'bg-main-700',
+  'bg-sec-200', 'bg-sec-500', 'bg-sec-700',
+  'bg-acc-200', 'bg-acc-500', 'bg-acc-700',
+  // Soft shadow utility classes - CRITICAL: These must be detected by Tailwind
+  'shadow-badge-soft',
+  'shadow-main-200', 'shadow-main-500', 'shadow-main-700',
+  'shadow-sec-200', 'shadow-sec-500', 'shadow-sec-700',
+  'shadow-acc-200', 'shadow-acc-500', 'shadow-acc-700',
+  // Soft margin/padding classes
+  'my-3', 'mx-3', 'py-0', 'px-2',
+] as const;
+
+/**
+ * Generate all variant class combinations programmatically
+ * Uses the configuration to build the lookup map dynamically
+ */
+function generateVariantClasses(): Record<BadgeVariant, string> {
+  const variantClasses = {} as Record<BadgeVariant, string>;
+  
+  for (const style of styles) {
+    for (const color of colors) {
+      for (const shade of Object.keys(shadeConfig) as Shade[]) {
+        const variant = `${style}-${color}-${shade}` as BadgeVariant;
+        variantClasses[variant] = buildVariantClasses(style, color, shade);
+      }
+    }
+  }
+  
+  return variantClasses;
+}
+
+// Pre-generate all variant classes
+const variantClassesMap = generateVariantClasses();
+
+// Ensure Tailwind detects shadow-badge-soft class
+// This string literal ensures Tailwind v4 content scanning includes the class
+const _tailwindShadowDetection = 'shadow-badge-soft';
+
+// ============================================================================
+// CLASS GENERATION FUNCTION
+// ============================================================================
+
+/**
+ * Get badge classes based on variant
+ * 
+ * Variant format: {style}-{color}-{shade}
+ * - style: solid (flat), outline (bordered), soft (blurred)
+ * - color: main, sec, acc
+ * - shade: muted (dark on light), normal (light on medium), strong (light on dark)
+ */
+function getBadgeClasses(variant: BadgeVariant = 'solid-main-normal'): string {
+  const baseClasses = 'inline-flex text-balance items-center rounded-2xl px-3 py-1 text-xs font-medium transition-colors box-border';
+  return `${baseClasses} ${variantClassesMap[variant]}`;
+}
+
+// ============================================================================
+// BADGE COMPONENT
+// ============================================================================
+
+/**
+ * Badge Component
+ * A small, non-interactive visual label for displaying concise information.
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * // Default variant
+ * <Badge>New</Badge>
+ * 
+ * // Specific variant
+ * <Badge variant="solid-main-normal">Active</Badge>
+ * 
+ * // Outline variant
+ * <Badge variant="outline-sec-muted">Pending</Badge>
+ * 
+ * // Soft variant
+ * <Badge variant="soft-acc-strong">Featured</Badge>
+ * ```
+ */
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'solid-main-normal', ...props }, ref) => {
+    const isSoftVariant = variant.startsWith('soft-');
+    
+    if (isSoftVariant) {
+      // For soft variants, we need both shadow-badge-soft and shadow color class
+      // twMerge treats all shadow-* classes as conflicting, so we need to add them after merging
+      const variantClasses = getBadgeClasses(variant);
+      // Extract the shadow color class from variantClasses (e.g., shadow-main-200)
+      const shadowColorMatch = variantClasses.match(/\bshadow-(\w+)-(\d+)\b/);
+      const shadowColorClass = shadowColorMatch ? shadowColorMatch[0] : '';
+      
+      // Remove shadow classes from variantClasses to avoid twMerge conflicts
+      const classesWithoutShadows = variantClasses
+        .replace(/\bshadow-badge-soft\b/g, '')
+        .replace(/\bshadow-\w+-\d+\b/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+      
+      // Merge non-shadow classes first, then append shadow classes to ensure both are present
+      // shadow-badge-soft first (defines shape), then shadow color (defines color)
+      const mergedClasses = cn(classesWithoutShadows, className);
+      const finalClasses = `${mergedClasses} shadow-badge-soft ${shadowColorClass}`.trim();
+      
+      return (
+        <span
+          ref={ref}
+          className={finalClasses}
+          {...props}
+        />
+      );
+    }
+    
+    return (
+      <span
+        ref={ref}
+        className={cn(getBadgeClasses(variant), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+// ============================================================================
+// EXPORTS
+// ============================================================================
+
+export { Badge };
+

package/src/components/Badge/index.ts

@@ -0,0 +1,3 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+

package/src/components/Button/Button.tsx

@@ -46,7 +46,7 @@
 
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../utils/cn';
+import { cn } from '../../utils/core/cn';
 import { Tooltip } from '../Tooltip';
 
 // ============================================================================

package/src/components/Card/Card.tsx

@@ -62,7 +62,7 @@
  */
 
 import * as React from "react"
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 export interface CardProps extends React.HTMLAttributes<HTMLElement> {
   /** Visual variant of the card */

package/src/components/Checkbox/Checkbox.tsx

@@ -49,7 +49,7 @@ import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { Check } from "lucide-react"
 
-import { cn } from "../../utils/cn"
+import { cn } from "../../utils/core/cn"
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

package/src/components/DataTable/DataTable.test.tsx

@@ -49,7 +49,7 @@ const mockLogger = {
 };
 
 // Note: Must define mock inside factory due to hoisting
-vi.mock('../../utils/logger', () => {
+vi.mock('../../utils/core/logger', () => {
   return {
     createLogger: () => mockLogger,
   };