@waveinno/ui 0.7.0 → 0.9.0

package/CHANGELOG.md

@@ -6,6 +6,43 @@ 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):
+  - **PhoneInput:** +880 mobile numbers typed any way, Bangla digits too; names the operator and returns
+    `+8801XXXXXXXXX`.
+  - **TakaInput:** lakh grouping as you type, the amount in words, holds a number.
+  - **BdAddressPicker:** 8 divisions and 64 districts in English or Bangla.
+  - **PaymentMethodPicker:** bKash, Nagad, Rocket, Upay, card, cash, bank, cash on delivery; cards, list or chips.
+  - **PlateInput:** with the plate drawn in Bangla. **NidInput:** 10, 13 or 17 digits.
+  - Helpers: `toBanglaDigits`, `fromBanglaDigits`, `toBongabdo` and `formatBanglaDate` (the revised Bangladesh
+    calendar), `lakhCrore`, `groupLakh`, `parseBdPhone`, `BD_DIVISIONS`, `BD_DISTRICTS`.
+- **MultiSelect:** chips in the field, search, groups, select all, a `max` that says why it stops, full keyboard.
+- **CheckboxCard:** RadioCard's twin for choosing several.
+- **ContextMenu:** right-click or long-press, with the same items and looks as DropdownMenu. Adds the dependency
+  `@radix-ui/react-context-menu`.
+- **Sheet `side="bottom"`:** a bottom sheet with a handle you can drag down to close; a centred card on wide screens.
+- `fieldStateClass`: the input states for fields made of several parts.
+- Docs site, **Templates**: four multi-page templates made of blocks (Launch, Control, Bazaar; Gate is free). Each has
+  a live preview of every page and downloads as a Next.js project that runs with `npm install && npm run dev`.
+
 ## 0.7.0 — 2026-10-03
 
 - **Licence: MIT.** `@waveinno/ui` is now MIT-licensed (© WAVEINNO): free to use in any project, commercial or not.

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:
@@ -63,7 +75,8 @@ through `labels` props, so each product passes its own language.
 
 | Group | Components |
 | --- | --- |
-| Primitives | Button (working + showcase variants), Badge (soft, solid, outline, dot, gradient, live), Input / Textarea (states, adornments), NumberInput, PasswordInput (strength, Caps Lock), PinInput (OTP), FileUpload, FormField, Select, Combobox (searchable), Checkbox, RadioGroup and RadioCard, Switch, Slider (range, marks), Segmented, Tabs (underline, pill, solid, enclosed), Calendar, DatePicker, DateTimePicker, DateRangePicker, TimePicker, Dialog (drawer that widens or goes full width), Sheet, ConfirmDialog, DropdownMenu (rich items, header, dark), Menu (soft, line, raised, gradient, dark, plus the shell's panel and rail; branches, sliding highlight), Popover (arrow, dark, brand), HoverCard, Tooltip, Alert (five tones, four looks), Toaster and toast, Spinner (ring, dots, wave), Kbd, Accordion, Pagination (seven looks), Steps (six looks), TreeView, ScrollArea, TagInput, Rating, Carousel, ColorPicker, Progress / ProgressRing, Avatar, Skeleton |
+| Primitives | Button (working + showcase variants), Badge (soft, solid, outline, dot, gradient, live), Input / Textarea (states, adornments), NumberInput, PasswordInput (strength, Caps Lock), PinInput (OTP), FileUpload, FormField, Select, Combobox (searchable), MultiSelect, Checkbox and CheckboxCard, RadioGroup and RadioCard, Switch, Slider (range, marks), Segmented, Tabs (underline, pill, solid, enclosed), Calendar, DatePicker, DateTimePicker, DateRangePicker, TimePicker, Dialog (drawer that widens or goes full width), Sheet (right, left, bottom with drag to close), ConfirmDialog, DropdownMenu (rich items, header, dark), ContextMenu, Menu (soft, line, raised, gradient, dark, plus the shell's panel and rail; branches, sliding highlight), Popover (arrow, dark, brand), HoverCard, Tooltip, Alert (five tones, four looks), Toaster and toast, Spinner (ring, dots, wave), Kbd, Accordion, Pagination (seven looks), Steps (six looks), TreeView, ScrollArea, TagInput, Rating, Carousel, ColorPicker, Progress / ProgressRing, Avatar, Skeleton |
+| Bangladesh | PhoneInput (+880, operator), TakaInput (lakh grouping, words), BdAddressPicker (divisions and districts, English or Bangla), PaymentMethodPicker (bKash, Nagad, Rocket, Upay, card, cash, bank, COD), PlateInput, NidInput; helpers for Bangla digits, the Bangla calendar and lakh/crore |
 | Patterns | AppLauncher (switch-app button: grid, list, spotlight, glass, dark), OrgChart (card, gradient, avatar, compact, list), DataTable (advanced filters, saved views, five looks, inline and bulk edit, bulk delete, sticky actions), UserCell, RowActions, PageHero, PageHeader, StatCard, KpiCard, Money, ActivityFeed, ActivityTimeline, ChangeHistory, ChangeNotes, Note, Kanban, empty / error / loading states |
 | Charts | TrendChart, BarChart, LineChart, DonutChart, GaugeChart, Heatmap, BarList, ChartCard, validated palette |
 | Brand | WaveinnoLogo, WaveinnoSymbol, WaveMark (app icon: seven tones, round, 3D, animated), PoweredBy, Watermark; `@waveinno/ui/brand/waveinno-logo.svg` |
@@ -73,7 +86,7 @@ through `labels` props, so each product passes its own language.
 
 ```bash
 npm install
-npm run dev        # http://localhost:4500 — docs (/docs), theme builder (/themes), every component on one page (/playground), live from src/
+npm run dev        # http://localhost:4500 — docs (/docs), blocks (/blocks), templates (/templates), theme builder (/themes), every component on one page (/playground), live from src/
 ```
 
 Adding or changing a component: see [CONTRIBUTING.md](CONTRIBUTING.md).

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";