@waveinno/ui 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -6,6 +6,23 @@ prop, major = a renamed or removed export or prop.
 
 ## Unreleased
 
+## 0.9.0 — 2026-10-03
+
+- **`npx @waveinno/ui init`**: one-command setup.
+  - It asks whether you build with Next.js or React + Vite, the currency (taka by default in Bangladesh) and the
+    package manager. It can create the app with the official starter.
+  - It shows the plan before changing anything, then installs the package and Tailwind CSS 4 and writes the
+    stylesheet, fonts, providers and theme script.
+  - Starter files are replaced and kept as `.bak`; your own files are left alone, with a note. It also warns when
+    your CSS reuses a token name (`--text`, `--border`…).
+  - `npx @waveinno/ui doctor` checks a setup. `--yes` and flags for CI.
+- **Wavi**: the design system has a name and a mark. The docs site has a new home page, a "Powered by WAVEINNO" footer,
+  and search and AI-friendly metadata: sitemap, robots.txt, llms.txt, Open Graph image, and structured data
+  (SoftwareApplication, Organization, FAQPage).
+- **Templates** download as Next.js **or React + Vite** (React Router, a page per route, loaded on demand).
+- PhoneInput and NidInput adapt to their width: in a narrow column the operator or ID-kind label shrinks to its tick,
+  so the number keeps its room.
+
 ## 0.8.0 — 2026-10-03
 
 - **Bangladesh kit** (new, free):

package/LICENSE

@@ -25,4 +25,4 @@ SOFTWARE.
 This licence covers the @waveinno/ui package: everything published to npm,
 and the free blocks in playground/blocks/free. The Pro blocks and templates
 (playground/blocks/pro) are not covered; they are licensed separately under
-the WAVEINNO UI Pro Licence in playground/blocks/pro/LICENSE.md.
+the Wavi Pro Licence in playground/blocks/pro/LICENSE.md.

package/README.md

@@ -1,13 +1,25 @@
-# @waveinno/ui
+# Wavi — @waveinno/ui
 
-The WAVEINNO design system for React and Next.js: tokens, an application shell, primitives, patterns, charts and
-the brand, in light and dark, in English and Bangla. Shipped as compiled JavaScript with type definitions.
+**Wavi** is the React design system from Bangladesh, made by WAVEINNO: 100+ components, an application shell, charts
+and Bangladesh-ready inputs (bKash, taka, +880, Bangla dates), styled with Tailwind CSS 4 tokens, in light and dark, in
+English and Bangla. For Next.js and Vite. Shipped as compiled JavaScript with type definitions.
+
+## Set up in one command
 
 ```bash
-npm install @waveinno/ui
+npx @waveinno/ui init
 ```
 
