{"_id":"r3f-form","_rev":"30-653e6f302a78e0b95e8b657edefed23d","name":"r3f-form","dist-tags":{"latest":"4.0.0","beta":"3.0.3-beta.6"},"versions":{"0.0.0-development":{"name":"r3f-form","version":"0.0.0-development","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"405f7ed5b3976f6c0dd55fb1f0fc36311458e812","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@0.0.0-development","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-a5xZ35ovknQdo864prkCUOPQj2uscEEAcrXUokoAR7bKvMqUEtgdRpkGrdgnzcULcFuNepdz/o8gSyG5OsiDaQ==","shasum":"1065b0a35d664fb6919c2f73c334ab101d1d58b5","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-0.0.0-development.tgz","fileCount":59,"unpackedSize":111999,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyoWF/klFnizNhpqNqUPvwgTtUzML3B8GWkuisD86joQIgc2HKOEOS0DVbwn4BtEUOmWOp3/oSmEDiF8vA0O3c6ps="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxK9vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorCg/8DQGAoqzcgOAzxgFLLPNVKBNBsXFNQE4F18okoY5FvOdMg7OE\r\nb4osC2Bb9nobYd6a4hy6Zu/cFsc1basBPJ9HbA+Li+gXByevAcouUwf9G4qr\r\nIwutm7bONEOzKHIsv2dC6YkhFO/rbbSN/Z1Bc5uRIHMUVB1ABKLisdbzzwxK\r\nAAxwVIyeoUHmXuL58clmg1FI69gi4bonEFfYOyFwWkFK6lB7Km4yHCuYr6pj\r\n6wMHPl+IeCqvAeeMwZU0bDFKfyNB0mGLAlvffVBSfxWjs7Vz3upH6Z2qcSxF\r\nSVh/VXuSuQaiUXLYA1Lt9hdnF700UUroCx4avJDH0aEdwIjzrzl/gq0rgN0G\r\ncHv74JKC5rj20TzfTXPcez52asaRAd0PQ3z1wPta9VvDbVQxuWvQbV4SvZxK\r\nLsihInO0xTjx7omp0iGWy/80CaUnUfkzeqLDvl/hs5ljYmzUC6xqZ60MZQA4\r\n47RPxcZfFBue4uJzy1cvPh0LcXBytKNwJgL9UsQcBLma8J+t+qMltvBePMiJ\r\nwruqpatQlz/Rs/5meXlahSt28PSbjbQ1I/5BVhUV/nUoUopMWpwDSB8CybHX\r\nfyZeDQGGcct86b5yvo6AgSYXmDQXznYHw+C5zVdyVkUGRtQpKNx2g9QfQzH7\r\n5o0pzP1MR32jUKx6IMfsPX/gJvRMl0/hwEw=\r\n=cKFh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_0.0.0-development_1673834350829_0.8763564893285238"},"_hasShrinkwrap":false},"1.3.0":{"name":"r3f-form","version":"1.3.0","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"4357ae51c66c8163db328bf50e8bbd02bdeacc3a","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@1.3.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-r9175MDF1wypmki6vMQ4NndpRGaOJ3nuRVxQbhJP6lT1nyrVki8VF+9iUa5yYbkgQPPWTCaW4qsvoq9QjFwgYQ==","shasum":"d095061068c2a7de6b7c147fe89884bf800ec2fc","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-1.3.0.tgz","fileCount":53,"unpackedSize":98625,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGqX9tBg4//iiIgR340nZp9g9PHjra5kGA3Z4z7CUn5vAiAJbOWMbajMSV/eFAyNNkqVqXIWVjxjT/D/9CaQ1OYfaA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxMSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGlQ/+NhyyhHO+369MRKtWnWFAOq+mTskyDxF6/lOBE+Nh9n3nMa4t\r\noEovG1KYJPJcvnKBLp2DfysHFeDiw3+AQ8doHr7+DsC89VG43wlXI20bCAzl\r\nw3sA+V/Agh+rHxnalVUpWSBZNNbxgpcqg1aHX3kwUl3VOYmOeH6a62OaB1+Z\r\nxlaGvp75MbahvoRTpzP0pPdYECHSv47Cs+F6577SFjCIuTP/i02fhdAwr+nm\r\n7/3619W1zKIecL7re35l+bP0fCuY7Dl6rnMUVNKgxu4wRqwt+d3TwJLcAZM4\r\n4hlt5u+J6oGiY+Yb7DzL7CiqdSx4t+X2wHAuLh4g2wGk6JTeBKzhGNR1BC6m\r\nzAFdzRtLq/oTCnUxxEONl6xE3hrugRxlSFlUDxRcxNGIQk81HgnXD1eiXIUX\r\n5CXfiBuyG369r/3hMZI5bgdeAhyt6XOFjU5xHb9E7/qu/Mh+UJdLqiryRlSO\r\nKja4qdBOH2wvl3bd+3V6x/8ysahb7SgNn3uJT3H8tIwyJfMRjU4nzfftkdkJ\r\nsrQPPBZeoq3h2PZWONWEcFtimj/H70d64LQFe6YB3KxHdamL/t3NQTKC5MY1\r\n/vatTLevrNH9mJd2BywL9t+VxEzWNJw84xA09VSnLAWuO02NirIg2LWrGqlK\r\nmYtA+7BaIdcnTaYOIo7r0fxMYi1tTD45N4E=\r\n=pRh0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_1.3.0_1673839763895_0.7307486488440673"},"_hasShrinkwrap":false},"1.4.0":{"name":"r3f-form","version":"1.4.0","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"d59cd891cb60088f9dd565f65ce97ced929b5758","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@1.4.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-L0BGIfWcr1xLpmP1WP6Pg5/NmwSZgHE3qOAGHW6yop6xKVcfKIJvY/PFvSgg3M7wY8lceeBnLXMk65IW8QkhJQ==","shasum":"c9459e14b57f66b845ded4ad5cad7ef75c104bbf","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-1.4.0.tgz","fileCount":53,"unpackedSize":100092,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYj1mz9yCAFt8T5o8Ofk+15wUVx6lJikVK3LSyawCiHwIgJPxngxk4K9Q8xrGf9XeGoFSbIPDa+2nkoYhhgXIFkZE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxcQ1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre+RAAkOZKivnIV2qKaY5UFga/08SmOtaF6noBZJ75OMXZlzuGkgVM\r\n0A1bY+LeCtInPNmLhVzqzkY2dRjTYzBgZRSEprhJbfYigqtw+uL9iuABgtdj\r\ntnC0Br9uqwCjPgpE+4p9o4AmiRfGQJ+7QeCw0RebuNbnYWNei37fl91kVQEK\r\nm3uUdEC7F5syuCbHDpduNRyuzDfCrgaLI1+BeD/h9hgbZ8zJVtK9lSs1xicr\r\nEb5yF039A3spxlucZWHAPPeaUHqYxV2WKWXRjYy3ItdFUorJ9UueveFP3pvy\r\nvvwmFRqae9pPvIoezetWazG9T9ZjcIAFTP7XY/O9oJ6+ElKM6iUXByWsNvCj\r\nQM0qzSnRjQnbFN8fHAYt35JJNSv/2IRiZYws5kpAmWFBzrqIJ7Tj3abPr0Fu\r\ngiAf3MFWTXGLTCz26aGFlxQeUl4SeYDBSMsmvulK1cTuItOvvQaXtWns1esT\r\njamg4q1/8YnoQHXRyhxHanQZV0VapPaOfjYlFeZZGAXHbW3wR/iha89Wm9fF\r\nCnstREDps5jCNwKXRjIkg9yliYvrgxWFOlIuKG3sj1Q4O0gZvR7KMkvMsouE\r\n1pkjwtAwvSiScy/UnpI133iZfzYuj6POkjR6KzuIjdFS/8QZa/0V1OwuBucb\r\nquc+cZsDZ9+PQThP5vNsbxNj9M0ICLsvgLg=\r\n=h+y7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_1.4.0_1673905205515_0.878999096354367"},"_hasShrinkwrap":false},"1.4.1":{"name":"r3f-form","version":"1.4.1","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"eeba2a26a0853dfd5c4cc50977e0a7342d43bee0","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@1.4.1","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-h59eQfrzJyyOXa41MuJ1YOups2UQzhdeLsRKIHY+zFjIndu7JZ2Z7g7jCxyAT51ObicjsOB+eK88RSuyUiyu3Q==","shasum":"48fc2728dd90a7436a252e0c131f399cfd2b2af3","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-1.4.1.tgz","fileCount":53,"unpackedSize":106978,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJsL3yrZp8+zLI7Y54f4PyWCclU8yJpe/SC1+GOI6kFAIhAJv3bUmlzyJanJ+o7uKFc17Ewqwxz9QlWA74bEhyIH8z"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxccqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWXxAApGjC1mPoIout5LxZe/kc1BHnWc0uDgIwWVq1d6caozijo93L\r\n9xIshi2qedEOfkdoSgEFVDi1kCpf8k5YxqnhL5BnZtWrD34Jhov1oEhJP4fk\r\nganjPF645Ey/gExAKle1twoY3nsNMemyPjQ6syn6Xd+8JMXg6FHHb2A8a93z\r\nhAu7+BF2CZVz8tzISycMtzuno2/9NLqTV7KHf39kMCvc0Zi5dQV4cQwdpxt/\r\nKu/+DDPRyiOWg9nHwfFLUDTdj4euuX1GRSWGcu0bVNs9jLpWnlruii6HfM8i\r\n1ZFd3VnV7SqLUga4V/Yp+pRkuml7fqzmL5NntizFKsjutUzWhCKhe19REKUy\r\ngBAKACN3lcmHgOiKQqDX0ZBmExXn4O2/IR4xt0jh7rkEz3InSCX0aJ94siRT\r\nypYvjIoP11TWEk96QNv2G0zKvuWFM9UWpinLLzSPi3s4TMM4eSMwoJZpD6Yp\r\nPAiXNGoQ3A7ayfCN1N5+NMnepXI97y6tXmP4VKXcFuB/V8Jed5ewv5n5bbTi\r\nNKC/yPa0HXukLyZC+jufIREhj8a+LHes1n9yeSesqeeI1BVQAWReU1mIeAOe\r\nrruJ9dnTRbM5uBLDBDxA3fUvoywGAD0Nv3aaoSWBr7nsNIo0BaPoYQYj5vMP\r\n+oPfXNcSMnjc8viGcg4QUTD1a3oGr/Dd/4k=\r\n=PA3x\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_1.4.1_1673905962740_0.6355112725551353"},"_hasShrinkwrap":false},"1.4.2":{"name":"r3f-form","version":"1.4.2","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"c6d80093de34a2bdd1ccd6911172c3fa55476b29","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@1.4.2","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-2xJHhoZd77710a0mrs0oGyvY/lgTDdAnfrUSnTug730lzqtgkdx6f/JTB3MrfdJCCbvZWxr1W0z6WxdQ6SOUNg==","shasum":"3e40d40cd94e3dae7df013a9d0b2b03753fc2d20","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-1.4.2.tgz","fileCount":53,"unpackedSize":107021,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvB/ZriU7ZgVwkMh+i6DyGUjDytH/6NZyjwbMouufgWAiEAuhYYIO4Kf6vP9az2yUqD250pZ+vudGRGI17n9WqTpoo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxdNDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhWhAAlzcdqHVKcHoFmxtvHwpa0HUYUeQENtcNPcTJE5MMoemM4vHN\r\n5q9AItoZznaQEapNnE5Y6gvMvxlv5ET4jcd2ltptTC6sf1OqIMIU6W46KJ/u\r\nainKcVYkWkKP5dfiGQrOYNHfXc8zCQUqqMnxmkQ6lglGXUTr3XnuiZYszXgv\r\nc6eMHmCPP4RodXlTQQ0AvlwjEqEgiEfG6o+9wGTTdUib+uJOQIsnChwNEPkU\r\n/Wd5YaVl7erdil3CljkafLAlZ1G0zKRsD2oss4oWP95a8rsIIXdxtk6LYUOc\r\nB2lPvoCTkQ89jFKMjuJwNHlkfeEl77ImDzRlyCrUclo2QSlZD5Hi5MUWXj5m\r\nbuf9S5v+8akhxKDOOanPZbtgJ5LhSUSIBEa6XnQ37rieD6IrQgQH5HD91ZhV\r\nA5FhXTWL0B+gX4Xq+PfVB8Q0TjL4iT4U+cPB6Bffg4PlAkHff+WVA9li8mAc\r\nSr98YSwNwB8mQ9ozjFgt+YfO4sHjUvk8ntbwWGu5vaxZx/xmmnkyzgYvTacf\r\nKCUQiIlXwQRVHmr4jD02gBSugj2/dHf3atZgRCI8t+zcLr555WVpyyQIzfkp\r\nEXwKWJaeezggXSg7C14zPhvLa5vlxR/JQtOHWftfHiG9JHtbeYLC5j2Z6c8B\r\nzfa3C4vSwwhHoBohwZqXVut0hcAnEBf6vPo=\r\n=pgBV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_1.4.2_1673909058969_0.3945312579656066"},"_hasShrinkwrap":false},"1.4.4":{"name":"r3f-form","version":"1.4.4","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"d4383cfb4f20fc39c7d0ea6c5ae18ffde2fc868b","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@1.4.4","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Mdike0iR6XGONWgtZpIGDUYwN20U37alw8wYsyXMq36g53blR00cTQmg4AKIEXKdL/outhdlu2mRtTNm9UaORw==","shasum":"05b642429461c27da973ed5a9265b893ba29ccfd","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-1.4.4.tgz","fileCount":53,"unpackedSize":107856,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs2Fm3EdyZvl2x5XEYgXPHdTxiTu2kv0wPA8ZdWGdntwIgLgKHM9qEFUAjKZatA8P9rR+BJCd2NA16vebNfneGOzk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxd0dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5UQ//cTHUDWJoXyMwvZF1pJbRr4uALEatTY+CbLBAlFkgvKuJNPye\r\nsO+aN9ql3aa8GsNTCXO44M6pbWgdgb3oAySfb7fhaHGzvgqhgHEAE9UsaDfW\r\nr3asMWdcOq2J8KCHYCZD0n7lkcaMW3pruFwIMVTimoPMDcft0yUDgNAymY9W\r\nN+yEcBf2zreZlowtlRTy+C/4xgkNE4It3hc1xYuiB2wF1t5nALl6gnkz8j0S\r\n6IDv/wQvocmb6Mzj6DU/mlMNSppbU4J/6yxT/4PE46hc8lczFrjMV58JTRl1\r\nj4CpN5gJHIfYjUWtco217TGO7fidy5b8YTs+baoocaiDq2NZCsZ+M4MA/sAk\r\nbo8tRQETeAJRBzBVSrMk0c58g+n/Ng3TKt0Hkd/hB18dAW/m7RwsTMwWZ5X/\r\n64hPFga6ekXGxRvt23sQYYcjuTHHFMXVR/KuxRXl82EUyLs4QG4C7rshw5Qp\r\npsXJpha+XTUrRusCHAVW0+jBXFmNGKbEbTQVn6dGru9p4UuY/VV5/QFHNftq\r\nxfODRYO6Ylf82kViRSMqvL5NW0wLqpJFmM5nBzUeqxjKPtrTC86pkDgo6y3+\r\nOFMDf0oI9Fc9mxkB4yevBXs14iP559g8dUPaz0FtbzFWxulj/Hza0wGTmPlX\r\nFt7cPnYxyIeLxFKPeO2Yo1qyMSWXFFfNz+w=\r\n=fgUj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_1.4.4_1673911581179_0.8215692034796624"},"_hasShrinkwrap":false},"1.4.5":{"name":"r3f-form","version":"1.4.5","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"gitHead":"74cf3d41effa0325cdf35509ea6c5b5d705d20fa","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@1.4.5","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-kj9iUq0HsfGhd2hpBnTAP5w4UoXOzvOF155C8BFevm3w5sZNk+/XdGM8XKA+PJtwuPCBo4fXPe0tv59on5KWuw==","shasum":"002bbb9bea00ef8056094b149102b4c80125fe0b","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-1.4.5.tgz","fileCount":53,"unpackedSize":107635,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOYvCMQI/VpIC5DKlS4G8BYJ3CHe0yUADh6hXDiXlV8AiAMCXE0QuHhSfQeGSVZ1LkQRzGeBzXWg9arFmQoMDPxcw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxfPdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrADg//e6ycR09LnAd+E5kn89SK3Ba+iKsnx+KyVN734iuKASMOVgQW\r\n5P3bQEoMN+KTZk515mBotmeb3pHyEnol1t8P5DAsitiqSq/u3X+fZV88Rg1L\r\n2SVkz0F/PLd1gQ4WuNtmOqBOoQVqU8PBGvaLatBwjfKkVsTvfqwf5KlsRH6Z\r\n4RDKLMFkZNFA07kDiJKD7koC0ehPMMciSduzpxh+oCSQ0PKdH+rX1fiUUHCN\r\nNPbUkbG2sxRBrkWqeXcXa/DsJRNAZ1Dk7eNsPZXNe8FJ3+8+K1dOk5iMFksp\r\nyP2cEOZM2DenAYJ3uBZspSSspPkiN0x5GLZUbK191kJdegWngEXxcYUACGZj\r\nfLgxkhzFM1He6VMNK1KX7Al7ZXu75QmqOOy4tVMabo6vCpS8VAXD+4XmcqXR\r\nvqaZ2pC4RZzEcGxHII9xSOQMYxTgWabCJZYERpWSjni7R8wkbTO3kGsj7Itu\r\n63DHYudr3lQypqknFZ6IrTR+P7XmZPt7bnPzktPUL0jPupQAO0tRbX/bLAru\r\nDVK0hVYqkXM9Qx0ckhIYRPIde0j6LYURTuI4d1vsMdccw/tVGuwOIb3l4S6C\r\nRlsuRIzz1oSmS6O87MJtzqpaoAYPJwBJ/V+FT2YujNBfZGx84H6i+yHLUbe0\r\nx+A27jXtD32igOyhysKg0xS8rRt6Be+I92Y=\r\n=VBdY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_1.4.5_1673917404924_0.34967152833283555"},"_hasShrinkwrap":false},"2.0.0":{"name":"r3f-form","version":"2.0.0","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main","commit":"cz"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","commitizen":"^4.3.0","cz-conventional-changelog":"^3.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"8be408465028fc44fbba45ce667321baac1a6315","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@2.0.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-+31GD33sfeOU0T1OgNQiw3Q2s7bom2G6YW2cN2VaomEzTxTKkGRxetNSxvzK7H85JFWpoXpsFE9bTqolH0GqIQ==","shasum":"997503680b5707d0e79ad3eb4067f8813cf2516e","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-2.0.0.tgz","fileCount":50,"unpackedSize":107074,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAB4TA1hcTQTIHYfE/Bq8AFbC1wTRQXfjIn8Vd6nCRegIhAOlLa50zDtS1I5wXVqkkHpPr3AUxJbQLmx3TtM/N5k9D"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5HkgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbQxAAl3xbm5O9pm/Y9oluFqVtxrnmrHb5SrcB7Cd1owIPzyFm8eMC\r\nBKAi22VdvbPRI0EYYXBvgAaYCKx+TPOb6bJXCF6TwWB4ijM6SF5IPeflP/UE\r\nZ2lZfTPS4QlG6wzp4wFbLzFpeM+1QgEftYbw/JBi73ny75eS0og+qEjUtTW3\r\n7YV8z+dchuJ1h/FNBY45muf4dw+4kLTzDAsp+nw8K3ZVCMXAXiZCiIya+wOK\r\nTTyG88cK3K7VSsqoFtlIUsiTwunsrDoRt1MJHZyHSGnrIXcoXkmHKLRJ5Pal\r\n0FgzuCQ5M8hOazlPCXF9F/oDOXhUM0T4szL3i+HoU3FRtr+CqHFIAx5nD8Vx\r\nQhniCjPJFzZ/IEF/9TN5IYYEub7SLnzCBl8rGq1iBaGQqktf5jvFRnAgy6Fj\r\n94tjzvxUE3WDVZWWCU1++xpbl/l9kuNqxH3+2Bq/P32u96o5tlTvQhnB+BR5\r\n4Rx8rNYLKf7CHISou3hxCEAjjAflsRUJ0NPY7LDXSIfS/NUJcZGnmhTLuIhj\r\npFg0qdvh85pmgka+RqPEQPiDcQDViskfxqwNfw4SKtXYqSn/259nqupi81kb\r\nl9Cx3m1fiiXlrTrnuIaagJTWrcsiMGZgXKRAYcjDXFSbNyPgzCPQaL7L9Pni\r\nuAr7bSTDFGX3EEhjKqzOLFh2BzbHDpDQbjE=\r\n=oyii\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_2.0.0_1675917600612_0.8095879938157398"},"_hasShrinkwrap":false},"2.0.1":{"name":"r3f-form","version":"2.0.1","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main","commit":"cz"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","commitizen":"^4.3.0","cz-conventional-changelog":"^3.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"dacf0e2be87585fce73a46578fe72aad535c62a6","bugs":{"url":"https://github.com/JMBeresford/r3f-form/issues"},"homepage":"https://github.com/JMBeresford/r3f-form#readme","_id":"r3f-form@2.0.1","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-9dYMH5Gc8CYBGt+U3kccEsXTIDZZvb9eMoOvcfycL+jUn/ZNBXrULpxvmLyx6gLsXqywD8YXsrHsqskYv3HftQ==","shasum":"a38958da8a6c0394cd8b3531ce18b4e770e3b2c8","tarball":"https://registry.npmjs.org/r3f-form/-/r3f-form-2.0.1.tgz","fileCount":50,"unpackedSize":107243,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGLnDDM1jZQn1ObTL26Qj177Td8Ox07EZ0dcAHjpae/AIgfXmBKiZbz7GFm/1GhYEgYWS1hC5TBcyxrL2HyTD4ooY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5Im2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuDhAAh6a1q19vB14YJzZREOSnkiguQLh9lVWWuhzBZvwPQPhuhwtg\r\nHgovdac53wLVXal2P9V35KDSKyLp4BFMlm0nYXnV7nlTxqKiTlNleqza55FG\r\na/QooNPw5uWmxKHmcKMk4TLsCCegFWvqlgkAB5dbjIxMPLb/Pq5Il63Dk14s\r\nzT4nShrVhIPYiyJWwQ7rwL+EVz9cS7jyxn4gUq784dcoLGdJTjltZtNo03ux\r\nGyD9iA2zJ78DsUX4hPUy1XrmnH2oUQuWCOUbB0PO6vVI+F9k1scPeHIpwV07\r\nnAQZhtXlOxfRPZx52P5huai2k9vmEGTherNcwl2aFoUf+GVBmIjQnktWaPhC\r\nr0lEVWQ1bMVGNn2S4SjzcVsz7sY4GiG5OCxdSdRkTE2qPqtoUXOeiF9RvtH6\r\nNknqNKEhI58MJ5ec6czp6J+47UjYvzXgFm3fJ5V06jSJ8txRiYKrjSEmmHrl\r\nhOO1yJQGO6HsRIkiEBMkfgykIhS1iOIkn0j/HJv7Cmn05GOAKgeAqdiW99rf\r\nO6tLXOien/SowTycnv2eI2CuOxH+52s6QQZzYIJVOXyDcz80xCXYLFp5z3d+\r\nGHBh5wgKgRGYWR32pVwpJ5VCQ8l8Ut7SlKboWGjGJhiySOH6z4HESpnvDWnI\r\niz9I9UrI2HD7WEs1Q6aDfoAlIA8bTqPLzPQ=\r\n=4uxM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jberesford","email":"volcaus@gmail.com"},"directories":{},"maintainers":[{"name":"jberesford","email":"volcaus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/r3f-form_2.0.1_1675921846527_0.5382516794467735"},"_hasShrinkwrap":false},"2.0.2-beta.1":{"name":"r3f-form","version":"2.0.2-beta.1","description":"A webGL input field component for use with React Three Fiber","main":"dist/index.cjs.js","exports":{"./Input":{"import":"./dist/Input/index.js","require":"./dist/Input/index.cjs.js"},"./Textarea":{"import":"./dist/Textarea/index.js","require":"./dist/Textarea/index.cjs.js"}},"module":"dist/index.js","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"rollup -c --bundleConfigAsCjs","typegen":"tsc --emitDeclarationOnly","lint":"eslint .","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main","commit":"cz"},"author":{"name":"John Beresford"},"license":"MIT","devDependencies":{"@babel/core":"^7.20.7","@babel/plugin-transform-runtime":"^7.19.6","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@react-three/drei":"^9.48.6","@react-three/fiber":"^8.9.1","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-node-resolve":"^15.0.1","@rollup/plugin-terser":"^0.2.1","@rollup/plugin-typescript":"^10.0.1","@storybook/addon-actions":"^6.5.15","@storybook/addon-essentials":"^6.5.15","@storybook/addon-interactions":"^6.5.15","@storybook/addon-links":"^6.5.15","@storybook/builder-webpack4":"^6.5.15","@storybook/manager-webpack4":"^6.5.15","@storybook/react":"^6.5.15","@storybook/testing-library":"^0.0.13","@types/react":"^18.0.26","@types/react-dom":"^18.0.10","@types/three":"^0.146.0","@typescript-eslint/eslint-plugin":"^5.48.0","@typescript-eslint/parser":"^5.48.0","babel-loader":"^8.3.0","commitizen":"^4.3.0","cz-conventional-changelog":"^3.3.0","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-import":"^2.26.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.31.11","eslint-plugin-react-hooks":"^4.6.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^3.9.0","rollup-plugin-multi-input":"^1.3.1","semantic-release":"^19.0.5","three":"^0.148.0","troika-three-text":"^0.47.1","tslib":"^2.4.1","typescript":"^4.9.4"},"peerDependencies":{"@react-three/drei":">=9.0","@react-three/fiber":">=8.0","react":">=18.0","react-dom":">=18.0","three":">=0.146.0","troika-three-text":">=0.47.0"},"repository":{"type":"git","url":"git+https://github.com/JMBeresford/r3f-form.git"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"readme":"# r3f-form\n\n### [View examples](https://jmberesford.github.io/r3f-form/?path=/story/form--default-submit-button)\n\n> ## WARNING: UNDER HEAVY DEVELOPMENT\n>\n> Each release will aim to be a fully functional and usable release,\n> but breaking API changes WILL be likely for the forseeable future.\n\n## A webGL form component for use with React Three Fiber\n\n\n\nThis package aims to create a fully-functional and **accessible** ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the ``\ncomponents that can be used within the [@react-three/fiber](https://github.com/pmndrs/react-three-fiber)\necosystem. Ultimately, the goal is to have fully functioning HTML `\n );\n}\n```\n\n> Note that each element in the form will require a `name` prop in order to be picked up in submission, just like in a normal DOM form element\n\nThe relevant inputs will be bound to respective DOM elements under the hood, and be rendered into the 3D scene like so:\n\n\n\nYou can define submission behavior just like with any old HTML `;\n\n// or handle it with a callback\nconst handleSubmit = (e: FormEvent) => {\n e.preventDefault();\n\n const data = new FormData(e.target);\n\n for (let [name, value] of data.entries()) {\n console.log(`${name}: ${value}`);\n }\n};\n\n;\n```\n\n## Inputs\n\nAn editable text-box bound to an DOM `` and represented in the webGL canvas.\n\n```ts\ntype Props = {\n type?: \"text\" | \"password\";\n\n /** width of the container */\n width?: number;\n backgroundColor?: Color;\n selectionColor?: Color;\n backgroundOpacity?: number;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used and the\n * `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nCreate a basic input field like so:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nYou can access the value of the input via the `onChange` callback prop:\n\n> The callback is passed the `ChangeEvent` object from the underlying HTML ``s\n> change event on every change.\n>\n> Read more about this event [here](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyInput() {\n const [username, setUsername] = React.useState(\"\");\n // username will always contain the current value\n\n function handleChange(e) {\n setUsername(ev.target.value);\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n\nYou can also create password inputs:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\nexport function MyPassword() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\nAdd custom padding to the text container:\n\n```tsx\nimport { Input, Label } from \"r3f-form\";\n\n/*\n * padding: [horizontal padding, vertical padding] in THREE units\n */\n\nexport function MyInput() {\n return (\n <>\n \n \n \n );\n}\n```\n\n\n\n---\n\n## Textarea\n\n```ts\ntype Props = {\n /** width of the container */\n width?: number;\n\n backgroundColor?: Color;\n backgroundOpacity?: number;\n selectionColor?: Color;\n\n /** [left/right , top/bottom] in THREE units, respectively\n *\n * note that height is implicitly defined by the capHeight of the rendered\n * text. The cap height is dependant on both the `textProps.font` being used\n * and the `textProps.fontSize` value\n */\n padding?: Vector2;\n cursorWidth?: number;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM \n \n );\n}\n```\n\n---\n\n## Submit\n\nEquivalent to a DOM ``, exposed as\nan independent component. By default it renders a button\nusing the following props:\n\n```ts\ntype Props = {\n value?: string;\n fontSize?: number;\n width?: number;\n height?: number;\n color?: Color;\n backgroundColor?: Color;\n\n /** 3D transformations */\n position: Vector3;\n rotation: Euler;\n scale: Vector3;\n\n // And ALL props available to DOM s\n};\n```\n\nAdd a simple submit button to your forms like so:\n\n```tsx\n\n```\n\n\n\nWhile this provides a somewhat-customizable default button, the main purpose of this component\nis to provide a simple interface to use 3D elements to submit your forms. Any children passed in\nwill submit the form on click. For example:\n\n```tsx\n\n```\n\n\n\nClicking on the big red button would submit the `