@waveinno/ui 0.7.0 → 0.9.0

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/bd-address.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * BdAddressPicker — a Bangladeshi address: division, district (only those of
+ * the chosen division), then the area and postcode as text.
+ *
+ * Every name is in English and Bangla (`lang`); the value holds ids
+ * ("dhaka", "cox-s-bazar"), so a stored address does not change with the
+ * language. Changing the division clears a district that is not in it.
+ */
+export interface BdAddress {
+    division?: string;
+    district?: string;
+    /** Thana, area, road and house: free text. */
+    area?: string;
+    /** Four digits. */
+    postcode?: string;
+}
+export interface BdAddressPickerProps {
+    value?: BdAddress;
+    defaultValue?: BdAddress;
+    onValueChange?: (address: BdAddress) => void;
+    lang?: "en" | "bn";
+    /** Which text fields follow the two lists. Default both. */
+    fields?: ("area" | "postcode")[];
+    disabled?: boolean;
+    required?: boolean;
+    labels?: Partial<Record<"division" | "district" | "area" | "postcode" | "chooseDivision" | "chooseDistrict" | "divisionFirst", string>>;
+    className?: string;
+}
+export declare function BdAddressPicker({ value, defaultValue, onValueChange, lang, fields, disabled, required, labels, className }: BdAddressPickerProps): React.JSX.Element;

package/dist/components/ui/bd-address.js

@@ -0,0 +1 @@
+"use client";import{jsx as i,jsxs as p}from"react/jsx-runtime";import*as g from"react";import{BD_DIVISIONS as x,bdDivision as h}from"../../lib/bd-geo.js";import{cn as $}from"../../lib/utils.js";import{FormField as a}from"./form-field.js";import{Input as b}from"./input.js";import{Select as f,SelectContent as S,SelectItem as F,SelectTrigger as D,SelectValue as C}from"./select.js";const y={division:"Division",district:"District",area:"Area, road and house",postcode:"Postcode",chooseDivision:"Choose a division",chooseDistrict:"Choose a district",divisionFirst:"Choose the division first"},T={division:"\u09AC\u09BF\u09AD\u09BE\u0997",district:"\u099C\u09C7\u09B2\u09BE",area:"\u098F\u09B2\u09BE\u0995\u09BE, \u09B0\u09BE\u09B8\u09CD\u09A4\u09BE \u0993 \u09AC\u09BE\u09A1\u09BC\u09BF",postcode:"\u09AA\u09CB\u09B8\u09CD\u099F \u0995\u09CB\u09A1",chooseDivision:"\u09AC\u09BF\u09AD\u09BE\u0997 \u09AC\u09BE\u099B\u09C1\u09A8",chooseDistrict:"\u099C\u09C7\u09B2\u09BE \u09AC\u09BE\u099B\u09C1\u09A8",divisionFirst:"\u0986\u0997\u09C7 \u09AC\u09BF\u09AD\u09BE\u0997 \u09AC\u09BE\u099B\u09C1\u09A8"};function _({value:u,defaultValue:B={},onValueChange:A,lang:c="en",fields:l=["area","postcode"],disabled:d,required:m,labels:I,className:N}){const[P,V]=g.useState(B),s=u??P,o={...c==="bn"?T:y,...I},r=g.useId(),v=s.division?h(s.division):void 0,n=e=>{const t={...s,...e};e.division&&e.division!==s.division&&!h(e.division)?.districts.some(k=>k.id===s.district)&&(t.district=void 0),u===void 0&&V(t),A?.(t)};return p("div",{className:$("grid gap-4 sm:grid-cols-2",N),children:[i(a,{label:o.division,required:m,children:p(f,{value:s.division??"",onValueChange:e=>n({division:e}),disabled:d,children:[i(D,{"aria-label":o.division,children:i(C,{placeholder:o.chooseDivision})}),i(S,{children:x.map(e=>i(F,{value:e.id,children:c==="bn"?e.bn:e.en},e.id))})]})}),i(a,{label:o.district,required:m,children:p(f,{value:s.district??"",onValueChange:e=>n({district:e}),disabled:d||!v,children:[i(D,{"aria-label":o.district,children:i(C,{placeholder:v?o.chooseDistrict:o.divisionFirst})}),i(S,{children:v?.districts.map(e=>i(F,{value:e.id,children:c==="bn"?e.bn:e.en},e.id))})]})}),l.includes("area")?i(a,{label:o.area,htmlFor:`${r}-area`,className:l.includes("postcode")?void 0:"sm:col-span-2",children:i(b,{id:`${r}-area`,value:s.area??"",onChange:e=>n({area:e.target.value}),disabled:d,autoComplete:"street-address"})}):null,l.includes("postcode")?i(a,{label:o.postcode,htmlFor:`${r}-post`,children:i(b,{id:`${r}-post`,value:s.postcode??"",onChange:e=>n({postcode:e.target.value.replace(/[০-৯]/g,t=>String("\u09E6\u09E7\u09E8\u09E9\u09EA\u09EB\u09EC\u09ED\u09EE\u09EF".indexOf(t))).replace(/\D/g,"").slice(0,4)}),inputMode:"numeric",autoComplete:"postal-code",placeholder:"1212",disabled:d,className:"num"})}):null]})}export{_ as BdAddressPicker};

