{"_id":"@avinash_tyagi/design-system-components","_rev":"3-5409ded1abad5d93907fa1723299e097","name":"@avinash_tyagi/design-system-components","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@avinash_tyagi/design-system-components","version":"1.0.0","keywords":["design-system","components","ui"],"author":"","license":"MIT","_id":"@avinash_tyagi/design-system-components@1.0.0","maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"dist":{"shasum":"22ca5f9e8c68ed949b0bdd248644a2edeb174755","tarball":"https://registry.npmjs.org/@avinash_tyagi/design-system-components/-/design-system-components-1.0.0.tgz","fileCount":10,"integrity":"sha512-KlgN4ZkoeuKd4xYU8uqquIlXYmwU2hN1mEZD9EZmTr8226tZPS2oVFtJauYxp6qDglaOlHngLpInVNc+w6/9uQ==","signatures":[{"sig":"MEQCIGp2hsVETDI1zwqsAriEbGfYcOTkBSjUWq42reyEIsLnAiB3OWLHratoL4N7rnuz4MRdJfJx3dwAHGc3VrZ6lQU5VQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24424664},"main":"dist/index.cjs.js","module":"dist/index.esm.js","gitHead":"4cdd2b789a2beb4b55aa5bd92a678760e0229887","scripts":{"build":"rollup -c","prepare":"npm run build"},"_npmUser":{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"},"_npmVersion":"10.9.2","description":"A collection of reusable design system components.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@babel/preset-react":"^7.27.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^3.0.0","@rollup/plugin-babel":"^6.0.0","rollup-plugin-postcss":"^4.0.0","@rollup/plugin-commonjs":"^24.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_npmOperationalInternal":{"tmp":"tmp/design-system-components_1.0.0_1754473883178_0.5386970715309269","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@avinash_tyagi/design-system-components","version":"1.0.1","keywords":["design-system","components","ui"],"author":"","license":"MIT","_id":"@avinash_tyagi/design-system-components@1.0.1","maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"dist":{"shasum":"1e78e9155c3df3c8d44a8916e54c3abb8e20542e","tarball":"https://registry.npmjs.org/@avinash_tyagi/design-system-components/-/design-system-components-1.0.1.tgz","fileCount":11,"integrity":"sha512-oY6qeCPie/kvZq1jZt9wXK8OQ/RLLaH5iZWnPDciSzkkbchmzzlfIaBDtHlNGFADx9MKMGAydnHDWfYoDBFB1g==","signatures":[{"sig":"MEQCIGJNfHmwHBYKAtQ1ugEsFac/ywB9C+YKAWjNPY5E61b8AiA613EPRIsXSPL0UgOiHSSlw3JxbjglqWY6xbrI2u4wWA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22835249},"main":"dist/index.cjs.js","module":"dist/index.esm.js","gitHead":"4cdd2b789a2beb4b55aa5bd92a678760e0229887","scripts":{"build":"rollup -c","prepare":"npm run build"},"_npmUser":{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"},"_npmVersion":"10.9.2","description":"A collection of reusable design system components.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@babel/preset-react":"^7.27.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^3.0.0","@rollup/plugin-babel":"^6.0.0","rollup-plugin-postcss":"^4.0.0","@rollup/plugin-commonjs":"^24.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_npmOperationalInternal":{"tmp":"tmp/design-system-components_1.0.1_1754477121310_0.251872209975579","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@avinash_tyagi/design-system-components","version":"1.0.2","description":"A collection of reusable design system components.","main":"dist/index.cjs.js","module":"dist/index.esm.js","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c","prepare":"npm run build"},"keywords":["design-system","components","ui"],"author":"","license":"MIT","dependencies":{"@babel/preset-react":"^7.27.1"},"devDependencies":{"@rollup/plugin-babel":"^6.0.0","@rollup/plugin-commonjs":"^24.0.0","@rollup/plugin-node-resolve":"^15.0.0","rollup":"^3.0.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.0"},"peerDependencies":{"react":">=16.8","react-dom":">=16.8"},"_id":"@avinash_tyagi/design-system-components@1.0.2","gitHead":"ed0e38ccf0f4ffb16dc66cf44ad74a4175a48068","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-4If3HTrvxRJYJzTew8IIL4ayyGkQFaAAGA1nby2mvxflWsgSzz9SfwF2nsZbORGiQ+uWtWP2fcW752p4tLIGvQ==","shasum":"761f8ac1970fa8be913c043d3d62993aa27e274f","tarball":"https://registry.npmjs.org/@avinash_tyagi/design-system-components/-/design-system-components-1.0.2.tgz","fileCount":11,"unpackedSize":22856802,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEiFlwMmTKVD7A7YfuwNVldSlSj1fU181+Y/Ec3+lZC4AiBNFzAfaBwtWJi2TOs2j7Vjh2Nc8Okc2fGASR+Hbv/FUw=="}]},"_npmUser":{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"},"directories":{},"maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-components_1.0.2_1754933432693_0.43262664822368424"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-06T09:51:22.955Z","modified":"2025-08-11T17:30:33.158Z","1.0.0":"2025-08-06T09:51:23.416Z","1.0.1":"2025-08-06T10:45:21.592Z","1.0.2":"2025-08-11T17:30:32.959Z"},"license":"MIT","keywords":["design-system","components","ui"],"description":"A collection of reusable design system components.","maintainers":[{"name":"avinash_tyagi","email":"avinashtyagi1998@gmail.com"}],"readme":"# @avinash_tyagi/design-system-components\r\n\r\nA comprehensive collection of reusable React components following atomic design principles. This design system provides a consistent and powerful foundation for building modern web applications with a futuristic dark theme.\r\n\r\n![Design System Components in Action](https://github.com/user-attachments/assets/a93fbea9-254e-4db7-b10e-fc99bace580c)\r\n\r\n## 📖 Table of Contents\r\n\r\n- [Installation](#-installation)\r\n- [Quick Start](#-quick-start)\r\n- [Architecture](#️-architecture)\r\n- [Visual Examples](#-visual-examples)\r\n- [Component Library](#-component-library)\r\n  - [Atoms](#-atoms-19-components)\r\n  - [Molecules](#-molecules-16-components)\r\n- [Theming & Customization](#-theming--customization)\r\n- [Responsive Design](#-responsive-design)\r\n- [Accessibility](#-accessibility)\r\n- [Development](#-development)\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @avinash_tyagi/design-system-components\r\n```\r\n\r\n## 🚀 Quick Start\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { Button, Card, Input, Badge } from '@avinash_tyagi/design-system-components';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <Button variant=\"primary\" glow>Get Started</Button>\r\n      <Input placeholder=\"Enter your name\" />\r\n      <Badge variant=\"success\" icon=\"FaCheck\">Active</Badge>\r\n      <Card \r\n        title=\"Example Card\"\r\n        description=\"This is an example card component\"\r\n        status=\"active\"\r\n        progress={0.7}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## 🏗️ Architecture\r\n\r\nThis design system follows **Atomic Design principles**:\r\n\r\n- **Atoms**: Basic building blocks (buttons, inputs, icons, badges)\r\n- **Molecules**: Complex components combining atoms (cards, headers, navigation)\r\n\r\n## 🎨 Visual Examples\r\n\r\n### Main Application View\r\nThe components work together to create a cohesive user interface:\r\n\r\n![Main App Overview](https://github.com/user-attachments/assets/a93fbea9-254e-4db7-b10e-fc99bace580c)\r\n\r\n### Expanded Card with Multiple Components\r\nShows Rating, Badge, and Button components working together:\r\n\r\n![Expanded Card View](https://github.com/user-attachments/assets/7e85e7f7-2fb3-49fb-8fc6-a13d8d43d4ed)\r\n\r\n### Search Functionality\r\nInput component with real-time filtering:\r\n\r\n![Search Functionality](https://github.com/user-attachments/assets/7b61a40f-96be-4bee-acf0-8a284982b360)\r\n\r\n## 📚 Component Library\r\n\r\n### 🔸 Atoms (19 Components)\r\n\r\nBasic building blocks that can't be broken down further.\r\n\r\n#### Button\r\nVersatile button component with multiple variants and states.\r\n\r\n**Props:**\r\n- `variant` (string): 'primary' | 'secondary' | 'back' | 'integration' - Default: 'primary'\r\n- `glow` (boolean): Adds glow effect - Default: false\r\n- `icon` (ReactNode): Icon element for integration buttons\r\n- `subtitle` (string): Subtitle text for integration buttons\r\n- `state` (string): 'default' | 'connected' | 'error' - For integration buttons\r\n- `children` (ReactNode): Button content\r\n- `...props`: All standard button props\r\n\r\n**Variants:**\r\n- **Primary**: Standard action button with blue gradient\r\n- **Secondary**: Alternative styling for secondary actions\r\n- **Back**: Navigation button with left arrow\r\n- **Integration**: Special button for external service connections\r\n\r\n**Usage:**\r\n```jsx\r\n<Button variant=\"primary\" glow>Save Changes</Button>\r\n<Button variant=\"back\">Go Back</Button>\r\n<Button variant=\"integration\" icon={<GitHubIcon />} subtitle=\"Connect your account\">\r\n  GitHub\r\n</Button>\r\n```\r\n\r\n#### Badge\r\nSmall status or label component with various styles.\r\n\r\n**Props:**\r\n- `variant` (string): 'default' | 'success' | 'warning' | 'danger' - Default: 'default'\r\n- `glow` (boolean): Adds glow effect - Default: false\r\n- `icon` (string): Icon name to display\r\n- `status` (string): 'completed' | 'in-progress' | 'pending' - Adds status styling\r\n- `className` (string): Additional CSS classes\r\n- `children` (ReactNode): Badge content\r\n\r\n**Usage:**\r\n```jsx\r\n<Badge variant=\"success\" icon=\"FaCheck\">Completed</Badge>\r\n<Badge variant=\"warning\" glow>Warning</Badge>\r\n<Badge status=\"in-progress\">In Progress</Badge>\r\n```\r\n\r\n#### Input\r\nBasic input field with consistent styling.\r\n\r\n**Props:**\r\n- All standard HTML input props\r\n- `className` (string): Additional CSS classes\r\n\r\n**Usage:**\r\n```jsx\r\n<Input type=\"text\" placeholder=\"Enter text...\" />\r\n<Input type=\"email\" value={email} onChange={setEmail} />\r\n```\r\n\r\n#### InputField\r\nEnhanced input with additional features (extends Input).\r\n\r\n**Props:**\r\n- All Input props\r\n- Additional styling and validation features\r\n\r\n**Usage:**\r\n```jsx\r\n<InputField placeholder=\"Search patterns...\" value={search} onChange={handleSearch} />\r\n```\r\n\r\n#### Modal\r\nOverlay component for dialogs and popups.\r\n\r\n**Props:**\r\n- `isOpen` (boolean): Controls modal visibility - Required\r\n- `onClose` (function): Callback when modal closes - Required\r\n- `title` (string): Modal title\r\n- `size` (string): 'small' | 'medium' | 'large' - Default: 'medium'\r\n- `className` (string): Additional CSS classes\r\n- `children` (ReactNode): Modal content\r\n\r\n**Usage:**\r\n```jsx\r\n<Modal isOpen={showModal} onClose={() => setShowModal(false)} title=\"Settings\">\r\n  <p>Modal content goes here</p>\r\n</Modal>\r\n```\r\n\r\n#### ProgressBar\r\nVisual progress indicator with animations.\r\n\r\n**Props:**\r\n- `progress` (number): Progress value 0-100 - Default: 0\r\n- `percent` (number): Backward compatibility alias for progress\r\n- `showGlow` (boolean): Adds glow effect - Default: false\r\n- `animated` (boolean): Enables animation - Default: true\r\n- `color` (string): Progress bar color - Default: '#4f9cf9'\r\n- `height` (number): Bar height in pixels - Default: 6\r\n- `showText` (boolean): Shows percentage text - Default: false\r\n- `className` (string): Additional CSS classes\r\n\r\n**Usage:**\r\n```jsx\r\n<ProgressBar progress={75} showText animated />\r\n<ProgressBar progress={50} color=\"#ff6b6b\" height={8} showGlow />\r\n```\r\n\r\n#### Rating\r\nStar rating component for displaying difficulty or achievement.\r\n\r\n**Props:**\r\n- `value` (number): Number of filled stars 1-5 - Default: 0\r\n- `difficulty` (string): 'easy' | 'medium' | 'hard' - Default: 'medium'\r\n- `achieved` (boolean): Whether the rating is achieved - Default: false\r\n\r\n**Usage:**\r\n```jsx\r\n<Rating value={4} difficulty=\"hard\" />\r\n<Rating value={3} difficulty=\"medium\" achieved />\r\n```\r\n\r\n#### Icon\r\nFlexible icon component supporting multiple icon libraries with built-in mappings.\r\n\r\n**Props:**\r\n- `name` (string): Icon name (e.g., 'FaUser', 'FaCog') - Required\r\n- `size` (number): Icon size in pixels - Default: 20\r\n- `className` (string): Additional CSS classes\r\n- `color` (string): Icon color override\r\n- `variant` (string): 'default' | 'status' - Default: 'default'\r\n\r\n**Icon Libraries Supported:**\r\n- Font Awesome (`FaIcons`) - e.g., 'FaUser', 'FaCog', 'FaCheck'\r\n- Feather Icons (`FiIcons`) - e.g., 'FiSettings', 'FiZap', 'FiDatabase'\r\n- Heroicons (`HiIcons`) - e.g., 'HiHome', 'HiUser'\r\n- Material Design (`MdIcons`) - e.g., 'MdDashboard', 'MdSettings'\r\n\r\n**Built-in Icon Mappings:**\r\n- `'brain'` → Brain icon for cognitive features\r\n- `'completed'` → Check circle for completed states\r\n- `'active'` → Play icon for active states\r\n- `'mentor'` → Robot icon for AI guidance\r\n- `'progress'` → Bar chart for progress indicators\r\n- `'hint'` → Lightning bolt for hints\r\n\r\n**Usage:**\r\n```jsx\r\n<Icon name=\"FaUser\" size={24} />\r\n<Icon name=\"completed\" variant=\"status\" color=\"#22c55e\" />\r\n<Icon name=\"brain\" size={32} className=\"brain-icon\" />\r\n```\r\n\r\n#### LoadingSpinner\r\nAnimated loading indicator.\r\n\r\n**Props:**\r\n- Standard component props\r\n- Custom styling through CSS\r\n\r\n**Usage:**\r\n```jsx\r\n<LoadingSpinner />\r\n```\r\n\r\n#### Tooltip\r\nContextual information display on hover.\r\n\r\n**Props:**\r\n- `children` (ReactNode): Element to attach tooltip to\r\n- `content` (string): Tooltip text\r\n- `position` (string): 'top' | 'bottom' | 'left' | 'right'\r\n\r\n**Usage:**\r\n```jsx\r\n<Tooltip content=\"This is helpful information\" position=\"top\">\r\n  <Button>Hover me</Button>\r\n</Tooltip>\r\n```\r\n\r\n#### TextArea\r\nMulti-line text input component.\r\n\r\n**Props:**\r\n- All standard HTML textarea props\r\n- Consistent styling with other form components\r\n\r\n**Usage:**\r\n```jsx\r\n<TextArea placeholder=\"Enter your message...\" rows={4} />\r\n```\r\n\r\n#### Container\r\nLayout component for consistent spacing and alignment.\r\n\r\n**Props:**\r\n- `children` (ReactNode): Container content\r\n- Layout and styling props\r\n\r\n**Usage:**\r\n```jsx\r\n<Container>\r\n  <h1>Page Title</h1>\r\n  <p>Page content</p>\r\n</Container>\r\n```\r\n\r\n#### FileUpload\r\nFile selection and upload component.\r\n\r\n**Props:**\r\n- File handling and upload specific props\r\n- Progress indication support\r\n\r\n**Usage:**\r\n```jsx\r\n<FileUpload onFileSelect={handleFileSelect} accept=\".jpg,.png\" />\r\n```\r\n\r\n#### ProBadge\r\nSpecial badge for premium/pro features.\r\n\r\n**Props:**\r\n- Similar to Badge but with premium styling\r\n- `children` (ReactNode): Badge content\r\n\r\n**Usage:**\r\n```jsx\r\n<ProBadge>Pro Feature</ProBadge>\r\n```\r\n\r\n#### HintDisplay\r\nComponent for showing hints and tips.\r\n\r\n**Props:**\r\n- `hint` (string): Hint text to display\r\n- `visible` (boolean): Controls visibility\r\n\r\n**Usage:**\r\n```jsx\r\n<HintDisplay hint=\"Try using the two pointers technique\" visible={showHint} />\r\n```\r\n\r\n#### RichTextEditor\r\nAdvanced text editor with formatting capabilities.\r\n\r\n**Props:**\r\n- `value` (string): Editor content\r\n- `onChange` (function): Content change handler\r\n- Rich text editing specific props\r\n\r\n**Usage:**\r\n```jsx\r\n<RichTextEditor value={content} onChange={setContent} />\r\n```\r\n\r\n#### CanvasElement\r\nCanvas-based drawing or visualization component.\r\n\r\n**Props:**\r\n- Canvas-specific drawing and interaction props\r\n\r\n**Usage:**\r\n```jsx\r\n<CanvasElement width={800} height={600} />\r\n```\r\n\r\n#### ConnectionLine\r\nVisual connector between elements.\r\n\r\n**Props:**\r\n- Positioning and styling props for connections\r\n\r\n**Usage:**\r\n```jsx\r\n<ConnectionLine from=\"element1\" to=\"element2\" />\r\n```\r\n\r\n#### DraggableComponent\r\nComponent that can be dragged around the interface.\r\n\r\n**Props:**\r\n- Drag and drop specific props\r\n- Position and constraint handling\r\n\r\n**Usage:**\r\n```jsx\r\n<DraggableComponent onDrag={handleDrag}>\r\n  <div>Drag me around</div>\r\n</DraggableComponent>\r\n```\r\n\r\n### 🔸 Molecules (16 Components)\r\n\r\nMore complex components made by combining atoms.\r\n\r\n#### Card\r\nContent display component with status and progress tracking.\r\n\r\n**Props:**\r\n- `title` (string): Card title - Required\r\n- `description` (string): Card description\r\n- `progress` (number): Progress value 0-1 - For progress display\r\n- `status` (string): 'inactive' | 'done' | 'active' - Card state\r\n- `image` (string): Background image URL\r\n- `onClick` (function): Click handler\r\n\r\n**Status Variants:**\r\n- **inactive**: \"Not Started\" - Gray styling\r\n- **active**: \"In Progress\" - Blue accent with progress bar\r\n- **done**: \"Mastered\" - Success styling with full progress\r\n\r\n**Usage:**\r\n```jsx\r\n<Card \r\n  title=\"Two Pointers\"\r\n  description=\"Learn the Two Pointers pattern for coding interviews\"\r\n  progress={0.8}\r\n  status=\"active\"\r\n  onClick={() => navigate('/pattern/two-pointers')}\r\n/>\r\n```\r\n\r\n#### Header\r\nMain navigation header with search and actions.\r\n\r\n**Props:**\r\n- `title` (string): Page title\r\n- `search` (string): Search input value\r\n- `onSearchChange` (function): Search change handler\r\n- `onAddTrack` (function): Add track button handler\r\n\r\n**Usage:**\r\n```jsx\r\n<Header \r\n  title=\"Coding Patterns\"\r\n  search={searchTerm}\r\n  onSearchChange={setSearchTerm}\r\n  onAddTrack={() => setShowAddModal(true)}\r\n/>\r\n```\r\n\r\n#### NavItem\r\nNavigation link component with icon and active states.\r\n\r\n**Props:**\r\n- `icon` (string): Icon name\r\n- `label` (string): Navigation label\r\n- `active` (boolean): Whether item is active\r\n- `onClick` (function): Click handler\r\n\r\n**Usage:**\r\n```jsx\r\n<NavItem icon=\"FaCode\" label=\"Code\" active={currentPage === 'code'} />\r\n```\r\n\r\n#### ProfileMenu\r\nUser profile dropdown with stats and actions.\r\n\r\n**Props:**\r\n- `streak` (number): User's current streak - Default: 0\r\n- `notifications` (number): Notification count - Default: 0\r\n\r\n**Features:**\r\n- Streak counter with fire icon\r\n- Notification badge\r\n- Dropdown menu with profile options\r\n\r\n**Usage:**\r\n```jsx\r\n<ProfileMenu streak={15} notifications={3} />\r\n```\r\n\r\n#### QuestionCard\r\nCard component specifically for displaying questions or problems.\r\n\r\n**Props:**\r\n- Question-specific props\r\n- Difficulty indicators\r\n- Status tracking\r\n\r\n**Usage:**\r\n```jsx\r\n<QuestionCard \r\n  question=\"Implement Two Sum\"\r\n  difficulty=\"easy\"\r\n  completed={false}\r\n/>\r\n```\r\n\r\n#### MetricsCard\r\nDashboard component for displaying key metrics.\r\n\r\n**Props:**\r\n- `title` (string): Metric title\r\n- `value` (number|string): Metric value\r\n- `trend` (string): 'up' | 'down' | 'stable'\r\n- `percentage` (number): Change percentage\r\n\r\n**Usage:**\r\n```jsx\r\n<MetricsCard \r\n  title=\"Problems Solved\"\r\n  value={127}\r\n  trend=\"up\"\r\n  percentage={12}\r\n/>\r\n```\r\n\r\n#### ExpandedCard\r\nDetailed modal card with rich content display including ratings, company badges, and navigation.\r\n\r\n**Props:**\r\n- `title` (string): Card title - Required\r\n- `image` (string): Background image URL\r\n- `description` (string): Detailed description text\r\n- `companies` (array): Array of company names for badges - Default: []\r\n- `difficulty` (string): 'easy' | 'medium' | 'hard' - Default: 'medium'\r\n- `rating` (number): Star rating value 1-5 - Default: 0\r\n- `achieved` (boolean): Whether rating is achieved - Default: false\r\n- `nextTrack` (object): Next track information - { name: string }\r\n- `onContinue` (function): Continue button handler\r\n- `onClose` (function): Close button handler - Required\r\n\r\n**Features:**\r\n- Full-screen modal overlay\r\n- Star rating display\r\n- Company badge list\r\n- Next track navigation\r\n- Close button functionality\r\n\r\n**Usage:**\r\n```jsx\r\n<ExpandedCard \r\n  title=\"Two Pointers\"\r\n  description=\"Master the Two Pointers pattern through carefully selected problems\"\r\n  companies={['Google', 'Microsoft', 'Amazon', 'Facebook', 'Apple']}\r\n  rating={4}\r\n  difficulty=\"medium\"\r\n  achieved={true}\r\n  nextTrack={{ name: 'Advanced Problem Solving' }}\r\n  onContinue={() => navigate('/next-track')}\r\n  onClose={() => setShowExpanded(false)}\r\n/>\r\n```\r\n\r\n#### ExpandedCardInline\r\nInline version of expanded card for compact layouts.\r\n\r\n**Props:**\r\n- Similar to ExpandedCard but optimized for inline display\r\n\r\n**Usage:**\r\n```jsx\r\n<ExpandedCardInline title=\"Quick Review\" content=\"Key concepts\" />\r\n```\r\n\r\n#### EmailComposer\r\nComponent for composing and sending emails.\r\n\r\n**Props:**\r\n- Email composition specific props\r\n- Recipients, subject, body handling\r\n\r\n**Usage:**\r\n```jsx\r\n<EmailComposer \r\n  to=\"user@example.com\"\r\n  subject=\"Weekly Progress\"\r\n  onSend={handleSend}\r\n/>\r\n```\r\n\r\n#### EmailOptionCard\r\nCard component for email-related options and settings.\r\n\r\n**Props:**\r\n- Email option specific props\r\n- Configuration and preference handling\r\n\r\n**Usage:**\r\n```jsx\r\n<EmailOptionCard \r\n  title=\"Weekly Digest\"\r\n  description=\"Get weekly progress updates\"\r\n  enabled={emailPrefs.weekly}\r\n  onToggle={toggleWeeklyEmails}\r\n/>\r\n```\r\n\r\n#### CardCarousel\r\nCarousel component for displaying multiple cards.\r\n\r\n**Props:**\r\n- `cards` (array): Array of card data\r\n- `autoPlay` (boolean): Auto-advance slides\r\n- `interval` (number): Auto-play interval in ms\r\n\r\n**Usage:**\r\n```jsx\r\n<CardCarousel \r\n  cards={featuredPatterns}\r\n  autoPlay={true}\r\n  interval={5000}\r\n/>\r\n```\r\n\r\n#### ComponentPalette\r\nPalette for selecting and organizing components.\r\n\r\n**Props:**\r\n- Component organization and selection props\r\n- Drag and drop support\r\n\r\n**Usage:**\r\n```jsx\r\n<ComponentPalette \r\n  components={availableComponents}\r\n  onSelect={handleComponentSelect}\r\n/>\r\n```\r\n\r\n#### BrainSegment\r\nSpecialized component for brain/neural visualization.\r\n\r\n**Props:**\r\n- Visualization specific props\r\n- Interactive brain mapping\r\n\r\n**Usage:**\r\n```jsx\r\n<BrainSegment \r\n  region=\"frontal\"\r\n  activity={0.8}\r\n  onClick={showRegionDetails}\r\n/>\r\n```\r\n\r\n#### MentorBubble\r\nChat-like component for mentor guidance.\r\n\r\n**Props:**\r\n- `message` (string): Mentor message\r\n- `avatar` (string): Mentor avatar URL\r\n- `timestamp` (Date): Message timestamp\r\n\r\n**Usage:**\r\n```jsx\r\n<MentorBubble \r\n  message=\"Great job on solving that problem!\"\r\n  avatar=\"/mentor-avatar.jpg\"\r\n  timestamp={new Date()}\r\n/>\r\n```\r\n\r\n#### ProblemTable\r\nTable component for displaying coding problems.\r\n\r\n**Props:**\r\n- `problems` (array): Array of problem data\r\n- `sortBy` (string): Sort field\r\n- `onSort` (function): Sort handler\r\n- `onRowClick` (function): Row click handler\r\n\r\n**Usage:**\r\n```jsx\r\n<ProblemTable \r\n  problems={codingProblems}\r\n  sortBy=\"difficulty\"\r\n  onSort={handleSort}\r\n  onRowClick={openProblem}\r\n/>\r\n```\r\n\r\n#### HoverSyncEffect\r\nAdvanced utility component for synchronizing hover states between elements (implemented as hooks and manager classes).\r\n\r\n**Exports:**\r\n- `useHoverSync` - React hook for basic hover synchronization\r\n- `HoverSyncManager` - Class for managing complex hover interactions\r\n- `useHoverSyncManager` - React hook using the manager\r\n- `requirementsHoverSync` - Singleton instance for global hover sync\r\n\r\n**Hook Props (useHoverSync):**\r\n- `activeElementId` (string): Currently active element ID\r\n- `onHoverChange` (function): Callback for hover state changes\r\n- `syncDelay` (number): Delay in ms to prevent flickering - Default: 50\r\n\r\n**Manager Methods:**\r\n- `subscribe(elementId, callback)` - Subscribe to hover events\r\n- `setHover(elementId, delay)` - Set hover state\r\n- `clearHover(elementId, delay)` - Clear hover state\r\n- `getCurrentHover()` - Get current hovered element\r\n\r\n**Usage:**\r\n```jsx\r\nimport { useHoverSyncManager } from '@avinash_tyagi/design-system-components';\r\n\r\nfunction SyncedComponent({ elementId }) {\r\n  const { handleMouseEnter, handleMouseLeave, currentHover } = useHoverSyncManager(\r\n    elementId,\r\n    (hoveredId, isHovered) => {\r\n      console.log(`Element ${hoveredId} hover state:`, isHovered);\r\n    }\r\n  );\r\n\r\n  return (\r\n    <div \r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n      className={currentHover === elementId ? 'hovered' : ''}\r\n    >\r\n      Synced hover element\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n#### RequirementQuestion\r\nComponent for requirement gathering questions.\r\n\r\n**Props:**\r\n- `question` (string): Question text\r\n- `required` (boolean): Whether answer is required\r\n- `onAnswer` (function): Answer handler\r\n\r\n**Usage:**\r\n```jsx\r\n<RequirementQuestion \r\n  question=\"What's your experience level?\"\r\n  required={true}\r\n  onAnswer={setExperienceLevel}\r\n/>\r\n```\r\n\r\n## 🎨 Theming & Customization\r\n\r\nThe design system uses CSS custom properties for theming. You can override these variables:\r\n\r\n```css\r\n:root {\r\n  --primary-color: #0066ff;\r\n  --secondary-color: #003d99;\r\n  --success-color: #22c55e;\r\n  --warning-color: #f59e0b;\r\n  --danger-color: #ef4444;\r\n  --background-dark: #0a0f1c;\r\n  --text-primary: #ffffff;\r\n  --border-radius: 8px;\r\n  --glow-color: rgba(0, 102, 255, 0.4);\r\n}\r\n```\r\n\r\n### Component Variants Summary\r\n\r\n| Component | Available Variants |\r\n|-----------|-------------------|\r\n| Button | `primary`, `secondary`, `back`, `integration` |\r\n| Badge | `default`, `success`, `warning`, `danger` |\r\n| Modal | `small`, `medium`, `large` |\r\n| Icon | `default`, `status` |\r\n| Card | `inactive`, `active`, `done` |\r\n| Rating | `easy`, `medium`, `hard` |\r\n\r\n## 📱 Responsive Design\r\n\r\nAll components are designed to be responsive and work across different screen sizes:\r\n\r\n- **Desktop** (1200px+): Full feature set with hover effects\r\n- **Tablet** (768px - 1199px): Adapted spacing and touch-friendly interactions\r\n- **Mobile** (below 768px): Compact layouts and touch-optimized controls\r\n\r\n### Responsive Features:\r\n- Adaptive component sizing\r\n- Touch-friendly interaction areas\r\n- Simplified layouts on smaller screens\r\n- Optimized loading and animations\r\n\r\n## ♿ Accessibility\r\n\r\nComponents follow WCAG 2.1 AA guidelines:\r\n\r\n- **Semantic HTML**: Proper heading hierarchy and landmarks\r\n- **Keyboard Navigation**: Full keyboard support for all interactive elements\r\n- **Screen Reader**: ARIA labels and descriptions\r\n- **Color Contrast**: High contrast ratios (4.5:1 minimum)\r\n- **Focus Management**: Visible focus indicators and logical tab order\r\n\r\n### Accessibility Features:\r\n- `aria-label` attributes on interactive elements\r\n- Semantic button and form elements\r\n- High contrast color schemes\r\n- Keyboard shortcuts for common actions\r\n- Screen reader announcements for state changes\r\n\r\n## 🔧 Development\r\n\r\n### Building the Package\r\n\r\n```bash\r\ncd design-system-components\r\nnpm install\r\nnpm run build\r\n```\r\n\r\nThe build process creates:\r\n- `dist/index.cjs.js` - CommonJS bundle\r\n- `dist/index.esm.js` - ES modules bundle\r\n- CSS files are bundled with components\r\n\r\n### Testing Components\r\n\r\nThe main application serves as a living style guide and testing ground:\r\n\r\n```bash\r\n# In the root directory\r\nnpm install\r\nnpm start\r\n```\r\n\r\nVisit `http://localhost:3000` to see all components in action with:\r\n- Interactive examples\r\n- State variations\r\n- Real-world usage patterns\r\n\r\n### Component Development Guidelines\r\n\r\n1. **Follow Atomic Design**: Keep atoms simple, molecules focused\r\n2. **CSS-in-JS**: Each component has its own CSS file\r\n3. **Props Validation**: Use TypeScript or PropTypes for type safety\r\n4. **Accessibility First**: Include ARIA attributes and keyboard support\r\n5. **Performance**: Optimize for tree-shaking and minimal bundle size\r\n\r\n### Contributing\r\n\r\nWe welcome contributions! Please follow these steps:\r\n\r\n1. **Fork** the repository\r\n2. **Create** a feature branch (`git checkout -b feature/new-component`)\r\n3. **Follow** the existing code style and patterns\r\n4. **Test** your component thoroughly\r\n5. **Update** documentation (including this README)\r\n6. **Submit** a pull request\r\n\r\n### Code Style\r\n\r\n- Use functional components with hooks\r\n- Follow the existing CSS naming conventions\r\n- Include comprehensive prop documentation\r\n- Add usage examples for complex components\r\n- Ensure responsive behavior\r\n\r\n## 📈 Performance\r\n\r\nThe design system is optimized for performance:\r\n\r\n- **Tree Shaking**: Import only the components you use\r\n- **CSS Optimization**: Minimal CSS with efficient selectors\r\n- **Bundle Size**: Optimized builds with code splitting\r\n- **Animations**: Hardware-accelerated CSS transitions\r\n- **Loading**: Lazy loading for complex components\r\n\r\n### Bundle Analysis\r\n\r\n```bash\r\n# Analyze bundle size\r\nnpm run build\r\nnpm run analyze  # If available\r\n```\r\n\r\n## 🐛 Troubleshooting\r\n\r\n### Common Issues\r\n\r\n**Icons not displaying:**\r\n- Ensure `react-icons` is installed as a peer dependency\r\n- Check that the icon name is correct (case-sensitive)\r\n\r\n**Styling not applied:**\r\n- Verify CSS imports are working in your build system\r\n- Check for CSS conflicts with existing styles\r\n\r\n**Components not responsive:**\r\n- Ensure viewport meta tag is set\r\n- Check for fixed width containers\r\n\r\n### Debug Mode\r\n\r\nEnable debug logging by setting:\r\n```jsx\r\nwindow.designSystemDebug = true;\r\n```\r\n\r\n## 📞 Support\r\n\r\nFor issues and questions:\r\n\r\n- **GitHub Issues**: Create an issue for bugs or feature requests\r\n- **Documentation**: Check component source code for detailed implementation\r\n- **Examples**: Refer to the demo application for usage patterns\r\n\r\n### Useful Links\r\n\r\n- [Package on NPM](https://www.npmjs.com/package/@avinash_tyagi/design-system-components)\r\n- [Source Code](https://github.com/Avin1998/design_system)\r\n- [Demo Application](http://localhost:3000) (when running locally)\r\n\r\n## 📄 License\r\n\r\nMIT License - see LICENSE file for details.\r\n\r\n---\r\n\r\n**Version:** 1.0.1  \r\n**Author:** Avinash Tyagi  \r\n**Package:** @avinash_tyagi/design-system-components  \r\n**Last Updated:** January 2025\r\n\r\n> 💡 **Tip**: Start with the basic atoms (Button, Input, Badge) and gradually incorporate the more complex molecules as your application grows. The design system is built to scale with your needs.","readmeFilename":"README.md"}