{"_id":"@dgithiomi/sbui-web","_rev":"6-d2da0e5976640694988c912b70b71375","name":"@dgithiomi/sbui-web","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@dgithiomi/sbui-web","version":"1.0.0","keywords":["web","UI","library"],"author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"license":"ISC","_id":"@dgithiomi/sbui-web@1.0.0","maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"homepage":"https://github.com/githiomi/sb-ui#readme","bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"dist":{"shasum":"bf550ece821053d9bd7fd909d18bb9c0b788bc6e","tarball":"https://registry.npmjs.org/@dgithiomi/sbui-web/-/sbui-web-1.0.0.tgz","fileCount":16,"integrity":"sha512-/T2gaKmVgQLwVBVOa6rQe9jl6dhNuH7nHKLQ+aXozggsf3JcK2jGJyfZB3upf0TP5eu57fI9rFbt2itoBnErbA==","signatures":[{"sig":"MEUCIApROnlpz3lqXiT8T1NMvp1jFp1gf+D5JJW3J6z+SH3rAiEAm4rVGL2Cf4T7MAYT9MtOEDyDutJ5WeumKTkDjsXQ33c=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":754056},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./tailwind-preset":{"types":"./dist/tailwind-preset.d.ts","import":"./dist/tailwind-preset.mjs","require":"./dist/tailwind-preset.cjs"}},"gitHead":"11a94e3206ff3c4ba1361cfd9102d2fcfcf32404","scripts":{"dev":"tsup --watch","test":"echo \"Error: no test specified\" && exit 1","build":"tsup","prepack":"bun run build","build:styles":"bun ./scripts/build-styles.ts"},"_npmUser":{"name":"dgithiomi","email":"dg@uniicy.com"},"repository":{"url":"git+https://github.com/githiomi/sb-ui.git","type":"git"},"_npmVersion":"11.12.1","description":"The web specific UI component library","directories":{},"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","motion":"^12.40.0","postcss":"^8.5.3","react-dom":"^19.2.6","typescript":"^6.0.3","@types/node":"^25.7.0","tailwindcss":"^3.4.17","@types/react":"^19.2.14","autoprefixer":"^10.4.21","postcss-import":"^16.1.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sbui-web_1.0.0_1779885243871_0.7375024303515623","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@dgithiomi/sbui-web","version":"1.0.2","keywords":["web","UI","library"],"author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"license":"ISC","_id":"@dgithiomi/sbui-web@1.0.2","maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"homepage":"https://github.com/githiomi/sb-ui#readme","bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"dist":{"shasum":"3d2cd0ea0aadebe5da468434aba6e17b65450dd2","tarball":"https://registry.npmjs.org/@dgithiomi/sbui-web/-/sbui-web-1.0.2.tgz","fileCount":17,"integrity":"sha512-UtnQtV0SbbcWH0tYXJ9rIA2IeM4XpVQdSO7FoGL+tAanfUjVMhEW/iw7HgQbqzBnj6WIDpa06Ja4+SeRS5BDsQ==","signatures":[{"sig":"MEYCIQCDpSS3wQZU5ODPMOXMmP+fpnnNQifQQbj3zGhbZ+VfRQIhANpQaBfeVPUO8ajXU5l8UzfEly7aDfzT0bwRVxURqw2l","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":765307},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./tailwind-preset":{"types":"./dist/tailwind-preset.d.ts","import":"./dist/tailwind-preset.mjs","require":"./dist/tailwind-preset.cjs"}},"gitHead":"bae3bb85228f11f7cee559040b92db682d667b0a","scripts":{"dev":"tsup --watch","test":"echo \"Error: no test specified\" && exit 1","build":"tsup","prepack":"bun run build","build:styles":"bun ./scripts/build-styles.ts"},"_npmUser":{"name":"dgithiomi","email":"dg@uniicy.com"},"repository":{"url":"git+https://github.com/githiomi/sb-ui.git","type":"git"},"_npmVersion":"11.12.1","description":"The web specific UI component library","directories":{},"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","motion":"^12.40.0","postcss":"^8.5.3","react-dom":"^19.2.6","typescript":"^6.0.3","@types/node":"^25.7.0","tailwindcss":"^3.4.17","@types/react":"^19.2.14","autoprefixer":"^10.4.21","postcss-import":"^16.1.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sbui-web_1.0.2_1779885615765_0.8387094600194966","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@dgithiomi/sbui-web","version":"1.0.3","keywords":["web","UI","library"],"author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"license":"ISC","_id":"@dgithiomi/sbui-web@1.0.3","maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"homepage":"https://github.com/githiomi/sb-ui#readme","bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"dist":{"shasum":"e7f9c0209a9a30a7bd0d64aae295580a64caf837","tarball":"https://registry.npmjs.org/@dgithiomi/sbui-web/-/sbui-web-1.0.3.tgz","fileCount":17,"integrity":"sha512-Afr52Owptqz7XXf4d+v46qznlAeFDxuNWOb1B6DvXN0evcppzwdFwUPXavVPHMDK+okzqt0le/e4AGFx6GPkXg==","signatures":[{"sig":"MEUCIBrE2YWvmkFGH/ivknlBs39VNTpctQXxZ23DjcfMyeheAiEAhm6iux7zEWXVxreeEcQ68Xg8m0p8m3Q7t273DVz8wXY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2956592},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./tailwind-preset":{"types":"./dist/tailwind-preset.d.ts","import":"./dist/tailwind-preset.mjs","require":"./dist/tailwind-preset.cjs"}},"gitHead":"5ad5f2a9e8298903d16b6999381d5696caac82e7","scripts":{"dev":"tsup --watch","test":"echo \"Error: no test specified\" && exit 1","build":"tsup","prepack":"bun run build","build:styles":"bun ./scripts/build-styles.ts"},"_npmUser":{"name":"dgithiomi","email":"dg@uniicy.com"},"repository":{"url":"git+https://github.com/githiomi/sb-ui.git","type":"git"},"_npmVersion":"11.12.1","description":"The web specific UI component library","directories":{},"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","motion":"^12.40.0","postcss":"^8.5.3","react-dom":"^19.2.6","typescript":"^6.0.3","@types/node":"^25.7.0","tailwindcss":"^3.4.17","@types/react":"^19.2.14","autoprefixer":"^10.4.21","postcss-import":"^16.1.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sbui-web_1.0.3_1779959699059_0.18496541750670503","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@dgithiomi/sbui-web","version":"1.0.4","keywords":["web","UI","library"],"author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"license":"ISC","_id":"@dgithiomi/sbui-web@1.0.4","maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"homepage":"https://github.com/githiomi/sb-ui#readme","bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"dist":{"shasum":"75b502db1b78ec015ada972a094fd9e88ee05fa3","tarball":"https://registry.npmjs.org/@dgithiomi/sbui-web/-/sbui-web-1.0.4.tgz","fileCount":17,"integrity":"sha512-CFTn+FpR+L6dO3+PnOvC+9viBaTKXDRtGvYLhDNkzrLOeZXRQAH33ahrPXuNNkttfjcZPBFPJJr+CSO7KNefNQ==","signatures":[{"sig":"MEYCIQCts1na6IzO/Y1niMdNpbUboBLQR304A9q06mPb1gLKIAIhAMJ5B2otxZ46OEdtJVnHigWUWVHKBrZBzZ1Gli1Am0Xr","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2957557},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./tailwind-preset":{"types":"./dist/tailwind-preset.d.ts","import":"./dist/tailwind-preset.mjs","require":"./dist/tailwind-preset.cjs"}},"gitHead":"667ca8154fd9a98794e6f91a55d9365ea2d2f576","scripts":{"dev":"tsup --watch","test":"echo \"Error: no test specified\" && exit 1","build":"tsup","prepack":"bun run build","build:styles":"bun ./scripts/build-styles.ts"},"_npmUser":{"name":"dgithiomi","email":"dg@uniicy.com"},"repository":{"url":"git+https://github.com/githiomi/sb-ui.git","type":"git"},"_npmVersion":"11.12.1","description":"The web specific UI component library","directories":{},"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","motion":"^12.40.0","postcss":"^8.5.3","react-dom":"^19.2.6","typescript":"^6.0.3","@types/node":"^25.7.0","tailwindcss":"^3.4.17","@types/react":"^19.2.14","autoprefixer":"^10.4.21","postcss-import":"^16.1.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sbui-web_1.0.4_1779961217044_0.6885541052936257","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@dgithiomi/sbui-web","version":"1.0.5","keywords":["web","UI","library"],"author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"license":"ISC","_id":"@dgithiomi/sbui-web@1.0.5","maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"homepage":"https://github.com/githiomi/sb-ui#readme","bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"dist":{"shasum":"5ec91f0778b11ff1ff2e1d06c7cefad9305de6e6","tarball":"https://registry.npmjs.org/@dgithiomi/sbui-web/-/sbui-web-1.0.5.tgz","fileCount":17,"integrity":"sha512-TDFlxzv//kQhcsnaUugbnvvIo7ne1hOlKX+vKfnQzO3zhNnrK+kNX/MsxSTJrcZsFcdaC3He+O6eujTkdR9ZbA==","signatures":[{"sig":"MEYCIQDzwAyckv4CYiBMukrNSNIfMlnBJV5QYxseBVBI2bAyuwIhAKz6qhQH9BdWUl+rNNCi9w/JOIQHMGFeA57dmKs5cRdn","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2957577},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./tailwind-preset":{"types":"./dist/tailwind-preset.d.ts","import":"./dist/tailwind-preset.mjs","require":"./dist/tailwind-preset.cjs"}},"gitHead":"25e25d00644caf1414ad30711f8f0abf12032ba0","scripts":{"dev":"tsup --watch","test":"echo \"Error: no test specified\" && exit 1","build":"tsup","prepack":"bun run build","build:styles":"bun ./scripts/build-styles.ts"},"_npmUser":{"name":"dgithiomi","email":"dg@uniicy.com"},"repository":{"url":"git+https://github.com/githiomi/sb-ui.git","type":"git"},"_npmVersion":"11.12.1","description":"The web specific UI component library","directories":{},"_nodeVersion":"25.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"bun@1.3.14","devDependencies":{"tsup":"^8.5.1","react":"^19.2.6","motion":"^12.40.0","postcss":"^8.5.3","react-dom":"^19.2.6","typescript":"^6.0.3","@types/node":"^25.7.0","tailwindcss":"^3.4.17","@types/react":"^19.2.14","autoprefixer":"^10.4.21","postcss-import":"^16.1.1","@types/react-dom":"^19.2.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/sbui-web_1.0.5_1779961654749_0.9374838404112069","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@dgithiomi/sbui-web","version":"1.0.6","description":"The web specific UI component library","keywords":["web","UI","library"],"homepage":"https://github.com/githiomi/sb-ui#readme","bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"repository":{"type":"git","url":"git+https://github.com/githiomi/sb-ui.git"},"license":"ISC","author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"type":"module","main":"dist/index.cjs","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./tailwind-preset":{"types":"./dist/tailwind-preset.d.ts","import":"./dist/tailwind-preset.mjs","require":"./dist/tailwind-preset.cjs"},"./package.json":"./package.json"},"scripts":{"dev":"tsup --watch","build":"tsup","build:styles":"bun ./scripts/build-styles.ts","prepack":"bun run build","test":"echo \"Error: no test specified\" && exit 1"},"publishConfig":{"access":"public"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"peerDependenciesMeta":{"tailwindcss":{"optional":true}},"devDependencies":{"@types/node":"^25.7.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","autoprefixer":"^10.4.21","motion":"^12.40.0","postcss":"^8.5.3","postcss-import":"^16.1.1","react":"^19.2.6","react-dom":"^19.2.6","tailwindcss":"^3.4.17","tsup":"^8.5.1","typescript":"^6.0.3"},"packageManager":"bun@1.3.14","gitHead":"f572bb869ffcc99ef512de9e02814059f3d31913","_id":"@dgithiomi/sbui-web@1.0.6","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-dEsGI2xv/6HosBfyw7NM6uhKMe/RUptlEwY6eJ9xJLzixBMoXiwRocDwGOL1lzdP/sVcGq6igypdIVSerdzWsQ==","shasum":"a6d7e8e742bca211165981e6ea6068efaddc26d1","tarball":"https://registry.npmjs.org/@dgithiomi/sbui-web/-/sbui-web-1.0.6.tgz","fileCount":17,"unpackedSize":2957889,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBc4sgcNF0wnV+qbab28if8jY+M9bLaEJwegtGHWSFDCAiAEXuB3L8GPbgOcJdDaUn641a1oJ8S3nqhIU+ureo6ZIQ=="}]},"_npmUser":{"name":"dgithiomi","email":"dg@uniicy.com"},"directories":{},"maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sbui-web_1.0.6_1779962747069_0.339825644520412"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-27T12:34:03.767Z","modified":"2026-05-28T10:05:47.710Z","1.0.0":"2026-05-27T12:34:04.039Z","1.0.2":"2026-05-27T12:40:15.914Z","1.0.3":"2026-05-28T09:14:59.263Z","1.0.4":"2026-05-28T09:40:17.196Z","1.0.5":"2026-05-28T09:47:34.939Z","1.0.6":"2026-05-28T10:05:47.231Z"},"bugs":{"url":"https://github.com/githiomi/sb-ui/issues"},"author":{"name":"danielgithiomi","email":"https://github.com/danielgithiomi"},"license":"ISC","homepage":"https://github.com/githiomi/sb-ui#readme","keywords":["web","UI","library"],"repository":{"type":"git","url":"git+https://github.com/githiomi/sb-ui.git"},"description":"The web specific UI component library","maintainers":[{"name":"dgithiomi","email":"dg@uniicy.com"}],"readme":"# SB UI — Sport Betting Component Library\n\nA **React** component library and **interactive playground** for building, previewing, and stress-testing UI used in the Uniicy sports-betting experience. The repo is a **Bun + Turborepo** monorepo: design tokens and shared utilities live in `packages/`, publishable web components live in `components/web`, and the playground in `apps/playground` is the live workbench for developers and QA.\n\n![Uniicy component playground — overview screen](https://raw.githubusercontent.com/githiomi/sb-ui/main/docs/images/playground.png)\n\n---\n\n## What’s in this repo\n\n| Area               | Path                                                                         | Role                                                                                                          |\n| ------------------ | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| **Web components** | [`components/web`](./components/web)                                         | Atomic React components (`TextArea`, `Tooltip`, …), built with **tsup**, shipped as **`@dgithiomi/sbui-web`** |\n| **Playground**     | [`apps/playground`](./apps/playground)                                       | Vite app to browse variants, API tables, and theme modes                                                      |\n| **Design tokens**  | [`packages/assets`](./packages/assets)                                       | Color primitives, themes (light/dark), shared token source                                                    |\n| **Icons**          | [`packages/icons`](./packages/icons)                                         | Shared SVG icon components (`@uniicy/icons`)                                                                  |\n| **Utilities**      | [`packages/libs`](./packages/libs)                                           | Shared helpers (e.g. `cn()` via `classnames` + `tailwind-merge`)                                              |\n| **Core**           | [`packages/core`](./packages/core)                                           | Shared hooks and utilities for apps in the monorepo                                                           |\n| **Consumer docs**  | [`docs/consumer-integration-guide.md`](./docs/consumer-integration-guide.md) | Full guide for teams integrating the library in React or Next.js                                              |\n\n---\n\n## Features\n\n- **Atomic design** — Components organized as atoms (molecules/organisms planned as the library grows).\n- **Token-driven theming** — Colors from `@uniicy/assets` become CSS variables and Tailwind utilities (`text-fg`, `bg-surface`, `border-outline`, …).\n- **Light & dark** — Theme variables follow `prefers-color-scheme` and a `.dark` class for manual toggling.\n- **Shipped stylesheet** — One import (`@dgithiomi/sbui-web/styles.css`) gives consumers tokens, Tailwind utilities, and component CSS (e.g. tooltip animations).\n- **TypeScript-first** — Props documented in `.types.ts` files; declarations published in `dist/`.\n- **Interactive playground** — Sidebar navigation, variant sections, props tables, and status badges for each component.\n\n---\n\n## Repository structure\n\n```\nsb-component-library/\n├── apps/\n│   └── playground/          # Vite + React docs / demo app\n├── components/\n│   └── web/                 # @dgithiomi/sbui-web — publishable component library\n│       ├── src/atoms/       # TextArea, Tooltip, …\n│       ├── scripts/         # build-styles.ts (Tailwind → dist/styles.css)\n│       └── dist/            # Built JS + styles.css (after build)\n├── packages/\n│   ├── assets/              # Design tokens (colors, themes)\n│   ├── icons/               # @uniicy/icons\n│   ├── libs/                # @uniicy/libs (cn, etc.)\n│   └── core/                # Shared hooks\n├── docs/\n│   ├── consumer-integration-guide.md\n│   └── images/              # README & doc assets\n├── turbo.json\n└── package.json\n```\n\n---\n\n## Components (web)\n\n| Component    | Status | Description                                                                                   |\n| ------------ | ------ | --------------------------------------------------------------------------------------------- |\n| **TextArea** | Stable | Controlled multi-line input with status, character count, clear, addons, and optional tooltip |\n| **Tooltip**  | Stable | Accessible overlay with placement, triggers, variants, and animations                         |\n\nMore atoms will appear in the playground sidebar as they are added.\n\n---\n\n## Prerequisites\n\n- **[Bun](https://bun.sh)** `1.3+` (package manager for this monorepo — use `bun install`, not `npm install`, because of `workspace:*` dependencies)\n- **Node.js** 20+ (for tooling compatibility)\n\n---\n\n## Getting started (contributors & testers)\n\n### 1. Clone and install\n\n```bash\ngit clone https://github.com/githiomi/sb-ui.git\ncd sb-component-library   # or your local folder name\nbun install\n```\n\n### 2. Run the playground and library in dev mode\n\nFrom the **repository root**:\n\n```bash\nbun run dev\n```\n\nThis uses **Turborepo** to:\n\n1. Build workspace dependencies (`@dgithiomi/sbui-web`, icons, etc.)\n2. Start **`@dgithiomi/sbui-web`** in watch mode (`tsup --watch`)\n3. Start the **playground** Vite dev server\n\nOpen the URL Vite prints (typically `http://localhost:5173`). Use the sidebar to open **TextArea** (and other components as they are added), try variants, and read the API reference at the bottom of each page.\n\n### 3. Build everything\n\n```bash\nbun run build\n```\n\n### 4. Build only the component library\n\n```bash\ncd components/web\nbun run build          # JS + types (styles rebuilt via tsup onSuccess)\nbun run build:styles   # stylesheet only, when needed\n```\n\n---\n\n## How the web library is built\n\nUnderstanding this helps when debugging styling or publishing.\n\n1. **JavaScript** — [`components/web/tsup.config.ts`](./components/web/tsup.config.ts) bundles `index.ts` to `dist/index.mjs` / `.cjs` and generates `dist/index.d.ts`.\n2. **Styles** — [`components/web/scripts/build-styles.ts`](./components/web/scripts/build-styles.ts):\n    - Prepends auto-generated **CSS variables** (light/dark) from tokens\n    - Processes [`src/styles.css`](./components/web/src/styles.css) with PostCSS (`postcss-import`, Tailwind, Autoprefixer)\n    - Inlines per-component CSS (e.g. [`Tooltip.css`](./components/web/src/atoms/Tooltip/Tooltip.css))\n    - Writes **`dist/styles.css`**\n3. **Watch** — `tsup --watch` runs `build-styles` on success so `dist/styles.css` is not left missing after a clean rebuild.\n\n**Adding component CSS:** create `src/atoms/<Component>/<Component>.css` and add `@import \"./atoms/<Component>/<Component>.css\";` in `src/styles.css`.\n\n---\n\n## Using the library in your app (consumers)\n\nThe published npm package name is **`@dgithiomi/sbui-web`** (configurable before publish). Consumers need:\n\n1. **Install** the package and React peers\n2. **Import the stylesheet once** at the app root\n3. **Import components** from `\"@dgithiomi/sbui-web\"`\n4. **(Optional)** Add `@dgithiomi/sbui-web/tailwind-preset` if their app uses the same Tailwind tokens\n\n### Quick start\n\n```bash\nbun add @dgithiomi/sbui-web react react-dom\n# or: npm install @dgithiomi/sbui-web react react-dom\n```\n\n```tsx\n// main.tsx or app/layout.tsx — import once\nimport \"@dgithiomi/sbui-web/styles.css\";\n\n// Your component file\nimport { TextArea } from \"@dgithiomi/sbui-web\";\nimport { useState } from \"react\";\n\nexport function Notes() {\n    const [value, setValue] = useState(\"\");\n    return (\n        <TextArea\n            id=\"notes\"\n            value={value}\n            onChange={setValue}\n            placeholder=\"Add a note…\"\n        />\n    );\n}\n```\n\n**Next.js (App Router):** put interactive usage in a `\"use client\"` file and import `@dgithiomi/sbui-web/styles.css` in `app/layout.tsx`.\n\nFor **React + Vite**, **Next.js Pages/App Router**, Tailwind preset setup, dark mode, troubleshooting, and a pre-publish checklist, see:\n\n**[docs/consumer-integration-guide.md](./docs/consumer-integration-guide.md)**\n\n---\n\n## Global provider usage (recommended)\n\n`SbuiProvider` is the single top-level wrapper for library features that require React context (Toast now, more features later).\n\n### Why `enableToastProvider` exists\n\n- `enableToastProvider` is an **optional boolean prop** on `SbuiProvider`.\n- Default is `true`, so Toast context is mounted automatically.\n- You only set `enableToastProvider={false}` for advanced cases (for example:\n  tests, custom host-level toast system, or temporarily disabling Toast behavior).\n- In normal consumer apps, you should **not** set it; keep default behavior.\n\n### One-wrapper setup\n\n```tsx\n// main.tsx / app root\nimport { SbuiProvider } from \"@dgithiomi/sbui-web\";\nimport \"@dgithiomi/sbui-web/styles.css\";\n\nexport function Root() {\n    return (\n        <SbuiProvider>\n            <App />\n        </SbuiProvider>\n    );\n}\n```\n\n### Triggering Toast from components\n\n```tsx\nimport { useToast } from \"@dgithiomi/sbui-web\";\n\nexport function SaveButton() {\n    const { showToast } = useToast();\n\n    return (\n        <button\n            onClick={() =>\n                showToast({\n                    variant: \"success\",\n                    title: \"Saved\",\n                    message: \"Your changes were saved.\",\n                    duration: \"short\",\n                })\n            }\n        >\n            Save\n        </button>\n    );\n}\n```\n\nIf `enableToastProvider={false}`, `useToast()` will throw unless you provide `ToastProvider` yourself.\n\n---\n\n## Package exports (`@dgithiomi/sbui-web`)\n\n| Import                                | Description                         |\n| ------------------------------------- | ----------------------------------- |\n| `@dgithiomi/sbui-web`                 | React components + TypeScript types |\n| `@dgithiomi/sbui-web/styles.css`      | Global stylesheet (required)        |\n| `@dgithiomi/sbui-web/tailwind-preset` | Tailwind v3 preset for host apps    |\n\n**Peer dependencies:** `react`, `react-dom` (^19). `tailwindcss` (^3.4) is optional if the host app uses the preset.\n\n---\n\n## Playground\n\nThe playground ([`apps/playground`](./apps/playground)) is **not** published to npm. It exists to:\n\n- Preview every variant of each component in isolation\n- Document props via shared tables ([`PropsTable`](./apps/playground/src/layouts/shared/PropsTable.tsx))\n- Validate light/dark theming and design tokens end-to-end\n- Give QA a stable URL to regression-test UI before release\n\nTo run only the playground (after a root install and build):\n\n```bash\ncd apps/playground\nbun run dev\n```\n\n---\n\n## Theming & tokens\n\n- **Source of truth:** [`packages/assets/colors.ts`](./packages/assets/colors.ts)\n- **Tailwind mapping:** [`components/web/tailwind-theme.ts`](./components/web/tailwind-theme.ts)\n- **Semantic utilities:** `text-fg`, `text-link`, `bg-surface`, `bg-canvas`, `border-outline`, etc.\n- **Primitives:** `primary`, `accent`, `success`, `error`, `warning`, `neutral` (with shades)\n\nPrefer semantic classes in components so light/dark switches without changing JSX.\n\n---\n\n## Scripts (root)\n\n| Command         | Description                                    |\n| --------------- | ---------------------------------------------- |\n| `bun run dev`   | Start library watch + playground (Turbo)       |\n| `bun run build` | Build all packages and apps                    |\n| `bun run test`  | Placeholder — add tests as the library matures |\n\n---\n\n## Publishing (maintainers)\n\nBefore publishing `@dgithiomi/sbui-web` to npm:\n\n1. Run `bun run build` in `components/web` and verify `dist/` includes JS, types, and `styles.css`.\n2. Confirm the package tarball has no `workspace:*` dependencies with `npm pack --dry-run`.\n3. Publish from `components/web` using `npm publish --access public`.\n4. Install `@dgithiomi/sbui-web` in a separate React/Next.js app and import `@dgithiomi/sbui-web/styles.css` once.\n\nSee the **Before publishing** section in [docs/consumer-integration-guide.md](./docs/consumer-integration-guide.md).\n\n---\n\n## Roadmap\n\n- Additional atoms, molecules, and organisms\n- Native component package (`components/native`)\n- Storybook or visual regression tests\n- Automated npm publish workflow\n\n---\n\n## License\n\n**ISC** — see [package.json](./package.json) for author and repository links.\n\n---\n\n## Links\n\n- **Repository:** [github.com/githiomi/sb-ui](https://github.com/githiomi/sb-ui)\n- **Issues:** [github.com/githiomi/sb-ui/issues](https://github.com/githiomi/sb-ui/issues)\n- **Integration guide:** [docs/consumer-integration-guide.md](./docs/consumer-integration-guide.md)\n","readmeFilename":"README.md"}