{"_id":"@bnb-chain/uikit","_rev":"5-f70b317a019f2d8a3d43ea8ac244c455","name":"@bnb-chain/uikit","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.3":{"name":"@bnb-chain/uikit","version":"0.0.3","license":"MIT","_id":"@bnb-chain/uikit@0.0.3","maintainers":[{"name":"robot-ux","email":"robot.ux@protonmail.com"}],"dist":{"shasum":"2870b6956ebe9c3cac4c569894784267f12f657c","tarball":"https://registry.npmjs.org/@bnb-chain/uikit/-/uikit-0.0.3.tgz","fileCount":762,"integrity":"sha512-6TgF2fw6nUz1FEGabJv+RJPrVIiA/cYLecZpusc7EvrVIZUBrb1HZNvX1ZlwiIy+o4BC4ZeGuJmVOo/BzObv+g==","signatures":[{"sig":"MEQCIF3D1gLqqN5I7YGoB9oTj7e9BPtfT3m8W9eShSRa6cW2AiB9rpznFeTrhqu1SxS/FSqshrFsN/dihSgj/3alcdhS/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":892352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq+zWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZzhAAhcc90LVy8Bm65AGeEEJj4IZe2+oKcAZY9BtKcqf6yt99pzSW\r\nCfW6TgqcwevKR6Z8cjFRCe8vjv79jQSJlTCAcShMDKCmSfIMyYM0Z3ageMEq\r\nk4me/nImZDjScCY5u95faij0g/ezNEXOJQG0duHgyaUEtwE9vVZ5YN/OIZnX\r\nd5EbfEVlWvN8sxZbPWzGjY0T2NGW96kBxDiI7s2UgOloPpbIkR3SiSngmZxz\r\n3s9KK7PIbQ9x3VzmdYVZyCuvAu+mxq7G8YPR9L8TfSEVyc6EnLlmFPIZ4vdd\r\neBIzJtMBy9bIKjzZDZPXJ+a3QQDABtNEj/iPELf3AFfIC0zEDk7rIGoJ/4Sn\r\n/e0vQ27RLGi8U0vRdz7XwloyuhxZUdGcVol2OFXCRmYpo0jKJ/3Qo+qkGCKg\r\nbpuzi73eivaF1+t3513UR6tqTmt0RFlpfcGOFqcyKhUgF60DeZXU63te3dOr\r\nsMXNsgR4fwPU7N+vIWy0OFEFWVkjIrLFuEy2QMchFdks7erqv5Rj4Zqk6leN\r\nvmpw/zgqZdV11WUdwxA16kYHfA/9bZBsyXtngUV5N5VJUBPsRhY452QwW0E/\r\nDN1hN6Yvg3F0p7seMFAFAzAIRKUeW1GDD84bNjlYL6YGbuE2Vr3V+VHoLg2F\r\nEG4FDf/TzFKPQLXSV19GwQ2CrkgEWjp9PQQ=\r\n=bvJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{"dev":"start-storybook -p 3000","lint":"eslint './src/**/*.{ts,tsx}'","build":"tsc","lint-staged":"lint-staged"},"_npmUser":{"name":"robot-ux","email":"robot.ux@protonmail.com"},"prettier":"@bnb-chain/prettier-config","description":"This repository holds the source code to the component library used by this project. It uses [Chakra UI](https://github.com/chakra-ui/chakra-ui) under the hood.","directories":{},"licenseText":"MIT License (MIT)\n\nCopyright (c) 2022 BNB Chain\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and\nassociated documentation files (the \"Software\"), to deal in the Software without restriction,\nincluding without limitation the rights to use, copy, modify, merge, publish, distribute,\nsublicense, and/or sell copies 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 copies or substantial\nportions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT\nNOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES\nOR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","lint-staged":{"*.{css,less,md}":["prettier --write"],"*.{js,jsx,ts,tsx}":["eslint --fix","prettier --write"]},"dependencies":{"next":"~12.1.6","bip39":"~3.0.4","react":"~18.2.0","big.js":"~6.1.1","polished":"^4","crypto-js":"~4.1.1","react-dom":"~18.2.0","react-intl":"~6.0.4","@emotion/css":"^11","qrcode.react":"~3.0.1","framer-motion":"^6","@emotion/react":"^11","@tippyjs/react":"^4","@emotion/styled":"^11","@bnb-chain/icons":"workspace:*","@chakra-ui/react":"~2.2.1","@chakra-ui/system":"~1.12.0","@chakra-ui/anatomy":"~1.3.0","@chakra-ui/react-utils":"~1.2.3","@chakra-ui/theme-tools":"~1.3.6"},"eslintConfig":{"extends":["@bnb-chain/eslint-config/react"]},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.8.0","prettier":"^2.5.1","typescript":"~4.5.4","lint-staged":"~12.1.7","@types/react":"~18.0.12","@types/big.js":"~6.1.3","@storybook/react":"~6.5.9","@types/crypto-js":"~4.1.1","@types/react-dom":"~18.0.5","@bnb-chain/eslint-config":"workspace:*","@storybook/addon-actions":"~6.5.9","@bnb-chain/prettier-config":"workspace:*","@chakra-ui/storybook-addon":"~4.0.1","@storybook/addon-essentials":"~6.5.9","@storybook/addon-storysource":"~6.5.9"},"_npmOperationalInternal":{"tmp":"tmp/uikit_0.0.3_1655434454352_0.36013762233932534","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@bnb-chain/uikit","version":"0.0.4","license":"MIT","_id":"@bnb-chain/uikit@0.0.4","maintainers":[{"name":"robot-ux","email":"robot.ux@protonmail.com"}],"dist":{"shasum":"a9e7dfb33694544588fda030cc9304279737c4fd","tarball":"https://registry.npmjs.org/@bnb-chain/uikit/-/uikit-0.0.4.tgz","fileCount":762,"integrity":"sha512-pZYZyAX949zzvqjFkbUypiyd2nPGYwqyPC4KW7V4OGuZ3dIThSpKeDQhEUonTlt2Ra5WTfeYU7ADPxzm2kZEAQ==","signatures":[{"sig":"MEUCIAnjUTx0ohDHC2xFPnlOzZt0d089wdngNORxQeEQMrWkAiEAkadZl4bDB8fZQKWK2y+d64o/k2VXlxO9EljfYGD4IxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":891887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiq/KTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqi7w/9EBCZfVPiBA7W5QuvoqKfonqp1/K7KTW0Dl4a82HLj/KU5Xto\r\nFHEwiXOmKVGyGznr3DJY67Eu3oG6xRzND7v4GxlXehzYIyVYIlUlEKzaAj26\r\nP6ZeZqgR3bErVfIdrZ/3Rr5Vtg6od0bAfJiWCOgAeL5paukTI5L+gSL3cf6a\r\n49BZ/q0kAwqs8jguQE6YFsaxMERgL11m8Q4dNxwuYgUpQSl4kwrz9bnNj42B\r\nKeL3JcnHXGY8LKGcdl4r2PHwZVCJjzEJf2Au8X0L5SRMeLo62Gr3fZzRZn+h\r\nEJgoAZ//kuOTaO7OCF3II0IBQi1uvibnHLRFoma85MdYKOFJUamvM05sB1yE\r\noWLUdboy7SkuFJ6lTjQLOF3DYKHl/b02s63cnlCgNuisRCrwBdkHninmgmIC\r\nLspqdeUIkcynRGXZZVoNOYRg94KA1ZbfRvPeNJJcsNdtxw8tp4sVE4m5r9+4\r\nOm9piUH97if+2fMJW0ML42zegDU6RLd6oK24TJZv5iMG4S0aGZ0QeMyZzWnD\r\nY7+3Vey9iOjbm3iIDCVuY9CqMgBLmlnZ57Ua1UWkCtUjVBqY5IheK4IalPsK\r\n8ecag0OS/5VgnLuuO/Hjb6FRbWUrIclN1XrnlfL0Ray7lbKCwUrRmCrmmQ6i\r\nbpSYyix5ZaT/h3KbW2J2685kTewZhHGzoJ0=\r\n=KjoJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.js","scripts":{"dev":"start-storybook -p 3000","lint":"eslint './src/**/*.{ts,tsx}'","build":"tsc","lint-staged":"lint-staged"},"_npmUser":{"name":"robot-ux","email":"robot.ux@protonmail.com"},"prettier":"@bnb-chain/prettier-config","description":"This repository holds the source code to the component library used by this project. It uses [Chakra UI](https://github.com/chakra-ui/chakra-ui) under the hood.","directories":{},"licenseText":"MIT License (MIT)\n\nCopyright (c) 2022 BNB Chain\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and\nassociated documentation files (the \"Software\"), to deal in the Software without restriction,\nincluding without limitation the rights to use, copy, modify, merge, publish, distribute,\nsublicense, and/or sell copies 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 copies or substantial\nportions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT\nNOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES\nOR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","lint-staged":{"*.{css,less,md}":["prettier --write"],"*.{js,jsx,ts,tsx}":["eslint --fix","prettier --write"]},"dependencies":{"next":"~12.1.6","bip39":"~3.0.4","react":"~18.2.0","big.js":"~6.1.1","polished":"^4","crypto-js":"~4.1.1","react-dom":"~18.2.0","react-intl":"~6.0.4","@emotion/css":"^11","qrcode.react":"~3.0.1","framer-motion":"^6","@emotion/react":"^11","@tippyjs/react":"^4","@emotion/styled":"^11","@bnb-chain/icons":"0.0.2","@chakra-ui/react":"~2.2.1","@chakra-ui/system":"~1.12.0","@chakra-ui/anatomy":"~1.3.0","@chakra-ui/react-utils":"~1.2.3","@chakra-ui/theme-tools":"~1.3.6"},"eslintConfig":{"extends":["@bnb-chain/eslint-config/react"]},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.8.0","prettier":"^2.5.1","typescript":"~4.5.4","lint-staged":"~12.1.7","@types/react":"~18.0.12","@types/big.js":"~6.1.3","@storybook/react":"~6.5.9","@types/crypto-js":"~4.1.1","@types/react-dom":"~18.0.5","@bnb-chain/eslint-config":"workspace:*","@storybook/addon-actions":"~6.5.9","@bnb-chain/prettier-config":"workspace:*","@chakra-ui/storybook-addon":"~4.0.1","@storybook/addon-essentials":"~6.5.9","@storybook/addon-storysource":"~6.5.9"},"_npmOperationalInternal":{"tmp":"tmp/uikit_0.0.4_1655435922720_0.7887576385639141","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-06-17T02:54:14.302Z","modified":"2026-01-07T06:47:16.443Z","0.0.3":"2022-06-17T02:54:14.591Z","0.0.4":"2022-06-17T03:18:43.023Z"},"license":"MIT","description":"This repository holds the source code to the component library used by this project. It uses [Chakra UI](https://github.com/chakra-ui/chakra-ui) under the hood.","maintainers":[{"email":"robot.ux@protonmail.com","name":"robotnpm"},{"email":"devin@nodereal.io","name":"devinxiang"},{"email":"aiden.c@nodereal.io","name":"aiden-cao"},{"email":"yolin@bnbchain.org","name":"robotbnb"}],"readme":"# @bnb-chain/uikit\n\nThis repository holds the source code to the component library used by this project. It uses\n[Chakra UI](https://github.com/chakra-ui/chakra-ui) under the hood.\n\nIf a component is not specific to a page and it does not rely on business logic, it belongs in this\nproject.\n\nIf a component needs i18n, you can put the translation in [locales/en.ts](./src/locales/en.ts).\n\n## Theme\n\n### Colors\n\nOur color scheme works a bit differently than Chakra UI. We have two themes,\n[dark](./src/modules/theme/colors/dark.ts) and [light](./src/modules/theme/colors/light.ts).\n\nColors come in pairs (i.e. every dark color has a light equivalent) so switching themes is seamless.\n\n```\nimport { theme, useColorMode } from '@bnb-chain/uikit';\n...\nconst { colorMode } = useColorMode();\n...\nconsole.log(theme.colors[colorMode].bg.primary); // #1e2026 in dark mode, #fafafa in light mode.\n```\n\n### Sizes\n\nOur size scheme is similar to Chakra UI, which is inspired by Tailwind CSS. Sizes are proportional\nincrements of 4px. There are some half sizes for values regularly used in our project.\n\n| **Name** |  **px**  |\n| :------: | :------: |\n|    1     |   4px    |\n|    2     |   8px    |\n|    3     |   12px   |\n|   3.5    |   14px   |\n|    4     |   16px   |\n|   ...    |\n|    N     | (N\\*4)px |\n\n```\nimport { Box, theme, useColorMode } from '@bnb-chain/uikit';\n...\nconsole.log(theme.sizes['4']); // 16px\n...\n<Box fontSize={theme.sizes['4']} /> // ❌ Do not use px for font sizing.\n<Box m={theme.sizes['4']} /> // ✅ Use sizes for attributes such as padding, margin, border radius, etc.\n```\n\n### Typography\n\nFont sizes follow the same scheme as sizes, except they use `rem` instead of `px`.\n\n| **Name** |   **rem**    |\n| :------: | :----------: |\n|    1     |   0.25rem    |\n|    2     |    0.5rem    |\n|    3     |   0.75rem    |\n|   3.5    |   0.875rem   |\n|    4     |     1rem     |\n|   ...    |\n|    N     | (N\\*0.25)rem |\n\n```\nimport { Box, theme, useColorMode } from '@bnb-chain/uikit';\n...\nconsole.log(theme.fontSizes['4']); // 1rem\n...\n<Box fontSize={theme.fontSizes['4']} /> // ✅\n```\n","readmeFilename":"README.md"}