/**
 * Documentation Block Components
 *
 * A comprehensive library of reusable, semantic components for building
 * consistent, professional API documentation.
 *
 * ## Design System Overview
 *
 * This collection establishes a visual language for documentation through:
 * - **Semantic Color System**: Enum-based color values with clear meanings
 * - **Consistent Typography**: Hierarchical text sizing and weights
 * - **Responsive Layouts**: Mobile-first, adaptive components
 * - **Accessibility First**: WCAG 2.1 AA compliance throughout
 * - **Comprehensive Documentation**: Every component fully documented
 *
 * ## Component Categories
 *
 * ### Status & Indicators
 * - **StatusBadge**: Semantic status indicators (success, info, warning, error, neutral)
 * - **MethodBadge**: HTTP method badges (GET, POST, PUT, PATCH, DELETE)
 *
 * ### Typography & Content
 * - **Hero**: Page-level headings with title and subtitle
 * - **SectionHeader**: Hierarchical section headings (h2, h3)
 * - **InlineCode**: Semantic inline code elements
 *
 * ### API Documentation
 * - **EndpointCard**: Structured API endpoint display
 * - **ResponseBlock**: API response examples with status visualization
 *
 * ### Navigation
 * - **LinkCard**: Interactive navigation cards with accent colors
 * - **LinkCardGrid**: Responsive grid layout for link cards
 *
 * ## Usage Philosophy
 *
 * These components follow key principles:
 *
 * 1. **Composition over Configuration**
 *    - Small, focused components combine to create pages
 *    - Each component does one thing well
 *    - Easy to understand and maintain
 *
 * 2. **Semantic Props**
 *    - Enum values over raw values (accent='primary' not color='#8b5cf6')
 *    - Meaning-based names (status='success' not color='green')
 *    - Self-documenting API
 *
 * 3. **Consistent Patterns**
 *    - Similar props across components (className, children)
 *    - Predictable behavior and styling
 *    - Easy to learn and use
 *
 * 4. **Accessibility Built-in**
 *    - Semantic HTML throughout
 *    - ARIA labels where appropriate
 *    - Keyboard navigation support
 *    - Sufficient color contrast
 *
 * ## Example: Building a Documentation Page
 *
 * ```tsx
 * import {
 *   Hero,
 *   SectionHeader,
 *   InlineCode,
 *   EndpointCard,
 *   ResponseBlock,
 *   LinkCard,
 *   LinkCardGrid,
 * } from '@/components/docs/blocks';
 *
 * export default function APIPage() {
 *   return (
 *     <>
 *       <Hero
 *         title="Text to Image API"
 *         subtitle="Generate images from text prompts"
 *       />
 *
 *       <SectionHeader level={2} id="endpoint">
 *         Endpoint
 *       </SectionHeader>
 *
 *       <EndpointCard
 *         method="POST"
 *         endpoint="/api/text-to-image"
 *       />
 *
 *       <SectionHeader level={2} id="response">
 *         Response
 *       </SectionHeader>
 *
 *       <ResponseBlock
 *         status="success"
 *         statusCode={200}
 *         content={responseJSON}
 *       />
 *
 *       <SectionHeader level={2} id="next-steps">
 *         Next Steps
 *       </SectionHeader>
 *
 *       <LinkCardGrid columns={2}>
 *         <LinkCard
 *           href="/docs/guides"
 *           title="Guides"
 *           description="Learn best practices"
 *           accent="secondary"
 *         />
 *         <LinkCard
 *           href="/docs/examples"
 *           title="Examples"
 *           description="See code samples"
 *           accent="primary"
 *         />
 *       </LinkCardGrid>
 *     </>
 *   );
 * }
 * ```
 *
 * ## Color System Reference
 *
 * ### Semantic Colors
 * - **primary**: Purple - Brand primary, main content
 * - **secondary**: Cyan - Complementary, supporting content
 * - **success**: Green - Positive outcomes, achievements
 * - **info**: Blue/Cyan - Informational, neutral
 * - **warning**: Amber - Caution, important notices
 * - **error**: Red - Errors, problems, danger
 * - **neutral**: Slate/Gray - Default, inactive
 *
 * ### HTTP Method Colors
 * - **GET**: Cyan - Read operations
 * - **POST**: Green - Create operations
 * - **PUT**: Amber - Update operations
 * - **PATCH**: Purple - Partial update
 * - **DELETE**: Red - Delete operations
 *
 * ## Spacing System
 *
 * Consistent spacing creates visual rhythm:
 * - **sm**: Tight spacing for compact layouts
 * - **md**: Standard spacing (default for most components)
 * - **lg**: Generous spacing for major sections
 *
 * ## Typography Scale
 *
 * Hierarchical text sizing:
 * - **Hero**: text-4xl → text-6xl (large, page-level)
 * - **H2**: text-3xl (section headings)
 * - **H3**: text-xl (subsection headings)
 * - **Body**: text-base (paragraph text)
 * - **Small**: text-sm (supporting text)
 * - **Code**: text-xs (code samples)
 *
 * @module blocks
 */

// Status & Indicators
export { StatusBadge, type StatusBadgeProps, type StatusType, type StatusSize } from './StatusBadge';
export { MethodBadge, type MethodBadgeProps, type HttpMethod, type MethodBadgeSize } from './MethodBadge';

// Typography & Content
export { Hero, type HeroProps, type HeroSize } from './Hero';
export { SectionHeader, type SectionHeaderProps, type SectionHeaderLevel } from './SectionHeader';
export { InlineCode, type InlineCodeProps, type InlineCodeColor } from './InlineCode';

// API Documentation
export { EndpointCard, type EndpointCardProps } from './EndpointCard';
export { ResponseBlock, type ResponseBlockProps } from './ResponseBlock';

// Navigation
export { LinkCard, type LinkCardProps, type LinkCardAccent } from './LinkCard';
export { LinkCardGrid, type LinkCardGridProps, type GridColumns } from './LinkCardGrid';
