Create a Detailed Component Library Specification Document

Act as a senior design systems architect. Create a detailed component library specification for a [APPLICATION TYPE, e.g., 'B2B SaaS dashboard'] built with [TECH STACK, e.g., 'React and Tailwind CSS']. The design system should support [DESIGN PRIORITIES, e.g., 'scalability, accessibility, and consistency across 5+ product teams']. For each component listed below, provide a full specification: Components to specify: [LIST OF COMPONENTS, e.g., 'Button, Input Field, Modal, Card, Toast Notification, Data Table, Dropdown Menu, Avatar, Badge, Tabs'] For EACH component, document the following: 1. **Component Name & Description:** A concise summary of the component's purpose and when to use it (vs. similar components). 2. **Variants:** List all visual variants (e.g., primary, secondary, ghost, destructive) with descriptions of when each variant is appropriate. 3. **Props/API Surface:** Define the key props including name, type, default value, and whether required or optional. Present in a table format. 4. **States:** Enumerate all interactive states (default, hover, active, focus, disabled, loading, error) and describe the visual changes for each. 5. **Sizing:** Define size options (sm, md, lg, xl) with specific pixel or rem dimensions for padding, font size, height, and icon size. 6. **Accessibility Requirements:** Specify required ARIA attributes, keyboard interaction patterns, focus management rules, and screen reader announcements. 7. **Content Guidelines:** Define character limits, truncation behavior, and copy dos/don'ts. 8. **Composition Rules:** Explain how this component composes with other components and any forbidden combinations. 9. **Code Example:** Provide one usage snippet showing the most common implementation. End with a dependency map showing relationships between components.