{"_id":"@abbydev/react-components","name":"@abbydev/react-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abbydev/react-components","version":"1.0.0","description":"Shared React web components library","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styles.css":"./dist/style.css"},"keywords":["react","components","ui","library","typescript"],"author":{"name":"Abby","email":"ismoilovabbosdev@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ismoilovDev/react-components.git"},"homepage":"https://github.com/ismoilovDev/react-components#readme","bugs":{"url":"https://github.com/ismoilovDev/react-components/issues"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/react":"^18.2.43","@types/react-dom":"^18.2.17","@typescript-eslint/eslint-plugin":"^6.14.0","@typescript-eslint/parser":"^6.14.0","@vitejs/plugin-react":"^4.2.1","eslint":"^8.55.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.5","typescript":"^5.2.2","vite":"^5.0.8","vite-plugin-dts":"^3.7.0","react":"^18.2.0","react-dom":"^18.2.0"},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","lint":"eslint . --ext ts,tsx","type-check":"tsc --noEmit","release:patch":"npm version patch && npm run build && npm publish --access public","release:minor":"npm version minor && npm run build && npm publish --access public","release:major":"npm version major && npm run build && npm publish --access public"},"_id":"@abbydev/react-components@1.0.0","_integrity":"sha512-TBo36Lbmhlbp8h2SXZrk/kkC+HczKjj6CUblm7c7twRU8qr9NSfiT0uoO38inUcPgEcBc3mWlVn/M/g5HGGIwQ==","_resolved":"C:\\Users\\ismoi\\AppData\\Local\\Temp\\8b56de44f3a1555cf208fb1557b9f043\\abbydev-react-components-1.0.0.tgz","_from":"file:abbydev-react-components-1.0.0.tgz","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-TBo36Lbmhlbp8h2SXZrk/kkC+HczKjj6CUblm7c7twRU8qr9NSfiT0uoO38inUcPgEcBc3mWlVn/M/g5HGGIwQ==","shasum":"4fa0009671f6ab5e371aa617dda3da3e18a6be6b","tarball":"https://registry.npmjs.org/@abbydev/react-components/-/react-components-1.0.0.tgz","fileCount":44,"unpackedSize":95352,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHinUoSjpUENkRhQsWI4cfTpHFRXqVpCrIfmnTQkYCh3AiEAuqnj7SiprP4m9cOzcVLAwEavh86DIunbyH/z1RgtFQs="}]},"_npmUser":{"name":"abbydev","email":"ismoilovabbosdev@gmail.com"},"directories":{},"maintainers":[{"name":"abbydev","email":"ismoilovabbosdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-components_1.0.0_1762627135273_0.822326944734453"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-08T18:38:55.212Z","1.0.0":"2025-11-08T18:38:55.456Z","modified":"2025-11-08T18:38:55.714Z"},"maintainers":[{"name":"abbydev","email":"ismoilovabbosdev@gmail.com"}],"description":"Shared React web components library","homepage":"https://github.com/ismoilovDev/react-components#readme","keywords":["react","components","ui","library","typescript"],"repository":{"type":"git","url":"git+https://github.com/ismoilovDev/react-components.git"},"author":{"name":"Abby","email":"ismoilovabbosdev@gmail.com"},"bugs":{"url":"https://github.com/ismoilovDev/react-components/issues"},"license":"MIT","readme":"# Shared React Components\r\n\r\nA modern, beautiful, and fully-typed collection of reusable React components built with TypeScript and Vite.\r\n\r\n## Features\r\n\r\n- 🎨 **Beautiful Design** - Modern UI components with smooth animations and transitions\r\n- 🔷 **TypeScript** - Fully typed for excellent developer experience\r\n- 📦 **Tree-shakeable** - Import only what you need\r\n- ♿ **Accessible** - Built with accessibility in mind\r\n- 🎭 **Customizable** - Easy to style and extend\r\n- 🚀 **Performance** - Optimized bundle size and runtime performance\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @shared/react-components\r\n# or\r\nyarn add @shared/react-components\r\n# or\r\npnpm add @shared/react-components\r\n```\r\n\r\n## Usage\r\n\r\nImport the components you need and start using them:\r\n\r\n```tsx\r\nimport { Button, Input, Card, Modal } from '@shared/react-components';\r\n\r\nfunction App() {\r\n  return (\r\n    <div>\r\n      <Button variant=\"primary\">Click me!</Button>\r\n      <Input label=\"Username\" placeholder=\"Enter username\" />\r\n      <Card header=\"Welcome\">\r\n        <p>This is a card component</p>\r\n      </Card>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Components\r\n\r\n### Button\r\n\r\nA versatile button component with multiple variants and sizes.\r\n\r\n```tsx\r\n<Button variant=\"primary\" size=\"medium\" loading={false}>\r\n  Click me\r\n</Button>\r\n```\r\n\r\n**Props:**\r\n- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'\r\n- `size`: 'small' | 'medium' | 'large'\r\n- `loading`: boolean\r\n- `disabled`: boolean\r\n- `fullWidth`: boolean\r\n- `leftIcon`: ReactNode\r\n- `rightIcon`: ReactNode\r\n\r\n### Input\r\n\r\nA styled input component with label, error, and helper text support.\r\n\r\n```tsx\r\n<Input\r\n  label=\"Email\"\r\n  type=\"email\"\r\n  placeholder=\"Enter your email\"\r\n  error=\"Invalid email\"\r\n  helperText=\"We'll never share your email\"\r\n/>\r\n```\r\n\r\n**Props:**\r\n- `label`: string\r\n- `error`: string\r\n- `helperText`: string\r\n- `size`: 'small' | 'medium' | 'large'\r\n- `fullWidth`: boolean\r\n- `leftIcon`: ReactNode\r\n- `rightIcon`: ReactNode\r\n\r\n### Card\r\n\r\nA container component for grouping content.\r\n\r\n```tsx\r\n<Card\r\n  header=\"Card Title\"\r\n  footer={<Button>Action</Button>}\r\n  hoverable\r\n  shadow=\"medium\"\r\n>\r\n  Card content goes here\r\n</Card>\r\n```\r\n\r\n**Props:**\r\n- `header`: ReactNode\r\n- `footer`: ReactNode\r\n- `hoverable`: boolean\r\n- `bordered`: boolean\r\n- `shadow`: 'none' | 'small' | 'medium' | 'large'\r\n\r\n### Modal\r\n\r\nA dialog component for displaying content in an overlay.\r\n\r\n```tsx\r\n<Modal\r\n  open={isOpen}\r\n  onClose={() => setIsOpen(false)}\r\n  title=\"Modal Title\"\r\n  size=\"medium\"\r\n  footer={<Button onClick={() => setIsOpen(false)}>Close</Button>}\r\n>\r\n  Modal content\r\n</Modal>\r\n```\r\n\r\n**Props:**\r\n- `open`: boolean\r\n- `onClose`: () => void\r\n- `title`: ReactNode\r\n- `footer`: ReactNode\r\n- `size`: 'small' | 'medium' | 'large' | 'full'\r\n- `closeOnOverlayClick`: boolean\r\n- `closeOnEscape`: boolean\r\n- `showCloseButton`: boolean\r\n\r\n### Badge\r\n\r\nA small component for displaying status or count.\r\n\r\n```tsx\r\n<Badge variant=\"success\" size=\"medium\" rounded>\r\n  New\r\n</Badge>\r\n```\r\n\r\n**Props:**\r\n- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'\r\n- `size`: 'small' | 'medium' | 'large'\r\n- `rounded`: boolean\r\n\r\n### Spinner\r\n\r\nA loading indicator component.\r\n\r\n```tsx\r\n<Spinner size=\"medium\" color=\"var(--color-primary)\" />\r\n```\r\n\r\n**Props:**\r\n- `size`: 'small' | 'medium' | 'large'\r\n- `color`: string\r\n\r\n### Alert\r\n\r\nA component for displaying important messages.\r\n\r\n```tsx\r\n<Alert\r\n  variant=\"success\"\r\n  title=\"Success!\"\r\n  closable\r\n  onClose={() => console.log('Alert closed')}\r\n>\r\n  Your changes have been saved.\r\n</Alert>\r\n```\r\n\r\n**Props:**\r\n- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'\r\n- `title`: string\r\n- `closable`: boolean\r\n- `onClose`: () => void\r\n- `icon`: ReactNode\r\n\r\n## Styling\r\n\r\nAll components come with default styles, but you can customize them using CSS variables:\r\n\r\n```css\r\n:root {\r\n  --color-primary: #3b82f6;\r\n  --color-success: #22c55e;\r\n  --color-danger: #ef4444;\r\n  /* ... and many more */\r\n}\r\n```\r\n\r\nYou can also override component styles using className prop:\r\n\r\n```tsx\r\n<Button className=\"my-custom-button\">Custom Button</Button>\r\n```\r\n\r\n## Development\r\n\r\n### Running the Demo\r\n\r\n```bash\r\nnpm install\r\nnpm run dev\r\n```\r\n\r\nVisit `http://localhost:5173` to see the component demo.\r\n\r\n### Building\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nThis will generate the production-ready files in the `dist` directory.\r\n\r\n### Type Checking\r\n\r\n```bash\r\nnpm run type-check\r\n```\r\n\r\n### Linting\r\n\r\n```bash\r\nnpm run lint\r\n```\r\n\r\n## Browser Support\r\n\r\n- Chrome (latest)\r\n- Firefox (latest)\r\n- Safari (latest)\r\n- Edge (latest)\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n","readmeFilename":"README.md","_rev":"1-56c54b4a4601ac2b1d0ca6c8261612b7"}