{"_id":"@polymorphic-factory/react","_rev":"27-b4ca004f36a55c8f85ec6e9589faa10f","name":"@polymorphic-factory/react","dist-tags":{"rc":"0.0.0-rc-20230401170648","latest":"0.4.1"},"versions":{"0.0.0-rc-20221031223628":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221031223628","description":"Create polymorphic React components with a customizable `styled` function.","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic-component","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic-component.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic-component/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.24","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.2","vitest":"0.24.4"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.0.0-rc-20221031223628","_integrity":"sha512-z2wgONoqo8mPAeWKYUaHoxNq/KKF/J3qCykiglQhPeBiXZK9w1M8Sv+mGtMAyCTS0B/bYwtrMnLvIrSt0jey0g==","_resolved":"/tmp/72610d3221922ddc3ed1dcef2455678a/polymorphic-factory-react-0.0.0-rc-20221031223628.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221031223628.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-z2wgONoqo8mPAeWKYUaHoxNq/KKF/J3qCykiglQhPeBiXZK9w1M8Sv+mGtMAyCTS0B/bYwtrMnLvIrSt0jey0g==","shasum":"033fe4e74c7835f02866095d6b21b6be8d1a1239","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221031223628.tgz","fileCount":6,"unpackedSize":10823,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4e/DyilAIzwK8t5vgaA7/d8Jygpo55oIL5cx9u583/QIhAJfJVB/REeVlPQVc3++oI1nzA0XNeINJ3ucgnqVqZih+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYE3wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkrQ/5AHv0b6fpLjvMlowgQ+nWXO32hZ2REQ7Y+qi2D/UuZVpyT05g\r\nCtSjYsilGQB4VTyygmpNrVPOOGM+xJN7Ig7fCOCvPgCmkR96hfh/edMbCpqG\r\nTFvjvHM0EA6YxlSpt+Sc5jJL/2sJ/h57DUejwGw5d25FYKUZf0gfrnIWVhrQ\r\n19VJnLoeAlWvY32MuL+r58utuk5qR82/2JgQV8bZJuyYWgBXPSPqDAZeF+Cy\r\nc8hT39ahevcYQ1ej7y+rk5MmuKy9pT5MKNNr1K8Evyj/+Rt0xjdB1+KDRSFo\r\npUQG4zNIk2h1fXNwPdfjELgpQSEw99ZOPXg8n8vo5tLVCwt+DGRLqn35Hsde\r\noyiIKdqkQVvLSvhVxKb+dd9jd3ULcNnV6+SyrlOta1fStT/KgzEMXfrgrOYi\r\nLseYQgIcVf9Dv3x+4X6OhDCwbv4RJwyQToILv7uN12LhB5+pGsCwTbaLMLr/\r\nfjg2ZE5OBSkSNKa2lVjzmTFGqcGTitT1mIrZBtN2JSSWLmiMY78dGiGQjD9p\r\nI7zQxLIQq+9DvcIi9z9oLV4SOR9nZFOhEJ39Nj/GjpKmDkg8A9MnLe/0LskF\r\nQEJJzxCtpxnL0Oclni0Zprf0R09ER4+qGJk5VgykR0NTjeD/Wa3Os+hH2wGT\r\n1QWGEXkhwv6/CC0jRaSuDwN0hYWfQX7WIwM=\r\n=DkY1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221031223628_1667255792126_0.5403716118385973"},"_hasShrinkwrap":false},"0.1.0":{"name":"@polymorphic-factory/react","version":"0.1.0","description":"Create polymorphic React components with a customizable `styled` function.","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic-component","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic-component.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic-component/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.24","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.2","vitest":"0.24.4"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.1.0","_integrity":"sha512-c4v+gm2DMT8q6yhS1YzXuPu2Hhe4xZpsh/vJ3ZgOtqjEoWsFU+VxdtJ3IrTjxmusLjCJVGfBRqva4E+73WVOlQ==","_resolved":"/tmp/3b28c140aeafd06743d610f1b6d48741/polymorphic-factory-react-0.1.0.tgz","_from":"file:polymorphic-factory-react-0.1.0.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-c4v+gm2DMT8q6yhS1YzXuPu2Hhe4xZpsh/vJ3ZgOtqjEoWsFU+VxdtJ3IrTjxmusLjCJVGfBRqva4E+73WVOlQ==","shasum":"667c963cbb363a70e1b24c1c2f6c2c141fbabf34","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.1.0.tgz","fileCount":6,"unpackedSize":10805,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOCt8o3vkpFi4hGQZvnuPf6ux03g3ObA0MTi6pwHZQzgIgFewX33J5cxRDaHfGTW+uIe1fmrpJTw9Nq8hMn/8+Pns="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYE/1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUhQ/+LcgF3DqsSbRGGEaAptn3BBAh4VswuHAphfVgMkyRK31qCav6\r\nViJkADdPLQmyQp4FXYKG4C17rKwUqIJ4HJJe1mKLGT5QpgR3V0IKmNFVUKkf\r\nlgWyfbSPleBTPR4FhaAJxadosOoD0Ovi4zqz1qJrlPkGVaMpDcVkP+wmxqhd\r\nJC9pAT+B6ZKyDL1kXNK3mGLLX380DZ4jc3SKrspB8JkrFMhOq5wBy+yfP6yq\r\nzx5vAVQruP72vJMLwszUAGrtiYQfHg/JVGhSxGqOCqow0TfHWPXILmODlLMo\r\narH0ajxDFLfnNVz4sjDJEoe19nhhoAG40uFdnelZj3jzBnPuwzl3lLylWswP\r\nTBkEGGo6bpbmVXXks/7zG+0Dx1kMruKJtdu2pOrigx/3doHCBfEw/eP8ExOw\r\nA7vkVTiCG4Sd1QvD0NJ/MV6kX6ZXuVdqCTAiFr923+5B+Cvp91rVGnFeiOQr\r\nHtUId1a7k4h5eclINgws9iy8tIhsFWYY39EUnu9Kckg8g+eYbMXCqJ1xoVMV\r\nzZmCuHO5jkDU8LVUMtebQ+1A4rKqL7rg3vDd9WT6I8XhVsczUUqX1WVBICC5\r\nPoISsa2YMleHijPyuB8PKw803YtZeO1U1JBz9cvakjhUUhd7Ia+13GFUGQba\r\nrZnH7Lnwh2mnbuH5lfKuYr3IG6KWiDRc0Bo=\r\n=c5Lb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.1.0_1667256309414_0.5704562202483767"},"_hasShrinkwrap":false},"0.0.0-rc-20221031225611":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221031225611","description":"Create polymorphic React components with a customizable `styled` function.","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic-component","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic-component.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic-component/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.24","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.2","vitest":"0.24.4"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"# @polymorphic-factory/react\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst App = () => {\n  return <poly.div hello=\"world\" />\n  // renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" />\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221031225611","_integrity":"sha512-ytTwBANGc8DAYnz9+XUnHhCY6NF3Oi4CKggy6EkncmcIL4mt14PUZVQH1A8IFNe/3OpYHtbxTJHg3WNEbtyNMA==","_resolved":"/tmp/125eb3438869be7ce1c66b7fd02e5b20/polymorphic-factory-react-0.0.0-rc-20221031225611.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221031225611.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ytTwBANGc8DAYnz9+XUnHhCY6NF3Oi4CKggy6EkncmcIL4mt14PUZVQH1A8IFNe/3OpYHtbxTJHg3WNEbtyNMA==","shasum":"431c073cfca88e30cee24ff1badf1fe72ea19488","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221031225611.tgz","fileCount":6,"unpackedSize":11005,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe5oyWOBFvb2LROVx1XfFopnoR2FMpSbt4twtcI3giCAIgOcokHivANw+IgtOX5ravLS1g+YnGFgE26NgJsf3u0Zw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYFKPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZPxAAo1YKww5D5s9peLNE421a1TvAuZcUuIqkQ23hAl0xPkgbQe9M\r\nTo+3BdVgiAIWRTg3eUPlSJHHXTII26CuCI50UoNjh26BXgDa0Gvvo7f+bFZO\r\n1z7dSVIACZjsjKoO3i4Z/xAy64KDDR+6xJi4JgGvLbfLLiSxNIiCQ9OJy2pT\r\nu7QdudpPVfaAdptY8XEFUHrugi7GX4KVLBFAD6xlz4veVQJXw+jUmTLB8jmZ\r\nT/ehW2nwkLeSDtU3lIhmnZ34u+GcVsVlXjygnoD3MZxaZtppUWKm1wgUVDxq\r\ngT0/2tyjGii918+hyKUxvP05NTENmW1oY1hGGDEw2RsfWn1C0H2hwlT7kJms\r\nQnWK4vsTpWy4Mytf7uxnAglE7nK18jX97yt9bMCaJEmsWmTrdFthiOAdSVlG\r\nRaZCj8pc+y6FUyvGDiSXw3U4A2fTkkO1ZF2WdbimD6PV/75A5i6f+6+ETmu1\r\nOB2F/huWlOcLb5XDWDTGEgIKTNX30WQBOtjEFSZqsr5VXBbp/AX2+8izp4FJ\r\nP9LHYP0xMBhZDN+yqdGSdHXrqaAD9TX2/mGBqGe0Q3SfE/9Vj1R5wSJaQrPr\r\nPNu/GrcSOTDIB6iOIBT1TQZSS3s/GEz1q6zqOn0lp+dCMgCaZiOI+BAgxr9/\r\ndjGWMwUPwuBClnBhcKL2ysn3TyrxnzBZwYk=\r\n=KQWc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221031225611_1667256975256_0.4952898535143859"},"_hasShrinkwrap":false},"0.1.1":{"name":"@polymorphic-factory/react","version":"0.1.1","description":"Create polymorphic React components with a customizable `styled` function.","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic-component","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic-component.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic-component/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.24","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.2","vitest":"0.24.4"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.1.1","_integrity":"sha512-BtNVS/DcSODNGSmhWZiofzp5y5Ht/TGPzFlOVXq2lHPts3DPqrK7NrDFzJ+W/N/nCQ0FvwuOBxZ7W3vGicyHSA==","_resolved":"/tmp/12cd5e83c1b0ec45cff710670936225b/polymorphic-factory-react-0.1.1.tgz","_from":"file:polymorphic-factory-react-0.1.1.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-BtNVS/DcSODNGSmhWZiofzp5y5Ht/TGPzFlOVXq2lHPts3DPqrK7NrDFzJ+W/N/nCQ0FvwuOBxZ7W3vGicyHSA==","shasum":"61975623ea2d8a255a87dd5dd0c82cd4601f8d24","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.1.1.tgz","fileCount":6,"unpackedSize":10987,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmlO/EAQqdf5taLTyMFYHj+HiROoL5ve/ysy6s8FuEtAiBnQ9zRMsW6MIZDZOtB6lxoSbqJq+5LcXnz9YeGDHoSig=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYFMDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQTQ//ZCXdPOcWOCb/hUS808+3a3BW7M+ZKNQLsIMmykHJ6NmSoRaI\r\ntgYP/m9lSnYMqSClUOyKE2+o4WvZJnEZ+Ah0kvmbaHDcyYCg2iQZoumpsogN\r\nQPJLs0zhb+QxqqkDPE2oxAw+6Sr3yegyGAh+Vm6ZIlxyQzyiOIe3euwoFdfi\r\n94WrlkmqgfrrdT8r3EtbOUVSI0YUcNTHXFcNMYdymPkrH16YHblCvYaCrDD5\r\nGCjWG64W/7kc2VIWXWrqi+3pWa+wZahjf5HJDkFeSW/qISvpgIOhcBHPMGXh\r\n8LcB6G9GqEdL/SaaDUBOrbRraHvc5GeKrs+pj6uuXyH6+97QzfJqvF4Tcltc\r\neV7j4oosmDvGRGLmhS5oSiloQoRdACGKV7Dgv+LZX9F7zUMIG7ajxHp99wmw\r\nclYn0SU1ctflXW3LRSehfd7Ir1cXbB/zJoC8ZjZ59qpHqCyYxu2McwJ3ju2O\r\niKfha9RMRfY8IKVW+qv/jHVknWUGdFu0YEL/IABWJ/f6hIHA9f9jKljcB0uz\r\nlFrIcRNyFIfW5dvI4F9S6RNB1jk9sOfCBcufGDbOv+1RJBt0ox2l/ajLyqaU\r\nx/gOYMRXjG4O5Wx7SLJ/nm37gtURtWZZlFGi2hl/0hrH1/pJX1poK9t5ifOo\r\n+uVqgZPmtWJsFTQunrScEKjvu5vxifto+v8=\r\n=e8Gz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.1.1_1667257090982_0.8578348996360876"},"_hasShrinkwrap":false},"0.0.0-rc-20221031230553":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221031230553","description":"Create polymorphic React components with a customizable `styled` function.","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.24","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.2","vitest":"0.24.4"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"# @polymorphic-factory/react\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst App = () => {\n  return <poly.div hello=\"world\" />\n  // renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" />\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221031230553","_integrity":"sha512-MMqwUBupi0ntigI7Sz9UYfNefNCQpEJ6WTsqNhhP/iS3MRRDQndkX4LcLKJcqPW+qvzpclMOn00Rx6I7TQ7Lrg==","_resolved":"/tmp/1282224b3d0bff25dc9fd8d8a5986e4e/polymorphic-factory-react-0.0.0-rc-20221031230553.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221031230553.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-MMqwUBupi0ntigI7Sz9UYfNefNCQpEJ6WTsqNhhP/iS3MRRDQndkX4LcLKJcqPW+qvzpclMOn00Rx6I7TQ7Lrg==","shasum":"ef689854bfa9f87a2693e2fca680ff56f91eb88f","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221031230553.tgz","fileCount":6,"unpackedSize":10975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhLbBR8Uljh5T1SDBMhOw1BlbPnV+av/MNUVVdPBH/kgIga6h3gxSs3cb10DEMYPQkUtO4ozXIanFCm3pc6cVtrfM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYFTVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL5g/5AOt5U6rtP2w2p0l4ggW8mI7ZXMnE7XbGgboQJjpk/PbCTbNm\r\nKQwRH//zdpvwu8uA54u+kEJBJJMxvQbBz9UsQADwHY18xxYS04CdhpVR589P\r\nna8Z0bXwMM82KeDyKcuixAIQBP3U8InQ0FEScfr8JG5V7AJKBoHZUYtVHY56\r\nftiHdrUoJTi5IPslD4hXHPbUZbxNiTbDVWeWPS8k3iuXghR4V6Wyye/6cziI\r\nc2rJqK1I3mfV4u7RnDn4oVgVCsry8eAicTJbMM1l2ZMMP9dH8CaaJDEoaxMm\r\nAMo8y1Ksxf/GSpwImG/730i7ezT/OR3UB1QH/ggpD+QCP3GI8ny7g4U8EtCf\r\nTVSAc1sumdedsWh2X6mjnrjAkgscdaA5oHND8Te3aMJE/pwcoBCwMe4/JZi+\r\n0bFs9PiNMeeBGOpBHdzIxxDjQl1N/OU9yJQJWkcMuK8jdIAfxtfEVqdXXdFt\r\nLz9nA35+EyazChMmuWgut8SFdVu0wBAHh1UzRtHEhLXmK0m2yi636hTj4e/K\r\nMJGs8sQsUzjGGyD2FH/C9Ief0Rg3QJ1TlygsGuQvfvAmjLS5DZIH2rf5G7wm\r\nHeE5LtsWbh/Q3btA7B4nOPutwZlGDU0li+dS8E1YtAsRHcPzdZ3zucywVOO5\r\nCAVDjUKVi12lxx7odYlAVmmcu3uYfggNaaw=\r\n=ECFX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221031230553_1667257557607_0.4196128861065229"},"_hasShrinkwrap":false},"0.1.2":{"name":"@polymorphic-factory/react","version":"0.1.2","description":"Create polymorphic React components with a customizable `styled` function.","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.24","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.2","vitest":"0.24.4"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.1.2","_integrity":"sha512-K4lPBudgY8gaHxKQ01+cEun/5qdlxlHZAJ0v/TorZQEWMPvPcAeoq+l9EUb4nfWbGrvCSSbhlNyesgttMPpvaw==","_resolved":"/tmp/e95dcbf88f849c79006957e968847588/polymorphic-factory-react-0.1.2.tgz","_from":"file:polymorphic-factory-react-0.1.2.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-K4lPBudgY8gaHxKQ01+cEun/5qdlxlHZAJ0v/TorZQEWMPvPcAeoq+l9EUb4nfWbGrvCSSbhlNyesgttMPpvaw==","shasum":"7842a23308c7a39f02242309a5279335e8c3b383","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.1.2.tgz","fileCount":6,"unpackedSize":10957,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoTUC5JdpTpadKzdqT/Dvl5BgDjhj6WoTz3caXR8JZjAiEAsaBVtUIqNkvsST08mv9jNn9iw3A0RdXo5LjSoboOX1U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYFUhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZyg//cccm4fNfuO/7P5SW/cAXo6B49Rph6WOY85IUByTGqUje9VFc\r\nSUQXOW2TDbeXHYyVn9Mf1sPLQaf/4YQQCtYoZLHtOZ29hh0mPIL7IFKKrehT\r\nkMpRm457PW5IBBP7dsHjUWYb+bQ/SjtTdRVSO47t0JsjZdor0IDKmq44LQc4\r\nMcu4zInJBLIUqkwiZU4nF2oL5Vh4saok5rFNZPKUFt7NSWhnnU0gnRxvGqec\r\n+feEC0GQWk8qGpFJUsfsn0u+RR5OX5Xu7Jy0g28YocfpRyQgQzMTBWgRWGdq\r\nr0V0DPg0h9htNzp0//P87wtgcujfNl084ebtvjxaTkmeFYGRzLVQOWsR56VC\r\ngJIxrPaD1qVjStlbFCatCO18N/3i3aAvzIo2NiP0TvFCwTRzYHqu6nwjTITI\r\nMsEVPzsPKoSW0dH4NTgt6s5YZch3TEvzOXsWyYw/KT2GNN0yTqsZqLX+If8a\r\nKoD6iQ/zTeypF4JFSi7vxhiQZ1SorRWbPv/rBcF5yqDfUt8FXomDZxhfLXXp\r\nFE8wOAJ0uTe4efUXy2mNlfwEX8WHwQIek50s2MVLuaftH3lQEnphwddMppRw\r\nXREXOPr43u3PbHKpv22qHf65900BYqG+6fLYs9xNL6+qrxBl39e6TxzQTH62\r\n/2hTfSirUcQdCK8M1tfFrr25V6Z93XxIoO4=\r\n=kLPa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.1.2_1667257633263_0.8941590481167259"},"_hasShrinkwrap":false},"0.0.0-rc-20221115103039":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115103039","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.8","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.1","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.1"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115103039","_integrity":"sha512-vUlLSgZinjJ8nojte8gUIV4Pzgi2SEVGAdvMUjyyluUYOXAqEwiXKbongTO6UBmXzO5OvjAIYdY5JE12J6x4jA==","_resolved":"/tmp/22943344bb68fac03d1773554dbdbbef/polymorphic-factory-react-0.0.0-rc-20221115103039.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115103039.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vUlLSgZinjJ8nojte8gUIV4Pzgi2SEVGAdvMUjyyluUYOXAqEwiXKbongTO6UBmXzO5OvjAIYdY5JE12J6x4jA==","shasum":"4863e0c2d32e911903db8996015bfcb410f53176","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115103039.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMx5eYcKpWBOwKgI5u+rYilQtQ/rqkFNMeiZtmHrg6KQIhALBuLcfoY6HihERAQwjR7O498b7chTKGEkWUzG6l9Y/r"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc2pXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohmA//euBfeObXMyrZKOBfq7ONr/yuriMCFZJ2psi9xLNDiPMgYZOx\r\nBOPduNgHEv2QIGg5XgcnCya+yvFwJqZ04yneET9OiFiHCQZFX9lOhu099Qs1\r\nGuHqPk6ZT29eRDELQfG4GdKaXCvvEF+vucb3xr2dY2EXvmth2p/A7Gu7MV5I\r\ngCEWDDevBWNLxqmnykKawxP/tywfmasJS9oImxi0S10ttjdl48a71XesspQR\r\nSBX+xWbIt+olvlyfOG423J6b2HdSo+eqFVPPuBpb7tKQ68ppcscyV83UKLKp\r\nPUBJX6aSMkzcs3ZIWmnv38PPQZb6BdRxOmiqW4Jyom8svepsWRIarMzyR4sH\r\nDJsOG6pS/rVQoJBS9VLLkHyojGBu8pY3nUCleJKS5VCRI6N9vjwKLqxcevS/\r\naGjpBq9KX/Zj+nM2BRu/IHve9H5t9fsdK3JF5mnlqrIWSbGMAeEWGdTiNczg\r\nrOiCNI9aKxPaQb1a9GZeuZW3mT+F7VFx5KzEOP9rWT0K1ezLHGzX9BxVqAbT\r\nOKnyot39ZWI1FYvGWHvI4SqiJGNrL7paIamdsnYNheDVSoAmT/aCtRlaibgg\r\nVbVmhE3bcWGfNyxk+zLkNGg4jE/445N9JFJrvUKEYYQQE7j9euplCjR86JKa\r\nfLcl/3cD9FxNr4eUxdqCazgKp/bkGIcwBNA=\r\n=ChRS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115103039_1668508247475_0.5567863954616392"},"_hasShrinkwrap":false},"0.0.0-rc-20221115104000":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115104000","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.1","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.1"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115104000","_integrity":"sha512-7ebwgU2W+nOSB0jqmoG3OYbuJ2/yw6A6kNtXQukeZOH8+5+CWZUdm6lLOdG4fPYBgj9rGPPXODRP6KBWSlluew==","_resolved":"/tmp/3e73f2493b4df3d3635a547318c27ca2/polymorphic-factory-react-0.0.0-rc-20221115104000.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115104000.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7ebwgU2W+nOSB0jqmoG3OYbuJ2/yw6A6kNtXQukeZOH8+5+CWZUdm6lLOdG4fPYBgj9rGPPXODRP6KBWSlluew==","shasum":"f88f3e8b953224d3169c960fd2b38a5d73591fe9","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115104000.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5vJSUNUQOlMSe1adco8MlGjrE7DyEme9Pj3N/BtMd0AiAmzqRWnSJaI/X+2yZ0GBXzh6plu/nAUhmM8DG25gz7Sg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc2yFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmptxg//beEn6A6gzUCFjbr6xnrsyT7f4xyrh4UsmGodDWZOBXtUDgfV\r\nbMulno/Bpv9CIqE/opc+6rfMSZ84I+BIuskddEbRmKEG6GDZ4Yedbek5hU6M\r\nOwyCOtpGGOShGNwB0U6jGQCVI/rh3vSfhF27foL6FJWeEmC/BHV5RtcybSHz\r\n1x2ML0vPfKDJ2cMLimeP05Oy5LuKqt0B0TiX/HzG63DhoiCU97PN8OIERIOW\r\nsLXmGwqHUUPIOx/nSbVhoLKCBF9OLiVqRwhZgVHbT7q8toA9XV7PUDtq30R1\r\nodvG3m+NqlJmjUsrXASBgug5sCYAUBim1ZqoNnHfnbT46SrKLJTt6fbVsJkh\r\nq6OJXy0vIWxMlKk04lC61ttPln0vWzw0RteBZI3gtY9eIQYlxYqTuqtbeXSs\r\nXHBzYtqbrrghhs0zpFojasDW+Vu44+xGwMhXCnPvvgxezHexxdsqvGRM4j2F\r\n/JjQhnphA9hBGOIzT2z/Yi/SPnj2hQsUfQTgmeXD+K3loUYeJfiR9jAuot6I\r\nY2TvyjFUbpcWVP8le+IxTChXfK0psnbN6L5pV6W5DD0Xg0VCwH/Uxm5153QM\r\n6SgW0TuKbl4KWsIxyx9LPwszXkMbZyHB1mmdYZlIzH+noFs5HygGj92A6uk5\r\nS6dO347SLhb8FAiTzkBhPrjnQCY5E/YW/NY=\r\n=9zhU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115104000_1668508805078_0.6913236604635986"},"_hasShrinkwrap":false},"0.0.0-rc-20221115104103":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115104103","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115104103","_integrity":"sha512-j0la+koL+TP8hsV92NaTJ5m1a0iwBwVuL44fE3tlcfm47r/WQ2fkxEmR5ZM9LL775uU+HOINV00twTTPpLzu6A==","_resolved":"/tmp/a37d44e1ed263da20cb3025040cf0532/polymorphic-factory-react-0.0.0-rc-20221115104103.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115104103.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-j0la+koL+TP8hsV92NaTJ5m1a0iwBwVuL44fE3tlcfm47r/WQ2fkxEmR5ZM9LL775uU+HOINV00twTTPpLzu6A==","shasum":"50fd99808a00713a02e3146a40f738e8b40a26a3","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115104103.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIENNAeZpfG8pi+qJoXk9doLfWFOQrAkgTOrg2bqjO6JkAiEA5ZqhD45JLzlgWMD0Qq77Pnj+k5iIdF4D4Vm7CB6zdoo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc2zFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3jxAAlnYozie5sO40JOLQum2pny6d5TYUrTrgZjeU16vpKwhSvL4h\r\niFooyThKqPG7qOasAiIhlAmalh2dttnDh00mHYZn1WEkCNNS+T0gUIPn1Wm4\r\njB/5eIbthFcLxRm+vvxT8ljsbSKwEFalsAC9pwBrKyVCDYp6g85jgiP7kmF9\r\n4kyIwYKko7LA9kmJPk4QloGdkQAn7JSXukN9pGMb9XWgPC2lpKWNYnY9rEuY\r\neXJv+Qll9OtHgpEl/E204gnJQmFvBl7nBLIMCpdsGY1rKdf2+TiUuOKnYxm5\r\nOGtc/gep7A8A+p0a8zqGgwJ9bm9wvx+UvqiYEi2xTB6p/JQEWBbQ7eGPjIHq\r\n6j+PYORdlrEguqM8MhhnVwO8dGRFreCKTQGq/a6XucQxDFUUZNRU8vSVUTBj\r\nATyz+t8f1HUmzndA552Kr59Ex0/XQlemG8twZ+ySowC1StjqCAoQgzIs9GDv\r\nDJFrzoubTK/vy5OmxEXgN/xVvTfdMniJm4tND0EpDEvPirRzh3jwls8NQ174\r\noQ4J4JJMtbX6+MwqwUoZ53JtZpxF1SFOUKKUFNnxt647NmYNMnhGj6FxRyAW\r\n38h++qfBgn5fF6nKpgSSHdPFxhi8WWRTtKMyQ8u4KhL4f4VFGQ3D4BJQWudG\r\nbNhALn03qbiXjTqESOdjvvG7Cz6muftBXts=\r\n=OuKQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115104103_1668508868902_0.1611872930889251"},"_hasShrinkwrap":false},"0.0.0-rc-20221115114410":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115114410","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115114410","_integrity":"sha512-xEkoirTMcqqErrmkB57pTogX97qt83u3AMO9C5QcQXMD/mAiqgzg4vd66Vbu1doP4R/OWLJqZO5Hk1q0o6DpeA==","_resolved":"/tmp/4703af6e9aec829265616be36ac5af8b/polymorphic-factory-react-0.0.0-rc-20221115114410.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115114410.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-xEkoirTMcqqErrmkB57pTogX97qt83u3AMO9C5QcQXMD/mAiqgzg4vd66Vbu1doP4R/OWLJqZO5Hk1q0o6DpeA==","shasum":"c56c1cfcbce995eeb66343b94097177727417674","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115114410.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpsdEHH6zS170/ggGwaGdbKVSOmYX7+xry4IEgRnRNQgIgIhdLsXbeKcZVOocLG4zGCQc+HnTN+NMtAlSZlY4EPPM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc3uPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo98w//eZsYjocpZOjf+49n5iqkl9LXAIDKqA1VX6phwZXNLh7tjJXU\r\nfWs3IWePojEwwiGAdzchgBbsOM4Vm05p9qHu+mYMWqzi/o3htflJBKX9I+7t\r\n/cUPoeinGDjYuOfl4yM1S+F2AmUwv0rNk+YzA/gv9rufMJ0kzva7WwGci8Tq\r\nyz8hSUwobe+qi8m7qmnJRzEtg0jYp/4suhsLGPFXfSEwjEQ2c4HJid/VhCut\r\nj6QPvg7g4PRE4V/1m56QZhu/mt3nJ8rheQlfJkpe+hxuWSUD3ndU/OIM9bjw\r\n4Gm6MlsbTWLKp3q0ngyvtoaE7vcV14xJtScbTdMF34s8+nEMdohUz7fubXLI\r\n36gz45D7my9dbUEghEpAd0en3t+8Ldnp4IRQMZhcAkqjt15HN4YkAvmogHeW\r\nWBLMhid8oet5+1ETYTwWR0+y+0fTNjlgcFoQOkEjvR3xHi9uxEdE3/OQoV2s\r\nVN1ZYo1XZ3iGCFPJ6F/copCggzYe0W+aF9+EuRNwcF8S8EwBCCIQq5iffQOT\r\nk++s1qHg0m5+vaI7OeVyJRYClj9bNzdQ1dS8dB98aNQDDu9WSsTCDVCtBh7U\r\nTtfrGTcJIq9xMVOb/t4+wnLeG8e6xyhHh5/3bToVSS65n9ssjT+/VlSOVMJD\r\nsGDuuO6PZT0Xoy/d7NLZrKrHnYNpda9utfE=\r\n=0Bqw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115114410_1668512655394_0.6543726077110483"},"_hasShrinkwrap":false},"0.0.0-rc-20221115114851":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115114851","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115114851","_integrity":"sha512-9Jerl6hsXy6JgwMg4t0Hb5IXljGh6hsuYITb+eOFGck+VWta1WNcGh9wn4qxxHyVwKioAuQVmeHNI+Z3BI1YtA==","_resolved":"/tmp/ef5e06a1aad7e8cfab95aa50384c1890/polymorphic-factory-react-0.0.0-rc-20221115114851.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115114851.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-9Jerl6hsXy6JgwMg4t0Hb5IXljGh6hsuYITb+eOFGck+VWta1WNcGh9wn4qxxHyVwKioAuQVmeHNI+Z3BI1YtA==","shasum":"81efe1357d2dba19a9b470f51609f636617736e7","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115114851.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6Ocu/nhYvgvxGSX2a87eZ+uDKT1ovmae9FkdnrRpyPAiEAyYgVN2rWo/dLm969yCDRDRtBBIbPI0kAUnndzvX1ybA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc3yoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmTQ//cnKa2tq+iQwPyK3pDADVB3l2OE2MjHmbeKQiGf4Li5lyh2mV\r\n/+Xm1R3CdOTyD1HNdpjm0Ka7yMVzL3vwAT1FWZt0Ns6tZOoMUHnkHi+exfeh\r\nrKOLTz2zYmOevvKS+ZM6lXXFGRLtGBRDlZLJapWGlmBqm0fCBzH1pUlEqbc4\r\nIo2fKuGPb/rhXURKXjmq6wowlBKohu/ZvRuovo/nS4ehnHxEJjIwPYTIZWgO\r\n9BWGQ4YZm4O9s/R6uHOgNsSXkYulwWKupY9wfj9RaNjUfHll6tRra0a+OIXn\r\nMzoTraXVM57QbdRkylBJSBk1ysXXobTs98fDZGTFkpysiALbyIr5TVRq5XTL\r\nv4+M2louNqzm+XB2uNuPrF2rFGqcHYJO4U2X8NI5heARmLFMym//N/Ywpnkd\r\nI8lhv8ejs+Uq++JcdEDzIZz6ABkqIHyFeB2uODcUtKu9H7p3NIpytpFPOvkT\r\n9vKkurNDGNM71RzCqxR7dmBq9eib3yD3MdoXsFqHueJm74Lb7bcMYNtumrYx\r\nFOgEGXSDgr1cFQhMDG0I1S6sFdbX8h5IupFmW98ObNBmPiDj1LRw9xjgYfYZ\r\neT33dPV+aA2vlVd3QLean+uCRYjGE1GQ5SZIxPS9+l+PHF7+RbNZAYd1g8uD\r\np5TlzKZFbcDLYGThZKTrBOuZ8Bo4tELR8kg=\r\n=9RPg\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115114851_1668512935922_0.4589803616892467"},"_hasShrinkwrap":false},"0.0.0-rc-20221115114937":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115114937","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115114937","_integrity":"sha512-o3gcGUPFrJW7AcwyjYzhJW/ER78t34f+Yw1BE7huRwCmV1qmnlMAWvnrKmrdiY1kZwFfmoZ73YeJk/Nl68m1HA==","_resolved":"/tmp/a2f1b3dab1fa3e2159e06938a5014a81/polymorphic-factory-react-0.0.0-rc-20221115114937.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115114937.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-o3gcGUPFrJW7AcwyjYzhJW/ER78t34f+Yw1BE7huRwCmV1qmnlMAWvnrKmrdiY1kZwFfmoZ73YeJk/Nl68m1HA==","shasum":"b892843e521d805d95daab2cc7fab8186350e6c9","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115114937.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkixiE0B/aLFAzlLuPzo32SJQ1rU68ZwT9TSUJdHzRZAiBqhYkGUgG0d6JZ/yo4dZHnldSNcgIVWuEm8bv3YJRTSQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc3zXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmovow/7BhKV3W0Ul3Gy58SMlbSZtAv0Bfd294iH/C7pTowZ0V0N/yE6\r\ngN3IemhOo9cJNd+sc7Aeza/Hu+7ewcbabFzMFkYT+WhxmX4E9k8VLwAFCIxY\r\nNLiOB9fKiIW60qqunSJpQc2ZsS9V8/UKE+W2txR5xmi/M8dXcK9QUW2+7a35\r\nyQbKwI7BT+0Vx6gjcMt20EcsRD45HcHh+GTO+D3TdTmtYCPjL09hO5pkQCl5\r\nbHLcqUGk8t/e3NNzvx46063ktto82Ni+Yqm3EN74XpOf/dfzv1HIDGjejtVc\r\nKipzWjw5YLIcVDj3RAW00DLR1dDzepc99Ou7wwgSeTLRMlQPmNUVdzJ/nUpR\r\nzso/WqPsDilfx1nYg2YBDKW1LufvC1+A0S1YVqHByKsEQSTd8JIO9pTrWBhb\r\nQlWso9nKQcQsrTCdJvlnDNOHofifbPYw0isFkYROKr/6ENjAw3DlDcNSDagW\r\nC/HB5HtPS9NdW4dCN0qZYLRjwC2/oRwQwoYlIsPPaVjp2AhVq7RKCTETKzot\r\n8CQnsnY3xzqqnAqw+fImM2ezQRtYc2PwvjGOMGqnax+QDUyXdseGE83n4Vpz\r\nvpH00r9U4Ykip6vpHmqdPMnw/NoDwM7xXanAInlNwY8+s7uaRfWrpLxVSrmN\r\nnmrg8ic2KX0es1WUvss/QcZJ3FEomqdBfU0=\r\n=XMjf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115114937_1668512982918_0.2972119850964121"},"_hasShrinkwrap":false},"0.0.0-rc-20221115115716":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115115716","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115115716","_integrity":"sha512-kJKv/UA9M71dSsQgaVxJxhvWn/OAa38gcVasCLjluvw86ScGhLvO9QmL3N6sPjoIooJCZxwauKsLQnlRFuoTPw==","_resolved":"/tmp/93ad79a4cbbcfe0a95ba4e1fef0f3a25/polymorphic-factory-react-0.0.0-rc-20221115115716.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115115716.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-kJKv/UA9M71dSsQgaVxJxhvWn/OAa38gcVasCLjluvw86ScGhLvO9QmL3N6sPjoIooJCZxwauKsLQnlRFuoTPw==","shasum":"f0464f7f4d3e4c5081f0dff85dcd0c21414b9da0","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115115716.tgz","fileCount":6,"unpackedSize":11970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjxvw1EC6o2aSc4bPJHl4iNu3oGX7b8/f0zF5LBmWjcAiEA/e60mAyKbbzQYLPkX7zrsNUDjwxH4VchmjrUiQKQRtk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc36gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFPhAAi6A9u7paLoskLkqqINSoN0ieiDjmv+QM1qBb9UBwNIeci65r\r\n7dULHe/FKfYbtqo4wsXdto/b9aiNMmgTeRa2WYh8JfeMAFJARK0yTmSbKQ8V\r\nO99IPwaLdT/Kgb/1rXI2i1BRo5vUJ4AvljGKMJwys7QzsVL11FtCbnRXoA17\r\nOgumKLyjz3XgHe6omrEq0KcRphBHx2xW2+bXzuPbgOgLfH0VnCS1VGTh7Slg\r\nNEsFk88nNuGG/tq/jVaHkROB2flqK/XtRuu+/InqhVPpZgAsm6AQE9cKS5K8\r\nghX/xVb6fHISUV7gOxv9IgYiTbb2x/E0zbP4Ga4LHMoAEesfUbNXTXmx1e/e\r\nFEeeYb1OSDTpVD1wzp93m0c1n0lD3ufiaG1AevQqWsilTQw76UQ6OEW6AaaW\r\n/bEJ5TWM1EFzk18Avyt6HaVeb0dzqT6rCUMcfvXH1wZkQos9L1uuPt/txxou\r\nibwJaeGMy5aedqxLm6KgVjwM0YlXmLA27WCiNBWLs4I7mMsCDNXt6ky7oUgq\r\n6l2jgEl3axs8RrqpJ5YlgDMi9S/NR5nmZ09vVfHtaOgZ3nK99vLprS+2c/Oa\r\nhovuKPOWWIXef2Mbt1pEZIrIOoApVZlsFdBa/9DSjI9hwQ787/ZPVwj/QN+d\r\nyqybmrnbXXeIC8uOPrfm9P5nXNk2eNFN2xo=\r\n=lKeS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115115716_1668513440620_0.2582804984949745"},"_hasShrinkwrap":false},"0.0.0-rc-20221115122200":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221115122200","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221115122200","_integrity":"sha512-p8cokuo42Swh1487f6UeFd+uYVL7JO24LD5s0M8sK4rO+mmloUUcTkGAWmSeyJs9H2TWA5R+CKjmkJTWBlcgWQ==","_resolved":"/tmp/f524f652a09635eb073f97de65bc48cf/polymorphic-factory-react-0.0.0-rc-20221115122200.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221115122200.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-p8cokuo42Swh1487f6UeFd+uYVL7JO24LD5s0M8sK4rO+mmloUUcTkGAWmSeyJs9H2TWA5R+CKjmkJTWBlcgWQ==","shasum":"4085699a3a350d75b8b6a5f0635ccee45570ccad","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221115122200.tgz","fileCount":6,"unpackedSize":11961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+lnNfV8MfQ1WU1S9MWYEWSOjmvX/9Bx6FFVSzJh+5lAiEA6pltYlzaEkb0kxG6lzkbo0Q4888yybqGlNJ7H/gOWFo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc4RuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolVQ/+JE8CRgqjV/VLJ63FLMSDwwx8gszxb9a9g3EXX1XAJeulyg0o\r\njbfJLClQOWI9WrIAGrPCKe9btfQ06bi3zeeFcEnEooaCXjDo+HzXFU9Sl5p/\r\nHkTwY2/OritjTTGQyaWZS245JIVz32mQ+lEwh6XGf/va6ULGIkSaKqDy3oMA\r\nV2ivh92wb76Tzt1OtW0oZhD4NEuBp6jrs/Rt6yZdx8KKFgCiwhLjao2g0Ou6\r\nXbjqTwYVdwCH4sZ7cL/sUOSxCtW/3rieqO+baDkQN5x9hwsXFatECarYvL0T\r\n+R/T9yGH/6k3AzFPEVw4SmouRgkVxXF1vKNHD2JSXxuXdnjKIqOMZyF0jxVG\r\nQhA49AnDwOY2Dm7BT0EAHFP2/ZYRG6LDth3qejlpAYN1RfbuWxN0AHs3F5h2\r\namXJ+oPTh5ZNQyleHY+XImVt4uy0dBG6rl6KBfje6lroK0NJQMATDp70tB50\r\n7N0SxRbX+zKCBBhAwk1Vyhy63aPmh5qD5B9de6WOJcWOXMM88qaPJnxOp2sw\r\nlauPf2AKoUKnD2HABC6RyuiNfULG+znIcXxhld47Iz7BlzCwaPZG23Ol9yKZ\r\nnc9PcCHs/c2jFypaZVY4HcceIXzVE3LHl5mC3SCKV98+I4UO1/YZQXzyDBrk\r\nRDRh3k19sw+W0zdFZ77HPsRQ9dyCFp9utlQ=\r\n=O/Cd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221115122200_1668514926589_0.3580333131683622"},"_hasShrinkwrap":false},"0.2.0":{"name":"@polymorphic-factory/react","version":"0.2.0","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":[],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.25","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.2","clean-package":"2.1.2","jsdom":"20.0.2","react":"18.2.0","react-dom":"18.2.0","typescript":"4.8.4","vite":"3.2.3","vitest":"0.25.2"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.2.0","_integrity":"sha512-5mQMWfZBdtX6wY3vSS6rLY3ZSrnrlH8fhYalSacD51Z8rClvqjN4MLVnJnP0fpbpfGIb28K0tXhOO/ezNU3wJQ==","_resolved":"/tmp/45576cc1e2fe2aa1ab5c57fcd363a824/polymorphic-factory-react-0.2.0.tgz","_from":"file:polymorphic-factory-react-0.2.0.tgz","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-5mQMWfZBdtX6wY3vSS6rLY3ZSrnrlH8fhYalSacD51Z8rClvqjN4MLVnJnP0fpbpfGIb28K0tXhOO/ezNU3wJQ==","shasum":"45cdd4eaf161286290c184f3c3eb5e1a1b7796e6","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.2.0.tgz","fileCount":6,"unpackedSize":11943,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFkC0mptgP9u2Tzc+vv5kF0CrrCm0TcqGFr4scw1FGO1AiBHnsvgAk6Qpm08HtF4gaeCHsg7FBmQkbHPSVpP90CScA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc4YoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6SRAAmLqEVaEusdjMiqOVo2eLI/Z72MtVebVmxALQKRi3GAe+ovyu\r\njmp1NNMHAaKV7Gj/wz6Wz2wi0FysQ4XvQ2oj/215KhqdGf6Vw+Rb8Y7DnXQo\r\noFupuvXmINnOHt6yNNBsWcM9hCfL3uJaoPMVUe2QD9ywZSR+HWCfj86Lm6Bs\r\nwg8p7IU73a9BLa9nEvuWvzX4OakmfSYQ9Lb5C/xUXrr2ycQkNfmeE7vcf7dH\r\nuIc+z1DPdfi+MmbH3MUgYwiQwWmWUfNuZVtLyPEjMm5+WbJ/VERZ0A+o37Gw\r\nwHIzlkyXqYsypR/QtRMoEc0ZNau87fharMmdnXMye4jtj7fjCJWTeDYPZK+X\r\npYBH4c7pAaaMyk34q4WCIuCVHZDjSoa0dzW9a7lsxLOwcZd9oBqxgPXCpRGd\r\nJa367WeElqtjANk+qAO3Rp8A/8WGUENfJzmCux6qTBGPa3kiUnfrmKm7xT8D\r\nm0jKM/HcGMqGLU7TJTKYFtuVskvbxy4g8wDpozCspO7xm70w1tiGzzWGOWIR\r\nPRbzgC1iFj5ySWyTyEmZ/ecAF9Z4qycImtwqf2MGf+t89XL8CizhyC25wk+h\r\nHjYeNIbF8ByR89CiF3CYCoUeRzNMMjh7KwGSY2+ciOhVm4oGJlsj92GeKxEG\r\nlW52nEtLpM80suScSizXaX6vRA3yR5Jn8eY=\r\n=PF07\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.2.0_1668515368635_0.22106822104509405"},"_hasShrinkwrap":false},"0.0.0-rc-20221204123243":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221204123243","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.26","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.3","clean-package":"2.2.0","jsdom":"20.0.3","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.3","vite":"3.2.4","vitest":"0.25.3"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221204123243","_integrity":"sha512-z8LNrnHrBVytY02Jl9Zp9qqI61bzCL0Zk4n17ujWfcvN2B5RO0xnZE1xJWcke0cSH8S0fLUdsOImS1w0Kjanag==","_resolved":"/tmp/371593b28bc4c6c41cf085340cac5df3/polymorphic-factory-react-0.0.0-rc-20221204123243.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221204123243.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-z8LNrnHrBVytY02Jl9Zp9qqI61bzCL0Zk4n17ujWfcvN2B5RO0xnZE1xJWcke0cSH8S0fLUdsOImS1w0Kjanag==","shasum":"74228da831d1d30119318e5fac53aa2ee852d9ae","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221204123243.tgz","fileCount":6,"unpackedSize":11985,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICh8NZEMenRauIGOS0H5jL70IcKUv0SOsd/aGiRs0J+TAiB/1paAgDDWYg17QObLbkagzL0QT8LPtRh0g+iP2oHWBg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjjJNxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7kxAAnh9I7jjYowtc4MoK3NzmuXTrvgWVH0IV1QsSZXopDA+Huq3X\r\nBpwB+2RjWcna4BIfmhHDvzJQdF4j9i5XEj5u9epwexzihAbU9F4eC3OQ2zPe\r\nlGwMH8Yp/i7NcNAbGPliVfgTrk33aKHbeBOtNf9JA+AtvurtvS/M0jwf4FvZ\r\nKfC32b2P2n+AaflnN7xKr+ufSYw0upHvLieUbougGFqrNp+Y04vZ5MYFi5jF\r\nPEnY7W1j2rZ+mobYD3wAKetcKmZMq05PSx//vmHzzL/e9gReVB+fObtUHQXG\r\ntbT7xNk9tQZ4ttm2sZ/CH07oL5fBLzzxx2fye1SSYuiVJsiwqdkpmEQ+VoDL\r\nIMY6sPRc3NNaa2agdtAUN8mDPh3jVV3sTnn/OCFM8GrTA6JqyT4h4ptCkD06\r\nWZ3K4s88RL1U7FNOv1gXPBH8BVgLqEqaMSrwWLQBgQ4r8u+oVw9zz+cyHKNM\r\nYsrvq0NVPK/bgo1WydObxtaGBE2bdA2Mno+Gcy/wMZLm3+KtP7uUrocak1VD\r\nDShw3FVM+q4foszy9ldNWCsFQq16A2QjnSpXNJW90aY4KnKiWrmeUUF/9Hmy\r\nXn5UsNcwNe0dIU4xl2DOfcnW/vbt5LuxJLUd3Ej6g7sjxGbSJ2rq0bzH3CBc\r\ng4oRo+hBwEZ4f8mCiNfAQrY1iqLSCISZR1k=\r\n=yyY/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221204123243_1670157168935_0.45417206217850814"},"_hasShrinkwrap":false},"0.0.0-rc-20221204123758":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221204123758","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.26","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.3","clean-package":"2.2.0","jsdom":"20.0.3","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.3","vite":"3.2.4","vitest":"0.25.3"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221204123758","_integrity":"sha512-2mYzwAOpQ3WFJjVl9VK3xoWKF2YRF5Z55H6fQJLFq9vApCycNJ6asryhCYU1AibB7d4BM1fm4N+iEFK1ZjsIoQ==","_resolved":"/tmp/7ca19686851b5966a8e98353c381f29a/polymorphic-factory-react-0.0.0-rc-20221204123758.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221204123758.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-2mYzwAOpQ3WFJjVl9VK3xoWKF2YRF5Z55H6fQJLFq9vApCycNJ6asryhCYU1AibB7d4BM1fm4N+iEFK1ZjsIoQ==","shasum":"9db1af57216e1a23c6ae1603aee17f74cba6c141","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221204123758.tgz","fileCount":6,"unpackedSize":12039,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2dK7FaUkWGovs5KFjPS57fahjjCrhY67NLEZ7DZ2TaAIhAPKfQxyxf16HWb9zOCl3eqDcWwHRWghvV6dVBhwZcxxd"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjjJSrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNLg/8D5+veToi/VVgutNsV5BhD6IQ+Yjcjz9kjTAQRmpOGQT/UKus\r\nX87rczkDUqmJbck5h7juDpW6EwsqdeH09sCrrZ7rwBL9/wwlwp5AmfFGqsbY\r\nvAqaewV6ACv4W0ukP5nPjoiNVlslEAVC2IRwARJOkkcqb1OxcaeDIFaqK/c5\r\n/k0jXrMAmDEbVrg36ErW2X2n95s1eziQCGRnCMblO5Y3W5FoL1zFNCnR2CCw\r\ntHLxho5v4JuzPa2gdnL+RQtzhLWw8Go6sNjat5BkUVj5eH+HnP0+U33/sDep\r\nH/mySCizATL+3jhgUiCHcH+PosSKsvjPALAA34sJJpQ3+YMxLGXwmW8aNCSN\r\npdsASMvac9xOngi3hLvP+ub8gks9OkEj+pARYQlRTlA4kM2v7htrV+D6GnpN\r\nBH81mQKFBBUz3bP9Eetwt/2wlgpjQTGtEvOljkmu4zaZSy3LdkgXS3jvW2qF\r\n9fL5//KArQ4hY67Qj0QUAIiEAdn4Ecl2Rggk098T9TGOjDNPyExNA8QhDckw\r\ny9fbLYYkS7Ki24YEqaWsm8Meba8z5JxU2SWxhnxb58tiT+hOEi4EgkpkSihB\r\n8O8Ho+BA2OIICEai4y8+razkZPSyTk+j8lerVHMv8hNt9YJGU6i01U7s/BeO\r\nlckE/AXS7c7+/p8zn2I5MJXEPjgrGq6Kjzo=\r\n=PKSe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221204123758_1670157483097_0.15836358319908683"},"_hasShrinkwrap":false},"0.2.1":{"name":"@polymorphic-factory/react","version":"0.2.1","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.26","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"2.2.0","@vitest/coverage-c8":"0.25.3","clean-package":"2.2.0","jsdom":"20.0.3","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.3","vite":"3.2.4","vitest":"0.25.3"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.cjs.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.2.1","_integrity":"sha512-n90IHO1uvII17KSo5z/9pW+zgngFbf8gikRrYn/CmtiVR9y8YOuHcfbQy21Z9juTGLvxs1l7GXYqexqrTDEIcw==","_resolved":"/tmp/5f30a05f80a4af59fcaad813ed0f2acc/polymorphic-factory-react-0.2.1.tgz","_from":"file:polymorphic-factory-react-0.2.1.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-n90IHO1uvII17KSo5z/9pW+zgngFbf8gikRrYn/CmtiVR9y8YOuHcfbQy21Z9juTGLvxs1l7GXYqexqrTDEIcw==","shasum":"2032227a3901db6c16af0169a51749a506efd1f7","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.2.1.tgz","fileCount":6,"unpackedSize":12021,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcPN95662Ov+rXbbM/4CYs9ip8dAiR/Tfx7ugFoPpqbAiEA1oS088xgmzV/4Ww6ZRh12HCNAbOlrKirkucZwteGYJQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjjNJbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIfg//QTy0KWfOKEQf/3GDoHNrIryJVHnJmLlQW4WvKBdv/u0bvhA1\r\nI/xvgVKaK3FnkiNjDKRdyzcCZFh60PZI85b7MpLa9QMu1l/m0wza/iDx+7t8\r\nZobzaQEc4GUDw4GYwLzlQf7HPGXDMxgCx/UjLXHET/Z/8NFpxnSZ7o6y2R79\r\nyFR4b8sM7z+p+KyJPlmlWJickrpykQTaEffmi7eVnp179aj/5e9u7r0M425Y\r\n/x3a3PCmIpG/JkRjHQhIrr6h1q6B6JRUPyym3ROUUEqNmLtBpltvFqof3H0d\r\nYH6WQtLmJh8BE/wbXDBUhdXAwxvGkl38cAxy9StYwMhJUqefLHCk8XoUW6Rn\r\nBoSkxTWoVz+z/oo2QNgZABN1zTqWEpioVHtHDwM5gQvdb7HSC3UDG8DguCmR\r\n51ISi0Kj2NH4XQHBLdZsDMk3tmzL2j3M1+4qRWJDGmU6okIsBkYJVYWw5t1l\r\nfn6UtnQwm4c9L8gij5vLqHblh5rdKnXK0D5zG6KRG+todiFvOY35WOMMotZ1\r\n0m354zRyIvBZQj899tlLIRucQ5WUv3ss1QvHrbf/2JQDZYFJtrWgxKnomAk0\r\na2h6Ns6vjq/mGmjnnVDXVplqezkuOOoOzLFpf9Fro05Va9NPMUHNODgdh+Gn\r\nhJs0gVOuJfivJuPOwIrl9yUp4QqRsdZtDrE=\r\n=pPiz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.2.1_1670173275558_0.023767744358597964"},"_hasShrinkwrap":false},"0.0.0-rc-20221214172031":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221214172031","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.cjs.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.26","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.4","vite":"4.0.1","vitest":"0.25.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221214172031","_integrity":"sha512-wLLQg6JBGgObEBb6A+W15HBTtCO9uyBII2Rag/0yc6e8yLpiFmfG6JQGnq3ZckxqLyZNaeP/bM8wItU67vQH+A==","_resolved":"/tmp/1ab3533df6b1739da49a04553d4b87f8/polymorphic-factory-react-0.0.0-rc-20221214172031.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221214172031.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wLLQg6JBGgObEBb6A+W15HBTtCO9uyBII2Rag/0yc6e8yLpiFmfG6JQGnq3ZckxqLyZNaeP/bM8wItU67vQH+A==","shasum":"f63104aca7c9de9ac646db785fb651272e3c6ebd","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221214172031.tgz","fileCount":6,"unpackedSize":12068,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYSzmheDK1lbIul9v6uhr7bPLjxQyDpaz86fKWgLMAQAIgEJFpnF9UKOQket+i0ix2lyaTiYmYAIdqr+k2slzaHwg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgXmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqntQ/+OV36dpzYRngVbXqAaM4g6d0xj0YTnDwC3hAKbt2ST29pQzjJ\r\nKCkhfgz0NhJUTXxMfMtc1Gh3b69/yFXPr5ksH5lEujWfQ4oTcRKQODOgVnG0\r\n1odsrEMr0D2qO5bmEtqasRQthDUm3Nj7czaS6XNy8oSbJaORpUbqLs7QvitD\r\nykPkQV0WWvipjMObml7OnGmaq8cwUPT+1B/H6SUsT23uNPzitcIjrdOxJ2dY\r\nWJK7Ys6pzuH1DBOp93obYkYmSVj8t1b41yl06pJUpKvkjQw7gE9eUhxaeoln\r\nAsDHDuRtXbn9g+s3Kl+py+KubxjPyNkXpy0AsTo0ewvJXwlDwWdEA6H2xOeQ\r\nhdfpdpmSLq6gBGX7Tfyj2GlxfGP8J7gqBWCXvkqJeqABt9WbjKbtVDKwFtjD\r\n4Ycn+Iellp2/0f3P1J7bwLJubx/5TCRbKqNkIwPhpA1ez0ozenAZ865e4FN1\r\nDdio80xus/1YomkFGjq1OADsgwu/TBaSUDSWPFfEYwrJVLBDf4A7TSC4y+pu\r\nD++v/lOv0uRHcmVSO5GenbAVmen5Jq50G2OBTQk0YH9xjeJugpIAdUYcMea8\r\nXuI5oTc+lWUZf2G0yF5N652F/gp2bY7e0hA1MqnqrkbdDXoqVCGAHoCnJE8G\r\nNSs/zvoSp1fOQNUm4apX6V1u8/zc4LaXOXc=\r\n=xIlf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221214172031_1671038438013_0.3655941129946345"},"_hasShrinkwrap":false},"0.0.0-rc-20221214172411":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20221214172411","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.26","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.4","vite":"4.0.1","vitest":"0.25.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20221214172411","_integrity":"sha512-soL1pOW9e+wl2NNvi86jVPTfRVc1ygGdr9Egfy4uZZgEqgRZqHkNZGUomKn4s3Z3XREvejuUfgJFi5LyTUlXMw==","_resolved":"/tmp/e5ae0ac26bdbe7052aea96c380d7efce/polymorphic-factory-react-0.0.0-rc-20221214172411.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20221214172411.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-soL1pOW9e+wl2NNvi86jVPTfRVc1ygGdr9Egfy4uZZgEqgRZqHkNZGUomKn4s3Z3XREvejuUfgJFi5LyTUlXMw==","shasum":"0346b2755c25812257e0aba7c1d93b97b540fa34","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20221214172411.tgz","fileCount":6,"unpackedSize":12061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDdYzJR4liHfEimyNA34DmKmr5lG9ku31OLSyBovruYAiAFWUeWKDjuoyTNJCHbOTeIkXSKHaXuL0sfXgUYHBc5Vw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgbBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoICA/6A0irUUkLU3bFAHaWF7F/qfL1ZCbtC2TQ0LVsNq7SkGCBGLPk\r\n1w8+utoApjhMSntqwO6oxcZ3KONk0BYAWtNntD3hR+UnjvO8oPGMLcbOkpBd\r\nexHOFntfzOcwia6E+Xh97tUHjCv6tmiDEaM5kmy/Ji70etXwSpblPdxHC9x2\r\nM9TLEMiGGATyTCo4YSMUQgLxSQOJtpdToTFY7AGtI6PNFQyDzMt9n6yRJAKh\r\ni0m4TV0Cqlh0zAekzh5mmLh08G9z6IncuoMXlWqr/jSP9c5JbcXwsBBqMjDb\r\niI79l9UcsLUyZwqIDrJg6bMvSbC19Kowj92CZzV1dzvSs9wMVUfN1WtsZ09X\r\nU/QWxtiwgyGsGZylu9NcL0e94OgU9WQxPP3ZzrSYi3EaylHS39EeNwyCfwG9\r\n1pUSs3H100MNCUNyDtJqaUMulwaTatW0AQMq6xUTUFpBj3F8+wsxvqfKK6H0\r\nmToXV5n4nWszMFwUILFBRzC74Ha0jWXWEBycyAm6DQWJF3et5IpdXl1Q40xr\r\ndA7jOUzamL+aQQ19HgCSfbtxT7/1o7+/csLwxRgzgg/H1wB/nxliyJKnKYb1\r\nFKiLPGdmcmkDU/2KYL67TXn4vc8u+hM/gkcDmxJDvRdPKX/OqiNmHD01C3UH\r\nhs7SIoExwHpZ5LBj809MsyY4C5O/gkqrPDg=\r\n=yfZ5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20221214172411_1671038657424_0.6091590858119758"},"_hasShrinkwrap":false},"0.2.2":{"name":"@polymorphic-factory/react","version":"0.2.2","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.26","@types/react-dom":"18.0.9","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.4","vite":"4.0.1","vitest":"0.25.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.2.2","_integrity":"sha512-0k40ML7j5KT7bAObMCXgAbu8tmSLCmnAoJhhbaLcMM4GGzFBYVmI+o2tVihgija0l1BcTaWuYs5ydPq51/SDVA==","_resolved":"/tmp/7f6f6f7d7a841e7f44dcb5d171e85e35/polymorphic-factory-react-0.2.2.tgz","_from":"file:polymorphic-factory-react-0.2.2.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0k40ML7j5KT7bAObMCXgAbu8tmSLCmnAoJhhbaLcMM4GGzFBYVmI+o2tVihgija0l1BcTaWuYs5ydPq51/SDVA==","shasum":"cf680611ad3814f4681bfa09d16796fa6d0baad6","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.2.2.tgz","fileCount":6,"unpackedSize":12043,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6f6DrvoSd3J7mjvAUxaMCFU5t4PDj0LSVR+3cGImnmAiEAiOjtQOTCqtRE8/Ulty0G/gw/a3hiMQHNLQ5hJ5nXGqo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmg+RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo85Q/7B0pew/Qxe+jXbJl6QHWIqq7vlj/jI0P9y1g6pOvkojxGMDkO\r\nfb8bCc7QW+BiLvgo9yWeazI+OQQUs5LBSX9G2vMfUoiSw0MPow/92JyAMAhK\r\ngCrGrYr6/c0bnFvnS6j+MYGTnxTG0X5xTHpra/bpJz6fNgoqEpAQJunypdc8\r\nObJJOpxmQIMfSxkphpZDKrnsy+47t5BzvZYEI3MkM83IZIwWvFHiRtDNfQ6a\r\n14Qr9mKMX1BcUUBkzW35+2WtlpGCMxZL4C1OFW/+NXSHcpJd40b/Qpi2Nqc9\r\nv0o6bfyIJOo8IzNKJkNBDfLFeYKaT8xHz/6HRbdaCPICvN1cwtUGByBD2j34\r\nn6TvcynTYzo9Ai+9boqjkTM9aJDixcQCSUzPZC9xba3sra+UOs2Sg2bqj/U3\r\nooInmvXw4voA/iyj1Xd2TbasDfKCwzTcG+lzWxwWgLDsMF+gnGllqctEEQUx\r\nskz455bES/POJlmfAOFu7247lY6TbLXtmywTlH7ZtgkI+3oSihpNeIV5LXBR\r\nh7T1BQldU5xNrdMl4v1rrLwJrqcSSgd6YbhSJqsHjm7IV/mULsIXTIuIJ4CY\r\n7XhvCj624AlYpw1wiC0A9usGkkHuzze2o9zuiLxAqj15jNAcistHenPnQHhv\r\niWWYcptN2Rp5f+Lp0guo+fDIeeoTTVUxc5Y=\r\n=gFsE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.2.2_1671040912830_0.7849162741700397"},"_hasShrinkwrap":false},"0.0.0-rc-20230128140721":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20230128140721","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.27","@types/react-dom":"18.0.10","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.0.1","@vitest/coverage-c8":"0.28.3","clean-package":"2.2.0","jsdom":"21.1.0","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.4","vite":"4.0.4","vitest":"0.28.3"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element.\n\n> **Known drawbacks for the type definitions:**\n>\n> Event handlers are not typed correctly when using the `as` prop.\n>\n> This is a deliberate decision to keep the usage as simple as possible.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20230128140721","_integrity":"sha512-+f5jkGicjHQnMO0xH04Ze77DqYMUlr1s6bxAuHpkaQftz2Ctjzpza5utCZBfpRgHwlKUFY8uSyMVDmwbrZgwwQ==","_resolved":"/tmp/705c58b4953785b6db3bf5960da0715a/polymorphic-factory-react-0.0.0-rc-20230128140721.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20230128140721.tgz","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-+f5jkGicjHQnMO0xH04Ze77DqYMUlr1s6bxAuHpkaQftz2Ctjzpza5utCZBfpRgHwlKUFY8uSyMVDmwbrZgwwQ==","shasum":"5675c42d87ecf742092657b8bea869771c4e7305","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20230128140721.tgz","fileCount":6,"unpackedSize":12212,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHC0S4JLyVHChotqWLwPkTmFmg7rGhTGt6fnW7VorI5PAiEAo6kCrXh5cHN8QVAfyQD+k9op6juCS8GC+/4yCvzHCus="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1SwfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjTw//VN+gH+N9LFcYcA6C05BCZLbAavWO1Q9q2ZPREIkINPU5vWra\r\nsA0746ZTQmfc5fcLMSOJExITmMGK0TWp/+Ll3LlOMWseWce12dWPxMCo75e7\r\n/WMFCZvlwtuE8CrJC97H0dFGk4jnUFxtBmXEsAZaMZcCAXakedINcRx7PcJh\r\nHJRo4i7cbpYpSbnUdVMkYxB6ySg79c7YWq8V8XchrDC5jlLvxxj2RuP48jXG\r\nG/hPM3r//2k1khYMCKoxpO5vs2DjABoOK9YG8lClaSYB5HBAvh0acQ3QAqAe\r\nGO9qYZQpFQyYgF7rtG6/ZB1tdBaUq+J3RDF7paPtpILr++5NS+axcPnQJDWk\r\nCZTjT4Jaa43cFcrX8YHjTGygqP4H46AdqWGh8pLEs0ceV9vQQVSh7s3/RUub\r\nBWV9WCvM2M2jW3i00V+54huYkX9aagSqY30Tla++POPDQtzr6WaM6b4ZUMW/\r\nAQI8Q7inQjFHwLQGAUC8iX3UkdQrB3+ey0U/kSfQez/sUNsv8nqxZNqiYLYX\r\n+IMvkZoDoeTrXdJvWPz1V+1/kbe8tqmmx4/0cRmlXJElkKS0ByfI0BxzaHnR\r\nq/6VCWz31rkwhrriLSO4u3/XK8vVz8pORmsk+KXuMbo4hcQt6U4fnJYBPcH8\r\nTuZepSnFtNaVdw8AxM62m07fU90gCuGPDYA=\r\n=fll/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20230128140721_1674914847020_0.2869186869778828"},"_hasShrinkwrap":false},"0.3.0":{"name":"@polymorphic-factory/react","version":"0.3.0","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@types/react":"18.0.27","@types/react-dom":"18.0.10","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.0.1","@vitest/coverage-c8":"0.28.3","clean-package":"2.2.0","jsdom":"21.1.0","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.4","vite":"4.0.4","vitest":"0.28.3"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.3.0","_integrity":"sha512-MMJNVV1yVqVBuOcAZhEyZgcWcMhN8Dwp+mg9dtakjiPVma+BQgIV/3GpErA9TXB9W5q4D2CalT42LGe6ta6Suw==","_resolved":"/tmp/98b14349c9d4d82641154853d282f782/polymorphic-factory-react-0.3.0.tgz","_from":"file:polymorphic-factory-react-0.3.0.tgz","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-MMJNVV1yVqVBuOcAZhEyZgcWcMhN8Dwp+mg9dtakjiPVma+BQgIV/3GpErA9TXB9W5q4D2CalT42LGe6ta6Suw==","shasum":"c71003baa880a8fec4afe8e7527715fce61ba56b","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.3.0.tgz","fileCount":6,"unpackedSize":12194,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFQofzs6ul2+Nd289EAIVpIUSJ5GvsW7Wd8ViZim91pAiAEdX5kcpSVGzsiFMjHGZyinDhintuagIVPAFdPo5BIFQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1S1ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgvA/8D/XzoWJ4O3/3h189sZd4csHCafO7yKefkNgPWcYIjtky4rUl\r\nylik13lS4FkpoGTvd0TXxy//KKCb3PhD9EwdzfEqt1a8WWvUqLCk8NakmUIb\r\nP1DJIJ8Kd7WHcX+jWZ883pSJrw56YhwK+f7vqmkyv61oyWn7YiaFcYDRPtl3\r\nEZft7fu6P9+P8hgkWftDVZCXGYbuN4vSDovlKWK20MGCpcwN3elAl+KGUU+1\r\nmh43kq3ZslAlUgGbS9X6ymL3U6yBo7dpmuNcwMHt7z6Bqjz/B+O7hcJZ5oI+\r\nigO1OEhjy8v6/OjW74ShB1ZIpfkX77hziqi88HYHK9hSZJ9u1nEJOtIXUWs6\r\n322Zw4Ha2Ev77gQm4tiH8t41SKsuaRwbEZL4V5gd6+QSdvmn3Vs83fW+teIb\r\n+JEUdYCtF/XhWANq9IVutI9FNLiaLb/r3yaXSdfEEYk/wc4UtOxlRLyzCsZ/\r\nwMj/fpg9SQWFtHG37y3v9ZBbQSf9mMHSRsQdHI5bnFTghB8e8AxvTUUp+k/f\r\nuVNT0gxkKlPGgNGWFuc+BGmAEuGRm46Dq2BE8MfS5u6AoYlOVm695noFe7cr\r\nbqT83odMEU+I6jQB/H4aN2+Y44tt7OH7q2/No96lKl5fjFideu56GPbmsrgp\r\nXvZN9yzPpS1IlBTzA2lKe2opl8dtgRjxrJ4=\r\n=CyaO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.3.0_1674915161709_0.07366087109296093"},"_hasShrinkwrap":false},"0.0.0-rc-20230401134208":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20230401134208","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"14.0.0","@types/react":"18.0.31","@types/react-dom":"18.0.11","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.1.0","@vitest/coverage-c8":"0.29.8","clean-package":"2.2.0","csstype":"3.1.1","jsdom":"21.1.1","react":"18.2.0","react-dom":"18.2.0","typescript":"4.9.5","vite":"4.2.1","vitest":"0.29.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element. This is useful\nfor component libraries that want to provide a consistent API for their users and want to allow them\nto customize the underlying element.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Refs\n\nYou can use `ref` on the component, and it will have the correct typings.\n\n```tsx\nconst App = () => {\n  const ref = React.useRef<HTMLAnchorElement>(null)\n  return <poly.button as=\"a\" ref={ref} />\n}\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20230401134208","_integrity":"sha512-RgdQkZhesDswWRdq6XZ8cYNwuULshY9dylAJHC3L5+W7ofZVA9ZR2vajcy9X05KkzMZj83jm3dHwvflsAyRR8w==","_resolved":"/tmp/403ff1d9a2656e4c96755187d562e69b/polymorphic-factory-react-0.0.0-rc-20230401134208.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20230401134208.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-RgdQkZhesDswWRdq6XZ8cYNwuULshY9dylAJHC3L5+W7ofZVA9ZR2vajcy9X05KkzMZj83jm3dHwvflsAyRR8w==","shasum":"373823141fbab318fc0fd103362d141d503c1369","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20230401134208.tgz","fileCount":6,"unpackedSize":12790,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6ThhlREHvxoMxdBnEt0tICdwN6SGKrWsuleNzHytV4wIhANLndR426cHDGoidrOvfKfeasDt6Uzw5lBnksRkzz9Qs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKDS3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHQg/+I6JncBUlBvnfA+1nuloFkwhA617uoUzr9asAg/+LWinnULaT\r\nYrTghHYHZ7ZstLSIMVbCYrKnoE6NO4hjPvhFGUdmaUfSDRWRVA1z5c05iNhA\r\nCD2AfvsHVRI6zjTQq43np6KJqsO4p+6Ec8nrSgFGwsf3m4lCxxzYs/MgIVhD\r\nchI6FxbsTVso+4fa7Hv8RxaAIkvjbVI4j4ugLY/uPofgIITTxdLdv1ERr+rQ\r\n3YRzdl0Vxhb/C0iYYd1PXsrhNjd5zbWeUf2YLEsNACwCmkjMmEib7mDcO4vl\r\nN0c1ZmWHcV3e5UYdi2vWjNWfROr1M+TpxE/Ip8satQYygCX9FDeGHkNW3t1h\r\nNZNG8EEM6dBxlvqrIkmFfxdwvxsvlMMHQVAnNS3J/LB6QXIo+Ko71Z4wzBi6\r\nB3jz6ntsHvcLYVzwWtRnolniunuTQsgiAhmCg1EfA4A8sKA5h6l4vMHFKCcw\r\nqsjlqt0PdFkFF5upRrp+4fHWJmBn71V0ku1dyhJYCDtMPYvShlyKHKamBwqv\r\n+Cv8jIpj5PH6lfDPXdx2SVGhGqIcba0zdWgRY2m1OrWqSrIaL0J3MZIAxSnH\r\n/3GxEBPdN5DMNc9kRWv0uqYT92xAK4LEJT2ao9858OyWYveYuSrOz6kwIRET\r\nVoC4nYxoj7OdOAje/oTqQBzLFxUEGT6dazk=\r\n=Yj7f\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20230401134208_1680356534850_0.2558637037887803"},"_hasShrinkwrap":false},"0.0.0-rc-20230401140823":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20230401140823","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"14.0.0","@types/react":"18.0.31","@types/react-dom":"18.0.11","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.1.0","@vitest/coverage-c8":"0.29.8","clean-package":"2.2.0","csstype":"3.1.1","jsdom":"21.1.1","react":"18.2.0","react-dom":"18.2.0","typescript":"5.0.3","vite":"4.2.1","vitest":"0.29.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element. This is useful\nfor component libraries that want to provide a consistent API for their users and want to allow them\nto customize the underlying element.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Refs\n\nYou can use `ref` on the component, and it will have the correct typings.\n\n```tsx\nconst App = () => {\n  const ref = React.useRef<HTMLAnchorElement>(null)\n  return <poly.button as=\"a\" ref={ref} />\n}\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20230401140823","_integrity":"sha512-pvmAMDniLTuq+Xymc/4p7fe5BV7eaLntSQXrtyKZTI8RuxJjTGUnbR5IFsCdB2n6oVMc1Ok4/qZpM3Xhhc2kLw==","_resolved":"/tmp/33336008984539193d56b7595888d9de/polymorphic-factory-react-0.0.0-rc-20230401140823.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20230401140823.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-pvmAMDniLTuq+Xymc/4p7fe5BV7eaLntSQXrtyKZTI8RuxJjTGUnbR5IFsCdB2n6oVMc1Ok4/qZpM3Xhhc2kLw==","shasum":"0608d326b03673976fb7e4df2bd1c44db7b3e84d","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20230401140823.tgz","fileCount":6,"unpackedSize":12818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSf8Cx6cD2+9uRVyc/YuQm3MQW1r6L7j/VVTHrNNOAyAiEAtDEkLDo+dvrwp4y8S6Or1xALPvMRRjwihlZJrLWZtdI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKDreACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkrw/+NkdW6EItWuHlYziODgrOVbfcy5dTbYE7pSzoe/L0o8jVD5Am\r\nnyQ1PZ+lUDMpEzJ8OpM9tnWVbmGalqwOMks12h5K0Wguqc/SmCX0k2Bo47/W\r\nOXYY29JvzWo7eOo4uLzan7yjCadKsfd1tC7JmhYNMDHupyy0UogLTtTymMSy\r\nkJ4PSNNbK1iEEDoorTOhtPHYq276kat/AkNTEQGPeCw8oxNrh0kCXnZA6yP3\r\n8gqD9/pwJnB1ISqIhuO8kyPOu2n5rYa6tQDv9afsnSSVfhmxcCGSQcZ5Xn/0\r\nJJjP6U7jffa8mY6QrT3qEUf03bia1ELt2VdlE0W2vU1TmEt+iQv0S0RMQB1I\r\npXDWycaNhOnb19pFzzY/garAvh8ul6HMXgFYdOH+TGRKApwbAh9ofA7nMj4y\r\nJxgTo2Yp4tIHENKKbSRcG4qiwn/Njtxj7c+ZqwnPz3hPCIw8zifZzLmWMj3v\r\nz3qubxJoxToi2X0qAi7e5lyf113i0CmPC8Z+HcsjKk36oBzeoGG0BKUcrCTD\r\nzFZ7RkvVMU1FJPwJiZ9NYTJSSQ9lfU/cwe2VRyq/ayDyKtLm6N4wkQ/DGf6K\r\n6AOzucFmhHk9QDAKU76fij6P5atQbFOjdswc0/09bRjukI4grZqUgu9CkRZ4\r\nVkBYU/kHzgVqLTmP5Jr9hW0oRdhZztDDOPE=\r\n=Tex+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20230401140823_1680358110084_0.3458839844613848"},"_hasShrinkwrap":false},"0.4.0":{"name":"@polymorphic-factory/react","version":"0.4.0","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"14.0.0","@types/react":"18.0.31","@types/react-dom":"18.0.11","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.1.0","@vitest/coverage-c8":"0.29.8","clean-package":"2.2.0","csstype":"3.1.1","jsdom":"21.1.1","react":"18.2.0","react-dom":"18.2.0","typescript":"5.0.3","vite":"4.2.1","vitest":"0.29.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.4.0","_integrity":"sha512-MPjGczKyI4VL5n4/ri/nLI5IWJ4T8M4L8O9aE8i2yAz2WKk+Qe2BXDChn9ND+tsrVTPTFZRUOinvmB35/SM4ww==","_resolved":"/tmp/801027b0a7533c934c287da0b1a30492/polymorphic-factory-react-0.4.0.tgz","_from":"file:polymorphic-factory-react-0.4.0.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-MPjGczKyI4VL5n4/ri/nLI5IWJ4T8M4L8O9aE8i2yAz2WKk+Qe2BXDChn9ND+tsrVTPTFZRUOinvmB35/SM4ww==","shasum":"7525f463bf0b47eb26afd53f7f4a1b8ebf149d7a","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.4.0.tgz","fileCount":6,"unpackedSize":12800,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPOakEt5cv47OqVHgdDiJxG2K/aA0R/2tMq9CjxszGjAiAvvQCLSssGS9QQ7pNMk2ErtuwTn2tS0gjNolLfjezqOg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKDvgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyQQ//as5htpfQB5VJy/hbyu66kE9aCRdS3lrO6xW7n7imwYGv0e7g\r\nrH2v7uOvGYpXF9reo6GJ/r0qBK50pNwFWw7uPi3u2KY1yVbcoA74xyfj9zlD\r\nc99mldXBrUuf1vHB0glSF9paK/tJP1Lu2dsSbqftp9RZQbnld2VTKwUKguHU\r\nRTYWSxp20oElryoMbVzaxectYLMOX/OQu3Dy1JBZRUXmn3PJyP6fOtGubCRC\r\n64MmccP67Xz3tGelsCOWDoplRGV3r6VuT1kVHm1a1QJrFYOxt4WnVZk2pX6z\r\nthTpWwAdoVxUY/L89/PS4dgb2t160c6U7peALpQIx7lpdq/hpJjVjPH5P4CQ\r\nMrKIYKFxqblZfmyhEC0SzgfTdbgzg6WkYsuNpvugovT2DbxGxoepDSI9N19c\r\nIOMU55XcpdHz+wUZHU3TzaG/QG7pE35zqVVOJMucjMLLAK3lEGDT5l/MZhBb\r\nYM5qkI+y4C/VRxVbvVbftrsW5V5kwICYMQHFuIMIRVD4Gk0xh2rF1BeuQF6E\r\n4n5LtVHOs4lmdSCmIChroay9pqmtNsso9NKVCwno54lxE1PTBMmeiPrNj7Up\r\noSbjJzD8SHWTMwWfEQeLm0mS8wTh3AZMz3S5mJqPorZZmvvk1xhjmpfTg5cd\r\nT1rR4bCrCSNU9minFyHn2MvCZ77tLWZS9XE=\r\n=Z2sZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.4.0_1680358368087_0.8362850275317188"},"_hasShrinkwrap":false},"0.0.0-rc-20230401170648":{"name":"@polymorphic-factory/react","version":"0.0.0-rc-20230401170648","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"14.0.0","@types/react":"18.0.31","@types/react-dom":"18.0.11","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.1.0","@vitest/coverage-c8":"0.29.8","clean-package":"2.2.0","csstype":"3.1.1","jsdom":"21.1.1","react":"18.2.0","react-dom":"18.2.0","typescript":"5.0.3","vite":"4.2.1","vitest":"0.29.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element. This is useful\nfor component libraries that want to provide a consistent API for their users and want to allow them\nto customize the underlying element.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Refs\n\nYou can use `ref` on the component, and it will have the correct typings.\n\n```tsx\nconst App = () => {\n  const ref = React.useRef<HTMLAnchorElement>(null)\n  return <poly.button as=\"a\" ref={ref} />\n}\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md","_id":"@polymorphic-factory/react@0.0.0-rc-20230401170648","_integrity":"sha512-XpUX6Y+9YsCujXUCf7y1+bXJHAD41PuHuK+ULXx/wY3YTjHFnrqXZmAp6T7P90ls4nJN3CD1+wrmiJg54fYTmw==","_resolved":"/tmp/0572f090beab16fd721418ccc5a1df27/polymorphic-factory-react-0.0.0-rc-20230401170648.tgz","_from":"file:polymorphic-factory-react-0.0.0-rc-20230401170648.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-XpUX6Y+9YsCujXUCf7y1+bXJHAD41PuHuK+ULXx/wY3YTjHFnrqXZmAp6T7P90ls4nJN3CD1+wrmiJg54fYTmw==","shasum":"c5dd30fdf42abd5f8806c30a48856a1a1c62fd18","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.0.0-rc-20230401170648.tgz","fileCount":6,"unpackedSize":12832,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyUyDnoSYDuYCceKcf04Sv0FedeUcEb8npi1DOQrXJ2AiAwl8203KSHNoCkofCS7VnYzVUV7cnyp/ZxHXTM9v1kUQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKGSvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNlw/8DL47meUS3TWBUt3U4JvjFhsCZTP2nk3w/NdfNdxXoZ+dUEsc\r\nPGztxjYFy/ecOeKoOrLbnzohx7wh4VDyIXHBu61sJfXsRzMyR8dVkejHEqGY\r\nJ66/v4YteZXgL6zd12Mly+TWZuwSJqHJRnYYNO1xvyvvfp9rgab+Jg8W8VT0\r\nEfyfBnBhrWdRkul8HeQgQE20OGH+VjAQ9o6reTNLb/5JmrWvCGVIHiKTFrl0\r\n3GM+jN22j23WiT3JouQegipPp9spCtJVChwFSuIBLH4WJmlLZuiej3OvSAgK\r\nHncxS9CW0aLbopV+IXBGSdZLubxnraXcEQo1ML5IaoL4Zn3RZKt/O4wVjI6K\r\nBK1Izx3EzRIpNKfFd0Xyhjmw7+PwhwRWqUblTzuoYatOWFLd7+3uqE2uYiss\r\nEqc4oH2Z1xMCPTw2pg5DngceQ+ZQByXFYjRGu1UggGp5+4EUFNzJ2ZC9n16Y\r\ndMqXsFny3HhQHHeC86vg/TBdPoG+aYYCEEDj3E4A0upvlAYpcFauVn9R96c0\r\ndYm1qUUf6zBtmZMWAogRO/HXL5S98qsejuzgLhg/rPXBS4ImXcptkedguNEh\r\npN1g6xYZOl2lAbfR12lLUkYmUPRkO9ZGn3XpAf0yHV4V1YMNLHD+RlDa4afm\r\nZVQRh8Vwl+9gv9fnxG6BDO9j5PEMp9G3GeE=\r\n=dqZQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.0.0-rc-20230401170648_1680368815781_0.7519682704488126"},"_hasShrinkwrap":false},"0.4.1":{"name":"@polymorphic-factory/react","version":"0.4.1","description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"homepage":"https://github.com/chakra-ui/polymorphic","author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"license":"MIT","main":"dist/index.js","clean-package":"../../clean-package.config.json","sideEffects":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/react":"14.0.0","@types/react":"18.0.31","@types/react-dom":"18.0.11","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-react":"3.1.0","@vitest/coverage-c8":"0.29.8","clean-package":"2.2.0","csstype":"3.1.1","jsdom":"21.1.1","react":"18.2.0","react-dom":"18.2.0","typescript":"5.0.3","vite":"4.2.1","vitest":"0.29.8"},"peerDependencies":{"react":">=16.8 || >=17 || >18"},"module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./package.json":"./package.json"},"scripts":{"dev":"pnpm run build --watch","build":"tsup src/index.ts","test":"vitest run --reporter verbose --coverage","test:watch":"vitest","lint":"eslint --ext .ts,.tsx src","typecheck":"tsc --noEmit"},"_id":"@polymorphic-factory/react@0.4.1","_integrity":"sha512-GQMmzGARKDLmj3DYAS1lSiQNfUbqIGInAmOMpJwbbwm3MWUPfg+3UE8jQmeORaiXUjoO0sagHdwtf2lx1XCyhA==","_resolved":"/tmp/1e6f68e97bab2f1e4e720b946802542e/polymorphic-factory-react-0.4.1.tgz","_from":"file:polymorphic-factory-react-0.4.1.tgz","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-GQMmzGARKDLmj3DYAS1lSiQNfUbqIGInAmOMpJwbbwm3MWUPfg+3UE8jQmeORaiXUjoO0sagHdwtf2lx1XCyhA==","shasum":"039e5cf82d7a8a2e0681427b11cdbc39eeb6add1","tarball":"https://registry.npmjs.org/@polymorphic-factory/react/-/react-0.4.1.tgz","fileCount":6,"unpackedSize":12814,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnZqrxIMaoGO/ARfIXmc3tUqr4BwXBB6aKMNZTT6aiUAiAzbp/IqPpRftCnvYTazz0PDouRwhcmZPXJ93XdgQvHlA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKGXrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpV3Q/+O9lxbXKvEcDJqsgLTXDbCw28O7pfiy9jyd1DCg4wdq5aIZ1F\r\nXjg0QzZAr7LmpZscf1deoRTRw4652VWdoyQS6+Aa0bpXzthoUC1FWf/KF0/h\r\nbT6YOpv+maliZzb/OFou6XYGGl3GtJI3rRtRGQ9osEnJ+XSZv57abJ31/Ije\r\nknvw8J/mUjVyfXhJ8AXxJBiGEdYTTwy2g4DUL09xud4wFwk29QDVSI12UfhW\r\nO3ZiAjDUvGN5kO4qYAwFtQpXr78xbGXPADOc1/RAy2ZtVZ/hpCqIdqqu0U+i\r\n7YuESKgfeG2u8aXVvv19eXovapwdsD0q3OJ2B0xAPWH/P1EhW9gj7B0w0zM0\r\nxMOTB42vY8Ws+mS5q8jFFmuEDVxt4iZa/qy5Wcrg2dIt8HuBXLO63C/MX1I9\r\nlYEMuU5kb8bE2wmeVKchHOdUJVudwDxK5b0SXFOgExpPgRC80E9yLgjTqwh5\r\nPUtOeh4BM1FgOHzo66e8XVrBOWUHT5qv5Vm0kvGx4Z22fHfzw/HpP8ehfcm7\r\nHN5Mq1NwfrcQhnfZk0WivxGuGB1KeX3clZrRVa1yKhgg7vaEchiDNpM1i4YR\r\nreY6xMhVrgCEy6pMvyxgobFVugfZTiWyFulzLz1XzpnJGl1/qpjg/f2lbyqk\r\nWxbaAZIprkoJWcOvMVsDXHxoNEbM/Ak2/dw=\r\n=zsKr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react_0.4.1_1680369131579_0.25272792879374983"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-31T22:36:32.065Z","0.0.0-rc-20221031223628":"2022-10-31T22:36:32.238Z","modified":"2023-04-01T17:12:11.880Z","0.1.0":"2022-10-31T22:45:09.566Z","0.0.0-rc-20221031225611":"2022-10-31T22:56:15.546Z","0.1.1":"2022-10-31T22:58:11.187Z","0.0.0-rc-20221031230553":"2022-10-31T23:05:57.742Z","0.1.2":"2022-10-31T23:07:13.422Z","0.0.0-rc-20221115103039":"2022-11-15T10:30:47.665Z","0.0.0-rc-20221115104000":"2022-11-15T10:40:05.248Z","0.0.0-rc-20221115104103":"2022-11-15T10:41:09.163Z","0.0.0-rc-20221115114410":"2022-11-15T11:44:15.545Z","0.0.0-rc-20221115114851":"2022-11-15T11:48:56.089Z","0.0.0-rc-20221115114937":"2022-11-15T11:49:43.080Z","0.0.0-rc-20221115115716":"2022-11-15T11:57:20.808Z","0.0.0-rc-20221115122200":"2022-11-15T12:22:06.747Z","0.2.0":"2022-11-15T12:29:28.795Z","0.0.0-rc-20221204123243":"2022-12-04T12:32:49.139Z","0.0.0-rc-20221204123758":"2022-12-04T12:38:03.301Z","0.2.1":"2022-12-04T17:01:15.718Z","0.0.0-rc-20221214172031":"2022-12-14T17:20:38.197Z","0.0.0-rc-20221214172411":"2022-12-14T17:24:17.721Z","0.2.2":"2022-12-14T18:01:53.012Z","0.0.0-rc-20230128140721":"2023-01-28T14:07:27.168Z","0.3.0":"2023-01-28T14:12:41.872Z","0.0.0-rc-20230401134208":"2023-04-01T13:42:15.007Z","0.0.0-rc-20230401140823":"2023-04-01T14:08:30.252Z","0.4.0":"2023-04-01T14:12:48.335Z","0.0.0-rc-20230401170648":"2023-04-01T17:06:55.942Z","0.4.1":"2023-04-01T17:12:11.746Z"},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"description":"<h1 align=\"center\">@polymorphic-factory/react</h1>","homepage":"https://github.com/chakra-ui/polymorphic","keywords":["react","typescript","jsx","headless","polymorphic","emotion","css-in-js","polymorphic-types"],"repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/react"},"author":{"name":"Tim Kolberger","email":"tim@kolberger.eu"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"license":"MIT","readme":"<h1 align=\"center\">@polymorphic-factory/react</h1>\n\n<p align=\"center\">\n  <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7\"/>\n  <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\"/>\n  <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/react\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/react?style=flat\"/>\n</p>\n\nCreate polymorphic React components with a customizable `styled` function.\n\nA polymorphic component is a component that can be rendered with a different element. This is useful\nfor component libraries that want to provide a consistent API for their users and want to allow them\nto customize the underlying element.\n\n## Installation\n\n```bash\nnpm install @polymorphic-factory/react\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/react\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/react\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/react'\nconst poly = polymorphicFactory()\n```\n\n### Custom `styled` function\n\nYou can override the default implementation by passing `styled` function in the options.\n\n```tsx\nconst poly = polymorphicFactory({\n  styled: (component, options) => (props) => {\n    const Component = props.as || component\n    return <Component data-custom-styled data-options={JSON.stringify(options)} {...props} />\n  },\n})\n\nconst WithOptions = poly('div', { hello: 'world' })\n\nconst App = () => {\n  return (\n    <>\n      <poly.div hello=\"world\" />\n      {/* renders <div data-custom-styled hello=\"world\" /> */}\n\n      <WithOptions />\n      {/* renders <div data-custom-styled data-options=\"{ \\\"hello\\\": \\\"world\\\" }\" /> */}\n    </>\n  )\n}\n```\n\n### Inline\n\nUse the element factory to create elements inline.\nEvery JSX element is supported `div`, `main`, `aside`, etc.\n\n```tsx\n<>\n  <poly.div />\n  <poly.main>\n    <poly.section>\n      <poly.div as=\"p\">This is rendered as a p element</poly.div>\n    </poly.section>\n  </poly.main>\n</>\n```\n\n### Factory\n\nUse the factory to wrap custom components.\n\n```tsx\nconst OriginalComponent = (props) => <div data-original=\"true\" {...props}></div>\nconst MyComponent = poly(OriginalComponent)\n\nconst App = () => <MyComponent />\n// render <div data-original=\"true\" />\n```\n\nIt still supports the `as` prop, which would replace the `OriginalComponent`.\n\n```tsx\n<MyComponent as=\"div\" />\n// renders <div />\n```\n\n## Refs\n\nYou can use `ref` on the component, and it will have the correct typings.\n\n```tsx\nconst App = () => {\n  const ref = React.useRef<HTMLAnchorElement>(null)\n  return <poly.button as=\"a\" ref={ref} />\n}\n```\n\n## Types\n\n```ts\nimport type { HTMLPolymorphicComponents, HTMLPolymorphicProps } from '@polymorphic-factory/react'\n\ntype PolymorphicDiv = HTMLPolymorphicComponents['div']\ntype DivProps = HTMLPolymorphicProps<'div'>\n```\n\n## License\n\nMIT © [Tim Kolberger](https://github.com/timkolberger)\n","readmeFilename":"README.md"}