{"_id":"juhuui","_rev":"36-41e1b4d81547dd091c7a992c102e6e20","name":"juhuui","dist-tags":{"latest":"0.0.9","next":"0.0.8-canary.2"},"versions":{"0.1.0":{"name":"juhuui","version":"0.1.0","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.6","@changesets/cli":"^2.8.0","@types/jest":"^25.2.1","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","eslint":"^7.3.1","eslint-config-airbnb-typescript":"^8.0.2","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.0.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^25.3.0","lerna":"^3.20.2","lint-staged":"^10.2.11","microbundle":"^0.12.2","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^25.3.1","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.1.0","dist":{"shasum":"f8064fb0e59d3ca82a907465320a7e81ef87d478","integrity":"sha512-9SYAlVrnbqoIZ/Eafd/JankE+K0JmWnXcjZXEbuFZcRJDBzSLqlAWkzWpd2DCeWDLfWbxjNF+NMfRfEziWa1lA==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.1.0.tgz","fileCount":168,"unpackedSize":374969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBIrXCRA9TVsSAnZWagAAZyIQAI2sEjGSzH1V0f7z7A8X\nwLvi5e/1YBjpSrFxMaMXfOSvaEm6cjj/U2bPQG4CflAq5p7gRzaU/P+bNQQZ\nfXzR/2IV94vSVn2CdfUIGBPx2CATv7NB1KVb3u1UuGFxGm1rjfFcz6vrYBt7\nlxg6T626RYQIt54lHf8Ch87NjIZZ/zV3IrGU2y3OdgIINW3zF1Z1HXiDPlMN\n2Xhp8D2ybkFt+EwKVp/7xcSAoG8dawBWknIlekAOnXdhP+xKwoeQ5DQIkkPX\nhR0lQ2n8cFLM765NBlOramgHyKnAR54UwMR02Y+0bj+GUhitz8xE5mtd1H66\n2ZlvseErYOJgf2x8QXmFL2PcvGrfrkFY8ILGfMLPIIjgbemR0Ln6IdHs4BcL\nxXki9heDLjG2e3XmTeJzkTFQzo+bxH2uYTBqMVMWh3gjTFB++fHB1B1DDAAH\nKJ6BYAjABXyD9AW2ab/VQSzQorX7HAWPk19F5myvfCc1qa8nQuXgEddWzPFH\npxPEl7lRYZVQ0dRdIsP6YVbYw8v5cCuQsTevCzciv7Bi48lhxmE1Z4ONjgwV\n2OMfUIcDyexP+vZQosQJYV0fGemib3Jbu5CkF0C3uWNb5lRdTLVg4OzTXZgi\n04RZ+/PUz+Q8qgt5BntBd5kUHcKjblcF/TMIdey4NoytsDaDwpnTGjuNCxrD\nbIWx\r\n=gVrL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgmR6pYDKVvPJNcSWas2UJZfRiXxGLeyNmtDbeDUwukQIgSBATpvMKV+I9g+ba8uvWUp6pMcNY9lvW4RLgVNo8PTw="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.1.0_1594133206577_0.17663337092613496"},"_hasShrinkwrap":false},"0.0.1":{"name":"juhuui","version":"0.0.1","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.6","@changesets/cli":"^2.8.0","@types/jest":"^25.2.1","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","eslint":"^7.3.1","eslint-config-airbnb-typescript":"^8.0.2","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.0.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^25.3.0","lerna":"^3.20.2","lint-staged":"^10.2.11","microbundle":"^0.12.2","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^25.3.1","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.1","dist":{"shasum":"f064cd24f1b16df9cd1e5b437cc14362ee118ac6","integrity":"sha512-f856UxqomKL0POCtY8zernV24iuZm2nO1kMe///Az4pTOjB1uiAixHr9UD921Yc3neBL6YpQCvOvSR168cpM6Q==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.1.tgz","fileCount":168,"unpackedSize":375048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBIsCCRA9TVsSAnZWagAAWh4P/0xPWv5V5FpG0Eqmripo\nbTMfi5KZC42C6C6tppLLpWfkgMFCqpW+Bmmm7EmxbVGfoYztN18ibm37J53p\n42YaWzpfJGsz6LX5uAwGGxFHsoKzc0QOxISthNgFYAqer/P7AQm45m8ADfYh\nBIAwyxyAsFqEpfJ6aUDDDLEKig9iyM6gzCdYad0c4s6fM9G88QKXyuyKgFP9\n9V1/oPhOCJ+MzwD0HvgoY6EtmlDEmbgR4NFR/4vbqN5htci3dAVNlEYLY1nX\nqk0tGr2wFfswS3ivDZLlitqMqPcwabWzFFNPXXMZlJz0UWdcffJvZHfAm2+u\ntVAEWO0Us3dWfx+VXv+njlRqlyL2hhefbiku2fQhBWcfagucf0+xST9w5eAX\n7pCg0Q1Y1W84/EOCjMx/IhiP/5fGVoGQuoIwJSTbR+jEHj/VxJ0UkDRxvyGH\nYHGswCn+KEATMBLxyLYq3eeBdW3WLZ1OpeFx6Zd1g35y7XZxBdSSAB0K+5J2\nZZUQWPMf+UUHoHTb0JbqCb77OpmnYN22hig/R6elPvX37f365M2CgJUYgC+h\nVzhV53BtLLdmX61bIXIJKCsqvMW9kCKgawQ9/2+1UN1KRfQDzQcQwJ8HXb7A\nKJeC1p1QkTCMCt63Pg/cUL+GmDWc+zN7mEi4FaAIzm8WuYSa5Vu6ujlQlAzQ\nAmQf\r\n=up9i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8OsetL2UFwLU+FGIK0JyXLcpwmTpkHb1WNlp1TyTGgQIgLx8UALicHYelZljrE0oTH3+QxRbp9TF9m6wH1VO4gA0="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.1_1594133249854_0.815913310551897"},"_hasShrinkwrap":false},"0.0.2":{"name":"juhuui","version":"0.0.2","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.6","@changesets/cli":"^2.8.0","@types/jest":"^25.2.1","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","eslint":"^7.3.1","eslint-config-airbnb-typescript":"^8.0.2","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.0.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^25.3.0","lerna":"^3.20.2","lint-staged":"^10.2.11","microbundle":"^0.12.2","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^25.3.1","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui-pre.now.sh/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.2","dist":{"shasum":"07816f884532af3b657a3a96a0bfab04c03b6f75","integrity":"sha512-AtBsbK7ChWx7kzWXTTRFwcZ+Gi5jSVxoglPZQ7Yov3Lfu3IUVrTU/FL6yN2ngqNdnmLoshyGE7sWoNKjy5Mkgw==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.2.tgz","fileCount":166,"unpackedSize":352156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBZxeCRA9TVsSAnZWagAALTkQAI8xkXI9O6TtHOxbttb2\nJXH7Hnb00FCCuA15iNvpEeqGw6ZEZWESJ9qNablvMwUPYLyer0l6zn57lXQM\nXMsRn4TRamJNVQytNUFgvljZykvoN4hvdRMXeX2PhvTZdnmm0cOmQLcq0Ti+\nI/0b8PehqVxBTprSWmJ0QTuzTBAlncER60enc/Bn2+ypqWsqSdU3VSVxb3R9\ne9hMMgrhw9bKDjjrZlEbscFdS+argIgZHdHEWGMd9Ieecel6zPr7nXeoF1Y2\nmepzgDczYfTw3pheXcUZ+lOYyxiQ30BOO12Kk2nyta084FYLBZzFoL6JlRnH\nVViOasQ6+JFss85ZWSaiStiN3wcxYq0Ksb3eQjhL8bLs9vKGwZmGcpcZ/mRl\nkfgDXeEBkSRGcHhqSIpO7SOTgodqvH3CGJTQW11A1+hqzGRgAQeXqLG18ie4\n2K+yMUdzvC+5wIehFXP8PQrzoxLMAr0sy+nd4Mu9Uifh4ZrDzbsntQrhDWH5\nquzVPifmN6gz26xV8dAIHjmOWryFHcvYJYcIfInoIi5QLNPgVMa4FOgr73Kl\nGiee2HYprOMMR3p3zPMOzJSLZY5mUoZ3Nj9zGMMBNM9xMQU9FoPteGf6HafA\n3FGzCsWkJ60YH5ivhMYN9kCi5AA/itVSPk0UPiGdlTs6VtU8P0SzpZqnY7HU\njBBy\r\n=mjKb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAarE3DPBZ7LyFQGjtoSXMjDmMY/VpHroNnxmI7zu2jbAiEAk3GsDKZjL2nYFSOeZ+cxJOXan9oyTcxbLZn/2TCUOeI="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.2_1594203230289_0.8357940674122164"},"_hasShrinkwrap":false},"0.0.3":{"name":"juhuui","private":false,"version":"0.0.3","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.6","@changesets/cli":"^2.8.0","@types/jest":"^25.2.1","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","eslint":"^7.3.1","eslint-config-airbnb-typescript":"^8.0.2","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.0.0","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^25.3.0","lerna":"^3.20.2","lint-staged":"^10.2.11","microbundle":"^0.12.2","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^25.3.1","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui-pre.now.sh/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.3","dist":{"shasum":"ec8748d599408b7ccf98789bed2098974da9f501","integrity":"sha512-FymD2aRbIbAWbMe0RHLqkX4h29+Wcf36SPAMqBZdvlsDa0UzX1Li8E95GNx1PcpduwVedNPmQUJOP6XBZFY43Q==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.3.tgz","fileCount":199,"unpackedSize":426811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCfoCCRA9TVsSAnZWagAAESQQAKOAp40ERxqSumhLLgfT\npCyuThzqrLAdzpiBGfC3A8VxNC+nmBaBHQTXm3xeoHN17BL1arb1rnr6Sns0\ny8F4rkwIQOEOSJ/+RdjqLHqpPIW9E7vf3zWl01U/Hqc/QApF9aOMTgWJqwMH\nprqwm1zJ1L/0e35nC3w4Vt3Dz0P2OOfQWQhTytqEdBQL+8YATWGHXNp3F7Ed\n2bC9ZJlGuP3MJESMNZkR18O2QKhA6sTYxo+v9ElJTBmAIAGQ46p515vpiFT4\nDz9v0D+Z6kdjjtlNczUZeaC65e18BtUi9LxY3lFRgz/VUZJfewpOi5Rjx9tI\nIOdrZ118+n//zUcdjoxViYoc0PHTdLYUZrT+Xw9jbRYAehnXlhJqfKCeRSMO\nsmT3Xa/nyWFv3gO8n26LT4pmaoADvmlBoYgOGWYTSVcjqZVLh5ZoMQG1WHHJ\nJbRSCWWFc1B/ug8kg2IRGTKToGxW1n90MkR/3Zv9aq/d9mAGgzkeGmGT3Lqv\njYEdekXGPRGhs0fg+x8FzfKrFpvIzQTO9MenBUABXpveLAZqNJ7cteOiC4xP\nj9ulZuBtwLxIBTgCjwLwHTDEWgilMa7njtYcZjriqbLK+hM8pjwkFSGcFgd6\nXThD54Yj3M3s3axtuVnxdmhwyenQpZFEp14BESEtc4dSCCWpBY/JLDKJxwA0\nf5OB\r\n=aHqw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmu9gTUxoHdWVr8U0ouhIPMaY0j8jytYIxDpOHkaVQsAiEAjbVVXqhU1txh9LthO0DB6dFtiR7uLODlsYnuv3hhDq8="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.3_1594489346177_0.07876363399910957"},"_hasShrinkwrap":false},"0.0.4":{"name":"juhuui","private":false,"version":"0.0.4","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.6","@changesets/cli":"^2.8.0","@types/jest":"^25.2.1","@typescript-eslint/eslint-plugin":"^3.5.0","@typescript-eslint/parser":"^3.5.0","eslint":"^7.3.1","eslint-config-airbnb-typescript":"^8.0.2","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.0.0","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.3","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^25.3.0","lerna":"^3.20.2","lint-staged":"^10.2.11","microbundle":"^0.12.2","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^25.3.1","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui-pre.now.sh/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.4","dist":{"shasum":"4b85da85411f26a2d8c38880eb4119ffcb729d52","integrity":"sha512-19QxjzqtGig95DaiKJ3aNjY0zLieYU5pMJg7s1s9C3c0I/AZ6YknlHUQjnGal2AxOqNHbYQjGOROn6mNS7p5xQ==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.4.tgz","fileCount":199,"unpackedSize":426369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDgFrCRA9TVsSAnZWagAA/zgP/j/UWeMp25wBZyW4SW+j\nlsk5G+8hZphHOAk2saBNfUbka8W5jfxbwmjDESayKWezvmUR5qa/GroFIszE\n7fgY1pNSGU153v0y7Bv5LlcZfgpvbzD8M/JGouOfLuFDf/jdYlpG/QwiHN6T\nVnSLnedFeDO1pPcKiOGdB5IjvkJfeerSCICce0tjgqbt7mrpllT3WmZYxi3T\n+tqEEJkTvMFSwS+6x6pFT/GC/W3KyyC4W42JZ7aUmENBU6TdrESlFCW9ByG+\n6Zd0sj0V8UN+R1MKNhOJXhjOK7fnVaxR34YiMvFoEeyJxB6zsZxuhcJ7Rz1S\nZG9j7Itzf5ws2ia/o7dgpzWK2ZnDBHMP95XKXqjhI2FQzqzupFgZl4mkRC84\nAiCoV+Ywzep/fDTkJpehQwYroyzrKTt+LGICl7xxoUNJRlWnbDj2bzENQMUu\nv4/Ufhu8nJ3y2wkiRMVDX1w0wl9Bx5pRcUEsOVePb3sbcZS9e2Pu3SBX3a06\n4y60Y61eZMEzvzj4MZ/4G/Cu3KLL5q8Yb+2Grhm7Fpxo+dDIw0Od2rV1T3ho\nUAE1AyjYGZ/hTvO0947F6W+Wrajlh8oOCcVmt5dSxNQAWs4ZuG7spssAhlNB\nRu0Rd6YNiXAm7xS85cOxSPwMhvST6XW/qs1sDhb4fSHzwWE03Ie1MgzMGRdj\n5wj3\r\n=msor\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc1KCaUOI0QZg80bEQtfjMmxmtYbVbf6bs7C6A8VMIhAIhAP916VIHxE3DK6CAe+3CqF9Auua7QH8UKb6jwkOls890"}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.4_1594753386979_0.7897415011528575"},"_hasShrinkwrap":false},"0.0.5-beta.1":{"name":"juhuui","private":false,"version":"0.0.5-beta.1","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.6","@changesets/cli":"^2.8.0","@types/jest":"^25.2.1","@typescript-eslint/eslint-plugin":"^3.7.1","@typescript-eslint/parser":"^3.5.0","eslint":"^7.3.1","eslint-config-airbnb-typescript":"^8.0.2","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.0.0","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.3","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^25.3.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.2","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^25.3.1","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### A relatively small and performant UI-library\n\nJuhuui might be just another UI library that creates atomic CSS. [HTM](https://github.com/developit/htm) is the only dependency and that is needed for loading SVGs. It is flexible (not dependant on React/Preact), small (<9kb) and themeable.\n\n---\n\n#### 🔔 Find more information on our **[website](https://juhuui.com)**\n\n---\n\n#### Features\n\n- Theme (default/customizable)\n- Small (<9kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n```\n\n## Vanilla taste\n\nIf you like vanilla or svelte you can use the exported css function. This can be used without setup. CSS rules are added to a style tag.\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\nconst div = document.createElement('div');\ndiv.classList.add(...classNames.split(' '));\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nThe goal was to build a relatively small UI library without dependencies (not completely met). Using atomic CSS was an idea that came along afterwards. This is my first open source project and also my first using typescript. Calling it type safe would be an exaggeration.\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [ ] ForwardRef 🤯 (need help implementing this)\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being compassionate\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.1","dist":{"shasum":"5e7ea24554cc2efe5b5277b271727f56e625b045","integrity":"sha512-hgDL2DGiItpXPCsjRRfkPMf8SeOGxqryupIpYN/kDNItSpKWdLTzH4E8plcOujyqsRXw3+sdCtLoOK+P3FH5kw==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.1.tgz","fileCount":199,"unpackedSize":426563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJ/S2CRA9TVsSAnZWagAAPisP/A0EdD5L9yaCSp2TQv1G\nxmisLTzQmMf4KjsvQO1UlMehyAd2f2JtDspmmAHlwC95HT6D3hq6pxIKjzAh\nNlyIpcaDXZXfEiZZoHCNz41/Q53or3Ie+umLcwlRlEK1effULf+hc99Jh7AZ\naNg0yxPDJ//kMU5UTSTEQPQ/J+Pr4lQJGBOP3P7suz8BuUaYgqqaRlZgndaF\nyyQqreFwWXEdwhXDNMprn/eyXHnA5rnnsX1CSlSsztpaCueaz3BBbfmOJ9hz\nPwguegrCoPYF1fj99us3+LGHDSVllW0Y/ST8dNOHdQZmF8+2IWkRYqOgLUP6\nswx4VIsucH9O8xw6/yZtIzskjBnyN0DctohrvjXVudmkOEzsXSOKH/99h9XR\nO7Ucdm9Q/aFB3Ij1ZNKfOCLRxLcJUJuQCu2cS3Py+pdFdP89PooO4rsq4LCH\n+CeI5JXA/Mp7faE2t9GXthQoPutWok3u1pKhfdiyAkpVHfDTsYP6WoqGnglK\n7lWcaDDoY9cMDKLteD+Wf0Rkle6E4hjpypPHPAqtC2U/qWjoT/j/BRQNkAOL\nHR9U3CFH5YwVley91ZHxexcmCl8N63qlQ8YqDI6L3HFMsJsntzZTsoeR2L+U\n1Q6rfsi0QoVscUZdD4dUA1We47JfCw0oKxBVra1heBhxW+ouTsL/kMv+Ggzo\n/hvk\r\n=OUv/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEIypTKFnztshSE9o65R2zNb3zIXXxKMm4WX/gXjP8VTAiBwzjyLzEby0q1jZDta/3Houja6qFIHRA2iQFTK45kpyA=="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.1_1596454069449_0.10406699697847577"},"_hasShrinkwrap":false},"0.0.5-beta.4":{"name":"juhuui","private":false,"version":"0.0.5-beta.4","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"5a847fa89780df5d1e4bd73f279f9f651d19b8d6","_id":"juhuui@0.0.5-beta.4","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-oS40Y6Q4PtMi8Shdsp/hyh0ne8G1oMIXkdaOQHgkrtlLsHiy4pCy/gXtQCbOlmmI1UCMhbVUFUl5ISWpT8UJZA==","shasum":"f96f975930dc823a04e35679aa9cbbd7418dbbaa","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.4.tgz","fileCount":240,"unpackedSize":894559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPngCCRA9TVsSAnZWagAAQoYQAJd3ls4oFl4aR5Ck7fK1\nZ7xU/JZvcrRsHv39BjUSC7wP2QlPyCCO0O6QqTzDGHllsK9oUzSWSS1naRGz\nsdO4+/hsEIa8ieFmyl2mrRH/ZFnNd4osTWW0k9xLyV3/1lnEvxUG4Ds7OHgv\nbCiyBsX9sJIO1o4WZTisIhQ/n6JsWvEUVBT0XY6xIHR2AK1Gvpnkfj0Da3+8\nad9x5Nh7M9hzMLVAndnOB/RVmq6ChLz1rcoM+DtmVZB6a/MENx59+2Bkx/DC\niaww0Fzr+Iozr38dOPyHe4Cb1R9zFepYFHw/gYDPYlKCGrwHaT58mxm5yTfu\np3NZFKOstw4L2Q/f4rnINAtZYR1KVzGAGCiPMj30wA2QYBYApi8gZpAF8t5+\ntcYh0woN7rQ0NYWp7s/+1ucFxdflAobqFbhnF4bWH/jd1UgnEVWZ8h38Fbyd\nzAjZYSSB8Gv7k1b5svptyyezpniwTp0bg2tMv+ko/y3OHoXIXn0ZRUkn99PE\nBPYS6UG7ucY1XkvTU9e1glT+WWGOBvycZ2euU6aVXVW2sMGs/VrGWv13z5ag\npsx3OrXOQT+cEHtxxwvnASBl6Fi8Us5cVtifmUPqYHU1tFn0eQfoe8JNvbap\nr2+/tpSzCQKFGRYwW6BtWjeRK9/3d/dZvVrEGrNXYIb4lcWZMOs++ms0bkew\noWjj\r\n=kXAA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICuYOqxJUGmursuVRWeEI46bpAGQlb3TBKReXBtVwtaHAiEArxtfaLP1vai1+mPcG9fT+f95HWeYqtrKH4kuh/AbxGM="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.4_1597929474244_0.7480273391815986"},"_hasShrinkwrap":false},"0.0.5-beta.5":{"name":"juhuui","private":false,"version":"0.0.5-beta.5","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.5","dist":{"shasum":"6259b087918f4581b5971c5f556e06c68ecea2d5","integrity":"sha512-iixZRyRKfEbOZvj3IXnRumrrBLFzBPp76vy7hdXL9b+OtHULiz7AYb43qnq9JkmPbEkyV9oDBjlM2Uv6xi1NDA==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.5.tgz","fileCount":205,"unpackedSize":435916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPnh6CRA9TVsSAnZWagAAKCcQAJKePdhe81XqLRkMU/G/\nkYcLI2nsjQbLkdOEeQHTormCi7cM4zdw2ecyXFhf3ihruTrTwZDfkeTA+Cze\nD+7RtGMZiSzMxuwhab86VJE3peFWOFWrr4o8lsYfUDE6rAb3AKxag0+h6g9p\nYUpWTKMhG5y1qgGh7Eer0PoK6KzJI9F16ricE5uS6tsN2uZdJrRbx4IUxe4J\nRraB2izFtz/NJU+tNYOHWkKn1lZbrGgazIRYeeAIS4vy1z153CDeK24j+8Pr\nmXTHTSg0fwPB8d/TMNjjzhoSX3AFUAc4dNAxhgdydC7RsCRgVZg/+/Cukdv2\n2ophXGA0N+Ux239Hl8awD4USGFiPmTjfkKcKkMgRxOUMChAGJJ8FbQKLIWaX\nqSvBUdt64bJQka/9V+ryUg0GTLaFXaB1zgl6GLnS+Ae8m7q3noNNfeH/fRwB\nUakV1Zo8SZx/u2AbJygPe4BcBAGS2i9Dblvj/fMcJXZK+ePGD04mEGIjTweE\nC0vJ0NsHblTgyy0wcjGg5iApRXECNu3sWXI1EoH8ZsYFBvtVWrPBfq/dXK9l\n5rexuDr02ZXZ/VMxKY8uQ3z0V9AxMI0uHK9PmH0pkTDnm1sMCSNV7wo4t7cU\nTBkGjdslauJNRpu9lAcCiHC1ux2iPOxiI9zCXRslk6bEq1Niw5VdetmpetV5\nq56W\r\n=uG9p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaTVFMQqvcTsmOlYjREtMopG0/f/fm83Wp21oXXnCZDAiB20yOYmt/fDfy5VkP177HQ9zyMue6wInrLTYNb2b+geg=="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.5_1597929593800_0.39199568415876307"},"_hasShrinkwrap":false},"0.0.5-beta.6":{"name":"juhuui","private":false,"version":"0.0.5-beta.6","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.6","dist":{"shasum":"c7ad9224b56bf7e3f592bd818ccf1ae4a55efa0b","integrity":"sha512-hlUtXhyUngsdGNu308KvbBe/AzI+tYl+PSV6J3ys4fG2YH3xjONqOC5uaG/Mot6St9wzpmdttb8xZYMl0DXP2w==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.6.tgz","fileCount":205,"unpackedSize":435930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPnzsCRA9TVsSAnZWagAAIeAP/ihcX/v1UGR2OfsMNgwx\ng7aXe1WA+XKfkllw8SdfXJ3pWIStT65nTVG1oTIX2B1DFlK694T//hNynT37\nwjAGr70zQxQqy+Vk1vECD9FwfA7nysKXlYgBma+HkJnydXzDs6w/GIZ7ciBD\n/XO1c6+6F+fC4nB0kLOe1ssN1aVebNFlcnhzDN6WptEG7FK3EOfbwflmdD8B\nAUasRwosN8WfVV2qDe9yQ/fDu6zCPE4310aPDEXc82PMhe2ND5UcTqmuvt8t\n+WVyNwTVVM0kCFra9wUBDkRZDDLA8Ta3mS+jZced2fhBImZe4/haDGGJcq7J\n+MrzFxD9YMXSuAcpMPSiv4285W4uScXc2bHvXjkS3lCXTVA5Oh+crKjY9Uyc\n+GHDpWd+iRGWQBslAmdN9k3IYHLhS+XKiva53Lh5mBNrKaFo7FN7ayLnHo+M\nPSMO079IfKNX2Yp0+jtpvNPU8PhRlSncdkuERE1L2VTyqt9RTNLCf2G3EWxG\nkejQ1IkNkItPM4plOBQFxiS7eGqXVF9o4v04sAcnaaXh6E3udWhrLO/or9vm\n5xSrnQE+BfOudjvQWAoH4FBF3IMBxtdEFG6k51Nzdz9V3lyIRMocsRnQWKPx\nNbqe7a2sLuGBNbOLnIJTMv6jRZH0V+5njoFuR0mOIlkk4J0EMRRe23g5MKgJ\nNeyo\r\n=WFIS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsSy2UYN8N2edDcw8S2L+6BTwhMqxjWmQ6ePLnhmxPVwIhAJj8C8+vMKMW9eWSP1OAKOMiyliI3+ZkHE/EUaZRyE1x"}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.6_1597930731597_0.6146247028505714"},"_hasShrinkwrap":false},"0.0.5-beta.7":{"name":"juhuui","private":false,"version":"0.0.5-beta.7","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"7b332f1a367d1646433ecd1b224437a97b1ac7a1","_id":"juhuui@0.0.5-beta.7","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-oTBWQAkgPdrBUtgUNQcAW/Y3pdHT+gvfGPZajkCpSOGs3YqXq9aGfHRAlpCx078roOhNoTgaxoU30QizjxeqHg==","shasum":"7e3041db4a589756faa927518c7a1d517f119f25","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.7.tgz","fileCount":240,"unpackedSize":895458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPoFRCRA9TVsSAnZWagAARaMQAJB4B+nCSqE0XDpn2cCK\nf3BLRwR3FdDehOGGJk4iEoSXiy4lYYv4X5tqSckV2VKPiLIE33udK4baBSTs\nA+ZspyjPjfBSaoN3Ds70fq0zsRqvehPXaJppf4waKnzOqnm9bqIW2v5E7qtG\n8g1MtYEnVsDVVwRVtVbas3G6Ycq/PCB/oux6+Cnhd8Nx1sQZefTdY4icnDq4\nnLKxQq6zGteb4jPQq322q97J3P38D1uTMF7fx6NzZCpXC4BQf/q10anxnBgN\ntnz8VgFmNsZBHH6PCmOGVsAsASrrl0r2ossmptceRAz9SrBdhafOljcWGmvE\nCEW+EuecKW/UwPeArDpwewh9FSksE1z8OgnH+jnB0ZMC2QonNbPrgPHUX3Lj\n7L7/EsJkL39cpJphl8to/ZU5Rafb8SACHcSUxHMkdPG+zhzFCMTarbYE10qi\nnbgdmBeSCj4HEHNQIzU10H8Xt3IIjHrwv09Yoyr0e9TX654sCLilR5Uq2Fn8\nGlAr4UpyfiEmj6CAdpGuZJGlehM++/JUnzpPohbynfRPzyXXUqB4RjUfmXuT\n4YX496TND3JNm6/BUuSBl6d6gYYrWsrAK7fCRsmHYKTVWLOWCVdEctsnez37\nB/8UpphzPJ5MzA8ItNWRy/Fz8w6rZeZAUZTAK50Xnka/YMVE5xDsgLB58+HX\nufLj\r\n=oKHn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXWrc28YYaAHoss820zIQ/MFKlKWpi5D+U+KgbrwGxxAiBakvGxX+vZSYR5XfHhYckiMbtv1XaaT8egY2/KrPBGSQ=="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.7_1597931856741_0.3474959420191006"},"_hasShrinkwrap":false},"0.0.5-beta.8":{"name":"juhuui","private":false,"version":"0.0.5-beta.8","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"3ad69445ece9c76fac511e613850b31da56d4055","_id":"juhuui@0.0.5-beta.8","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-08NZ/MgQcRvt7H2URusQb4Xu4Slj1PkCKsaEx/BtX0PE1ZoEIFGyqfsKfYAn5sOOmufp5+Hc00MnKr1/kOlIlQ==","shasum":"0864b5cfb8c0188e7052de1cc30a500562a98b42","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.8.tgz","fileCount":240,"unpackedSize":895441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPoktCRA9TVsSAnZWagAAAGkQAIh04lCRxM/C3XCvl68Q\n1vcI6vbaxDq7UhOpBLNUsvGD+Z82z++4teT41Z9MkE1RC/Vt7iS8Ook0gpGU\nA8t51sFf8sYKZpTJpD3jVB6Ed6OoJQx+PAnRlwVM6jsFsDQGNJWTKh+OtxcZ\nodlcAZ0/pTO+iLzg+5OR3hVvTXSw//g7X6dylIMgVHpzAHBR8/F1dRYYV7JR\nVILI0T24c7UGdGfl87IY0oMsPzr7yKyhZFZCgYE9grW0tM5IVhp8ZxJyWGpF\nB7EMuRSLbCZOTuavjFp7HaKpCVHtVSYmSlwXU+laQ6khUg5UvnCghupRrUFG\n/8mxhpR9E9vUjSUZlHlvAdSbr0RPvyr/Vxe6KmzWStDmbvQxzN4rZYFCaAJ6\n9yuLntmgGifEjKowz5HhBXUWr3//ZryD81QYJBzO9ShCPGjMKXGmak4XpEAu\nbp3Eqn2S2/BFgPHbHqMMNgn76uzfaTO38ArhXOIzHNH10/eCYcQb9v/lnaU4\n0bH4XhS5w55OQ7dSyqyWZ/J0IOe35ek/5zpMZdQL+/Bgfi1darAOm9vYK9yM\neQKjiQdyPmvTJKmrSK8YZxvtWwDYxoPEG7s4SkhMgB4GKHGJL8e2dFH0JA8y\nrqsHMVHC9H5ycnJ9Ka3WXHs3HKK1GtIWjl3aAsvPW1V2ONQX7P/KQp2u4xpF\nKVVG\r\n=QVrF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1K5h6LJPOAh1lL6UEzivD1rW9dxAuWW/5TSGDZ/mBtAiEA9DzSqLhTUPhzwcqUoAeUEPI48Fr0K46C15CCxrWLe0M="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.8_1597933869045_0.9101879196094727"},"_hasShrinkwrap":false},"0.0.5-beta.9":{"name":"juhuui","private":false,"version":"0.0.5-beta.9","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"937ecb842b0619a4e55cacf3207d35cb375e7ecf","_id":"juhuui@0.0.5-beta.9","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-TkwZTgRvX9Eutgz141EXuz09S/S0OrV6GxRA7xILmoMF4825Pwti/9jo1siTnYeg7ZLa/m0x1QS7+siwGoqn4Q==","shasum":"6d0065cc68c9f6fcc52ad5cfe570352f6b1df3d9","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.9.tgz","fileCount":240,"unpackedSize":897249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPpTlCRA9TVsSAnZWagAAdo8P/RH4iFwkwJjQpZx10VNu\nCTBhWwpqORhhgSAKCBrD152BFXregy9Bp7REXLSmURqHohbK0iuJD1m6hwrj\nt5J+R6nOTS7BCLBWm0nBN0spCzKbVKlOLCDV5rE75qIzCRK0RFfdzrGeDHts\nyxSiT+u3zIlaEQZPsSaNEZjrBjI3YMOUb3p2egbj531JHmHns5+u9UL/qfv9\nEG774/TzTZbFMcT4r3WspFE2odRfuywudTA1JdPlO+RN5yQbzsVxxcX7iESc\nst0mWhkKsEcI1+0LjIkM5fQoo+ygN2cUdyyZQ/6qCluWeWwWhgUUAXfjvwoc\nCKAx493bMMjNcoh5/sRqssWoJlwWzZ5GXity07L92q6hbn0sHahyUMKcMlbp\nclz43tG51IOOOUvJEDaXJydvIVUHlhOdGd+izelW6XY+774YctcJsYS+LhaH\n7Cf8v/Y8Spdohbuk5WpJJT3AlEPxML1C5VQOC2R0YErqzKC0y2HsQmDOaiiL\n3ss1gD/PH22p6sevDx+BUfp5VBNTSKBUInxZumJ38SkGvhQ89r/p+kn5TLB7\noknHbwIdp+85IqUFWNONG1rQ0Fo20zJHnqVprPM8svSaG1QFsCiVChlKEkNj\n79VMxxESPn3CBo2Z/Ig5NXOTqL/gq/B7hKRgWgknf16HyCczKksmcBNmfbt7\nLDMX\r\n=z0R0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICapfZshfgRZHPSZh3K/BNGAtDB+JAM+conn9NuCksReAiBmiF7lKcmFc96QaNARU0yxTWkKGD/uwgzSNsP3Uj8eXw=="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.9_1597936868994_0.02263296536406756"},"_hasShrinkwrap":false},"0.0.5-beta.10":{"name":"juhuui","private":false,"version":"0.0.5-beta.10","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"dependencies":{"htm":"^3.0.3"},"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"fa04c22ca67180042cb2147886f9fb24a43fe82c","_id":"juhuui@0.0.5-beta.10","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-yT8Hn+U42uaKOLzR0rLZqbImV+fRD7ZUYrna8v7Aa0jBYeaCwlmWT1x7YrLyfaa3FqQikPYwk6sYWrShj9ffTA==","shasum":"a00d9c2a2ab0e0b97e62f2b4e04a7cf0b83121ba","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.10.tgz","fileCount":240,"unpackedSize":906289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRVUwCRA9TVsSAnZWagAAH9cP/3sjpoaFYujc8uLja4L3\nhWdew3X20iIJHIe3WzOlOkyNm/4uDVLqJRbNzAoqhCXoI3GbzSCRhkuVligK\neYAKGQgfblP8Jb3RLpH7BEJ2z5rJpQnfmA+0ZnTkP3DwTRGE6U0BgbxQB8ka\nVnS64CNDv7V/DeiUI6KmWTqqXCi7BVChxHdLk2W2mh8rYl8CIz85EJVMVgMO\nhShqzOugjYyZBsHc5fnMSu0G8m2get3WGaMSi3SNzaR3QllOrQ+nRBFCGjP5\nplui5oA46F7aWWKhqb0861SBnKzBxsRtF2PbY79YEXVjSBfe9wV0IPucpaRv\nJJXBXJt3AB0jLHqO9hh7kkUM+C18JEO1PipgAOrKZSMUszX+aysbAVD7BZRb\noyHecEmVhE9oC34GG+jeLn/fc+LJ2+OyoFxM5IkVOyJNsEjnAu9JCLHbAiq/\ntxI6TkLBS63FFbSpvbk1Cv68UCNQjEtf0Q/D8nmo2OF++iYNimBRMLHcCjDB\nXxpLUOngG+Yur35iqr841NmHOaF0POEHkbi3r/uwdujlOOn9LmZFrcnCSev7\nlWahnYz3LD8mmsQpm/ME6FWI2+XuDB21Klp5s5BAQXVKfAXqPyOtCVtbYlrq\nhvGD8265oR4UNtcw5TBveUmvRn49a5/Od+vKfhp5kM7f4O6e5CRn0xmVEZDQ\nYote\r\n=+DaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuacvK8VU89UWNjJLAdsTeTvgC6x633lOc1Kzqs6RqIgIgdiIfgMf+kE+SxQtNayzenyw3bUtcHqHB9Ss+3w1nz1M="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.10_1598379312233_0.49773457354367134"},"_hasShrinkwrap":false},"0.0.5-beta.12":{"name":"juhuui","private":false,"version":"0.0.5-beta.12","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.\nYou can of course test it and provide some feedback :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport { Box, Flex, Fun, Icon, Text } from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n color: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with({(fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property to the component\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Red.merge([GreenBox]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"73fc3f7b47ebecac482ca2725da6966d448f929d","_id":"juhuui@0.0.5-beta.12","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-WExfy9LddMs7ecSqdd2LkBFPE6dKpQAY1WY8yBXSpEewEgEQdBWEoagGSkGaKvtMH3dVfUcd7NtkWDqfrCAp4Q==","shasum":"f620614ff046c9e339576c8fa2f93acbd6e41413","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.12.tgz","fileCount":242,"unpackedSize":1020546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTgrbCRA9TVsSAnZWagAAyWMP/0IHxIjfApNI0m1azWo3\nE5DS3jIqAxeHzDtPoyxnASvK9FiaWNWwCg/yeAwDW2KJHAUGtmWrmq2ngk1u\nYlYPqOP1UE13VTmrqHcDIoLKcA5i8MfwNn/ne1tNftKXRs+DPbEjUDzE5g+w\n+y7Ld4ua3uxYpqPjAU0veN+ClG7RpbT5vT+9Vvf482U51mdsOptBSEmz+gMC\nE2ABLyMt5v6CGb/HLeZcGiz54RGSler+O0f/GCLtYEf6wntGs3pVG/7mpnF9\nDPSO8RvMlyvHAH7bmSswy+rR7sabUC6bz3zPdEk0kg5wRfEpqExB17XSHs2J\nMaiwu+inJ0xmWWsevtAigY3ze9ksBeb51Htu6xv2vWNKOepbfn3LqKbn97d5\neXbpJ/P7cSjSAoICq2IsRae06nRVzA8z7qZ9KXGBmuWog4f0TOx1SGilBMrc\n2tutWECSR73BC4BiuzxXTzCaTe27d1NyxfpU8T65OOzp8P6DRTgpiVn/ZHu4\nphiS9IfFtNjMCY+pm2zADmD+kKWINL3u/tZ4ms2laeLryw04BxUKEiS7ur6F\nL0sEtXC2uhh1L8xNgwHiagpTeTiEOXFuCuHqgmfvrnyOwrW2DamXkwOAe32L\nGCMdMmeg75TnH3d4xuEnsPTpOXUe+Vb8Pt73eG6hmuL9YzaeSoNVGRWYcGAl\nZqqM\r\n=k/As\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUktlvWvIp6TwzobccuKIwCrMcqxviV7ndnBFsPDvSbAiEAn51jymimJLaWoUkF3lpSWVOjVsKkt0kWgPaHl9UR8DM="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.12_1598950107267_0.6148036930071319"},"_hasShrinkwrap":false},"0.0.5-beta.13":{"name":"juhuui","private":false,"version":"0.0.5-beta.13","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nJuhuui is a a UI library and a tool made for building design systems. Merge and nest components in a simple manner. Variants can be created programmatically.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below. All feedback is kind of nice!\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```js\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. To give you the freedom of developing according to your needs. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js.\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const css = extractCss();\n return { ...page, css };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] More recipes\n- [ ] Improve type safety\n- [ ] Improve performance after server side rendering\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"ecd92a3ddc61406d85e7ff7874e13b5845f9b4d8","_id":"juhuui@0.0.5-beta.13","_nodeVersion":"14.9.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-akcqvyiFDe76iJAr1F3DrI/Oj3myHjkC/y+5e6Y1LR//9EmgL2P9/clIrpHsjmtHSSyuO70AZdNJ7+ldod7TZw==","shasum":"8c3cd6312d5dcc93144c9f24b08dfaff01e6782d","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.13.tgz","fileCount":182,"unpackedSize":1125518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfac/YCRA9TVsSAnZWagAAYloP/ji6wZ2WBpn51C/xuF2+\nuS4paPy4U5bItZADjuF54oHSGqOk7Ji63HjQ04NULpiQWPzDKjOClRv7D07o\nE8OPcv1lLJYIom+pvs1FIKSatJSDdKlYHncOuLoFkuMAQmC/8eE4cgYnlMtZ\neUUgI6+mRmiK0uFJyHrViPH/hP48KOWQm7G8COg5K0yskcsh23CjNelimRg+\noJdOY62fhUAVa8fEkP4O7JTDGE8iem7DPKy2jLIBm3mc70knDJnNulVTY/d/\nr+RQOgHJpvhlJuygWflF03ne/+cC0ak3ISv8aDn2nZEgqBhORdZ9LIvxddv8\nTo9H/KrQ6bTUdS5bK24vWulMFwg4jRx3aKNDTaT/ohyJ3b+pKCVSlzcE8i3f\noMTZfJJqbUr75Lo14UA5sIlwBCizD0vzNBMamXNZ6bcv6bRNxekvIbN3RZ65\nNbJ+pFgDy/3UbClwxIEXiKId0wiADULfnlNTsJwh8GDa5iuDrHHd2dQthJCk\npbWH5Iduv4Clom1+o8uYP2iqIndN1TZfkVzMh0SuM9H6jc/FBDUThMhDTe1x\nDqkH5Ov3VM2J0YeMco0MOV+aJUf4gxvk5QryJFGJXvJ2G+FsbkOsCsCm1ucr\npbsBqxUihckNqE+GtWuYLyDzol6PTa91/bOebhdMwNCGBVy16w3x8NhI9gpo\n7gRS\r\n=Pjf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKVXIRF2qPxwgQb4LjtQltlEVm9mmrBjhPVv7cVzaxzAIhAKDIYmTqgNhZOtLdsZvmcL9srwG3Dm5hW0LS047a7f0c"}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.13_1600770008237_0.4819691105819379"},"_hasShrinkwrap":false},"0.0.5-beta.14":{"name":"juhuui","private":false,"version":"0.0.5-beta.14","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"array-keyed-map":"^2.0.1","csstype":"^3.0.3","htm":"^3.0.3","juhuui":"^0.0.5-beta.13"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Small (<10kb)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Easy to implement darkmode\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"5746e5b8357fbb20e279edfc36c5c74c03be95e2","_id":"juhuui@0.0.5-beta.14","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LUpuyO+OPG/jkXFpbKDZ0GXSUqRqWFMycpW3uSUm6fbTMu4IOVdaVYYYdho1/opbSKHRz3OKCycaUSjOzvOltw==","shasum":"a60f4e3fdcda1e5f454d7c1a4f7d697ae2e52660","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.14.tgz","fileCount":183,"unpackedSize":1107385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEY9CRA9TVsSAnZWagAAMnkP/0fnJMVsbfsNjV9bGq5x\n33FXVmN/XNEYHnPDfWKcGcDenmnep6C7M6Go15uriVdBhK3524cbcAEHBv/O\nEzcJVhX3WnISWwNTFm2+b6herv45rhwyXjQD+ix/gpeKp9rm2hp9vAOexfE5\nHclGeovsxRvPCBrwMT84hKrzza8yFuwu97tPNhYzvhW24ZJj7pzn0ksgfHuj\nUAlKETTP6Ve8U9acdKFHUhY5L/T7wGY5ioDwaM7mVf07Uv3PSlepA/s3kk1S\nPKxvxxIexwzEgbQ4ZQIIKVD6oUp1blq76MSCoaLNZPoIMeR1nixK4dYsiVxn\npw2R+gV+TLrayvv0jAm/rzx+SMTuXYfKn1pZg9/aOSahU7ug5qjLq3J4GpKw\n7mflGyzhxI5qTRuO6zRNtt8+T10lDCY5+0wuY/CIjVg+Es+oyXbFivhInsVb\nRQTHfj8QFw/PeLvFJP0gw853QhXx1+BQZY4KNnvJl1kdqqYPeOrlrgO5eGRZ\n7freTIAh55Sv/ZJJUUL0QJt1lipzUYKBEMura2dArv2wmO0qvQ9FiWL/HI+z\nfIrqmocgRuP9Y4530OHRYWLoYGbohK4WaFlmunrUtBMw0jS+TX23pO41+doV\nV+mh5UkxgUDAIHFaVWl5H6iS2f6SouWxO0gFKDgdo3Kcpug7GRoKe4LQKJWb\nZcxv\r\n=I8eN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgA+zJvHgOyoJbpu1Y4/BPokq8nUrXYpEAjrgcwUIKwgIhAPo9+utLctvJKUxZRFYZJksQiXP0rVVuiArr2Gi58gGw"}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.14_1603814973053_0.9205108838286675"},"_hasShrinkwrap":false},"0.0.5-beta.15":{"name":"juhuui","private":false,"version":"0.0.5-beta.15","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"array-keyed-map":"^2.0.1","csstype":"^3.0.3","htm":"^3.0.3","juhuui":"^0.0.5-beta.13"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"8b06b1cded24fa904d77db8604ca0242f826748b","_id":"juhuui@0.0.5-beta.15","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aU7X47wf8PFURYz6Pwu1NIBh7MxRBZnUYAIvCpeMdkPwT1q/JADDjB/Jolx9diolt07A1sXYPa7kocIFpL0uog==","shasum":"1fcdc7fb84d5df9b3fce5b7eb35abc189451ce77","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.15.tgz","fileCount":183,"unpackedSize":1117393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmvr+CRA9TVsSAnZWagAAi6sQAJvTRAt/LBiVc3eTuZVP\nWizIpQQzDUGX+u06BQ0jifKqo3GLfoQ8GMIdt+CyOSTtta7nHXLSJCKaAEha\nBzK6KjCGWuN7MTUiMxtFdqGf94wC2bdfOEQUNpoYUwRdDUs+qVL1lWOVBSc4\nkWJ/SgQFjX2mMo1ND+uJdAA7yzHyVSeayelDOUPWf+CV2PbwE91VwxK45RlQ\nth9hiMliDSmacxS6puOxjMCkWQ0k+YsXK81TScXtNMUgcRu+hx3vyNFdshun\nGJ/9JOGnoCp94+Knf2vbzAj6xnfY9+2Zlw9737z6VrM9kCPNgqcJG8+Kk8RD\nco6IkhbeeU938WD71R3kQVnk6caaWhUsYGNzoDNphw/CO1D2yz0CmL+5ZVno\nrzLLV+6m7WWsQTUtzeniR0Yj369Vdo9QDxTyKtnNFclFucVAl5d0hOik0fa0\nubPKTiM6UwiVExKMB8JKXr5qx4lWYFeBKgmQ5kSnB9+TCBBKXYUNUyvUN9n/\nFtlPEIRbqaEYwrXSwQ2rCdSo+2NrtjdjJ2SyMMswSykxIP97qL5+8QUwGy/s\niIqNjJZH+EfeV1e6Vi1ugBHer4dvK+jrjzsgKqtFQ9Ipp2WHvWqGF2KzbdTx\nNXflYeHxBNJfbBdiEbS5iudK3lNLmLF0Xo8OMjPe1wSELbjPaa4id2vogA80\nlsz5\r\n=87T+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC31tR1YLeG+t3b3HzYAMdJyLUfkn5z9eexClk5epV8XQIhAKXuKPUSIpEhB6wgAubFYXem9F+u92E3LrEBn6+HLoED"}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.15_1603992317360_0.7839898900275619"},"_hasShrinkwrap":false},"0.0.5-beta.16":{"name":"juhuui","private":false,"version":"0.0.5-beta.16","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"array-keyed-map":"^2.0.1","csstype":"^3.0.3","htm":"^3.0.3","juhuui":"^0.0.5-beta.13"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"490ec8302b63a2e56980a152aef16868e6881194","_id":"juhuui@0.0.5-beta.16","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-JOgVx5k9qFVAqoPDyNZhjSOPVLNWkVkYac9r21Xo7Vle4hX7SzjGBOa6wiHdVPZ80SvJdYu1EluZRQXIhKPkgQ==","shasum":"29c63bd6117841c773a1900d5961a10108da488b","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.16.tgz","fileCount":183,"unpackedSize":1125556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoD+pCRA9TVsSAnZWagAAHyQQAJNGJTIUndV5YljGOVrX\n85O91nj4H2E745q9NF4rMhLEHfvxS0WjtoWTRfVBx0mFKvYMspuLyCUhiyMn\nww0pBLqU+7op5XpAXdWlp59h4jvLTd73Ce9bEEF7A/9jt3Av7acDjw0k6Chz\nWtikax8HaUhv3TMLAEdj2ynCPIv526Dnm//GW6DgE+0f5G8TpbW4ZyzNbQ8W\nX1IEZaA/HySk1iiF2BBU6tfXmFYTCSQRpVTWVPNLe+pSeD3Pe1Fi9+yYsKZw\nMopbd/MqFLTku9bJGDn9qPEJLHNUNGDHZOzBPU7DTVQF8BmWcx/cmHQUenpE\nbJHidV8U8l28kpejUEGTTaIOyQtXqAqoe7WLEuyr7d4iAM1vQl7aRQmAcEJk\nU+ZbNgBd/iQ8vMh+QS2kspwmR0QTTzt38n35MYYdUvt6yCPC/+/JICRY8BfU\nmFQ1Zpn8s2cWTpiSDCyJjXhpTJR2AMLuUg9YJSgmOnY9DBWOwVJmw/o3Icoa\nd1nf8AOYqmfvWalP3MOgqdrUT5CoQwH2I3gFkOpAP+PXL5e9RN/4/8tWvm5s\ntjnxpS0rj5oQU5/aaM1S5+nn/Yf5SSyir5nbQY18iisOG2qa0CLHcmltsePe\nbIXZ5ySJC58aoXjsR709XO75q+urpShhctE6TOHX1IzovujoMLoGdvGbpr3s\nawU3\r\n=iBQq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyzVMIL0hLO1CURd4yEg70Nzr8X9TNgoyDTWyyZ73vDAiEA9FIajT2BUk/8HwEstEkb+eniD7jFlTTE/GxnT3aLBbk="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.16_1604337577220_0.2185100610962012"},"_hasShrinkwrap":false},"0.0.5-beta.17":{"name":"juhuui","private":false,"version":"0.0.5-beta.17","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"array-keyed-map":"^2.0.1","csstype":"^3.0.3","htm":"^3.0.3","juhuui":"^0.0.5-beta.13"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"92ac6aa0cacaf91a7a5d4ef6964ca73e6e017b1e","_id":"juhuui@0.0.5-beta.17","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-z8Fe2mEiF8AXRX095tZYr4BhyhoLKs9yaE2So8mHgDvWZbMG2qlvqiV++0StoiCK4o3IFYiFtHz6294ufaPOPg==","shasum":"2bb9c544ffde8eee19cf304a72f0db9697879c42","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.17.tgz","fileCount":183,"unpackedSize":1120402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoFaUCRA9TVsSAnZWagAAt2sP/16sQ2o+wRCuB5dMyQT0\neACkW0cHgkOfilQ6wN5cr4O9wY7CIyr0F9hufhjwtXeGOj25HKCbUKLFsHMP\nPt4m1qG+nuEZlfhtwWXa22W3lA8+pu3rz93rc76UypiMkroeD9ga9TEZvcRy\nKkvdpRNWzp71Bjr0rcKTeFknwZT2YJ2Hr+i/yyTGHisOAM8/Yec0RCC8VDs1\nQcZo3hNNAUPqUxDeXwXcY76j9vVas1rHIhBxKULGwCvMIqvcBWEwyR/WFqlY\nQDepr3OzK03YBIW+MApNSoKlPWHMEpQMm2PVq0UrZRQYJGpWmHE8dTLDRvuA\nCTeCSK8y7AsJ16IqNL/XhKsCRXfIlY4dVmH3qyLqMTS++Em6nljEd4IkceRs\n9qu/FlETpce3wOC3KYy9+y6doK7Zs8Km9noP7luuII/RiH3lSKMppLelRZMg\nkg2hs0kt3q45FG6e9IuHhPGBGlafM0ArocoDRwmGZEpiN4Zwzgo4hO0Hf5wi\np19J5VVAwq/BzOUlJK4sesrMMlKXD2GEaGpGh6ZAUVyUjZFpSlhU+kRlB6IU\nNtjIClcc83SUFFUSE10p0S5OZvmLmcFbDk3kRS/0ULWnCSUqo8SsIHBvum5m\nx9Lh71fbGJCoaTuUvu8V5bhKVWdTOEo5ACpgopQJrfD0yD5kwU4YgWw/cYiQ\nALQ2\r\n=mSBh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA72m2w+TZYzm3jaix4uuI/lPXo8FWR1DtBuP/iN1YfbAiEAzgILJcnW37VkEc2RonPy5Qw0TD3hFwF6Z663Mpa3rok="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.17_1604343444339_0.7714265573647248"},"_hasShrinkwrap":false},"0.0.5-beta.18":{"name":"juhuui","private":false,"version":"0.0.5-beta.18","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","workspaces":["packages/*","."],"scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"array-keyed-map":"^2.0.1","csstype":"^3.0.3","htm":"^3.0.3","juhuui":"^0.0.5-beta.13"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.4.0","lerna":"^3.22.1","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.2.0","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react'; // or h from Preact\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\n// _document.js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // activate fun=true on all components\n forwardRef // necessary if you need refs\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nplease see [benchmarks.md](/benchmarks.md)\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","readmeFilename":"README.md","gitHead":"4b324b48dfe5c67fd716e099256ce21c54b1efd1","_id":"juhuui@0.0.5-beta.18","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-PxmeivAynLbXVCoJPceVNdu+ERvpJQdOTYV1oLcUhYrwYPX1ADcY9OCBEwtQ0pWSX9EsFdtfO7JfsxUdugkggg==","shasum":"b696f23faedcc17e130845b1b5974878ee353b2b","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.18.tgz","fileCount":183,"unpackedSize":1120180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoGyRCRA9TVsSAnZWagAABW4P/2JifaM4Jp3peSw62+vO\np9wGZRMSSvmI+g638zaABSCWRtbSjiz2InCnd3uLI9yeeuw/hZuLqDX528ru\nbAZBBn2GFrHcic0MugOnQLTC2HP0l39NGdYB8nhIN2k6iBcHX7Pv1sIVW72B\nIAm7xyIm2Wqe1QfCHBAYgzdEqzmH+hGRrsWrf11VAVteYq/dIjgIGNJ0w+eX\nJZlDfps9bIFwKX7vPO9lpg9ljj8FfD5OSo61lLEt/tTk+F2/+8kcbu//OSlY\ntZEo4Ykh3FdVyNDF7g7mDb7TpODpgV+utN+6YJqrJHVLpr3MP5dOnKFAJ2SM\n1Euh61NdGzDbwPtFwHjidRgxC8uHia6ZZMzyubUW5A2NBT5KWEstERwWhgQw\nJdYhq6QIDqq9OrPkabVvp1E5ZNFW0Z9Q4gxzMROLUHQLWOme/oDgUN+uskCN\nj6b+3SrD1iZG+4o4fuZUSCn62fcQEdapt6xiCkHfR00iBJ2hkS3OzSAP9E5a\nZsSM4QMugMWtGWRoEY5WpK1ooXyJ0AkrfRo0M7jswBxxhaHvQLpZCBLU6k7v\ndceCp5qwlu1J56mn3qqNQPAa46xGlMa2PR8yQyZpILT5Wwk7Nv/UGgFE8SkR\nVUYThADXs0+RZqja+EL7j+Z4pYjEjJs9jvhs3WeUTRu0ybAF+67R12LBjXd9\nyyU7\r\n=mg7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAMfQxBed6q1017/R7tcMXKnhNGCt51wNUc4FbrOxHAOAiEAri3LGCWQ50UMEaH22/BAfckEjkkZqe1aW+8nTSzfvm4="}]},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.18_1604349072621_0.6940232244277365"},"_hasShrinkwrap":false},"0.0.5-beta.19":{"name":"juhuui","private":false,"version":"0.0.5-beta.19","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.6.3","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.4.3","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nYou can test and compare it yourself [here](https://ui-benchmark.vercel.app). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.19","dist":{"shasum":"27bdd01806a5980726579087769f35d95d8f9c07","integrity":"sha512-FO6AGlKDNM44gr8PrTF/D5/WEioEUBSrohHkUkzrJ7uCc+7qakTelzU6LGLCDUDhuBJFYXFh7Q4+TJ+SOvPDTg==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.19.tgz","fileCount":125,"unpackedSize":451224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfopSVCRA9TVsSAnZWagAAnp0P/jjDgZq+EaeweN5EnYvA\n+NzxnBXJQ/GYXP5G+SyIgwvrQqRe/9YbwnJE6Nbt2e0ViSEBRtLPMEd0J3zS\nQBa+lAWGiW+KwlrepgKYxHu7aAbKCIzcXRSs41pLnQ6hThLE5IpIb9MNa3An\ndpAUt3hyMvlFm+ymlxC26RTu77ePeaBaHbH2oxmnUn59wi++idPjAfV/IewX\n3oltk61nffrD9eefMvFiq9EyHJHotBa+51ZClqFyRKfjDBOuu04DCOtQpqsZ\ncjhzozH6PpxR6FRZm4kN+qFMG8udDxj3klWTqZkZJV2Yowy/uv/xT/vrceoR\neH2M88GCmeFtMvLt9W/sioq+Ew5FQKWeQg56lgRgTnHr3zzGRTbJrJLcXOxi\nlSadM62DkKuDmWdO5ZV7H3xTm3ILIOQa9SNHuPdoedxFjT11TO33fFXht2zi\n4rIIrtG1MY7kIXi2DvhcosA5fjcEcU9W/0zGF9kKejytaQ1FwQhWyJHxLQLa\nFs2Vbo/G02KaCYm59u7TTQQTCo5oCGpEqyLTn0kCz2wqj1ohiXSlszhFxuVV\nAEsAx9KYrqeXbAyTzXJ8f9IfxxgovEJYvd078BFBbYvh9IJirfWYj1b8T8Ha\nDgOi4mPJY6HjJnHC9wRTV8D6R9aXxPoIgTpklOhAEoJnxKMJdS1AH+YoseH1\nBR8M\r\n=qYi7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt7dTMXCPJcJ8ywBD97oW0Wjn2aCNUY9xulNzGin5tLAIhAKf/y+PoWS4eDKeUjp7dz9VgaDQg4MjAjCv6K4v3r4xv"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.19_1604490388754_0.7513912378956333"},"_hasShrinkwrap":false},"0.0.5-beta.20":{"name":"juhuui","private":false,"version":"0.0.5-beta.20","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.6.3","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.4.3","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nYou can test and compare it yourself [here](https://ui-benchmark.vercel.app). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.20","dist":{"shasum":"e841df2cae6bd85e35d6e4626fb073e8cc8abbfe","integrity":"sha512-bQaKqqOBKfd2SEHPnS117JQm1OshCEjsfW5GJTnopCp9JMLSGZGc7bkmhg0rbfEMsxR0k/Tdr/9BfuRIHAwjxA==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.20.tgz","fileCount":125,"unpackedSize":451701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJforFSCRA9TVsSAnZWagAA4d0P/3LbCOry68uk8+P409BD\nW3F9fi68gmsawceEFuASZ0ZHVpATDqr9hDwMW0v2z5pnt5p2r2e8XJ8ANwbx\nvW8wFyQfyzSEywMki7c5ODeN2gIFk5KlCk3On0ZkcK6hVq6Wnala1FSQTPsa\nohmMXQhfkYP2/08zGryI78Igr2IXZyq1SO/gxJBC21Xvg+6oRR2hNdIJ8zfK\nuB7kn/4SLiZgKgrl2huqLEioraTaOUf3qth5HGWSbpCvMpApt9akwwzF+wRD\nMcWLJeXnpqp32f1G4LIEF5rBRLkStsEY34GRHLCxyl+smQpYObo7FS88fBOZ\nBwreXJL7/ojawP7mFGzl0hluV3mxJWydJrtriLwIfmKDr/E/CmNvt6eNR5A+\ntdbQIVNT++bsHdOJcdom3RiMXtVKywqcDGVFO0hO8yy43S+F6h0ssNQ7+43N\nvBrWx95NxSKRv+CYkQ+4ZITv9Rl5FHwSt9zGOcew8o88w6cQp/cSOXEGuw6g\nE0SJH3avlVCyc794yX0djRDvhnxDVYT6cNSB0o3Sb1YseCGtABGnvCWZ+wv9\nOBF5H5QK6GOCAiuNMFHMmYa7d+6nieGOqG1hx9RjRjxM5Smu+kI2GY39R2ql\npNwWm6Oc6xi8JghSqPmkrGZZLBSmy4fV7eONsDis1GS/UFgVPNshk4yjZGYD\n81N/\r\n=GZgQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5vEf6+okB+kc2898psSMQNOkFLoNCMeaIT9g15ujNjgIhAIJInFa/w6gAK9ZeuOntdG8KenAJehCvMTFKG/xMxOg7"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.20_1604497745843_0.5812686115679901"},"_hasShrinkwrap":false},"0.0.5-beta.21":{"name":"juhuui","private":false,"version":"0.0.5-beta.21","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.6.3","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.4.3","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nYou can test and compare it yourself [here](https://ui-benchmark.vercel.app). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.21","dist":{"shasum":"d543a39efc707dd913641a2850e03ebb58a73e0e","integrity":"sha512-ReIQhFJjF3pYa88aE/WKQFAwV7pQ6lPp2/adywjbRfgDRGAuvulYkUsnyBXLZ/TmaG5sfdIs1ygRZ4sCQC5pxQ==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.21.tgz","fileCount":125,"unpackedSize":452463,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfouvSCRA9TVsSAnZWagAA9usP+wZCs8kZt99dkauVjW28\nErm+w3FokyhIdEoXjLaN5ph3SYJPEny0sz+e1bPT5aVpitRqR1iQVrgxBNkx\nodulLrlA1xyk5oClvicuddvrMat/rSjLxk37Nu48V/fr3mBgM3cwuL53CUQj\nhb9Au5gkEMlRcK+vNFs8qgjODJWPx2GpE9EpW8df18ZzsqpS3uav8tQ579Us\n10YPNhsPylRCpCBbdra60A2KLgkA1QEno6zieofoKPOSTw8kgICL+QrTaWE3\nKadDwdYh6dYDMBeAn8rgol04tj5etjcEumLCIg3ltHlD1i/7BROul8SEsDRz\nXCorvs5YCYiuUX4/8PitYI7ns4miHglkjYv2b+ZoW2w211p2c5Efwq9v+q0x\nRni6XFTTBmdxPrDzcIUKnElMvTLTwzKkFjrZtKP4QDWuGe6Jt0Cswcxilu/3\nMCF4dOYHWD9J1c+/6wpY5BFsqlrCEE+Pqejt6usUINpAzgErHaMsWSSdafgg\n4W0U9ggcbDThMChvkiooz/OO8MZEQ/eMsC61H7uW+UAsPaOnAYC3Xq+7Lts1\nCNw9N2sfZiGnRRFlhe0SCbUxZVu8YzkNOQFkG25rrrOk1uAHufN5U6gdZ1Zv\nGrNFH9WeskBccY2vY1+MxGCA9pqLsvMxxWTI31POoGuf8ZdARGXkVAh1lkLr\nfONZ\r\n=11qr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqxhJwPuLTKE2q0xffLUD7H/4LLvdpT9GPBUj7G69TzAiBX9RoccWk8tbRD4ctxlMQIDsmXOBoExxRDCBqiBfsPYQ=="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.21_1604512721495_0.44807623026658705"},"_hasShrinkwrap":false},"0.0.5-beta.22":{"name":"juhuui","private":false,"version":"0.0.5-beta.22","description":"Lightweight and flexible UI library","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.6.3","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.4.3","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css-in-js","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nYou can test and compare it yourself [here](https://ui-benchmark.vercel.app). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.22","dist":{"shasum":"615e7507678633d656eeba823fae72e88ba12aaa","integrity":"sha512-qfWCqpfaTK3YcoZ2xQ7DqGb5NTY8STBJVh0AzHz2swtgr+HrtCaM8S7UeA+/f4edhsN2VMRSd5z1QZt5kw6QCw==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.22.tgz","fileCount":125,"unpackedSize":453138,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfo+DoCRA9TVsSAnZWagAA6DUP/1JOIIcrYPyZzGP+57kr\nLR1iRUghMm58mwXIkh56WX4qryLsnyiANAZ8pJsMnScvDbfIqm+YN0qooYBz\nN6VMWmeMSMEswWk1PR3xSgNl7UmwWdlwX7vu9B781ywZrfv8mnKf/pUtXkDk\nKmmV4AF/IgA6M5/1XIjfPdNkeTYjXZ5jygvyU77pbWXZD05+MuOCk/4VicyB\n07MlV7obR/LNXV7rda84eLC9ybkRzHpepVfMY1oZG5Vzvq5TeA/1JxW+rl5H\n8VrmaSXD1fDJzXOpJv5LyCZSeWthhBqQBqd6Ua26DyVY0f7Mloi8VxPnCAQp\nnlu6vl74LiGqY9VQRPO77PWASsj2eoh9E8hkhaJ4xKessqGNqQQb5FzFRTFb\neuBeOXnPKALqQ7EmRELatKTvaRYp5rOCZHVFpOs4omF4G8q+dApKnSBVXG1s\nfHLJzGPr2nZwvdZ5t9kpktgiUTvikehAwmDy2vbEAWfONsYUPZIiMMtKHCXi\nCCpLZ8wA283rbeU3ypUb80paRdF0vw12NIC6CpOoy/LySPiLDu76x8F4JjXR\n/rHcLHMnupMb6WrBtGCIytNtATQ/KPOWzl3x7dlt2q7t3mS1ml0/1nC+tNXp\nS4+yDuBbkH4+RmnH27h/BpoCJyDhQiADCqtoPt6tok4a1pnwpLeYmhjy9FoP\n7bv+\r\n=IDkU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChwfWjrECpwkMbjsGYgfAHEGJIUDkgMSy1921U0y9s/AIgDgVzwSHPGyW1jE7bP+oo9BGcePiHC/0ytNd6GTW1uIk="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.22_1604575463576_0.8130616339087056"},"_hasShrinkwrap":false},"0.0.5-beta.23":{"name":"juhuui","private":false,"version":"0.0.5-beta.23","description":"Build design systems in a fun way","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.6.3","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.4.3","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com/","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readmeFilename":"README.md","readme":"# JUHUUI\n\n### UI tool intended for design systems\n\nI made this tool because because I wanted the best of (very objective) Styled-Components, Chakra-UI, but with atomic CSS classes. Merge and nest components. Create variants. Hope that you will experience the same joy that I have using Juhuui.\n\n---\n\n#### 🔔 Work in progress\n\nThis is a work in progress and the API is still being finalized. Please install juhuui@next for features described below.Feedback is also kindness :-)\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract critical CSS for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui@next\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```js\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```javascript\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```javascript\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```js\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```js\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Motivation\n\nCreating a design system tool with a clean API. One that behind the scenes generates atomic CSS classes. Merging components and setting up variants should feel simple (hopefully that is the case).\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Add vendor prefix to options\n- [ ] Minimal version without a default theme\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety\n\n## Benchmarks\n\nYou can test and compare it yourself [here](https://ui-benchmark.vercel.app). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) for being an inspiration on how to behave online\n","licenseText":"MIT License\n\nCopyright (c) 2020 Espen Finnesand\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.","_id":"juhuui@0.0.5-beta.23","dist":{"shasum":"23f94ed1646fc048c87e18d21f016528df14214f","integrity":"sha512-9GTTnVlZiKyqH0y8J6+owSZl+XjoFaGcyKO5hB+Qw9Bg23Ikp+qbAMq9caf4wuKtv1kVKwfXI7Ngs24Owg8R7g==","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.23.tgz","fileCount":125,"unpackedSize":453625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqRwMCRA9TVsSAnZWagAASokP+wcqBURQogLIjUkWcU8o\ngKOlLiPgekZmu60HL/iVxCAANzV+sve/SoHqq90LFLcgFwvIQdeYbH4QTjHr\ndOBmRSt7C/IIUdz8tXWlAoVDCKUMT6WAM9lWsTV3tsAVt5C/YOqEJ0x0/9cm\nrBEY3CxU5e/bpoBkQoB3g5TChaihVc+N+qtfOjTwFqGrl7sgd/nPuYmcXb2w\nGS9MR76tRWmCrFrVVw9WP7GG/7qGflfSwJWxV6D0WuWnuTsUbdG79Z1p0u06\nfVNFTr0ctD3JPsBhtkmipjafftB15jEsXbu9jL2kQYxnwhgXGuVwNNFPlvlS\nRcMIytkZQmWsJeB3RgxVFkYg/9BbAY9uNz58DMGrF/7hMskvm7MJdbYH3hiE\n7C7kd5DeDTUrG2oP5eBOFlAXWH+zaQ0o3LgYVwcsiHLLo6voAzvAvGTmlc7S\n1QwDiubITVllfNRyoMqppBtg9VkLw3tkDjRe25lvIrGrYApoaIfVHmMPFDqG\n1ccgDFMWTU+/fqGtXjIjOtdUXJROxh2iOjC+8Sfc4QD9Ut/wQ5vI4ILUn013\naKznHZt9wYHdv/XWIPMUtuJ3OdolEVOrbyUMrhwp1o1eSWt/GbIYFFIlY0iz\nK6gN4gFPs+sXPfUBd4CDHw43JOwjkLZjwZVBjaiDRERZsF8tYaA4n6weSrza\nqqie\r\n=zK00\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNMzu0/agwIqF74z1CBIl3reXBNv7vk/fIY0VCDO1W/AiEApgm/NPFPw8Q5SdaQoalQ9O+2wEMktl9FEMjnzlkSjVE="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.23_1604918283724_0.3248761413331138"},"_hasShrinkwrap":false},"0.0.5-beta.24":{"name":"juhuui","private":false,"version":"0.0.5-beta.24","description":"Fun way to build design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"devDependencies":{"@changesets/changelog-github":"^0.2.7","@changesets/cli":"^2.10.1","@types/jest":"^26.0.10","@types/react":"^16.9.48","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","eslint":"^7.7.0","eslint-config-airbnb-typescript":"^9.0.0","eslint-config-prettier":"^6.11.0","eslint-import-resolver-typescript":"^2.2.1","eslint-plugin-import":"^2.22.0","eslint-plugin-json":"^2.1.1","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","eslint-plugin-simple-import-sort":"^5.0.3","husky":"^4.2.5","jest":"^26.6.3","lint-staged":"^10.2.11","microbundle":"^0.12.3","prettier":"^2.0.5","rimraf":"^3.0.2","ts-jest":"^26.4.3","typescript":"^3.9.5"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"gitHead":"ce02a30e61f9bed688bfabc4f85bed14e4493337","_id":"juhuui@0.0.5-beta.24","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-+cspIBZJauCcc5lPO7CuYEJCw6TwRJW+OHhORgzkbv9t23qWSsgAkSsDHyK/HSN9hZudi1ejxz1os4j8z9CanQ==","shasum":"55b77f4bd2fdfb4954a78f5c368aaea5a595df2e","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.24.tgz","fileCount":188,"unpackedSize":1535861,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqaBkCRA9TVsSAnZWagAAwsgP/1slKX23lJB2FgGAtzsG\nvXec6mtIsfKRUqZG0JZliDl4UlIv5he71ZW2/QmTTxRITUpE4rhV6ElOatd0\naXUXAmNHL/n2xnkWyWN1VuDVUGv3nXqiGPZkfBpk19lUyMz/sf5zMJU9Bihl\nf8TTCD0ADgkMhIehLzBvheh/uSHCPnseVTqkzrLrfXClJxHFAXgekvJjwv6X\nVuxU9AvNBUxrLoFhbQo+MPz2H3DleKtfJ+UmsUS0xd2Hcm654rQtRatR2Szd\nueWhybhKQiWbUs8veklcIjxp0080U/TjF2uQ1aNW4ce4KA7rYpSuhlFXeRfi\n5GHWrI1OvtwR4zvjb86HKz8dflITw7KATj3mrNuTph0s4lp/NWBhbPC+aCBp\nJ5JFljbyfBHffuscAQ2uJeDg64pTry416oo7uGKm/EYsjmi+sHn9XvNR0Lye\n66gKXVEPLAwFNi+L7Pu0JL12UsaKR3qDG1dJmTZ3exULTeHezNqApxSZu5lA\n3av8KG9lgY6s7LqtYGXlnUFKFzDEl6IiKcvT15XFnYVLzAfTbc5cGWNkPd5I\nKRvBGxRHl2pn6b3IRj9r0W618LC0j2Fa5kFehXTmpecq6xvNPJ4VzEiS6QB0\nNeKKpJM8Z4/YI9vMsmZbhiYceeqCWEp1qJRbnFiJLjQViAs3+ZUke//z+eEp\n5ujs\r\n=wwTQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuUq5rFF7YEL6VS230KQiGw4J8CUzt/JyIL2sgPm23pAiBrWev0hR/YCE+EwQakychUjUs6JEkInuXURORUfqgPGw=="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.24_1604952164219_0.04349462313065522"},"_hasShrinkwrap":false},"0.0.5-beta.26":{"name":"juhuui","private":false,"version":"0.0.5-beta.26","description":"Fun way to build design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"ERROR: No README data found!","_id":"juhuui@0.0.5-beta.26","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-1FGwJJ5vVnqOwgWbPTNE/MEyB1DEnf2jVtlMPxyaEMvi98lrxxP6p3HodR6Jjx51V2sJUQy9u8NV2iWFvmShLQ==","shasum":"486b99277c2754ee7b1abfef5681d5b64c209cc2","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.26.tgz","fileCount":145,"unpackedSize":653476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqa4yCRA9TVsSAnZWagAA6iUP/0ITpFY63eded4vYo5ZC\nrirRs3PfVEA3czWNduOk1oYrkQefaSFRuBml1CVmRplGGG9kU0gryTrjfBWc\n+oLQBOidrB+rJ8irkwHI/qij9M3DwjfiOiwyq4TctNovX7yLdE6s3a0FRWiV\nkbRtQNQol64DV/tJaALCXFyYg6TnvH2lHNpYGPkR19vUqlMiaQgsC13193fY\nO9pL8Z3D/C1PJRKBtxFIImZILCdhJJXF41zAdiSZXEIJlk2FR6AYUBGyT3r2\nECnQDwE17DpWmc/QaOM4Pbra6lqgWfxYSa2feZEKiu9FZREiEcjLzPY4p/lY\neF0A9tj4x0LJVH6mcbi4+JFbGJezeb4Q8vZQyXo/vYhjEvoiDQbNPXzCJge1\ng6XXIq/Kb9ODMsd120Du+ZmTsrape/Q9aJVxSudByJRLOaPVsit464RldSZ2\ne80CvVvyrQ4jUp1cinDpz8xfqUkWSVz+TGIsW/Y4vk4vAkUxgm6mKFOeoNrp\nmq/ulv+aP4naGiRcoIRdMIGeYu3+wl7ZQDyke4MNwtc9CCPVOKPJjc9LYUfm\ni1Z+/z3WnXJmobUzsBpiB9yERw8+E4ZbmJri3sZ3qz5jVAh5qqqOG45mY4++\njQQJm3qmox0zsc6gQTrhrbtPxEY4tutAM0rWUXe5j+6EIrVHYzV6xrTvp/7g\nb27b\r\n=EEqH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuZdeTY6/EKoEhdYeRopGmYGZCRQkxcHPyUMlF9JHypQIhAOo40qz5rc9OA1sDshU0y2/j+2NHDmQxRJ6c6oMksXEH"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.26_1604955697531_0.5176626946748779"},"_hasShrinkwrap":false},"0.0.5-beta.27":{"name":"juhuui","private":false,"version":"0.0.5-beta.27","description":"Fun way to build design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"ERROR: No README data found!","_id":"juhuui@0.0.5-beta.27","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BSGnQkdxOHX9ao+JBC6q21edBKvcYhRRtdUL1CpG0mJ7wKCvS7OvydD3A4dTekZrSsjO8/zS0y0XhMHL9CKDiQ==","shasum":"4d2de5da4226161ca10e1611cb9159c85b9392ab","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.27.tgz","fileCount":145,"unpackedSize":653433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqbB4CRA9TVsSAnZWagAAwHYP/ApLskJWHJJ/+l8drBPm\nm4nVTgwYUue1jJW5iUsg19jO67uJEPLiQQTqcFG0hCyWVB0ZLfkRwZR6Un90\nsLfNTvIBoSvbagFMcGN8CeCBCIkmX77K8wgRLjv7WrKnUt0HjSnVMvMVgiYF\nXpzNqJRnHJjXz7tOa7kGgb7PTk8R/BMGxm1icHoJBvx6surQwYthP/Vg0ysF\nNTLJsityNzSyGSp6lVa4cf7dSEg90gXC8XRL6uXw9bCvBFo5zrA5Zio/9/w7\n+/guQnAqtK1mi5JD4yCTQT9hV9gu5bTEgPvJBtBvJ8vvdVJFigwCqFZ0yhs/\nu56XfoX1QUsqWhkPJ+7dbmgnSVAr7tTjlBVVv9BJT3qAvjNjtmJmhNgIBzqQ\nXdmJPh86ruZ9jd1YVmuscMj+CqL8MS3BrFYBYyCL00xRRpt7gCNM/HoTATph\nUpveGR/wESiBJz/BVGupyIusqGgIfYFPJ3San4XCGap27ofy4BlyoEVtUZHH\ntHoH8niH9ZZyvOWz3xNaJjddlRmqjNirM8JMTblCf1wOy4ZmU+TWIF2IcOwS\npEFE3OOAbvSc//iuYdNL19QL2WHgJpAmKF4tYw3bpV35bj8xcThX+cB9PZvn\n6DngNnKx4HRdRV4rvEzA8fRRwQfhANu3NB08IDtcoRHy2PsFg66jR+Vde3Ks\nMKdh\r\n=yvSG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBPK4m+ziWm/bMgRE7HqdTdew9+PkPLSUOwA9XiiTWU6AiEAxzbPNaV4qp3lLL7taHG6DVKTNH5dmYHpjkE+jKOxiPI="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.27_1604956280278_0.3195384502101868"},"_hasShrinkwrap":false},"0.0.5-beta.28":{"name":"juhuui","private":false,"version":"0.0.5-beta.28","description":"Fun way to build design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"ERROR: No README data found!","_id":"juhuui@0.0.5-beta.28","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-Y3ekLURYSB5vxwfDOeSzZ41JQNbAPXZBDEOCGiIe8fqjjSkxOBBeFjWuRHmOYObLsUYUFMOSwdVET0oS9JhhoA==","shasum":"c7768466a87ae7e9b49100042e4592a02bafc97e","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5-beta.28.tgz","fileCount":145,"unpackedSize":653520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqbTcCRA9TVsSAnZWagAAAqYP/0d2xWsPnowYJDvkRyWr\nO3Ap/WAUPOVXGWA3p14VekelmHlmZpkVQ+Hma9u8UBGOprE0TPNv7W0AbElg\nG1/P3sotbU9Q1T71769wTLZWOWQMMFNgdhpOpsTHwN2EykmOTKuoP/g3F2yn\n/TL9v8gNZj27+mWpL4dqczqq9bNP7aAJU6yw6I6lb6mh3CW79XRFS0fpBuyr\nJPmvP9s8BqgLtsM81cY5eUkKNFZTArjzRoSXohuVyZeHm87/zkz/BCSvsjdr\ntyzdiv7eylws9X2rc8Q4nE9i6EdVomkDCNSaqjFc2y4lQqKvyZzRWKU9Uo+e\nlKW/4RuJnvtUnJdSYlAZXMXaOlYT5BMU5OMkM2l7s56HcfnS/D/pyr9qVr7v\nfV7YZqi0RUuZRBE+4q/b7Pf7JwOXK5XjYXyWlvp0wSlTwdkvnhHS2p7grXvg\ncqXK0YahDE+kq1s7PIBEdodVTRvk6hrKQ8fpInSHedu3GtxsS3ICjRHuW5aX\neIr5qwor1SkIuxzvs03JMlIViqSLe42uTyNmEOpnQT+b3ZugczVuVQGfcDPk\nzazV9mQRH0clypmf9urL1iDQ2UUQvSla//hq2CT41XmjWnbtHyo4bF/2D2f1\nno2Uw0ttWWrJ36/+yTXUGBtM/xQ2gOv4GT1//vaUtnf/q0I6lOUgmjsqnzrR\nul7o\r\n=Nfw1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvz/axr7agQzE0EGc5O4gIsfy+AAugtMrU3HaIsVu4lQIhAJBp/NCTkyRglNS63mn8EXRI1ylIV/YwWwFzD9B3xnlD"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5-beta.28_1604957403958_0.19956256421573682"},"_hasShrinkwrap":false},"0.0.5":{"name":"juhuui","private":false,"version":"0.0.5","description":"Fun way to build design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"_id":"juhuui@0.0.5","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-r52zueVr4y5Ku7iOcggpy4dfYTFn/IA9XfarhrA4PUwtzM1Qgfv5fmq1/rghqjf7RAISroeHFsilpVqc9IUpKg==","shasum":"798b521fe78864173a64ff36c7b25e85b0f82801","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.5.tgz","fileCount":145,"unpackedSize":653512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqbczCRA9TVsSAnZWagAANO8P/07357XLH8MhjDkN6LHk\ne41Xu+im6CIxDXZP201iSS0GP6u/E6b0bq7Z8oU4CQgUZ4m8rGNc3XQPvC9+\nAXQwHVo/hAO+sTL7ohJAZ8c4M20dIWH4772GKzaTfcLUAmt4vXYtjaF9pjiQ\nv00Gg6l9vr/OHMWkRzIcK9krHr/E8epKSVa9rs9bnbs8ub2rEmvivGz06RLz\nm9unnIGW4TmYpN7IS7sqLmbtcZGcYb0Sz9Bpfi55y01rhG7VeLg3sJHoJiRU\nPNd9hjvK/qzGHG3tNG9KPNns+3ANVHfqFPTVDVaNX87+NrIl3wqgecxySkgR\nTSdUtLJpwF7d+v11CrdDdaIKLQQcOy0gAXHmM+t2+X4QaEKDNduWOX5aqUu3\nO4JSvW2UtupKdpKqLhVhQSNAYvH8+4CM3FngIjlO/Fe5Geime2jFu6gvz/b2\n+A8o6VjRGpJrvMBeHCB1x3Tn6r5iSK70F7x5PcY5hyJ1vleNGQBgI0+LsUF6\nsRKIHjaWwHDwIpiDL5q6LkdKe5CD5Pgy5MLwhPEbYliNG0tkc+Ra38WMLnVF\nrZe7pFJeKcV6tpoI9hZvNJpkqNKeupMZcWgq8uVkdagkeGvCFNQkEPzDkFjF\nQa8NtB0t6EyB3na0FszJtY7R+yGy4Co3gyiEZ/qNkX2LQJ0J/Sb8N/2hEpIO\ng9Ip\r\n=5cJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8tvhCnTSNLQwBEl9vzsD0/gzegcuIPO8QwYPOg+lwKAIhAM+HUZRd9xusudQeyKPcZNKEeop0i21k3eCtaOSd079v"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.5_1604958003207_0.03234485215931726"},"_hasShrinkwrap":false},"0.0.6":{"name":"juhuui","private":false,"version":"0.0.6","description":"Fun way to build design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"_id":"juhuui@0.0.6","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aS3p/1mO7ruk3KH/68TvG+pr91AAvOqZ4Db2PQ/vxNhqN04BN2VaT0A1PJa5QDCJ+PNBub2H0A4L3zAwRI3/NA==","shasum":"64eede00b6289125831595a87a3140fdfff121e7","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.6.tgz","fileCount":146,"unpackedSize":659729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqbeKCRA9TVsSAnZWagAAcvEP/R9/nAQrk0pkqxYktLNY\nfLT3Nx1pcdklM52fhxiBkROjpPueetgSOAEvsWvo7CREpql30HZlR0X0YtLG\nMDqTBltS4tbERfTHIcAAgrj5yT/ltSul0lFg2umVzhcrpJeRUwavCm/C9Pc0\npsXFoVRDOdPAoJ0EEyOqU0jw81mPdb4yROJBkwySTUicQXBzK3T7HNsSoLud\npqMB8xI764zBc1VRdcdX3Ux5sZWZicdLOpghz/ic6mKxf2FEp8uecw0+o6yM\nWfTxReGzTRXDZBq+J5f3PwG/PVaI7/Eg0YTvxcKi5PVE61I4KkrRwYNOBIT5\nTcK3S818DeVFM8MlwvQldjHFLUyi0RV9BbU4AvfrW7SBAPAsyuwZnCKGLO/N\n/jfMrdFlDAizOt8zFfwmui6ssLdBf89JHbdXEZCno0bfLhdr11glJO6Tg/oZ\nSFqrTDMhgxdkkycGlVwrzaaxbXTLmDdfmGvDc4MDTScxqZaqk3H8Pxi7A9sE\nTQ/I7fvr+3ezzxGyQKM4di1FJluXJOYM0UNYoBni2YRoIAO9f2eEeGJTFgRm\nQUhqAiyRAiWLuzxn+Uvi5ohqcBWhnzAwlcy1oCNb/ZwGD8vxCJm1btez18VX\nuIkrSUrmE8WU72X5kPAmAuqpmEW8CUxDV/M2w8g2xxz2gmdFym0JDgy0jLR/\nZDZw\r\n=gdtJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdWUZI5HugqDSiJJ7ljNh8+rZXG3y3RF81Fc8Y94xQOAiEA59zZX47LTc44ErP0T08r8s/eOA+7hgGMGGiRFPdzplM="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.6_1604958089964_0.9123245613489896"},"_hasShrinkwrap":false},"0.0.7":{"name":"juhuui","private":false,"version":"0.0.7","description":"Fun tool for design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"_id":"juhuui@0.0.7","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-LgFK8FV03RKGyX7n2TsFaefly20fd4iatTm/ZnsO4aWMxmpasmPFgwXt1HQQ4mhzx319bcfspdUyged1UcRslQ==","shasum":"b95284b2d72511f6ac954e6facdc242c4c39fc1e","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.7.tgz","fileCount":74,"unpackedSize":570088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfq/fQCRA9TVsSAnZWagAAUkoP/jgyt4mYM1v6NMSEliNx\nmDVsyS8nNc39SOMPWkgVkfry9B9xI86O/FBj3sNn+7tDq1uZ6TWP+jI+Qf7Q\ng9v3CzmeNm6P1JKWOaM46Z1h2FMa+XdBni9C4H7WVsErsD6xqCzi+SkhrRbW\noWriQFyue1b+ddakOBUbreRV2jeO8Z04NPTYDOJZKo3rVKir5um353+jrPkv\noV8HDAxkwIF36z+lZC4zHwNx9ZuGqME1tgQ2swLT/Ux3rpQdRUqwj0L4aSKd\nQNV7V7GfMQWTFIzPrBAaZJF7SE7g0w6Ev0ZGH9naGCKafSox8htujbuk4tkB\ndET1TwbnlvxSN8mTZQd6MNi2881ieMpzWY2ms0uWoiFpPhXiurJV8815hmRk\n6Lj7XorxCC3sO6IW/b6xWsc+rmVWYhUS7RLU8jCxnm56+kGBLI+YmbQL2Ry/\n6ZU7i4D6pkZa2ZHTa33jAU05tdCAG+NnN9bRCIS5oC8kEzgl1Ok1cw+rTCtJ\n/DZJl1Z8CR68U+mCIiFxE1Xm3TtUU+gOm7jQ3iYpaPzZu6UdnrJoUKwq//hF\nt+cUlFOjgZMZOrlOI9ZjIpRmOJnNhyW4KWOslYRVMjRh31HPeWZY4JyO8lBG\nGVmBr+JhnPihqUEBseXeO9bU4pG82x2kpyMcjrZ6WOVt2WMvp2jekODXc2Tw\n04+A\r\n=gSjY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb34MHcr7ZENKVEHAN6Qt5ZXRgHZXVA5x9W/EPO3Hv7wIhAMNrQL1g53fNRcaijqQSyqbszzg6DrqOl7HFRiJk2uD/"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.7_1605105615543_0.6171926388878981"},"_hasShrinkwrap":false},"0.0.8-canary.1":{"name":"juhuui","private":false,"version":"0.0.8-canary.1","description":"Fun tool for design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"\"juhuui\"\n\n### UI tool intended for design systems\n\nI made this tool wanting the best (very objective) of Styled-Components, Chakra-UI but with atomic CSS (single purpose classes). You can merge and nest components. Create variants.\n\nHopefully you will have the same joy using juhuUi as me.\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract \"critical CSS\" for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree. This is the solution for now.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```jsx\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```jsx\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```jsx\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```jsx\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```jsx\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Move theme to a different package\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety (! high on)\n\n## Benchmarks\n\nYou can test and compare it [live](https://ui-benchmark.vercel.app) or download the [repository](https://github.com/secretlifeof/ui-benchmarks). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) mostly for his kindness\n","readmeFilename":"README.md","_id":"juhuui@0.0.8-canary.1","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-0neiKj7DLxpB1B85umLVHmbg1p7nobRpaGJLHMsBQ0WLCGNR+HJAU9yNzY/vHUseCTTKRF96ge2JPdKKVZLQKQ==","shasum":"61230573c5dbd48274534a35560c628ff9620df2","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.8-canary.1.tgz","fileCount":74,"unpackedSize":570097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrP78CRA9TVsSAnZWagAAsmwQAJ9Gsis5GnUsVJ3nYOTD\nELX1K8NnctF9iOLqjUpSstmwt/Qlne4tOFN0GoNRunMXgLgJXjetCysEAE4t\nosJjKg9kczINTW77TNX8SERJ2PJAIBeeATT+aDwv+eNd8LRgGWVyxzbNDB79\nPlCmNCGcCrOx+w6rO4oS7hcPKqgoPYjb+i5KdpivzZc/3MA7jGN0hLxbsLLj\nD2rKXYQDKTQ1j/7COYvxEhpoOJKbC/w3Nu9Z73gscZWYeZu/wheeLmbjgYbd\n8MMIP9Ot2bQK0zBziw58HL5DIvZKOD3wof8krJdDD6y6/Z8DMdY/6JMT1sJO\n/8wKm+yHWMlooUcYEJ380yHMrfBbJKMFui2uR4Bl4OJjVvX5j8O8W+r9hkH7\ndV0VfPfQqmJ1/YZHYhRW8i8ItV24BPFHtoTk66rd8ADAidYmSzTSsH+PPgr6\n3OPmMuoU2cWE/CAGwrXRj7zvyD21P630GKtXnCE8Gy3CUhx8Yai1APEd1CTf\nzJraqfNDC0VGPtn6ZF2AKT2h2DPVl1SCf+raehQY1JtYoToFDTDvxnKgzw8t\nUSRsBSbSWVdbImVwv3FjoWTdi2yp6IDpTK+8qaXXmSpo+gHTsn9/sDL06hXv\nZSZk++j9Ml15Lm5yxb0g3iUQ9Mw+OJgrSGniEpwLKlMXOUmOPbHKOxT5UsBl\nESy4\r\n=hGA4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7vCXwwsjhswdIhUNBCtu8hPwQ8JHpdF1BjFY1Y5e74gIhAJlj4OliTJENYQxcovu47NagkKXUH1Bmc2zldKXLL7iD"}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.8-canary.1_1605172988272_0.3253148341515202"},"_hasShrinkwrap":false},"0.0.8-canary.2":{"name":"juhuui","private":false,"version":"0.0.8-canary.2","description":"Fun tool for design systems","license":"MIT","main":"dist/index.js","unpkg":"dist/index.umd.js","module":"dist/index.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"readme":"\"juhuui\"\n\n### UI tool intended for design systems\n\nI made this tool wanting the best (very objective) of Styled-Components, Chakra-UI but with atomic CSS (single purpose classes). You can merge and nest components. Create variants.\n\nHopefully you will have the same joy using juhuUi as me.\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Relatively Small (<10kb)\n- Descriptive class names in developer mode (_\"color-orange sm:color-blue md:color-green\"_)\n- @media queries are written as arrays (_['green', 'orange', 'pink']_)\n- Same shortcuts as Styled-System\n- Extract \"critical CSS\" for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n**install from npm:**\n\n```shell\nnpm install juhuui\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree. This is the solution for now.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```jsx\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```jsx\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```jsx\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```jsx\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```jsx\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true,\n forwardRef\n});\n```\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Move theme to a different package\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety (! high on)\n\n## Benchmarks\n\nYou can test and compare it [live](https://ui-benchmark.vercel.app) or download the [repository](https://github.com/secretlifeof/ui-benchmarks). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) mostly for his kindness\n","readmeFilename":"README.md","_id":"juhuui@0.0.8-canary.2","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-rtdxY1H02hKdTXBzQ5Q2OpdzUKOH9ci66lJQfZfihNqvg1H/SpTw1DUyc6IgJosZyAjaLqsQlYxptFtxPMnuwg==","shasum":"50baf4060caf3c47fcf8f56a08232f5ca4acd7f4","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.8-canary.2.tgz","fileCount":74,"unpackedSize":570113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrQBBCRA9TVsSAnZWagAAQDgP/RjTonjRLkZHSg4QhdFu\nhfNbHHtP5tffR7yNjJj8We0uDOJLWNBHPxpJV7I8jkOqnnttHtMg9a6J7zQc\n/fIMcP8GAfitg+c+mMnl5JWCggK8q78rihxafelpodtUUX3NUMrhRx3WufCq\nFb+D8OgqCdSvWZDYK97VZFIH61fZvrwrp6260RZCPEkfHZ6AVB88W1npLwWu\nNLo0a9U88PvmHvBq2J2cxm8Usf9VCPn8CoE7HAB34AMT6MbuBjxZEGil0bbV\nxtliGqlXbgGrxwXmWEdKJhj50v+069CTwk8UE6njVWghA6fjjgzCNQM6/j5T\nZty3gmruNzrAMZ5DMooz3wmO3tiMRSENvxUbEtC2z0NZziCtfj6uGZaQZ5u8\nYuj/A3J+rOC7PnfTQsFsEKqnfq1qkM56uV5Nohjz3xtJrV6y/q3Po0ZJZU1h\nD/3E3ZhdpwUKjYMyA7bOed8x6UfYNXLVX+L1qFDtLAkGJsppwXeI0+Omwzap\nZDRVFGDF/1sNbwK0jSIR/WREupLQNSlrpfK5q2VDaJO6MTD2YcrbziuBn+Su\nMixsX9aQPbAa4SZ0rNvLvpp1rC614FWnW1spzfMlDNsk5icQZeU9sghm90pd\nskaGBgyMsbt9z5gFw71Fjr+M6fkYOyfYhbOMdyB8iboOe87ysFWu7078gSBB\n8lL7\r\n=mVHM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCKl98mHoTY6OiYq4RqmQnThnjKRD/jhKCno85qYd2yAiEAwH9D91ENr2HDn9ign5C9H9/RMkDku29GUTbq7+7dckQ="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.8-canary.2_1605173313273_0.5005437088133133"},"_hasShrinkwrap":false},"0.0.8":{"name":"juhuui","private":false,"version":"0.0.8","description":"Fun tool for design systems","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"_id":"juhuui@0.0.8","_nodeVersion":"12.18.4","_npmVersion":"6.14.6","dist":{"integrity":"sha512-cCfFg961C6oyaJLHFrN41XDVK/xin8RkgYx7DfDKyDMCothA3U16aGWbSLBGZhyk/CU2MMIrqJuQ3XWnkdPWNg==","shasum":"48de7c8c42929301f1a3b01c56fd1748379107be","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.8.tgz","fileCount":82,"unpackedSize":1103738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfraohCRA9TVsSAnZWagAAclwP/1xqQPIdTV6h3dDzrjfE\n7IhmgxYXWst1njPYuF5QwTIrzQYOT6e4lo2yFlnHaaQ5T5mCgh7F9MxLVckK\nGU6PMav/jjgiMesjp9YitnQHaOonvnOGzZJpH09Uss0vFnzZ/XO19ofGLi2M\nZIyZsU6fHXVFQlOAIP5dAUneAGtLo2NPi+vWPJZfqoJO5d0KAoAzCShQh2eE\naBhbW67I0nW04Qko2KiKlqog9ZkxElILNROeihoDFfD7L1WDtkpWddYEkjvc\n0vK6yYPmZYpfRqfZmykH9PSqqr0Te4NOf27+DdmKEQXOFxHX5APiCznQtztQ\nogE4ocwg0OoPIt8wLmqnlGh1zoMS9GK8ZzjGRSDKRBrjKkQi3gGI4GPP626+\nGiQ6rs45+3ekbykvr9AhxGWYRSZuk2OHNpr+p4g7mCOwMmWJHZhjde2kG1P5\nCkKAssjIU010Po/5o+wndVCEe6pfcOQa2GahC5VamXkZIVTmi+GZQftCNsjn\neWfIz43zfryc6B5nfY4ibnVhwxqz11CyJKaxA0UqkCrUgooCFQoQ1MJZZ4Ud\ncC10CA1v04trpi6VV1SuJV8IKgvQB3xpkfUG/RsFLiUHXA5D+G0VuH7rpRnJ\nWP0wqHfMueYS017DXBz2FX1nEVGi8W4PqCsb5JF9pj+A4UpuKeP6y2L3V1iw\nTs4f\r\n=kIwu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsV2a499PeN3NgV/7KjHUezaRl/Q/v2sqX8z0EfSGDSAiAxidA6+Od67E9v6KLqCY4Kk12C6jmGSP5gWgcBIGKTcg=="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.8_1605216800670_0.4004526274158151"},"_hasShrinkwrap":false},"0.0.9":{"name":"juhuui","private":false,"version":"0.0.9","description":"Fun tool for design systems","license":"MIT","main":"dist/juhuui.js","unpkg":"dist/juhuui.umd.js","module":"dist/juhuui.modern.module.js","types":"dist/index.d.ts","source":"./src/index.ts","scripts":{"build":"microbundle","lint":"eslint --ignore-path .gitignore \"**/*.{ts,tsx,js,jsx}\"","test":"jest","watch":"microbundle watch"},"dependencies":{"csstype":"^3.0.3","htm":"^3.0.3","tiny-css-prefixer":"^1.1.4"},"eslintIgnore":["dist","node_modules"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"jest":{"preset":"ts-jest","roots":["/src"],"moduleFileExtensions":["ts","tsx","js"]},"lint-staged":{"*.{json,md}":["prettier --write","git add"],"*.{ts,tsx}":["eslint --fix","prettier --write","git add"]},"prettier":{"singleQuote":true,"trailingComma":"none"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"_id":"juhuui@0.0.9","_nodeVersion":"12.20.1","_npmVersion":"6.14.10","dist":{"integrity":"sha512-H7GexntTZvL5tW1o+2kJhW5ck8WyeIYp/8Fa3sRkjdn3Rx2zeJEWEfuZRduiCU/DbokBrF+DxfbpevUiaOGgHg==","shasum":"86db8886af3216ef4c56ffd832e182212f82a5d2","tarball":"https://registry.npmjs.org/juhuui/-/juhuui-0.0.9.tgz","fileCount":82,"unpackedSize":1110541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqRLSCRA9TVsSAnZWagAADtAQAJJ89O4X07WXeuKS43MF\ns4C5a/NkaBhoUmNaCG7xBBKL8Mbs4JX+ENMOanT2LlGrVbu2cHqtGvtGdBrr\nBVyD2AdKTwrt0yfRvUjtxvjygua5ajYFzJl5bQhdMV6Kog7j80wsX6OFevef\nsznBEs/fAp5/DdOcY+Y7VAGiAopcnCcyzjbrje0H3uNmJak4bfIVTqvR6tUr\nyFdRnPeqwO7VRBxxgZjm+lqDSCdesO71HBLCyX6hBt8jcXrUguzkMf5KgPmt\nd6Bmpc2R2QI+1jeHrKxGPkG/uJDk+exi8RtZ+KBfbNtS+gwY8WPol4IGoDW5\npn2Gr98etoaJUSzk4dx8a7lqwWkPfviwRk1bpfK8e7lEpfwN71nEY8CnR8gW\nQ3u6Iy5fg7EF5kb7eyoXU1nIR8FlW2qy7ed8VAT1TnJX7mEKi/g3nv8yaiKs\nWlBl2k6wsOJWeyrZFnwLJ56E4dMzEXI2BaM8CavzeLqX68j3cuMEowS3vgKP\nhpYDxD1Y1KizLPFGmVbKpn8VJpGQw+Yu/+/1NutEX21CeTOw1XU8ROkfiojB\noGji9xfn45orTlTHbhgKtityQoavKDd/eCiFF3GYPKnRqLLvQoPESDv6xI/G\nnEm5uK5/vuctUgTKYAwhvi78gcO69U77JxH+G9a+h9NvD9NmkFEUhJCO5Q+f\nHLso\r\n=dp65\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIACTBnGONw8ujlC4qz+r6brlKVrIsefDU7GA2u7B+N4KAiEA4ortkVaNxb61VfRCYiKyh/u+HiNvTns+xhtGeTHnf5U="}]},"_npmUser":{"name":"secretlifeof","email":"espen@norscodes.com"},"directories":{},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/juhuui_0.0.9_1621693137594_0.09798801387852185"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-07T14:46:46.574Z","0.1.0":"2020-07-07T14:46:47.033Z","modified":"2022-05-07T00:44:04.753Z","0.0.1":"2020-07-07T14:47:29.996Z","0.0.2":"2020-07-08T10:13:50.431Z","0.0.3":"2020-07-11T17:42:26.356Z","0.0.4":"2020-07-14T19:03:07.192Z","0.0.5-beta.1":"2020-08-03T11:27:49.827Z","0.0.5-beta.4":"2020-08-20T13:17:54.398Z","0.0.5-beta.5":"2020-08-20T13:19:53.960Z","0.0.5-beta.6":"2020-08-20T13:38:51.799Z","0.0.5-beta.7":"2020-08-20T13:57:37.028Z","0.0.5-beta.8":"2020-08-20T14:31:09.182Z","0.0.5-beta.9":"2020-08-20T15:21:09.188Z","0.0.5-beta.10":"2020-08-25T18:15:12.427Z","0.0.5-beta.12":"2020-09-01T08:48:27.461Z","0.0.5-beta.13":"2020-09-22T10:20:08.514Z","0.0.5-beta.14":"2020-10-27T16:09:33.209Z","0.0.5-beta.15":"2020-10-29T17:25:17.660Z","0.0.5-beta.16":"2020-11-02T17:19:37.513Z","0.0.5-beta.17":"2020-11-02T18:57:24.565Z","0.0.5-beta.18":"2020-11-02T20:31:12.840Z","0.0.5-beta.19":"2020-11-04T11:46:29.012Z","0.0.5-beta.20":"2020-11-04T13:49:06.074Z","0.0.5-beta.21":"2020-11-04T17:58:41.696Z","0.0.5-beta.22":"2020-11-05T11:24:23.759Z","0.0.5-beta.23":"2020-11-09T10:38:03.899Z","0.0.5-beta.24":"2020-11-09T20:02:44.454Z","0.0.5-beta.26":"2020-11-09T21:01:37.704Z","0.0.5-beta.27":"2020-11-09T21:11:20.500Z","0.0.5-beta.28":"2020-11-09T21:30:04.175Z","0.0.5":"2020-11-09T21:40:03.495Z","0.0.6":"2020-11-09T21:41:30.148Z","0.0.7":"2020-11-11T14:40:15.746Z","0.0.8-canary.1":"2020-11-12T09:23:08.457Z","0.0.8-canary.2":"2020-11-12T09:28:33.398Z","0.0.8":"2020-11-12T21:33:20.835Z","0.0.9":"2021-05-22T14:18:57.756Z"},"maintainers":[{"name":"secretlifeof","email":"espen@norscodes.com"}],"description":"Fun tool for design systems","homepage":"https://juhuui.com","keywords":["juhuui","ui","ux","styling","css","css-in-js","atomic","atomic-css","atomic-css-in-js"],"repository":{"type":"git","url":"git+https://github.com/secretlifeof/juhuui.git"},"bugs":{"url":"https://github.com/secretlifeof/juhuui/issues"},"license":"MIT","readme":"\"juhuui\"\n\n[![npm version](https://img.shields.io/npm/v/juhuui.svg)](http://npm.im/juhuui)\n[![github actions status](https://img.shields.io/github/workflow/status/secretlifeof/juhuui/nodeci)](https://github.com/secretlifeof/juhuui/actions?query=workflow%3Anode-CI)\n[![npm downloads](https://img.shields.io/npm/dm/juhuui.svg)](http://npm.im/juhuui)\n[![gzip size](http://img.badgesize.io/https://unpkg.com/juhuui/dist/juhuui.umd.js?compression=gzip&label=gzip)](http://npm.im/juhuui)\n[![brotli size](http://img.badgesize.io/https://unpkg.com/juhuui/dist/juhuui.umd.js?compression=brotli&label=brotli)](http://npm.im/juhuui)\n\n### UI tool intended for design systems\n\nI made this tool wanting the best (very objective) of Styled-Components, Chakra-UI but with atomic CSS (single purpose classes). You can merge, nest and create variants. All this sweetness is packed into good performance.\n\nHopefully you will have the same joy using juhuUi as me.\n\n---\n\n#### Features\n\n- Nesting components\n- Theme (default/customizable)\n- Descriptive class names in developer mode 🍭\"color-orange sm:color-blue md:color-green\" 🍭\n- @media queries are written as arrays 🎨['green', 'orange', 'pink'] 🎨\n- Same shortcuts as Styled-System ⚡️'p' for padding, 'my' for [margin-top, margin-bottom], 'c' for color, 'bg' backgroundColor, etc. ⚡️\n- Extract \"critical CSS\" for server side rendering\n- Implement darkmode using CSS variables\n\n## Installation\n\n```shell\nyarn add juhuui\n```\n\n**or**\n\n```shell\nnpm install juhuui\n```\n\n## Usage\n\nIt needs a createElement function so it knows how build components. Add this somewhere only once in your javascript tree. This is the solution for now.\n\n```js\nimport { setup } from 'juhuui';\nimport { createElement } from 'react';\n\nsetup(createElement);\n```\n\n## Inline and overwriting styled components\n\nJuhu you can start building components.\n\n```jsx\nimport {\n AspectRatioBox,\n Button,\n Box,\n CircularProgress,\n Divider,\n Flex,\n Fun,\n Grid,\n Heading,\n Icon,\n IconButton,\n Input,\n Link,\n List,\n ListItem,\n Progress,\n Stack,\n Tag,\n Text,\n Textarea\n} from 'juhuui';\n\nconst SayWhat = () => (\n \n RAINBOW\n \n ZAUBERMOON\n \n \n \n);\n```\n\n## Styled component\n\nAll components can be created externally. This is useful for separating styles and components. Styles can be overwritten by writing them inline. Please use the 'fw' prop to forward arguments because 'fw' will be removed from the DOM. The with function takes a second argument, an array of strings to be removed from the DOM, as an alternative to 'fw'.\n\n```jsx\nimport { Text, Box } from 'juhuui';\n\nconst UpperCase = Text.with({\n textTransform: 'uppercase',\n c: 'orange.600'\n})\n\nHello there!;\n\n// or\n\nconst Colorful = Text.with(({fw}) => ({\n bg: fw.background,\n color: 'orange.600'\n}))\n\nOrange;\n// or overwrite styles by adding a css property inline\nRed;\n\n// or merge\n\nconst GreenBox = Box.with({ bg: 'green' })\nconst Red = Text.with({ color: 'red' })\nconst SpaceCase = Colorful.merge([GreenBox, Red]).with({ textTransform: 'uppercase' })\n\nInvisible green\n// or inline merge\n\n```\n\n## Create variants\n\nVariants are a probably a necessity for a good design system.\n\n```jsx\nimport { Button } from 'juhuui'\n\nconst B = Button.variants({ variant: {\n green: {\n bg: 'green'\n },\n blue: {\n bg: 'blue'\n }\n} }).with()\n\nGREENIE\n```\n\n## Create class names\n\nFunction for creating class names. Just for the power of freedom. Performance is better than the above. If you are looking for a tool that only creates class names we recommend a smaller tool called [otion](https://github.com/kripod/otion).\n\n```jsx\nimport { css } from 'juhuui';\n\nconst classNames = css({\n color: 'green',\n bg: ['blue.300', 'green400', 'brown.500']\n});\n\n
;\n```\n\n## Media queries\n\nMedia queries can be written as an array of values (associated with the theme object) or by using the media key.\n\n```jsx\nimport { Box } from 'juhuui';\n\nconst Mercy = Box.with({\n media: {\n '(min-width: 90em)': {\n color: 'green.400',\n }\n }\n color: ['blue.300', 'green200', 'brown.500']\n});\n\nMerci;\n```\n\n## Server side rendering\n\nFor extracting critical CSS please use the extractCss function.\n\nHere is a short example how you would do this in Next.js. The data attributes needs to be called \"data-process\".\n\n```jsx\nimport Document, { Head, Html, Main, NextScript } from 'next/document';\nimport { extractCss } from 'juhuui';\n\nexport default class MyDocument extends Document {\n static async getInitialProps({ renderPage }) {\n const page = renderPage();\n\n const { css, data } = extractCss();\n return { ...page, css, data };\n }\n\n render() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n }\n}\n```\n\n## Options\n\nThe setup function takes a second object with options.\n\n```js\nimport { setup, theme } from 'juhuui';\nimport { h, forwardRef } from 'preact';\n\nconst newTheme = {\n ...theme,\n colors: {\n ...theme.colors,\n juhuui: {\n 50: 'white',\n 100: '#fff7eb',\n 200: '#e9f8e8',\n 300: '#37b311',\n 800: '#07130f',\n 900: '#07130f'\n }\n }\n};\n\nsetup(h, {\n theme: newTheme,\n defaultFun: true, // defaults to true\n forwardRef\n});\n```\n\n## Future stuff\n\n- [x] ForwardRef works for styled components not inline\n- [ ] Move theme to a different package\n- [ ] Default React/Preact versions without a need for calling setup\n- [ ] Improve type safety (! high priority. Help highly appreciated)\n\n## Benchmarks\n\nYou can test and compare it [live](https://ui-benchmark.vercel.app) or download the [repository](https://github.com/secretlifeof/ui-benchmarks). All credits go to [Styled-Components](https://github.com/styled-components/styled-components) and [Necolas](https://github.com/necolas) for creating this.\n\n## Thanks\n\nThanks to all for being here and beforehand for anybody who wants to contribute either by reporting a bug or by a PR.\n\nAny feedback is met with love and curiosity. Have fun! 💚\n\n## Inspiration\n\n- [HTM](https://github.com/developit/htm) by [@developit](https://twitter.com/_developit)\n- [Goober](https://github.com/cristianbote/goober) by [@cristianbote](https://twitter.com/cristianbote_)\n- [Chakra-UI](https://github.com/chakra-ui/chakra-ui) by [@segunadebayo](https://twitter.com/thesegunadebayo)\n- [@JoviDeCroock](https://twitter.com/jovidec) mostly for his kindness\n","readmeFilename":"README.md"}