{"_id":"@bx-labs/bx-ui","_rev":"8-f3be28b5c621a726a99f4f748ad59a3f","name":"@bx-labs/bx-ui","dist-tags":{"latest":"0.3.4"},"versions":{"0.1.0":{"name":"@bx-labs/bx-ui","version":"0.1.0","keywords":["react","design-system","component-library","ui"],"author":{"name":"Banxa"},"license":"MIT","_id":"@bx-labs/bx-ui@0.1.0","maintainers":[{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"dist":{"shasum":"96b4ad3885a7767ecc07529145ce1155e61cbb01","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.1.0.tgz","fileCount":38,"integrity":"sha512-3VjjMrrmLvpbqdr6nbKu7RXF1/jRD4AFz8tp7xIRvmHDKdOmCz59QnJ6mgWYmZZln2SfXLv6AithSNzfF3XEEQ==","signatures":[{"sig":"MEUCIGYtnXBsT8izIz9cRHjKGZMlCgqnj2PpgQElcILK6zYlAiEA9UFL5T/WqMEgbUggEQKBSTnZUDf8vpsnoflUF7A0BAc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":163010},"main":"./dist/bx-ui.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"42e21f131293222018bc8c683f56ac87e24b317a","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bx_aaron","email":"aaron.lee@banxa.com"},"_npmVersion":"11.17.0","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/bx-ui_0.1.0_1786355745856_0.8213967380770213","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@bx-labs/bx-ui","version":"0.2.0","keywords":["react","design-system","component-library","ui"],"author":{"name":"Banxa"},"license":"MIT","_id":"@bx-labs/bx-ui@0.2.0","maintainers":[{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"dist":{"shasum":"505a5249b32f14d65da9f53eb87de2258cddcad5","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.2.0.tgz","fileCount":38,"integrity":"sha512-E82C2g+0ipT/wLKIsg+EZ+t8w6vdU2H5TPUqbaTFWYIBzuS+kWPHKX7LeQJr3+eLG3J2GBZhbDQugmqJZy99mQ==","signatures":[{"sig":"MEQCIG9rundXTpcTFeaNnj0B8Wk1IuSFC7eENVlhHCY6oqRiAiASMEEXCWl/fqnTPfedTg41zS+5ClRfqFRParE0ncsr+g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":165750},"main":"./dist/bx-ui.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"47e995fab5e4175cebe8abdd7dd251236df0da71","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bx_aaron","email":"aaron.lee@banxa.com"},"_npmVersion":"11.17.0","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/bx-ui_0.2.0_1786684283520_0.4827559541211375","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@bx-labs/bx-ui","version":"0.3.0","keywords":["react","design-system","component-library","ui"],"author":{"name":"Banxa"},"license":"MIT","_id":"@bx-labs/bx-ui@0.3.0","maintainers":[{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"dist":{"shasum":"62713b821b988a2920aec939bc04d7fe42165e2c","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.3.0.tgz","fileCount":40,"integrity":"sha512-k07UgjINtAjD4DwHnwsfRD1Sq5HuoQgYoagkcV72zuEVxQSger30orSqNlxEzEgOLSSgsUocfkLdXAd3DqNXNg==","signatures":[{"sig":"MEUCIQCDuTd+0UqmNGBgG0o7HDzioxbVIyDmXUyJ5tnZ8PwkeAIgeiQt/fiQPh9ZF6ERocDloyQbGpsUebaEPYFKlH9iBRg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":172771},"main":"./dist/bx-ui.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"d9be77fae4b6c8f23519c7e20523b49aaef8028e","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bx_aaron","email":"aaron.lee@banxa.com"},"_npmVersion":"11.17.0","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/bx-ui_0.3.0_1786689900589_0.9947252104691275","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@bx-labs/bx-ui","version":"0.3.1","keywords":["react","design-system","component-library","ui"],"author":{"name":"Banxa"},"license":"MIT","_id":"@bx-labs/bx-ui@0.3.1","maintainers":[{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"dist":{"shasum":"1eb261ec1085a0a1045c4ced70a5865c3431fdd6","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.3.1.tgz","fileCount":40,"integrity":"sha512-W5jrkzEyNlNKBDqEZnuvaVruQRoxjQfGaHQb56EC9GPzfAcYSly9GJp+mykabmIUtQx0Ki7KBnZx3Vv6Db3I/Q==","signatures":[{"sig":"MEUCIB/0pjJjokYmAvGd/mYXiYtj4/apPQch2MTgb0H7U7IpAiEA2z24dJ0/57Ss9t8C37bElRhl6hlBOKD/bBxV/7xw3uc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":172789},"main":"./dist/bx-ui.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"b7135ad4022f4d9df24f9d0f88a48a6fee0b1527","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bx_aaron","email":"aaron.lee@banxa.com"},"_npmVersion":"11.17.0","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/bx-ui_0.3.1_1786696930942_0.9265757377218864","host":"s3://npm-registry-packages-npm-production"}},"0.3.2":{"name":"@bx-labs/bx-ui","version":"0.3.2","keywords":["react","design-system","component-library","ui"],"author":{"name":"Banxa"},"license":"MIT","_id":"@bx-labs/bx-ui@0.3.2","maintainers":[{"name":"zihang-osl","email":"zihang.lee@osl.com"},{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"dist":{"shasum":"e31428cf4133ca0f1c56df38aba728e115cc560d","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.3.2.tgz","fileCount":40,"integrity":"sha512-349KO6OW1uMI3X6CKsTLdFvWKMwjSlMx0Xy2kxHESYFkaojL/ETf9bb49F3KEglkohNGA3tWrfkqB0wg/+0IUQ==","signatures":[{"sig":"MEUCIQCLoJluZo4A1ZtNO7YEJ6z5R6ziz/7b0S+2vMVf4zvGSAIgAvSVv0wwzQdARgu9ctfMz/6K2eglYenBesbhBiR8U78=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":172831},"main":"./dist/bx-ui.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"67896408b0c4fcb66a1c909216e8ec4e2bfca30a","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bx_aaron","email":"aaron.lee@banxa.com"},"_npmVersion":"11.17.0","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/bx-ui_0.3.2_1786714367801_0.646870730043902","host":"s3://npm-registry-packages-npm-production"}},"0.3.3":{"name":"@bx-labs/bx-ui","version":"0.3.3","keywords":["react","design-system","component-library","ui"],"author":{"name":"Banxa"},"license":"MIT","_id":"@bx-labs/bx-ui@0.3.3","maintainers":[{"name":"zihang-osl","email":"zihang.lee@osl.com"},{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"dist":{"shasum":"243283726d7bd457b10adb9343175d139e1b3c20","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.3.3.tgz","fileCount":40,"integrity":"sha512-aO0ID+RY0roqAkJ84gkk0Ee93iHlUROmIfpGJ34LPKc05S9dTrD0qlu3xepLtdFBDV27F2Zn2tQn29jZHcbS4g==","signatures":[{"sig":"MEQCICMjw8615kd6XBU0DT8gfQSATKfGdaNnQMkcN3IJIdfPAiA1KaKQ6U950WQWIcs+xgZUSKuv2WxR3lxlbnxHLtD/0w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":173399},"main":"./dist/bx-ui.es.js","type":"module","types":"./dist/index.d.ts","module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"5e3f2b71fca3ee975cf0fedf266f5a1b7464f75e","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"_npmUser":{"name":"bx_aaron","email":"aaron.lee@banxa.com"},"_npmVersion":"11.17.0","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"sideEffects":["*.css","*.scss"],"_nodeVersion":"26.5.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/bx-ui_0.3.3_1787051058179_0.5656010690843531","host":"s3://npm-registry-packages-npm-production"}},"0.3.4":{"_id":"@bx-labs/bx-ui@0.3.4","dist":{"shasum":"e234a81dd063d25c9076d3838a90de2c2e3c4688","tarball":"https://registry.npmjs.org/@bx-labs/bx-ui/-/bx-ui-0.3.4.tgz","fileCount":40,"integrity":"sha512-IZwdxXaZsziyqm2zuxJTA3ghySoGoDDNWjiwU17S7XMaRigmJtaJoYK2dnZdqz8IxBBvnseL6CdPZWyb2qy85A==","signatures":[{"sig":"MEQCIEuO/HA3d2+BqrZMv0d2IyPj/QWY6qsx/7LQEgYiU2pFAiBTxwo7osL/G8AdX6uY7lWxLfqvDBxIFRdMGsEakzEAOA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICf+9MECBzh37+gBM2H/MhZBjxLgtoGqoIpAYUOWXz53AiAty0ROE1nyVJ2ZbxXOgUTw6pO5gMSj4zp8ZcsgJEb+SQ=="}],"unpackedSize":174569},"main":"./dist/bx-ui.es.js","name":"@bx-labs/bx-ui","type":"module","types":"./dist/index.d.ts","author":{"name":"Banxa"},"module":"./dist/bx-ui.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/bx-ui.es.js","default":"./dist/bx-ui.es.js"},"./style.css":"./dist/bx-ui.css","./package.json":"./package.json"},"gitHead":"f38351d4d265ddf7fc4fd6296346f00532056154","license":"MIT","scripts":{"dev":"vite","lint":"eslint src stories --fix","test":"vitest run","build":"vite build","storybook":"storybook dev -p 6007","typecheck":"tsc --noEmit","lint:check":"eslint src stories","test:watch":"vitest","prepublishOnly":"npm run typecheck && npm run lint:check && npm run test && npm run build","build-storybook":"storybook build"},"version":"0.3.4","_npmUser":{"name":"zihang-osl","email":"zihang.lee@osl.com"},"keywords":["react","design-system","component-library","ui"],"_npmVersion":"10.8.2","description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","directories":{},"maintainers":[{"name":"zihang-osl","email":"zihang.lee@osl.com"},{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"sideEffects":["*.css","*.scss"],"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.83.0","vite":"^6.0.5","jsdom":"^25.0.1","react":"^19.0.0","eslint":"^9.17.0","vitest":"^3.2.7","globals":"^15.14.0","react-dom":"^19.0.0","storybook":"^10.5.7","@eslint/js":"^9.17.0","typescript":"^5.7.2","@types/react":"^19.0.0","vite-plugin-dts":"^4.4.0","@types/react-dom":"^19.0.0","typescript-eslint":"^8.18.0","@vitejs/plugin-react":"^4.3.4","@storybook/addon-docs":"^10.5.7","@storybook/react-vite":"^10.5.7","@testing-library/react":"^16.1.0","eslint-plugin-storybook":"^10.5.7","@testing-library/jest-dom":"^6.6.3","eslint-plugin-react-hooks":"^5.1.0","@testing-library/user-event":"^14.5.2"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bx-ui_0.3.4_1788234225543_0.29390034253784414"}}},"time":{"created":"2026-08-10T09:55:45.692Z","modified":"2026-09-01T03:43:45.821Z","0.1.0":"2026-08-10T09:55:46.004Z","0.2.0":"2026-08-14T05:11:23.671Z","0.3.0":"2026-08-14T06:45:00.751Z","0.3.1":"2026-08-14T08:42:11.099Z","0.3.2":"2026-08-14T13:32:48.098Z","0.3.3":"2026-08-18T11:04:18.333Z","0.3.4":"2026-09-01T03:43:45.643Z"},"author":{"name":"Banxa"},"license":"MIT","keywords":["react","design-system","component-library","ui"],"description":"React design system — accessible, themeable components built on a CSS custom property token cascade.","maintainers":[{"name":"zihang-osl","email":"zihang.lee@osl.com"},{"name":"bx_aaron","email":"aaron.lee@banxa.com"}],"readme":"# @bx-labs/bx-ui\n\nBanxa's React design system — a set of accessible, themeable UI components built on a\nthree-tier CSS custom property token cascade (primitives → semantic → component), with\nfirst-class TypeScript support and a dark-mode-first theme that can be fully overridden\nby consuming applications.\n\nThis is the React port of [`@banxa-official/banxa-ui`](../README.md) (Vue 3). Both packages\nrender the same markup, share the same class names, and consume the same token stylesheet,\nso a product can migrate framework-by-framework without a visual break.\n\n## Installation\n\n```bash\nnpm install @bx-labs/bx-ui\n```\n\n`react` and `react-dom` (`^18` or `^19`) are peer dependencies and must already be installed.\nThe package itself ships **zero runtime dependencies**.\n\n## Getting started\n\nImport the components you need and the stylesheet once, globally, in your app's entry point:\n\n```tsx\n// main.tsx\nimport { createRoot } from 'react-dom/client'\nimport App from './App'\nimport '@bx-labs/bx-ui/style.css'\n\ncreateRoot(document.getElementById('root')!).render(<App />)\n```\n\nThen use components directly:\n\n```tsx\nimport { useState } from 'react'\nimport { BxButton, BxInput } from '@bx-labs/bx-ui'\n\nexport default function SignUp() {\n  const [email, setEmail] = useState('')\n\n  return (\n    <>\n      <BxInput value={email} onChange={setEmail} label=\"Email address\" placeholder=\"you@example.com\" />\n      <BxButton variant=\"primary\" onClick={submit}>Continue</BxButton>\n    </>\n  )\n}\n```\n\nOnly import what you use — the library is tree-shakeable, so unused components are\ndropped from your production bundle.\n\n### Available components\n\n| Category   | Components |\n|------------|------------|\n| Foundation | `BxButton`, `BxIcon`, `BxDivider`, `BxBadge` |\n| Form       | `BxInput`, `BxSelect`, `BxSelectField`, `BxCombobox`, `BxCheckbox`, `BxRadio`, `BxSwitch`, `BxOtpInput` |\n| Feedback   | `BxAlert`, `BxToast`, `BxProgress`, `BxSpinner`, `BxDots`, `BxSkeleton` |\n| Surface    | `BxCard`, `BxModal`, `BxTooltip`, `BxDescriptionList` |\n| Navigation | `BxDropdownMenu`, `BxDropdownMenuItem`, `BxTabs` |\n| Composite  | `BxCollapsible` |\n\nBrowse every component, prop, and variant interactively in [Storybook](#storybook).\n\n## Differences from the Vue package\n\nThe rendered DOM, class names, and tokens are identical. The *API* is idiomatic React:\n\n| Vue | React |\n|-----|-------|\n| `v-model=\"x\"` | `value={x} onChange={setX}` — plus `defaultValue` for uncontrolled use |\n| `@click=\"fn\"` | `onClick={fn}` |\n| `<slot />` | `children` |\n| `<slot name=\"left-item\" />` | `leftItem` prop (`ReactNode`) |\n| scoped slot `v-slot=\"{ item }\"` | render prop, e.g. `renderOption={(item) => ...}` |\n| `emit('close')` | `onClose` prop |\n\nEvery component forwards its `ref` to the underlying root element and spreads unrecognised\nprops onto it, so `className`, `data-*`, and event handlers pass through as expected.\n\n## Theming\n\nComponents never hardcode colours — every visual token is a CSS custom property, applied\nat three tiers:\n\n1. **Primitives** — raw palette/scale values (`--space-16`, `--radius-standard`, ...)\n2. **Semantic** — what things *mean* (`--fills-cta`, `--fills-background`, `--fills-alert-error`, ...)\n3. **Component** — per-component hooks for narrow overrides (`--bx-button-bg`, ...)\n\nThe library ships dark mode by default (tokens on `:root`) and a light mode you opt into\nby adding a `.lightmode` class to any ancestor element (typically `<html>` or `<body>`):\n\n```ts\ndocument.documentElement.classList.toggle('lightmode', isLightMode)\n```\n\n### Overriding colours (brand/merchant theming)\n\nBecause every token is a real CSS custom property, a host application can override the\nwhole palette without touching component code — just redeclare the variables on an\nancestor element, after the library's stylesheet has loaded:\n\n```css\n:root {\n  --fills-cta: #ff5a1f;\n  --fills-cta-hover: #e64f1a;\n  --fills-cta-active: #cc4517;\n  --fills-cta-foreground: #ffffff;\n  --fills-background: #0b0b0d;\n}\n```\n\nThis works because CSS custom properties resolve via normal inheritance: a declaration on\na container element always wins over an inherited value from `:root`, regardless of\nstylesheet load order — so it's safe to apply per-tenant/per-merchant theming at runtime\n(e.g. via `element.style.setProperty('--fills-cta', merchantColor)`).\n\n## TypeScript support\n\nThe package ships its own type declarations (`dist/index.d.ts`, generated from source) —\nno `@types/*` package needed. Component props, exported hooks, and shared types are all\navailable out of the box:\n\n```ts\nimport { BxSelect } from '@bx-labs/bx-ui'\nimport type { SelectOption, BxSelectProps } from '@bx-labs/bx-ui'\n\nconst options: SelectOption[] = [\n  { label: 'USD', value: 'usd' },\n  { label: 'EUR', value: 'eur' }\n]\n```\n\n`moduleResolution: \"bundler\"` or `\"node16\"`/`\"nodenext\"` (TS ≥ 4.7) is recommended so the\npackage's `exports` map resolves correctly.\n\n## Error handling\n\nBanxa UI surfaces problems in two different ways depending on whether they're part of\nyour app's normal control flow or a mistake in how a component is used:\n\n- **Validation / user-facing errors** are just props — there are no exceptions to catch.\n  Pass an `error` message (or boolean, depending on the component) and the component\n  renders its error styling and, where applicable, wires up `aria-describedby` /\n  `role=\"alert\"` for screen readers:\n\n  ```tsx\n  <BxInput value={email} onChange={setEmail} label=\"Email\" error={emailError} />\n  <BxButton variant=\"outlined\" error>Delete account</BxButton>\n  ```\n\n- **Developer-facing warnings** (deprecated props, unknown icon names, etc.) are logged\n  via `console.warn` and are automatically stripped out of production builds\n  (`import.meta.env.DEV` guarded), so they never ship to end users:\n\n  ```\n  [BxInput] \"hint\" is deprecated. Use \"description\" instead.\n  [BxIcon] Unknown icon name: \"not-a-real-icon\". Register it in registry.ts.\n  ```\n\n  Treat these as build-time linting signals — fix them before shipping, not something\n  to handle at runtime.\n\nComponents do not throw during normal rendering; malformed input (e.g. an unrecognised\nicon name) degrades gracefully (renders a sizing placeholder) rather than crashing your app.\n\n## Storybook\n\nEvery component has a live, interactive Storybook entry with all variants and a\ndark/light theme toggle.\n\n```bash\ngit clone git@gitlab.com:banxa/banxa-ui.git\ncd banxa-ui/react\nnpm install\nnpm run storybook       # http://localhost:6007\n```\n\nThe Vue Storybook runs on port 6006 and the React one on 6007, so both can run side by\nside when comparing parity.\n\n## Development\n\n```bash\nnpm run dev              # Vite dev server\nnpm run build            # Build the library (dist/)\nnpm run typecheck        # tsc --noEmit\nnpm run test             # Vitest + Testing Library\nnpm run lint             # ESLint with --fix\nnpm run lint:check       # ESLint, no autofix (CI)\n```\n\n### Publishing\n\nThis package publishes independently of the Vue one. Releases are built from `dist/`\n(never commit `dist/` — it's generated by `npm run build`, which also runs automatically\nvia `prepublishOnly` before `npm publish`).\n\n```bash\ncd react\nnpm version <patch|minor|major>\nnpm publish\n```\n\n## Browser support\n\nTargets evergreen browsers (Chrome, Firefox, Safari, Edge — last 2 versions). No IE11 support.\n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}