{"_id":"@base-org/account-ui","_rev":"4-96206fbe55e05185258722745ae69308","name":"@base-org/account-ui","dist-tags":{"placeholder":"0.0.0","latest":"1.0.1"},"versions":{"0.0.0":{"name":"@base-org/account-ui","version":"0.0.0","author":{"name":"Coinbase Inc."},"license":"Apache-2.0","_id":"@base-org/account-ui@0.0.0","maintainers":[{"name":"lukasrosario","email":"lukas.rosario@coinbase.com"},{"name":"zencephalon","email":"mkbunday@gmail.com"},{"name":"wilsoncusack","email":"cusackw@gmail.com"},{"name":"base-npm","email":"opensource@base.org"}],"dist":{"shasum":"d6815cd382fdc718461d55c3adff76f278f8ab5f","tarball":"https://registry.npmjs.org/@base-org/account-ui/-/account-ui-0.0.0.tgz","fileCount":2,"integrity":"sha512-ZiGxvEhtjvKtN9JzTr+xHFqlGyJDGFrgY42LKNwXM+yR4AXvmd32S+Bqb5WxZxvz1WKkWvSQQXu6GF0SxnFMNw==","signatures":[{"sig":"MEYCIQDvwqsXm7mTsFGpyAm0+Kp2omwK+8OBH5LzTsQR08Xk6gIhAPPmV8+0Fy7B55KV3xfvI+nB87XgGPNk38/j+fjX5viA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":211},"main":"index.js","gitHead":"5d4b4ae334e93aca727f4f1450c4c09596b9e44e","_npmUser":{"name":"base-npm","email":"opensource@base.org"},"_npmVersion":"10.8.2","description":"Placeholder package","directories":{},"_nodeVersion":"18.20.8","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/account-ui_0.0.0_1752602553972_0.37603396555309554","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@base-org/account-ui","version":"1.0.0","keywords":["base","account","ui","components","react","preact","vue","svelte","web3"],"author":{"name":"Base"},"license":"Apache-2.0","_id":"@base-org/account-ui@1.0.0","maintainers":[{"name":"lukasrosario","email":"lukas.rosario@coinbase.com"},{"name":"zencephalon","email":"mkbunday@gmail.com"},{"name":"wilsoncusack","email":"cusackw@gmail.com"},{"name":"base-npm","email":"opensource@base.org"}],"homepage":"https://github.com/base/account-sdk#readme","bugs":{"url":"https://github.com/base/account-sdk/issues"},"dist":{"shasum":"63883117a1b572716f30dbb2fbaa0545281ed0f8","tarball":"https://registry.npmjs.org/@base-org/account-ui/-/account-ui-1.0.0.tgz","fileCount":37,"integrity":"sha512-ZQT9cQ1CX9iQU3t1UFv4mQPRsibHjite9utPAPRCfyy/9SDQ6gKpRM1jn4IlxXrlPt/xHJigpYZm2WCzfpFSyQ==","signatures":[{"sig":"MEUCIQDWtzk3NcPDqa6OjZNbXmvQBooCqcGWzbIHh2ZP731YuQIgQ4Z/ZirD6iVHGlR4KHZttyi10l9nKCjuhr4GDJ16QiA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84253},"type":"module","exports":{"./vue":{"types":"./dist/frameworks/vue/index.d.ts","default":"./dist/frameworks/vue/index.js"},"./react":{"types":"./dist/frameworks/react/index.d.ts","default":"./dist/frameworks/react/index.js"},"./preact":{"types":"./dist/frameworks/preact/index.d.ts","default":"./dist/frameworks/preact/index.js"},"./svelte":{"types":"./dist/frameworks/svelte/index.d.ts","default":"./dist/frameworks/svelte/index.js"}},"gitHead":"afb6c0632c5e12c3e06f74939f94a4e478bb4f57","scripts":{"lint":"biome lint .","test":"vitest","build":"node compile-assets.cjs && rm -rf ./dist && tsc -p ./tsconfig.build.json && tsc-alias && yarn postbuild","clean":"rm -rf dist && rm -rf node_modules","pretest":"node compile-assets.cjs","postbuild":"cp -r src/frameworks/vue/*.vue dist/frameworks/vue/ && cp -r src/frameworks/svelte/*.svelte dist/frameworks/svelte/","typecheck":"tsc --noEmit","test:coverage":"vitest --coverage"},"_npmUser":{"name":"base-npm","email":"opensource@base.org"},"repository":{"url":"git+https://github.com/base/account-sdk.git","type":"git"},"_npmVersion":"9.9.4","description":"Base Account UI Components","directories":{},"sideEffects":false,"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.17","clsx":"1.2.1","glob":"^7.2.0","sass":"^1.64.1","tslib":"^2.6.0","preact":"^10.26.9","vitest":"^2.1.9","tsc-alias":"^1.8.8","typescript":"^5.1.6","@types/react":"^19.1.8","@base-org/account":"workspace:*","@vitest/coverage-v8":"2.1.2","@testing-library/dom":"^10.4.0","@testing-library/react":"^16.3.0","@testing-library/preact":"^3.2.4"},"peerDependencies":{"vue":"*","clsx":"*","react":"*","preact":"*","svelte":"*","@base-org/account":"*"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"svelte":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/account-ui_1.0.0_1752698576662_0.8114324575783847","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@base-org/account-ui","version":"1.0.1","keywords":["base","account","ui","components","react","preact","vue","svelte","web3"],"author":{"name":"Base"},"license":"Apache-2.0","_id":"@base-org/account-ui@1.0.1","maintainers":[{"name":"lukasrosario","email":"lukas.rosario@coinbase.com"},{"name":"zencephalon","email":"mkbunday@gmail.com"},{"name":"wilsoncusack","email":"cusackw@gmail.com"},{"name":"base-npm","email":"opensource@base.org"}],"homepage":"https://github.com/base/account-sdk#readme","bugs":{"url":"https://github.com/base/account-sdk/issues"},"dist":{"shasum":"21b808ef59b26a4c51a972d46bba38662156f1c6","tarball":"https://registry.npmjs.org/@base-org/account-ui/-/account-ui-1.0.1.tgz","fileCount":59,"integrity":"sha512-wWu1PtWies+B5P1v2GoQ9SteaIpXY6AOmWawHSYJZY0hYJA1aqN78u8g0l5A9WJsAe9VXnAkOz/khlbsr/oEIQ==","signatures":[{"sig":"MEUCIAgODQvJRfwzr2QErvrFSL++CUbqi2+67+XutLl8qdzMAiEAy2lnr56lO80oXbFduR4WLTiiTTUeqz9+wlU/BVPpCcU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":47200},"type":"module","exports":{"./vue":{"types":"./dist/frameworks/vue/index.d.ts","default":"./dist/frameworks/vue/index.js"},"./react":{"types":"./dist/frameworks/react/index.d.ts","default":"./dist/frameworks/react/index.js"},"./preact":{"types":"./dist/frameworks/preact/index.d.ts","default":"./dist/frameworks/preact/index.js"},"./svelte":{"types":"./dist/frameworks/svelte/index.d.ts","default":"./dist/frameworks/svelte/index.js"}},"gitHead":"c2f3de9b3ed271550dce8418ac011c874d8ac6a9","scripts":{"lint":"biome lint .","test":"vitest","build":"node compile-assets.cjs && rm -rf ./dist && tsc -p ./tsconfig.build.json && tsc-alias && yarn postbuild","clean":"rm -rf dist && rm -rf node_modules","pretest":"node compile-assets.cjs","postbuild":"cp -r src/frameworks/vue/*.vue dist/frameworks/vue/ && cp -r src/frameworks/svelte/*.svelte dist/frameworks/svelte/","typecheck":"tsc --noEmit","test:coverage":"vitest --coverage"},"_npmUser":{"name":"base-npm","email":"opensource@base.org"},"repository":{"url":"git+https://github.com/base/account-sdk.git","type":"git"},"_npmVersion":"9.9.4","description":"Base Account UI Components","directories":{},"sideEffects":false,"_nodeVersion":"20.18.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.17","clsx":"1.2.1","glob":"^7.2.0","sass":"^1.64.1","tslib":"^2.6.0","preact":"^10.26.9","vitest":"^2.1.9","tsc-alias":"^1.8.8","typescript":"^5.1.6","@types/react":"^19.1.8","@base-org/account":"workspace:*","@vitest/coverage-v8":"2.1.2","@testing-library/dom":"^10.4.0","@testing-library/react":"^16.3.0","@testing-library/preact":"^3.2.4"},"peerDependencies":{"vue":"*","clsx":"*","react":"*","preact":"*","svelte":"*","@base-org/account":"*"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true},"svelte":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/account-ui_1.0.1_1752700551932_0.487174699870242","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-07-15T18:02:33.892Z","modified":"2026-09-16T19:31:43.425Z","0.0.0":"2025-07-15T18:02:34.142Z","1.0.0":"2025-07-16T20:42:56.902Z","1.0.1":"2025-07-16T21:15:52.141Z"},"bugs":{"url":"https://github.com/base/account-sdk/issues"},"author":{"name":"Base"},"license":"Apache-2.0","homepage":"https://github.com/base/account-sdk#readme","keywords":["base","account","ui","components","react","preact","vue","svelte","web3"],"repository":{"url":"git+https://github.com/base/account-sdk.git","type":"git"},"description":"Base Account UI Components","maintainers":[{"email":"lukas.rosario@coinbase.com","name":"lukasrosario"},{"email":"mkbunday@gmail.com","name":"zencephalon"},{"email":"cusackw@gmail.com","name":"wilsoncusack"},{"email":"ericliu121187@gmail.com","name":"ericliu121187"},{"email":"opensource@base.org","name":"base-npm"}],"readme":"# Base Account SDK UI Components\n\nThis package provides UI components for **React**, **Preact**, **Vue**, and **Svelte** applications.\n\n## Features\n\n- 🎯 **Multi-framework support**: React, Preact, Vue, and Svelte components\n- 🛠️ **TypeScript support**: Full type safety for all frameworks\n- 📦 **Single package**: Import from one package, use with any framework\n- 🎨 **Consistent API**: Same props interface across frameworks\n\n## Installation\n\n```bash\nnpm install @base-org/account-ui\n```\n\n## Framework-Specific Documentation\n\nFor detailed usage examples and setup instructions for each framework:\n\n- **[React](./react/README.md)** - React-specific documentation and examples\n- **[Preact](./preact/README.md)** - Preact-specific documentation and examples\n- **[Vue](./vue/README.md)** - Vue-specific documentation and examples\n- **[Svelte](./svelte/README.md)** - Svelte-specific documentation and examples\n\n## Quick Start - React\n\n### SignInWithBaseButton\n\n```tsx\nimport { SignInWithBaseButton } from '@base-org/account-ui/react';\n\nfunction App() {\n  return (\n    <SignInWithBaseButton \n      onClick={() => console.log('Sign in clicked!')}\n      align=\"center\"\n      variant=\"solid\"\n      colorScheme=\"light\"\n    />\n  );\n}\n```\n\n### BasePayButton\n\n```tsx\nimport { BasePayButton } from '@base-org/account-ui/react';\n\nfunction App() {\n  return (\n    <BasePayButton \n      onClick={() => console.log('Pay with Base clicked!')}\n      colorScheme=\"light\"\n    />\n  );\n}\n```\n\n## Props\n\n### SignInWithBaseButton\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `align` | `'left' \\| 'center'` | `'center'` | Button alignment |\n| `variant` | `'solid' \\| 'transparent'` | `'solid'` | Button style variant |\n| `colorScheme` | `'light' \\| 'dark' \\| 'system'` | `'system'` | Color theme |\n| `onClick` | `() => void` | `undefined` | Click handler |\n\n### BasePayButton\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `colorScheme` | `'light' \\| 'dark' \\| 'system'` | `'system'` | Color theme |\n| `onClick` | `() => void` | `undefined` | Click handler |\n\n## Development\n\n### Build Commands\n\n```bash\n# Build all frameworks\nnpm run build\n\n# TypeScript checking\nnpm run typecheck\n\n# Run tests\nnpm run test\n\n# Lint\nnpm run lint\n```\n\n## Architecture\n\nThis package provides:\n- **Framework-specific exports**: `/react`, `/preact`, `/vue`, `/svelte`\n- **Shared component logic**: Preact components as the base implementation\n- **Framework wrappers**: React, Vue, and Svelte components that mount Preact components\n- **Type definitions**: Full TypeScript support for all frameworks ","readmeFilename":"README.md"}