{"_id":"@creativestefan/avatar-composer","_rev":"7-dd4b4821592dac962997ca684947b942","name":"@creativestefan/avatar-composer","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@creativestefan/avatar-composer","version":"1.0.0","_id":"@creativestefan/avatar-composer@1.0.0","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"dist":{"shasum":"7575ac443ed37c2712aa8e385b772531c8b06834","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.0.tgz","fileCount":6,"integrity":"sha512-+NolfnY73A7D4hqxHT4WGPUzbrfxXev1fzdESA7fbba8MRrOJDcFoWV836IyB+6zd23m55lIAUvkq1OmNgq4ew==","signatures":[{"sig":"MEUCIFP/UuDl7LW5VtPO2ylmThEtn407O7B/s0B4M7ZhZAtBAiEAxl0zDofCohTHZyh584oFx+k7gjxBLBJ6iHTGbfbPDzk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":347085},"main":"./dist/avatar-composer.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/avatar-composer.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"gitHead":"a8abf4f833ef32d3c8440ba7e30250d9795140c4","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"_npmVersion":"10.9.1","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"20.17.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","eslint":"^9.15.0","globals":"^15.12.0","postcss":"^8.5.6","@eslint/js":"^9.15.0","typescript":"~5.6.2","@types/node":"^20.17.0","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.27","lucide-react":"^0.475.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.3.1","typescript-eslint":"^8.15.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/avatar-composer_1.0.0_1772128284588_0.2822110921388734","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@creativestefan/avatar-composer","version":"1.0.1","_id":"@creativestefan/avatar-composer@1.0.1","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"dist":{"shasum":"4c6b7c545b5fb4cff22ec295b2248aebf2c1ffee","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.1.tgz","fileCount":6,"integrity":"sha512-f3mccPpItxM/Qsba+UJk5ULCEJX9WMip3M1ZlAOyoIt1L1r+pnQ2m1yT5uheK/5UmoBmXx5RLXj1tktgM86kMA==","signatures":[{"sig":"MEQCIB6lvkLzCWudD5G+1E0N7fwktP+4SpVNG4gXh/OycSWYAiBXlengA/cg/65VZRvBZrXGcZVxw+kzDFJZT/ZMfEwXig==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":347713},"main":"./dist/avatar-composer.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/avatar-composer.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"gitHead":"a8abf4f833ef32d3c8440ba7e30250d9795140c4","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"_npmVersion":"10.9.1","description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","directories":{},"_nodeVersion":"20.17.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","eslint":"^9.15.0","globals":"^15.12.0","postcss":"^8.5.6","@eslint/js":"^9.15.0","typescript":"~5.6.2","@types/node":"^20.17.0","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.27","lucide-react":"^0.475.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.3.1","typescript-eslint":"^8.15.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/avatar-composer_1.0.1_1772128973790_0.1036398748376961","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@creativestefan/avatar-composer","version":"1.0.2","_id":"@creativestefan/avatar-composer@1.0.2","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"dist":{"shasum":"57456c9cae9271d5f02f0b210086c53e92c31d4e","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.2.tgz","fileCount":6,"integrity":"sha512-2kkRKRgtc+ap0Yp4NTdi571MNm4bzlTso46uHa4TZ/b2CAsmhEH4xEPJCotiSS9oB/ZFzEkR2ax3FYLxsQ8nEA==","signatures":[{"sig":"MEUCID+7ja68/aFpR7ylB5Oxxys/wK9RGk78ZBqP6BS0TxtsAiEAvSiRxCFWnKhg3zyHK8T0pcO3h0/H+ijzdR+bI+ZKFtA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":362213},"main":"./dist/avatar-composer.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/avatar-composer.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"gitHead":"d925000f28b27dbf74bf5c6b280dcbd43e3a93a0","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"_npmVersion":"10.9.1","description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","directories":{},"_nodeVersion":"20.17.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","eslint":"^9.15.0","globals":"^15.12.0","postcss":"^8.5.6","@eslint/js":"^9.15.0","typescript":"~5.6.2","@types/node":"^20.17.0","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.27","lucide-react":"^0.475.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.3.1","typescript-eslint":"^8.15.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/avatar-composer_1.0.2_1772129568246_0.8267048679826996","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@creativestefan/avatar-composer","version":"1.0.3","_id":"@creativestefan/avatar-composer@1.0.3","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"dist":{"shasum":"2baf9180c2e7cb3c7bfec1befc4d2f89ad6d94a6","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.3.tgz","fileCount":6,"integrity":"sha512-cm5Jal625Wj4/p97eJtSPFpZPRMM2gogkgYrwMdX3JLbq8WbXwkIR6QQphfRq14//Hyd9GfymvCt/i1Gqhj07w==","signatures":[{"sig":"MEYCIQCMJOeZujJSTZUFbj551mHSgftCDPdfAqkRHUNiD4mbGAIhAIUiRsa1BRfeJfj1U5o+KrwIAKJjlS+siAf66EruqSod","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":362583},"main":"./dist/avatar-composer.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/avatar-composer.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"gitHead":"d925000f28b27dbf74bf5c6b280dcbd43e3a93a0","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"_npmVersion":"10.9.1","description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","directories":{},"_nodeVersion":"20.17.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","eslint":"^9.15.0","globals":"^15.12.0","postcss":"^8.5.6","@eslint/js":"^9.15.0","typescript":"~5.6.2","@types/node":"^20.17.0","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.27","lucide-react":"^0.475.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.3.1","typescript-eslint":"^8.15.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/avatar-composer_1.0.3_1772130882430_0.06993200564384394","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@creativestefan/avatar-composer","version":"1.0.4","_id":"@creativestefan/avatar-composer@1.0.4","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"dist":{"shasum":"e02a42cb0b71dccc6d25a1817a0ae69060890e0c","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.4.tgz","fileCount":6,"integrity":"sha512-7s0eLX7FJPW9eGJjQH4z4YyyH640w9ubXPStbz8xu4NpJmLKe9zixbyERAzAopFYcKVSfHxC8mqi9S157+iFkA==","signatures":[{"sig":"MEUCIHE0vEQVP0/N+f0NwCKr3/ZQCIsOkNhZy9zVKbp7mfmwAiEA1l36yQkYaTjMP0/NT+V1wyhaqZmfQC8EG9sH4IOG76Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":362598},"main":"./dist/avatar-composer.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/avatar-composer.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"gitHead":"d925000f28b27dbf74bf5c6b280dcbd43e3a93a0","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"_npmVersion":"10.9.1","description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","directories":{},"_nodeVersion":"20.17.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","eslint":"^9.15.0","globals":"^15.12.0","postcss":"^8.5.6","@eslint/js":"^9.15.0","typescript":"~5.6.2","@types/node":"^20.17.0","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.27","lucide-react":"^0.475.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.3.1","typescript-eslint":"^8.15.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/avatar-composer_1.0.4_1772132189111_0.42817869630292504","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@creativestefan/avatar-composer","version":"1.0.5","_id":"@creativestefan/avatar-composer@1.0.5","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"dist":{"shasum":"304f5838ee0b3a212b30dc911c695b16fc369deb","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.5.tgz","fileCount":6,"integrity":"sha512-y4Og/iHCu4rJg5Sy9Qo1fXYg14Wo+HdlfZGerIjolAn6nAnrgIYQPwF1tamVkX25DFIyklr5s5/kPjJhYp19gA==","signatures":[{"sig":"MEUCIQDCuSezeyqpH3wewFydmAIfpEqPzC8jXEJvYq4J1Jw5JAIgRowZTjo6WQgT2JZUPcN3OMrix68Hpk3oqdDyZjEGoOk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":386105},"main":"./dist/avatar-composer.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/avatar-composer.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"gitHead":"d925000f28b27dbf74bf5c6b280dcbd43e3a93a0","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"_npmVersion":"10.9.1","description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","directories":{},"_nodeVersion":"20.17.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.0.0","eslint":"^9.15.0","globals":"^15.12.0","postcss":"^8.5.6","@eslint/js":"^9.15.0","typescript":"~5.6.2","@types/node":"^20.17.0","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.27","lucide-react":"^0.475.0","vite-plugin-dts":"^4.5.4","@types/react-dom":"^18.3.1","typescript-eslint":"^8.15.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/avatar-composer_1.0.5_1772133204656_0.9851590055024944","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@creativestefan/avatar-composer","version":"1.0.6","type":"module","main":"./dist/avatar-composer.umd.cjs","module":"./dist/avatar-composer.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/avatar-composer.js","require":"./dist/avatar-composer.umd.cjs"}},"scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{},"devDependencies":{"lucide-react":"^0.475.0","@eslint/js":"^9.15.0","@types/node":"^20.17.0","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.4","autoprefixer":"^10.4.27","eslint":"^9.15.0","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-react-refresh":"^0.4.16","globals":"^15.12.0","postcss":"^8.5.6","tailwindcss":"^3.4.19","typescript":"~5.6.2","typescript-eslint":"^8.15.0","vite":"^6.0.0","vite-plugin-dts":"^4.5.4"},"_id":"@creativestefan/avatar-composer@1.0.6","gitHead":"d925000f28b27dbf74bf5c6b280dcbd43e3a93a0","description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","_nodeVersion":"20.17.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-SLwtq0ryvbWdT7g8QofCgz8tw5UOAQZE5higF5foNV0rKgqopFpkZD6CGgmCOo6MkEEfWixjh4qhWp73M9uoOA==","shasum":"6bc2b5e25097a397301d2c40b64696a2867b0472","tarball":"https://registry.npmjs.org/@creativestefan/avatar-composer/-/avatar-composer-1.0.6.tgz","fileCount":6,"unpackedSize":386912,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAVeZzE57ZvTlugPYOm3tvOhy727yGPj4GAYSNd7XOQDAiA/lKnlho3dh9VotsI0Vmu7b60USzisu5hERo2mLGDf/w=="}]},"_npmUser":{"name":"creativestefan-projects","email":"judestefan688@gmail.com"},"directories":{},"maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/avatar-composer_1.0.6_1772133651655_0.668715118573247"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-26T17:51:24.494Z","modified":"2026-02-26T19:20:51.924Z","1.0.0":"2026-02-26T17:51:24.769Z","1.0.1":"2026-02-26T18:02:53.945Z","1.0.2":"2026-02-26T18:12:48.477Z","1.0.3":"2026-02-26T18:34:42.583Z","1.0.4":"2026-02-26T18:56:29.269Z","1.0.5":"2026-02-26T19:13:24.854Z","1.0.6":"2026-02-26T19:20:51.810Z"},"description":"A highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!","maintainers":[{"name":"creativestefan-projects","email":"judestefan688@gmail.com"}],"readme":"# @creativestefan/avatar-composer 🎨\n\nA highly customizable, interactive React avatar component library. Drag, drop, and style your perfect avatar!\n\n[![NPM Version](https://img.shields.io/npm/v/@creativestefan/avatar-composer)](https://www.npmjs.com/package/@creativestefan/avatar-composer)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## ✨ Features\n\n- **Interactive Selection**: Choose from hundreds of combinations of faces, hair, eyes, and outfits.\n- **Draggable Parts**: Fine-tune the position of every element via props or interactive dragging.\n- **Responsive Scaling**: Easily resize with the `size` prop (pixels or percentages).\n- **Customizable Backgrounds**: Change background color and circle radius.\n- **TypeScript First**: Full type safety and intellisense included.\n\n## 🚀 Installation\n\n```bash\n# via npm\nnpm install @creativestefan/avatar-composer\n\n# via yarn\nyarn add @creativestefan/avatar-composer\n\n# via pnpm\npnpm add @creativestefan/avatar-composer\n```\n\n## 🛠️ Usage\n\n```tsx\nimport { Avatar } from '@creativestefan/avatar-composer';\n\nfunction App() {\n return (\n
\n \n
\n );\n}\n```\n\n## ⚙️ Props\n\n| Prop | Type | Default | Description |\n| :--- | :--- | :--- | :--- |\n| `size` | `number \\| string` | `\"100%\"` | Width and height of the avatar container. |\n| `face` | `string` | `\"Skin1Fair\"` | Face/Skin style name. |\n| `hair` | `string` | `\"Style01\"` | Hair style name. |\n| `eyes` | `string` | `\"Normal\"` | Eye style name. |\n| `mouth` | `string` | `\"NormalSmile\"` | Mouth style name. |\n| `accessory` | `string` | `\"none\"` | Accessory name (Glasses, Caps, etc). |\n| `outfit` | `string` | `\"Outfit01\"` | Outfit style name. |\n| `backColor` | `string` | `\"#B5E2DC\"` | Background circle color (hex/rgb). |\n| `backRadius` | `number` | `154` | Radius of the background circle. |\n| `positions` | `Record` | `defaults` | Custom coordinates for each part `{ x, y }`. |\n\n## 🧩 Advanced: Customization & Individual Parts\n\nYou can import individual parts groups to build your own custom avatar engine or UI:\n\n```tsx\nimport { Avatar, FaceParts, HairParts } from '@creativestefan/avatar-composer';\n\n// Use the main component with standard keys\n\n\n// Or access parts directly for your own UI\nconst MyCustomHair = HairParts.Style01;\nconst MyCustomFace = FaceParts.Skin1Fair;\n```\n\n### Positioning\nYou can override the default offsets for any part:\n\n```tsx\nconst customPositions = {\n hair: { x: 85, y: 104 },\n accessory: { x: 151, y: 188 }\n};\n\n\n```\n\n## 📄 License\n\nMIT © [Creative Stefan](https://github.com/creativestefan)\n","readmeFilename":"README.md"}