How I Generate 50+ shadcn Components Faster with AI

// component-candidates.ts
// Use this checklist before deciding whether to AI-generate a component.
// Answer each question — if more than two answers are NO, build manually.

interface GenerationCandidate {
  name: string;
  // YES = good candidate, NO = build manually
  checks: {
    isPresentational: boolean;        // Accepts data via props, does not own state?
    hasStandardPattern: boolean;      // Does a similar component exist in shadcn/ui docs or common design systems?
    isAccessibilityStandard: boolean; // Does WCAG handling follow a well-known pattern (not custom)?
    hasNoBusinessLogic: boolean;      // Is logic handled by a parent hook or container?
    isDecomposable: boolean;          // Can it be broken into 2-3 shadcn/ui primitives?
  };
}

// GOOD CANDIDATES — all or most checks pass
const goodCandidates: GenerationCandidate[] = [
  {
    name: 'MetricCard',
    checks: {
      isPresentational: true,
      hasStandardPattern: true,
      isAccessibilityStandard: true,
      hasNoBusinessLogic: true,
      isDecomposable: true,
    },
  },
  {
    name: 'StatusBadge',
    checks: {
      isPresentational: true,
      hasStandardPattern: true,
      isAccessibilityStandard: true,
      hasNoBusinessLogic: true,
      isDecomposable: true,
    },
  },
  {
    name: 'DataTable',
    checks: {
      isPresentational: true,
      hasStandardPattern: true,
      isAccessibilityStandard: true,
      hasNoBusinessLogic: true,  // sorting/filtering logic in useDataTable hook
      isDecomposable: true,
    },
  },
];

// POOR CANDIDATES — multiple checks fail
const poorCandidates: GenerationCandidate[] = [
  {
    name: 'DragDropFileUpload',
    checks: {
      isPresentational: false,      // Manages drag state internally
      hasStandardPattern: false,    // Interaction model varies significantly
      isAccessibilityStandard: false, // Drag-and-drop a11y is complex and non-standard
      hasNoBusinessLogic: false,    // File validation logic belongs in component
      isDecomposable: false,        // No shadcn/ui primitives cover drag-and-drop
    },
  },
  {
    name: 'RichTextEditor',
    checks: {
      isPresentational: false,
      hasStandardPattern: false,
      isAccessibilityStandard: false,
      hasNoBusinessLogic: false,
      isDecomposable: false,
    },
  },
];

// component-specs.ts
// Component Specification Document — the blueprint for AI generation.
// Write specs first. Generate second. Review the spec before the code.

interface PropSpec {
  name: string;
  type: string;
  required: boolean;
  description: string;
}

interface VariantSpec {
  name: string;
  options: string[];
  default: string;
}

interface ComponentSpec {
  name: string;              // PascalCase component name
  description: string;       // One sentence — core function only
  props: PropSpec[];         // 3-5 key configuration props
  variants: VariantSpec[];   // size, status, density options
  states: string[];          // loading | error | empty | disabled
  primitives: string[];      // shadcn/ui primitives to use
  doNotGenerate?: string;    // Business logic that stays in a hook
}

// ---------------------------------------------------------------
// Example specs across five component categories
// ---------------------------------------------------------------

// CATEGORY 1: Presentational display
export const metricCardSpec: ComponentSpec = {
  name: 'MetricCard',
  description: 'Displays a single KPI with label, value, delta, and trend direction.',
  props: [
    { name: 'label', type: 'string', required: true, description: 'Metric name displayed above the value' },
    { name: 'value', type: 'string | number', required: true, description: 'Primary metric value' },
    { name: 'delta', type: 'number', required: false, description: 'Change from previous period as a percentage' },
    { name: 'trend', type: "'up' | 'down' | 'neutral'", required: false, description: 'Trend direction for icon and color' },
  ],
  variants: [
    { name: 'size', options: ['sm', 'md', 'lg'], default: 'md' },
  ],
  states: ['loading'],
  primitives: ['Card', 'CardHeader', 'CardContent', 'Skeleton'],
  doNotGenerate: 'Data fetching and delta calculation belong in a useMetrics hook',
};

