{"_id":"@aioha/lit-ui","_rev":"2-c9b4085730617c6afee184731f0bab3d","name":"@aioha/lit-ui","dist-tags":{"latest":"1.9.0-beta.1"},"versions":{"1.8.0":{"name":"@aioha/lit-ui","version":"1.8.0","keywords":["aioha","lit","hive","blockchain","authentication","web3"],"author":{"name":"techcoderx"},"license":"MIT","_id":"@aioha/lit-ui@1.8.0","maintainers":[{"name":"techcoderx","email":"npmpkgs@techcoderx.com"}],"homepage":"https://aioha.dev","bugs":{"url":"https://github.com/aioha-hive/lit-ui/issues"},"dist":{"shasum":"240d967da69013db1dcd0ffe88e2651853d7bfee","tarball":"https://registry.npmjs.org/@aioha/lit-ui/-/lit-ui-1.8.0.tgz","fileCount":65,"integrity":"sha512-lNExHqZP7RFnMg8osdbPPMuQhzV6MTks++8uwNTBWLTmJtEh7Y4a24swPU4ELvlNpYU7NmQiuHBnKG1IbTGa3g==","signatures":[{"sig":"MEYCIQCT3uQz8/HENl9u7R2EotPmoobTw6huTvKuam3hjhZ2wgIhAMmMRTcIYoSvdK0+DB1DzFOeXfzFNhUrarvD9dQ0ZF6R","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":818667},"main":"build/index.js","type":"module","_from":"file:aioha-lit-ui-1.8.0.tgz","types":"build/index.d.ts","scripts":{"dev":"vite","build":"npx @tailwindcss/cli -o build/index.css --minify && tsc --p ./tsconfig.build.json && cp -r lib/logos build/","start":"vite","preview":"vite preview","prepublish":"rm -rf build/* dist/* && pnpm run build && pnpm run build:bundle","build:bundle":"vite build --config vite.bundle.config.ts -m production"},"_npmUser":{"name":"techcoderx","email":"npmpkgs@techcoderx.com"},"_resolved":"/private/var/folders/4k/c2bh71lj5yl46624214xzpv40000gn/T/1e032d12d7fb11d34292f9c1c76598c5/aioha-lit-ui-1.8.0.tgz","_integrity":"sha512-lNExHqZP7RFnMg8osdbPPMuQhzV6MTks++8uwNTBWLTmJtEh7Y4a24swPU4ELvlNpYU7NmQiuHBnKG1IbTGa3g==","repository":{"url":"git+https://github.com/aioha-hive/lit-ui.git"},"_npmVersion":"10.9.2","description":"Ready-made Lit web component for Aioha","directories":{},"_nodeVersion":"22.15.0","dependencies":{"qrcode":"^1.5.4","@aioha/providers":"^1.8.2"},"_hasShrinkwrap":false,"devDependencies":{"lit":"^3.3.2","vite":"^7.2.4","terser":"^5.44.1","typescript":"~5.9.3","tailwindcss":"^4.1.18","@aioha/aioha":"^1.8.0","@lit/context":"^1.1.6","@types/qrcode":"^1.5.6","@tailwindcss/cli":"^4.1.18","@tailwindcss/vite":"^4.1.18"},"peerDependencies":{"lit":"^3.3.2","@aioha/aioha":"^1.8.0","@lit/context":"^1.1.6"},"peerDependenciesMeta":{"lit":{"optional":true},"@lit/context":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/lit-ui_1.8.0_1767190415244_0.8104194572413148","host":"s3://npm-registry-packages-npm-production"}},"1.9.0-beta.1":{"name":"@aioha/lit-ui","description":"Ready-made Lit web component for Aioha","version":"1.9.0-beta.1","type":"module","main":"build/index.js","types":"build/index.d.ts","keywords":["aioha","lit","hive","blockchain","authentication","web3"],"author":{"name":"techcoderx"},"license":"MIT","homepage":"https://aioha.dev","repository":{"url":"git+https://github.com/aioha-hive/lit-ui.git"},"bugs":{"url":"https://github.com/aioha-hive/lit-ui/issues"},"dependencies":{"@aioha/i18n-keys":"^1.0.1","@aioha/providers":"^1.9.0-beta.3","qrcode":"^1.5.4"},"devDependencies":{"@aioha/aioha":"^1.8.5","@lit/context":"^1.1.6","@tailwindcss/cli":"^4.1.18","@tailwindcss/vite":"^4.1.18","@types/qrcode":"^1.5.6","lit":"^3.3.2","tailwindcss":"^4.1.18","terser":"^5.44.1","typescript":"~5.9.3","vite":"^7.2.4"},"peerDependencies":{"@aioha/aioha":"^1.8.5","@lit/context":"^1.1.6","lit":"^3.3.2"},"peerDependenciesMeta":{"@lit/context":{"optional":true},"lit":{"optional":true}},"scripts":{"start":"vite","dev":"vite","build":"npx @tailwindcss/cli -o build/index.css --minify && tsc --p ./tsconfig.build.json && cp -r lib/logos build/","build:bundle":"vite build --config vite.bundle.config.ts -m production","prepublish":"rm -rf build/* dist/* && pnpm run build && pnpm run build:bundle","preview":"vite preview"},"_id":"@aioha/lit-ui@1.9.0-beta.1","_integrity":"sha512-5nQpZk+9C2/09hSOAKZ3YTOY8PGO7n1I0SkiNdDuvP5WQIhlOPMgR2+Wmz3cTHSUgQMJX9jrsR29cKSDFuW1Jg==","_resolved":"/private/var/folders/4k/c2bh71lj5yl46624214xzpv40000gn/T/2e9008c8b82db01d7bf8fb6d14d97743/aioha-lit-ui-1.9.0-beta.1.tgz","_from":"file:aioha-lit-ui-1.9.0-beta.1.tgz","_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-5nQpZk+9C2/09hSOAKZ3YTOY8PGO7n1I0SkiNdDuvP5WQIhlOPMgR2+Wmz3cTHSUgQMJX9jrsR29cKSDFuW1Jg==","shasum":"1ead44ab03ac2a094a9de3b2633c63bda6886dcf","tarball":"https://registry.npmjs.org/@aioha/lit-ui/-/lit-ui-1.9.0-beta.1.tgz","fileCount":71,"unpackedSize":973274,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDHp2nQ6F6x0Ubvx1jlr1ABkmGkYsgjnex8+dWX4RkUPgIhAJBaamCTtU3sSRuJFSoNq2sOnEjx360rd3n5cOo1iSuj"}]},"_npmUser":{"name":"techcoderx","email":"npmpkgs@techcoderx.com"},"directories":{},"maintainers":[{"name":"techcoderx","email":"npmpkgs@techcoderx.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/lit-ui_1.9.0-beta.1_1777797114771_0.4061820928936306"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-31T14:13:35.165Z","modified":"2026-05-03T08:31:55.042Z","1.8.0":"2025-12-31T14:13:35.428Z","1.9.0-beta.1":"2026-05-03T08:31:54.936Z"},"bugs":{"url":"https://github.com/aioha-hive/lit-ui/issues"},"author":{"name":"techcoderx"},"license":"MIT","homepage":"https://aioha.dev","keywords":["aioha","lit","hive","blockchain","authentication","web3"],"repository":{"url":"git+https://github.com/aioha-hive/lit-ui.git"},"description":"Ready-made Lit web component for Aioha","maintainers":[{"name":"techcoderx","email":"npmpkgs@techcoderx.com"}],"readme":"# Aioha Lit UI\n\nOpinionated Lit modal UI for Hive logins through Aioha, styled using [Tailwind CSS](https://tailwindcss.com). This provides a quick and easy way to bootstrap a Lit web app with ready to use Aioha-powered modal component.\n\n## Installation\n\n```sh\npnpm i @aioha/lit-ui @aioha/aioha\n```\n\n## CDN Import\n\n```html\n<script type=\"module\">\n  import { initModal } from 'https://unpkg.com/@aioha/lit-ui@latest/dist/bundle.min.js'\n</script>\n```\n\n## Usage\n\n1. Initialize Aioha and setup the provider at the root of your application. This is usually done at the entrypoint file (i.e. `index.ts` or `my-element.ts`).\n\n```ts\nimport { LitElement, html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { Aioha } from '@aioha/aioha'\nimport '@aioha/lit-ui'\n\n@customElement('my-element')\nexport class MyElement extends LitElement {\n  aioha: Aioha = new Aioha()\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // See options: https://aioha.dev/docs/core/usage#instantiation\n    this.aioha.setup()\n  }\n\n  render() {\n    return html`\n      <aioha-provider .aioha=${this.aioha}>\n        <the-rest-of-your-app></the-rest-of-your-app>\n      </aioha-provider>\n    `\n  }\n}\n```\n\n2. Use the modal component and consume the [Lit context](https://aioha.dev/docs/framework/lit#usage) anywhere within `<aioha-provider>`.\n\n```ts\nimport { UserCtx } from '@aioha/providers/lit'\nimport { KeyTypes } from '@aioha/aioha'\nimport type { LoginResult } from '@aioha/aioha/build/types.js'\nimport { consume } from '@lit/context'\nimport { LitElement, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport '@aioha/lit-ui'\n\n@customElement('home-page')\nexport class Homepage extends LitElement {\n  @consume({ context: UserCtx, subscribe: true })\n  @state()\n  private _user?: string\n\n  @state()\n  private _aiohaModalDisplayed: boolean\n\n  constructor() {\n    super()\n    this._aiohaModalDisplayed = false\n  }\n\n  private _handleButtonClick() {\n    this._aiohaModalDisplayed = true\n  }\n\n  render() {\n    return html`\n      <button type=\"button\" @click=\"${this._handleButtonClick}\">\n        ${this._user ?? 'Connect Wallet'}\n      </button>\n      <aioha-modal\n        ?displayed=\"${this._aiohaModalDisplayed}\"\n        .loginOptions=\"${{ msg: 'Hello World', keyType: KeyTypes.Posting }}\"\n        arrangement=\"grid\"\n        .onClose=\"${() => {\n          this._aiohaModalDisplayed = false\n        }}\"\n        .onLogin=\"${(result: LoginResult) => {\n          console.log(result)\n        }}\"\n      >\n      </aioha-modal>\n    `\n  }\n}\n```\n\n## `<aioha-modal>` component\n\n|Property|Description|Default|\n|-|-|-|\n|`displayed`|Boolean of whether the modal is displayed.|*false*|\n|`lightMode`|Display the modal in light mode.|*false*|\n|`loginTitle`|Login title to be displayed.|Connect Wallet|\n|`loginHelpUrl`|Help URL to be linked under provider selection view, if any.|*undefined*|\n|`loginOptions`|Aioha login options. See available configuration [here](https://aioha.dev/docs/core/usage#login).||\n|`discOptions`|Account discovery options for supported providers. Details [here](https://aioha.dev/docs/core/usage#discover-accounts).||\n|`arrangement`|Display view preference of provider selection. Valid values: `list` and `grid`.|list|\n|`onLogin`|Callback function to be called upon successful login, if any. Parameter contains login result as defined [here](https://aioha.dev/docs/core/usage#login).|\n|`onClose`|Function to be called to close the modal.||\n|`imageServer`|Image server URL for user avatar.|https://images.hive.blog|\n|`explorerUrl`|Hive block explorer URL.|https://hivehub.dev|\n|`forceShowProviders`|List of `Providers` to force show as login option, which must be registered already. Clicking on unavailable providers displayed will open the URL of the provider landing page.|*[]*|\n\nℹ️ Note: `hiveauth.cbWait` in `loginOptions` will be overriden as `AiohaModal` will handle the presentation of HiveAuth QR codes.\n\nWhen `displayed` is specified to a reactive state, use the `onClose` method to set that reactive state to `false` to properly close the modal.\n\nAll properties are optional except `loginOptions`.\n\n## Universal Web Component\n\nThe Lit modal UI can be used as a universal web component on vanilla HTML/JS or any other web framework. The full example usage may be found in [`examples/index.html`](https://github.com/aioha-hive/lit-ui/blob/main/examples/index.html).\n\n```html\n<html>\n  <body>\n    <button id=\"connectButton\" type=\"button\">Connect Wallet</button>\n    <div id=\"loginModal\"></div>\n  <body>\n  <script type=\"module\">\n    import { initAioha, KeyTypes } from '@aioha/aioha'\n    import { initModal } from '@aioha/lit-ui'\n\n    // Initialize Aioha\n    const aioha = initAioha()\n\n    // Initialize modal UI in a div\n    const modal = initModal(aioha, document.getElementById('loginModal'), {\n      loginOptions: {\n        // see available config here: https://aioha.dev/docs/core/usage#login\n      }\n    })\n\n    // Show modal on button click\n    document.getElementById('connectButton').addEventListener('click', () => (modal.displayed = true))\n  </script>\n</html>\n```","readmeFilename":"README.md"}