-## Set up
+Run it in your app (or in an empty folder to create one). It asks whether you build with **Next.js** or **React +
+Vite**, your currency and package manager, shows every change it will make, then installs the package and Tailwind
+CSS 4 and writes the stylesheet, fonts, providers and theme script. It never overwrites your own files.
+`npx @waveinno/ui doctor` checks a setup. In CI: `npx @waveinno/ui init --yes --framework next --currency BDT`.
+
+## Set up by hand
+
+```bash
+npm install @waveinno/ui
+```
 
 Full guides, with every file: run the docs (`npm run dev`, then http://localhost:4500/docs) and open **Installation →
 Next.js** or **Vite**. In short:

package/bin/starter-files.d.mts

@@ -0,0 +1,8 @@
+export declare const NEXT_GLOBALS_CSS: string;
+export declare const NEXT_PROVIDERS: string;
+export declare const NEXT_LAYOUT: string;
+export declare const VITE_CONFIG: string;
+export declare const VITE_CSS: string;
+export declare const VITE_MAIN: string;
+export declare const FONTS_HREF: string;
+export declare const VITE_ROUTER: string;

package/bin/starter-files.mjs

@@ -0,0 +1,136 @@
+/**
+ * The files every app on WAVEINNO UI starts with, in one place: `npx @waveinno/ui init`
+ * writes them, the installation guides show them, the template downloads ship them.
+ */
+
+/** app/globals.css of a Next.js app. Its @source is relative to app/; init adjusts it for src/app/. */
+export const NEXT_GLOBALS_CSS = `@import "tailwindcss";
+@import "@waveinno/ui/styles.css";
+
+/* Tailwind only generates classes it can see. Point it at the package,
+   relative to this file: "../node_modules" for app/globals.css,
+   "../../node_modules" for src/app/globals.css. */
+@source "../node_modules/@waveinno/ui/dist";
+
+/* The fonts loaded in layout.tsx, in the package's font slots.
+   Noto Sans Bengali carries Bangla and the Taka sign (৳), which Inter lacks. */
+:root {
+  --font-inter: var(--font-body), var(--font-bangla);
+  --font-jakarta: var(--font-display), var(--font-bangla);
+  --font-jetbrains: var(--font-code);
+}`;
+
+/** app/providers.tsx */
+export const NEXT_PROVIDERS = `"use client";
+
+import { Toaster, TooltipProvider } from "@waveinno/ui";
+import { NextRouterProvider } from "@waveinno/ui/next";
+
+/** Once, around the whole app: Next.js routing for the package, tooltips, toasts. */
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <NextRouterProvider>
+      <TooltipProvider delayDuration={300}>
+        {children}
+        <Toaster />
+      </TooltipProvider>
+    </NextRouterProvider>
+  );
+}`;
+
+/** app/layout.tsx */
+export const NEXT_LAYOUT = `import type { Metadata } from "next";
+import { Inter, JetBrains_Mono, Noto_Sans_Bengali, Plus_Jakarta_Sans } from "next/font/google";
+
+import { themeBootScript } from "@waveinno/ui";
+
+import "./globals.css";
+import { Providers } from "./providers";
+
+const body = Inter({ subsets: ["latin"], variable: "--font-body" });
+const display = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["500", "600", "700"], variable: "--font-display" });
+const code = JetBrains_Mono({ subsets: ["latin"], variable: "--font-code" });
+const bangla = Noto_Sans_Bengali({ subsets: ["bengali"], variable: "--font-bangla" });
+
+export const metadata: Metadata = { title: "My app" };
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    // The boot script sets data-theme before React runs, so the attribute
+    // differs from the server's HTML on purpose.
+    <html lang="en" suppressHydrationWarning className={[body.variable, display.variable, code.variable, bangla.variable].join(" ")}>
+      <head>
+        {/* Applies the saved light/dark theme and density before first paint: no flash. */}
+        <script dangerouslySetInnerHTML={{ __html: themeBootScript() }} />
+      </head>
+      <body className="bg-canvas text-body antialiased">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}`;
+
+/** vite.config.ts */
+export const VITE_CONFIG = `import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});`;
+
+/** src/index.css of a Vite app. */
+export const VITE_CSS = `@import "tailwindcss";
+@import "@waveinno/ui/styles.css";
+
+/* Tailwind only generates classes it can see: point it at the package. */
+@source "../node_modules/@waveinno/ui/dist";
+
+/* Noto Sans Bengali after each family: it carries Bangla and the Taka sign (৳). */
+:root {
+  --font-inter: "Inter", "Noto Sans Bengali";
+  --font-jakarta: "Plus Jakarta Sans", "Noto Sans Bengali";
+  --font-jetbrains: "JetBrains Mono";
+}`;
+
+/** src/main.tsx */
+export const VITE_MAIN = `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Toaster, TooltipProvider } from "@waveinno/ui";
+
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <TooltipProvider delayDuration={300}>
+      <App />
+      <Toaster />
+    </TooltipProvider>
+  </StrictMode>,
+);`;
+
+/** src/ui-router.tsx: the package's links and navigation through React Router. */
+export const VITE_ROUTER = `import { Link, useLocation, useNavigate } from "react-router";
+
+import { RouterProvider, type RouterAdapter } from "@waveinno/ui";
+
+// Tell the package to link and navigate through React Router.
+const reactRouter: RouterAdapter = {
+  Link: ({ href, ...props }) => <Link to={href} {...props} />,
+  usePathname: () => useLocation().pathname,
+  useNavigate: () => {
+    const navigate = useNavigate();
+    return (href) => navigate(href);
+  },
+};
+
+// Inside <BrowserRouter> (or your data router's root route):
+export function UiRouter({ children }: { children: React.ReactNode }) {
+  return <RouterProvider adapter={reactRouter}>{children}</RouterProvider>;
+}`;
+
+/** The four families both setups load, for a plain HTML page. */
+export const FONTS_HREF =
+  "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap";

package/bin/waveinno-ui.mjs

@@ -0,0 +1,466 @@
+#!/usr/bin/env node
+/**
+ * npx @waveinno/ui init     set up WAVEINNO UI in a Next.js or React (Vite) app
+ * npx @waveinno/ui doctor   check a setup and say what is missing
+ *
+ * init asks what you are building (Next.js or React + Vite), creates the app
+ * if there is none, asks the currency and the package manager, shows every
+ * change it will make, and only then makes them: the package and Tailwind's
+ * plugin, the CSS, the providers, the layout or entry, exactly as the
+ * installation guides show.
+ *
+ * It never overwrites your own code: a file is replaced only while it is still
+ * the starter's default (create-next-app, create-vite), and then the old one is
+ * kept as <file>.bak. Anything else is left alone and you get the line to add.
+ *
+ * --yes takes the defaults without asking (for scripts and CI); every question
+ * also has a flag: --framework next|vite, --currency BDT, --pm npm|pnpm|yarn|bun,
+ * --name my-app. --dry-run shows the plan and stops. --skip-install, --cwd <dir>.
+ */
+import { spawnSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import readline from "node:readline";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+import { FONTS_HREF, NEXT_GLOBALS_CSS, NEXT_LAYOUT, NEXT_PROVIDERS, VITE_CONFIG, VITE_CSS } from "./starter-files.mjs";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const PKG = JSON.parse(fs.readFileSync(path.join(HERE, "..", "package.json"), "utf8"));
+const DOCS = "https://www.npmjs.com/package/@waveinno/ui";
+
+/* ── output ─────────────────────────────────────────────────────────────── */
+
+const color = process.stdout.isTTY && !process.env.NO_COLOR;
+const c = (code) => (s) => (color ? `\x1b[${code}m${s}\x1b[0m` : String(s));
+const bold = c(1);
+const dim = c(2);
+const green = c(32);
+const yellow = c(33);
+const red = c(31);
+const blue = c(34);
+const cyan = c(36);
+const magenta = c(35);
+const say = (s = "") => console.log(s);
+const done = (s) => say(`  ${green("✓")} ${s}`);
+const skip = (s) => say(`  ${dim("·")} ${dim(s)}`);
+const warn = (s) => say(`  ${yellow("!")} ${s}`);
+const heading = (s) => say(`\n  ${bold(s)}`);
+const fail = (s) => {
+  say(`\n  ${red("✗")} ${s}\n`);
+  process.exit(1);
+};
+
+/* ── args ───────────────────────────────────────────────────────────────── */
+
+const argv = process.argv.slice(2);
+const flag = (name) => argv.includes(`--${name}`);
+const opt = (name) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 ? argv[i + 1] : undefined;
+};
+// The first word that is neither a flag nor the value of a flag that takes one.
+const VALUED = new Set(["--cwd", "--pm", "--currency", "--framework", "--name"]);
+const command = argv.find((a, i) => !a.startsWith("-") && !VALUED.has(argv[i - 1] ?? "")) ?? "help";
+const interactive = process.stdin.isTTY && process.stdout.isTTY && !flag("yes");
+let cwd = path.resolve(opt("cwd") ?? process.cwd());
+/** While planning, nothing is written or installed; the same steps print what they would do. */
+let dry = true;
+
+/* ── prompts (no dependencies: readline in raw mode) ────────────────────── */
+
+/** An arrow-key list. Returns the chosen value. */
+function select(question, choices, initial = 0) {
+  return new Promise((resolve) => {
+    const out = process.stdout;
+    const inp = process.stdin;
+    let i = Math.max(0, initial);
+    const n = choices.length;
+    const line = (ch, on) => `\x1b[2K    ${on ? cyan("❯") : " "} ${on ? bold(ch.label) : ch.label}${ch.hint ? `  ${dim(ch.hint)}` : ""}`;
+    out.write(`\n  ${green("?")} ${bold(question)}  ${dim("↑ ↓ to move, Enter to choose")}\n`);
+    out.write(`${choices.map((ch, k) => line(ch, k === i)).join("\n")}\n`);
+    out.write("\x1b[?25l");
+    readline.emitKeypressEvents(inp);
+    inp.setRawMode(true);
+    inp.resume();
+    const onKey = (_, key = {}) => {
+      if (key.ctrl && key.name === "c") {
+        inp.setRawMode(false);
+        out.write("\x1b[?25h\n");
+        process.exit(130);
+      }
+      if (key.name === "up" || key.name === "k") i = (i - 1 + n) % n;
+      else if (key.name === "down" || key.name === "j" || key.name === "tab") i = (i + 1) % n;
+      else if (key.name === "return") {
+        inp.off("keypress", onKey);
+        inp.setRawMode(false);
+        inp.pause();
+        // Fold the list into one answered line.
+        out.write(`\x1b[${n + 1}A\x1b[0J  ${green("✔")} ${bold(question)}  ${cyan(choices[i].label)}\n\x1b[?25h`);
+        resolve(choices[i].value);
+        return;
+      } else return;
+      out.write(`\x1b[${n}A${choices.map((ch, k) => line(ch, k === i)).join("\n")}\n`);
+    };
+    inp.on("keypress", onKey);
+  });
+}
+
+/** A line of text, with a default. */
+function ask(question, fallback) {
+  return new Promise((resolve) => {
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    rl.question(`\n  ${green("?")} ${bold(question)} ${dim(`(${fallback})`)} `, (a) => {
+      rl.close();
+      resolve(a.trim() || fallback);
+    });
+  });
+}
+
+/* ── the project ────────────────────────────────────────────────────────── */
+
+const rel = (p) => path.relative(cwd, p).split(path.sep).join("/");
+const exists = (p) => fs.existsSync(path.join(cwd, p));
+const read = (p) => fs.readFileSync(path.join(cwd, p), "utf8");
+const first = (...ps) => ps.find(exists);
+
+function write(p, content, why = "wrote", note = "") {
+  if (dry) return say(`  ${blue("+")} ${why} ${bold(p)} ${dim(note)}`);
+  fs.mkdirSync(path.dirname(path.join(cwd, p)), { recursive: true });
+  fs.writeFileSync(path.join(cwd, p), content);
+  done(`${why} ${bold(p)} ${dim(note)}`);
+}
+
+/** Replace a starter file, keeping the old one as .bak. */
+function replace(p, content, why) {
+  if (!dry) fs.copyFileSync(path.join(cwd, p), path.join(cwd, `${p}.bak`));
+  write(p, content, why, `(the old one is kept as ${p}.bak)`);
+}
+
+const readPackage = () => (exists("package.json") ? JSON.parse(read("package.json")) : null);
+const deps = (pkg) => ({ ...pkg?.dependencies, ...pkg?.devDependencies });
+const detect = (pkg) => (deps(pkg).next ? "next" : deps(pkg).vite ? "vite" : null);
+
+function lockfilePm() {
+  if (exists("pnpm-lock.yaml")) return "pnpm";
+  if (exists("yarn.lock")) return "yarn";
+  if (exists("bun.lockb") || exists("bun.lock")) return "bun";
+  if (exists("package-lock.json")) return "npm";
+  const agent = process.env.npm_config_user_agent ?? "";
+  for (const m of ["pnpm", "yarn", "bun"]) if (agent.startsWith(m)) return m;
+  return null;
+}
+
+function run(cmd, args, where = cwd) {
+  say(dim(`  $ ${cmd} ${args.join(" ")}`));
+  // On Windows npm is a .cmd, which only runs through a shell; the arguments are names and flags, so one string is safe.
+  const r = process.platform === "win32" ? spawnSync(`${cmd} ${args.join(" ")}`, { cwd: where, stdio: "inherit", shell: true }) : spawnSync(cmd, args, { cwd: where, stdio: "inherit" });
+  return r.status === 0;
+}
+
+function install(pm, pkgs, dev) {
+  if (!pkgs.length) return;
+  const args = [pm === "npm" ? "install" : "add", ...(dev ? [pm === "bun" ? "-d" : "-D"] : []), ...pkgs];
+  if (dry) return say(`  ${blue("+")} install ${bold(pkgs.join(", "))}${dev ? dim(" (dev)") : ""}`);
+  if (flag("skip-install")) return warn(`Run yourself: ${bold(`${pm} ${args.join(" ")}`)}`);
+  if (!run(pm, args)) fail(`${pm} ${args.join(" ")} failed. Run it yourself, then run init again.`);
+  done(`installed ${pkgs.join(", ")}`);
+}
+
+/** The @source line, relative to the CSS file. */
+function sourceLine(cssFile) {
+  const from = path.dirname(path.join(cwd, cssFile));
+  const to = path.join(cwd, "node_modules", "@waveinno", "ui", "dist");
+  return `@source "${path.relative(from, to).split(path.sep).join("/")}";`;
+}
+const withSource = (css, cssFile) => css.replace(/@source "[^"]+";/, sourceLine(cssFile));
+
+/** Add the currency line after the imports of a providers or entry file. */
+function withCurrency(src, currency, importLine) {
+  if (!currency) return src;
+  const lines = src.split("\n");
+  let last = -1;
+  lines.forEach((l, k) => /^import /.test(l) && (last = k));
+  lines.splice(last + 1, 0, "", `// Amounts show in ${currency}. Use another ISO code, or remove this line to follow the app shell.`, `useSettings.setState({ overrideCode: "${currency}" });`);
+  return lines.join("\n").replace(importLine, importLine.replace("TooltipProvider }", "TooltipProvider, useSettings }"));
+}
+
+/* ── the steps (the same code plans and applies) ────────────────────────── */
+
+function setupCss(file, starter, create) {
+  if (!file) return write(create, `${withSource(starter, create)}\n`, "write", "(there was no global stylesheet)");
+  const css = read(file);
+  if (css.includes("@waveinno/ui/styles.css")) {
+    if (!css.includes("@source")) warn(`${file} imports the styles but has no @source line; add: ${sourceLine(file)}`);
+    return skip(`${file} already imports @waveinno/ui`);
+  }
+  // A starter stylesheet (create-next-app, create-vite, old and new) sets fonts, colours and body
+  // layout that would fight the design system; the newer Vite one even reuses token names.
+  const STARTER = /Arial, Helvetica|--font-geist|#646cff|#aa3bff|--text-h:|--social-bg|place-items: center|^\s*@import "tailwindcss";\s*$/m;
+  const isStarter = STARTER.test(css) && css.length < 8000;
+  const next = withSource(starter, file);
+  if (isStarter || !css.trim()) return replace(file, `${next}\n`, "set up");
+  write(file, `${next}\n\n/* ── Your styles ── */\n${css.replace(/^@import ["']tailwindcss["'];\s*/m, "")}`, "add WAVEINNO UI to the top of");
+  // Your own variables with a token's name would recolour every component.
+  const clash = [...new Set([...css.matchAll(/(--(?:text|body|muted|border2?|primary|surface|canvas|raised|hover|accent|ink|brand-[12]|success|warning|danger|info)):/g)].map((m) => m[1]))];
+  if (clash.length) warn(`${file} sets ${clash.join(", ")}: the same names as WAVEINNO UI's tokens, so components change colour. Rename yours.`);
+}
+
+function stepsNext(pm, currency) {
+  const appDir = exists("src/app") ? "src/app" : exists("app") ? "app" : null;
+  if (!appDir) fail("This Next.js app has no app/ directory. WAVEINNO UI's setup is for the App Router.");
+  const d = deps(readPackage());
+
+  heading("Packages");
+  if (d["@waveinno/ui"]) skip(`@waveinno/ui ${d["@waveinno/ui"]} is installed`);
+  install(pm, d["@waveinno/ui"] ? [] : [`@waveinno/ui@^${PKG.version}`], false);
+  install(pm, ["tailwindcss", "@tailwindcss/postcss"].filter((x) => !d[x]), true);
+
+  heading("PostCSS");
+  const postcss = first("postcss.config.mjs", "postcss.config.js", "postcss.config.cjs", "postcss.config.ts");
+  if (!postcss) write("postcss.config.mjs", `export default { plugins: { "@tailwindcss/postcss": {} } };\n`, "write");
+  else if (read(postcss).includes("@tailwindcss/postcss")) skip(`${postcss} loads Tailwind`);
+  else warn(`${postcss} does not load Tailwind 4. Add: plugins: { "@tailwindcss/postcss": {} }`);
+
+  heading("CSS");
+  setupCss(first(`${appDir}/globals.css`, `${appDir}/global.css`), NEXT_GLOBALS_CSS, `${appDir}/globals.css`);
+
+  heading("Providers");
+  const providers = first(`${appDir}/providers.tsx`, `${appDir}/providers.jsx`);
+  if (!providers) write(`${appDir}/providers.tsx`, `${withCurrency(NEXT_PROVIDERS, currency, 'import { Toaster, TooltipProvider } from "@waveinno/ui";')}\n`, "write", "router, tooltips, toasts" + (currency ? `, amounts in ${currency}` : ""));
+  else if (read(providers).includes("@waveinno/ui")) skip(`${providers} already uses @waveinno/ui`);
+  else warn(`${providers} is your own: wrap its children in <NextRouterProvider> and <TooltipProvider>, and add <Toaster />.`);
+
+  heading("Layout");
+  const layout = first(`${appDir}/layout.tsx`, `${appDir}/layout.jsx`);
+  if (!layout) return write(`${appDir}/layout.tsx`, `${NEXT_LAYOUT}\n`, "write");
+  const src = read(layout);
+  if (src.includes("themeBootScript") && src.includes("Providers")) return skip(`${layout} is set up`);
+  if (/Geist|Create Next App/.test(src) && src.length < 2000) {
+    const title = /title:\s*["']([^"']+)["']/.exec(src)?.[1];
+    return replace(layout, `${NEXT_LAYOUT.replace('"My app"', JSON.stringify(title && title !== "Create Next App" ? title : "My app"))}\n`, "set up");
+  }
+  warn(`${layout} is your own, so it stays as it is. Add three things:`);
+  say(dim(`      import { themeBootScript } from "@waveinno/ui";  import { Providers } from "./providers";`));
+  say(dim(`      <html suppressHydrationWarning> and <head><script dangerouslySetInnerHTML={{ __html: themeBootScript() }} /></head>`));
+  say(dim(`      <body><Providers>{children}</Providers></body>`));
+}
+
+async function stepsVite(pm, currency) {
+  const d = deps(readPackage());
+
+  heading("Packages");
+  if (d["@waveinno/ui"]) skip(`@waveinno/ui ${d["@waveinno/ui"]} is installed`);
+  install(pm, d["@waveinno/ui"] ? [] : [`@waveinno/ui@^${PKG.version}`], false);
+  install(pm, ["tailwindcss", "@tailwindcss/vite"].filter((x) => !d[x]), true);
+
+  heading("Vite");
+  const config = first("vite.config.ts", "vite.config.js", "vite.config.mts", "vite.config.mjs");
+  if (!config) write("vite.config.ts", `${VITE_CONFIG}\n`, "write");
+  else {
+    const src = read(config);
+    if (src.includes("@tailwindcss/vite")) skip(`${config} loads Tailwind`);
+    else if (/plugins:\s*\[react\(\)\]/.test(src)) write(config, `import tailwindcss from "@tailwindcss/vite";\n${src.replace(/plugins:\s*\[react\(\)\]/, "plugins: [react(), tailwindcss()]")}`, "add Tailwind to");
+    else warn(`Add tailwindcss() from "@tailwindcss/vite" to the plugins in ${config}.`);
+  }
+
+  heading("CSS");
+  setupCss(first("src/index.css", "src/main.css", "src/styles.css"), VITE_CSS, "src/index.css");
+  const entry = first("src/main.tsx", "src/main.jsx");
+  if (entry && !/import ["']\.\/(index|main|styles)\.css["']/.test(read(entry))) warn(`Import the stylesheet once in ${entry}: import "./index.css";`);
+
+  heading("index.html");
+  if (!exists("index.html")) warn("No index.html: add the fonts and the theme script from the guide to your page.");
+  else {
+    let html = read("index.html");
+    if (html.includes("waveinno.theme") || html.includes("Noto+Sans+Bengali")) skip("index.html is set up");
+    else {
+      // The same script as themeBootScript(), from the package itself.
+      const { themeBootScript } = await import(pathToFileURL(path.join(HERE, "..", "dist", "lib", "boot-script.js")).href);
+      const head = `    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="${FONTS_HREF}" />
+    <script>${themeBootScript()}</script>
+  </head>`;
+      html = html.replace(/\s*<\/head>/, `\n${head}`);
+      if (/<body(?![^>]*class=)/.test(html)) html = html.replace(/<body/, '<body class="bg-canvas text-body antialiased"');
+      write("index.html", html, "add the fonts and the theme script to");
+    }
+  }
+
+  heading("Entry");
+  const main = first("src/main.tsx", "src/main.jsx");
+  if (!main) return warn("No src/main.tsx: wrap your app in <TooltipProvider> and add <Toaster /> once.");
+  const src = read(main);
+  if (src.includes("@waveinno/ui")) return skip(`${main} already uses @waveinno/ui`);
+  if (!/<App \/>/.test(src)) return warn(`Wrap your app in <TooltipProvider> and add <Toaster /> once in ${main}.`);
+  const imp = 'import { Toaster, TooltipProvider } from "@waveinno/ui";';
+  const wrapped = src.replace(/(\s*)<App \/>/, "$1<TooltipProvider delayDuration={300}>$1  <App />$1  <Toaster />$1</TooltipProvider>");
+  write(main, withCurrency(`${imp}\n${wrapped}`, currency, imp), "wrap the app with tooltips and toasts in", currency ? `(amounts in ${currency})` : "");
+}
+
+/* ── init ───────────────────────────────────────────────────────────────── */
+
+const FRAMEWORKS = [
+  { value: "next", label: "Next.js", hint: "App Router, server rendering, routing built in" },
+  { value: "vite", label: "React + Vite", hint: "a single-page app, quick to start" },
+];
+const CURRENCIES = [
+  { value: "BDT", label: "৳ BDT", hint: "Bangladeshi taka" },
+  { value: "USD", label: "$ USD", hint: "US dollar" },
+  { value: "INR", label: "₹ INR", hint: "Indian rupee" },
+  { value: "EUR", label: "€ EUR", hint: "Euro" },
+  { value: "", label: "Follow the app shell", hint: "set it per organisation later" },
+];
+const PMS = ["npm", "pnpm", "yarn", "bun"];
+
+async function init() {
+  say(`\n  ${magenta("◆")} ${bold("WAVEINNO UI")} ${dim(`v${PKG.version}`)}  ${dim("— the setup")}`);
+  say(dim(`    ${cwd}`));
+
+  // 1. What it is, or what to make.
+  let pkg = readPackage();
+  const found = detect(pkg);
+  let framework = opt("framework") ?? found;
+  if (!framework && !interactive) fail("No Next.js or Vite app here. Run init in your app's folder, or pass --framework next|vite to create one.");
+  if (interactive && !opt("framework")) {
+    framework = await select(
+      pkg ? "What is this app built with?" : "What would you like to build?",
+      FRAMEWORKS.map((f) => ({ ...f, label: f.value === found ? `${f.label} ${green("(detected)")}` : f.label })),
+      found ? FRAMEWORKS.findIndex((f) => f.value === found) : 0,
+    );
+  }
+  if (!["next", "vite"].includes(framework)) fail(`--framework takes next or vite, not "${framework}".`);
+  if (found && framework !== found) warn(`This folder is a ${found === "next" ? "Next.js" : "Vite"} app; setting it up as ${framework === "next" ? "Next.js" : "Vite"} may not work.`);
+
+  // 2. The package manager: from the lockfile, else ask.
+  let pm = opt("pm") ?? lockfilePm();
+  if (!pm) pm = interactive ? await select("Which package manager?", PMS.map((p) => ({ value: p, label: p }))) : "npm";
+  if (!PMS.includes(pm)) fail(`--pm takes ${PMS.join(", ")}.`);
+
+  // 3. No app yet: make one with the official starter, then set it up.
+  if (!pkg) {
+    const name = opt("name") ?? (interactive ? await ask("Name of the new app?", "my-app") : "my-app");
+    if (fs.existsSync(path.join(cwd, name))) fail(`${name} already exists here. Choose another name, or run init inside it.`);
+    if (flag("dry-run")) {
+      heading("Plan");
+      say(`  ${blue("+")} create ${bold(name)} with ${framework === "next" ? "create-next-app" : "create-vite"}, then set it up`);
+      return say();
+    }
+    heading(`Creating ${name}`);
+    const ok =
+      framework === "next"
+        ? run("npx", ["--yes", "create-next-app@latest", name, "--ts", "--tailwind", "--app", "--eslint", "--yes", `--use-${pm}`])
+        : run("npx", ["--yes", "create-vite@latest", name, "--template", "react-ts"]) && run(pm, ["install"], path.join(cwd, name));
+    if (!ok) fail("Creating the app failed; see the output above.");
+    cwd = path.join(cwd, name);
+    pkg = readPackage();
+    if (!pkg) fail(`The starter did not create ${name}/package.json.`);
+  }
+
+  // 4. The currency amounts show in.
+  const tzBangladesh = Intl.DateTimeFormat().resolvedOptions().timeZone === "Asia/Dhaka";
+  let currency = opt("currency");
+  if (currency === undefined) {
+    currency = interactive ? await select("Which currency do amounts show in?", CURRENCIES, tzBangladesh ? 0 : 1) : tzBangladesh ? "BDT" : "";
+  }
+  currency = currency.toUpperCase().replace(/[^A-Z]/g, "");
+
+  // 5. The plan: the same steps, printing instead of doing.
+  say(`\n  ${bold("The plan")}  ${dim(`${framework === "next" ? "Next.js" : "React + Vite"} · ${pm}${currency ? ` · ${currency}` : ""}`)}`);
+  dry = true;
+  if (framework === "next") stepsNext(pm, currency);
+  else await stepsVite(pm, currency);
+  if (flag("dry-run")) return say(dim("\n  Dry run: nothing was changed.\n"));
+
+  if (interactive && !(await select("Set it up?", [{ value: true, label: "Yes, make these changes" }, { value: false, label: "No, leave everything as it is" }]))) {
+    return say(dim("\n  Nothing was changed.\n"));
+  }
+
+  // 6. Do it.
+  say(`\n  ${bold("Setting up")}`);
+  dry = false;
+  if (framework === "next") stepsNext(pm, currency);
+  else await stepsVite(pm, currency);
+
+  const runDev = pm === "npm" ? "npm run dev" : `${pm} dev`;
+  const into = path.relative(process.cwd(), cwd);
+  say(`\n  ${green("◆")} ${bold("Ready.")}`);
+  say(`    ${into ? `cd ${into} && ` : ""}${bold(runDev)}`);
+  say(dim(`    import { Button, toast } from "@waveinno/ui";`));
+  say(dim(`    Check the setup any time: npx @waveinno/ui doctor  ·  ${DOCS}\n`));
+}
+
+/* ── doctor ─────────────────────────────────────────────────────────────── */
+
+function doctor() {
+  say(`\n  ${magenta("◆")} ${bold("WAVEINNO UI doctor")} ${dim(cwd)}\n`);
+  const pkg = readPackage();
+  if (!pkg) fail(`No package.json in ${cwd}.`);
+  const d = deps(pkg);
+  const fw = detect(pkg);
+  let bad = 0;
+  const check = (ok, good, fix) => {
+    if (ok) done(good);
+    else {
+      bad++;
+      say(`  ${red("✗")} ${fix}`);
+    }
+  };
+  check(!!fw, `${fw === "next" ? "Next.js" : "Vite"} app`, "Not a Next.js or Vite app");
+  check(!!d["@waveinno/ui"], `@waveinno/ui ${d["@waveinno/ui"] ?? ""}`, "@waveinno/ui is not installed: npm install @waveinno/ui");
+  check(/^\^?4|^latest/.test(d.tailwindcss ?? ""), `tailwindcss ${d.tailwindcss}`, "Tailwind CSS 4 is not installed");
+  if (fw === "next") check(!!d["@tailwindcss/postcss"], "@tailwindcss/postcss", "@tailwindcss/postcss is missing: npm install -D @tailwindcss/postcss");
+  if (fw === "vite") check(!!d["@tailwindcss/vite"], "@tailwindcss/vite", "@tailwindcss/vite is missing: npm install -D @tailwindcss/vite");
+
+  const cssFile = fw === "next" ? first("src/app/globals.css", "app/globals.css") : first("src/index.css", "src/main.css", "src/styles.css");
+  const css = cssFile ? read(cssFile) : "";
+  check(css.includes("@waveinno/ui/styles.css"), `${cssFile} imports @waveinno/ui/styles.css`, `${cssFile ?? "Your global CSS"} does not import @waveinno/ui/styles.css`);
+  const src = /@source "([^"]+)";/.exec(css)?.[1];
+  const resolved = src && cssFile ? path.resolve(path.dirname(path.join(cwd, cssFile)), src) : null;
+  check(
+    !!resolved && fs.existsSync(resolved),
+    `@source points at ${resolved ? rel(resolved) : ""}`,
+    src ? `@source "${src}" does not exist from ${cssFile}; it should be ${sourceLine(cssFile)}` : `No @source line: add ${cssFile ? sourceLine(cssFile) : '@source "…/node_modules/@waveinno/ui/dist";'}`,
+  );
+
+  if (fw === "next") {
+    const appDir = exists("src/app") ? "src/app" : "app";
+    const layout = first(`${appDir}/layout.tsx`, `${appDir}/layout.jsx`);
+    check(!!layout && read(layout).includes("themeBootScript"), "The theme script runs before paint", `${layout ?? "layout"}: add themeBootScript() in <head>, or dark mode flashes`);
+    const providers = first(`${appDir}/providers.tsx`, `${appDir}/providers.jsx`);
+    const p = providers ? read(providers) : "";
+    check(p.includes("Toaster"), "Toaster is mounted", "No <Toaster />: toasts will not show");
+    check(p.includes("NextRouterProvider"), "Links use the Next.js router", "No <NextRouterProvider>: links in the shell reload the page");
+  } else if (fw === "vite") {
+    const html = exists("index.html") ? read("index.html") : "";
+    check(html.includes("waveinno.theme"), "The theme script runs before paint", "index.html: add the theme script, or dark mode flashes");
+    const main = first("src/main.tsx", "src/main.jsx");
+    check(!!main && read(main).includes("Toaster"), "Toaster is mounted", "No <Toaster />: toasts will not show");
+  }
+  say(bad ? `\n  ${yellow(`${bad} to fix.`)} ${dim("npx @waveinno/ui init sets these up.")}\n` : `\n  ${green(bold("All good."))}\n`);
+  process.exit(bad ? 1 : 0);
+}
+
+/* ── main ───────────────────────────────────────────────────────────────── */
+
+if (flag("version") || command === "version") say(PKG.version);
+else if (command === "init") await init();
+else if (command === "doctor") doctor();
+else {
+  say(`
+  ${magenta("◆")} ${bold("WAVEINNO UI")} ${dim(`v${PKG.version}`)}
+
+  ${bold("npx @waveinno/ui init")}      set up a Next.js or React (Vite) app, or create one
+  ${bold("npx @waveinno/ui doctor")}    check the setup
+
+  ${dim("--yes               take the defaults, ask nothing")}
+  ${dim("--framework next    next or vite")}
+  ${dim("--currency BDT      the currency amounts show in (BDT is the default in Bangladesh)")}
+  ${dim("--pm npm            npm, pnpm, yarn or bun (default: from the lockfile)")}
+  ${dim("--name my-app       the name of a new app")}
+  ${dim("--dry-run           show the plan, change nothing")}
+  ${dim("--skip-install      print the install commands instead of running them")}
+  ${dim("--cwd <dir>         the folder (default: here)")}
+`);
+}

package/dist/components/ui/nid-input.js

@@ -1 +1 @@
-"use client";import{jsx as u,jsxs as m}from"react/jsx-runtime";import{Check as v,IdCard as y}from"lucide-react";import*as p from"react";import{cn as g}from"../../lib/utils.js";import{fieldStateClass as w}from"./input.js";const a={10:"smart",13:"old13",17:"old17"},C={smart:"Smart card",old13:"Old NID",old17:"Old NID, with birth year"},d=e=>e.replace(/[০-৯]/g,i=>String("\u09E6\u09E7\u09E8\u09E9\u09EA\u09EB\u09EC\u09ED\u09EE\u09EF".indexOf(i))).replace(/\D/g,"").slice(0,17);function S(e){const i=e.length<=10?[3,3,4]:e.length<=13?[4,4,5]:[4,4,4,5],r=[];let t=0;for(const o of i){if(t>=e.length)break;r.push(e.slice(t,t+o)),t+=o}return r.join(" ")}const K=p.forwardRef(({value:e,defaultValue:i="",onValueChange:r,state:t="default",labels:o,className:f,disabled:c,placeholder:h="123 456 7890",...x},N)=>{const[b,I]=p.useState(()=>d(i)),n=e!==void 0?d(e):b,l=a[n.length]??null;return m("div",{className:g("flex h-ctl w-full items-center gap-2 rounded-ctl border bg-raised px-3 shadow-[inset_0_1px_1px_rgba(5,8,22,.04)] transition-[border-color,box-shadow]",w[t],c&&"cursor-not-allowed bg-hover opacity-70",f),children:[u(y,{className:"size-4 shrink-0 text-muted"}),u("input",{ref:N,type:"text",inputMode:"numeric",autoComplete:"off",disabled:c,placeholder:h,value:S(n),onChange:k=>{const s=d(k.target.value);e===void 0&&I(s),r?.(s,{valid:!!a[s.length],kind:a[s.length]??null})},className:"num h-full min-w-0 flex-1 bg-transparent text-[13.5px] tracking-[0.04em] text-text outline-none placeholder:tracking-normal placeholder:text-placeholder",...x}),n?m("span",{className:g("inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium",l?"bg-success-subtle text-success":"bg-hover text-muted"),children:[l?u(v,{className:"size-3",strokeWidth:3}):null,l?o?.[l]??C[l]:`${n.length} / ${n.length<10?10:n.length<13?13:17}`]}):null]})});K.displayName="NidInput";export{K as NidInput};
+"use client";import{jsx as a,jsxs as f}from"react/jsx-runtime";import{Check as y,IdCard as w}from"lucide-react";import*as c from"react";import{cn as g}from"../../lib/utils.js";import{fieldStateClass as C}from"./input.js";const d={10:"smart",13:"old13",17:"old17"},m={smart:"Smart card",old13:"Old NID",old17:"Old NID, with birth year"},p=e=>e.replace(/[০-৯]/g,l=>String("\u09E6\u09E7\u09E8\u09E9\u09EA\u09EB\u09EC\u09ED\u09EE\u09EF".indexOf(l))).replace(/\D/g,"").slice(0,17);function S(e){const l=e.length<=10?[3,3,4]:e.length<=13?[4,4,5]:[4,4,4,5],s=[];let n=0;for(const r of l){if(n>=e.length)break;s.push(e.slice(n,n+r)),n+=r}return s.join(" ")}const K=c.forwardRef(({value:e,defaultValue:l="",onValueChange:s,state:n="default",labels:r,className:h,disabled:u,placeholder:x="123 456 7890",...N},b)=>{const[I,k]=c.useState(()=>p(l)),i=e!==void 0?p(e):I,t=d[i.length]??null;return f("div",{className:g("@container flex h-ctl w-full items-center gap-2 rounded-ctl border bg-raised px-3 shadow-[inset_0_1px_1px_rgba(5,8,22,.04)] transition-[border-color,box-shadow]",C[n],u&&"cursor-not-allowed bg-hover opacity-70",h),children:[a(w,{className:"size-4 shrink-0 text-muted"}),a("input",{ref:b,type:"text",inputMode:"numeric",autoComplete:"off",disabled:u,placeholder:x,value:S(i),onChange:v=>{const o=p(v.target.value);e===void 0&&k(o),s?.(o,{valid:!!d[o.length],kind:d[o.length]??null})},className:"num h-full min-w-[14ch] flex-1 bg-transparent text-[13.5px] tracking-[0.04em] text-text outline-none placeholder:tracking-normal placeholder:text-placeholder",...N}),i?f("span",{title:t?r?.[t]??m[t]:void 0,className:g("inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium",t?"bg-success-subtle text-success @max-[420px]:px-1.5":"bg-hover text-muted"),children:[t?a(y,{className:"size-3",strokeWidth:3}):null,t?a("span",{className:"@max-[420px]:sr-only",children:r?.[t]??m[t]}):`${i.length} / ${i.length<10?10:i.length<13?13:17}`]}):null]})});K.displayName="NidInput";export{K as NidInput};

package/dist/components/ui/phone-input.js

@@ -1 +1 @@
-"use client";import{jsx as r,jsxs as d}from"react/jsx-runtime";import{Check as _}from"lucide-react";import*as m from"react";import{BD_OPERATOR_NAMES as C,parseBdPhone as o}from"../../lib/bd-geo.js";import{cn as h}from"../../lib/utils.js";import{fieldStateClass as M}from"./input.js";const R=e=>e.length>4?`${e.slice(0,4)}-${e.slice(4)}`:e,S=m.forwardRef(({value:e,defaultValue:b="",onValueChange:u,showOperator:g=!0,state:c="default",labels:v,className:P,disabled:f,placeholder:w="1712-345678",...N},I)=>{const s=e!==void 0,[y,x]=m.useState(()=>o(b).national),i=s?o(e).national:y,n=o(i),a=i.length>=2&&!n.operator;return d("div",{className:h("flex h-ctl w-full items-center overflow-hidden rounded-ctl border bg-raised text-[13px] shadow-[inset_0_1px_1px_rgba(5,8,22,.04)] transition-[border-color,box-shadow]",M[a?"error":c],f&&"cursor-not-allowed bg-hover opacity-70",P),children:[d("span",{className:"flex h-full shrink-0 items-center gap-1.5 border-r border-border bg-surface px-2.5 text-muted",children:[r("span",{"aria-hidden":!0,className:"relative h-3 w-[18px] overflow-hidden rounded-[2px] bg-[#006a4e]",children:r("span",{className:"absolute left-[38%] top-1/2 size-[7px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#f42a41]"})}),r("span",{className:"num font-medium text-text",children:"+880"})]}),r("input",{ref:I,type:"tel",inputMode:"tel",autoComplete:"tel-national",disabled:f,placeholder:w,"aria-invalid":a||c==="error"||void 0,value:R(i),onChange:l=>{const t=o(l.target.value);s||x(t.national),u?.(t.e164,t)},onPaste:l=>{const t=l.clipboardData.getData("text");if(!t)return;l.preventDefault();const p=o(t);s||x(p.national),u?.(p.e164,p)},className:"num h-full min-w-0 flex-1 bg-transparent px-3 text-text outline-none placeholder:text-placeholder disabled:cursor-not-allowed",...N}),g&&(n.operator||a)?d("span",{className:h("mr-2 inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium",a?"bg-danger-subtle text-danger":n.valid?"bg-success-subtle text-success":"bg-hover text-muted"),children:[n.valid?r(_,{className:"size-3",strokeWidth:3}):null,a?v?.invalidPrefix??"Not a mobile prefix":C[n.operator]]}):null]})});S.displayName="PhoneInput";export{S as PhoneInput};
+"use client";import{jsx as t,jsxs as d}from"react/jsx-runtime";import{Check as k}from"lucide-react";import*as h from"react";import{BD_OPERATOR_NAMES as b,parseBdPhone as o}from"../../lib/bd-geo.js";import{cn as g}from"../../lib/utils.js";import{fieldStateClass as C}from"./input.js";const M=e=>e.length>4?`${e.slice(0,4)}-${e.slice(4)}`:e,R=h.forwardRef(({value:e,defaultValue:v="",onValueChange:u,showOperator:P=!0,state:x="default",labels:c,className:N,disabled:m,placeholder:w="1712-345678",...I},y)=>{const s=e!==void 0,[_,f]=h.useState(()=>o(v).national),i=s?o(e).national:_,n=o(i),a=i.length>=2&&!n.operator;return d("div",{className:g("@container flex h-ctl w-full items-center overflow-hidden rounded-ctl border bg-raised text-[13px] shadow-[inset_0_1px_1px_rgba(5,8,22,.04)] transition-[border-color,box-shadow]",C[a?"error":x],m&&"cursor-not-allowed bg-hover opacity-70",N),children:[d("span",{className:"flex h-full shrink-0 items-center gap-1.5 border-r border-border bg-surface px-2.5 text-muted @max-[230px]:px-2",children:[t("span",{"aria-hidden":!0,className:"relative h-3 w-[18px] overflow-hidden rounded-[2px] bg-[#006a4e] @max-[230px]:hidden",children:t("span",{className:"absolute left-[38%] top-1/2 size-[7px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#f42a41]"})}),t("span",{className:"num font-medium text-text",children:"+880"})]}),t("input",{ref:y,type:"tel",inputMode:"tel",autoComplete:"tel-national",disabled:m,placeholder:w,"aria-invalid":a||x==="error"||void 0,value:M(i),onChange:l=>{const r=o(l.target.value);s||f(r.national),u?.(r.e164,r)},onPaste:l=>{const r=l.clipboardData.getData("text");if(!r)return;l.preventDefault();const p=o(r);s||f(p.national),u?.(p.e164,p)},className:"num h-full min-w-[10ch] flex-1 bg-transparent px-3 text-text outline-none placeholder:text-placeholder disabled:cursor-not-allowed @max-[230px]:px-2",...I}),P&&(n.operator||a)?d("span",{title:a?c?.invalidPrefix??"Not a mobile prefix":b[n.operator],className:g("mr-2 inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11.5px] font-medium @max-[290px]:min-h-5 @max-[290px]:px-1.5",a?"bg-danger-subtle text-danger":n.valid?"bg-success-subtle text-success":"bg-hover text-muted"),children:[n.valid?t(k,{className:"size-3",strokeWidth:3}):t("span",{"aria-hidden":!0,className:"hidden size-1.5 rounded-full bg-current @max-[290px]:block"}),t("span",{className:"@max-[290px]:sr-only",children:a?c?.invalidPrefix??"Not a mobile prefix":b[n.operator]})]}):null]})});R.displayName="PhoneInput";export{R as PhoneInput};

package/package.json

@@ -1,14 +1,26 @@
 {
   "name": "@waveinno/ui",
-  "version": "0.8.0",
-  "description": "WAVEINNO design system — tokens, shell, primitives and patterns shared by every WAVEINNO product",
+  "version": "0.9.0",
+  "description": "Wavi: the React design system from Bangladesh. 100+ components, app shell, charts, and bKash/taka/Bangla-ready inputs for Next.js and Vite, with Tailwind CSS 4. Set up with npx @waveinno/ui init.",
   "keywords": [
     "waveinno",
     "design-system",
     "react",
     "nextjs",
     "tailwindcss",
-    "radix-ui"
+    "radix-ui",
+    "wavi",
+    "react-components",
+    "component-library",
+    "ui-kit",
+    "tailwind-css-4",
+    "vite",
+    "dark-mode",
+    "bangladesh",
+    "bangla",
+    "bkash",
+    "taka",
+    "dashboard"
   ],
   "license": "MIT",
   "author": "WAVEINNO <info@waveinno.com>",
@@ -40,6 +52,7 @@
   },
   "files": [
     "dist",
+    "bin",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -113,5 +126,8 @@
     "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2"
+  },
+  "bin": {
+    "waveinno-ui": "bin/waveinno-ui.mjs"
   }
 }