@sakaniui/react 0.16.0 → 0.17.0

package/AGENTS.md

@@ -251,7 +251,12 @@ lists its other names under `aliases` in `manifest.json`, and `search_components
   `get_component("Table")` for code that does). **StatCard** — one headline metric with trend. **ListItem** — a
   row in a list. **Charts** — pick by question: trend over time → Line/Area; compare categories → Bar;
   part of whole → Pie/Donut (few slices only); progress to a target → Radial; compare several measures →
-  Radar; drop-off → Funnel; intensity across two dimensions → Heatmap.
+  Radar; drop-off → Funnel; intensity across two dimensions → Heatmap. Every chart takes `loading` (pass it
+  while the data is on its way: the chart draws its own silhouette and keeps its height, so nothing below
+  moves) and `appearance="rich"` (an entrance when it appears, a soft lift and glow on hover, a frosted
+  tooltip; the radar gets a spoke crosshair, the funnel a stat header, drop-off chips and a stream of dots).
+  `appearance` defaults to the Figma look: reach for `rich` on a marketing or dashboard surface, not in a
+  dense table cell.
 - **Map / MapMarker / MapPopup / MapClusterLayer** — an interactive tile map with no map library. Put `MapMarker`
   (`pin`, `dot`, `cluster`) and `MapPopup` children inside `Map`, placed by `[latitude, longitude]` (latitude
   first). Give every marker a `label`; a marker with `onClick` is a button and `selected` is yours to set. The

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.17.0
+
+### Charts: loading states, and a richer look you opt into
+
+- **Every chart takes `loading`.** It draws the chart's own silhouette instead (a radar web, a funnel band, bars, a line,
+  a ring, a heatmap grid) in the surface's subtle fill, breathing in a soft stagger, with a light gliding through the
+  funnel and sweeping round the radar and the rings. It keeps the chart's height, so nothing below moves when the data
+  arrives, and it is announced as a busy status.
+- **`appearance="rich"` on every chart** (the default stays the Figma look, unchanged):
+  - Entrances, once, when the chart appears or its loading ends: bars grow out of their baseline in a stagger, lines and
+    areas draw in, the radar grows out of the centre (and morphs when the data changes), pies, donuts and radials turn
+    into place, heatmap cells arrive as a wave, the funnel wipes in. Hovering never replays them. Off for
+    `prefers-reduced-motion`.
+  - Hover: the hovered bar, slice or cell lifts with a soft shadow (the other bars no longer dim or flicker as the pointer crosses between bars); line and area points get a halo; the cursor line is
+    dashed; bars get a faint column behind them. Lines, area edges and radar shapes glow faintly in their own colour.
+  - A frosted tooltip card with a hairline edge.
+  - `RadarChart`: hover a spoke for a crosshair, a dot on each series and a card with the values and the gap between two
+    series ("Berlin 46 −20"); `interactive={false}` turns it off.
+  - `FunnelChart`: a header with each stage's value and share of the start, a drop-off chip at every step, and `flow`:
+    dots streaming through the band, thinning where the funnel does (the share that carries on past a step is the
+    data's), running only while on screen. `formatValue` sets how values are written (compact by default).
+- `ChartAppearance` is exported. `AreaChart`'s gradients are per chart, so two area charts on one page no longer share
+  (and repaint) each other's fills.
+
 ## 0.16.0
 
 - **`WorkingIndicator` (and `ChainOfThought`'s working line) shows the `ChatOrb` instead of the sparkle.** While the agent works, the