@waveinno/ui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,35 +1,39 @@
-# Changelog
-
-Every release of `@waveinno/ui`. Add a line under **Unreleased** with each change; `./npmup.sh` moves it under the
-new version when you release. Versions follow [semver](https://semver.org): patch = fix, minor = new component or
-prop, major = a renamed or removed export or prop.
-
-## Unreleased
-
-## 0.1.0 — 2026-10-02
-
-First release on npm, as compiled JavaScript (one module per file, `"use client"` kept per module) with type
-definitions; no source or source maps are published.
-
-- **Tokens** in `@waveinno/ui/styles.css`: light and dark, three densities, motion that stops for reduced motion.
-- **Brand**: official `WaveinnoLogo` and `WaveinnoSymbol` (from brand/waveinno-logo.svg), `WaveMark` app icon in seven
-  tones drawn from the logo colours, squircle or round, flat or 3D, with shine / float / pulse / flip motion;
-  `PoweredBy` signature (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.
+# Changelog
+
+Every release of `@waveinno/ui`. Add a line under **Unreleased** with each change; `./npmup.sh` moves it under the
+new version when you release. Versions follow [semver](https://semver.org): patch = fix, minor = new component or
+prop, major = a renamed or removed export or prop.
+
+## Unreleased
+
+## 0.1.1 — 2026-10-02
+
+- DonutChart: no floating tooltip on hover; it covered the centre readout, which already shows the hovered slice.
+
+## 0.1.0 — 2026-10-02
+
+First release on npm, as compiled JavaScript (one module per file, `"use client"` kept per module) with type
+definitions; no source or source maps are published.
+
+- **Tokens** in `@waveinno/ui/styles.css`: light and dark, three densities, motion that stops for reduced motion.
+- **Brand**: official `WaveinnoLogo` and `WaveinnoSymbol` (from brand/waveinno-logo.svg), `WaveMark` app icon in seven
+  tones drawn from the logo colours, squircle or round, flat or 3D, with shine / float / pulse / flip motion;
+  `PoweredBy` signature (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.

package/dist/components/charts/donut-chart.d.ts

@@ -6,6 +6,8 @@ import * as React from "react";
  * Six slices at most: past that, a donut is a guessing game, so the smallest
  * fold into "Other" (pass `maxSlices`). The legend always shows value and
  * percentage, because angles are the hardest thing for eyes to compare.
+ * Hovering a slice (or its legend row) reads it out in the hole — no floating
+ * tooltip, which would sit on top of that same readout.
  */
 export interface DonutDatum {
     id: string;

package/dist/components/charts/donut-chart.js

@@ -1 +1 @@
-"use client";import{jsx as t,jsxs as u}from"react/jsx-runtime";import*as f from"react";import{Cell as D,Pie as M,PieChart as A,ResponsiveContainer as E,Tooltip as L}from"recharts";import{cn as y}from"../../lib/utils.js";import{ChartTooltip as P}from"./chart-card.js";import{SERIES as N}from"./palette.js";function K({data:g,format:c=l=>l.toLocaleString(),centerLabel:w="Total",centerValue:k,maxSlices:v=6,otherLabel:h="Other",height:R=220,legend:b="right",className:C}){const[l,m]=f.useState(null),o=f.useMemo(()=>{const e=[...g].sort((i,r)=>r.value-i.value),n=e.slice(0,v-(e.length>v?1:0)),d=e.slice(n.length),a=n.map((i,r)=>({...i,color:i.color??N[r%N.length]}));return d.length&&a.push({id:"__other",label:h,value:d.reduce((i,r)=>i+r.value,0),color:"var(--border2)"}),a},[g,v,h]),p=o.reduce((e,n)=>e+n.value,0),x=e=>p?`${(e/p*100).toFixed(e/p<.1?1:0)}%`:"0%",s=l!==null?o[l]:null;return u("div",{className:y("flex gap-5",b==="bottom"?"flex-col":"flex-col sm:flex-row sm:items-center",C),children:[u("div",{className:"relative mx-auto aspect-square w-full max-w-[220px] shrink-0",style:{height:R},children:[t(E,{width:"100%",height:"100%",children:u(A,{children:[t(L,{content:e=>{const{active:n,payload:d}=e,a=d?.[0]?.payload;return!n||!a?null:t(P,{rows:[{id:a.id,label:a.label,value:`${c(a.value)} \xB7 ${x(a.value)}`,color:a.color}]})}}),t(M,{data:o,dataKey:"value",nameKey:"label",innerRadius:"68%",outerRadius:"92%",paddingAngle:o.length>1?2:0,cornerRadius:4,stroke:"var(--raised)",strokeWidth:2,onMouseEnter:(e,n)=>m(n),onMouseLeave:()=>m(null),isAnimationActive:!0,animationDuration:700,children:o.map((e,n)=>t(D,{fill:e.color,fillOpacity:l===null||l===n?1:.35,style:{transition:"fill-opacity 150ms"}},e.id))})]})}),t("div",{className:"pointer-events-none absolute inset-0 grid place-items-center text-center",children:u("div",{children:[t("p",{className:"text-[11px] font-medium uppercase tracking-[0.06em] text-muted",children:s?s.label:w}),t("p",{className:"num disp mt-0.5 text-[20px] font-semibold leading-none text-text",children:s?c(s.value):k??c(p)}),s?t("p",{className:"num mt-1 text-[11.5px] text-muted",children:x(s.value)}):null]})})]}),b!=="none"?t("ul",{className:"min-w-0 flex-1 space-y-1",children:o.map((e,n)=>u("li",{onMouseEnter:()=>m(n),onMouseLeave:()=>m(null),className:y("flex items-center gap-2.5 rounded-ctl px-2 py-1.5 text-[13px] transition-colors",l===n&&"bg-hover"),children:[t("span",{className:"size-2.5 shrink-0 rounded-[3px]",style:{background:e.color},"aria-hidden":!0}),t("span",{className:"min-w-0 flex-1 truncate text-body",children:e.label}),t("span",{className:"num font-medium text-text",children:c(e.value)}),t("span",{className:"num w-12 text-right text-[12px] text-muted",children:x(e.value)})]},e.id))}):null]})}export{K as DonutChart};
+"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import*as f from"react";import{Cell as D,Pie as M,PieChart as A,ResponsiveContainer as E}from"recharts";import{cn as N}from"../../lib/utils.js";import{SERIES as y}from"./palette.js";function _({data:d,format:m=a=>a.toLocaleString(),centerLabel:R="Total",centerValue:k,maxSlices:p=6,otherLabel:x="Other",height:w=220,legend:v="right",className:C}){const[a,r]=f.useState(null),l=f.useMemo(()=>{const e=[...d].sort((o,i)=>i.value-o.value),n=e.slice(0,p-(e.length>p?1:0)),h=e.slice(n.length),b=n.map((o,i)=>({...o,color:o.color??y[i%y.length]}));return h.length&&b.push({id:"__other",label:x,value:h.reduce((o,i)=>o+i.value,0),color:"var(--border2)"}),b},[d,p,x]),u=l.reduce((e,n)=>e+n.value,0),g=e=>u?`${(e/u*100).toFixed(e/u<.1?1:0)}%`:"0%",s=a!==null?l[a]:null;return c("div",{className:N("flex gap-5",v==="bottom"?"flex-col":"flex-col sm:flex-row sm:items-center",C),children:[c("div",{className:"relative mx-auto aspect-square w-full max-w-[220px] shrink-0",style:{height:w},children:[t(E,{width:"100%",height:"100%",children:t(A,{children:t(M,{data:l,dataKey:"value",nameKey:"label",innerRadius:"68%",outerRadius:"92%",paddingAngle:l.length>1?2:0,cornerRadius:4,stroke:"var(--raised)",strokeWidth:2,onMouseEnter:(e,n)=>r(n),onMouseLeave:()=>r(null),isAnimationActive:!0,animationDuration:700,children:l.map((e,n)=>t(D,{fill:e.color,fillOpacity:a===null||a===n?1:.35,style:{transition:"fill-opacity 150ms"}},e.id))})})}),t("div",{className:"pointer-events-none absolute inset-0 grid place-items-center text-center",children:c("div",{children:[t("p",{className:"text-[11px] font-medium uppercase tracking-[0.06em] text-muted",children:s?s.label:R}),t("p",{className:"num disp mt-0.5 text-[20px] font-semibold leading-none text-text",children:s?m(s.value):k??m(u)}),s?t("p",{className:"num mt-1 text-[11.5px] text-muted",children:g(s.value)}):null]})})]}),v!=="none"?t("ul",{className:"min-w-0 flex-1 space-y-1",children:l.map((e,n)=>c("li",{onMouseEnter:()=>r(n),onMouseLeave:()=>r(null),className:N("flex items-center gap-2.5 rounded-ctl px-2 py-1.5 text-[13px] transition-colors",a===n&&"bg-hover"),children:[t("span",{className:"size-2.5 shrink-0 rounded-[3px]",style:{background:e.color},"aria-hidden":!0}),t("span",{className:"min-w-0 flex-1 truncate text-body",children:e.label}),t("span",{className:"num font-medium text-text",children:m(e.value)}),t("span",{className:"num w-12 text-right text-[12px] text-muted",children:g(e.value)})]},e.id))}):null]})}export{_ as DonutChart};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveinno/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "WAVEINNO design system — tokens, shell, primitives and patterns shared by every WAVEINNO product",
   "keywords": [
     "waveinno",