{"_id":"@adersolutions/sirius-ui","_rev":"4-b88d899132c09f4194035309c6b908ac","name":"@adersolutions/sirius-ui","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.5":{"name":"@adersolutions/sirius-ui","version":"1.0.5","author":{"name":"Soufiyan","email":"benallalsoufiane1@gmail.com"},"_id":"@adersolutions/sirius-ui@1.0.5","maintainers":[{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"}],"dist":{"shasum":"a69da185f1a94306b0e0a920bc2ae6d058f8eb5e","tarball":"https://registry.npmjs.org/@adersolutions/sirius-ui/-/sirius-ui-1.0.5.tgz","fileCount":7,"integrity":"sha512-Dmr9rv6Z0eO3R7wImjmvC+hkvhuMrra38CRW5SORQM7lcnh1bY8Cu3w9JFAhGewSkIO4lA5aQAGit+M2LP+bKA==","signatures":[{"sig":"MEYCIQD0PS5xBsNVUFJSyAAYcPpoIPc26N5MTscyaEYUncJVDAIhAOxBU1N/J7tGKFx4mjwxIURQSd90FOKPH0oyR/hDqK28","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":300406},"main":"./dist/sirius.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/sirius.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/sirius.es.js","require":"./dist/sirius.cjs"},"./style.css":{"default":"./dist/style.css","require":"./dist/style.css"}},"gitHead":"a0a2c33f1d596f723a3a760d852c4e0e9de04dd9","private":false,"scripts":{"dev":"vite","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","lint2":"eslint 'src/**/*.{js,jsx,ts,tsx}'","format":"prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc","prepack":"json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"","prepare":"husky install","preview":"vite preview","lint:fix":"eslint --fix 'src/**/*.{jsx,ts,tsx}'"},"_npmUser":{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"},"_npmVersion":"10.9.2","description":"","directories":{},"_nodeVersion":"22.13.0","_hasShrinkwrap":false,"packageManager":"pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0","peerDependencies":{"react":"^18.2.0 || >=17.x","react-dom":"^18.2.0 || >=17.x"},"_npmOperationalInternal":{"tmp":"tmp/sirius-ui_1.0.5_1755979199734_0.5243689292133715","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.6":{"name":"@adersolutions/sirius-ui","version":"1.0.6","author":{"name":"Soufiyan","email":"benallalsoufiane1@gmail.com"},"_id":"@adersolutions/sirius-ui@1.0.6","maintainers":[{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"}],"dist":{"shasum":"5bee60519c38c3b15c94bb9ac2b4d0db2c2c5db4","tarball":"https://registry.npmjs.org/@adersolutions/sirius-ui/-/sirius-ui-1.0.6.tgz","fileCount":7,"integrity":"sha512-gYeJsGDs9DfYuAUDjpj8+6PlMXFBeYQrU/S1I+Vx3lr8+tJAB+3omWAUpjn2eoeuj7bh+DxE3ilxl+i69XiC4g==","signatures":[{"sig":"MEUCIEOBi/ltC8lR8+WgnfyzqlqsvGATch0KOEL9rDLyvY7tAiEAuXEbt/m9ewMH8zQnKQYjxqlTSGfsHRDKaWsnmqSyXXI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":307658},"main":"./dist/sirius.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/sirius.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/sirius.es.js","require":"./dist/sirius.cjs"},"./style.css":{"default":"./dist/style.css","require":"./dist/style.css"}},"gitHead":"a0a2c33f1d596f723a3a760d852c4e0e9de04dd9","private":false,"scripts":{"dev":"vite","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","lint2":"eslint 'src/**/*.{js,jsx,ts,tsx}'","format":"prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc","prepack":"json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"","prepare":"husky install","preview":"vite preview","lint:fix":"eslint --fix 'src/**/*.{jsx,ts,tsx}'"},"_npmUser":{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"},"_npmVersion":"10.9.2","description":"A modern, accessible React component library built with TypeScript, Tailwind CSS, and best practices. Sirius UI provides a comprehensive set of reusable components for building beautiful, responsive web applications.","directories":{},"_nodeVersion":"22.13.0","_hasShrinkwrap":false,"packageManager":"pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0","peerDependencies":{"react":"^18.2.0 || >=17.x","react-dom":"^18.2.0 || >=17.x"},"_npmOperationalInternal":{"tmp":"tmp/sirius-ui_1.0.6_1755979478008_0.4720805862695423","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.7":{"name":"@adersolutions/sirius-ui","version":"1.0.7","author":{"name":"Soufiyan","email":"benallalsoufiane1@gmail.com"},"_id":"@adersolutions/sirius-ui@1.0.7","maintainers":[{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"}],"dist":{"shasum":"baf37d29153985b88b4e2d8b9b954c5c5164f8ba","tarball":"https://registry.npmjs.org/@adersolutions/sirius-ui/-/sirius-ui-1.0.7.tgz","fileCount":6,"integrity":"sha512-pFYHNMIGmGE1lIN/whp1jvJqWM7Svdzz9MP2dBj1t/yEnPXZ97ZFMWaua2v9UtrOj1asRxW2LVMSfUttfbCc8w==","signatures":[{"sig":"MEYCIQCUSoNcP9lRCHsWX+/d3/obOP0pKiqltfm5p76CEyBRRwIhAPWBMcvzPVAM13Uc0YDsBouFvg1Eki1AhFFVXiAk8j/L","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":306161},"main":"./dist/sirius.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/sirius.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/sirius.es.js","require":"./dist/sirius.cjs"},"./style.css":{"default":"./dist/style.css","require":"./dist/style.css"}},"gitHead":"a0a2c33f1d596f723a3a760d852c4e0e9de04dd9","private":false,"scripts":{"dev":"vite","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","lint2":"eslint 'src/**/*.{js,jsx,ts,tsx}'","format":"prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc","prepack":"json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"","prepare":"husky install","preview":"vite preview","lint:fix":"eslint --fix 'src/**/*.{jsx,ts,tsx}'"},"_npmUser":{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"},"_npmVersion":"10.9.2","description":"A modern, accessible React component library built with TypeScript, Tailwind CSS, and best practices. Sirius UI provides a comprehensive set of reusable components for building beautiful, responsive web applications.","directories":{},"_nodeVersion":"22.13.0","_hasShrinkwrap":false,"packageManager":"pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0","peerDependencies":{"react":"^18.2.0 || >=17.x","react-dom":"^18.2.0 || >=17.x"},"_npmOperationalInternal":{"tmp":"tmp/sirius-ui_1.0.7_1755979772540_0.9492444283322155","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2025-08-23T19:59:59.634Z","modified":"2025-09-19T21:23:06.152Z","1.0.5":"2025-08-23T19:59:59.969Z","1.0.6":"2025-08-23T20:04:38.302Z","1.0.7":"2025-08-23T20:09:32.718Z"},"author":{"name":"Soufiyan","email":"benallalsoufiane1@gmail.com"},"description":"A modern, accessible React component library built with TypeScript, Tailwind CSS, and best practices. Sirius UI provides a comprehensive set of reusable components for building beautiful, responsive web applications.","maintainers":[{"name":"beyonder.sb","email":"benallalsoufiane1@gmail.com"}],"readme":"# @adersolutions/sirius-ui\n\nA modern, accessible React component library built with TypeScript, Tailwind CSS, and best practices. Sirius UI provides a comprehensive set of reusable components for building beautiful, responsive web applications.\n\n## ✨ Features\n\n- **TypeScript First**: Full TypeScript support with comprehensive type definitions\n- **Modern React**: Built with React 18+ and modern hooks\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development\n- **Accessible**: WCAG compliant components with proper ARIA attributes\n- **Customizable**: Flexible theming and customization options\n- **Tree Shakeable**: Only import what you need to keep your bundle size minimal\n- **Responsive**: Mobile-first responsive design patterns\n\n## 🚀 Installation\n\n```bash\n# Using npm\nnpm install @adersolutions/sirius-ui\n\n# Using yarn\nyarn add @adersolutions/sirius-ui\n\n# Using pnpm\npnpm add @adersolutions/sirius-ui\n```\n\n## 📦 Usage\n\n### Basic Setup\n\n```tsx\nimport React from 'react'\nimport { Button, Text, Heading } from '@adersolutions/sirius-ui'\nimport '@adersolutions/sirius-ui/style.css'\n\nfunction App() {\n  return (\n    <div>\n      <Heading as=\"h1\" variant=\"heading2xl\">\n        Welcome to Sirius UI\n      </Heading>\n      <Text variant=\"bodyMd\" color=\"subdued\">\n        A beautiful component library for modern React applications\n      </Text>\n      <Button variant=\"primary\" size=\"medium\">\n        Get Started\n      </Button>\n    </div>\n  )\n}\n```\n\n### Importing Styles\n\n```tsx\n// Import the main CSS file\nimport '@adersolutions/sirius-ui/style.css'\n```\n\n## 🧩 Components\n\n### Typography\n\n- **Text**: Flexible text component with multiple variants and colors\n- **Heading**: Semantic heading components (h1-h6)\n- **Title**: Page title components with size variants\n- **Subtitle**: Secondary text and description components\n\n```tsx\nimport { Text, Heading, Title, Subtitle } from '@adersolutions/sirius-ui'\n\n<Title size=\"lg\">Main Page Title</Title>\n<Subtitle size=\"md\">Page description goes here</Subtitle>\n<Heading as=\"h2\" variant=\"heading2xl\">Section Heading</Heading>\n<Text variant=\"bodyMd\" color=\"info\">Information text</Text>\n```\n\n### Actions\n\n- **Button**: Versatile button component with multiple variants and sizes\n\n```tsx\nimport { Button } from '@adersolutions/sirius-ui'\n\n<Button variant=\"primary\" size=\"medium\">\n  Primary Action\n</Button>\n<Button variant=\"secondary\" size=\"small\">\n  Secondary Action\n</Button>\n```\n\n### Layout & Structure\n\n- **Box**: Flexible container with shadow and border radius options\n- **Layout**: Responsive layout system with sections\n- **Page**: Page wrapper with title, subtitle, and action support\n- **Stack**: Vertical and horizontal stacking component\n- **EmptyState**: Empty state component for lists and content\n\n```tsx\nimport { Box, Layout, Page, Stack } from '@adersolutions/sirius-ui'\n\n<Page title=\"Dashboard\" subtitle=\"Overview of your data\">\n  <Layout>\n    <Layout.Section primary>\n      <Box sectionned shadow=\"md\">\n        <Stack spacing=\"base\" vertical>\n          <Text variant=\"headingXl\">Content</Text>\n          <Text variant=\"bodyMd\">Your content here</Text>\n        </Stack>\n      </Box>\n    </Layout.Section>\n  </Layout>\n</Page>\n```\n\n### Forms & Selections\n\n- **TextField**: Input and textarea components with validation support\n- **Checkbox**: Accessible checkbox component\n- **ChoiceList**: Radio button and checkbox list components\n- **SearchField**: Search input with advanced filtering\n- **Tabs**: Tab navigation component\n\n```tsx\nimport { TextField, Checkbox, ChoiceList, Tabs } from '@adersolutions/sirius-ui'\n\n<TextField \n  label=\"Email\" \n  type=\"email\" \n  required \n  placeholder=\"Enter your email\"\n/>\n<Checkbox label=\"I agree to terms\" />\n<Tabs tabs={[{ label: 'Tab 1' }, { label: 'Tab 2' }]} />\n```\n\n### Feedback & Notifications\n\n- **Banner**: Status banners for important messages\n- **Toast**: Toast notification system\n- **Badge**: Status and count badges\n- **Spinner**: Loading indicators\n- **Skeleton**: Loading skeleton components\n\n```tsx\nimport { Banner, Toast, Badge, Spinner } from '@adersolutions/sirius-ui'\n\n<Banner status=\"success\">Operation completed successfully!</Banner>\n<Badge status=\"info\">New</Badge>\n<Spinner size=\"medium\" />\n```\n\n### Navigation\n\n- **Navigation**: Sidebar navigation component\n- **Frame**: Application frame wrapper\n- **Header**: Page header component\n\n```tsx\nimport { Navigation, Frame, Header } from '@adersolutions/sirius-ui'\n\n<Frame>\n  <Navigation items={navigationItems} />\n  <Header title=\"Application\" />\n  {/* Your app content */}\n</Frame>\n```\n\n### Overlays & Modals\n\n- **Modal**: Accessible modal dialog component\n- **Tooltip**: Tooltip component\n- **Popover**: Popover component for additional content\n\n```tsx\nimport { Modal, Tooltip, Popover } from '@adersolutions/sirius-ui'\n\n<Modal open={isOpen} onClose={handleClose} title=\"Modal Title\">\n  Modal content goes here\n</Modal>\n<Tooltip content=\"Helpful information\">Hover me</Tooltip>\n```\n\n## 🎨 Theming & Customization\n\n### CSS Custom Properties\n\nSirius UI uses CSS custom properties for theming. You can override these in your CSS:\n\n```css\n:root {\n  --sirius-primary-color: #3b82f6;\n  --sirius-border-radius: 0.5rem;\n  --sirius-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n```\n\n### Tailwind CSS Integration\n\nAll components are built with Tailwind CSS classes and can be customized using Tailwind's configuration:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@adersolutions/sirius-ui/dist/**/*.js'\n  ],\n  theme: {\n    extend: {\n      colors: {\n        primary: '#3b82f6',\n      }\n    }\n  }\n}\n```\n\n## 📱 Responsive Design\n\nAll components are built with mobile-first responsive design:\n\n```tsx\n// Components automatically adapt to different screen sizes\n<Box className=\"p-4 md:p-6 lg:p-8\">\n  <Text variant=\"headingXl md:heading2xl lg:heading3xl\">\n    Responsive Heading\n  </Text>\n</Box>\n```\n\n## ♿ Accessibility\n\nSirius UI components follow WCAG 2.1 guidelines:\n\n- Proper ARIA attributes and roles\n- Keyboard navigation support\n- Screen reader compatibility\n- Focus management\n- Color contrast compliance\n\n## 🔧 Development\n\n### Prerequisites\n\n- Node.js 16+\n- pnpm (recommended) or npm\n\n### Setup\n\n```bash\ngit clone <your-repo>\ncd sirius\npnpm install\npnpm run dev\n```\n\n### Build\n\n```bash\npnpm run build\n```\n\n### Testing\n\n```bash\npnpm run test\n```\n\n## �� API Reference\n\nFor detailed API documentation, visit our [Storybook](link-to-storybook) or check the TypeScript definitions.\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🆘 Support\n\n- **Documentation**: [Link to docs]\n- **Issues**: [GitHub Issues](link-to-issues)\n- **Discussions**: [GitHub Discussions](link-to-discussions)\n- **Email**: benallalsoufiane1@gmail.com\n\n## �� Acknowledgments\n\n- Built with [React](https://reactjs.org/)\n- Styled with [Tailwind CSS](https://tailwindcss.com/)\n- Icons from [Heroicons](https://heroicons.com/)\n- Components inspired by modern design systems\n\n---\n\nMade with ❤️ by [Adersolutions](https://ader-solutions.com)","readmeFilename":"README.md"}