What's new in Wavi
Every release of @waveinno/ui. Versions follow semver: a patch fixes, a minor adds, a major renames or removes, and says how to upgrade.
v1.0.3
LatestthemeBootScript(density, defaultTheme): a second argument,"system"(default, as before),"light"or"dark", sets the theme a first-time visitor sees. A saved choice still wins. The Wavi site now opens in light mode.
npx @waveinno/ui addfetches Pro components from the new site address, https://wavi.waveinno.app (--urlandWAVI_URLstill override it).
compact()andformatMoney(…, { compact: true })drop trailing zeros: 2.5 crore shows as2.5Cr, not2.50Cr(same for M and B).
- Breaking: four components move to Wavi Pro.
OrgChart(withorgIds,OrgNode),KanbanBoard,AppLauncher(withLauncherApp) andColorPicker/ColorPickerPopoverare no longer exported by@waveinno/ui.- To keep using them: run
npx @waveinno/ui add org-chart kanban app-launcher color-picker --key <licence>. It writes the source tocomponents/wavi-pro/, installs@radix-ui/react-popoverwhere needed, and prints the new import lines. Then changefrom "@waveinno/ui"to those lines. - Unchanged: the APIs, and the styles (they stay in
styles.css). - Already-published versions: up to 0.9.x stay MIT.
- To keep using them: run
- npx @waveinno/ui add <id>: adds a Wavi Pro component to your project with your licence key (remembered after the first success).
--list,--overwrite,--dir,--url. - Docs: the components menu is grouped by job (Actions, Forms, Date and time, Bangladesh, Overlays, Navigation…), with a filter, sections that fold, and Pro and New badges; the components index uses the same groups. Pro component pages show the live example to everyone and the source with a licence. The Kanban board has its own page.
- The CLI calls itself Wavi.
- Breaking: four components move to Wavi Pro.
- 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 doctorchecks a setup.--yesand 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.
- npx @waveinno/ui init: one-command setup.
- 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,toBongabdoandformatBanglaDate(the revised Bangladesh calendar),lakhCrore,groupLakh,parseBdPhone,BD_DIVISIONS,BD_DISTRICTS.
- PhoneInput: +880 mobile numbers typed any way, Bangla digits too; names the operator and returns
- MultiSelect: chips in the field, search, groups, select all, a
maxthat 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.
- Bangladesh kit (new, free):
- Licence: MIT.
@waveinno/uiis now MIT-licensed (© WAVEINNO): free to use in any project, commercial or not. It wasUNLICENSEDbefore. The Pro blocks and templates are sold separately under the WAVEINNO UI Pro Licence. - Input: a text adornment (
leading="+880",trailing="kg") pads the field by its length, so the value never runs under it. Icons keep the old padding. - Select: a leading icon in
SelectTriggersits beside the value instead of pushing it to the middle. - Docs site, Blocks: 91 blocks in 18 categories, at least 2 free and 3 Pro in each, from navbars and heroes to dashboards, onboarding tours and order tracking. Category pages have a sidebar of every category, an All / Free / Pro filter, numbered previews and the way to the next category. Free and Pro live in separate folders (
playground/blocks/free,playground/blocks/pro), andnpm run checkfails if a file and its tier disagree. - Docs site: large headings, prices and stats no longer overlap the line below; text on dark cards is readable.
- Licence: MIT.
- OrgChart is smooth: opening or closing a team never moves the person clicked (the chart is re-anchored before paint), the connector draws down and the team springs in one by one, closing lifts it away, and the view glides to show the new team (zooming out a little when it is wide). Panning glides on after a drag; Ctrl/⌘ + wheel zooms at the pointer; double-click zooms in. Connectors are 2px in a brand tint with a dot where a stem meets its team; no hairline gaps. The
listlook folds with a height animation. - Toaster positions: every corner and edge plus the middle of the screen (
middle-left,middle-center,middle-right);ToastPositiontype. The loading spinner of a promise toast now sits in its icon tile. - Avatar: the status dot stays on the face when the avatar sits in a stretching flex row (a hover card, a list).
- OrgChart is smooth: opening or closing a team never moves the person clicked (the chart is re-anchored before paint), the connector draws down and the team springs in one by one, closing lifts it away, and the view glides to show the new team (zooming out a little when it is wide). Panning glides on after a drag; Ctrl/⌘ + wheel zooms at the pointer; double-click zooms in. Connectors are 2px in a brand tint with a dot where a stem meets its team; no hairline gaps. The
- New components: Accordion (line, card, contained; chevron or plus), Pagination (outline, pill, gradient, underline, dots, jumper, minimal;
pageRange()), Steps (circle, glow, card, chevron, bar, dot; vertical), TreeView (select, or tri-state checkboxes; full keyboard), HoverCard (default, glass, dark), ScrollArea (overlay scrollbar, edge fades), TagInput (paste lists, validate, max, suggestions), Rating (half steps, labels, read-only with count), Carousel (scroll-snap, arrows inside or outside, dots or bar, autoplay), ColorPicker and ColorPickerPopover, OrgChart (card, gradient, avatar, compact, list; folding teams, pan, zoom, fit). - Menu collapses:
collapsible,collapsed/onCollapsedChange,collapsedModeicons(names in tooltips, counts on the icons) orhidden(folds away, as the AppShell panel);collapseShortcut(⌘B);MenuCollapseTrigger. - DateRangePicker redesigned: both ends and the length in the field, Start and End slots, presets showing their dates, a band that previews the span, Cancel and Apply. Behaviour change: the value now changes on Apply; pass
applyOnSelectfor the old commit-on-second-click. The calendar's range band is continuous along each week. - Slider is smooth: the thumb follows the pointer and settles on the step; clicks and keys glide. New looks fat, glow, stepped, minimal; vertical orientation.
- FileUpload looks: card, button, gallery (tiles with progress rings), avatar (
currentUrl). - ConfirmDialog looks: center, split, banner, sheet;
primarytone;hold(press and hold to confirm). - Docs: ⌘K search, a props table on every component page (read from the source), the new components' pages.
- New components: Accordion (line, card, contained; chevron or plus), Pagination (outline, pill, gradient, underline, dots, jumper, minimal;
- Works in Vite and any React 19 app. The package no longer imports Next.js: links and navigation go through a router adapter (
RouterProvider,useRouterAdapter,RouterLink).nextis now an optional peer dependency. - @waveinno/ui/next:
NextRouterProvider(andnextRouter), the Next.js adapter. Action needed for Next.js apps using AppShell: wrap the app in<NextRouterProvider>; without it the shell's links still work, but as plain links with full page loads. - createTheme(): a full light and dark palette from one brand colour (OKLCH), with radius and fonts; returns CSS and token maps.
hexToOklch,oklchToHex. - Theme tokens
--brand-1,--brand-2(the brand gradient) and--ink(dark panels); every gradient, glow and ink surface now follows them.--radius-scalescales every component's corners, not just the three named radii. Tailwind getsbg-ink,from-brand-1,to-brand-2. - Toast: the icon sits centred in its tile (sonner's 16 px icon box is resized to fit); the tone washes in from the icon's corner. StatCard: the gradient card's number is white again.
- Docs site in the repo (
npm run dev→ /docs): Next.js and Vite installation guides, typography and fonts, theming, routing, a page per component with live preview and copy-paste code, and a live theme builder.
- Works in Vite and any React 19 app. The package no longer imports Next.js: links and navigation go through a router adapter (
- RadioGroup, RadioGroupItem and RadioCard (whole-card choices with icon, description and a price or badge).
- Slider: single or range, value over the thumb while used (or always), labelled marks, gradient look.
- NumberInput: split (− value +) or stacked steppers, hold to repeat, ↑ ↓ with Shift for ten, clamps on blur, prefix and suffix, grouped display out of focus.
- PasswordInput: show / hide, Caps Lock warning, optional four-step strength meter;
passwordScore(). - PinInput: one-time codes and PINs; paste and SMS autofill fill every box; boxed, underline and split looks;
onComplete, mask, error shake. - FileUpload: dropzone or compact; rejected files listed with the reason; image thumbnails; upload progress and retry.
- Alert: info, success, warning, danger, neutral in soft, outline, accent and solid looks; actions, dismiss.
- Toaster and toast: sonner with the WAVEINNO look, tone icons in tiles and a tone wash; AppShell uses it.
- Spinner: ring, dots and wave in five sizes; keeps turning slowly under reduced motion.
- Kbd: keys and key combinations.
- Menu: an always-open menu for settings sidebars and side panels. Looks: soft, line, raised, gradient, dark, plus
panelandrail, the AppShell's module panel and icon rail as standalone menus (as in ParkingOS). The highlight slides to the chosen item; MenuSub folds a branch away, opens itself around the chosen item and lights its trigger when folded; MenuGroup, MenuSeparator; icon, description, count, badge, shortcut, danger,asChildfor links; arrow keys, Home / End, → / ← on branches. - AppLauncher: the switch-app button, 3×3 dots that fold into a × while open. Looks: grid, list, spotlight (list beside a preview), glass, dark;
trigger="chip"shows the current app by name; arrow keys move by tile or row.
- Menu: an always-open menu for settings sidebars and side panels. Looks: soft, line, raised, gradient, dark, plus
- DonutChart: no floating tooltip on hover; it covered the centre readout, which already shows the hovered slice.
- Tokens in
@waveinno/ui/styles.css: light and dark, three densities, motion that stops for reduced motion. - Brand: official
WaveinnoLogoandWaveinnoSymbol(from brand/waveinno-logo.svg),WaveMarkapp icon in seven tones drawn from the logo colours, squircle or round, flat or 3D, with shine / float / pulse / flip motion;PoweredBysignature (inline or floating, like WAVEMAP's),Watermark; logo file at@waveinno/ui/brand/. - Primitives: Button (primary, secondary, ghost, subtle, danger, link; gradient, glow, dark, outline, elevated, glass, white; pill shape, xl size), Badge (soft, solid, outline, dot, gradient, live), Input and Textarea with error / warning / success states and leading / trailing slots, FormField, Select, searchable Combobox, Checkbox, Switch, Segmented (pill, solid, outline, glass, sliding thumb, three sizes), Tabs (underline, pill, solid, enclosed, sliding indicator), Calendar, DatePicker, DateTimePicker, DateRangePicker with presets, TimePicker (12/24 h), Dialog (floating drawer that widens or goes full width; icon and eyebrow header; frosted footer), Sheet, ConfirmDialog (item preview, type-to-confirm), DropdownMenu (rich items, account header, glass and dark), Popover (arrow, glass, dark, brand), Tooltip, Progress (bar, gradient, striped, segmented, indeterminate) and ProgressRing, Avatar (name colours, status, verified, gradient ring, square), Skeleton.
- Patterns: DataTable with advanced filters (text, select, number, date; all / any; chips; saved in views), search, sort, columns, pinning, CSV export, five looks (default, striped, bordered, cards, minimal), inline cell editing with validation, bulk edit and bulk delete, sticky action column; UserCell and RowActions; PageHero; PageHeader; StatCard (icon, spark, target, gradient, comparison) and KpiCard; Money; ActivityFeed (list, cards, compact); ActivityTimeline; ChangeHistory (field diffs); ChangeNotes (threaded, replies); Note (tones, outline, gradient); Kanban; empty, error and loading states.
- Charts: TrendChart, BarChart, LineChart (comparison and target), DonutChart, GaugeChart, Heatmap, BarList, ChartCard and a validated palette.
- Shell: AppShell (rail → panel → content → drawer, ⌘K), theme and density controls, record drawer.
- Tokens in