package/dist/components/ui/checkbox-card.d.ts

@@ -0,0 +1,18 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+/**
+ * CheckboxCard — RadioCard's twin for choosing several: the whole card is the
+ * target, with an icon, a title, a line under it and something on the right (a
+ * price, a count). Add-ons, features to switch on, sites to include.
+ *
+ * It is a real checkbox (Space toggles it, screen readers say "checked"), so
+ * a grid of them needs no group wrapper; put them in any layout.
+ */
+export interface CheckboxCardProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "title"> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    /** On the right: a price, a time, a badge. */
+    aside?: React.ReactNode;
+}
+export declare const CheckboxCard: React.ForwardRefExoticComponent<CheckboxCardProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/ui/checkbox-card.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"@radix-ui/react-checkbox";import{Check as l}from"lucide-react";import*as m from"react";import{cn as a}from"../../lib/utils.js";const b=m.forwardRef(({className:d,title:c,description:t,icon:o,aside:s,...n},p)=>r(i.Root,{ref:p,className:a("group relative flex w-full cursor-pointer items-start gap-3 rounded-[calc(12px*var(--radius-scale))] border border-border bg-raised p-3.5 pr-10 text-left outline-none","transition-[border-color,background-color,box-shadow] duration-200 hover:border-border2","focus-visible:ring-2 focus-visible:ring-primary/35","data-[state=checked]:border-primary data-[state=checked]:bg-[linear-gradient(180deg,var(--primary-subtle),transparent_120%)] data-[state=checked]:shadow-[0_0_0_3px_var(--primary-subtle),0_6px_16px_-8px_color-mix(in_srgb,var(--primary)_35%,transparent)]","disabled:cursor-not-allowed disabled:opacity-50",d),...n,children:[o?e("span",{className:a("grid size-9 shrink-0 place-items-center rounded-[calc(10px*var(--radius-scale))] border border-border bg-surface text-muted transition-colors duration-200 [&_svg]:size-[18px]","group-data-[state=checked]:border-primary/25 group-data-[state=checked]:bg-raised group-data-[state=checked]:text-primary"),children:o}):null,r("span",{className:"min-w-0 flex-1",children:[r("span",{className:"flex items-center justify-between gap-3",children:[e("span",{className:"truncate text-[13.5px] font-semibold text-text",children:c}),s?e("span",{className:"num shrink-0 text-[13px] font-semibold text-text",children:s}):null]}),t?e("span",{className:"mt-0.5 block text-[12px] leading-[17px] text-muted",children:t}):null]}),e("span",{"aria-hidden":!0,className:a("absolute right-3.5 top-3.5 grid size-[18px] place-items-center rounded-[5px] border border-border2 bg-raised text-white transition-[background-color,border-color] duration-200","group-data-[state=checked]:border-primary group-data-[state=checked]:bg-primary"),children:e(i.Indicator,{forceMount:!0,className:"grid place-items-center data-[state=unchecked]:hidden",children:e(l,{className:"size-3 animate-[wm-pop_180ms_var(--ease)]",strokeWidth:3})})})]}));b.displayName="CheckboxCard";export{b as CheckboxCard};

package/dist/components/ui/context-menu.d.ts