// CATEGORY 2: Status / feedback
export const statusBadgeSpec: ComponentSpec = {
  name: 'StatusBadge',
  description: 'Inline badge displaying an entity status with icon and semantic color.',
  props: [
    { name: 'status', type: "'active' | 'inactive' | 'pending' | 'error'", required: true, description: 'Current status value' },
    { name: 'label', type: 'string', required: false, description: 'Override the default status label' },
    { name: 'showIcon', type: 'boolean', required: false, description: 'Show status icon alongside label' },
  ],
  variants: [
    { name: 'size', options: ['sm', 'md'], default: 'md' },
  ],
  states: [],
  primitives: ['Badge'],
  doNotGenerate: 'Status-to-color mapping should reference design tokens, not hardcoded colors',
};

// CATEGORY 3: Data display
export const dataTableSpec: ComponentSpec = {
  name: 'DataTable',
  description: 'Sortable, filterable table with pagination, row selection, and column visibility.',
  props: [
    { name: 'data', type: 'T[]', required: true, description: 'Array of row data objects' },
    { name: 'columns', type: 'ColumnDef<T>[]', required: true, description: 'TanStack column definitions' },
    { name: 'onRowSelect', type: '(rows: T[]) => void', required: false, description: 'Callback when row selection changes' },
    { name: 'pageSize', type: 'number', required: false, description: 'Rows per page, defaults to 20' },
  ],
  variants: [
    { name: 'density', options: ['compact', 'default', 'comfortable'], default: 'default' },
  ],
  states: ['loading', 'error', 'empty'],
  primitives: ['Table', 'TableHeader', 'TableBody', 'TableRow', 'TableCell', 'Button', 'Input', 'Skeleton'],
  doNotGenerate: 'Sorting, filtering, and pagination logic belongs in useDataTable hook',
};

// CATEGORY 4: Form input wrapper
export const tagInputSpec: ComponentSpec = {
  name: 'TagInput',
  description: 'Text input that converts entries to removable tag pills on Enter or comma.',
  props: [
    { name: 'value', type: 'string[]', required: true, description: 'Current array of tag strings' },
    { name: 'onChange', type: '(tags: string[]) => void', required: true, description: 'Called when tags array changes' },
    { name: 'placeholder', type: 'string', required: false, description: 'Input placeholder text' },
    { name: 'maxTags', type: 'number', required: false, description: 'Maximum number of tags allowed' },
  ],
  variants: [
    { name: 'size', options: ['sm', 'md'], default: 'md' },
  ],
  states: ['disabled', 'error'],
  primitives: ['Input', 'Badge', 'Button'],
  doNotGenerate: 'Validation logic belongs in the parent form handler',
};

// CATEGORY 5: Navigation
export const sidebarNavSpec: ComponentSpec = {
  name: 'SidebarNav',
  description: 'Vertical navigation list with active state, icons, and collapsible groups.',
  props: [
    { name: 'items', type: 'NavItem[]', required: true, description: 'Navigation items with label, href, and optional icon' },
    { name: 'activeHref', type: 'string', required: true, description: 'Current route href for active state highlighting' },
    { name: 'collapsed', type: 'boolean', required: false, description: 'Whether the sidebar is in icon-only collapsed mode' },
  ],
  variants: [
    { name: 'size', options: ['sm', 'md'], default: 'md' },
  ],
  states: ['loading'],
  primitives: ['Button', 'Tooltip', 'Collapsible', 'CollapsibleTrigger', 'CollapsibleContent'],
  doNotGenerate: 'Route matching and collapse state belong in a layout-level hook',
};

Create a shadcn/ui {COMPONENT_NAME} component.

Core function: {ONE_SENTENCE_DESCRIPTION}

Props:
- {PROP_1_NAME}: {PROP_1_TYPE} — {PROP_1_DESCRIPTION}
- {PROP_2_NAME}: {PROP_2_TYPE} — {PROP_2_DESCRIPTION}
- {PROP_3_NAME}: {PROP_3_TYPE} — {PROP_3_DESCRIPTION}

Variants:
- {VARIANT_NAME}: {OPTION_1} | {OPTION_2} | {OPTION_3} (default: {DEFAULT})

States: Include {STATE_1}, {STATE_2}, and {STATE_3} states.

Use these shadcn/ui primitives: {PRIMITIVE_1}, {PRIMITIVE_2}, {PRIMITIVE_3}

Style rules:
- Use semantic Tailwind tokens only: bg-background, bg-card, text-foreground,
  text-muted-foreground, border-border, bg-primary, text-primary-foreground
