{"_id":"@alphscan/sdk-react-ui","name":"@alphscan/sdk-react-ui","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.0":{"name":"@alphscan/sdk-react-ui","version":"0.0.0","private":false,"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsc && tailwindcss -i ./src/styles.css -o ./dist/styles.css -m","clean":"rm -rf dist","deploy":"npm run build && npm publish  --access public"},"dependencies":{"@alphscan/sdk":"file:./vendor/sdk","@alphscan/sdk-react":"file:./vendor/sdk-react"},"peerDependencies":{"react":">=18.0.0"},"devDependencies":{"@types/react":"^18.3.12","autoprefixer":"^10.4.20","postcss":"^8.4.49","react":"^18.3.1","tailwindcss":"^3.4.15","typescript":"^5.7.2"},"_id":"@alphscan/sdk-react-ui@0.0.0","gitHead":"fa7145d5db5f1af6ab929be4c4fc55b56134a182","description":"React UI components for Alphscan, built with **Tailwind CSS**. Includes overridable display components for normalized events.","_nodeVersion":"20.20.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-IPHzoKfo9wrQUGekhinDkf+lEZI1cou7t9GlNwzsPZmWuWKL8LKqCUSV0T3zr0PXDmpkZz2XepUeC5TykYjfRw==","shasum":"91db069157c726713291ee0bd8606fe431cbb48e","tarball":"https://registry.npmjs.org/@alphscan/sdk-react-ui/-/sdk-react-ui-0.0.0.tgz","fileCount":180,"unpackedSize":215074,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDGOjtAjOi1u+m29MNcQ3o836o935ME9+hj4raAAUninQIgATaJZFAlaD44leeaGfd2R/1JKqRu+LNlg3tqv35H+wU="}]},"_npmUser":{"name":"minijudie","email":"minijudie@imsorry.dev"},"directories":{},"maintainers":[{"name":"minijudie","email":"minijudie@imsorry.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sdk-react-ui_0.0.0_1772867146747_0.4047732983231216"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-07T07:05:46.531Z","0.0.0":"2026-03-07T07:05:46.907Z","modified":"2026-03-07T07:05:47.253Z"},"maintainers":[{"name":"minijudie","email":"minijudie@imsorry.dev"}],"description":"React UI components for Alphscan, built with **Tailwind CSS**. Includes overridable display components for normalized events.","readme":"# @alphscan/sdk-react-ui\n\nReact UI components for Alphscan, built with **Tailwind CSS**. Includes overridable display components for normalized events.\n\n## Install\n\nIn your app (from the monorepo):\n\n```bash\npnpm add @alphscan/sdk-react-ui\n```\n\nEnsure `@alphscan/normalized-events` and `react` are available (peer/dep).\n\n## Styles\n\nImport the built Tailwind CSS once in your app (e.g. in `main.tsx` or `_app.tsx`):\n\n```ts\nimport \"@alphscan/sdk-react-ui/styles.css\";\n```\n\n## Normalized events display\n\n### Default list\n\n```tsx\nimport { NormalizedEventsList } from \"@alphscan/sdk-react-ui\";\nimport type { NormalizedEvent } from \"@alphscan/normalized-events\";\n\nconst events: NormalizedEvent[] = [...];\n\n<NormalizedEventsList\n  events={events}\n  eventRowProps={{ explorerUrl: \"https://explorer.alephium.org\" }}\n  emptyMessage=\"No events for this transaction\"\n/>\n```\n\n### Override with custom row component\n\n```tsx\nimport { NormalizedEventsList } from \"@alphscan/sdk-react-ui\";\n\nfunction MyEventRow({ event, index }: { event: NormalizedEvent; index: number }) {\n  return <div key={event.id}>Custom: {event.category}</div>;\n}\n\n<NormalizedEventsList events={events} EventRowComponent={MyEventRow} />\n```\n\n### Override with render prop\n\n```tsx\n<NormalizedEventsList\n  events={events}\n  renderEvent={(event, index) => (\n    <article key={event.id}>{/* custom markup */}</article>\n  )}\n/>\n```\n\n### Style the default row\n\nUse `eventRowProps` to pass `className`, `badgeClassName`, `contentClassName`, `explorerUrl`, `amountDecimals` to the default `NormalizedEventRow`:\n\n```tsx\n<NormalizedEventsList\n  events={events}\n  eventRowProps={{\n    className: \"my-4 border-2\",\n    badgeClassName: \"bg-blue-100\",\n    explorerUrl: \"https://explorer.alephium.org\",\n    amountDecimals: 6,\n  }}\n/>\n```\n\n### Single event row\n\n```tsx\nimport { NormalizedEventRow } from \"@alphscan/sdk-react-ui\";\n\n<NormalizedEventRow\n  event={event}\n  explorerUrl=\"https://explorer.alephium.org\"\n  className=\"rounded-xl\"\n/>\n```\n\n## Overridable API summary\n\n| Prop | Description |\n|------|-------------|\n| `renderEvent(event, index)` | Custom ReactNode for each event (replaces default row). |\n| `EventRowComponent` | Component `{ event, index }` used for each event (replaces default row). |\n| `eventRowProps` | Props passed to the default `NormalizedEventRow` (className, explorerUrl, etc.). |\n| `className` / `listClassName` | Container and list wrapper classes. |\n| `emptyMessage` | Shown when `events.length === 0`. |\n","readmeFilename":"README.md","_rev":"1-be9b2b85733184a57b2e7e9f424dc6b7"}