{"_id":"@amira_gad/ui-components","name":"@amira_gad/ui-components","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amira_gad/ui-components","version":"1.0.0","description":"Shared UI components library for DGA design system","main":"./dist/index.js","module":"./dist/index.esm.js","types":"./dist/index.d.ts","author":{"name":"amiragad"},"license":"ISC","keywords":["react","components","ui","design-system","dga","typescript"],"repository":{"type":"git","url":"git+https://github.com/your-username/your-repo.git"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"},"./styles":"./dist/styles.css"},"scripts":{"build":"vite build && tsc --emitDeclarationOnly --outDir dist","dev":"vite build --watch","prepublishOnly":"npm run build","publish:private":"npm publish --access restricted","publish:public":"npm publish --access public"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"react-router-dom":{"optional":true}},"devDependencies":{"@types/react":"^19.2.5","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","react":"^19.2.0","react-dom":"^19.2.0","typescript":"~5.9.3","vite":"^7.2.4","vite-plugin-dts":"^4.3.0"},"_id":"@amira_gad/ui-components@1.0.0","bugs":{"url":"https://github.com/your-username/your-repo/issues"},"homepage":"https://github.com/your-username/your-repo#readme","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-+lSssRgxZZVHq3q8DKbRqjilowE8l23NbGJGV70z2oXXv+SgcaFrfbKJKIxNgV/lbUI44yE/iCpmP/jU3oKWSw==","shasum":"4b8e9af093a3365986508c2392b506b18f69e0d2","tarball":"https://registry.npmjs.org/@amira_gad/ui-components/-/ui-components-1.0.0.tgz","fileCount":28,"unpackedSize":79816,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDeBB7oqay1DAkg4S3gIqQWgx1xV6gsB63mbpHg5RFXwQIhAPOtEyOGnBJFU8q88qMlymPxN3064NmdCw/YjVUBdDDh"}]},"_npmUser":{"name":"amira_gad","email":"amira.gad.177@gmail.com"},"directories":{},"maintainers":[{"name":"amira_gad","email":"amira.gad.177@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-components_1.0.0_1764243283354_0.8910115665445697"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-27T11:34:43.232Z","1.0.0":"2025-11-27T11:34:43.548Z","modified":"2025-11-27T11:34:43.843Z"},"maintainers":[{"name":"amira_gad","email":"amira.gad.177@gmail.com"}],"description":"Shared UI components library for DGA design system","homepage":"https://github.com/your-username/your-repo#readme","keywords":["react","components","ui","design-system","dga","typescript"],"repository":{"type":"git","url":"git+https://github.com/your-username/your-repo.git"},"author":{"name":"amiragad"},"bugs":{"url":"https://github.com/your-username/your-repo/issues"},"license":"ISC","readme":"# @self-created/ui-components\r\n\r\nShared UI components library for the self-created project.\r\n\r\n## Installation\r\n\r\nThis is a private npm package. To use it in your project:\r\n\r\n```bash\r\nnpm install @self-created/ui-components\r\n```\r\n\r\nOr if using it locally in a monorepo:\r\n\r\n```bash\r\nnpm install ./packages/ui-components\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\nimport { Button } from '@self-created/ui-components';\r\n\r\n<Button variant=\"primary\" size=\"md\" onClick={handleClick}>\r\n  Click me\r\n</Button>\r\n```\r\n\r\n**Props:**\r\n- `variant`: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'\r\n- `size`: 'sm' | 'md' | 'lg'\r\n- `fullWidth`: boolean\r\n- `isLoading`: boolean\r\n- `leftIcon`: ReactNode\r\n- `rightIcon`: ReactNode\r\n\r\n### Input\r\n\r\nA form input component with label, error, and helper text support.\r\n\r\n```tsx\r\nimport { Input } from '@self-created/ui-components';\r\n\r\n<Input\r\n  label=\"Email\"\r\n  type=\"email\"\r\n  value={email}\r\n  onChange={(e) => setEmail(e.target.value)}\r\n  error={errors.email}\r\n  helperText=\"Enter your email address\"\r\n/>\r\n```\r\n\r\n### Form\r\n\r\nA form wrapper component that handles form submission.\r\n\r\n```tsx\r\nimport { Form } from '@self-created/ui-components';\r\n\r\n<Form onSubmit={handleSubmit}>\r\n  {/* form fields */}\r\n</Form>\r\n```\r\n\r\n### Table\r\n\r\nA flexible table component with sorting, loading, and empty states.\r\n\r\n```tsx\r\nimport { Table, type TableColumn } from '@self-created/ui-components';\r\n\r\nconst columns: TableColumn<User>[] = [\r\n  { key: 'name', header: 'Name', align: 'left' },\r\n  { key: 'email', header: 'Email', align: 'left' },\r\n];\r\n\r\n<Table\r\n  columns={columns}\r\n  data={users}\r\n  loading={isLoading}\r\n  striped\r\n  hoverable\r\n/>\r\n```\r\n\r\n### Breadcrumb\r\n\r\nA breadcrumb navigation component. Supports both regular links and React Router links.\r\n\r\n```tsx\r\nimport { Breadcrumb } from '@self-created/ui-components';\r\nimport { Link } from 'react-router-dom';\r\n\r\n<Breadcrumb\r\n  items={[\r\n    { label: 'Home', to: '/' },\r\n    { label: 'Users', to: '/users' },\r\n    { label: 'Current Page' },\r\n  ]}\r\n  LinkComponent={Link}\r\n/>\r\n```\r\n\r\n## Styling\r\n\r\nThis package uses Tailwind CSS classes. Make sure your project has Tailwind CSS configured with the following custom colors:\r\n\r\n```js\r\n// tailwind.config.js\r\ncolors: {\r\n  'dga-primary': {\r\n    DEFAULT: '#006B3C',\r\n    dark: '#00502D',\r\n    light: '#008A4F',\r\n    hover: '#005A33',\r\n  },\r\n  'dga-secondary': {\r\n    DEFAULT: '#1E3A5F',\r\n    dark: '#152A47',\r\n    light: '#2A4F7A',\r\n  },\r\n  'dga-success': '#10B981',\r\n  'dga-error': '#EF4444',\r\n  'dga-warning': '#F59E0B',\r\n  'dga-info': '#3B82F6',\r\n}\r\n```\r\n\r\n## Development\r\n\r\n```bash\r\n# Build the package\r\nnpm run build\r\n\r\n# Watch mode for development\r\nnpm run dev\r\n```\r\n\r\n## Peer Dependencies\r\n\r\n- react: ^18.0.0 || ^19.0.0\r\n- react-dom: ^18.0.0 || ^19.0.0\r\n- react-router-dom: optional (only needed if using Breadcrumb with `to` prop)\r\n\r\n","readmeFilename":"README.md","_rev":"1-ff948c5995a58d83c0ecb5129539482f"}