{"_id":"@polymorphic-factory/vue","_rev":"112-06bb724e0c692a8e1d7f77baa53665ce","name":"@polymorphic-factory/vue","dist-tags":{"rc":"0.0.0-rc-20230614200801","latest":"0.2.1"},"versions":{"0.0.0-rc-20221208211909":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221208211909","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"2.1.1","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.26"},"peerDependencies":{"vue":">=3"},"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"},"description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221208211909","_integrity":"sha512-n8hZ54V3ebJ8SED6pWozTvNl9wRxfDp1iXFJQfB2gdfK1EnmGj7BHX2rBv72q3tIM4092G4VmTZgFmZMEwZAQg==","_resolved":"/tmp/a27ff8607182d3e5f3cc4ba2f2bf79b6/polymorphic-factory-vue-0.0.0-rc-20221208211909.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221208211909.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-n8hZ54V3ebJ8SED6pWozTvNl9wRxfDp1iXFJQfB2gdfK1EnmGj7BHX2rBv72q3tIM4092G4VmTZgFmZMEwZAQg==","shasum":"24e008d5a491fcc26a63fe3256cfd36b38ec4d92","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221208211909.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHWf0lO7hbgcs6LcV7yHD7ldUw+FrCDEVEdBRZowRLPAiEAiZZw1nx2S86duiVwTvpti/y9aBa8UnSsT+PsBNU/0D8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjklTTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoinBAAiKjzy2byFXrV5wTYVvSKdxvneYF8Djjjefqw0iZfjz2DKn4K\r\nC4+lOOjrwoDAFMcEHHI3G54cRvYDLPmdu4bOLFLpd/AJycdn041U1i0eJBYf\r\nJ6iE67dZw3pgCAuhwyw0XWmG/XlE7HXoMDZoGsclCvtRMnHkRLoEah4sJ3qO\r\nty/BYqF21ft8OMz24Y23uFLeNq+5n0ultDnGvnmobYf5aCtXclc/BEvKDeau\r\nCuzAq+uoH/DeuOmUg6sxzZFa8ibKcsSccNkFrtFSk4GlkU0cH7ncvePeOtCf\r\n4NOL0FIL+7oAZm3+MoffSs2Lo6RZvdOplRPTqPbhLj/xwL3rwD099xp88NuK\r\nfca4/gvEQQ01kI7MPi51QY73gpSXfDrnz3j6mTBxqqB4dSiijvsTi62mWkTF\r\nfv2ZjF2Vdg8l4pzFf4YewERhHJ86E4HbYgDQuW4tx+4LCn3/I3vudfOGhDTn\r\n03/GwkhRReco1pVNdyiFFYOcR5rRDCfQ3V7LSl2QyAGWed9ixAa1o12m2t3G\r\nEpiYKugSKmBldm60AztJBraEesF9HpXyKg6qXkezAozZ0JTT/7qwuIfZrgDp\r\nt2rBQPVnjNF4jhXZ4nW93vrQOJSGP+TsQFo8Q1r7VGVYp/Fn85f9+y0mrwkz\r\nsLjvQ6vMkFTfaKhPEmgO5CEHJo07/MsCRzM=\r\n=/1zF\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/vue_0.0.0-rc-20221208211909_1670534355449_0.8014213837043971"},"_hasShrinkwrap":false},"0.0.0-rc-20221208213345":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221208213345","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"2.1.1","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.26"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221208213345","_integrity":"sha512-aZGCnxkIZgEpZ7uGmmlyrz20GLMbQEvZY4ZyBXuDaqTHkyGqyEA/JOICNPqXNhtKkeuiHhoBSuzscPOpRHlkiw==","_resolved":"/tmp/4c56a3c6049c5c6a3e232d1c2f106fa5/polymorphic-factory-vue-0.0.0-rc-20221208213345.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221208213345.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-aZGCnxkIZgEpZ7uGmmlyrz20GLMbQEvZY4ZyBXuDaqTHkyGqyEA/JOICNPqXNhtKkeuiHhoBSuzscPOpRHlkiw==","shasum":"b603133c8796040286d7a6308022a0fc2db223cd","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221208213345.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDvXKwI6OIIWn7B+E5Dm5osRUiZkMBGplpruEOSYdBtwIhALncDKkfTt5n2yWwgFkP3dDRT8Zjw0n6zp/pkbmJtQWL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjklg+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobfxAAm71MwSS0pAnmZ/H/IYSlX60CncTJKXD4L11YGhdJvvynj1F2\r\n1l6hCmYjEk9fBamedI8RS1ftGHX7bxdFG9LeqXc+jUCudfBhvQjbfnjfUtN0\r\nVBDuX98w7vCAqpKMgMA50CTEYx+oh9TeR5Vgu5RXxeqtMiRVH5zqU3xI3SOo\r\nPxy1S/ZUkSF0LylBkXd6sI7NekNlQUtSTbxHmqe1ysjRSp/BlIrSCvg7XDs/\r\nenhbya2fQ8UT9ZeVkhmEvd47kIgdfkaC+82T8wsKpAFUR3kKq/CcYL/ECRxj\r\nJl+id1UtGpSRFT29PRMmkVc1xfov3SEtjKpL9RlTqPbXROJgicf9zMKlr7Dq\r\nG11vIw59JgV1sFcXce1DYRvfWRA9pgjJOCaOyYXuX9GkjlSb2JtHmi9f4ZEZ\r\nQNKolW5950SL0AHfomB1/3nS8TS8PZU4ApDoA8I79L1m2H9Pqz5FiJcr+yJK\r\nHtb1P49/9jlj3ByiYprlbyB99tFh8jlVz0VE9A6K3XlTNCYMlPNDrS6DuXBZ\r\nwjAjpXfc+nr/bRL3wRlarH6ahCGbSYOl2uWVDzbn2AkYIDx+Jw9YG96VCuw/\r\nNRMrXVK9MxcNLDrS5c8RCwsOgZHLI9Twej5prKxXOvaU7LSUcy4EVCkCU2XY\r\nFLhxlQYEBIqXObvSDpIZJzfC1kM6GevQ1U4=\r\n=6xdJ\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/vue_0.0.0-rc-20221208213345_1670535230093_0.44345029650523426"},"_hasShrinkwrap":false},"0.0.0-rc-20221208213445":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221208213445","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"2.1.1","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221208213445","_integrity":"sha512-qBxPkQ/+c/zeY6Rh7bYELLTmaqs++13SuFisC2XDUjbj4SFIOBsjBrlLagVitbj7FrRL3ouJ6eF5TJ6gn3zI7A==","_resolved":"/tmp/4bd47c0604d0898d56f19303e0045a1c/polymorphic-factory-vue-0.0.0-rc-20221208213445.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221208213445.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qBxPkQ/+c/zeY6Rh7bYELLTmaqs++13SuFisC2XDUjbj4SFIOBsjBrlLagVitbj7FrRL3ouJ6eF5TJ6gn3zI7A==","shasum":"0e188ca1ee49d55baa8c4e1bb7973b77ca52b167","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221208213445.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNqGVdgP+ZnAEcxBrPcy+shwEx1+V5Muots309SII4LgIgIQJN3CJfTwPdOJQ13d2xzQu6NVUWzdhXGICweMDmFeI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjklh6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjEQ//T23DE91nHw8N0pICdVhroFs6lvpkLtKLjoowFx2hiXoxxP5X\r\njKfv4QQtxb6gJvO+cFDc7bqMx27zO9OopqqIwHjerKDKtlwbWI1OKdGy1OjJ\r\nMJXY8qES6kGjFm5yJGOWTSKALf/uFY32T6jWR5SpJrAYiC8jJNknupQH+aLp\r\n3R7Sx+E/g02OsD9/WCEe5FYvMbGYkvX48hlfexAIM+AgpAeR7Oa7NbUOQ340\r\nnty9AfstryCY44zHI3YS1tkrQ+r/SPCMt5pBH//z3dXoMSrti+7GIDbRYbaX\r\nzuNh+sz9z7sXB6H1pLqBLDK27W5o8vsLIocnEFnlNdvvdqkTYxLdPkI7KnXy\r\nidO7NJeHQ8cQ/2pmmoZg4mj47Q4THLFzEEL6Ug/d/0xJBtMq7211GOt0Q2jY\r\n75wGwkFC7R4alGZfuRItedMZWq9sj/pQqf75o8d7ovWQjgwf+vDeFzdHFjqw\r\nucNN5cfJtSLnL3CklQh2xjZd/M+iZJXYzd4xhxRfcW1A/N8sybKa4G5gVFyf\r\njRebdSnnUUQOItC4g782ywkMu6ih9XtK5JwXF3i//SHiumFyq5YCf+qXfyBx\r\n0xYatwk/2TbbxR+eyDtCuvzmnfvYvIoMs8Gw7aYPctqlhu3NhjzIBFt8GTW2\r\nYlJ1EQnbag767jQ6H7e6P9sRii9VB/0QWHI=\r\n=fW82\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/vue_0.0.0-rc-20221208213445_1670535289848_0.8557866588467755"},"_hasShrinkwrap":false},"0.0.0-rc-20221209143051":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221209143051","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"2.1.1","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221209143051","_integrity":"sha512-NIKYyqlDl8VcY2wYB2PWrQETyE0L6upDnV1l9A4RdOtsKGXBIDxwlJkLA++GDGR7idJoCR0s9lGqtSoS6wNr8w==","_resolved":"/tmp/239477171622d99cf6eda763a64a33fc/polymorphic-factory-vue-0.0.0-rc-20221209143051.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221209143051.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-NIKYyqlDl8VcY2wYB2PWrQETyE0L6upDnV1l9A4RdOtsKGXBIDxwlJkLA++GDGR7idJoCR0s9lGqtSoS6wNr8w==","shasum":"40044a6cf10fbd2ee4410fdcf9feaace22b23173","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221209143051.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+Q6WGUxSn28M164wUvQB5l6cCWaKGBJxuE1fRmN3r7wIgLO0KAw4xB++ZZjbyvc1tcR+jfczZ08xOhI3/CdsPGbU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk0aiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcMA//RLrb5V0M14Ehv4bJ+j8E6efi4B+JAhViPPBit2ppBIjVSEKL\r\njm+0UvboOI2RkpPVXz1sm1UevfdCB387vi60ZDcoPgiSwl33jb0WafTXs4tf\r\n1bByIcwU3i/35aQM1/Xnho+OtPi0dEKu4Rf7tYkp/QcSiU5ufvOl1dZ42pzv\r\nliKL17zjK1YOuJ+WwDsAzZKvF6cOfEVNE3DPQlTJ1iDp3C9TspAmdcBijTMt\r\nMlvzgST7EZ7G6MgEeQs5NT6rm15zAq6Jxadnj4PnWQ+xCV3JtU8mR+5chIJ/\r\nYYQ/16vw7lXlOI8JIGyT0LyEc8y0olnR20BCvEejWm6iydGgv5qk5CV9i4nj\r\nXUMzOzknpcn3+86Mn3RA5e+RyGCI8yOBI7WjZSzmDoDbMGO3UoN7W2Y2J4O+\r\nqO1wJwcQepaafNUEWA14kL0QZtXItBFvxiK3CdP1XjLzhQr3SFEmbIHHKk7A\r\nkBeh0prx5ycS1IKHMWiMKDVTRjsXa8a0tulXbgW+O+zleLv6gS9BUdUEJj/W\r\nryUlGQudzoro7uooB+4LvcTS6laoq61yep6HFoeG7VaNCefhPl+1yo/q46ar\r\nadz6fEs/vsyShy48zX155eDiO7wrdRO28cwEbJi2RvdDbHJT4NYwMf7xgh75\r\ndkKk+W4vG8utQjravmgYEg7AiuVs//aXg/E=\r\n=1e9J\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/vue_0.0.0-rc-20221209143051_1670596257872_0.3378761118516782"},"_hasShrinkwrap":false},"0.0.0-rc-20221209143512":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221209143512","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"2.1.1","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221209143512","_integrity":"sha512-5tVGWdQkLBZb9B3OalfZkvBnR4tG/E3sxBVYUwOh11+kSfdj8Lb7g5eCFiQ1uoxR/RW5/tOUtEYiQFaopq7Mfw==","_resolved":"/tmp/2bda64f427e39eae2f8951cd7cfcfaa5/polymorphic-factory-vue-0.0.0-rc-20221209143512.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221209143512.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-5tVGWdQkLBZb9B3OalfZkvBnR4tG/E3sxBVYUwOh11+kSfdj8Lb7g5eCFiQ1uoxR/RW5/tOUtEYiQFaopq7Mfw==","shasum":"cafa6dd304e535688b442d4a9666692f764fb9e8","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221209143512.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeDTfIdlkxw5sph4vAQwTiBd6kTaGrjtWu9V2bsgB9qgIhAJ7k3w5X1oiMKtTOvZ5BMAJDuKrpWqYoBLVPuTzqXFis"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk0emACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSyg//e/brkVwzGMW5YE1bSiMaWMNWJVIhpTX0/w4iMuEY9NIaCV2s\r\nc9VfscowqpWWjtfMGBdPZByxu0wXV8qgEJbyK2V+kCl/hZjsYu01ZY3a2dtY\r\n4QUn7FM3VFMhC/jBq5oFnCvngRfXcGN5R+vBGHNVfGpmo0nsFBghpoIVyDne\r\nd+gaeMo3+Qn32qOCN0hMwg5jLs/vDOExiQ76UpxS6Sra+IhonZsR0WhLu0WT\r\nkEFmJPP/XaCV9HHwztviXgz9tTTbMnTLOW98nARXG1j3LTDkkcteYfJV0tZZ\r\nPz0qQlAqIF4lJve4CFUhj03U3qcnpEGjMgj3bfRlSMQ7R8ME2knzPz/ilgEd\r\nysPK7tmBkp+CJtXJkMX9/BG9zma8cMN4SO3CwPhzIxD+hA+HW6/fkqEEkNeP\r\nlqchU9Y7EQx5lDbhXca0O9pqAARaraQ7LcFrSCDtHR/oIbp9YT2g4TRrseYC\r\nHlCpNJ3gdv3lq6/1Z+FpIRmIXxzeffWw0l90HLBiMUWzrC825Jvdk74Ot/oB\r\ntSvG0pglKeLKdMYjpm8b+yZE20kJit87roZfH+rlKhWb5orbn1xDt6hCBmaH\r\n57tLt4bCj1xycRiQEnX6EIFFvjn7EY17IwtarIy1RUY1j6tiNv+QZFmkNWhp\r\n4EprHf5Icpc+r56vKl1NYMiOezDEvleNJII=\r\n=bZ+r\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/vue_0.0.0-rc-20221209143512_1670596517937_0.9160381270788631"},"_hasShrinkwrap":false},"0.0.0-rc-20221209153932":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221209153932","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221209153932","_integrity":"sha512-s8r0082t1WvCPtF3FO9CDKu+4WAlAiZbXoRd1vHZLzhYHgYL5i8aEIKfPj073xTuRLnfopVkxw28f7A5xJ82pw==","_resolved":"/tmp/eafde1362c403256097403154d3c5586/polymorphic-factory-vue-0.0.0-rc-20221209153932.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221209153932.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-s8r0082t1WvCPtF3FO9CDKu+4WAlAiZbXoRd1vHZLzhYHgYL5i8aEIKfPj073xTuRLnfopVkxw28f7A5xJ82pw==","shasum":"12fedbda6b5b29fe13188cc25896866d266c4574","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221209153932.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnnKNC+rZiW2axtkIBObB/DS8LxTyA/vMK6y9D8tfG8AiB/AX6pKQQWIl6Oxtp9ECXegficSnKnlr/UxE4LS08Cvw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk1a6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmousw//QqpC801+vPni9SvQFvls/j0DXPyXrIKEBp4U2CdPLugC790s\r\nDHZGqSM8/FmCUDF2fjvThI39sf03kNTizmm5AIF2LOx6WpPb6g1jBfisWU8J\r\nxtbpno0RvKVZMPuSsPXmgts4ZWoGMMs4/Rz1c/zDn6daVTA4vMxE3XUf1CgL\r\nsLa0UwwoVhp2pdPdqykk4kc0wGcHeki3CcxTpdvhnC/fMVfl+CeCGUiPDRXz\r\nQvC7v5OeYpSADL2WhG86qGslV1AcU8w/GoCd3LjSKOjwcjZ10DM5GkZpdxcO\r\nMtGsYLuI26VEFNqgqKVG47Gk78hlCj0H9vcnnSCMSKgPlc8X4InHMPS9pMN3\r\nhehTuhXdBOKMLsARg5zT2fCelKqwOylx+Dmrxvp6KdvszKepWSSUxPHW2VnZ\r\nYjsgyFbD1yNDUkCNmIKfWdvRPXHddfg1H6KYQHMa05DYIGMW5UE7onJp86lH\r\n7SIQpZQInY9I7QAu27tSpWolhY6czTEfQYFF6OHq0mCJkfpgin8NGPm63N7H\r\nGVGROTjeozd5CeMIG9yda4lwL/o0Lhc5WMLnYK+92Kc0c4hI+EISlOuboHgp\r\nugXzqJsln6fFL7282C0fhZGNkdoSva1RRrbp3dDCEoSVzxByFbBbabTiBaau\r\nhh0WNHozNv5s+QAjviEsX1oA9U7t9GE9feA=\r\n=ofRY\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/vue_0.0.0-rc-20221209153932_1670600377792_0.4512888734072569"},"_hasShrinkwrap":false},"0.0.0-rc-20221209154029":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221209154029","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221209154029","_integrity":"sha512-aDjPTk7jHh1pwMiKhgBFedw3b5Tbk/5Hes/3tUPjlCS17+SThD6TtRPaHDe/oozT5D+05SMadGa4alPZzTVg2g==","_resolved":"/tmp/38d836e575a0a18166bbb391d61054d4/polymorphic-factory-vue-0.0.0-rc-20221209154029.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221209154029.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-aDjPTk7jHh1pwMiKhgBFedw3b5Tbk/5Hes/3tUPjlCS17+SThD6TtRPaHDe/oozT5D+05SMadGa4alPZzTVg2g==","shasum":"56df8b0056774b6448b299f183b214052eaa29b3","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221209154029.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOX1qB5lLPsAFehrqSg45XxnwxQ7QAYth7/pbvCk/QgwIhALOLd24265RbC3hCs+jwPaiuxIIlte/3NDUWh7qSR0U9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk1bzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWxg//TtCnL23gOdnviZ959JAKX3XpRXzzIl0WAMKr3Y06gBhND9AK\r\nVNkcLinowwJ6DasBZJo+eTkDKsNUFKY8nS3BCknroKuyfDTUMYv9fT79tzPq\r\n/meHL1edn2VwE6MYghgeinYSLByI1umeUGm/KplF+0R3ltV9G50Mm9AcfC71\r\nIeNxTZGNNIfawhX40Dr04f5CkRcn84U85pXIh1QMOddSEX83V8+lt3VeIe3B\r\ntWMzkC5LaTe1T1c7ln+tE2GCaahy1292+JoWy0PXqr6qEAcFT8s++8/QNKDQ\r\nmH9DistyEbBAsB3W7Ud90L/kc4klsCXuoL/nXK+fhfVBm+ZvWtwicGPWzTDY\r\n7sQwtkgBRw+7orJFwV3hSKmq+drinUktScfIFN7Bl7Ng0atdpwN2NEKqn3up\r\n1M9lkZFbyEDmkb3Zu0HHY/WFzAXy0Ern3anJQhSr3LxAghtdvWA+IMKaUQSw\r\n17X75fNmscS07/z++FsCQnle1Q/WT3IWdyHfQSpJNfRpkgMxBJHhS2dxAUb9\r\nlF/8fXMr4O4ZlDyBEUCOSEEFITG2dFN1NavRBJt+vyCEvLUQqcSmpC5jU038\r\nhK5KUn2vobma8R21lLfXFB/HHXTjcXdTYSZgQFjm5V8dt9MfszSo0xXytL0/\r\n2JysBRfcQbXyHKHid+CZS1r/V1aE00XIHD0=\r\n=sk58\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/vue_0.0.0-rc-20221209154029_1670600434820_0.543933544434082"},"_hasShrinkwrap":false},"0.0.0-rc-20221210064357":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221210064357","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"3.2.5","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221210064357","_integrity":"sha512-0BhrVk0sxZmdAI/nYHPXL38L9t/2WIcHpws+hk4d5bWs7UNMd4rwEC0eZCdF7Qh+y1a6MzKPBe43lbMh/kHipg==","_resolved":"/tmp/51b30ecf436836d01f113aab06eb3aa5/polymorphic-factory-vue-0.0.0-rc-20221210064357.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221210064357.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0BhrVk0sxZmdAI/nYHPXL38L9t/2WIcHpws+hk4d5bWs7UNMd4rwEC0eZCdF7Qh+y1a6MzKPBe43lbMh/kHipg==","shasum":"d616f79018893d9689fbb24b71495106019c4d01","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221210064357.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFnK8h/lsTVe5h31w997KXvGqQAo3Xt3NQctCT6bo7dFAiEArDn/Ho7dC9abulGIKu0J46jo96hxRVLA+STfgmuZDJg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlCqyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlGQ/+McTj2qGhR4ljSZwe9Np1IgEgzwZHYaZjM7tidruTyZghdM8B\r\nTUEoJyJcLvtYDqhpg1gk83v6XEuVKhAsrTRtCyLHrlj9XNMvNnK1tFFDB4op\r\n1KXzx3JggtJUY2p0gcAXJRQPaQgvpYDyHyA0zUJP9YXWGB7qWhKvRhiDfVQd\r\nCuxdzlNgtjOqSlxhWh7mCPTn6mZ7YI/4R0EoOk2La822AdAYMcZb47uTNhBT\r\nIYcVnidfpJiS0cLG5SY2NMtmCa4AxpjpGiOx3E87scZy6EVmEuyVqPkwy7Bg\r\nTemn2X5danmzfg3iBZJbUrLztI6nfboztdY+3mClN5N4dZWsSsKTVKJMF89g\r\nSTW6wZWyBLM1NcqBqbBY6bpmhaUcL2wIkeFBN9pGr59dqVvkWYKHBgaKXHV5\r\nJHbvOdIbHfRY51HYZRDjuIl+gNe5ild1WOaCkhqK4+ZxP/MGG7YtPxjGM+2t\r\nFHL0jGmCqv2UpQ+ab7notSehO579UjX9M8bRw2bLmoO4z6LlCF0OBd6DtEZg\r\nasa1Gpnhm3h+cnRrS77TvmPmvsdm9oItQlufwSFiSl0doK3m459s1yDSQhfa\r\nNAzqLkSyBWNoAsOhHMxuvbDCIXAC9yZt3r2YlTnvaBz9fybNEOnZHj5y9Gbi\r\npbqSyo19o2vs0IceOidfSOQJ+FLacTAmkFg=\r\n=lRGY\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/vue_0.0.0-rc-20221210064357_1670654642042_0.12758571573462563"},"_hasShrinkwrap":false},"0.0.0-rc-20221210161124":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221210161124","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.0","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221210161124","_integrity":"sha512-Hu1qBBQ6vojiPFPqwdfYlzAM77bxjwT1p9pwLD/M1+xBP0pWSjbtPmZwIjtOUlAaB74aQOYr9/w/LUTU0TH8Iw==","_resolved":"/tmp/9f474e6e20ba63b2a0a0c797ed54910a/polymorphic-factory-vue-0.0.0-rc-20221210161124.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221210161124.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-Hu1qBBQ6vojiPFPqwdfYlzAM77bxjwT1p9pwLD/M1+xBP0pWSjbtPmZwIjtOUlAaB74aQOYr9/w/LUTU0TH8Iw==","shasum":"4f33ab0b78654d71ccbc878935c220930aca9fb4","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221210161124.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBt9hzS0NuRwCiPchupEaEj0Qo0eOYzoQuJUbRiKFIZ5AiEAtGpcvb9OOPxAUnlINmqB6u4AbEiARnFFEC3PM+vh4zA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlK+yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+lRAAhuzkVJ9W3SdM9FxpHrN+OrgfKsuyj96eq6Wq7w6Vh8E1UwZr\r\nJQUIWrBystbMr1B1t4NEpamUShbFoU3bfUfEMGENEDkeorxBzRhCryAtvird\r\nA6OaKLLiUWiz1QHvt4RE6Gd8fY+tYuXPmVmejHPnjjvnRKyCwcdCLr3+cpke\r\nf6Q1moE1FxLjekhdpa41ex7CO40gZv4OuRdrbDskVrtu8irgHAf2JaUbN0a9\r\nyoQ0BOPCmvQZ/rB48bkK326P1XkYwJYO9uxaEB6FjaCD5HtnC8w6p/rgJv1g\r\nWJ+4L1e1Xb7dq74orbeOmglPkiGHPCEhDkFCQ+THa1pxxQoyQ1OMY18D87Dp\r\njQPDXAT3HuXjUrmgppFXPP9Vsc+aQUx5PnbrsucHy76svch+v75U1iOeXR5Q\r\n8/ArTQZcpGvmw4fK0+ziNwFDF7ilBs4y5yTzshVtTq7m1JuQEEeqK0ylnw1/\r\nWD8VQC7CgB/1w/cl81g5yM0rlCbGtzOdsTipc4jYvplJLIlaarcao/HM+Nxr\r\nEJzZZ5JqL/pm00IkGTzcRHgz3SmJN04Ns7fejs5LndrXZ/gi8Mug+vd6FM9X\r\np/uUrQbfNa3JAkxWsBEd+jgA6DRie9HtOdeLsxoBkhKgZ9xyn7y0HdSo3AF7\r\nYa0yZKM6qQDJiHxSqJ8Tupvj4h+JGSMSIVg=\r\n=n/HW\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/vue_0.0.0-rc-20221210161124_1670688690596_0.49861079787781537"},"_hasShrinkwrap":false},"0.0.0-rc-20221210220040":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221210220040","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.5","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.0","vitest":"0.25.5","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221210220040","_integrity":"sha512-wy9pAl727ASapvm6UMZAWh8MuUOMIq5+iqR2vd6PudiXtzfGk/Wa5R6NtVdeALu0qWN3dZ7IMwnOuXNZ2mnLzA==","_resolved":"/tmp/3d40f00ab529baa46d6e136144ee0690/polymorphic-factory-vue-0.0.0-rc-20221210220040.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221210220040.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-wy9pAl727ASapvm6UMZAWh8MuUOMIq5+iqR2vd6PudiXtzfGk/Wa5R6NtVdeALu0qWN3dZ7IMwnOuXNZ2mnLzA==","shasum":"339085c0b477115a0c981439be9d5d809e62236b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221210220040.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXNAJkqMjOdkAdTSIJVHnL8hjxk8fqsMx+woqE+LMtJQIhAKqwaUQEmvKRtC0VrAr+4MRVKamuAfWXCxTnUDVW01+e"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlQGNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqVBAAh3mRZtPaa+dwhRdYd5DHEWSUnsSTHkXvGLm2Qpn2SpVMKIe0\r\nAf7r6FWE+74ybMiZNzNBG1JNjor6iYtuTynb5Q+6W06z96DmoWqiyJdwihu9\r\nZkYrkrfdyJJeKM9GoIXSMptUa95vzxnGGE6PKGJyAmtV4XZBrLbtlPg8yiVg\r\nW3HJr6Ai3xAE5eoEIOzAgxMPv9ZkP4A2NjBczLyz3XsmYxOZYfSqMaqw5VzL\r\nTf8EmVmdfO5kAP+e7CsvEJYQBi8RPRTU7WZV1F1vi0Ye5Z+vKWvG6+xg7tGa\r\nHvow1iYRS3cMx45OnKnj/ngdS2TieuQoPpElMuD8S8L78MKFwF3B+HAIyQwR\r\nVx6E4ACya2Wum0zy44zvGsDPoQdU//+5AQJ8BzWJ8pJVEa0ih0aLo+5V32h9\r\no0TSz+zHDBCUI5Q59ygqGVwOwEBLZsGvy8n11Nwz19uOSU1JsJuLC2AZTbFS\r\nKodsfl/GpPObkLBOnXjYpVz/gdelfSnMzj8m1A8YSCveJNJyFU3urVQkE8AR\r\nOwIq3LiVtGpAwT0+6J0wBu8iMbh/+b1qmbeBDlrNwh6jYCQulnJA8QteNJ0X\r\npeo2aVxRy9BUfkvr1+PzT4kcv9xAWgObDXUBHct/bhkb6ExXQmL5Jl/8BOSI\r\nqzPhA1thIxFq4dywN9nQc02nx7wcyA4QWCE=\r\n=ns32\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/vue_0.0.0-rc-20221210220040_1670709645704_0.12419256631326236"},"_hasShrinkwrap":false},"0.0.0-rc-20221210233717":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221210233717","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.7","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.0","vitest":"0.25.7","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221210233717","_integrity":"sha512-0vX9HRBc8TOMIEZ6Fg00jOi+ljhY3u1nXBB+ppOejHQU40kirmWw4aE0q1YfPR0PNP8WeLaAhn5X5BJksmQapw==","_resolved":"/tmp/314502a1ead41c4235756b042b32c986/polymorphic-factory-vue-0.0.0-rc-20221210233717.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221210233717.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0vX9HRBc8TOMIEZ6Fg00jOi+ljhY3u1nXBB+ppOejHQU40kirmWw4aE0q1YfPR0PNP8WeLaAhn5X5BJksmQapw==","shasum":"ef16b7c2f2ba0205050ff9c43883d90227a9f538","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221210233717.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD76Gy3vSi5wRaBEshI3vcoWfCoOaE1nJLa9e4UOQ37EwIgA2VVqnJXrpP9DTZN4I2XZd+HAUytAjYeXKrL10ArG28="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlRgxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwzA/+Itd1Lp/h5dXET7VQLLKjyR64bOu5LaKR9ae3Bkgx2XCmNDS0\r\nVwOm+HdX/Z0VBow4TGbifWJW6v9UJpyKBABSMjBphQJP9iJDNuIEtMEydd4V\r\nNb7tL584iNN9y6Gf969ztt4e5peDq6alr5fP1wnwFRA4wVa0sZXCRpzaWOcP\r\nuK+HNNOEKoc2JihWrTJAN1dl38G2mQKUkkYEroSpVjCFUH+QP6qB8vVNL6cR\r\nCzYM7F64Wsk48sfwWWJsphlzLPM2bxp0LGjpvbhUBfq6XaY3zewBCyLXqxql\r\njndUJ1tNpdYIQRK9Fn/HejucpgrFlkFgaZnb9UwX/CsJc2aO2DE9FVv1+gZU\r\nAcJ80CJjDh5BkSfqyLtWUcBVb47FN5rAc5jW6+zT/j2vxxlxGWsn/r4F1N6v\r\ncboKtTHaBNtEF0MdIq2MPZ0vJdYbdombEHoH6uD4aBEa+GJgk1ZhWk6sXgaL\r\nuA8Z1konSWeAJeiXfkkQuU3RLL0lq5rjx36/SwRvIlRDeo4uky2wkqpyPXaQ\r\nnaMQmQYCS9xRdebc85UlAGst+OMSb76kQwYm1Bu1dbGmGPdJTgUES/zMQHWq\r\nkW82oGpDGetgoCZF+GeGJJR0newoDI4p8qfqL8Duphuvl/jyQKwCJrA6xnRr\r\nxwr0hk3W09Si4BmR3EutlDpfLMQ/KDqDWz8=\r\n=UDJd\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/vue_0.0.0-rc-20221210233717_1670715441781_0.27052603060267777"},"_hasShrinkwrap":false},"0.0.0-rc-20221212162057":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221212162057","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.7","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.0","vitest":"0.25.7","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221212162057","_integrity":"sha512-HkYJYgP17VBJEdLMb2Wg5aWUbG545ZLrfe0EspdwWIb9goh3OFGjELOCrQGUFnFZo5vd7S+ooWF/DEhVKc96aw==","_resolved":"/tmp/41a022755f56d36ddd438f6c5fdc89d6/polymorphic-factory-vue-0.0.0-rc-20221212162057.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221212162057.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-HkYJYgP17VBJEdLMb2Wg5aWUbG545ZLrfe0EspdwWIb9goh3OFGjELOCrQGUFnFZo5vd7S+ooWF/DEhVKc96aw==","shasum":"8bcecac7afe69941eacc1db87b78254b54ca1bcc","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221212162057.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLY6iw7RiK4I0xab77UEB3QSf84JqBLIdeWX1qbVAVXwIhAKIsX0RRZ4ZEERcHBFm7HQQWDMfw2xN4xQYk/m43KmvI"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1TvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmuQ/7B3m1izqVtJEXAWhgoZkKJl5i8eIXU21XQJfAd7SxegRxQn57\r\nWuugbU3t/wzBvSDPOtLybGg/HQ5shNhe2vhdpQbcj3C8OFJvvHyrsGIg+TmA\r\nWlffbUm7w61gS7LCoUmKcBRbDQGGA3DYxX7E6SOdiDfPFg4MTCPtcy/u5qBS\r\nIQMHGOBkXtdhqnXlrw/KpoH6Hs4xMu8Ov0rDKZXwu8ZdPGaHQnUGwF+uTbEx\r\nanGKnEAFxJOzINlGgjnt40wy+hNmhRr4nowhe3LsIBPem8CKuxA/tKzY3tg3\r\nWq6NpKjLT+ifl16kjpyeHAF0De0XVf8cGC0kIgvS9D2a/p32DWcdHZgqCoYr\r\n/irUz9eNLh6dffUUlk+FX73Lzt58hkpIDOY3ssN/zoLz9A+g+T+B9TrKJWY4\r\nlrOHNvDviR9pzNSrmSgEQLPS53FfReGxXykCIid9Q2utLOlf1iKYrfPOCraA\r\n1QOCQZElGUlTTxQ8yKs9cJRId8q+bXcHJLkdb6bRR7MGhYX3vI2Q0Ck4GAAP\r\nNbAfWIwefgJ6lyhr3GsQhlSTLbyvP+/0RLHyC7YEMvRM/+bMh3a1ZxZheagc\r\nKVnKX4ddDXSHxvn+dlmN/490H9RVz0BoTKxFLMgmu8zYMsf3NdxLu1p0x86v\r\njaPebAIDGdozV3mMOIwLoa/F9bpA/6WuTwA=\r\n=RMlS\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/vue_0.0.0-rc-20221212162057_1670862062997_0.49882056883580317"},"_hasShrinkwrap":false},"0.0.0-rc-20221212230352":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221212230352","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.7","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.0","vitest":"0.25.7","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221212230352","_integrity":"sha512-xo5PXXXxP3S64HZLi7dMQxzmeiLIPYJjpgXXcyRR6NtpgIxsr8IH7qTlv7wtQlTQNKNirKRtQTxj1/+cgFU1mA==","_resolved":"/tmp/0dc82b013261192cd3c7104d3c220045/polymorphic-factory-vue-0.0.0-rc-20221212230352.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221212230352.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-xo5PXXXxP3S64HZLi7dMQxzmeiLIPYJjpgXXcyRR6NtpgIxsr8IH7qTlv7wtQlTQNKNirKRtQTxj1/+cgFU1mA==","shasum":"79babe045299052eb358ee7e3c8602d2799da0aa","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221212230352.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClTwsyw1vsAWa7oSVoDhgyyNMyXgeWSz+V5Q40jD6UTAIhAOH2PgY6j2T3ap4R7k2c4KhdB+Fq+rcwaT5RjYMN/QGg"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl7NdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKBw/+Nt317VloIkUxP78W8GDimlal9fL3Vhem/GTCHCNlOq5/z9pY\r\nURbXaf9Hxl5rVbBvUhUPRquShVyIs+vmaSyiJBINiDqVqWr9J9LtiMZAjWuR\r\n7DFCyXKc2wGLrPGBDak5s9Wq9V4h9mqfUPvD118cgkDUvNoL3+mtO5EbpSl4\r\nUExW/fF1HM7V6g4vu5DNAok6FiZjKpPkvzOaUxJqm5ApIg44U2HXQbt27/V7\r\ncm0tsMIR6HMtGAih9lv9D8q/+Za7xwf3gD8+eXWkDd36dsTB050JPjsRNoTT\r\nqHgC5cYnrrYaMomxXb8YUpwCULMOPWkWRucZY2/+0ZuGNH06LKCpKw9wDcKo\r\n1QwR3HxKTEmEnVvyFDMSnWx05gaW+q5amhDj5pu8q8x02oW4LeeLzwVoC/P2\r\n0yKt6f9nQmaA5qdSSJv5Q7lZzxvrFlTKtIBVBHHHrs/g8wK44oqZeWc1d6Ni\r\nnHw1xqNe0TZvaujbpHpgz3d4/F1BgYiRSJtbtV12zRkyJyxf2Pvfrjlb6399\r\n7NmPoGJAwbpeYxN5ovcCeB0DH4HVb6vrUPIFA0RSqEtIIm3ctwdy9QhLOwHP\r\nSSmuxL391qoyxE8hIi9zTHLrP/O9RZ6WR9H/+Ddre50AacLhnNwGokVBOoh1\r\nFcAegbXiKLi2VayvBLfxW/j+Z0z5CzmyWBo=\r\n=AggQ\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/vue_0.0.0-rc-20221212230352_1670886237527_0.2941025635201482"},"_hasShrinkwrap":false},"0.0.0-rc-20221213020102":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221213020102","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.7","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.7","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221213020102","_integrity":"sha512-qFESJrZjuSTcMnhwGTNXhtgIRflJrIOsQMqGNyoCjXd+yC8UOLTqiqXJ646ti0oZfOQr6Mx2AcJZC5x0//kEJg==","_resolved":"/tmp/875df076538fdb8da9fac3cfc9b6f363/polymorphic-factory-vue-0.0.0-rc-20221213020102.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221213020102.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qFESJrZjuSTcMnhwGTNXhtgIRflJrIOsQMqGNyoCjXd+yC8UOLTqiqXJ646ti0oZfOQr6Mx2AcJZC5x0//kEJg==","shasum":"057dbf5a93640f65a8a01dec9065f75dc2286f60","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221213020102.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIxhABsDJ2EuuhyruZ3xj99Em6PjVXKXISo2623yx8BAiA1anWbKyZXDCNj10DZ7vxT2NHal5QEWuutW+o2vXMwNQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl9zmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdUQ//efmq1rvN0kJQFsF+vV9ZSU8djE8B+ehnE32B1yTtes286hl4\r\nkj3wIM75JqgtGMjKXSu5HXZAjYFsIcsIHBkivUDvb5SSQcVP6A0wcvbzXj3o\r\nbngclc6wydfNcGSEnWixHRJW8pda//MViYf53MqCIQjW8hxbHvJsGnzGPNfQ\r\nsWVL6UXZi/wXVxuGIDz8B+Z5x7czFSq+PnM7iViDf9+Ismj7cyd7hvnhj0Vm\r\nfQjHe1NqT6p3coY4VxDSLE2TFioUbYvldAdMDmcldJVoPSU54BPRW3mQoFHB\r\nApHSLOGTH16MNy8ORz7FSm6PHEVwM2vjTkBsjLIfMeWGdf7o0sAar54wK5S2\r\nNakljmzTGngwUAr2R44j1EhVR7+vlPxx5ZGpIOYuBpoWurZCzr7TBOfAoWnG\r\nJxaPRTgqKiBYlYvJwS9iwEJ5jzP3+CHPm38XCxjSotajLhxlm57NBIJkWnyn\r\npx8ISuk2zLhGQidNoO8P1is6lhlmuGiEagKMjDbHWMENWREO5kfto6DGifRG\r\nf25VVIGwyC8dotTPKzKyBAexRE7i4H33T75fpsAR0j6dlS86OOA9ZGEngHU+\r\nXAuJIvnRhNu39r7MhybitOTwwAEDiFRKic/uCIHRaxP+VP3cDgmseVYVhytD\r\nnwh9zTEaDkfdJGaDq1eZaM4sJmrz2I1Q7d4=\r\n=20G8\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/vue_0.0.0-rc-20221213020102_1670896869850_0.41047694936125745"},"_hasShrinkwrap":false},"0.0.0-rc-20221213083838":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221213083838","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.7","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.7","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221213083838","_integrity":"sha512-TirLkJxbCXhqGi3UeBoERYmJ2NORvM8jbHMXQyDsgFp+/R85vc3Hi3OQJOdrojouTbzyZOZthYRThQ8YTzQMFA==","_resolved":"/tmp/6c8a2a4d9ca39c2e4d806df900e77787/polymorphic-factory-vue-0.0.0-rc-20221213083838.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221213083838.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-TirLkJxbCXhqGi3UeBoERYmJ2NORvM8jbHMXQyDsgFp+/R85vc3Hi3OQJOdrojouTbzyZOZthYRThQ8YTzQMFA==","shasum":"ad18bdaf3db66f5bcd8cad8dd51243546540cb39","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221213083838.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwxbGKwprFjXrh+oVS5iPV6jNOIZhsh9xirVbTUn/8oAiBVsfu71EYzE+ItnlfSddN7pjh2bSK8GQD262CVVkDU/Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmDoVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc/w/9FIUNhNffFqngwA2i824ooJg8NrLiylJVVVCIuO0ah/N7aQCD\r\nDIlfBIYC1YKuHaCzSFN7p7nCAqIw5A8x09OQBXY5WcKSKx53t8j+8uNKs1ju\r\nmq5PhVV4AJruPnP7fp+r3HYSIpHbIUOwUquCWpGlcZLUCIK3acDzHexH4arC\r\ng0RrPGMCso1y6gYrCXNI19UQ6qLVxCDO3xwyYF7bq6RqrIezA452psQfbnrF\r\nbJA5MZGqVTLnpnBaXyKNfAhhyapS+Q8e8YaBMIjcKgz+iRjkMC2JyHGH0UPE\r\nA61fOgUzXRu47p1VlfzgELILypnW38Y/knbrsKTYe2W8On9zmWIIG7Lf0kBy\r\ncmzSYqg/kkPjk/czWRxe5Tf5sheH1E643F3ZZD/Ff2pqekQBr8/V/qbjB2Mt\r\nG3w0bTOp8GfTAkbsvWsGVBBRXQ7xdiDqoswKiFnMAhKOnZlQW/nAMoIYhqa+\r\nNqo4+YptHishLsL6tC5/HtMbEQQPmvK9RkjTpQf/XdgctbDq4K9mSkqW4I49\r\nWBYzAh4AuhVmXQV8QXZkLXscrpXbMKoo4iy+ET5rNVwLZjiymhIMyEjWjtv0\r\n77CQ+lfAe5HD5XBRILYre+i9T8fkWa3j3ddyXYm4M7pZTFfDLMj7Wp0HbjPM\r\n0oQYTgdNh52RMsWSO89JNI864g1BcokIqWE=\r\n=6Gs5\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/vue_0.0.0-rc-20221213083838_1670920724819_0.14186540213475984"},"_hasShrinkwrap":false},"0.0.0-rc-20221213112456":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221213112456","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.7","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.7","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221213112456","_integrity":"sha512-mbNcwjmKIIqqF2jE+YPrrfaLeZme2rGWilwyY//jKyzTC7Tqn4ZBzirH0NbPRje7xAM5rBYB0kT/4S5Zll48HA==","_resolved":"/tmp/d5e239f9f57e619f4c20fc941a2aef87/polymorphic-factory-vue-0.0.0-rc-20221213112456.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221213112456.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mbNcwjmKIIqqF2jE+YPrrfaLeZme2rGWilwyY//jKyzTC7Tqn4ZBzirH0NbPRje7xAM5rBYB0kT/4S5Zll48HA==","shasum":"845a3ee2a9a300c9ad760059c3d58f5a46b2534f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221213112456.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwZbhOhdBxewSDGn4Ogw3Sss2v66UOg5ZPk4rZmXzmngIhAP2BmX3SvQ/Zar3XMTEvv1tFf+hDETgRO21xzDpczUcN"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmGENACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryDg/+Pk3weB94pICpgINuy54SLWOY2CQrmK0JG+UOmaNcu4+t6NU2\r\nHJSDwcOnwo751bc5fpmFbxNrmgWUBVKD43itQU9+J1+n8f4c1P3bQIxJdaNH\r\nUoL7Wa2SK+u02QJZb7PpcmyxOVysCNwK5vVJIHLH5dGKkxte7dljM0twbO8n\r\nUYO0isqi1O8NU+cknik3uhsiRo863nh5+fmQ57d6eU/KTWs/twj0JgBc4Nit\r\nSajJiFhQ48Umf99jpb7fYHyO0EYLpKZg0dqJY5kph0s/11VbBUv1wZhN6S8a\r\nwHkuDeH7f7dSejhDQoELaBQVoMsuwLOzSIxhQ3dGpVxyzL7tKEpiyxroBTXz\r\nfkf1TW2o6glhmoQW5pMNbUesKP1GwHxUu/WTo9ZQ4/RIiH+V4wn2ZJ8B6ooA\r\nENT2QZrf7xZ5EV8XRWKH+uaODpgzTI0dlhd5Fr7HShBsimiv6lTTVe/TfQUg\r\ny3fJovdHogmscfIUtUzlUusKlEzqY9c63x6mR/wE1dMdHjCXccdXvUEaNUh8\r\n5jvfaF6cAHCickk3tTpfB+5JPT5YIY6KKHEXdIoQcWl5RriO1wyVpVcclvA7\r\nFOs7HPNaDXDn7l4VWD+OynxKYgceXhjj6WeFzMVO/I5DcT9yi0TYIrdC7ohV\r\nSzbABEmY8yqb+nu0xFEWQ60bml+qJyg4vvM=\r\n=nHK4\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/vue_0.0.0-rc-20221213112456_1670930701521_0.2412786981170678"},"_hasShrinkwrap":false},"0.0.0-rc-20221213115222":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221213115222","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221213115222","_integrity":"sha512-EqlEixkCkx+SGC11VaF/kKOWxtC7nBzgjzxI1QICNkpsp8IR9SHp8ZeFqNlN39GqjLKw563QHb6EI8GnpgG6yQ==","_resolved":"/tmp/743a0d3859afcee455c87ee8be889fc9/polymorphic-factory-vue-0.0.0-rc-20221213115222.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221213115222.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-EqlEixkCkx+SGC11VaF/kKOWxtC7nBzgjzxI1QICNkpsp8IR9SHp8ZeFqNlN39GqjLKw563QHb6EI8GnpgG6yQ==","shasum":"c42012dfce5303db866f9c8b0303443fd4964be6","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221213115222.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSrz8gCA3ibbAuoo4iA7vWABuyM1DBCk3O9rPc2cN+RAIhAONLC+J+LNsWamtGla/eos4UV1q+Yg5BYT9c/iDnhsww"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmGd7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwIw//Xw4B0BtUq8xH8LdtdD1V+2iWv1RHFxOM9nkaRxNs7kfrElQT\r\nKJ2k/YfbgYKCXagc5/UfUzht3y2NF/61GfU/immK/d0XgI0qOrYAyNbkI+k1\r\n3NbRBHlVU31qkCLY5AchtBwMbFkt/6P2dCco7tEuWB8DeswJaugby6BIBdjd\r\nDxRhC0mLwKl/sEPPhmTyPK5o3diHk/1TKGN2a2euVbknApD2KL6dk5KVp/Vo\r\nohuv4trWi+039sCIW2SG0CsaP9QJF6cbMiQJbYX6rEUDiPyjx1WV1aYF7lSg\r\nfg0gH4nyejjB8jXh0MNCn/OVJbmDR9v/7CDcqY9pdfb1mZMkB+lE5GG/BxNW\r\ndjavNKc3df/X56oIsFIf3jDf2MKP0PSrpu3MIseOoJ5uzVlqw4xWyDxww+3f\r\nqU0Q1ef6PIy6PrvJQLitQsIS3d8b5dvbzJRS0XS4S2YuAztgI8TBPlfy/COw\r\nPGMRHxLyff0uXLhwmd961VyD9C/f24AbOh/9deK2XVFWI3O3USxI2pJWWBpQ\r\nmrXzRXWs+YKZuGHronI6ZEUg/VSYzn4Od2i1Qg3lgJ9YcuQqIWKoqmKnSBte\r\nNWItVTNK3QT5d0/NoYQk1OkK35jR4dKOrV1tjG5dlJrBiuTK5Penb+PO3of1\r\nm3D5fv0qThLVMs1fM++kJQAaVOsjgBSMElA=\r\n=0Lev\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/vue_0.0.0-rc-20221213115222_1670932347681_0.9068811762892064"},"_hasShrinkwrap":false},"0.0.0-rc-20221213233147":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221213233147","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221213233147","_integrity":"sha512-4SIKEhjRwXrBcjHYbwHZ5Jv+OBg8oFbu91TtfTmoxyAqxWJL7fZQrQQ9WrBBpWwmseHldkKpnvZpfIoe20WpNA==","_resolved":"/tmp/dc8597dd603aaa1c12eb211005cf3fb5/polymorphic-factory-vue-0.0.0-rc-20221213233147.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221213233147.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-4SIKEhjRwXrBcjHYbwHZ5Jv+OBg8oFbu91TtfTmoxyAqxWJL7fZQrQQ9WrBBpWwmseHldkKpnvZpfIoe20WpNA==","shasum":"22224563d77f206cbc0ca385c46d8fc3c1b21564","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221213233147.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqc9jJg7uOkCZeD6JDmcyJUV5lnRhgCndi0u+u9JcCtgIgYg9pP03vwwLVdickdXyDwZKk/UbbScuOxE5lCxf3pSc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmQtoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcaQ/+NeBrdDiBaE2pUbT35QH8bkcUANKI9RH5of35HvXQ1NewVo0D\r\n+DEIq8p1j6yyTa0NFRpbtbB8bI+8CFTl0N7YTg81yfpdfH+mMHegjLo9h3RC\r\nqD7MqCK6eBnIBXgYeCPjVTYgQgfOazT2WZWeBRty9oTr8vclQThjrU59LqEV\r\nNQmTrA9X5Q79rBtskv22Sld11JyMedrda2QioHPkghg+ABN7vGPeHdV/TOY2\r\nbOP1hPMawZHHSqHyJTSQUqO4o7b2AG5BMHGksFMe2wFZYtwNOq2m2PpGDtDH\r\nBf7zFBrV5TbhDsWmYp0XDOR+rO3A1hMf0DwMTpq2IxTr5EPR7vkYbNZ+mKp1\r\nA2xSeoR1pZI/sQZvXaDaqLGTcj+k4783W4CdnImcOjqy4lJhAS1ckNyEhgci\r\n5VjTaFN71q4I38YPipFMw0CxDr2i+c2hcESmP+TOCOoGmj4msqHl8ta3vl2m\r\nmAJ+ayJDcmy9cK0hR3WTqH1bN0rRuqyKLIYV9+nEBaKqnNsYKbA+IGxx2etQ\r\n9hHnOyjuqx9aLhaxWqPw1wQ6j7hfyQGvFRPGmSnBDqhj+vgM/QtbfvTONhZP\r\nxZWLoi6ssJ5z+u05flnSH8XFOptYqdXRqYPV7tYaxewnN9zJDalRXblsEddD\r\nlBwJ3OL6DwU+jwUl2/Q72PVTMistfQ3nwEw=\r\n=26m4\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/vue_0.0.0-rc-20221213233147_1670974312398_0.682782464620153"},"_hasShrinkwrap":false},"0.0.0-rc-20221214015848":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221214015848","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221214015848","_integrity":"sha512-tEHAqEwDV1F0sIsy2EvMmdBlRT4Mc1UJGJpW/hqqwgxf4ctNRdnCiNh/a2znGhqM+Xm2bIjl1ubAji02+pv9PQ==","_resolved":"/tmp/4526b66150a08241d12663965d7aa8b4/polymorphic-factory-vue-0.0.0-rc-20221214015848.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221214015848.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-tEHAqEwDV1F0sIsy2EvMmdBlRT4Mc1UJGJpW/hqqwgxf4ctNRdnCiNh/a2znGhqM+Xm2bIjl1ubAji02+pv9PQ==","shasum":"27740ffeb97f44b62a69a3143628f7e6fe620b19","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221214015848.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZU9WZvg2D23I874Wb8pH5IVKDBADoao6K5nJxny6joAiEA3B3IPINiits1PZuBpZ+/i6EhRlx4nISjDu4z2rtxTQo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmS3eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpd5A/9H+YmSuKpaKxKmhkzWJKYTbU1VVyxQOqUlXvGA4Z6EG+TfAsU\r\nunDxb0OlYfs/8H4dTYh1Y/k/Ru1gRzA4xwcC+15GKSVlF6bUMURanUermi0c\r\nMml53qhRYmmvSuW6VpmwtrxnRm/3FvoHdoxK+cTINpIVHHK2AHTbQcgH7Muu\r\nkI7MegOM+tDnmWeMbOwC5JTtAqxfnwUPPMjjfWZSSHt1ozM9fyIIzE+3JFsP\r\n7XWH5dFlYqbIRhbjOrKS2vt92D8FUspcXDYvhREwQEu4vXh5zRhIqVDab7HQ\r\nNbasjGScrgaOqccgqCq0Fb8mTH9GoXAC9eR4Vg1biFyZK7GNA1H39/IgHSWZ\r\nqMG4wZqIVmRBoBJ49c5dIlPf1EcicPWkESowzDAnlv4+TVgjo2pisySAQqDb\r\nuFk1F5+2e7fTmMQ8aSEEeGDMcVuaZkQr3QmO1nSZQv0jtVU3FfhuX9xQu9Sj\r\nfcVujrdvPkIAV3lywwUpO5GMw22zoKE/GLrgaZNB30D0iUmiIvWjlf+9jX+/\r\nJtTpsN8sE9LnIPASiL+vmasfAz19fvE3FbEHou54jXxf9ICZZqtOc1Tqxp8F\r\nZP2DVFcIf8BNIiFSertftmhmA2ciKMKvIup/R2BV0pXN1h1QU3GQAC/ES2b3\r\nvAovEeyofHLC1ah4OaOvSjLqQt10Reb+coY=\r\n=P9bh\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/vue_0.0.0-rc-20221214015848_1670983134720_0.05175787106600516"},"_hasShrinkwrap":false},"0.0.0-rc-20221214083134":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221214083134","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221214083134","_integrity":"sha512-JzJquCTGzjdDLW+Y+mHKVHX0nRqQC23sCBLOkTo7M5yyqePVrtYeNr073upR2L1cwQ6KQMZHCTkJI+MNcbQzhA==","_resolved":"/tmp/8be937bf8ede38537456af3e8322680e/polymorphic-factory-vue-0.0.0-rc-20221214083134.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221214083134.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-JzJquCTGzjdDLW+Y+mHKVHX0nRqQC23sCBLOkTo7M5yyqePVrtYeNr073upR2L1cwQ6KQMZHCTkJI+MNcbQzhA==","shasum":"f04b4c92cea02a5a1b237e0119d593470220cf4f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221214083134.tgz","fileCount":6,"unpackedSize":16148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzgn5G4/S/Brq+5RkTl1/PWt+KXR7khFGa7kBuX/yDbQIhAKoxp1vPClowy/x777txDg2av/QnrKtiyh223ARMwrvr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmYnuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvBQ//bq3taFyA2ceW5X+aN31X+PDTWSvYmzqR4WEM/xSNmuTOQIiM\r\nRT+aBQdZHBWXgoa7+g4qFTO+qRLUtZ3KWj2zuQ8/whp5vjj1fS6Ww2SWy7Sm\r\nSjEX5OdMTClfse8sBR5Fl+KR5Nhzth8E6LS/1HgPQA/bBe42pb39/YLGfsLp\r\no0uuhxsHF3tm+fxhp/Fj/xzmVeRwqZrlF0+LAgHIzm68Yw2JEszcB2VkQqG4\r\n9G+6wubstx3HTMwmAclPYcT4D+o6T4nUkLD6FB65u9qAWjJnaOYUlZZPsXvT\r\n8oiAuwMVJi9d366v5RuAtfIkRkAUBhGoKOGpyQyBbrgbjeM2TB4LrJOROHhD\r\n0n6WlT7ez4CEwxSNTuT09RqsEQE89B/tAO/vfc6LIb736IgvjIp31VzKthdG\r\nkPBZSbB5kCzbXEa+aqx+VATp044qMxGQhv6PQs1cSi/DDgzp+ufOZJkXwYFx\r\n4p0nHz1/meFghCQpEmBjwO8E4lzf3XxOqYMMNC2rVy1dvqAo4G+r8iKhyy/7\r\neRIy8LeesHwRVQECC17Y9MEGSsOb/6KEOdw41OmAV6pbr3Kcdosumxy9shb/\r\nMGf3GpJqtYxCZan0pcGOL/f/Xsiv1t2YuL4BmgiNOPSeKUQnpoQ+I8wV+wvE\r\nwUxn+lxMeezcTdHgN6JeUqj8qGxDjULZpJU=\r\n=mWkY\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/vue_0.0.0-rc-20221214083134_1671006701924_0.6511112753633661"},"_hasShrinkwrap":false},"0.0.0-rc-20221214172031":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221214172031","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221214172031","_integrity":"sha512-GAADwChYJ0IlA1pFIyFyHRwVRTAZCdBgXNKdQUFjBp4utkcZUztfTQe97nUBBhUJjlFtHfxrWpqCSQYq+7eTzw==","_resolved":"/tmp/e3b54c69a46bb6de0cf8d3f509dfaef5/polymorphic-factory-vue-0.0.0-rc-20221214172031.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221214172031.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-GAADwChYJ0IlA1pFIyFyHRwVRTAZCdBgXNKdQUFjBp4utkcZUztfTQe97nUBBhUJjlFtHfxrWpqCSQYq+7eTzw==","shasum":"e060ab60173174466dc8afa93925d424dfbda11b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221214172031.tgz","fileCount":6,"unpackedSize":16177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICeGIBZ+eGxe1utjRb4qhAwukM6cjddbK3UyzDoipmYtAiBvGB+4Uwdd5+8jlIXfBa3h/5UICdrKp67bhVCGrqaCEg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgXmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXXQ//Yb5dhZzZT1H6i0QnwA3s3trUolOQc+XBdB3cUGjRVB2wgbNQ\r\n/9bcwwrNftOPOsGeNHpA3AYoIJgh0YXaizRHQGf8NpJeQWTdgf7W+Ta7/hry\r\nBGwof+RJPdZtvRTsT4rC5yavkn3wY5P2YZ8DUXm1XCXcetyUC65VmvjUx8zT\r\nYHc5i5tjiyzkdJCIfGhddD4OyxMWr5jmShp2dlQKXD29Xg0WPEvBSMegtaHa\r\n4rjtTR+SWkkbTl+EubyOjWWr4j9uMl4BwvU6cG0Kp3673Eel5FQ1hBEBLZyM\r\nNIYHfYMuvtRtm8o0uwhuLoMBF+Et+tVkTAVWNSDX6rwx4UyDyOk1qO0Bkc8x\r\n29jMCxc+Sioz/RuVEAsnrC5bhQa/+eD+9tc0mmdA9xqwJNoefSvccBYjLZb9\r\ns4dIKmeLmNVoE1EWcb3n71LuOz41/jJw5UometVy88fSnFWG2UkCX/x9Gj+C\r\nfsVLMF/OL81d5qc7hY5p7SaPc6adGV+k8HBxCoW0raeCV8T9KkgDbFdKvAZr\r\nbHriW8zRTbdgXGJswyO9ZpoexZt+5fqF5FcwSjDbSbITTefA2j/BEPB+M8r9\r\ndn4sWWOHwXo+/gtScZ02Vv2mtzp34ozEA6FI7XLHOcvmmv/hWOcazMd4TIiZ\r\nM/1wJ4qiAFHGQkNbXHAdSVEGRpLoggzgzzs=\r\n=AlX7\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/vue_0.0.0-rc-20221214172031_1671038438145_0.6173245775519596"},"_hasShrinkwrap":false},"0.0.0-rc-20221214172411":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221214172411","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221214172411","_integrity":"sha512-15V0Bx9L1oyRwwjg0FlMF+xTXBBJvd7ZWwRibJgvFZQiLp2gLNlUALA1zXR7T4RG42qKlbwZSBGw4oaU4rZbEA==","_resolved":"/tmp/f6535d9498fb50c7431029c2d48ff197/polymorphic-factory-vue-0.0.0-rc-20221214172411.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221214172411.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-15V0Bx9L1oyRwwjg0FlMF+xTXBBJvd7ZWwRibJgvFZQiLp2gLNlUALA1zXR7T4RG42qKlbwZSBGw4oaU4rZbEA==","shasum":"d1621718ab2bfbdceb29c31cd776f563b41b1a5f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221214172411.tgz","fileCount":6,"unpackedSize":16170,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdXTZKbV+8bC9CTtaYag4pz9FHiY9ZZpRDeU6elMGpAgIgL9sryHA0Uo2OYcyuveubXI2aIwL8xUqviIoDKpM0qts="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgbBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlBA/9HKwm0ifC4PXsiwtkd/+3DE+ugqrP4RxEFyVZW1Gk4i7ICYQe\r\nGOXTjgmJ4nUmbvjHy2XO2h2rvGZkc8x7Tu3M+N7TEVrioexaahcRo10oqI5O\r\nRM05cH3owe4VoAu342E4NQvcgf/0Hy2TMWAwdprrCQEil3MmJ4bf/0sgu0UG\r\neimUXsi32gHugbEV++9r6uN4wXVLpggsD5okpCztmbnGWdkLBZ2e7n+yuBR9\r\nWLjhCTfoogrd6+QiT4KN37wRkTmNJJ2ZkpQajhBv1y6EU2ecCM0/m6EDsSqT\r\nfdPdTRHdJZC7wLd7fQZVJYvbZM4Ndgo3PIWTqJsqRcuekcN1A8kQ172qcHNL\r\n9rGqOihKycX4WmkbCpffQZINDXSwc3Y9O5ChCCfbBMdE5qD/6dVww/0MitUR\r\nU5KN1Q4G/m6PU5fLkGQLQsu/gSOtZ+3guTYuMbAw2+4aiwJ1gvKtO4TZQKTT\r\nBrIa+wCiAZjdcq8qh2iULhsPuLQ53CKc85737BCcBrUjAS/8oG8gIg59rg0u\r\nC2N7gpxAQl43Pp90CLDHLmnFWnv7pRtaF+ngSEDo8jTsIhUBbfdA7iGaw5Pq\r\ngyp+lUQ3wKYK6DChRhXyv6Eo4gWU8wwVCjV/L6wALWwmUQiHB9a0Ef0kdW6p\r\nrOQYdjlJdnuFZlOCJZIh8F8Mk1Af2IwI2DM=\r\n=ymi4\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/vue_0.0.0-rc-20221214172411_1671038657395_0.21293994728078158"},"_hasShrinkwrap":false},"0.1.0":{"name":"@polymorphic-factory/vue","version":"0.1.0","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.25.8","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.3","vite":"4.0.1","vitest":"0.25.8","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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"},"description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.1.0","_integrity":"sha512-eX9yp6XO/zVUc/xpvz2nvgd7ekGiP2uykFjxlaK5GY/W6MaiCjWSJH0POuaTT833FFKQIy5//LbKxkt+FGSTCA==","_resolved":"/tmp/46ac952363dc7565239f3c6ab9cd84a2/polymorphic-factory-vue-0.1.0.tgz","_from":"file:polymorphic-factory-vue-0.1.0.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-eX9yp6XO/zVUc/xpvz2nvgd7ekGiP2uykFjxlaK5GY/W6MaiCjWSJH0POuaTT833FFKQIy5//LbKxkt+FGSTCA==","shasum":"0d23a4b7c3fab7501e5d8c7c449b11d9c10f004d","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.1.0.tgz","fileCount":6,"unpackedSize":16152,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1EOndUbLb6RbXcB6xva2g83b0cdQGNpEQevK0jk0tMAiBe4o01pbiLV5ep4xV5mAgUnmVEuBeL+gILv/d/6VqD9g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmg+RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrznA/+MBuqLoXP8xorhaZm/EKpkJzY/qjpsHjPnCP+KhWL6bIOT1pJ\r\nGAN+Fjvoc1xJPQV8Ui5BU2nIZhWtncDgJD/DiWGjjlunSSxgCdNvQ/gyf5qU\r\nEVSixmYWOrAb5IhuRp0Nb9vsqLxdIQfyXzeJBM0SWODcKncYtNcQ8VVsYT+8\r\n87CtrOP4U6fHOiE3EIkDukSRT5XwSVUX31PcWp46dve5rrw8I/3grwpMkQCR\r\nQA6js6TpRaTrc8G127vF0bokmoZN94Rk6n3NTwDUvYQ6b3yhv9Mu3ZgMho5J\r\n2VF1s1rwcMt2ge8Gq2Le2qBzjj5y1M9wIY3LS6fZJD9gru3/CFnHHke/gE4v\r\nNC5T87BFypkVYAaQB4pvnW7mUpS1eMDTq5vouvWicmSeRklfyGucsbz/XrNI\r\nmnRPArkvIaY5mbZxbV71JbiLfWVwFgttNUidXDw7ZaNJS+WK8mMs+J23A8ow\r\nLD278VY6Iuy0WeiKq/p2korKC+3aqTHIb2UHQx1XSobJPm3X7JScFVwXZnoA\r\n8x1PhqFrYbl4DpFJ9x8JkBYkvOoDzJ11rBh0bwFtgOLHCZKzLl6V6eEClbCT\r\nraDZvqwQRlLe/GOxNARlwzkYu5kgsnfo6NQEpTwpY5IhWVePzJynDOgGFbGr\r\nOX6f5J/EAk8OZJIfi4fkmUilVPTUIeIWkw8=\r\n=OWq5\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/vue_0.1.0_1671040912814_0.9333824105589301"},"_hasShrinkwrap":false},"0.0.0-rc-20221220104301":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221220104301","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.0.0","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.26.0","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.4","vite":"4.0.2","vitest":"0.26.0","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221220104301","_integrity":"sha512-FhV6YHIAWqxwQmzW4MakQZD4vFaGESaFGvwLeBFXup9J/1wBhp2Qd7GlWi1zymCFtbJCc/XNPo2EfPpxl9AZjQ==","_resolved":"/tmp/8a8c6a7be004bbc50668249308a1258c/polymorphic-factory-vue-0.0.0-rc-20221220104301.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221220104301.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-FhV6YHIAWqxwQmzW4MakQZD4vFaGESaFGvwLeBFXup9J/1wBhp2Qd7GlWi1zymCFtbJCc/XNPo2EfPpxl9AZjQ==","shasum":"e8103542c47a37f28fbbbfb3221d57a567d8d48f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221220104301.tgz","fileCount":6,"unpackedSize":19608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJz5Stoqr4uU4d6MHMw51exTsue48kiyhUcVyroD5xEQIhAOm0jfVCeD9aDdeAetknAx2cqNl8+UcZKlWiNpMP8X2f"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoZG6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCUg//fR7TKVVPDiAl/ZIyvAbHrzwWCtMNTt+4b0n3kqWmFvzTfSJ8\r\n0i2QvO7/cn13GErcjqG0v6+QK4mchqYMXlVFbyaDrjukuWFy5m7rQexswR+J\r\nllEEv4WS9dWDz+3ddSDhIRbvDenjN0KraG94dnORA9MrI8wghgvWOrIpeQPC\r\nMS5LYtZ7yMY373HV27twN9SBx7robxtTkpXN2cwBKDA/8y6X9PHtW0jDueJE\r\nwAHup/RCH7fGflnD0ezr8MKYhQT6V9NcXZ0dRv/YsMps1ntv8P4t7cka/Sco\r\nkUtfuRlHChD0FK0ed0aHsC3AaDTw2vBBmnA3vkGX0oaMeNPfGaAL0JjiEK8t\r\n/Bnz/lPx/WIrAUVArK6wOD+rd0WBRdlrCIWOKTk9KgXiJwpkzDSRNXC74TXH\r\nCUS/DaHN0XRHofH6ZYuwAksiN0yLmjyMR29oZiWahaQcGSaDYWQUD9nEoALb\r\nt3wWq7oOJBscbMiK3OQdea1F3/1zexlyIGU7j5LnzK66CkDReOotVJEh0p2U\r\nMyCp/Qb3D1HTgJpGCI7SQxs1vVLvSLBVt+OOlSyg6e5g0MupAwHXlHyvpF65\r\nj+RH1SKarw8XVIYX9Olcz4XgJbXLBKSkIZ9/zmvwZeaO4AnmeS03PCY58QtY\r\n6tC8qUO4Je9qxfIb9svvTVqWqc8ijqFMMiA=\r\n=up0v\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/vue_0.0.0-rc-20221220104301_1671532986168_0.19782924217772857"},"_hasShrinkwrap":false},"0.0.0-rc-20221220113553":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20221220113553","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.0.0","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.26.0","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.4","vite":"4.0.2","vitest":"0.26.1","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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/vue</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/vue\"/>\n  <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20221220113553","_integrity":"sha512-UEB97l2/Co0hFrW9AMlo5LEs5mk1qeXGce0h2dCzSIKuFqwfSiLGl/doACAZtxyrH7+TR15izelAjd5QJvUhOw==","_resolved":"/tmp/4837bbdc2766377a1ef5af22057cf967/polymorphic-factory-vue-0.0.0-rc-20221220113553.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20221220113553.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-UEB97l2/Co0hFrW9AMlo5LEs5mk1qeXGce0h2dCzSIKuFqwfSiLGl/doACAZtxyrH7+TR15izelAjd5QJvUhOw==","shasum":"be7eda56bd9edbc97d4cf0109f022a856c706962","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20221220113553.tgz","fileCount":6,"unpackedSize":19608,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEm1qQLGO96136lq4U34LOnUmU3AXXsVefent93ka7YnAiB7vRWoxXHLdqWmNBuwyjatY7r7U3x/URsL+IJ3Dfmr5w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoZ4fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBvg/+LVkGc8mz4hFnx/KEm9tPosNbD8bCNcP1Y90RTIVKE5IFk76O\r\nP5vs/1FpSMCeiDZ48gy6Mi91puMX+m4LnWtx9jAKASN5EQHM7wIhz3T6RKDq\r\n+kvDa1ck8W5I9ZUPDVZkBX1edCDbAP/c9jL975Tew2MqjSC0BwG/3F6ElApY\r\nFg+TV5oYwOXdXIN9SJtAVJFRWRmHjE09Bt0fS/M3MInpr5xk6WPNOzzNZn14\r\nUv4WsIZLTG2PrZRF6jQWAwXVa6VwkJ6h/+RXK19z8ewJ2rv44h040YqXPXn4\r\nsNs97/d8MMv1xMu2zDws+nGOITZSkGBMzCCf0tQbrkvk5ugLqdqMvrS89mH/\r\nyPEgqLGeGK7F5DdmSYwe6LWWfgCJttnyFqBOpZg1kbIE0iuCaSR1zxB0iJ00\r\nj+E+4yKqyYlLlg1YFkrs10BLdeqN5Fy3MaeMVM9oZWpkNq8e9L1KI5mTk5GT\r\nooZZIsE9IAQS0KdtsEtjEmTueA9XpyhZRv8Yl4JAlGwDAiUmruAf5q5i99/n\r\n+eN/toV9AHCniAQozbkdCiSUAT/f9jdp+sNMUS6d7kVyZJs9fBcz6wE2sLIY\r\nuyRHUaNtv7wPzCBHRL5mZKoG8pBojKxrdCVN9UdGvknipvbIdRo+cfLbYUHc\r\nGT47uF131wbFAxwx+Xcz7vC7ygWU/5ZUBjk=\r\n=SBxe\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/vue_0.0.0-rc-20221220113553_1671536159339_0.9677664248332072"},"_hasShrinkwrap":false},"0.2.0":{"name":"@polymorphic-factory/vue","version":"0.2.0","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"6.6.1","@types/jsdom":"20.0.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.0.0","@vitejs/plugin-vue-jsx":"3.0.0","@vitest/coverage-c8":"0.26.0","clean-package":"2.2.0","jsdom":"20.0.3","tsup":"6.5.0","typescript":"4.9.4","vite":"4.0.2","vitest":"0.26.1","vue":"3.2.45"},"peerDependencies":{"vue":">=3"},"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"},"description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.2.0","_integrity":"sha512-0MKD0A48lRTl2Os2jnCOjdwJOstcFxdzcXcrhM0ER6gSuRNw7rS06nS0IbjZcFQP+nyrWSBAXhOKiWR47QYnyg==","_resolved":"/tmp/203c79dfe99312040ce6136c8b69594e/polymorphic-factory-vue-0.2.0.tgz","_from":"file:polymorphic-factory-vue-0.2.0.tgz","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0MKD0A48lRTl2Os2jnCOjdwJOstcFxdzcXcrhM0ER6gSuRNw7rS06nS0IbjZcFQP+nyrWSBAXhOKiWR47QYnyg==","shasum":"728dabf5bdaf007faa9e7872bcbe02dcc0dca72e","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.2.0.tgz","fileCount":6,"unpackedSize":19590,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzH2Acn7D5Qhv2EmVr8uiJkjFYUvs5LxIuA6AxST5yoAiB9QkunioSaJ8zopuo/mrutIdmjofnymI/cnHKN7f07xw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoZ5zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNwA/9GcvPf1lwovNMJU1cnpPPAI3TElN63dc/cbwi3QT6Bu3frOuj\r\n8j12lN5VbmpGhac6M396eEeDKXrvK9A64p62yd1axTRx21WKbbZVnbvljzTB\r\n0iAYoUJLzjr0y8RHJToq6p7QlYqSQ/DNMAex7qQJsG88PD6YnH0uPHAfQjoQ\r\nXC406D/66wj6iuFhP03skD4F5/qD8A5lCs/aohf2lZuKFcv8ImWU6kKkhsos\r\n/3tZxICu+Fh9NNhfcucWnBMcMc+9SyX75gXkDKVih0EKnyDvozJeMOXygukY\r\nLkkf8osidjyImCx0V4a5eK7WbKEQPV39qFS8urAo73KMSVn0m6EToOlm7Sh5\r\ncj6IOhniWjlL3CrSLm8NkG8CG+gVcnVyiEhcDSv4kgSjxXjJEH6DKNSc1Z3Q\r\nWx5hBzspM3+aUajgFIHVZJwfyFFJofNHAHpWk/LlG0z0DApuyBsshyZfX70v\r\nlmJN+PIIkBXMkF6NzOhm6+Hkm5/EbbLpL/jgFYqDA14GID3W86dvxWnM4HQq\r\noGylFq/PGFqS3IqhEzSJnDUujEKCHwLhqiuDs8/UMxf99q1fWk8IK9OHb3nq\r\nGYKsF0lgInMpEPHWeeZnmUEKSblLxlPY/hA719ck/+XevUI775739Lg5U/Li\r\nq4ZMmpfWws3G5ZAyOLm3a5XzDhHX7bsBTaA=\r\n=Binp\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/vue_0.2.0_1671536243293_0.745841516054008"},"_hasShrinkwrap":false},"0.0.0-rc-20230425204622":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230425204622","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.0","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.1","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230425204622","_integrity":"sha512-doRKs2uOFbGP5RqGvd1JsDE/qV8C5GPkiUt+2EXMRBJLSHjUHJ7EoU/Y7MXkjV+jebexHi2V1h597lCTVVKRAg==","_resolved":"/tmp/33c5d4e4fc932237c056ab1d1228b261/polymorphic-factory-vue-0.0.0-rc-20230425204622.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230425204622.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-doRKs2uOFbGP5RqGvd1JsDE/qV8C5GPkiUt+2EXMRBJLSHjUHJ7EoU/Y7MXkjV+jebexHi2V1h597lCTVVKRAg==","shasum":"ce0e9e630b03047d7153e33c0fe5e513cd8273da","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230425204622.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnoHH6UrLHPUoSRELsqQ0Cpo07JUqPIxh2bkP5Ls8hcAiEApd/FMd3NUdrYcTfyPsyJRy0D0d4u8Wie2IUqT1mDPZE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSDwjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6PA//dBQmE9/ak2+gV7DxC5f4W5clEHF/hahewY+AbxnxfGPiAlhr\r\n8fVhnzYxgM2V34tp84YetKYWSKlSi06JIntGnJGyv99/8a5HJIdWG4aYufls\r\nsHzbdAGVweIFgCtFHPelVth+SWrACIHVPlmoQT5CDPraMBMbaVpZK/6NXyMQ\r\nQrJKdPFZtiS05OMwXCmd7MpaA0a5mdnpD5c8Y4j3h5U9Wr2vEVHztlEzAwEz\r\nBK3YMHVwGxSMl5n9VWgz159XdTBAPXhUWLZz7+UNjEb0FafUBYjNGnOJjcim\r\nW9x6IpG3MOGBhAPnlmmehUxO8tYR9cejAntF1/QrIMr+VyUGIIBGOQ4pOxx5\r\ny5aYaMFoVU2Dz3PdGVgju0vdzlbongZo0JNRy8ZXuAtWwdKN9AEYx+pIBLeU\r\nh2mgGETKc4ywJ7riHSst42y+3Xn9hJz85GS6T5GDcm70Yt+RFwr7SWzXB6Lz\r\nhm/mlQsMTGuE8h66IpRmrfqN3UjwAi4K90kLi83UyGjsTRoS73gEBVfinUwa\r\nrCXg9Sf8MFMsOFLyR/I+p9/WfFu/HA5XKV1+alPS2NMP0+r9TJ2h7IUgPWY0\r\nuO3oxqJ/ZeqrBrgtgzwYU0jm0J4YRfjMe0wxk99xfliRW15YMukfwJ6uDkwW\r\nIJFXcD8x/4/bX4rCCmjp+au+uyIEazqpTks=\r\n=lVdI\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/vue_0.0.0-rc-20230425204622_1682455587783_0.15622922049860022"},"_hasShrinkwrap":false},"0.0.0-rc-20230426035620":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230426035620","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.0","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.1","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230426035620","_integrity":"sha512-2x8xw5W4ftfQ5wz0ofNsAzoryCpFncMVDAju1/69FlfZjLy2Xe3GEh1LeHy3hyQFYhwQlwi8sY8s0+5jFpXCvw==","_resolved":"/tmp/ad4c6fb4c1346e8d81c3e315f83b95ce/polymorphic-factory-vue-0.0.0-rc-20230426035620.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230426035620.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-2x8xw5W4ftfQ5wz0ofNsAzoryCpFncMVDAju1/69FlfZjLy2Xe3GEh1LeHy3hyQFYhwQlwi8sY8s0+5jFpXCvw==","shasum":"add1edcd59c3fd913d0f2f6a22c47d543d75cf97","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230426035620.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrFE/QXiN+IDEgyGToMJji+nTBpvek/mCnyxWoEzmXFgIgX6JiIUklNu2w9Ajvxgadnsss3rECQj7LLAqlIRcpeNA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSKDpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5jRAAkYnoiaLQL6DygyUbOQExMljTiVFwaQI14adJl5g54/HaZl4V\r\ncOnOYEZxmKdZDA9lU8A8pFQN2x2JIa0OKgRNAj5/MCBdrSAzidxBY0pi8FVJ\r\nnKow5eJB0qLvQFq4u2GQKtuyD4iIBBXNFvZSQPjYDl7d4eVNFK6jm6msWBtc\r\nHIcxIWmPZ3WKYTS86haeQdC7hhqx8Y8FCC+sFysvYQhSaZDQc3ytLzizSVuk\r\nIwU6zNci5sJcKZEAW6zkPnzBllx2soS4wYV7W+e9yhSXwGB8R86j6gOYntDQ\r\noe5nfZiqecerSqazDD4YQa/vc//7f0ndfTqohXGzShJeL1f6toIzJjAOL4sB\r\nhnz2ZTPlTaH56iuO9cev7myDLMNZKeJeYtcLC60gvLrOoG3zsAceQk0UwJ1y\r\nBR+gzD2wEumyzHRbu/Wc6aUd29eKZ1s8R7rXuKPQf6TdYGni4M7yCOcNlktD\r\nHXNKDlJjxlnpfelbGR28Eyr/HE9nvWyXSQDdbPHH3SYH+daMrJTblnD6pl3h\r\n0YYYMQLeM75jruwus3RG4VgHciTWifT/3PZdMfMJ3tBB2z0e9FDi0M7F/RSZ\r\nhs/pju/+zvpZgVkzGPJk3aHUHw8M0Pn6zl7moF5wdlYtArKvllqQojEVhC1o\r\nKX63vqcM8NxNjs0tlOcj+TejzqjlSMi4N1k=\r\n=BZZc\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/vue_0.0.0-rc-20230426035620_1682481385707_0.2997047208907664"},"_hasShrinkwrap":false},"0.0.0-rc-20230426084528":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230426084528","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.0","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.2","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230426084528","_integrity":"sha512-CJ9gFHc68BB4h03d5AZycbaRAiF6m8ODgf98EhEsDKscmeGfKc+cfGIlrUfnr7NHp7xQiR0fflEeJogDjILR1A==","_resolved":"/tmp/5b92f61dfe075d9c2a391c0531af5de2/polymorphic-factory-vue-0.0.0-rc-20230426084528.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230426084528.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-CJ9gFHc68BB4h03d5AZycbaRAiF6m8ODgf98EhEsDKscmeGfKc+cfGIlrUfnr7NHp7xQiR0fflEeJogDjILR1A==","shasum":"a7ecf478cf4f7f48d9dcf95b3fa306b4eee7d130","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230426084528.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAF42jVrK5Nv8O+4Y96tu6M8urYc3tFA5frB+ha+zAnIAiBu9REm4qaem7dAXto1S5I+6h6yMJcb5uUPAXVmtplKQA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSOSuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO6Q/+MBnEaYQslkghH8cU9yk4KFx2O7oE/G+K1bEVKcscCEJv0ib6\r\noVIfXw7cqF9MwxEUFhkSk3g70v/lxjXwU4ysnQ7YMiWeVsjYMW+zu9MyI5VT\r\n8psA/YC6pWVWaCHpn0P8krHwzLLu7NqNqSZ9GHH2zdbyNW8QMG1Fmdy18K3A\r\ncF5J3vlyFjbeIaAmBDwvUa9HGj9U9yIlz2d7t8ItbYe7dMYzi2wbx3csQC1l\r\np7xME1mFWb325kXbv17gMImy0VzELm7lEqB5+Zu9X/ZU5EJxwGdAxsbhZFbY\r\ns6ZtGIxofg5xAP8cDXDRUzbbGXmgGc8KZBjG0ZgPyv3WHor76lD9fbSqLL18\r\nB43EpaUdXRuSA0Kw1uITJiTBLpX9RxR80VpU006Yi5T9LtOwx+OFfmAMR9K7\r\nG3bX1mfL4AyBmfk2uSgoeW0rGG4/hJrorgB/S3EbwSn+gd5+e5vmrQm+VFIR\r\nB1lyMb3CdWS7K9jVWxF1iikQNotIIWHM7vb4+cS+7okoAmkZFRuTAcfI7mgD\r\n0qXvuZXQ+ywePvNpDe8HDGQR1PQHEEuao2WFW65ubrKD29o4OeXK54by1HxM\r\nMQwkLVwysT5G5ArknkzwpemDqPeqMKkDe6K246lanzb0J+niUFTszlDMDJG/\r\n6rSL9l2doqxFGjAZl+dEswYKH5alelaKWqk=\r\n=zHeT\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/vue_0.0.0-rc-20230426084528_1682498733967_0.024177244069093717"},"_hasShrinkwrap":false},"0.0.0-rc-20230426084750":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230426084750","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.2","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230426084750","_integrity":"sha512-deqeRlrD04aucs4M/mkjedr0fTELBIcf2MX9a0E6VfkHelbdkNLZG+XtELTuUlZOv5quBmnI2f82IOL60Xu5/Q==","_resolved":"/tmp/366d495ccad205ce6b1f6d49557a49ea/polymorphic-factory-vue-0.0.0-rc-20230426084750.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230426084750.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-deqeRlrD04aucs4M/mkjedr0fTELBIcf2MX9a0E6VfkHelbdkNLZG+XtELTuUlZOv5quBmnI2f82IOL60Xu5/Q==","shasum":"50aa3375414e59c9bb132c854c3dc0b7cc17dec5","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230426084750.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNO72bS7PRvGXUyg/wo3F3OYe5GZDPyRt99BWELNq0aAiB2fotXHwpNYcj2w94CC887sxecnNCOGJH74T2QCF+auA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSOU7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3gw//RAvMwyNaQqSTKxZQet8S+E1drU0lW1itx3goc63FhI4HFxYP\r\n8jBDUEecs4vIWL/xPKJleq1An+ili8E9z5Bia+ND8VxO61GQz7x0WT3q/r4m\r\ninrdNCs8Fj4SAJojlafuqelb7V3Q7tf3UHACPf9Xjn4ME6mZDwLuqXXQ9C6W\r\nBDRg5abKwILzCVNz12Zyja+bXCegY5v9woAFcEjx9An0tVtI7smUo6675KKU\r\nyzkt0j1YARt6t2oTRlx6gDI+tejJZSG/yv25M5lG8wC8ce1h0Z+Gw1tla5dG\r\nazNAzTHZgJabjsawRiZrXSoVULiTvDN2o/EYZ7V505VLWASOKzOGCM15Rz4G\r\njdjO/8fKUxmdiSf1Wgy6rKMq2fAAnPDJO/C1N4uryjc30FtYAVhF5sSSRawY\r\nsApmTToLsPoyJTBJA6g9jUeNe1f0uKsad8903AWBwg8LjzSf/8Kmwl7BycJK\r\nzC8DLkdWwnUFG1S2XzMWj5ke+lYH69mRLk7ditkm0Sxywu06rKLGAOavXbvh\r\nr5TTWVSS8WZNIIoCzmsxGqHckIG1DNDKuuoVnrjnLAftKrKJ9Gh68r3yystN\r\ndnEk32KAVhC/nKZ3BnG5kgtTNlgH6gorpodlfOcndmpmn8m5m3MjFNjvC75u\r\nxJRezm27EH1jBRYE8H85oRJv0oGy4vlMJYE=\r\n=jrTM\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/vue_0.0.0-rc-20230426084750_1682498875731_0.9937394835145941"},"_hasShrinkwrap":false},"0.0.0-rc-20230426152353":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230426152353","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.2","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230426152353","_integrity":"sha512-Ehq/U+UdpIzQYZCdFdk3oox/JMl+8Jk6bF38URe6Vt8wMZfFsZg/q5JTlR9bUd1LRRA3YOp9S3f/yin9uqkk8A==","_resolved":"/tmp/0d7d52f2cb8abd2a1818ce2bb0fb757c/polymorphic-factory-vue-0.0.0-rc-20230426152353.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230426152353.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Ehq/U+UdpIzQYZCdFdk3oox/JMl+8Jk6bF38URe6Vt8wMZfFsZg/q5JTlR9bUd1LRRA3YOp9S3f/yin9uqkk8A==","shasum":"9fe45730c75044cd7a9d0df7e81cb727d88f22b2","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230426152353.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDEYywJhwBWRdLF6LOxfk7HD1sxe0S1HF2OKj1bT+0pAiAX8o5f6LgFGKvA8uu5530+yaZ6mnQDy4PU2X1YuIdTpA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSUIPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6BA/9EZ57471DO9PUq8fYy1H+YkVK2q6Sy+Qq+MVAZggXygTgMQUc\r\n/QSJ1Q2WdhunD48gjoo5gGm1whHGuIMeDdmuqa5gAxtOz06fR4iC/tmzP5Rs\r\nAnQHiiUV+3E1pE1OFEgpsMvh1WMwiMRMmq7Zv6Zzjhqt11/2UUvrTaVdQhg9\r\n9w4emXZ9f0or6zReGdMJv4UArj53+hmTmFNJl9FRtxvtM8sBb8T+5bQdfe7l\r\n4GEkEr2iXJ5BpPCNUT5LvZ9r8VV/cRgEXsOEbYyfsnb5oYW/CS+NTEYyb194\r\nmu8IlWrh9TqMCbVjhAq0J0Bfhlv347F1Sdm4wvWEGII1UV7XF+ew2xR/JTqg\r\nY19PBq8uo0/7Hs+vnjL4hUdsZtHOxnhNovoMkoHcfzr4iP9J04zb39SUJvA6\r\nQUo5uXyaO3imN0huLCLJANTm4Lv/2jcelBZL6Xa6/oTMKZqUyYGui6iKYnyF\r\nn0n9JIZK7Dhf2x3UG+LhvPSuF7z+A44WLMIdbuxvtcRUq9CoURsPL2qR7oeh\r\nFvX5gWyBzbOblhnEfWhpEAHgPbDx7YfqZ2rfbflIcMdEj6kIaqGe0+/+zdyV\r\nv3O6Bwa/3kkF+BkoVvBr8SdwvU0EwiUMXZGlVwa4NedD4JFbg+2fWxwiybIS\r\nQ1806df9Q+02/sjNxSFjE3B19+loHFpGMqg=\r\n=sPhE\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/vue_0.0.0-rc-20230426152353_1682522639247_0.20498324718910577"},"_hasShrinkwrap":false},"0.0.0-rc-20230426202433":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230426202433","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.2","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230426202433","_integrity":"sha512-I9nXHeftUJnOUZSYHKeapr8FBSrKzgKjqH9f1AqgQ5n8Jbc5c+EKaOGn2q20MhHS1qJ5r1g97lAURV6rC0s2nA==","_resolved":"/tmp/799bab24178e7ae107bc9e31b67b3202/polymorphic-factory-vue-0.0.0-rc-20230426202433.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230426202433.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-I9nXHeftUJnOUZSYHKeapr8FBSrKzgKjqH9f1AqgQ5n8Jbc5c+EKaOGn2q20MhHS1qJ5r1g97lAURV6rC0s2nA==","shasum":"a138dc5ad69af0eb2e1ee6db88fa3a7cb7f98497","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230426202433.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfP9Vw8eKkNjO2e4eJcPuE5ewnyOAN0MG3PnifFLcl1AiANiMIPuTRfxRVHybQ7df+UWCgBk3EZ6LDN98NqNUYm1w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSYiHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYMA/8CFW7sF71dG0PGrnh94QM/O1qgY48k3qADyNzsD86GxhhPHeS\r\nEMXMSq59lhIAvIaFtmoRLaoQw4JStrkdox3oKJT+HsKQ8nNnK5EBGbblYT+o\r\nsZofxgw6QzkOTZ6UQoBfi3GZC+eAntEQHJ1IVNLdPKJXj3rtJPFJUwByDfEG\r\nw6fU9PXZ0rWyDnbTAMZ/g1JFInArKUk6zWdgFG3OC8jBR233S4cq36TXOCfy\r\nxa9IroR9QZPLJY8KKZgJX273jTtV3VXasNdtn+QjpA6tvyY29lR6tkHaNqZS\r\ne5Ishre9yTG/Go0sPF84yotl0Wxmj6z8MfRiRRW/GF+jB4mscMwMHZAoUHn0\r\nEMQRqtudbFocRdczAIfenrs+Adspz7fuqVZecOr+uZafTXxbdEuKJ/94gl+c\r\nfGi3ijdaEA4xsYJG1oRQgRW/Ksj0mOoy1AyS4EhwUZz8jS7u7LRcegqaMjNW\r\nUaWC1sWIFr5jjFwBTPQQ/TWN73XIgsGEqmx9t/bAOPxzwJlCYZIkYEc63rQv\r\nzml9r+g1AuqK/CCu+WBhx9f4/YpYQjwYFgnan/CXzEvudxFpGbn3XgYejnLs\r\nqqzU91zJP2KT4FrXFob2z7MNzrkrEBLmZVO6RquNQikM1KUIy+Ap+3FVC8S5\r\nVcPPeve5+0Xli8u0HsezsGUmI/VLHScqj68=\r\n=XjdB\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/vue_0.0.0-rc-20230426202433_1682540679272_0.8095642195594679"},"_hasShrinkwrap":false},"0.0.0-rc-20230427022128":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230427022128","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.1","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.3","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230427022128","_integrity":"sha512-U9ht0RUw15elL7tb7iqfiQ2OiJ9igyg6Wj8t685+F59UyrTWvXGMnJEhG5VixkYajPeFUDW0/DCXZ04NYacUdQ==","_resolved":"/tmp/83bdad4808bcbcf4faef96f6ac6c8970/polymorphic-factory-vue-0.0.0-rc-20230427022128.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230427022128.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-U9ht0RUw15elL7tb7iqfiQ2OiJ9igyg6Wj8t685+F59UyrTWvXGMnJEhG5VixkYajPeFUDW0/DCXZ04NYacUdQ==","shasum":"37e06f79b95854033a12d195026e4df97094def7","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230427022128.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCadeop/CEHgB9uQnZyLsO9co5gBhKccqvC0/6pTzmdcgIgJQ2RMaecE49k0nhm+7vcvsvIFCVB70SSkufZrDJYOPQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSdwtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnEg/+PvBrxzTZhaF69/4U0/crYtVxjFLF/QeBz7wXKlFFDOve9QQU\r\nWuDf0R2OY++vSgtQIk1quCHNFvHKOoD/d/ItafzpUw+CzVMDm0yJCaY+EWCn\r\nF1dzPXQNgtjzLxf0qOvXh+r5FGx6X6CdtP+X+zHwTNkYvDXGPG5AZni+On4e\r\nRMv+EHoeHlarO28QHDSUYzgk+OTp1RcapKYqka7p0ip/2n1aE1/0lTugq/0t\r\nq5dzxX40atFUFRJw2mvXx/bHL9tNX+luz30zOMHL6MdStlDUOADg0bNwHpN8\r\nGO9/eldj7rfigFsEP+8EUOPLBFzMDIoBx+2EVUhhsnd1zV0QC7Vt+XnYd7nW\r\nfqdZ290W3zP6gSvzinFfyAG7IezEvB4chW4ueX/jq1qn79ZSFpisd8vE4ufx\r\nHXUoUwb8I1FEmaMltrqWQEwxiovfQqRjlVkpC+dsMlKpGP/v6dmBb86GRSIl\r\nfSx70En0EYi16TwhSKWiRqXSX4l4hmRtp/bu9Dssk7ZZdcPxIyBAyDakk9Cn\r\nyTgpPEi4sn9kAKxxRbCjkHeIuKR5yvtlmglsAsAmKG2i7ush9c9rvifJtyQj\r\nINlBNCIuEFZAdgp7vWBH5yRjG59ijJjhW//9/b0WU0a++VuVI9png8eZr8gh\r\n6fkaB9kkfU8D54VrqIu1tcau0OKzml9kxBw=\r\n=b7Z0\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/vue_0.0.0-rc-20230427022128_1682562093456_0.4330547051909075"},"_hasShrinkwrap":false},"0.0.0-rc-20230501174010":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230501174010","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.3","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230501174010","_integrity":"sha512-SwS+Isf1unQj+9vsYiYOOd3XpwIeqwKa9zHp1qY1dTa3+89nZRq6Hl8iGHTml6MnTA1mRFobQhfYVhm/qp9oEQ==","_resolved":"/tmp/69ca90d42997e727b9b8502e9efb832f/polymorphic-factory-vue-0.0.0-rc-20230501174010.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230501174010.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-SwS+Isf1unQj+9vsYiYOOd3XpwIeqwKa9zHp1qY1dTa3+89nZRq6Hl8iGHTml6MnTA1mRFobQhfYVhm/qp9oEQ==","shasum":"e09873df23bea2e31373521cdd23d70791362e3e","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230501174010.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3on6OkSLTieIpNsbwgLEk+WzYk64aRaTWKpOzqphvUAIgd9tMkKklKHPmw8zH2vMS9MMko2IleVUTqpq49JHxJlg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkT/mDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBUg/+PCPq+mxMTBEFXuQci4THdCBRqaVWdDZHBIerLTTKYiZHZXwq\r\nJEDYd0gFdt0fgkR+ULbpR5X6v4P0Q3JjGru1bp5Awwsi9tKzmomZc5qeZwn+\r\n5SVi7mY9KY3ZOhGgvKYStGMdSR5S/mwvl4UDiDYo2g4+ZAwlV4i0ZB1aEY+r\r\nI7JJgNfGcjYWjzsxi2Leo1TuTDt4VobCGp+TUHM/k4wQHPrhxMUg4EANE3oI\r\nSDYwapURWpynGmHGfgNvodn2PMZeLsY7xDAk3vI0bV7ginJgDO4wQZlcoxjw\r\nimfiJEgakzqFEazHWZDVCfxmd7Ge8yuArus+qTcHOjXIt0oyuFq62ekDZoZH\r\nMShbXbPRZbiE3nyN9keszi9vK3fRmqgs9tWPcM5+8fJc/ai1u4eOjZJUFyKE\r\nRds94UeQ4LkypVCXN6yIJWRLLd98cx+g2QUmEOAB2YjI4TGTw86SF1+Bdx2J\r\nMTP2TnLp0UVZytdGbaqS3bqpyvbcXqSkBm0oEKSuxODss9QsVYYTcwMWQVuY\r\n9ixCxABMFJBzCQZg2t2he3IguI1FNuZ2p4GvXk5I76tu2+tQO+OjmLSM9Jrf\r\nGYNjpWZ/DPtF01pZ00velSNdwLbq1OALPHJRp+4xMfWPWO34HgkpzRnHXGYz\r\nROjgU9IRFqd+Gp0+FBItZQKGFLFmlGO8+Os=\r\n=8qAV\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/vue_0.0.0-rc-20230501174010_1682962819652_0.08476145117405243"},"_hasShrinkwrap":false},"0.0.0-rc-20230501193250":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230501193250","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.3","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230501193250","_integrity":"sha512-35vWJR3GfXYbWiWfESikVBlQ4s9MeeNn9964ZtatkWntOvSOzDm36kf4Oyl8Ldxrf030bOVlwTGncUOTMH+dkQ==","_resolved":"/tmp/e5099f6f047b688aee34a70a66731347/polymorphic-factory-vue-0.0.0-rc-20230501193250.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230501193250.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-35vWJR3GfXYbWiWfESikVBlQ4s9MeeNn9964ZtatkWntOvSOzDm36kf4Oyl8Ldxrf030bOVlwTGncUOTMH+dkQ==","shasum":"6bafc2b1afdd822be8091c87c1429b1fc7f9e12a","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230501193250.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7Jeb4BitT2bHv7kZt6Gx+bSzm2JIZ4wZlS+plF6VNIAiBM/TcLh0LIgwJ0ID3aEKNxS2p9EHi+X969W2O0apt/iQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUBPnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmok5Q//esuclnXy1KqyDn1nlOGg58BtJTgTXwAS+uJPx6VoPjsOdmQO\r\nQqpvz7LR81ZY9J2BJYKm9lwlQ1Q4kjXNETz9XU83QrNaMRCaddS/LqA+4wNu\r\nKF2ZhoaZwvv7O6R7+fu0G+dx+5If1uYDK4dPdHqSVlRkFrSgTCfVHo4Bf343\r\nFcsPyTYl/PKHzluDVGolJpsnTQ/MWEysTD3RJ2WiX+aH/7q8LvNDLE6nbWW3\r\nLbJ4u1Ei8cFYpoNuwzIv0WUKcKv2/CYjaVrKw6GqXUGOx1h7CRpveY3sSZhj\r\n5wu1vEKsalHQeNWqyxoPSrw9UG3a562Ow8ShyXif+aRE42jt0oqd678+chkr\r\nTEA1+jCr2fXWimEYPN13AxpGBld6uZ/ek7AsemxpzPaW/jFzRh3UW7gptgPC\r\nQ2qvBhsVBVmvrava1uoylM/Bolhjw5bSUa74LQYejq1Mb3AXfxBmdmvRDSFi\r\nOFNbbulyRdK6YojHr3/EiB1RtAILKGubvBqLb43TZ6CPl73UCzTd/n7joAC7\r\nBrY1j4aq2xIKMos63BdkeSai7Vt7I38GMafiLQ2dQkP66S4tNI3iexWMXWaS\r\njz7EtsrAl8qw3rwcmQQettq0kcHnOr/uOIHOlCKaQPAOqiuV8R+0aThtsxKB\r\ncJIyh1V/yvZMDNmTwDuCvB8Baj19ttaCBCg=\r\n=yDW5\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/vue_0.0.0-rc-20230501193250_1682969575500_0.29935127579381526"},"_hasShrinkwrap":false},"0.0.0-rc-20230502064618":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230502064618","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.3","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230502064618","_integrity":"sha512-2qPI2aEfmpYywXVT3ZjYZ72wSi5hyw+PE2OzWchfjGNgLRUE5wiAVXT65iP9xvVLdbdNhDYfPrEA7pNStM+Aag==","_resolved":"/tmp/d0b1e7c5a0dd5199a70923da899ea7cd/polymorphic-factory-vue-0.0.0-rc-20230502064618.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230502064618.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-2qPI2aEfmpYywXVT3ZjYZ72wSi5hyw+PE2OzWchfjGNgLRUE5wiAVXT65iP9xvVLdbdNhDYfPrEA7pNStM+Aag==","shasum":"d5123b1eb77270c5c36075d926af1b5488f53264","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230502064618.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYaSB89tydO5bhK1qE+wOoIRoEvsU4MZplrg7CumyDXgIgFdN4L+fAqwYpskh/contJhpihGpGsMagKXwlf/R8mNM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkULHBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpirRAAhNGGudxN1+rzqK3LvfKvyDLNXbsKnASwjIpkKUx6KGDvBflz\r\nKH3xEWzUPxPDQQ53iZczzhRAeFlqk/I1AcVlEhn0Cg0vii/4+547g4323zcn\r\nVWqB3YuYzIzXPFFnbfDLcXRtKWzdXhJZFVetZ3ED4NYkgdMf2A4UezU2xp1o\r\nKhcwSbT6MV2QE1yc1E9G5RVE0WcQVZQzLY1AwPCxDp2kC46cZU3iwkGwUPZd\r\nmNWnPt+i31msLqdFM0dgAs8cgXSoIDrZ9e0QgKe3soz4OtPD4mrcn39AG+fM\r\nZ+9tguijjTtW8XfJ4cbu0gr2CTiDIzql+ViUsBLE5aku1It2qUm3xm7G+CgG\r\nsZ/n+vKafwCbl2XUjTk0bqgKPLZVg1u2NLr+by9DEevBHf3fsgpNNWqPqgFT\r\n09DdBqcXoT2Swj9MFIM+QrgmSS7Uhc1hAw7WialG1nSYKtGnjURTctK9jCpO\r\nfi780zJZeTviyLpTEllNhYaFrl+ldY15fAqY9YeKMdtGY4FFLWLsGn23mqbk\r\nphliF4I5+MCHNg4ZDZ16Jorg/5nyjUb8rN17oLekjvT7H6ZrgXIvL7ISE2f4\r\niuUOcChEm2C+++UQmhr4ODPjHTRe/LgGyT6OSoC/wY7W5IqCT+iK9AFg062R\r\n6TGK0VQQteIU2vL/sFr7Bged5OFTv049h9w=\r\n=CZvn\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/vue_0.0.0-rc-20230502064618_1683009985250_0.33349005558806377"},"_hasShrinkwrap":false},"0.0.0-rc-20230502135550":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230502135550","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230502135550","_integrity":"sha512-fKY97yGbU6vtNlYkOdFg+n2BzU1cfTdx3S15VXhRnyNI099uDKGR3K1uMAcig7DjiKoBZ4pu4azQ9T6mfkxwPw==","_resolved":"/tmp/c6558d479548b72c8280e5d884be638b/polymorphic-factory-vue-0.0.0-rc-20230502135550.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230502135550.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-fKY97yGbU6vtNlYkOdFg+n2BzU1cfTdx3S15VXhRnyNI099uDKGR3K1uMAcig7DjiKoBZ4pu4azQ9T6mfkxwPw==","shasum":"830296f0d4c2fed391320271a282797c5c3ff807","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230502135550.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBWbGByIf74c6fOBjTn36lqo7JloE4RwuixoCLCl/FyAIhAMoxF+JXfH6f1EfzYZx3YC1n61INumyLElxuxRbG+vZ8"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230502135550_1683035758182_0.8187442799563187"},"_hasShrinkwrap":false},"0.0.0-rc-20230502135721":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230502135721","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.30.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.30.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230502135721","_integrity":"sha512-5nUYknKn7B8mn7By6yTEz+og1q77LIL9CUwoweFOt3iiqZ0ZbPgxgyDgWA5Ei6C70cf1a4V0UMcLzycON8hVRw==","_resolved":"/tmp/14fad4caff9a277aca2cf185b19e78ed/polymorphic-factory-vue-0.0.0-rc-20230502135721.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230502135721.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-5nUYknKn7B8mn7By6yTEz+og1q77LIL9CUwoweFOt3iiqZ0ZbPgxgyDgWA5Ei6C70cf1a4V0UMcLzycON8hVRw==","shasum":"8e095933afd6cebaee4996b0775b9c0b34fe2969","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230502135721.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzeWwkZ81mUe3RbzfBPfdx2vACtdN/J1nuTaEdDAeHgQIhAMNyWBTpwamxyMPCfc0giIZCg9M/ujb92/Ie7Qfyor8j"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230502135721_1683035847073_0.3714053079893347"},"_hasShrinkwrap":false},"0.0.0-rc-20230503225450":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230503225450","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230503225450","_integrity":"sha512-ZeJ/9346y+dtH6oP57WoT4INGNrnksE6Oz96h0X0XWl3jbu90+FRLP9PT6QY7kYh0UpZqv7ComYEdX1BNqv/lg==","_resolved":"/tmp/b02cf82cea13a09e5941defde02f87f0/polymorphic-factory-vue-0.0.0-rc-20230503225450.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230503225450.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-ZeJ/9346y+dtH6oP57WoT4INGNrnksE6Oz96h0X0XWl3jbu90+FRLP9PT6QY7kYh0UpZqv7ComYEdX1BNqv/lg==","shasum":"516429e21865bb230dd86c456f1de50926fdaa06","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230503225450.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNeRDvN8EeHs7m/jXyiuQ5ftaZb/efXpvWxpLRUN5PUgIgadf9UDtwt0GslpQnG2RiBkHtz8qcLRviBH6/QO3AEt4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUuZCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfFg/9E9M6u3jxbwEWwpbZN18i7o6syB+9LPSALd1+aKJYWKsD6VY8\r\n/M5sHC6Km3MVtRAxIfu3VWZUrM9ehSncsPQt4ifVbvrdJzSuB6sqVYJI/O96\r\nhmFYGCbbDuZ5kDe+7WxOQV58bfq59+GeLXc4az0TuME/WrgsEujT5W6pNsFx\r\nIOdeOGF5ZXuJPCFDwgENoWC3K+5HntlFsuJocKpVMuUwglNSd9tcYWWBNaib\r\nEUqimJmNMEpWEV9sIK6uvCrhs+rRZFnR7wCCLWMe8VT608ZtAiBTeKsiUsY1\r\nXJ7MjFdv1HH90eib4dQ1xX2PFf2h+iA5trfgIGYSxpl1cA+FWue2m4VQGmzT\r\nWU9am2AVtxTBm+A5vaKaoMGfpYyZEnUEFZ62OLONuMZCiKEgBJYClWQfFCaj\r\nXJUYzM3B9FzV7vgubq9/9Ab8O4j4PksrULqKBu/3226/pXUOIiGxZBIvdR5K\r\nTG7VgVCjeN88eaDqcJ/cIpo3HvsIMA4u9zN2Ch1VJgCtHjs2C4BFNfvuLtkP\r\nAywItRgBp75A61d6ku4emN/w4M5vhqsBGumvvZ2io7fZOhFnS4h62ju9L/kN\r\npeIWXQQJVHP9gLSihMTDemLlkUBzWYsIUTGfWdJDiWZX1LbDMw04VmtXfgIG\r\nea1+iNpVBlxd0eaG3UcX7XRBbeiKi9cvJ4Y=\r\n=7PQW\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/vue_0.0.0-rc-20230503225450_1683154497819_0.3805774048374029"},"_hasShrinkwrap":false},"0.0.0-rc-20230503225718":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230503225718","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230503225718","_integrity":"sha512-aTJa2XUljYi8kNDMmVE7ww1H3fZQApByAnGrqD1+Odh5dINB3UxIJ3WXu2nZibpKlJXXHwO12/9hS8+RcAPrsQ==","_resolved":"/tmp/a2fd160a33e5d9a28db36ddf83078d1f/polymorphic-factory-vue-0.0.0-rc-20230503225718.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230503225718.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-aTJa2XUljYi8kNDMmVE7ww1H3fZQApByAnGrqD1+Odh5dINB3UxIJ3WXu2nZibpKlJXXHwO12/9hS8+RcAPrsQ==","shasum":"192b2a5b03c0cadab427f83af1c56096937f506b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230503225718.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICTmFPFEx6bFWGkMjWqOePrN0cz1q6nfpOUvf242E4b4AiEA0Uu1jaVhwSnI2lRxkJa3Yr4TKvZ97Yv7Ye9EsOkZHXs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUubTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqb2Q/7Bc4YlBjTDdxWPYg/CAcdfnGLbFEG+LJkG+zirP+0BFHAsD55\r\nw2STBhcnG2mC+sAunedaWpg/omOjGBJYfLG+lH0QlT1u/VBNS2hfXtlOiHqc\r\nm/zqcZFmJkvjhSAHr/kcBEfaaO8eRE4XOSS5lQHx5prlia/hTS6NqdrXE+hj\r\nUFapODGNHbJF2H7eoyAV6KQX3qduq+sX6Ke6DASSRvDhYRUKK3uRvDyuijvs\r\neecTYkqFtDmRnMb0+QV2xWNCfLgitBKaSKk4fkh68OFapXYkOoc9jpGOhGAj\r\nQG3Pu7ZLeEvBKa38KTUVHITY76wehfGIZ6AngMOCRAjDAZxntx2JpYPNlGvn\r\npLN1KBBmQFMayEJvwtU0HTk+LTYYWjvqRB6g3jmcJaRH7r3hPyCUbYULe/jn\r\nAGJqtbphzylJcmweCwtnyRaYeFNCNYIPh6aRF2GbemxhDeiX/xOuXGdcU+/v\r\n722MDfz1LA4r53AnQetz19CYwY1oF0IdcB6jrF4LrSG2VJzjgeGuyh7NvBRx\r\nHbyspQMTEGQehSg42m6IznvhLMG6/qE1xAjYWj84HYVCFIV2+OZx+BBgwqAE\r\n0hJZeFzMD1kSYn9jfxQDvWU6Y1ng8NQxseeMe4dPJzOYMtIxWigJypLSM4af\r\nT+XMNw9f3LC1kz+6mXWxZUcRoTf0eYtaJlo=\r\n=mc9A\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/vue_0.0.0-rc-20230503225718_1683154643187_0.2499387782556648"},"_hasShrinkwrap":false},"0.0.0-rc-20230504112808":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230504112808","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230504112808","_integrity":"sha512-9+gW3fYIMZdRuFYf5pi7NmgR2mG8/UGMD6ja6XR4DsqYqhUXatYrYGN3B5i0sKqROg7eMf3BZdhrZb/qDlKJzw==","_resolved":"/tmp/e907e034ba6fb352071addfd747d8b9f/polymorphic-factory-vue-0.0.0-rc-20230504112808.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230504112808.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-9+gW3fYIMZdRuFYf5pi7NmgR2mG8/UGMD6ja6XR4DsqYqhUXatYrYGN3B5i0sKqROg7eMf3BZdhrZb/qDlKJzw==","shasum":"eb0989fdcb47e906728493be0682e34b7749bf9f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230504112808.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxbLqzVXUrciW8xlSQRZyDcAMN5jWR7SX7pNYeItksGAIhAPFEm7xoTrfHeUMcAl6DkELyELjg9m92iIfxa8YgEk1/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkU5bOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMMA/9FcY1/X+5RlqByCKvfDxEw0U+rzBzaB9Umz1KXJtGUdSgkZJJ\r\n9xkFCEaGAb6cLvmiH9GnDoWxogKA4t0enX8o0vSxr/DGYvTSAxwq66d5flfo\r\nAiTu02DGh+j2Oyo+SoYMlxHXc23bzzAdyiZ7lytlTEo7ftc6KvbYAxZwIzXR\r\nmul5b8y6zCNm3J8dV7vAVaC9NBdxDGsRtGL49tCBspB7OfkTo0tFOZeVAdh1\r\n9ZGsESYoEQrAfWynund5QjaXn2RM4Rlume2zJh4efCbur3x3XYMXPXUT5XqI\r\n7KhII0hEW0JTZK6lrU/2Alk57vfF3UGa+p2mmxlzAYL66DRobAe0Xt17A3xj\r\npTzDC7aGweQNAWNYCvx1R7sq//JrhtWzlLjgb1XwnbKXFJEGakuKvSO7RLyJ\r\nZ1LL3nq++CBhpfwUk0SIPzWO7l98bK4M4ujmYW31lC1YKzoqfCH7Y8/1t/Ov\r\nro/hUcn5kHULJ46pox6wIRM5N8sZMisugRVNMPf00RfQDFhCzJpE/wRl7D31\r\nCwE0LdhXCyZN+gvwylZyMbkg5+WR94hWcEK7b5fByw3OxKG6IQdL1wFt+hnn\r\nmvnyb7ebOZnIDJ++vWD1FhBY79Oz6UVPvo0hd67fXQ1ZQyRn+goFMqaE7Yuf\r\nx0ZzOfkb3SJLlSDSDdeSgLgD3qlbQqjoEDw=\r\n=R5KX\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/vue_0.0.0-rc-20230504112808_1683199694426_0.5244892126128815"},"_hasShrinkwrap":false},"0.0.0-rc-20230504152327":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230504152327","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230504152327","_integrity":"sha512-sppnOgQ05VQlmDzty9uURd6AGhg89GK9hU30CRvtSYwILLhRXZao3qWO2rfh5hzm7LnfAtuRMsKqvAWg3lsQ3w==","_resolved":"/tmp/96968b830c393ea63218d9c160297224/polymorphic-factory-vue-0.0.0-rc-20230504152327.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230504152327.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-sppnOgQ05VQlmDzty9uURd6AGhg89GK9hU30CRvtSYwILLhRXZao3qWO2rfh5hzm7LnfAtuRMsKqvAWg3lsQ3w==","shasum":"0f6ef0a17b924a15dbef763a82b4fc87b94fd63c","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230504152327.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvgOqeHmLbhLOxYBQXZGBAT6PlDXgMajKWFPfcdZ2w8wIgKEWxHPqte38D3mCCuKf53SUztTNpRU8l65hnVhSjfxc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkU830ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxQhAAk05cFocCEDtSJlUPI9XjjcVrCTdD29UaThMGnEhu8VMWYhSs\r\n17Jg2YioKqiIXKNMCoZx3BUL6Tgi0U/XDflbl75yhw8ZUMYsr1fxIxJeRRtl\r\n+EhivorRKa0lI5PP9BPogcBlcqmMRgA/a+sH1FfR8BicqVWxqfDWrLk4Pr+N\r\n+u/kwcuKpB8AZxgUagHgbTFEJCkqFY6e1QRebfrgVnVkpA2cO5e9jQS3jUiG\r\nD5DcYxtz3A60SG/fZNhgiKNMXI69DkMw85QXSMNbQ9iuFS+G6yKrbOtNn7o1\r\nu99q5c1qHCiLNInHuERkM9xpCIZVHq2IoYitpyd4tllzJm+Lx4NhGXQ2zoJO\r\nz7SeGMxuJlKT8M7aAloIRXVFu1HXo87THu26a4/sl/wWXKtIqvCJ3cxTrOK9\r\nOBBr8CvP7D1mPkJ2zUykTL4V2pk0meJPQYwr4QMIq3FIAzTcjmLLjjfigRXm\r\nF2yN4p7i+IG39dFCexo+o0ej0VvjgaYITbMtS1+lq884jiZQK3DGQtA6cY7Y\r\nTr5fj/pdXIwkIkz4tZXXfstLDpKCC1rcKNJA8Ir3e5tOQgkbAcxB0uW34FDp\r\npTK7Y+IhwAmmyYyjPfww5X7O2WYNS2ZMmfUAVT8Bu3AlUfiOjndD3cM4IaGt\r\n1HEZyBlr+HOdSMqHEj1aXunWN6hXCVDHXNY=\r\n=zjNI\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/vue_0.0.0-rc-20230504152327_1683213812579_0.20206156035694223"},"_hasShrinkwrap":false},"0.0.0-rc-20230504192227":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230504192227","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230504192227","_integrity":"sha512-QUZHTyy7/YywQsVkTuj19sFaZkM3tKX17Q0OhfmDhUyQ0zLvbeonCBKEKWxMwM20Z4rroBuawopKttAk6JBNDQ==","_resolved":"/tmp/e580890fbab382a5029d95520a6780af/polymorphic-factory-vue-0.0.0-rc-20230504192227.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230504192227.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-QUZHTyy7/YywQsVkTuj19sFaZkM3tKX17Q0OhfmDhUyQ0zLvbeonCBKEKWxMwM20Z4rroBuawopKttAk6JBNDQ==","shasum":"8d7d787d682d8dd4a474c933990fc71cc97cafd0","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230504192227.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICuWfSQ8axCDk2Ic8WaaW/D9ohW8attBmPoB07pxs9EgAiEA9AGh1uZ2Q2UDwlmXCuDdF4DQgxUMNDnier4YU/Mnn1k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkVAX4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+vg/7B0Y/gEAUbLe8PLkRMTq3nP8FW23TyJRDaKNPZjDmnOFJAo8Z\r\n3Y+YMMPXyAk4MWexwTkZXqecfUdSAaHUgZW0bXUDiYd2D0nGKl96udxR50EK\r\nDjoTCfxosvFK1pt8dQ1qiGk/ynHmGGQ7kCmEVr1LQl9DN7oIUVLkPufHab9t\r\nSJKr9ZEYaugCR+WZ0sB2WbS2H5A+Atorgm7O1xfPZIwEBdv4oAB7GhhLBmrx\r\nAy74r+1zJ4cgIzWaSNnBEmDvuTJGJlReQ24bHaY3nxE1/3SFCGLfSLVJeHpN\r\nl6F/TQ+2RTIGRHknsZOVZAJ4Zigok4vG9c90ynmgxE97HDvSOIiTDMCsRhqO\r\nAaujQU9GwyE9FLFRoRS5gIomGKo2I+Kg6My++g6aOfeW1tm/VsLKi4NK2vJM\r\nhM46hUgYMdgrAoicOxFMWcZlZT8PFBB0TRybjUYlZoHJWDEmrIVkKq8LE1/p\r\nJMKsnF50bz+VONTl7CuU8yTAOKWZZXElkjXtqD2Z3SDGE/MPXGukTggWJQs0\r\nQlX/0N+L4ZYpZDQVQ3ljYr8DCEB13VoUEWiLr6/nM6BXuht26GuRNLexffuw\r\nSjm0s4TmeMBREP+GBxf9vPkkllNtmVqovuahwoWNuA8CHETR8VX1PMueprqb\r\nvbtuz+uj18b+9oUVHx4KpYxQckWwfEvjdy8=\r\n=g16D\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/vue_0.0.0-rc-20230504192227_1683228152744_0.8803377780904644"},"_hasShrinkwrap":false},"0.0.0-rc-20230505142718":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230505142718","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.4","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230505142718","_integrity":"sha512-BiQOSnKX7TKzMT4t4XlpVAzefZ0KWal7Pibv4XYcifJmbqxDWhhosgTz/u9FA23oGMN9/KFZMyiD0cpNwU+fpQ==","_resolved":"/tmp/8181f405e54204254657c34372f279d3/polymorphic-factory-vue-0.0.0-rc-20230505142718.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230505142718.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-BiQOSnKX7TKzMT4t4XlpVAzefZ0KWal7Pibv4XYcifJmbqxDWhhosgTz/u9FA23oGMN9/KFZMyiD0cpNwU+fpQ==","shasum":"e8236f1b9ed98956142e719a91c5d4f4b2056827","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230505142718.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHYREHKp8pXJ65whsPeSOgmH3Leyb3HzHkiZK6E/DrPAiBK78FKgjVGoMxfb0/pRinmlA8QId2XNZ+BXsLL8xL0pg=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230505142718_1683296843242_0.537297563474672"},"_hasShrinkwrap":false},"0.0.0-rc-20230505193629":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230505193629","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230505193629","_integrity":"sha512-UZ/KBjH9hU4dwAdUq8RbQyTcn97x0bz/NyFWGNuZ2P6lAJNKIdJtkhjhJvy6cTY52dchMyap7X9xmqflGI41WA==","_resolved":"/tmp/e9dbfbdc9eaf2c0aeb6be41db312b399/polymorphic-factory-vue-0.0.0-rc-20230505193629.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230505193629.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-UZ/KBjH9hU4dwAdUq8RbQyTcn97x0bz/NyFWGNuZ2P6lAJNKIdJtkhjhJvy6cTY52dchMyap7X9xmqflGI41WA==","shasum":"8236a4a13b30b983c72f577cd168a192a1ff63d6","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230505193629.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJA3qQyvYY+9Z30PvYqzUiJmI7DeadSzhsgNyjdK4XYAiBuJQTaKBxVlwZS4y7HdDdAkV4W+4Tw65+IOPMT6NZgqA=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230505193629_1683315395886_0.9017693035525329"},"_hasShrinkwrap":false},"0.0.0-rc-20230505193816":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230505193816","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230505193816","_integrity":"sha512-vtVIoLNYuKOnTFvl7mqidIQpt9cbBpx93XHiu5IIBkt3yNVpc1oZyuQ/Uk+cCUoTFEeRCIweydABQpP6rigkSg==","_resolved":"/tmp/972446ee9a7f5a69f5949ef725da43d1/polymorphic-factory-vue-0.0.0-rc-20230505193816.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230505193816.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-vtVIoLNYuKOnTFvl7mqidIQpt9cbBpx93XHiu5IIBkt3yNVpc1oZyuQ/Uk+cCUoTFEeRCIweydABQpP6rigkSg==","shasum":"bdf1b4115d34cfd04f3ab9f9c96fa30edf6c7c98","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230505193816.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+oQ4AZ5r0rPv2QnrHmETRFOR9BU6UZ8W+ozmPTa2NgwIgdiHr+ynhRZ/ZOgVbcWne0KfKw6yenA6IePKaexT87GU="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230505193816_1683315502830_0.25329032644856797"},"_hasShrinkwrap":false},"0.0.0-rc-20230506024158":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230506024158","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230506024158","_integrity":"sha512-gqkVleBep0c3kGK3Mdfe11n7AjUEujcKP7YAzfKFvfzTn5ggiyxjuUPaky6iaqj64StehTiMg9CK0VEmfNVv5Q==","_resolved":"/tmp/60fcca3d1acb0815d46058ca0680b23f/polymorphic-factory-vue-0.0.0-rc-20230506024158.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230506024158.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-gqkVleBep0c3kGK3Mdfe11n7AjUEujcKP7YAzfKFvfzTn5ggiyxjuUPaky6iaqj64StehTiMg9CK0VEmfNVv5Q==","shasum":"8a5a6eb0217184f84b2f1ed70979722f10db5da0","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230506024158.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq63r4zZcYHbXQNYxG/4oUqylEs+kYocbPCQWqHMwmUwIhAPgyCsdI+W7OP7ekK5A5wM2mqmqbAAJo6cAAAwbmZu7O"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230506024158_1683340924101_0.5582769169014177"},"_hasShrinkwrap":false},"0.0.0-rc-20230506065917":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230506065917","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230506065917","_integrity":"sha512-/N3UtJHAV4AA3paCjyv8ThZCDYAaP6IAgWYQTiCiZ14VKcqmokb/K00v5rWEmiiQYbLeSr6Hs2MJ+ZjW9GP8tQ==","_resolved":"/tmp/cae7894c27ad328848f8f08819567710/polymorphic-factory-vue-0.0.0-rc-20230506065917.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230506065917.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-/N3UtJHAV4AA3paCjyv8ThZCDYAaP6IAgWYQTiCiZ14VKcqmokb/K00v5rWEmiiQYbLeSr6Hs2MJ+ZjW9GP8tQ==","shasum":"9b655d04746d2b17c07b99b2dceddb13b34165e4","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230506065917.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUhP+Qoda6Cpm9ZDAE1cVbSvlpKMWYWfOnwksSXAXI/AIhAOvgOaZ0nY+wv77H0CdVuQGLEaKQGu0F1cy3qU0w0a2R"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230506065917_1683356363234_0.9451611414888097"},"_hasShrinkwrap":false},"0.0.0-rc-20230506120418":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230506120418","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230506120418","_integrity":"sha512-qUUfdhfEdQFfH/Tqdp40Z/KMtc5wIvOmq82z/b3otEoCOIcaRWvaqSOVNMWGO5PlXupPSUrqSmjO1R1SQuY5Mg==","_resolved":"/tmp/ac3020e78413ab0ecdf2743e9904e8d4/polymorphic-factory-vue-0.0.0-rc-20230506120418.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230506120418.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-qUUfdhfEdQFfH/Tqdp40Z/KMtc5wIvOmq82z/b3otEoCOIcaRWvaqSOVNMWGO5PlXupPSUrqSmjO1R1SQuY5Mg==","shasum":"d3d11da47735b3345b27c0369668932952ef784a","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230506120418.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXfNhCM1XNTlq5fCEhfLQ/Csxrub0/XTyxWWud+ZCQuAIgf8aRYELKnWzh3CVM2YsdlIwdSAUmTc9Z38mxVHX5bM0="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230506120418_1683374666625_0.6127788492776598"},"_hasShrinkwrap":false},"0.0.0-rc-20230506120709":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230506120709","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230506120709","_integrity":"sha512-FrVMpR+iEf3uAO3Z+OB9BRfSLc9+wrw2jC/nUlZ7aWhLoUDco95fYtZW4HXC14qr29gcsOdzKZc4QKl2Xvm8ow==","_resolved":"/tmp/f69bc27c7f51e538128cc938e3a49a8d/polymorphic-factory-vue-0.0.0-rc-20230506120709.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230506120709.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-FrVMpR+iEf3uAO3Z+OB9BRfSLc9+wrw2jC/nUlZ7aWhLoUDco95fYtZW4HXC14qr29gcsOdzKZc4QKl2Xvm8ow==","shasum":"80739dd9671f12e59819e9db5c8afa833105f0c5","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230506120709.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmqbVhQCuJ5g/f+0R5Dyea+ToQWZDTqVcJ/ToBUG8YcAiEAz5bG4yr66vVEWvbSfCSvWRW0+nMhvIi2Zp86gTUeCRQ="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230506120709_1683374836363_0.024391604574450776"},"_hasShrinkwrap":false},"0.0.0-rc-20230509005049":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230509005049","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230509005049","_integrity":"sha512-Iq6ZGFvVBiw9sZNuSGZNH9mt7H/atLmIIFWRexpfeBIJsigiCVJc54qZW7KJsOGIc/4kh9EXD/X0fT56MkZxwA==","_resolved":"/tmp/b64dde8a00a083fc1463e776c16e618b/polymorphic-factory-vue-0.0.0-rc-20230509005049.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230509005049.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Iq6ZGFvVBiw9sZNuSGZNH9mt7H/atLmIIFWRexpfeBIJsigiCVJc54qZW7KJsOGIc/4kh9EXD/X0fT56MkZxwA==","shasum":"771a358f0b2c7aac517e88ff1f6f0162054f3475","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230509005049.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPcNpKcMjenYx7et6ICEKkSbjXj/VRTUSNMKia2vgXWAIhANZv+m3+kMOLdBpHlEoZMkvQ+Cks7HjBlSLKhZysvh8o"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230509005049_1683593455644_0.17951205661335545"},"_hasShrinkwrap":false},"0.0.0-rc-20230509034023":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230509034023","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230509034023","_integrity":"sha512-uRkHNjSqRh89omSLoJC8NsBtsXPnkZaKustRbdFxEp5jIzdSJDMkZwTek8hgm+UdckZB7s89lDxrfkdr5RI2ag==","_resolved":"/tmp/f13c70fab0b21bcca7f471518f5f95e2/polymorphic-factory-vue-0.0.0-rc-20230509034023.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230509034023.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-uRkHNjSqRh89omSLoJC8NsBtsXPnkZaKustRbdFxEp5jIzdSJDMkZwTek8hgm+UdckZB7s89lDxrfkdr5RI2ag==","shasum":"599f3373a0650fda70b6b1c190216413106f3173","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230509034023.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMc9UEK1QiPVD0tAUdbzO7f3sXZUt5XzYT/k8vD9paNgIhAMVR1OqCjbr5k0OM6gpf6FTbZ+Ey2Rb19Vc+zk2jm3vY"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230509034023_1683603629604_0.23559277086021746"},"_hasShrinkwrap":false},"0.0.0-rc-20230510024848":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230510024848","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230510024848","_integrity":"sha512-HtnUKPkRB24/kxOxfQvFCkad1MsxRUkgYWuCJCFluJgbI7brdWSWszpLQ2xokGeobAax5ca5Led40IsRzaae5w==","_resolved":"/tmp/0d3dddc5c62cb1de08efc385d9d0d873/polymorphic-factory-vue-0.0.0-rc-20230510024848.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230510024848.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-HtnUKPkRB24/kxOxfQvFCkad1MsxRUkgYWuCJCFluJgbI7brdWSWszpLQ2xokGeobAax5ca5Led40IsRzaae5w==","shasum":"7e195ae6c1280ae1c8d36c8e9bf1d2707cc5e7c7","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230510024848.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUTRtMkV3IYF4FuVro40AbmWPOjMBF8UBk9TwDXdDcBgIhALkjzOfbYh0mTMJcIZInOzFoW5BAsy40UB4FUQEfpNmq"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230510024848_1683686933730_0.4625257705247554"},"_hasShrinkwrap":false},"0.0.0-rc-20230510154854":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230510154854","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.1","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230510154854","_integrity":"sha512-aDceus0RNvxmeM0y+dYPvx1b2wTI6gZKhwt2uaGg9Q04HMqs8ku6pwHGt7ojkIlRSKdhkHk8P2hzjyXPoLVoQA==","_resolved":"/tmp/607b7647281e92716f43bc3319925e1c/polymorphic-factory-vue-0.0.0-rc-20230510154854.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230510154854.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-aDceus0RNvxmeM0y+dYPvx1b2wTI6gZKhwt2uaGg9Q04HMqs8ku6pwHGt7ojkIlRSKdhkHk8P2hzjyXPoLVoQA==","shasum":"2fe48d7c57b77ac3a51249bd4542c85f70252630","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230510154854.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGB+bpYOU2Sk/hRQm6jvL79ujfOOgRDG81Pnvf9iNLNfAiEA7q+C9ftzWPrQOGw3F9/DgyozXvnxT4qbshhwnUK98iE="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230510154854_1683733739702_0.5124169306791027"},"_hasShrinkwrap":false},"0.0.0-rc-20230511145758":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230511145758","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.2","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230511145758","_integrity":"sha512-ezVawLaf2K7jfBRgNdECDcx6tMo3x+6C0lII6yC4dtVEvoUz+wrHYA/k655Q+PhJ+TvbqGJZgQ3JLbQ4AnuCJg==","_resolved":"/tmp/bc3220ad85ddf3e02e7659d620731d01/polymorphic-factory-vue-0.0.0-rc-20230511145758.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230511145758.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-ezVawLaf2K7jfBRgNdECDcx6tMo3x+6C0lII6yC4dtVEvoUz+wrHYA/k655Q+PhJ+TvbqGJZgQ3JLbQ4AnuCJg==","shasum":"1721c1299db20899348c8f00a1399941d2c5b493","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230511145758.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXdjGkS0f/2wee+mJhUgAPQxe/v9PygpvI/BgGp1+aAgIgJX36OtmIToCt3jIC6KrNOnZAsdZuqH+JOp+zQQ4tm5Y="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230511145758_1683817087827_0.5126262490414695"},"_hasShrinkwrap":false},"0.0.0-rc-20230512010035":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230512010035","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.2","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230512010035","_integrity":"sha512-2ddUJEsApEDZ3tRQsWObedveKiGFcD7i4lKDJHuwctPQ+JxUZJgEQ8b5EN8UAMnqhVXa1MusmSIYI1plRnz9CA==","_resolved":"/tmp/d4473563990fc4682d53a26dd46005c5/polymorphic-factory-vue-0.0.0-rc-20230512010035.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230512010035.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-2ddUJEsApEDZ3tRQsWObedveKiGFcD7i4lKDJHuwctPQ+JxUZJgEQ8b5EN8UAMnqhVXa1MusmSIYI1plRnz9CA==","shasum":"344494c63d62413d308ccc88be1d68d39732caed","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230512010035.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrh4fSWembAwaCgHQk9tA0PI4Z5Yjikcvwg0E2IhKH6wIgPu5ZMOAWvZJ+1DDfxHY4g9a3eWeWiZyKNsRFUEJegVQ="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230512010035_1683853241504_0.8126540475130546"},"_hasShrinkwrap":false},"0.0.0-rc-20230512045244":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230512045244","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.2","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230512045244","_integrity":"sha512-UQzVee9fbYXLzg46bSBx/ChS3Lg6nTSbkJGM2l76Pm7uXR7lKVeqV6Bg5+ytoIlJFIHdxeD4V402wW/pVEBssg==","_resolved":"/tmp/b7fbfe58c2f7ae668f5d280d47a86850/polymorphic-factory-vue-0.0.0-rc-20230512045244.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230512045244.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-UQzVee9fbYXLzg46bSBx/ChS3Lg6nTSbkJGM2l76Pm7uXR7lKVeqV6Bg5+ytoIlJFIHdxeD4V402wW/pVEBssg==","shasum":"dc8439b1dbe503331e38b97586bcdfa39f69e3b7","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230512045244.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk6UKLRTGvZouvVM26yI1CcLNmeeQQH/a4KBG6YJv7cwIhAMzKOrGHt/ud52bqfcyNogV2U8fO6AF2204i5bKmXLol"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230512045244_1683867169523_0.22576583372359615"},"_hasShrinkwrap":false},"0.0.0-rc-20230512151504":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230512151504","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230512151504","_integrity":"sha512-ekpeBZLHOP9cqbiT0VRBQDtpwSJ1FNidDlTGm9WIN+s6BBsI9h5kYLNRhDAOgZ26LQ8Ze2nVNvYxHuRx06vW7w==","_resolved":"/tmp/72d716d2852bbf69438e71af6b18fae8/polymorphic-factory-vue-0.0.0-rc-20230512151504.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230512151504.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-ekpeBZLHOP9cqbiT0VRBQDtpwSJ1FNidDlTGm9WIN+s6BBsI9h5kYLNRhDAOgZ26LQ8Ze2nVNvYxHuRx06vW7w==","shasum":"1176e22eb2e026940a1f595a04cf3bea3ef53a31","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230512151504.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID74IH7PU0e1RMGipmWRmWz5hCfHvBGKH3q99ne6n+FJAiAKJuLaixQLA0wN8ZTAh4cb+/Z8hpKl2LplsLGOhErAwA=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230512151504_1683904509769_0.7948847839335544"},"_hasShrinkwrap":false},"0.0.0-rc-20230512151912":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230512151912","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230512151912","_integrity":"sha512-Ga/vDym8/IVom66rgOpqtzkFYloRQNQg3CPj5DAbUHLaPtytQp9YKGR2juJGsI0ep8p0ijjjNKoLrn9YnU8FRA==","_resolved":"/tmp/0dfb5980721a92fba9b821b58d5ebe22/polymorphic-factory-vue-0.0.0-rc-20230512151912.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230512151912.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Ga/vDym8/IVom66rgOpqtzkFYloRQNQg3CPj5DAbUHLaPtytQp9YKGR2juJGsI0ep8p0ijjjNKoLrn9YnU8FRA==","shasum":"542bb122256046d2383d88fd341344a3b085fb58","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230512151912.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFz2/TL6t9xN6MqcnB3wQt47nVqGvK+DKGu35aqTZDEAIge0BZuYjW8ng7DRDHwKlHZNEejJEWps+Jvq6i5Kr1k6w="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230512151912_1683904758348_0.5119146324573782"},"_hasShrinkwrap":false},"0.0.0-rc-20230513054036":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230513054036","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230513054036","_integrity":"sha512-suj4KzybGZBXD2thp2/oFvHIy2Xx7TiDL3AXbaP0zSIJztH2OduodC82Vlp0yzO5w9/gpAsmBaC0TmGnirWLeA==","_resolved":"/tmp/1a3c50835769c271918dd771fcaac948/polymorphic-factory-vue-0.0.0-rc-20230513054036.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230513054036.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-suj4KzybGZBXD2thp2/oFvHIy2Xx7TiDL3AXbaP0zSIJztH2OduodC82Vlp0yzO5w9/gpAsmBaC0TmGnirWLeA==","shasum":"7a9bb8b5351d699bf08bb2a68974224587616842","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230513054036.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHuvtnVuu2ru2hdLaZH/8sluA0Mc0bj0w/cbGeSE+T7JAiEA+cOu0RAi3O4UCLJYZwn1PR4TlfFrEF00UMEfJbFvYgs="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230513054036_1683956442165_0.1774621329215078"},"_hasShrinkwrap":false},"0.0.0-rc-20230513211908":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230513211908","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230513211908","_integrity":"sha512-rCXBp1jq1hjIc6vf2YywrA+rlt0yzxjQGQXvw6RvNQ2tqFZqajWLabptQaAwZR7M0v7+F3o7ZZ8o9tK99qe4UA==","_resolved":"/tmp/73a98f0319f561d38bf86fdcd8e4dd2a/polymorphic-factory-vue-0.0.0-rc-20230513211908.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230513211908.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-rCXBp1jq1hjIc6vf2YywrA+rlt0yzxjQGQXvw6RvNQ2tqFZqajWLabptQaAwZR7M0v7+F3o7ZZ8o9tK99qe4UA==","shasum":"2e3bed79bc4a1cb2ae30b3ae42a8efa8130d0230","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230513211908.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbwu6TD1BJfcF7TVFAQk+R+zsniwHfqoBsPwi+QVk9dAiBmYySNiLfr6HaMV1JBpPSZFehxOvtmJjy56RlFLRpMYw=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230513211908_1684012754330_0.23424602901230984"},"_hasShrinkwrap":false},"0.0.0-rc-20230514134009":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230514134009","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230514134009","_integrity":"sha512-KyvdXoEN0DZGNUwwJh4wiwqsQQbMUg8QP6y1fXDSq4kgzY7CS5XBg10AsSFsKtonA60cRECYU8tzbkC65y0CEw==","_resolved":"/tmp/646f103fad3bbb6fd92c3fc6ce4252c0/polymorphic-factory-vue-0.0.0-rc-20230514134009.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230514134009.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-KyvdXoEN0DZGNUwwJh4wiwqsQQbMUg8QP6y1fXDSq4kgzY7CS5XBg10AsSFsKtonA60cRECYU8tzbkC65y0CEw==","shasum":"6122dabc92768952e065930d616e2c7d2c99fc17","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230514134009.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7+s8Nx55W4krlIJB80JJO0NYwmFkWfug6GvanQAiC5AiEAgnhOXcTm4vA3pheRcakz++p8kjXMzoyqq0F6az9x/3Y="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230514134009_1684071614198_0.20163166966915047"},"_hasShrinkwrap":false},"0.0.0-rc-20230515055546":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230515055546","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.5","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230515055546","_integrity":"sha512-evJSCFrdwUEAvgj11J2Qj6/8UcqhtpjDw2OVNJmwI4UvZ42kI5pS5SVCc3lIVdDR7FeanDjAFXIcdozYobOLoA==","_resolved":"/tmp/287ae7c8eb052fb2107f942bceb734ef/polymorphic-factory-vue-0.0.0-rc-20230515055546.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230515055546.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-evJSCFrdwUEAvgj11J2Qj6/8UcqhtpjDw2OVNJmwI4UvZ42kI5pS5SVCc3lIVdDR7FeanDjAFXIcdozYobOLoA==","shasum":"ecd325f76b1bd518edee76856fb839e1f4d5b1c4","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230515055546.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICQjGvm/QiUqOMVSpirl0tgJOhOKDOoqNse5tBNlNI+RAiA5EV4XavmliI6jQ4zcdnKq9y/Qg2fpjoGdjD8v+k9Kgg=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230515055546_1684130151384_0.9990025190190521"},"_hasShrinkwrap":false},"0.0.0-rc-20230515194440":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230515194440","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230515194440","_integrity":"sha512-KPIP0J9QcaQYucQ3od/Y0CdfbC37IG+u2TLpc6Re8Ae4XxfZsGwxYpDBYapQJ8YxKo01KLCjMPZr5VJYeoRr9Q==","_resolved":"/tmp/21ec73b026fcede4551fc5fcd715cd25/polymorphic-factory-vue-0.0.0-rc-20230515194440.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230515194440.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-KPIP0J9QcaQYucQ3od/Y0CdfbC37IG+u2TLpc6Re8Ae4XxfZsGwxYpDBYapQJ8YxKo01KLCjMPZr5VJYeoRr9Q==","shasum":"b44aeaa802cf9fb9e682f13b311cb5ea9321d2a0","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230515194440.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCf72lWVf2YX5w4PhfyUSoZxNRvlvNzxFFfBOmt5Rm35QIgNBAhUswHj1+LyixQpOt3nULj2GLcnnW4EULOMpNoRz0="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230515194440_1684179886568_0.9268419393879885"},"_hasShrinkwrap":false},"0.0.0-rc-20230515194817":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230515194817","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230515194817","_integrity":"sha512-l6HsWfKgmsoSqLRgqy3zAxJDd2w+MOZqelqQTLoU7ARRTlC8ftY+uL0HDr3ekhZWtwEtarp1TsewKp7iXxdBcA==","_resolved":"/tmp/eb0f04a62445e418f5151ca24723f11c/polymorphic-factory-vue-0.0.0-rc-20230515194817.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230515194817.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-l6HsWfKgmsoSqLRgqy3zAxJDd2w+MOZqelqQTLoU7ARRTlC8ftY+uL0HDr3ekhZWtwEtarp1TsewKp7iXxdBcA==","shasum":"a4e74275a5fef2b0a85a74dc461d33b5ff6f1c61","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230515194817.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsYHohkxHShYxEoQcWifdvradMrlwsaooIhC/3vm5BlAiEAs6Q0A11Y2pR5cL5hUBnt9bKoW9P1gq2jP1Hl4WG2Kzw="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230515194817_1684180103911_0.9707566042402511"},"_hasShrinkwrap":false},"0.0.0-rc-20230515195053":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230515195053","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230515195053","_integrity":"sha512-mk3ukpDT0IxrsE0G/kAxX/4c3XxS7jPgknyZzmEwsAi6+IjlqBCDX/5fqPiH6S6M1yvUoz9y6pDQFHEOUbUeAA==","_resolved":"/tmp/7f6a11cab3c39fea99d445ea5198c09c/polymorphic-factory-vue-0.0.0-rc-20230515195053.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230515195053.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-mk3ukpDT0IxrsE0G/kAxX/4c3XxS7jPgknyZzmEwsAi6+IjlqBCDX/5fqPiH6S6M1yvUoz9y6pDQFHEOUbUeAA==","shasum":"ae595eb2a83f39157b79c6bf5a474e899bf334d6","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230515195053.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGamDY6XrRhsWi4qx4H/5puneGzZg0MFLE5BeR0ir+EAiAYvMJnw5WlJxhwzBztyFkm7NLn0Ajjrey+usonYjdt5A=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230515195053_1684180258737_0.5523250225403264"},"_hasShrinkwrap":false},"0.0.0-rc-20230516065912":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230516065912","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230516065912","_integrity":"sha512-Q5WcwHZZwzKKMYO+YwlBnDrFeNBptl1SwZFv0rIatqMiFex1/3/4KxsjpD92s7V8UErBDaB7IkQL48AR75tk8w==","_resolved":"/tmp/51442be18adf28bf95aea15c8b771396/polymorphic-factory-vue-0.0.0-rc-20230516065912.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230516065912.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Q5WcwHZZwzKKMYO+YwlBnDrFeNBptl1SwZFv0rIatqMiFex1/3/4KxsjpD92s7V8UErBDaB7IkQL48AR75tk8w==","shasum":"c894b9c7de5b1b964ae5652b64901db53a9afed7","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230516065912.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMXlJu+MaAuJc9FMf/nboJ50z3R8Z1ek4lxpDdHmzReAiBAbTFzSYbo63fzRVbilwPOLlEc0NSHjzDd0kxN515xcg=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230516065912_1684220358783_0.3471284459748589"},"_hasShrinkwrap":false},"0.0.0-rc-20230516105509":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230516105509","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230516105509","_integrity":"sha512-mw0B+s9gjW8+UXQjs2R5fqkJaApk3Y7mWzrWJRc3KxnyweVvAMfSkXYGsCH1I68w9xTjLHw6MqhwL5jL2sg+zA==","_resolved":"/tmp/ac4e63dee36c09d0c5efd9511087f88b/polymorphic-factory-vue-0.0.0-rc-20230516105509.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230516105509.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-mw0B+s9gjW8+UXQjs2R5fqkJaApk3Y7mWzrWJRc3KxnyweVvAMfSkXYGsCH1I68w9xTjLHw6MqhwL5jL2sg+zA==","shasum":"314a5faf78031d58b65c57c059e3bf1b2ee9f5c8","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230516105509.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqQGjMcAcUqAb7K/9toe+GVtnkdILh/quph9vNw+r66AiBWK9JHrugNLXpFQ01DMkyoZbwwWma0W0I7SkR5UMGMjA=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230516105509_1684234514349_0.11954691830257991"},"_hasShrinkwrap":false},"0.0.0-rc-20230516225846":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230516225846","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230516225846","_integrity":"sha512-svY+G7aQFWSWArAh540XJEPRdpz6SqfVS3w8mBdObrdtEx9ExU83LNhbU/2DIHrAza35Ugme1nXAmE5I+iMYfg==","_resolved":"/tmp/57c4bf1a909143a6f44d03d712190d36/polymorphic-factory-vue-0.0.0-rc-20230516225846.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230516225846.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-svY+G7aQFWSWArAh540XJEPRdpz6SqfVS3w8mBdObrdtEx9ExU83LNhbU/2DIHrAza35Ugme1nXAmE5I+iMYfg==","shasum":"935b23a933e715d4389284c81e56c4880676960b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230516225846.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT8qNuqoWq6QXUMwaKUAwSYTw1Beq1GIm+EpmBYQOArAIgMC1R2jHa70wizM3Wvm6TjNHbcHVFNrvi8blVt1LzDkg="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230516225846_1684277933586_0.5774948929811083"},"_hasShrinkwrap":false},"0.0.0-rc-20230516230339":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230516230339","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.6","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230516230339","_integrity":"sha512-2Tn1z2A+dtt8kk5VoNDy4hUkHPLh94sRj75xDxYwoRI/XF6pGxdQ1oLi9uJ5YTyVNhXt3Ds/s7cbcWkUY55KmA==","_resolved":"/tmp/65a21c131336bbc4f463a65b8d0a1ca1/polymorphic-factory-vue-0.0.0-rc-20230516230339.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230516230339.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-2Tn1z2A+dtt8kk5VoNDy4hUkHPLh94sRj75xDxYwoRI/XF6pGxdQ1oLi9uJ5YTyVNhXt3Ds/s7cbcWkUY55KmA==","shasum":"3a8fb8df5aac317d5fb0c27da0bab961aa57dce5","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230516230339.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzksesf7HbWLDTpyjMyTy02ofQrzP9UDYawRwtSxmSJQIhAK1IoX00wMMKdzUGTqZCTIz0iHU0QlRr8tPDyex22wbP"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230516230339_1684278225778_0.1384751412849743"},"_hasShrinkwrap":false},"0.0.0-rc-20230516230604":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230516230604","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.0","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.7","vitest":"0.31.0","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230516230604","_integrity":"sha512-Uggfqs3wzqaiQZER7yFiAkn3ohZeMG+/M8Wz1uTtCI2MFRG/UmepPeTvB+ybx++fivB8UadBdyQNYGaoocAGiQ==","_resolved":"/tmp/200f4e4223e45d9936195974ac554ac2/polymorphic-factory-vue-0.0.0-rc-20230516230604.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230516230604.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Uggfqs3wzqaiQZER7yFiAkn3ohZeMG+/M8Wz1uTtCI2MFRG/UmepPeTvB+ybx++fivB8UadBdyQNYGaoocAGiQ==","shasum":"c190d19ce7e5e31d729c0733a7ecdd90e5e07a2a","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230516230604.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmQlC/W7si8aO67voH+gNAfzwc7fYiNDJjxmouJQBWuAiAEmeFKGSgklwuwOug4WrludxziJ53QCzQWV+X6H8kBvA=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230516230604_1684278369066_0.06142884467225729"},"_hasShrinkwrap":false},"0.0.0-rc-20230517232131":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230517232131","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.7","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230517232131","_integrity":"sha512-etLnW4nBdv5lpbgNvDyefyidpxJ0RiXuH6LGr9qvJ/JS52HwnduqRc3lDIa1XE6lLT59+WROFztpoew6x5efiA==","_resolved":"/tmp/5c2b2bc27ee18eb5ccf6626da6360e3f/polymorphic-factory-vue-0.0.0-rc-20230517232131.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230517232131.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-etLnW4nBdv5lpbgNvDyefyidpxJ0RiXuH6LGr9qvJ/JS52HwnduqRc3lDIa1XE6lLT59+WROFztpoew6x5efiA==","shasum":"4deb99f063e7b1fd438f0a78b434e0ffa4ca7fd9","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230517232131.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPQ7o3UdXYelhwImjy4BKZxbjRZOHFJNwB36R28muIogIhAPSkXAKvif6hCIsKBLIpIiD4aw1Ma0J9/7kzNjN5X92i"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230517232131_1684365697129_0.4292705487600732"},"_hasShrinkwrap":false},"0.0.0-rc-20230517232522":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230517232522","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.7","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230517232522","_integrity":"sha512-AF3gIE69piGFDl8p7Qet2uvFv2QTb/GQ/9NnCzC3SULM1ffSkoZutsjAD9k9UBn9xQSsN1jUOVlwNjfUacADKg==","_resolved":"/tmp/5af837420936e73c6445830ededd9f6d/polymorphic-factory-vue-0.0.0-rc-20230517232522.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230517232522.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-AF3gIE69piGFDl8p7Qet2uvFv2QTb/GQ/9NnCzC3SULM1ffSkoZutsjAD9k9UBn9xQSsN1jUOVlwNjfUacADKg==","shasum":"66eb7ec18d2ff639cac672b7bc4aee75a8527de9","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230517232522.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeV9GgD02S5PdOVaVtm61NBRuQSd6k3f52vO0DA6IozAiA0VKDpjxXO+4MbmmQMLc06TqNOij6tA+viGuR/LoDeSw=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230517232522_1684365928003_0.741831159520723"},"_hasShrinkwrap":false},"0.0.0-rc-20230518105428":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230518105428","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.7","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230518105428","_integrity":"sha512-EfU81+FQwokKspmfgFhPKqVBUiJwvb0YZCtOfYPqG5dVKz7fMyeYeL/ALCjpRmivLoJ3jjUeMSTtRinnteVumw==","_resolved":"/tmp/c088b5b76e0a1a18de35c36005b3f84f/polymorphic-factory-vue-0.0.0-rc-20230518105428.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230518105428.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-EfU81+FQwokKspmfgFhPKqVBUiJwvb0YZCtOfYPqG5dVKz7fMyeYeL/ALCjpRmivLoJ3jjUeMSTtRinnteVumw==","shasum":"56000c7011db03a6828dfe0f2b84491e32013f27","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230518105428.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC56APGnQip9Uwnf3LFAl1LJ8uRuK9GbkWSPfjNch47uAIhAJuDqj/Pk2sy0s4jCpPA5MjUGyPhhSAcPiOCIyzNjZaa"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230518105428_1684407275165_0.6006966811256698"},"_hasShrinkwrap":false},"0.0.0-rc-20230518150950":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230518150950","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230518150950","_integrity":"sha512-xKxp31+fG3I8nqgzgomgReR63AYF+b9CLJOvI4lzNv4Gm1QJOva5aXtMgQrKGRuoh7PQ+2cp/z9B0d1mTz7uaQ==","_resolved":"/tmp/9eac2ff5f9b0730acfab053547927294/polymorphic-factory-vue-0.0.0-rc-20230518150950.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230518150950.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-xKxp31+fG3I8nqgzgomgReR63AYF+b9CLJOvI4lzNv4Gm1QJOva5aXtMgQrKGRuoh7PQ+2cp/z9B0d1mTz7uaQ==","shasum":"c3ebfb252471efa38e6efc1cde45f9a347e18c0c","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230518150950.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGyr1+6taknf4+sg9RNTRDo5x1Btzjy4MHdaK3GCVGpAiAaCVcnfz4c91xJJhx1IRWaWJETjeK6uIEqmvacBtINvw=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230518150950_1684422598055_0.27937644249319815"},"_hasShrinkwrap":false},"0.0.0-rc-20230518151224":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230518151224","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230518151224","_integrity":"sha512-io0jQMJ3+qLJgZUxrDSxmPuhhFtHPipCpYVDTdnlpb0iy7See9DztDIDtkVgFgrjn/CtB/wTv/2xb3ClQsjTog==","_resolved":"/tmp/5fca046670af9eb010fc4bf6d92c9565/polymorphic-factory-vue-0.0.0-rc-20230518151224.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230518151224.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-io0jQMJ3+qLJgZUxrDSxmPuhhFtHPipCpYVDTdnlpb0iy7See9DztDIDtkVgFgrjn/CtB/wTv/2xb3ClQsjTog==","shasum":"187aca04ac7e3bf85fac396f15860e3d0cca39fd","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230518151224.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqvarCy+hASlEWl2GmP6ZkLBTwC+qCU3EYkHbBdbFrRAiA+XpZg91mAxycMm23SC+Zp8fxD2hI0mBrCAIrMF+8v8w=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230518151224_1684422750649_0.8141454076117409"},"_hasShrinkwrap":false},"0.0.0-rc-20230520025247":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230520025247","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230520025247","_integrity":"sha512-/gY9ekOC1JXaEvqLE+T/51GAuJ3onfW51BxGXcHMIQNuuTLmb1X5gnYte6i70uKr09Owns2nRzOkObnYKFhnXw==","_resolved":"/tmp/fbd5a3dd98efc267e5dd7da1aa55f86a/polymorphic-factory-vue-0.0.0-rc-20230520025247.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230520025247.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-/gY9ekOC1JXaEvqLE+T/51GAuJ3onfW51BxGXcHMIQNuuTLmb1X5gnYte6i70uKr09Owns2nRzOkObnYKFhnXw==","shasum":"bee4ad95f102d0445fdc6603c199360a955f5dc5","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230520025247.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICg7xSPezQ1HOXTCZc8wbih2EvDxHTz/jdliDEa3slcRAiEA7QyF4eEVxrryb66GghQwc4R7QYBnDUJcPuIYPQudsvc="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230520025247_1684551174722_0.8984956978875798"},"_hasShrinkwrap":false},"0.0.0-rc-20230522012940":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230522012940","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230522012940","_integrity":"sha512-++wdTy2/GF9nh3EM8TL/+ocgwirrFvb3MqkO0tBunISjDnI54lL5Op3mfAQyms9hcHRtvbwe1aFRi74UfIQQlg==","_resolved":"/tmp/3c5b7f1ae5d24e8bced4683639c1fa84/polymorphic-factory-vue-0.0.0-rc-20230522012940.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230522012940.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-++wdTy2/GF9nh3EM8TL/+ocgwirrFvb3MqkO0tBunISjDnI54lL5Op3mfAQyms9hcHRtvbwe1aFRi74UfIQQlg==","shasum":"22c4745ec9032773e1c580a6bf3304f4199ca634","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230522012940.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxWr6zunOuW4+NxvXaW8oc1vUnB8qzxCkiEogzKfO0wAIgfIZnimosPdDWLn23AYqWgZufZNH+3EunAl5tD6JT96E="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230522012940_1684718986842_0.40066846155257174"},"_hasShrinkwrap":false},"0.0.0-rc-20230522013254":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230522013254","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230522013254","_integrity":"sha512-JNO6+2zXhhBNK1HuRDjAZ4rnyB2f1KU0ISfE6VOQ5pL4gSknIStqiq5hi0W9MtrPBw4Tb8+On8jBJ4sP0/kbQA==","_resolved":"/tmp/fb28cc32972102addf16023e38849721/polymorphic-factory-vue-0.0.0-rc-20230522013254.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230522013254.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-JNO6+2zXhhBNK1HuRDjAZ4rnyB2f1KU0ISfE6VOQ5pL4gSknIStqiq5hi0W9MtrPBw4Tb8+On8jBJ4sP0/kbQA==","shasum":"236c0c35e1f986ca6cf9ae7c6a9ad59bc2c67d1b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230522013254.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHwSmjBb9slZ9Qg2OiFY/qidsXNq9PpzDLi6l4LDGjWgIhAKv3i/sdaqSwhTLAbMdy9uu8/e5YnTpX6JswtHcUjCRU"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230522013254_1684719179806_0.9299085446973634"},"_hasShrinkwrap":false},"0.0.0-rc-20230523010200":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230523010200","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.5","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230523010200","_integrity":"sha512-LqRS4lPFwvg+c2ZJUlSb5ShQZPK2QyQuBhlVKQG7ReD4dJRR2r6wz7j0fBLJr9E4OCbyk+tc1tj0o0XunbkERQ==","_resolved":"/tmp/5844edd153ad7dac944ac4eda3922a60/polymorphic-factory-vue-0.0.0-rc-20230523010200.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230523010200.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-LqRS4lPFwvg+c2ZJUlSb5ShQZPK2QyQuBhlVKQG7ReD4dJRR2r6wz7j0fBLJr9E4OCbyk+tc1tj0o0XunbkERQ==","shasum":"a1d8f9f67a3a6650bd5e22aff3121b8d647e920b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230523010200.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZmW8MaH0t0hcOQLgtnwsDo69wa4gCRT8grBqYaUUkkgIgNLv94SBVvZ4CgLlQ7BMG+Tcvq//3Z4YpaCw/+BcwZLs="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230523010200_1684803726085_0.2940444321147404"},"_hasShrinkwrap":false},"0.0.0-rc-20230524004225":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230524004225","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230524004225","_integrity":"sha512-6HxqdUIPogIs+GbH4KA90ji74oQ1jI9r4YdbedtyOBc+IIeJ6LWyFykbaRWM0UtASFg15TPNeeNotWZSASJC1w==","_resolved":"/tmp/2f887d58fad1b00f99714e54fcead803/polymorphic-factory-vue-0.0.0-rc-20230524004225.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230524004225.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-6HxqdUIPogIs+GbH4KA90ji74oQ1jI9r4YdbedtyOBc+IIeJ6LWyFykbaRWM0UtASFg15TPNeeNotWZSASJC1w==","shasum":"53d6cf3d9e123e4b9437cffe17ac72b19b64a464","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230524004225.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB+OmZ6bEBDC5WsT4k5IU9iSxI5g2BMDDnRWQ5azq2WwIhAKLgXX4q26jXZdlUGZNpctd/0DDRNqO6kD95hknaWP8+"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230524004225_1684888951724_0.16626470182463882"},"_hasShrinkwrap":false},"0.0.0-rc-20230524004518":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230524004518","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230524004518","_integrity":"sha512-jHR89JfPOghHaFUup1LhTyIEHu5DU8NaeAbV6tj5h8H7GyMgwGv3LcP6lgy1wFfXZG8n9i6Saj1/6ZvnP3Dgjg==","_resolved":"/tmp/9c0a244fa958ce3a0ec1422b03e88f24/polymorphic-factory-vue-0.0.0-rc-20230524004518.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230524004518.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-jHR89JfPOghHaFUup1LhTyIEHu5DU8NaeAbV6tj5h8H7GyMgwGv3LcP6lgy1wFfXZG8n9i6Saj1/6ZvnP3Dgjg==","shasum":"6519a19db5dd5cc72e3d7b8a592a6464ce8bdb2f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230524004518.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFT9/iDwLAMB5Oedf6xcjDtsaP+sd/QIt1d8XmoSbFXxAiARKV+vEP9LoWNd1PeF/8yM1nGgPauSoq9muvQ/2vL22g=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230524004518_1684889125691_0.09919235324317888"},"_hasShrinkwrap":false},"0.0.0-rc-20230524204025":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230524204025","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230524204025","_integrity":"sha512-hsSJ6xp87oGxeXfwffuZIH3yrj9e4Q3OAYJXJuuggJBAT4UrI0jK7E3kXrZLy/bT0T1QrN9O0TOfizbxJ+MKZA==","_resolved":"/tmp/0330cb4bef97299ca3d8910d8eb480c7/polymorphic-factory-vue-0.0.0-rc-20230524204025.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230524204025.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-hsSJ6xp87oGxeXfwffuZIH3yrj9e4Q3OAYJXJuuggJBAT4UrI0jK7E3kXrZLy/bT0T1QrN9O0TOfizbxJ+MKZA==","shasum":"afaaa55f99a2c6773f2d483704bd5ee15e4dbe9f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230524204025.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWyKpnyzzIaO4gFq4x8e7gQVTFVhsrqAPLX+ZOBdVK6AiEArbYLgrcvpor1v1BelpJ9XVItgyQ5vK23on61YHFXgj0="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230524204025_1684960830914_0.22772961609961273"},"_hasShrinkwrap":false},"0.0.0-rc-20230526024915":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230526024915","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.8","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230526024915","_integrity":"sha512-vbE7ghVYXHB0/hQoOFEaQZLTg/99JbXMjDeU9qOnmA+BaE8S3+BD/6wOJqKXAdUm6QXsJSR4EnLIJUy1rVSKqw==","_resolved":"/tmp/b66d329e79903c37f317d8eb365b0dee/polymorphic-factory-vue-0.0.0-rc-20230526024915.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230526024915.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-vbE7ghVYXHB0/hQoOFEaQZLTg/99JbXMjDeU9qOnmA+BaE8S3+BD/6wOJqKXAdUm6QXsJSR4EnLIJUy1rVSKqw==","shasum":"15ea3b0a865373f2d6eb2efaec4055493cefd0f6","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230526024915.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR8dDY63293ncKyejlPIRtKr/XY5QFIWs5FU3ujQiVQgIhALgeJI39anvtj5YJVnIRHjV8y2QYRR+yxQDWLpufg59S"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230526024915_1685069361476_0.5392184382464975"},"_hasShrinkwrap":false},"0.0.0-rc-20230526193454":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230526193454","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230526193454","_integrity":"sha512-x21vLCyAd1A3bCquBsSpDiG8PwYuHUHBPlTe2QWxIzJeCckBTP3hQgxM0P6bbj/u5ihYaTvgMC2xzeTRfNkYvw==","_resolved":"/tmp/e8df2dca5b9abbf4c9067ecc7e9b7ddd/polymorphic-factory-vue-0.0.0-rc-20230526193454.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230526193454.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-x21vLCyAd1A3bCquBsSpDiG8PwYuHUHBPlTe2QWxIzJeCckBTP3hQgxM0P6bbj/u5ihYaTvgMC2xzeTRfNkYvw==","shasum":"f0b019cc3c4322b51b43908b8750dd877c04a7a4","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230526193454.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsdX3TIYKHsJePFqJ+0FMasmXnzNcLeJMwfpSMLTO0JAIhAKOLzQ3FR0qqa90OUoP8oq/4Au/pB2uonh1uPB1jHzYx"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230526193454_1685129700531_0.5373187429452986"},"_hasShrinkwrap":false},"0.0.0-rc-20230527021257":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230527021257","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230527021257","_integrity":"sha512-fLXEsZ79hy4od7CCc7HhXhal7X3Bhu5/pub+hMoXoEiAjZ6sfF2hlLKK9BAWAbfnNbeCdpNLTtPmAHgJ0fEMiQ==","_resolved":"/tmp/587e5e67a3cd0d1e9a3100664c3361fc/polymorphic-factory-vue-0.0.0-rc-20230527021257.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230527021257.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-fLXEsZ79hy4od7CCc7HhXhal7X3Bhu5/pub+hMoXoEiAjZ6sfF2hlLKK9BAWAbfnNbeCdpNLTtPmAHgJ0fEMiQ==","shasum":"a3fb62954936931991f49980857151378fe4ca5b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230527021257.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+cOo2VQ8bHtsHS46QTeS+x3tBmppNFJUELVHWrF8X9AiEAxYyPyBuKxUWQDvDJ2amUM6L4ySaBpoUf5ReIbqUUQIA="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230527021257_1685153583524_0.704848565775174"},"_hasShrinkwrap":false},"0.0.0-rc-20230527141535":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230527141535","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230527141535","_integrity":"sha512-hz8pswzSC8XMuYEIQLy2ui3VNr2bvMcjseOYFiRHvdVxBC9CWR6s97EIOVNPkueMjrkLGnqgg2SM4gEWS17HWA==","_resolved":"/tmp/e61e47180dcd22da28dd3300135c078a/polymorphic-factory-vue-0.0.0-rc-20230527141535.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230527141535.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-hz8pswzSC8XMuYEIQLy2ui3VNr2bvMcjseOYFiRHvdVxBC9CWR6s97EIOVNPkueMjrkLGnqgg2SM4gEWS17HWA==","shasum":"bd37611fa154d73af582b41a79ad899f1b0b134a","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230527141535.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC4wUsZqsaJRaaLPB0l0HI3KqcxMnS6erG81JzDllgT3AiEA75GkBglL9DCc/SsPixJ5AQn3qTJ1A4Lkog49B2qdpOA="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230527141535_1685196940683_0.8215718751243728"},"_hasShrinkwrap":false},"0.0.0-rc-20230529202751":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230529202751","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230529202751","_integrity":"sha512-9queK55IPZshojUSxcTqYEHiCpGTVFVc66u0xBEo97G0JNRg0nnK+pXlcPfoPKetA0ahFFsW/ylrFuqoxRLCsQ==","_resolved":"/tmp/efad8031d53624b9439385cd4c6e030a/polymorphic-factory-vue-0.0.0-rc-20230529202751.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230529202751.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-9queK55IPZshojUSxcTqYEHiCpGTVFVc66u0xBEo97G0JNRg0nnK+pXlcPfoPKetA0ahFFsW/ylrFuqoxRLCsQ==","shasum":"23d7f1c61cf78f73433a7cbe9b1a04eb5e3184f1","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230529202751.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiFDJfMEJNDT3hMyFv46bLAz31Az27HGhWCMcRj7mEEAiEAv2YO343G6GQYUg7bLraa7PYr7DGmgR6AZiMK9uhW6OI="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230529202751_1685392077052_0.5640341962174045"},"_hasShrinkwrap":false},"0.0.0-rc-20230530114542":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230530114542","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.1","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.1","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230530114542","_integrity":"sha512-zi8YUWRwy0UtOky4vXJw8IO3bUJYTeeniZs4+FGWpVytPgYDImdAUfuZzXO/EnFh7H/8XQbzVHip14ktrN1FRw==","_resolved":"/tmp/3203621fa7e14124b0f2a79be01bf6d0/polymorphic-factory-vue-0.0.0-rc-20230530114542.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230530114542.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-zi8YUWRwy0UtOky4vXJw8IO3bUJYTeeniZs4+FGWpVytPgYDImdAUfuZzXO/EnFh7H/8XQbzVHip14ktrN1FRw==","shasum":"fcfc056e6b011025b38a351cd9626eedc5d67ecd","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230530114542.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM3bPNSFeT2WObLgXe04mILMddvFqDkiKNyYSCnfclnAIhAPBghnBdfp89oLIzBxv26IbVqteWREEcACaVPRjH0jeh"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230530114542_1685447147638_0.2276445533331044"},"_hasShrinkwrap":false},"0.0.0-rc-20230530151204":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230530151204","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.2","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.2","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230530151204","_integrity":"sha512-bzidBuggIPoADf5hLK/iKen345Q1xw3q7S0EHR9Mf20nZMOkh/iZkh5Wp+mahgmwKImn+YZijQ74DbOlW3IXJw==","_resolved":"/tmp/da467ffd6670227fab86950570dcc21e/polymorphic-factory-vue-0.0.0-rc-20230530151204.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230530151204.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-bzidBuggIPoADf5hLK/iKen345Q1xw3q7S0EHR9Mf20nZMOkh/iZkh5Wp+mahgmwKImn+YZijQ74DbOlW3IXJw==","shasum":"b2233d84779456a03339a35c7132adcbbce94d7c","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230530151204.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRtIJbQXdMIwEa4pz5ITFlB55RogrzuFt011JTBki8pQIgP3dEGUYUl5VC60sW7grOEbPvvlSJTNIjCKa8pHh73M4="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230530151204_1685459530540_0.13573669709491876"},"_hasShrinkwrap":false},"0.0.0-rc-20230530223749":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230530223749","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.2","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.2","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230530223749","_integrity":"sha512-DxaB9AbbIyIeWgf1FfsfVZ2m7djaQVKuYRQOY0ZabkHQaStu0gwfWp7Hsn0GgPt1kas/Xr60BOKnhZktpZ8Qlg==","_resolved":"/tmp/3ac5046c4ad3fe019b6bd5d364fd8269/polymorphic-factory-vue-0.0.0-rc-20230530223749.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230530223749.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-DxaB9AbbIyIeWgf1FfsfVZ2m7djaQVKuYRQOY0ZabkHQaStu0gwfWp7Hsn0GgPt1kas/Xr60BOKnhZktpZ8Qlg==","shasum":"8f92117cdf0e520f143cd816c741a77693dd0fbd","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230530223749.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfJ/W5xljotkrJn7jk20xpzGWReGwpQyVl/XhirnWbgwIhAKSg0G2qpcGO8gKpnI2tqCCAYYg3dN+XjNrbleik8prU"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230530223749_1685486274565_0.6190626553273206"},"_hasShrinkwrap":false},"0.0.0-rc-20230531153928":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230531153928","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.2","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.2","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230531153928","_integrity":"sha512-Ef1yd4pq7URmxt04eiWU2GQRXh3wUym0eFvOTsCPFC7UJhkZUkmvXx79BeOgUOKxWYJyACMiBonI7yvf08WwaQ==","_resolved":"/tmp/8cbfb2c1a3cf7b29a5a6bf83269cca33/polymorphic-factory-vue-0.0.0-rc-20230531153928.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230531153928.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-Ef1yd4pq7URmxt04eiWU2GQRXh3wUym0eFvOTsCPFC7UJhkZUkmvXx79BeOgUOKxWYJyACMiBonI7yvf08WwaQ==","shasum":"f976c2d99b6fe548bf8d4429236d43661280d0e5","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230531153928.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc2Xv0y75HdLpaTMx5wE/pLc/V1hN3bRQjaljdgTzlEgIgcTXk2smbRUrEXjaWC4Fzk6sisUmcKDbfEqk/V9qTu6A="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230531153928_1685547574020_0.690009599309306"},"_hasShrinkwrap":false},"0.0.0-rc-20230531165538":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230531165538","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.3","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.3","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230531165538","_integrity":"sha512-0wAkyNm95RtEDv+hQlQB4i+/OLBINVNnstm7fRt8Bt6Phd+wlvA/S+UVyyhKYKUdS3ugCo9kiF5yvVcYId5x2Q==","_resolved":"/tmp/d9215d749ade1fb1d9050cba7077ca69/polymorphic-factory-vue-0.0.0-rc-20230531165538.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230531165538.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-0wAkyNm95RtEDv+hQlQB4i+/OLBINVNnstm7fRt8Bt6Phd+wlvA/S+UVyyhKYKUdS3ugCo9kiF5yvVcYId5x2Q==","shasum":"a31b31988852b0c4052ca80a81831dcd3b266dd8","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230531165538.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRg1l3uEWWNkPgzFZJ6ezqIMDqhhjlX7xU1KPI0JOliAIgJfZBwWkaFrkLF0MF40SyPrUKW15VP4p3QLiHlH5VU64="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230531165538_1685552144972_0.05388386038405102"},"_hasShrinkwrap":false},"0.0.0-rc-20230601012146":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230601012146","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.3","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.3","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230601012146","_integrity":"sha512-2CeZ3LnhXI+07nzh2C0nG/IyiEMhBnHi5WQuwSJXninnFg/ilKq6wMot63EyeGRReyVSPkT9pk9O5PZUtzVCvw==","_resolved":"/tmp/f48bd3c386866baacadb659d84496548/polymorphic-factory-vue-0.0.0-rc-20230601012146.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230601012146.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-2CeZ3LnhXI+07nzh2C0nG/IyiEMhBnHi5WQuwSJXninnFg/ilKq6wMot63EyeGRReyVSPkT9pk9O5PZUtzVCvw==","shasum":"2de9e8874d19abeae39ae7f030c86ecff16121ac","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230601012146.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJeUCIFhq6mKXfg1YWSo73JERFYARvmuo6IfnPgI90/QIhALMcnlkRk5I6DIjSXNDYmiE9KASs8zRou7TQXRHEeXhB"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230601012146_1685582511673_0.2584813647390649"},"_hasShrinkwrap":false},"0.0.0-rc-20230601125021":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230601125021","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.0.4","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230601125021","_integrity":"sha512-V/4Oqeb4GQxxWqg2GTylPj/WOna2gwxrr4hYbvfxx47EyXm27ffG9mNZ/Y0tyKayJQ+FuV3nODJW4vNnNh3KhQ==","_resolved":"/tmp/f0c9d6e5a04a8fb17dd513799a4dad04/polymorphic-factory-vue-0.0.0-rc-20230601125021.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230601125021.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-V/4Oqeb4GQxxWqg2GTylPj/WOna2gwxrr4hYbvfxx47EyXm27ffG9mNZ/Y0tyKayJQ+FuV3nODJW4vNnNh3KhQ==","shasum":"fc091ddd0e6d200defa94385b08b2bdd8a340884","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230601125021.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAudTqWmpXSXnLpJXCo9ALRcJdbsGsnk+7M9Ft756u9iAiBsh1o2Slg5jCu8nHJYpFcNqGqyhamJwTOT+ALayLpVUw=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230601125021_1685623828243_0.8797414359106077"},"_hasShrinkwrap":false},"0.0.0-rc-20230601210441":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230601210441","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230601210441","_integrity":"sha512-09bYdX/K2Rnwzsld9j4MO6JmUKPl2HOT7yLvx4M3Mu2JavmKmgZ2DAIeHc2Aq3nHFnFBlbq8ETcf9e0d8+PSlQ==","_resolved":"/tmp/cfeec685f1d490bf0e949091677859e0/polymorphic-factory-vue-0.0.0-rc-20230601210441.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230601210441.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-09bYdX/K2Rnwzsld9j4MO6JmUKPl2HOT7yLvx4M3Mu2JavmKmgZ2DAIeHc2Aq3nHFnFBlbq8ETcf9e0d8+PSlQ==","shasum":"d3d0f9cd6bed15bf73c71b0cf714f71349eb091f","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230601210441.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdrpxiDddUoyaO8IS+ZLxMUkPL6v+I/uJJ42YsGzuzGAiAZa/5e9rVmiSby9nRLpc0o9+Yo3HvkSS1JzqICRxjLCA=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230601210441_1685653486794_0.45956497213318603"},"_hasShrinkwrap":false},"0.0.0-rc-20230602002236":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230602002236","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230602002236","_integrity":"sha512-P1+UsXWmT6wXoE3775hh40FAdvK7Wnmt8yDD4TgaOz4beeBN/iuS/Ktl9VRv3guG3sPKPm6WekBIyh3fsjYr4w==","_resolved":"/tmp/2b1a8cde2c286fc4a70bef9e8c2266d9/polymorphic-factory-vue-0.0.0-rc-20230602002236.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230602002236.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-P1+UsXWmT6wXoE3775hh40FAdvK7Wnmt8yDD4TgaOz4beeBN/iuS/Ktl9VRv3guG3sPKPm6WekBIyh3fsjYr4w==","shasum":"1e74397b4187a819a84fa12f9ad3438465c926bc","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230602002236.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE91bfQZdY1v8vrRjisLfX8oTGMLbli8ro/w9s+bfHJCAiAljmjJeAtV7chAeRsZPVnG61wUEwOseTF4nPQSOmLeeQ=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230602002236_1685665362128_0.28568332586648704"},"_hasShrinkwrap":false},"0.0.0-rc-20230603043643":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230603043643","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230603043643","_integrity":"sha512-7Cll0Pa7zXJpTfwS5B6PTit9c8t6XsvX06iy+ESn2355MWgERJW2i6KdRLXiqtjC6UkQof438s2sIPlH/lKyEQ==","_resolved":"/tmp/bccb04e22268421e3b75e7a281bbfd48/polymorphic-factory-vue-0.0.0-rc-20230603043643.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230603043643.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-7Cll0Pa7zXJpTfwS5B6PTit9c8t6XsvX06iy+ESn2355MWgERJW2i6KdRLXiqtjC6UkQof438s2sIPlH/lKyEQ==","shasum":"c138baeba25954a923bba1bad5f381a38d1bd866","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230603043643.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDamrSNoLiofPzEWgKGBFvGFZVIFtJAjDO3+BfarHgE5wIhAOX1KHPYE1RApiFJkhjdRjwWyEeAgFIj7S0IMAyh/Zcl"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230603043643_1685767009182_0.3743347308352831"},"_hasShrinkwrap":false},"0.0.0-rc-20230605213305":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230605213305","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230605213305","_integrity":"sha512-kk01hh02zLaFEUfE++ryOBRcbuCik7LSGpg87Rru4uSyROGYaHvaU8VMDWya+mbzvTqOrMOPYv5ol+ztXpOZRg==","_resolved":"/tmp/9f7309bbfe73ddf5dd66696f5b6ebaa9/polymorphic-factory-vue-0.0.0-rc-20230605213305.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230605213305.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-kk01hh02zLaFEUfE++ryOBRcbuCik7LSGpg87Rru4uSyROGYaHvaU8VMDWya+mbzvTqOrMOPYv5ol+ztXpOZRg==","shasum":"fbbf027de5ff0fff59f168fba3f9274c468b67f4","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230605213305.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEJD7aRal1vtXhBtGvsxctV7mS1mTRy1O2LIlTXkqgv6AiEAjsejKqdx7oYb3LdcOLnXPxr0rNZzWkDSexKDb7KXD44="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230605213305_1686000791617_0.05768425966079738"},"_hasShrinkwrap":false},"0.0.0-rc-20230607002905":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230607002905","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230607002905","_integrity":"sha512-wAFKiJ0vucYKFV0pvJaLK5IsNT+mJgeIMA9j/PYrDeL06AaxsuxU77n2zjVSMkXdo+Erh/ey2HUbVoHhj23Tng==","_resolved":"/tmp/19faa7dfb901fc7a37cce312d5a7674b/polymorphic-factory-vue-0.0.0-rc-20230607002905.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230607002905.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-wAFKiJ0vucYKFV0pvJaLK5IsNT+mJgeIMA9j/PYrDeL06AaxsuxU77n2zjVSMkXdo+Erh/ey2HUbVoHhj23Tng==","shasum":"6eaf0483168756f5f8a8bab0c9cb2dd5bf5e2304","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230607002905.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyh/MzVJBBxAnfdd+B11Z2S9afEHwk6eQiACbw/IkgTAiAmtvfYMP0u8IasArlD6YrKpqcWP11WmyUycnSxO0lZ6Q=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230607002905_1686097751305_0.19184842107893307"},"_hasShrinkwrap":false},"0.0.0-rc-20230608051033":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230608051033","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230608051033","_integrity":"sha512-tE+LSxwdg4tRojJxrb4Z8k+aMADjRIdY7FPWmlHKmpgiLPkVVjyv/UEH88ZP/duIwBQbEbeaIgveO0h9bmTsgw==","_resolved":"/tmp/7117bbb877d2085eadd7ef017207c552/polymorphic-factory-vue-0.0.0-rc-20230608051033.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230608051033.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-tE+LSxwdg4tRojJxrb4Z8k+aMADjRIdY7FPWmlHKmpgiLPkVVjyv/UEH88ZP/duIwBQbEbeaIgveO0h9bmTsgw==","shasum":"1b4de1cf56bdecc2e295c2e1263cdd47b25f825e","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230608051033.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSxB8tqw8+i8xIhTXQKUugkPRYOkQApO2DiqpNw5WWFAIgKijwdFCAvLx3haidRG4e/Fc50FywlFmt89AQGNO35KI="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230608051033_1686201038465_0.834137840922972"},"_hasShrinkwrap":false},"0.0.0-rc-20230609181245":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230609181245","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230609181245","_integrity":"sha512-x+323MKp+S2UFZFBbqIFA29ovotZMfSqZFemhFiJ1uXO5IB4PzpDDJw2/i3YSBaTBMJ5ikgSNkjWBW1NeyDPBw==","_resolved":"/tmp/7eb19b0abac5502f2943579f8c2024ea/polymorphic-factory-vue-0.0.0-rc-20230609181245.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230609181245.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-x+323MKp+S2UFZFBbqIFA29ovotZMfSqZFemhFiJ1uXO5IB4PzpDDJw2/i3YSBaTBMJ5ikgSNkjWBW1NeyDPBw==","shasum":"47a631530837ce35da34e359e19fddf5a7f5a2e2","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230609181245.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFhyIkQRJa8hjPxM6iN1GXJk1b36GmlRY/Y2TFC04xS8AiBht3YJkW1MYXgkyCY37yq5kOmwwEC3UN25mPffxWYmgg=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230609181245_1686334371920_0.2857810478760625"},"_hasShrinkwrap":false},"0.0.0-rc-20230610002950":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230610002950","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230610002950","_integrity":"sha512-WFSJ7GKxG3EH5YGlVWtRROD2xa7fvZLIid28Lqcp/zoio5nUf/UY3MkKM4d1jaX4LxgODxx6frVX92rD7gOW8Q==","_resolved":"/tmp/7751f02a4ddd4cecdf224fd978385a13/polymorphic-factory-vue-0.0.0-rc-20230610002950.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230610002950.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-WFSJ7GKxG3EH5YGlVWtRROD2xa7fvZLIid28Lqcp/zoio5nUf/UY3MkKM4d1jaX4LxgODxx6frVX92rD7gOW8Q==","shasum":"568d1fae21da051876e2ab6604b3f37256274753","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230610002950.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9uZxt+gSJDPOC4lRL1ryc+yK53+frOCIRbvCPTrg1+AiEAiKflal4fDVTKXUsLiR6Pu/bH9mpIMUOWtVmyFieJxiA="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230610002950_1686356995644_0.14309124660083783"},"_hasShrinkwrap":false},"0.0.0-rc-20230610063533":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230610063533","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230610063533","_integrity":"sha512-hTlN7b0Tcko8wVkBMOYPIBAl/yQf1czWSTP8FcSFF1oPmKa1ydho3hfvceIM4yHSSlSSIZnWLgD7P2/3pKyyjQ==","_resolved":"/tmp/75934f07e9a902d237d847178db832fc/polymorphic-factory-vue-0.0.0-rc-20230610063533.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230610063533.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-hTlN7b0Tcko8wVkBMOYPIBAl/yQf1czWSTP8FcSFF1oPmKa1ydho3hfvceIM4yHSSlSSIZnWLgD7P2/3pKyyjQ==","shasum":"4961cf0f85a189dc3b4403c58cb0e28baaeda021","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230610063533.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeRaxUz9nHF8OCfTqrPb2TxzGbmg0l26+3gmWpwuzjbgIhAPiU6YihhTaGa5XUF/DruvbiDa2vkh+sMZP7HhouuyYE"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230610063533_1686378939528_0.21092412742748134"},"_hasShrinkwrap":false},"0.0.0-rc-20230610124844":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230610124844","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230610124844","_integrity":"sha512-aRUebELvtCsjxY1cxnLF1ubQcjk4cWAmLuLPQt6xhEGRTAiafgPyXKdm1vnaGZ0vOWHfeBTk0s54nyBbjsDWnA==","_resolved":"/tmp/e80986460f397afeb2e3b647cf73ac3b/polymorphic-factory-vue-0.0.0-rc-20230610124844.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230610124844.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-aRUebELvtCsjxY1cxnLF1ubQcjk4cWAmLuLPQt6xhEGRTAiafgPyXKdm1vnaGZ0vOWHfeBTk0s54nyBbjsDWnA==","shasum":"abf20963dc15e3f06a3765e5640864f544d1bd74","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230610124844.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFu19AGEkt8tTSqWNhiT/txCKp7pVYLS9Nib8RGDiF4DAiBBoTdDLUnObdyajLI/H4PsdHky7a9ghw1qduNEszpzTA=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230610124844_1686401330232_0.8984179120581914"},"_hasShrinkwrap":false},"0.0.0-rc-20230610193006":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230610193006","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230610193006","_integrity":"sha512-0kEGW8YGWOkzFsbaUj8GGlwrL/nyS4Tx5eaC0zdbWryWgDVVrkgTJU3Lxtx4LqfAkvW8t+PXrzfqn/hRZ/8LDQ==","_resolved":"/tmp/627b5b1e3699d981b48d936fb41d6c4c/polymorphic-factory-vue-0.0.0-rc-20230610193006.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230610193006.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-0kEGW8YGWOkzFsbaUj8GGlwrL/nyS4Tx5eaC0zdbWryWgDVVrkgTJU3Lxtx4LqfAkvW8t+PXrzfqn/hRZ/8LDQ==","shasum":"d3fe53992ab92faf9b39ac41a50bef49cd065f26","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230610193006.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFr8SwodNPq/8vvb00rEtjjsp+yKjyzRmrc07FSoKJp+AiBh860Cz0NhJOkVTUTkv+REKce3peqX2oY1zvkZshSnzg=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230610193006_1686425412155_0.007730932452138184"},"_hasShrinkwrap":false},"0.0.0-rc-20230612115703":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230612115703","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230612115703","_integrity":"sha512-79Xf3PFBdUzMb/yUm3V3PxmBCB/9TLZvNhKQhXUc5s+3nhSLyDVN2axWRziA9mOm+4XOCHBQEMeQYPVzjvdQSQ==","_resolved":"/tmp/f886034bce13d48621ec8a5da22ea7af/polymorphic-factory-vue-0.0.0-rc-20230612115703.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230612115703.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-79Xf3PFBdUzMb/yUm3V3PxmBCB/9TLZvNhKQhXUc5s+3nhSLyDVN2axWRziA9mOm+4XOCHBQEMeQYPVzjvdQSQ==","shasum":"e8979b7dbf0735d9aa67544ed2d9eb805fc07624","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230612115703.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbWQr22ENgr+YIQ3Hn0TQyg2HV6p493nVsajmLBLiZjAiAnAd7KC3Epn2eL65xK/KHflf/X2kRnA2R/kzgL9LMxdw=="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230612115703_1686571031583_0.6713268382832049"},"_hasShrinkwrap":false},"0.0.0-rc-20230612214812":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230612214812","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230612214812","_integrity":"sha512-hP8reo/wW80qWjbUWf53hgfFrP4ZhRqYnt23XEIvsohZH1GGAZSXaNDskTtDpAbar0V3cewuMuNEf8mrvakVpQ==","_resolved":"/tmp/0ee549b3de5fd448aa315a47c895a4aa/polymorphic-factory-vue-0.0.0-rc-20230612214812.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230612214812.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-hP8reo/wW80qWjbUWf53hgfFrP4ZhRqYnt23XEIvsohZH1GGAZSXaNDskTtDpAbar0V3cewuMuNEf8mrvakVpQ==","shasum":"43118c6fa67fce2954364789088a834972347623","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230612214812.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjRSJi0Mix63pli0cbucFtRFqrAXmKwCvrz6hXQ7lLzwIhANkZKtzqpSVnSS46KHkUYvebV4QTHS3pTPaD9u9egILw"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230612214812_1686606497699_0.15565304165799976"},"_hasShrinkwrap":false},"0.0.0-rc-20230613003612":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230613003612","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230613003612","_integrity":"sha512-o3FU85aY28HFWcOxJCMBE0IO8mxaEHKYqoULakY5ee6ir60U9sU5VW8s2F0SxxrZt0jJNdPtqI94nAqbJc4S1g==","_resolved":"/tmp/bf40c96e7b94d9e685e6bab13be2c845/polymorphic-factory-vue-0.0.0-rc-20230613003612.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230613003612.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-o3FU85aY28HFWcOxJCMBE0IO8mxaEHKYqoULakY5ee6ir60U9sU5VW8s2F0SxxrZt0jJNdPtqI94nAqbJc4S1g==","shasum":"a39967b3de1e4d767e91b42b38906d111d8aee81","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230613003612.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY6rQ29hS3Gk0lKBWuawY4ALGm3R74sQcEKQIS/H5aMwIgWIg18MjPyFUSMyZuBlCyk3sxsQRjKehjLUeHApyebUs="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230613003612_1686616580112_0.8645436101973751"},"_hasShrinkwrap":false},"0.0.0-rc-20230613085902":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230613085902","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230613085902","_integrity":"sha512-h1ACAysA2ZXuFZxx4z0dgpEmamWr5DHoqTxgpbyk3Cb3d7SF/Gm9HLyH8dDMXmEoWh9hGX2RyIECeDHSXdeyfg==","_resolved":"/tmp/970cefc2adaddbd88a51d546bf9dd918/polymorphic-factory-vue-0.0.0-rc-20230613085902.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230613085902.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-h1ACAysA2ZXuFZxx4z0dgpEmamWr5DHoqTxgpbyk3Cb3d7SF/Gm9HLyH8dDMXmEoWh9hGX2RyIECeDHSXdeyfg==","shasum":"6def03877c21723492d5f9db0148635ac9c4de99","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230613085902.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLf8GMRWIt5BQCTVj4dTr8qxRA2pjUqjSmzW/DOrKoFgIhAKmZG4kc1rFErTY412zCDfjMDl/R6uqoKouhaSEb7G6G"}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230613085902_1686646747977_0.7272808602078842"},"_hasShrinkwrap":false},"0.0.0-rc-20230613141759":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230613141759","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230613141759","_integrity":"sha512-ad8TPwo67vIjTm92ZdjKrjpyrAj435xta0HJ0t6mLOiK92J64V6f8B7d7IZ/TwAkkkJAh0X4945RnLhcuhzmOg==","_resolved":"/tmp/cea0019c5519d539f28cf95b7a4faa2f/polymorphic-factory-vue-0.0.0-rc-20230613141759.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230613141759.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-ad8TPwo67vIjTm92ZdjKrjpyrAj435xta0HJ0t6mLOiK92J64V6f8B7d7IZ/TwAkkkJAh0X4945RnLhcuhzmOg==","shasum":"c71a9caa60d0685089aac7e1ab492495265b197b","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230613141759.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnkdo0l/wTnQ3PdZhAhP5GiA4AMWc3Kl5BxJf3+ZgmcQIgaE5h+D1fEnDRUiHfVmvGvi/1sJZlJRvKBykPdU4/L8E="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230613141759_1686665884860_0.07197420608239269"},"_hasShrinkwrap":false},"0.0.0-rc-20230614200801":{"name":"@polymorphic-factory/vue","version":"0.0.0-rc-20230614200801","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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","description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.0.0-rc-20230614200801","_integrity":"sha512-GVcdea3OBioZSyeaewkOZGJUDvvgjcfMjx6qOEgiBm31qeIuQ5Mqjk6iD8fBtzF7dEG/IX4SmIT9lYpl9F955w==","_resolved":"/tmp/91021386b89e82be9a6a0a78f038429c/polymorphic-factory-vue-0.0.0-rc-20230614200801.tgz","_from":"file:polymorphic-factory-vue-0.0.0-rc-20230614200801.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-GVcdea3OBioZSyeaewkOZGJUDvvgjcfMjx6qOEgiBm31qeIuQ5Mqjk6iD8fBtzF7dEG/IX4SmIT9lYpl9F955w==","shasum":"7475db67d8ad51e655d046002a3e124e43263597","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.0.0-rc-20230614200801.tgz","fileCount":6,"unpackedSize":20979,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICAXx4Ehc4VUfCKlS34u5rRTs44882/aI4YhCZw4M0FeAiEAtDABU56bfJ8Pg12dosutNmoHKub1itl3+J7yCvs8Wy0="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.0.0-rc-20230614200801_1686773286962_0.8049431481973506"},"_hasShrinkwrap":false},"0.2.1":{"name":"@polymorphic-factory/vue","version":"0.2.1","author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"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/vue"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"devDependencies":{"@testing-library/jest-dom":"5.16.5","@testing-library/vue":"7.0.0","@types/jsdom":"21.1.1","@types/testing-library__jest-dom":"5.14.6","@vitejs/plugin-vue":"4.2.3","@vitejs/plugin-vue-jsx":"3.0.1","@vitest/coverage-c8":"0.31.4","clean-package":"2.2.0","jsdom":"21.1.2","tsup":"6.7.0","typescript":"5.1.3","vite":"4.3.9","vitest":"0.31.4","vue":"3.2.47"},"peerDependencies":{"vue":">=3"},"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"},"description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","_id":"@polymorphic-factory/vue@0.2.1","_integrity":"sha512-N88LEgpf1A7cS+Hd0trwU/z95TjN4T2A5/Ss41FewhZmyNglP69C2h3OREn9AEa3IKr2edX6hMsu14ijNBHpjg==","_resolved":"/tmp/08669a5932a90f2b04cea83ca5038a3b/polymorphic-factory-vue-0.2.1.tgz","_from":"file:polymorphic-factory-vue-0.2.1.tgz","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-N88LEgpf1A7cS+Hd0trwU/z95TjN4T2A5/Ss41FewhZmyNglP69C2h3OREn9AEa3IKr2edX6hMsu14ijNBHpjg==","shasum":"a24e1739146aae018d2cd9ce46934e5c267689d3","tarball":"https://registry.npmjs.org/@polymorphic-factory/vue/-/vue-0.2.1.tgz","fileCount":6,"unpackedSize":20961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwZYQloUB3N74Wj8HLEY8r0FaTQ7KvxwrQN6GSGDGNzAIgArq6Qq9Oty86DkfV0vFW136ps7ZDbFwDjBVeP6EjhjU="}]},"_npmUser":{"name":"timkolberger","email":"tim@kolberger.eu"},"directories":{},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue_0.2.1_1686774466980_0.6206120105788495"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-08T21:19:15.387Z","0.0.0-rc-20221208211909":"2022-12-08T21:19:15.676Z","modified":"2023-06-14T20:27:47.291Z","0.0.0-rc-20221208213345":"2022-12-08T21:33:50.238Z","0.0.0-rc-20221208213445":"2022-12-08T21:34:49.991Z","0.0.0-rc-20221209143051":"2022-12-09T14:30:58.042Z","0.0.0-rc-20221209143512":"2022-12-09T14:35:18.098Z","0.0.0-rc-20221209153932":"2022-12-09T15:39:37.976Z","0.0.0-rc-20221209154029":"2022-12-09T15:40:35.019Z","0.0.0-rc-20221210064357":"2022-12-10T06:44:02.186Z","0.0.0-rc-20221210161124":"2022-12-10T16:11:30.769Z","0.0.0-rc-20221210220040":"2022-12-10T22:00:45.890Z","0.0.0-rc-20221210233717":"2022-12-10T23:37:21.959Z","0.0.0-rc-20221212162057":"2022-12-12T16:21:03.136Z","0.0.0-rc-20221212230352":"2022-12-12T23:03:57.723Z","0.0.0-rc-20221213020102":"2022-12-13T02:01:10.022Z","0.0.0-rc-20221213083838":"2022-12-13T08:38:45.017Z","0.0.0-rc-20221213112456":"2022-12-13T11:25:01.732Z","0.0.0-rc-20221213115222":"2022-12-13T11:52:27.852Z","0.0.0-rc-20221213233147":"2022-12-13T23:31:52.621Z","0.0.0-rc-20221214015848":"2022-12-14T01:58:54.897Z","0.0.0-rc-20221214083134":"2022-12-14T08:31:42.106Z","0.0.0-rc-20221214172031":"2022-12-14T17:20:38.324Z","0.0.0-rc-20221214172411":"2022-12-14T17:24:17.567Z","0.1.0":"2022-12-14T18:01:52.981Z","0.0.0-rc-20221220104301":"2022-12-20T10:43:06.329Z","0.0.0-rc-20221220113553":"2022-12-20T11:35:59.487Z","0.2.0":"2022-12-20T11:37:23.444Z","0.0.0-rc-20230425204622":"2023-04-25T20:46:27.947Z","0.0.0-rc-20230426035620":"2023-04-26T03:56:25.858Z","0.0.0-rc-20230426084528":"2023-04-26T08:45:34.131Z","0.0.0-rc-20230426084750":"2023-04-26T08:47:55.905Z","0.0.0-rc-20230426152353":"2023-04-26T15:23:59.392Z","0.0.0-rc-20230426202433":"2023-04-26T20:24:39.438Z","0.0.0-rc-20230427022128":"2023-04-27T02:21:33.669Z","0.0.0-rc-20230501174010":"2023-05-01T17:40:19.833Z","0.0.0-rc-20230501193250":"2023-05-01T19:32:55.682Z","0.0.0-rc-20230502064618":"2023-05-02T06:46:25.447Z","0.0.0-rc-20230502135550":"2023-05-02T13:55:58.337Z","0.0.0-rc-20230502135721":"2023-05-02T13:57:27.235Z","0.0.0-rc-20230503225450":"2023-05-03T22:54:58.206Z","0.0.0-rc-20230503225718":"2023-05-03T22:57:23.341Z","0.0.0-rc-20230504112808":"2023-05-04T11:28:14.563Z","0.0.0-rc-20230504152327":"2023-05-04T15:23:32.769Z","0.0.0-rc-20230504192227":"2023-05-04T19:22:32.904Z","0.0.0-rc-20230505142718":"2023-05-05T14:27:23.412Z","0.0.0-rc-20230505193629":"2023-05-05T19:36:36.084Z","0.0.0-rc-20230505193816":"2023-05-05T19:38:22.969Z","0.0.0-rc-20230506024158":"2023-05-06T02:42:04.265Z","0.0.0-rc-20230506065917":"2023-05-06T06:59:23.403Z","0.0.0-rc-20230506120418":"2023-05-06T12:04:26.787Z","0.0.0-rc-20230506120709":"2023-05-06T12:07:16.561Z","0.0.0-rc-20230509005049":"2023-05-09T00:50:55.764Z","0.0.0-rc-20230509034023":"2023-05-09T03:40:29.746Z","0.0.0-rc-20230510024848":"2023-05-10T02:48:53.960Z","0.0.0-rc-20230510154854":"2023-05-10T15:48:59.864Z","0.0.0-rc-20230511145758":"2023-05-11T14:58:07.961Z","0.0.0-rc-20230512010035":"2023-05-12T01:00:41.781Z","0.0.0-rc-20230512045244":"2023-05-12T04:52:49.695Z","0.0.0-rc-20230512151504":"2023-05-12T15:15:09.986Z","0.0.0-rc-20230512151912":"2023-05-12T15:19:18.531Z","0.0.0-rc-20230513054036":"2023-05-13T05:40:42.317Z","0.0.0-rc-20230513211908":"2023-05-13T21:19:14.491Z","0.0.0-rc-20230514134009":"2023-05-14T13:40:14.344Z","0.0.0-rc-20230515055546":"2023-05-15T05:55:51.525Z","0.0.0-rc-20230515194440":"2023-05-15T19:44:46.742Z","0.0.0-rc-20230515194817":"2023-05-15T19:48:24.115Z","0.0.0-rc-20230515195053":"2023-05-15T19:50:58.890Z","0.0.0-rc-20230516065912":"2023-05-16T06:59:18.985Z","0.0.0-rc-20230516105509":"2023-05-16T10:55:14.547Z","0.0.0-rc-20230516225846":"2023-05-16T22:58:53.746Z","0.0.0-rc-20230516230339":"2023-05-16T23:03:46.020Z","0.0.0-rc-20230516230604":"2023-05-16T23:06:09.274Z","0.0.0-rc-20230517232131":"2023-05-17T23:21:37.296Z","0.0.0-rc-20230517232522":"2023-05-17T23:25:28.247Z","0.0.0-rc-20230518105428":"2023-05-18T10:54:35.353Z","0.0.0-rc-20230518150950":"2023-05-18T15:09:58.213Z","0.0.0-rc-20230518151224":"2023-05-18T15:12:30.841Z","0.0.0-rc-20230520025247":"2023-05-20T02:52:54.929Z","0.0.0-rc-20230522012940":"2023-05-22T01:29:47.009Z","0.0.0-rc-20230522013254":"2023-05-22T01:32:59.976Z","0.0.0-rc-20230523010200":"2023-05-23T01:02:06.256Z","0.0.0-rc-20230524004225":"2023-05-24T00:42:31.935Z","0.0.0-rc-20230524004518":"2023-05-24T00:45:25.864Z","0.0.0-rc-20230524204025":"2023-05-24T20:40:31.068Z","0.0.0-rc-20230526024915":"2023-05-26T02:49:21.664Z","0.0.0-rc-20230526193454":"2023-05-26T19:35:00.747Z","0.0.0-rc-20230527021257":"2023-05-27T02:13:03.702Z","0.0.0-rc-20230527141535":"2023-05-27T14:15:40.844Z","0.0.0-rc-20230529202751":"2023-05-29T20:27:57.203Z","0.0.0-rc-20230530114542":"2023-05-30T11:45:47.815Z","0.0.0-rc-20230530151204":"2023-05-30T15:12:10.716Z","0.0.0-rc-20230530223749":"2023-05-30T22:37:54.692Z","0.0.0-rc-20230531153928":"2023-05-31T15:39:34.178Z","0.0.0-rc-20230531165538":"2023-05-31T16:55:45.167Z","0.0.0-rc-20230601012146":"2023-06-01T01:21:51.869Z","0.0.0-rc-20230601125021":"2023-06-01T12:50:28.446Z","0.0.0-rc-20230601210441":"2023-06-01T21:04:46.950Z","0.0.0-rc-20230602002236":"2023-06-02T00:22:42.290Z","0.0.0-rc-20230603043643":"2023-06-03T04:36:49.337Z","0.0.0-rc-20230605213305":"2023-06-05T21:33:11.852Z","0.0.0-rc-20230607002905":"2023-06-07T00:29:11.511Z","0.0.0-rc-20230608051033":"2023-06-08T05:10:38.633Z","0.0.0-rc-20230609181245":"2023-06-09T18:12:52.206Z","0.0.0-rc-20230610002950":"2023-06-10T00:29:55.809Z","0.0.0-rc-20230610063533":"2023-06-10T06:35:39.703Z","0.0.0-rc-20230610124844":"2023-06-10T12:48:50.442Z","0.0.0-rc-20230610193006":"2023-06-10T19:30:12.325Z","0.0.0-rc-20230612115703":"2023-06-12T11:57:11.768Z","0.0.0-rc-20230612214812":"2023-06-12T21:48:17.917Z","0.0.0-rc-20230613003612":"2023-06-13T00:36:20.269Z","0.0.0-rc-20230613085902":"2023-06-13T08:59:08.138Z","0.0.0-rc-20230613141759":"2023-06-13T14:18:05.019Z","0.0.0-rc-20230614200801":"2023-06-14T20:08:07.175Z","0.2.1":"2023-06-14T20:27:47.190Z"},"maintainers":[{"name":"timkolberger","email":"tim@kolberger.eu"}],"description":"<h1 align=\"center\">@polymorphic-factory/vue</h1>","homepage":"https://github.com/chakra-ui/polymorphic#readme","repository":{"type":"git","url":"git+https://github.com/chakra-ui/polymorphic.git","directory":"packages/vue"},"author":{"name":"Shyrro","email":"zsahmane@gmail.com"},"bugs":{"url":"https://github.com/chakra-ui/polymorphic/issues"},"license":"MIT","readme":"<h1 align=\"center\">@polymorphic-factory/vue</h1>\n\n<p align=\"center\">\n  <a href=\"https://codecov.io/gh/chakra-ui/polymorphic\"> \n    <img alt=\"CodeCov\" src=\"https://codecov.io/gh/chakra-ui/polymorphic/branch/main/graph/badge.svg?token=GISB4HXIK7&flag=vue\" /> \n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/blob/main/LICENSE.md\"> \n    <img alt=\"MIT License\" src=\"https://img.shields.io/github/license/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://github.com/chakra-ui/polymorphic/stargazers\"> \n    <img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/polymorphic\" />\n  </a>\n  <a href=\"https://bundlephobia.com/package/@polymorphic-factory/vue\"> \n    <img alt=\"Bundle Size\" src=\"https://badgen.net/bundlephobia/minzip/@polymorphic-factory/vue\" />\n  </a>\n  <a href=\"https://www.npmjs.com/package/@polymorphic-factory/vue\">\n    <img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@polymorphic-factory/vue?style=flat\"/>\n  </a>\n</p>\n\nCreate polymorphic VueJS 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/vue\n```\n\nor\n\n```bash\nyarn add @polymorphic-factory/vue\n```\n\nor\n\n```bash\npnpm install @polymorphic-factory/vue\n```\n\n## Usage\n\nImport the polymorphic factory and create your element factory.\n\n```ts\nimport { polymorphicFactory } from '@polymorphic-factory/vue'\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\nimport { defineComponent } from 'vue'\nconst poly = polymorphicFactory({\n  styled: (originalComponent, options) =>\n    defineComponent({\n      props: ['as'],\n      setup(props, { slots, attrs }) {\n        const component = props.as || originalComponent\n\n        return () =>\n          h(\n            component,\n            { 'data-custom-styled': true, 'data-options': JSON.stringify(options), ...attrs },\n            slots,\n          )\n      },\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 = defineComponent({\n  setup(props) {\n    return () => <div data-original=\"true\" {...props} />\n  },\n})\nconst MyComponent = poly(OriginalComponent)\n\nconst App = h(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/vue'\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"}