@@ -0,0 +1,32 @@
+import * as Primitive from "@radix-ui/react-context-menu";
+import * as React from "react";
+import type { MenuVariant } from "./dropdown-menu";
+/**
+ * ContextMenu — the menu a right-click (or a long press on a phone) opens over
+ * a row, a card, a file: the actions for that thing, where the pointer is.
+ *
+ * It looks and reads exactly like DropdownMenu, with the same item options
+ * (`icon`, `description`, `shortcut`, `danger`) and surfaces (`default`,
+ * `glass`, `dark`), so a table can offer the same actions both ways. Keep the
+ * actions available elsewhere too: a right-click is never the only way in.
+ */
+export declare const ContextMenu: React.FC<Primitive.ContextMenuProps>;
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<Primitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuGroup: React.ForwardRefExoticComponent<Primitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSub: React.FC<Primitive.ContextMenuSubProps>;
+export declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<Primitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<Primitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    variant?: MenuVariant;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<Primitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    danger?: boolean;
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    shortcut?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Primitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<Primitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuLabel: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Primitive.Label>) => React.JSX.Element;
+export declare const ContextMenuSeparator: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Primitive.Separator>) => React.JSX.Element;
+export declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Primitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<Primitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/context-menu.js

@@ -0,0 +1 @@
+"use client";import{jsx as o,jsxs as m}from"react/jsx-runtime";import*as e from"@radix-ui/react-context-menu";import{Check as c,ChevronRight as g}from"lucide-react";import*as s from"react";import{cn as i}from"../../lib/utils.js";const k=e.Root,S=e.Trigger,w=e.Group,W=e.Sub,T=e.RadioGroup,u="z-50 min-w-52 overflow-hidden rounded-dlg border border-border bg-raised p-1 shadow-elev3",l={default:"",glass:"border-white/40 bg-raised/70 backdrop-blur-xl backdrop-saturate-150 dark:border-white/10",dark:"dark border-white/10 bg-[var(--ink)] text-white [--hover:rgba(255,255,255,.08)] [--text:#f5f6fa] [--body:#d6d8e6] [--muted:#9aa1bd] [--border:rgba(255,255,255,.1)]"},x=s.createContext("default"),R=s.forwardRef(({className:r,variant:t="default",...n},a)=>o(x.Provider,{value:t,children:o(e.Portal,{children:o(e.Content,{ref:a,"data-pop":"",className:i(u,l[t],r),...n})})}));R.displayName="ContextMenuContent";const p="relative flex cursor-pointer select-none items-center gap-2.5 rounded-ctl px-2.5 py-2 text-[13px] text-body outline-none transition-colors data-[highlighted]:bg-hover data-[highlighted]:text-text data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted",h=s.forwardRef(({className:r,danger:t,icon:n,description:a,shortcut:d,children:f,...b},C)=>m(e.Item,{ref:C,className:i(p,a&&"items-start",t&&"text-danger data-[highlighted]:bg-danger-subtle data-[highlighted]:text-danger [&_svg]:text-danger",r),...b,children:[n?o("span",{className:i("grid shrink-0 place-items-center",a&&"mt-0.5"),children:n}):null,m("span",{className:"min-w-0 flex-1",children:[o("span",{className:"block truncate",children:f}),a?o("span",{className:"mt-0.5 block text-[11.5px] leading-4 text-muted",children:a}):null]}),d?o("kbd",{className:"ml-auto self-center rounded-[calc(5px*var(--radius-scale))] border border-border bg-surface px-1.5 py-px font-sans text-[10.5px] text-muted",children:d}):null]}));h.displayName="ContextMenuItem";const v=s.forwardRef(({className:r,children:t,...n},a)=>m(e.CheckboxItem,{ref:a,className:i(p,"pr-8",r),...n,children:[t,o(e.ItemIndicator,{className:"absolute right-2.5",children:o(c,{className:"size-3.5 !text-primary",strokeWidth:3})})]}));v.displayName="ContextMenuCheckboxItem";const P=s.forwardRef(({className:r,children:t,...n},a)=>m(e.RadioItem,{ref:a,className:i(p,"pr-8",r),...n,children:[t,o(e.ItemIndicator,{className:"absolute right-2.5",children:o(c,{className:"size-3.5 !text-primary",strokeWidth:3})})]}));P.displayName="ContextMenuRadioItem";const V=({className:r,...t})=>o(e.Label,{className:i("ov px-2.5 pb-1 pt-2",r),...t}),z=({className:r,...t})=>o(e.Separator,{className:i("-mx-1 my-1 h-px bg-border",r),...t}),y=s.forwardRef(({className:r,children:t,...n},a)=>m(e.SubTrigger,{ref:a,className:i(p,"data-[state=open]:bg-hover",r),...n,children:[t,o(g,{className:"ml-auto size-3.5"})]}));y.displayName="ContextMenuSubTrigger";const I=s.forwardRef(({className:r,...t},n)=>{const a=s.useContext(x);return o(e.Portal,{children:o(e.SubContent,{ref:n,"data-pop":"",className:i(u,l[a],r),...t})})});I.displayName="ContextMenuSubContent";export{k as ContextMenu,v as ContextMenuCheckboxItem,R as ContextMenuContent,w as ContextMenuGroup,h as ContextMenuItem,V as ContextMenuLabel,T as ContextMenuRadioGroup,P as ContextMenuRadioItem,z as ContextMenuSeparator,W as ContextMenuSub,I as ContextMenuSubContent,y as ContextMenuSubTrigger,S as ContextMenuTrigger};