- No hardcoded color classes (no bg-white, bg-gray-*, text-gray-*, border-gray-*)
- Use cn() from @/lib/utils for conditional class merging

Architecture:
- This is a presentational component only
- Accept all data and callbacks via props — no internal data fetching or API calls
- Include TypeScript types for all props
- Export the component as a named export

// BEFORE: Raw v0 output — functional but not production-ready
// Issues marked with // ❌

import { Card, CardContent, CardHeader } from '@/components/ui/card'; // ❌ direct path, not barrel
import { Skeleton } from '@/components/ui/skeleton'; // ❌ direct path
import { ArrowUpIcon, ArrowDownIcon } from 'lucide-react';

// ❌ Broad prop types — trend should be a union type, not string
// ❌ delta typed as number but should handle undefined explicitly
interface MetricCardProps {
  label: string;
  value: string | number;
  delta?: number;
  trend?: string; // ❌ should be 'up' | 'down' | 'neutral'
  size?: string;  // ❌ should be 'sm' | 'md' | 'lg'
  loading?: boolean;
}

export default function MetricCard({ // ❌ default export — conflicts with barrel pattern
  label,
  value,
  delta,
  trend,
  size = 'md',
  loading = false,
}: MetricCardProps) {
  if (loading) {
    return (
      <div className="p-4 bg-white rounded-lg border border-gray-200"> {/* ❌ hardcoded colors */}
        <Skeleton className="h-4 w-24 mb-2" />
        <Skeleton className="h-8 w-16" />
      </div>
    );
  }

  const trendColor =
    trend === 'up' ? 'text-green-600' : // ❌ hardcoded color
    trend === 'down' ? 'text-red-600' :  // ❌ hardcoded color
    'text-gray-500';                      // ❌ hardcoded color

  const sizeClasses = {
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
  };

  return (
    <Card className="bg-white border-gray-200"> {/* ❌ hardcoded colors */}
      <CardHeader className="pb-2">
        <p className="text-sm text-gray-500">{label}</p> {/* ❌ hardcoded color */}
      </CardHeader>
      <CardContent>
        <p className="text-2xl font-bold text-gray-900">{value}</p> {/* ❌ hardcoded color */}
        {delta !== undefined && (
          <div className={`flex items-center gap-1 mt-1 ${trendColor}`}>
            {trend === 'up' ? <ArrowUpIcon size={14} /> : <ArrowDownIcon size={14} />}
            <span className="text-sm">{Math.abs(delta)}%</span>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// AFTER: Post-Cursor refinement — production-ready
// Each fix corresponds to a specific Cursor Cmd+K command

// Cmd+K #1: "Convert to named export and update import paths to use
//            @company/ui barrel exports instead of direct @/components/ui/* paths"
import { Card, CardContent, CardHeader } from '@company/ui';
import { Skeleton } from '@company/ui';
import { cn } from '@/lib/utils';
import { ArrowUpIcon, ArrowDownIcon, MinusIcon } from 'lucide-react';

// Cmd+K #2: "Refine all prop types to use strict union types.
//            Match the MetricCardSpec interface in src/config/component-specs.ts"
export interface MetricCardProps {
  /** Metric name displayed above the value */
  label: string;
  /** Primary metric value — string for pre-formatted values, number for raw */
  value: string | number;
  /** Change from previous period as a percentage — positive or negative */
  delta?: number;
  /** Trend direction controls icon and semantic color */
  trend?: 'up' | 'down' | 'neutral';
  /** Controls padding and font sizes */
  size?: 'sm' | 'md' | 'lg';
  /** Renders skeleton placeholder during data fetch */
  loading?: boolean;
  /** Additional CSS classes merged with defaults */
  className?: string;
}

// Cmd+K #3: "Replace all hardcoded Tailwind color classes with semantic tokens.
//            Reference the token list in tailwind.config.ts.
//            bg-white → bg-card, text-gray-* → text-muted-foreground,
//            text-green-* → text-success (or use a CSS variable),
//            text-red-* → text-destructive"

const trendConfig = {
  up: {
    icon: ArrowUpIcon,
    className: 'text-emerald-600 dark:text-emerald-400', // semantic pattern for success
    label: 'Trending up',
  },
  down: {
    icon: ArrowDownIcon,
    className: 'text-destructive',
    label: 'Trending down',
  },
  neutral: {
    icon: MinusIcon,
    className: 'text-muted-foreground',
    label: 'No change',
  },
};

const sizeConfig = {
  sm: {
    card: 'p-3',
    value: 'text-xl font-bold',
    label: 'text-xs',
    delta: 'text-xs',
  },
  md: {
    card: 'p-4',
    value: 'text-2xl font-bold',
    label: 'text-sm',
    delta: 'text-sm',
  },
  lg: {
    card: 'p-6',
    value: 'text-3xl font-bold',
    label: 'text-base',
    delta: 'text-sm',
  },
};

// Cmd+K #4: "Improve the loading state to use the same Card wrapper
//            so the skeleton matches the final component's dimensions exactly"
export function MetricCard({
  label,
  value,
  delta,
  trend = 'neutral',
  size = 'md',
  loading = false,
  className,
}: MetricCardProps) {
  const sizes = sizeConfig[size];

  if (loading) {
    return (
      <Card className={cn(sizes.card, className)}>
        <CardHeader className="pb-2 pt-0 px-0">
          <Skeleton className="h-3 w-20" />
        </CardHeader>
        <CardContent className="px-0 pb-0">
          <Skeleton className="h-8 w-28 mb-2" />
          <Skeleton className="h-3 w-16" />
        </CardContent>
      </Card>
    );
  }

  const trend_ = trendConfig[trend];
  const TrendIcon = trend_.icon;

  return (
    <Card className={cn(sizes.card, className)}>
      <CardHeader className="pb-2 pt-0 px-0">
        {/* text-muted-foreground — semantic token, adapts to dark mode */}
        <p className={cn(sizes.label, 'text-muted-foreground')}>{label}</p>
      </CardHeader>
      <CardContent className="px-0 pb-0">
        {/* text-card-foreground — semantic token */}
        <p className={cn(sizes.value, 'text-card-foreground')}>
          {typeof value === 'number' ? value.toLocaleString() : value}
        </p>
        {delta !== undefined && (
          // Cmd+K #5: "Add aria-label to the trend indicator so screen readers
          //            announce the direction and percentage change"
          <div
            className={cn('flex items-center gap-1 mt-1', trend_.className)}
            aria-label={`${trend_.label}: ${Math.abs(delta)}% change`}
            role="status"
          >
            <TrendIcon size={14} aria-hidden="true" />
            <span className={sizes.delta}>
              {delta > 0 ? '+' : ''}{delta}%
            </span>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

MetricCard.displayName = 'MetricCard';

#!/usr/bin/env bash
# component-batch-tracker.sh
# Track batch generation progress across a component library sprint.
# Run from the project root. Updates component-status.md with current state.

set -euo pipefail

SPEC_FILE="src/config/component-specs.ts"
COMPONENTS_DIR="src/components"
STATUS_FILE="component-status.md"

echo "# Component Generation Status"
echo "Generated: $(date)"
echo ""

# Count specs defined
SPEC_COUNT=$(grep -c 'const.*Spec: ComponentSpec' "$SPEC_FILE" 2>/dev/null || echo 0)
echo "## Specs defined: $SPEC_COUNT"
echo ""

# Check which components exist as files
echo "## Component Status"
echo "| Component | File Exists | Has Test | Storybook Story | Dark Mode Checked |"
echo "|-----------|-------------|----------|-----------------|-------------------|"

# Extract component names from spec file
grep 'const.*Spec: ComponentSpec' "$SPEC_FILE" \
  | sed "s/export const //" \
  | sed "s/Spec: ComponentSpec.*//" \
  | while read -r specName; do
    # Convert camelCase spec name to PascalCase component name
    componentName=$(echo "$specName" | sed 's/\([A-Z]\)/ \1/g' | awk '{for(i=1;i<=NF;i++) $i=toupper(substr($i,1,1)) substr($i,2); print}' | tr -d ' ')
    componentName=${componentName%Spec}

    # Check file existence
    fileExists="❌"
    if [ -f "$COMPONENTS_DIR/${componentName}.tsx" ]; then
      fileExists="✅"
    fi

    # Check test file
    hasTest="❌"
    if [ -f "$COMPONENTS_DIR/__tests__/${componentName}.test.tsx" ]; then
      hasTest="✅"
    fi

    # Check Storybook story
    hasStory="❌"
    if [ -f "$COMPONENTS_DIR/${componentName}.stories.tsx" ]; then
      hasStory="✅"
    fi

    echo "| ${componentName} | ${fileExists} | ${hasTest} | ${hasStory} | ☐ |"
  done

echo ""

# Check for hardcoded colors across all component files
echo "## Design Token Compliance Audit"
echo "Components with hardcoded colors (must fix before merge):"
grep -rln 'bg-white\|bg-gray-\|text-gray-\|text-black\|border-gray-\|bg-blue-\|bg-red-\|text-green-' \
  "$COMPONENTS_DIR" 2>/dev/null \
  | grep '\.tsx$' \
  | grep -v '\.stories\.\|\.test\.' \
  | while read -r f; do
    count=$(grep -c 'bg-white\|bg-gray-\|text-gray-\|text-black\|border-gray-\|bg-blue-\|bg-red-\|text-green-' "$f" || echo 0)
    echo "  $f — $count instances"
  done

echo ""
echo "Run 'grep -rn \"bg-white|text-gray\" src/components/' for specific lines."

#!/usr/bin/env bash
# quality-gates.sh
# Run quality gates on a specific generated component before merging.
# Usage: ./scripts/quality-gates.sh src/components/MetricCard.tsx
#
# Prerequisites:
#   - axe-cli: npm install -g @axe-core/cli
#   - bundlesize: configured in package.json or .bundlesizerc
#   - Dev server running on localhost:3000
#   - Storybook running on localhost:6006

set -euo pipefail

COMPONENT_FILE="${1:-}"
if [ -z "$COMPONENT_FILE" ]; then
  echo "Usage: $0 <component-file-path>"
  echo "Example: $0 src/components/MetricCard.tsx"
  exit 1
fi

COMPONENT_NAME=$(basename "$COMPONENT_FILE" .tsx)
PASS=true

echo "=================================================="
echo " Quality Gates: $COMPONENT_NAME"
echo "=================================================="
echo ""

# ------------------------------------------------------------------
# GATE 1: Design token compliance
# ------------------------------------------------------------------
echo "--- Gate 1: Design Token Compliance ---"

HARDCODED=$(grep -c 'bg-white\|bg-gray-\|text-gray-\|text-black\|border-gray-\|bg-blue-\|bg-red-\|text-green-\|bg-yellow-' "$COMPONENT_FILE" 2>/dev/null || echo 0)

if [ "$HARDCODED" -eq 0 ]; then
  echo "✅ No hardcoded color classes found"
else
  echo "❌ FAIL: $HARDCODED hardcoded color class(es) found:"
  grep -n 'bg-white\|bg-gray-\|text-gray-\|text-black\|border-gray-\|bg-blue-\|bg-red-\|text-green-' "$COMPONENT_FILE" || true
  PASS=false
fi

echo ""
echo "Manual check required:"
echo "  [ ] Toggle dark mode in browser — inspect all component states visually"
echo "  [ ] Check loading state in dark mode"
echo "  [ ] Check error state in dark mode (if applicable)"
echo ""

# ------------------------------------------------------------------
# GATE 2: Accessibility audit
# ------------------------------------------------------------------
echo "--- Gate 2: Accessibility ---"

# Check if Storybook story exists
STORY_FILE="src/components/${COMPONENT_NAME}.stories.tsx"
if [ ! -f "$STORY_FILE" ]; then
  echo "⚠️  No Storybook story found at $STORY_FILE"
  echo "    Create a story and run: npx axe-cli http://localhost:6006/iframe.html?id=..."
else
  echo "✅ Storybook story found"
  echo "   Run: npx axe-cli http://localhost:6006/iframe.html?id=$(echo $COMPONENT_NAME | tr '[:upper:]' '[:lower:]')-default --tags wcag2a,wcag2aa"
fi

# Static check: find onClick handlers without keyboard equivalents
ONKEY_MISSING=$(grep -c 'onClick' "$COMPONENT_FILE" 2>/dev/null || echo 0)
IF_MISSING=$(grep -c 'onKeyDown\|onKeyUp\|role=' "$COMPONENT_FILE" 2>/dev/null || echo 0)

if [ "$ONKEYDOWN_MISSING" -gt 0 ] && [ "$IF_MISSING" -eq 0 ]; then
  echo "⚠️  onClick handlers found without corresponding keyboard handlers or role attributes"
  echo "    Verify keyboard navigation works for all interactive elements"
fi

echo ""
echo "Manual check required:"
echo "  [ ] Tab through entire component with keyboard only"
echo "  [ ] Verify focus indicators are visible"
echo "  [ ] Test with VoiceOver (macOS) or NVDA (Windows) if component is interactive"
echo ""

# ------------------------------------------------------------------
# GATE 3: TypeScript type check
# ------------------------------------------------------------------
echo "--- Gate 3: TypeScript ---"
npx tsc --noEmit 2>&1 | grep -i "$COMPONENT_NAME" || echo "✅ No TypeScript errors for $COMPONENT_NAME"
echo ""

# ------------------------------------------------------------------
# GATE 4: Bundle impact (requires @next/bundle-analyzer configured)
# ------------------------------------------------------------------
echo "--- Gate 4: Bundle Impact ---"
echo "Check new imports added by this component:"
grep '^import' "$COMPONENT_FILE" \
  | grep -v '@company/ui\|@/lib\|@/hooks\|react\|lucide-react\|next' \
  | while read -r line; do
    echo "  ⚠️  External import — verify this library is already in package.json: $line"
  done || echo "✅ No unexpected external imports"

echo ""
echo "Run ANALYZE=true npm run build to check full bundle impact if external imports were found."
echo ""

# ------------------------------------------------------------------
# Summary
# ------------------------------------------------------------------
echo "=================================================="
if [ "$PASS" = true ]; then
  echo " Automated checks: PASSED"
else
  echo " Automated checks: FAILED — fix issues above before merging"
fi
echo " Complete the manual checks above before marking PR ready."
echo "=================================================="

// StatusBadge.tsx
// Example of variant consolidation — three generated components merged into one.
//
// BEFORE consolidation, the library had:
//   ActiveBadge.tsx    — green badge for active status
//   PendingBadge.tsx   — yellow badge for pending status
//   ErrorBadge.tsx     — red badge for error status
//
// Cursor Cmd+K: "Consolidate ActiveBadge, PendingBadge, and ErrorBadge
//               into a single StatusBadge component with a status prop
//               that controls color and icon via a config map."
//
// AFTER consolidation: one component, one maintenance point.

import { Badge } from '@company/ui';
import { cn } from '@/lib/utils';
import {
  CheckCircleIcon,
  ClockIcon,
  XCircleIcon,
  MinusCircleIcon,
} from 'lucide-react';

export type StatusValue = 'active' | 'pending' | 'error' | 'inactive';

interface StatusConfig {
  label: string;
  icon: React.ElementType;
  className: string;
  ariaLabel: string;
}

// Single config map — change a status's appearance here, it updates everywhere
const STATUS_CONFIG: Record<StatusValue, StatusConfig> = {
  active: {
    label: 'Active',
    icon: CheckCircleIcon,
    // Use CSS variable-based semantic tokens — adapts to dark mode automatically
    className: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100',
    ariaLabel: 'Status: Active',
  },
  pending: {
    label: 'Pending',
    icon: ClockIcon,
    className: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100',
    ariaLabel: 'Status: Pending',
  },
  error: {
    label: 'Error',
    icon: XCircleIcon,
    className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100',
    ariaLabel: 'Status: Error',
  },
  inactive: {
    label: 'Inactive',
    icon: MinusCircleIcon,
    className: 'bg-muted text-muted-foreground',
    ariaLabel: 'Status: Inactive',
  },
};

export interface StatusBadgeProps {
  /** Current entity status */
  status: StatusValue;
  /** Override default label derived from status */
  label?: string;
  /** Show icon alongside label */
  showIcon?: boolean;
  /** Size variant */
  size?: 'sm' | 'md';
  /** Additional CSS classes */
  className?: string;
}

export function StatusBadge({
  status,
  label,
  showIcon = true,
  size = 'md',
  className,
}: StatusBadgeProps) {
  const config = STATUS_CONFIG[status];
  const Icon = config.icon;
  const displayLabel = label ?? config.label;

  return (
    <Badge
      variant="outline"
      className={cn(
        config.className,
        size === 'sm' && 'text-xs px-1.5 py-0',
        'border-0 font-medium',
        className
      )}
      aria-label={config.ariaLabel}
    >
      {showIcon && (
        <Icon
          className={cn('mr-1', size === 'sm' ? 'h-3 w-3' : 'h-3.5 w-3.5')}
          aria-hidden="true"
        />
      )}
      {displayLabel}
    </Badge>
  );
}

StatusBadge.displayName = 'StatusBadge';