{"_id":"@ashu-gg/passify-ui-components","name":"@ashu-gg/passify-ui-components","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ashu-gg/passify-ui-components","version":"0.1.0","description":"Passify Design System - Shared UI components library","main":"./dist/index.cjs.js","module":"./dist/index.esm.js","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./styles":"./dist/styles.css"},"scripts":{"build":"vite build","dev":"vite","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build","publish":"npm publish"},"keywords":["design-system","components","ui","react"],"author":{"name":"Passify"},"license":"MIT","publishConfig":{"access":"public"},"type":"module","devDependencies":{"@chromatic-com/storybook":"^4.1.2","@storybook/addon-a11y":"^10.0.8","@storybook/addon-docs":"^10.0.8","@storybook/addon-onboarding":"^10.0.8","@storybook/addon-vitest":"^10.0.8","@storybook/react-vite":"^10.0.8","@tailwindcss/forms":"^0.5.10","@tailwindcss/postcss":"^4.1.17","@tailwindcss/typography":"^0.5.19","@vitejs/plugin-react":"^5.1.1","prop-types":"^15.8.1","storybook":"^10.0.8","tailwindcss":"^4.1.17","vite":"^7.2.2","vitest":"^4.0.10","playwright":"^1.56.1","@vitest/browser-playwright":"^4.0.10","@vitest/coverage-v8":"^4.0.10"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"clsx":"^2.1.1","tailwind-merge":"^3.4.0"},"_id":"@ashu-gg/passify-ui-components@0.1.0","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-64+/XMtxQJutjP2mE8jSe398ObNR5YIVSMrvxK7aUznBqKhoCQXPnZMiTETNbSlc66bk2BNKFBTCnVBCPKp4qQ==","shasum":"298a4ad385ac4f3dcdd826a05f2e984190f1ecaf","tarball":"https://registry.npmjs.org/@ashu-gg/passify-ui-components/-/passify-ui-components-0.1.0.tgz","fileCount":5,"unpackedSize":180144,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBl7Si8676wr2DTGFIB3v/yZZWHrHbcVcA+Xdf5Zf1NEAiEAnWzPqS4JIsXMy5afNr96OJPsFok1o/9wL2xw08zs6tQ="}]},"_npmUser":{"name":"ashu-gg","email":"ashutosh.jha@gogroup.co"},"directories":{},"maintainers":[{"name":"ashu-gg","email":"ashutosh.jha@gogroup.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/passify-ui-components_0.1.0_1763467339132_0.2585842453094973"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-18T12:02:19.043Z","0.1.0":"2025-11-18T12:02:19.316Z","modified":"2025-11-18T12:02:19.586Z"},"maintainers":[{"name":"ashu-gg","email":"ashutosh.jha@gogroup.co"}],"description":"Passify Design System - Shared UI components library","keywords":["design-system","components","ui","react"],"author":{"name":"Passify"},"license":"MIT","readme":"# @ashu-gg/passify-ui-components\n\nPassify UI Components - Shared UI components library for Passify applications.\n\n## Installation\n\n```bash\nnpm install @ashu-gg/passify-ui-components\n```\n\n## Prerequisites\n\nThis package requires:\n- React 19.0.0 or higher\n- React DOM 19.0.0 or higher\n- Tailwind CSS v4 (for styling)\n\n## Usage\n\n### Import Styles\n\nFirst, import the design system styles in your application's root CSS file or layout:\n\n```css\n@import '@ashu-gg/passify-ui-components/styles';\n```\n\nOr in JavaScript/JSX:\n\n```javascript\nimport '@ashu-gg/passify-ui-components/styles';\n```\n\n### Import Components\n\n```javascript\nimport { Button } from '@ashu-gg/passify-ui-components';\n```\n\n### Example: Button Component\n\n```jsx\nimport { Button } from '@ashu-gg/passify-ui-components';\n\nfunction MyComponent() {\n return (\n
\n \n \n \n \n \n
\n );\n}\n```\n\n## Button Component API\n\n### Variants\n\n- `primary` - Main action buttons with solid green background\n- `secondary` - Secondary actions with white background and border\n- `link` - Link-style buttons without background\n- `alert` - Alert buttons (requires `state` prop: `success`, `error`, or `neutral`)\n\n### Sizes\n\n- `large` - 36px height, 16px font size\n- `regular` - 30px height, 14px font size (default)\n- `small` - 22px height, 12px font size\n- `xsmall` - 18px height, 11px font size\n\n### Button Types\n\n- `text` - Text only (default)\n- `left-icon` - Icon before text\n- `right-icon` - Icon after text\n- `icon-only` - Icon without text\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `variant` | `'primary' \\| 'secondary' \\| 'link' \\| 'alert'` | `'primary'` | Button variant |\n| `size` | `'large' \\| 'regular' \\| 'small' \\| 'xsmall'` | `'regular'` | Button size |\n| `buttonType` | `'text' \\| 'left-icon' \\| 'right-icon' \\| 'icon-only'` | `'text'` | Button type |\n| `disabled` | `boolean` | `false` | Disabled state |\n| `leftIcon` | `ReactNode` | - | Icon to display on the left |\n| `rightIcon` | `ReactNode` | - | Icon to display on the right |\n| `icon` | `ReactNode` | - | Icon for icon-only buttons |\n| `onClick` | `Function` | - | Click handler |\n| `type` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | HTML button type |\n| `className` | `string` | - | Additional CSS classes |\n| `state` | `'success' \\| 'error' \\| 'neutral'` | - | Required for `alert` variant |\n| `ariaLabel` | `string` | - | Required for icon-only buttons |\n\n## Design Tokens\n\nThe design system includes comprehensive design tokens for:\n- Colors (Primary, Secondary, Neutral, Alert colors)\n- Typography (Font families, sizes, weights, letter spacing)\n- Spacing\n- Border radius\n- Shadows\n\nAll tokens are available through Tailwind CSS classes and CSS custom properties.\n\n## Development\n\nThis package is built with:\n- React 19\n- Tailwind CSS v4\n- Vite\n- Storybook\n\n## License\n\nMIT - See LICENSE file for details.\n\n","readmeFilename":"README.md","_rev":"1-81b3dc02bbfe08d1d4d8fbfe3c9f9b41"}