package/dist/components/ui/index.d.ts

@@ -45,3 +45,12 @@ export * from "./time-picker";
 export * from "./toast";
 export * from "./tooltip";
 export * from "./tree-view";
+export * from "./bd-address";
+export * from "./checkbox-card";
+export * from "./context-menu";
+export * from "./multi-select";
+export * from "./nid-input";
+export * from "./payment-method-picker";
+export * from "./phone-input";
+export * from "./plate-input";
+export * from "./taka-input";

package/dist/components/ui/index.js

@@ -1 +1 @@
-export*from"./accordion.js";export*from"./alert.js";export*from"./avatar.js";export*from"./badge.js";export*from"./button.js";export*from"./calendar.js";export*from"./card.js";export*from"./carousel.js";export*from"./checkbox.js";export*from"./color-picker.js";export*from"./combobox.js";export*from"./confirm-dialog.js";export*from"./date-picker.js";export*from"./dialog.js";export*from"./dropdown-menu.js";export*from"./file-upload.js";export*from"./form-field.js";export*from"./hover-card.js";export*from"./input.js";export*from"./kbd.js";export*from"./label.js";export*from"./menu.js";export*from"./number-input.js";export*from"./pagination.js";export*from"./password-input.js";export*from"./pin-input.js";export*from"./popover.js";export*from"./progress.js";export*from"./radio-group.js";export*from"./rating.js";export*from"./scroll-area.js";export*from"./segmented.js";export*from"./select.js";export*from"./separator.js";export*from"./sheet.js";export*from"./skeleton.js";export*from"./slider.js";export*from"./spinner.js";export*from"./steps.js";export*from"./switch.js";export*from"./tabs.js";export*from"./tag-input.js";export*from"./time-picker.js";export*from"./toast.js";export*from"./tooltip.js";export*from"./tree-view.js";
+export*from"./accordion.js";export*from"./alert.js";export*from"./avatar.js";export*from"./badge.js";export*from"./button.js";export*from"./calendar.js";export*from"./card.js";export*from"./carousel.js";export*from"./checkbox.js";export*from"./color-picker.js";export*from"./combobox.js";export*from"./confirm-dialog.js";export*from"./date-picker.js";export*from"./dialog.js";export*from"./dropdown-menu.js";export*from"./file-upload.js";export*from"./form-field.js";export*from"./hover-card.js";export*from"./input.js";export*from"./kbd.js";export*from"./label.js";export*from"./menu.js";export*from"./number-input.js";export*from"./pagination.js";export*from"./password-input.js";export*from"./pin-input.js";export*from"./popover.js";export*from"./progress.js";export*from"./radio-group.js";export*from"./rating.js";export*from"./scroll-area.js";export*from"./segmented.js";export*from"./select.js";export*from"./separator.js";export*from"./sheet.js";export*from"./skeleton.js";export*from"./slider.js";export*from"./spinner.js";export*from"./steps.js";export*from"./switch.js";export*from"./tabs.js";export*from"./tag-input.js";export*from"./time-picker.js";export*from"./toast.js";export*from"./tooltip.js";export*from"./tree-view.js";export*from"./bd-address.js";export*from"./checkbox-card.js";export*from"./context-menu.js";export*from"./multi-select.js";export*from"./nid-input.js";export*from"./payment-method-picker.js";export*from"./phone-input.js";export*from"./plate-input.js";export*from"./taka-input.js";

package/dist/components/ui/input.d.ts

@@ -7,6 +7,11 @@ export declare const inputClass: string;
  * (FormField does that).
  */
 export type InputState = "default" | "error" | "warning" | "success";
