{"_id":"@abhirupprowiz/ui","name":"@abhirupprowiz/ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@abhirupprowiz/ui","version":"1.0.0","description":"Prowiz UI component library — Accordion, Avatar, AvatarGroup, AvatarLabelGroup, BadgeGroup","license":"ISC","author":"","type":"module","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./styles":"./dist/styles.css","./tailwind-preset":"./tailwind-preset.js"},"main":"./dist/index.cjs","types":"./dist/index.d.ts","scripts":{"dev":"vite","preview":"vite preview","build:demo":"tsc && vite build","build:lib":"tsup && npm run build:css","build:css":"postcss src/styles/index.css -o dist/styles.css","build":"npm run build:lib","type-check":"tsc --noEmit"},"devDependencies":{"@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-avatar":"^1.1.11","@types/react":"^18.3.1","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.1","autoprefixer":"^10.5.0","clsx":"^2.1.1","lucide-react":"^0.468.0","postcss":"^8.5.13","postcss-cli":"^11.0.1","react":"^18.3.1","react-dom":"^18.3.1","tailwind-merge":"^3.5.0","tailwindcss":"^3.4.19","tsup":"^8.5.1","typescript":"^5.5.3","vite":"^5.4.10"},"peerDependencies":{"@radix-ui/react-accordion":">=1","@radix-ui/react-avatar":">=1","clsx":">=2","lucide-react":">=0.400","react":">=18","react-dom":">=18","tailwind-merge":">=3"},"module":"./dist/index.js","_id":"@abhirupprowiz/ui@1.0.0","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-7wc04SW/ly9mcBoiumfbFrq61V0uj/L9WxvTsxPCMIcuHO4j2VeLsZjaY1UEsXN/TILRDs+VBBQuaLy8jWr8GA==","shasum":"4190c5c69ebb6c8161660aa794d15c9872b321a4","tarball":"https://registry.npmjs.org/@abhirupprowiz/ui/-/ui-1.0.0.tgz","fileCount":10,"unpackedSize":187484,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGOWgh7u1kYy3zB6ZHa5pXGwt21oR1S6RGLQ8Y/cOaV/AiB7gHPUeElaEzxea1IScjPpjtGKsyGZEcAaM9jG1V/WWQ=="}]},"_npmUser":{"name":"abhirupprowiz","email":"abhirup.bhattacharjee@prowiz.io"},"directories":{},"maintainers":[{"name":"abhirupprowiz","email":"abhirup.bhattacharjee@prowiz.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.0.0_1777986208208_0.5656736139721164"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-05T13:03:28.145Z","1.0.0":"2026-05-05T13:03:28.363Z","modified":"2026-05-05T13:03:28.511Z"},"maintainers":[{"name":"abhirupprowiz","email":"abhirup.bhattacharjee@prowiz.io"}],"description":"Prowiz UI component library — Accordion, Avatar, AvatarGroup, AvatarLabelGroup, BadgeGroup","license":"ISC","readme":"# @prowiz/ui\n\nProwiz component library — five accessible, Tailwind-styled React components built on Radix UI primitives.\n\n**Components:** Accordion · Avatar · AvatarGroup · AvatarLabelGroup · BadgeGroup\n\n---\n\n## Installation\n\n```bash\nnpm install @prowiz/ui\n```\n\n### Required peer dependencies\n\n```bash\nnpm install react react-dom \\\n  @radix-ui/react-accordion @radix-ui/react-avatar \\\n  lucide-react clsx tailwind-merge\n```\n\n---\n\n## Setup\n\n### Option A — Tailwind CSS project (recommended)\n\n1. Add the library preset to your `tailwind.config.js` so Tailwind generates the correct utility classes:\n\n```js\n// tailwind.config.js\nimport preset from '@prowiz/ui/tailwind-preset';\n\nexport default {\n  presets: [preset],\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@prowiz/ui/dist/**/*.{js,cjs,mjs}',\n  ],\n};\n```\n\n2. Load the [Poppins](https://fonts.google.com/specimen/Poppins) font in your HTML or global CSS:\n\n```html\n<link\n  href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\n### Option B — Without Tailwind\n\nImport the pre-built stylesheet once in your app entry file:\n\n```ts\nimport '@prowiz/ui/styles';\n```\n\nThen load the Poppins font as above.\n\n---\n\n## Usage\n\n```tsx\nimport {\n  Accordion,\n  Avatar,\n  AvatarGroup,\n  AvatarLabelGroup,\n  BadgeGroup,\n} from '@prowiz/ui';\n```\n\n### Accordion\n\n```tsx\nconst items = [\n  { id: '1', title: 'What is this?', content: 'A description.' },\n  { id: '2', title: 'How do I use it?', content: 'Just import and render.' },\n];\n\n// Uncontrolled\n<Accordion items={items} variant=\"basic\" />\n\n// Controlled\nconst [open, setOpen] = React.useState('');\n<Accordion\n  items={items}\n  value={open}\n  onValueChange={setOpen}\n  variant=\"bordered\"\n/>\n```\n\n**Props:** `items`, `variant` (`basic` | `no-arrow` | `bordered` | `chevron-leading` | `active-content-bordered` | `stretched`), `allowMultiple`, `defaultOpenItems`, `value`, `onValueChange`, `size` (`sm` | `md` | `lg`), `separator`, `className`\n\nEach `AccordionItem` accepts: `id`, `title`, `content`, `iconType`, `expandIcon`, `disabled`\n\n---\n\n### Avatar\n\n```tsx\n<Avatar name=\"Alice Johnson\" size=\"md\" />\n<Avatar name=\"Bob Smith\" size=\"lg\" status=\"online\" />\n<Avatar src=\"/photo.jpg\" name=\"Carol\" size=\"xl\" shape=\"square\" />\n```\n\n**Props:** `src`, `name`, `size` (`xs` | `sm` | `md` | `lg` | `xl` | `2xl`), `status` (`online` | `offline` | `busy` | `away`), `shape` (`circle` | `square`), `fallback`, `delayMs`, `alt`, `imageProps`, `onClick`, `title`, `className`\n\n---\n\n### AvatarGroup\n\n```tsx\nconst avatars = [\n  { name: 'Alice Johnson' },\n  { name: 'Bob Smith' },\n  { name: 'Carol White' },\n  { name: 'David Brown' },\n  { name: 'Eve Davis' },\n];\n\n<AvatarGroup avatars={avatars} limit={3} size=\"md\" />\n<AvatarGroup avatars={avatars} limit={4} shape=\"square\" onMoreClick={() => setOpen(true)} />\n```\n\n**Props:** `avatars`, `limit`, `size`, `shape` (`circle` | `square`), `maxOverflowDisplay`, `onMoreClick`, `className`\n\n---\n\n### AvatarLabelGroup\n\n```tsx\n<AvatarLabelGroup\n  name=\"Alice Johnson\"\n  size=\"md\"\n  label=\"Alice Johnson\"\n  subtext=\"alice@example.com\"\n/>\n\n{/* Vertical layout */}\n<AvatarLabelGroup name=\"Bob\" label=\"Bob\" subtext=\"Engineer\" orientation=\"vertical\" />\n\n{/* Render as anchor */}\n<AvatarLabelGroup name=\"Carol\" label=\"Carol\" as=\"a\" href=\"/profile\" />\n```\n\n**Props:** All `Avatar` props (except `title` and `style`) + `label`, `subtext`, `truncate`, `as`, `orientation` (`horizontal` | `vertical`), `onClick`, `aria-label`, `className`\n\n---\n\n### BadgeGroup\n\n```tsx\n<BadgeGroup badgeText=\"New\" label=\"Feature shipped\" color=\"Primary\" />\n<BadgeGroup badgeText=\"Live\" label=\"Active\" color=\"Success\" theme=\"Dark\" />\n<BadgeGroup badgeText=\"Tag\" label=\"Remove me\" color=\"Error\" onRemove={() => {}} />\n<BadgeGroup badgeText=\"Status\" label=\"Dot\" color=\"Primary\" variant=\"dot\" />\n<BadgeGroup badgeText=\"Tag\" label=\"Pill\" shape=\"pill\" />\n```\n\n**Props:** `label`, `badgeText`, `color` (`Primary` | `Gray` | `Error` | `Warning` | `Success`), `size` (`sm` | `md` | `lg` | `xl`), `theme` (`Light` | `Medium` | `Dark`), `variant` (`default` | `dot` | `outlined`), `shape` (`rounded` | `pill`), `icon`, `badgePosition` (`Leading` | `Trailing`), `onRemove`, `onClick`, `className`\n\n---\n\n## Build output\n\nAfter `npm run build:lib`, the `dist/` folder contains:\n\n```\ndist/\n  index.js       — ESM bundle\n  index.cjs      — CommonJS bundle\n  index.d.ts     — TypeScript types (ESM)\n  index.d.cts    — TypeScript types (CJS)\n  styles.css     — Pre-built Tailwind CSS (Option B consumers)\n```\n\n---\n\n## Scripts\n\n| Command | Description |\n|---|---|\n| `npm run build:lib` | Build the library (JS + CSS → `dist/`) |\n| `npm run build:demo` | Build the Vite preview app |\n| `npm run dev` | Start the Vite dev server |\n| `npm run type-check` | TypeScript type check without emitting |\n\n---\n\n## Local testing with `npm link`\n\nUse `npm link` to test the package in a local consumer project before publishing.\n\n**Step 1** — In this directory (`demo/`), run the build then register a global link:\n\n```bash\nnpm run build:lib\nnpm link\n```\n\n**Step 2** — In your consumer project directory, link to the local package:\n\n```bash\nnpm link @prowiz/ui\n```\n\n**Step 3** — Import and use in your consumer project:\n\n```tsx\nimport { Avatar, BadgeGroup } from '@prowiz/ui';\nimport '@prowiz/ui/styles'; // only if not using Tailwind\n```\n\n**Step 4** — When finished, unlink:\n\n```bash\n# In the consumer project\nnpm unlink @prowiz/ui\n\n# In demo/\nnpm unlink\n```\n\n---\n\n## Publishing to npm\n\n> You must be logged in to npm before publishing (`npm login`).\n\n```bash\n# Build the library\nnpm run build:lib\n\n# Publish (scoped packages require --access public for free accounts)\nnpm publish --access public\n```\n\nThe `\"files\"` field in `package.json` ensures only `dist/` and `tailwind-preset.js` are included in the published package — source files and the Vite demo app are excluded automatically.\n\n---\n\n## Tailwind animation requirement\n\nThe Accordion component uses Radix UI's `--radix-accordion-content-height` CSS variable for smooth height animation. If you're using Tailwind without the `@prowiz/ui/tailwind-preset`, add these keyframes to your `tailwind.config.js` manually:\n\n```js\nkeyframes: {\n  'accordion-down': {\n    from: { height: '0' },\n    to: { height: 'var(--radix-accordion-content-height)' },\n  },\n  'accordion-up': {\n    from: { height: 'var(--radix-accordion-content-height)' },\n    to: { height: '0' },\n  },\n},\nanimation: {\n  'accordion-down': 'accordion-down 0.2s ease-out',\n  'accordion-up': 'accordion-up 0.2s ease-out',\n},\n```\n","readmeFilename":"README.md","_rev":"1-d20902fad2135ef46e5c66f6a70abdb3"}