+/**
+ * The same states for a field made of several parts (a prefix, an input, a
+ * badge) where the focus ring belongs on the wrapper: PhoneInput, TakaInput….
+ */
+export declare const fieldStateClass: Record<InputState, string>;
 interface Extra {
     state?: InputState;
     /** Icon or text inside the box, before the value (a search icon, "৳", "+880"). */

package/dist/components/ui/input.js

@@ -1 +1 @@
-"use client";import{jsx as n,jsxs as m}from"react/jsx-runtime";import*as i from"react";import{cn as o}from"../../lib/utils.js";const l="h-ctl w-full rounded-ctl border border-border2 bg-raised px-3 text-[13px] text-text placeholder:text-placeholder outline-none transition-[border-color,box-shadow] duration-150 focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:bg-hover disabled:text-muted aria-[invalid=true]:border-danger aria-[invalid=true]:ring-danger/20",u={default:"",error:"border-danger bg-danger-subtle/30 focus:border-danger focus:ring-danger/20 wm-shake",warning:"border-warning focus:border-warning focus:ring-warning/20",success:"border-success focus:border-success focus:ring-success/20"};function g({leading:r,trailing:e,children:t}){return!r&&!e?t:m("div",{className:"relative w-full",children:[r?n("span",{className:"pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[13px] text-muted [&_svg]:size-4",children:r}):null,t,e?n("span",{className:"absolute right-2.5 top-1/2 flex -translate-y-1/2 items-center text-[13px] text-muted [&_svg]:size-4",children:e}):null]})}const x=i.forwardRef(({className:r,type:e="text",state:t="default",leading:a,trailing:s,style:p,...d},f)=>n(g,{leading:a,trailing:s,children:n("input",{ref:f,type:e,"aria-invalid":t==="error"?!0:d["aria-invalid"],className:o(l,u[t],a?"pl-9":null,s?"pr-10":null,r),style:{...c("paddingLeft",a),...c("paddingRight",s),...p},...d})}));function c(r,e){if(typeof e!="string"&&typeof e!="number")return;const t=String(e).length;return t>1?{[r]:`calc(${t}ch + 20px)`}:void 0}x.displayName="Input";const b=i.forwardRef(({className:r,state:e="default",...t},a)=>n("textarea",{ref:a,"aria-invalid":e==="error"?!0:t["aria-invalid"],className:o(l,"h-auto min-h-20 resize-y py-2 leading-5",u[e],r),...t}));b.displayName="Textarea";export{x as Input,b as Textarea,l as inputClass};
+"use client";import{jsx as n,jsxs as m}from"react/jsx-runtime";import*as o from"react";import{cn as d}from"../../lib/utils.js";const c="h-ctl w-full rounded-ctl border border-border2 bg-raised px-3 text-[13px] text-text placeholder:text-placeholder outline-none transition-[border-color,box-shadow] duration-150 focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:bg-hover disabled:text-muted aria-[invalid=true]:border-danger aria-[invalid=true]:ring-danger/20",h={default:"border-border2 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20",error:"border-danger bg-danger-subtle/30 focus-within:ring-2 focus-within:ring-danger/20 wm-shake",warning:"border-warning focus-within:ring-2 focus-within:ring-warning/20",success:"border-success focus-within:ring-2 focus-within:ring-success/20"},u={default:"",error:"border-danger bg-danger-subtle/30 focus:border-danger focus:ring-danger/20 wm-shake",warning:"border-warning focus:border-warning focus:ring-warning/20",success:"border-success focus:border-success focus:ring-success/20"};function p({leading:r,trailing:e,children:t}){return!r&&!e?t:m("div",{className:"relative w-full",children:[r?n("span",{className:"pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-[13px] text-muted [&_svg]:size-4",children:r}):null,t,e?n("span",{className:"absolute right-2.5 top-1/2 flex -translate-y-1/2 items-center text-[13px] text-muted [&_svg]:size-4",children:e}):null]})}const b=o.forwardRef(({className:r,type:e="text",state:t="default",leading:a,trailing:i,style:f,...s},g)=>n(p,{leading:a,trailing:i,children:n("input",{ref:g,type:e,"aria-invalid":t==="error"?!0:s["aria-invalid"],className:d(c,u[t],a?"pl-9":null,i?"pr-10":null,r),style:{...l("paddingLeft",a),...l("paddingRight",i),...f},...s})}));function l(r,e){if(typeof e!="string"&&typeof e!="number")return;const t=String(e).length;return t>1?{[r]:`calc(${t}ch + 20px)`}:void 0}b.displayName="Input";const x=o.forwardRef(({className:r,state:e="default",...t},a)=>n("textarea",{ref:a,"aria-invalid":e==="error"?!0:t["aria-invalid"],className:d(c,"h-auto min-h-20 resize-y py-2 leading-5",u[e],r),...t}));x.displayName="Textarea";export{b as Input,x as Textarea,h as fieldStateClass,c as inputClass};