@sakaniui/react 0.16.0 → 0.17.0

package/dist/lib/ChartLoading.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export type ChartSkeletonKind = 'radar' | 'funnel' | 'bars' | 'bars-horizontal' | 'line' | 'area' | 'ring' | 'pie' | 'heatmap';
+export interface ChartSkeletonProps {
+    kind: ChartSkeletonKind;
+    height: number | string;
+    /** Heatmap only: its shape. */
+    rows?: number;
+    cols?: number;
+    /** Funnel only: how many stages. */
+    stages?: number;
+    label?: string;
+    className?: string;
+}
+export declare const ChartSkeleton: React.FC<ChartSkeletonProps>;
+export default ChartSkeleton;

package/dist/lib/ChartTooltip.d.ts

@@ -17,4 +17,22 @@ export interface ChartTooltipProps {
     formatter?: (value: ChartTooltipPayloadEntry['value'], name: ChartTooltipPayloadEntry['name']) => React.ReactNode;
 }
 export declare const ChartTooltip: React.FC<ChartTooltipProps>;
+/** One row of a hand-placed tooltip card. */
+export interface ChartTooltipRow {
+    color?: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** A change against another row, e.g. "-20". Coloured by its sign. */
+    delta?: string;
+}
+/**
+ * The same card as `ChartTooltip`, for the charts that place their own hover card (radar, funnel, heatmap) instead of
+ * handing it to Recharts. `style` positions it; it does not shift itself.
+ */
+export declare const ChartTooltipCard: React.FC<{
+    title?: React.ReactNode;
+    rows: ChartTooltipRow[];
+    style?: React.CSSProperties;
+    className?: string;
+}>;
 export default ChartTooltip;

package/dist/lib/useChartEntrance.d.ts

@@ -0,0 +1,9 @@
+/**
+ * True for the first moments after a chart appears (on mount, or when `loading` ends), then false for good. The
+ * rich charts key their entrance animations on it (`data-entering`), so an entrance plays once and never again:
+ * Recharts re-renders and can remount a bar or a slice on hover, and an animation that is still in the stylesheet
+ * would replay every time it did.
+ *
+ * A layout effect, so the attribute is in place before the first paint and the shapes never flash at full size.
+ */
+export declare function useChartEntrance(on: boolean, ms?: number): boolean;

package/dist/lib/useReducedMotion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * True while the visitor has asked their system for less motion. The charts use it to skip their entrance and flow
+ * animations (and the morph between data sets); the server snapshot is `false`, so a server-rendered chart is the
+ * normal one until the client reads the real preference.
+ */
+export declare function useReducedMotion(): boolean;

package/dist/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 6,
   "name": "@sakaniui/react",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Machine-readable contract of the SakaniUI React library, generated from its TypeScript source.",
   "docs": "https://www.sakaniui.com",
   "guide": "https://www.sakaniui.com/llms-full.txt",
@@ -24,7 +24,7 @@
     "@sakaniui/react/emoji": "Fluent Emoji (full colour): EmojiName, one module each (1594 emoji, 311 with skin tones)."
   },
   "conventions": {
-    "version": "This manifest describes @sakaniui/react@0.16.0. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything newer than that does not exist there.",
+    "version": "This manifest describes @sakaniui/react@0.17.0. Each component has `since`, the first release that contained it; a prop added later has its own `since`, and a value added later is listed in the prop's `valuesSince`. If the project has an older version installed, anything newer than that does not exist there.",
     "acceptsNativeProps": "Components forward native HTML attributes (className, style, aria-*, event handlers) to their root element unless a prop says otherwise; only the props that are specific to SakaniUI are listed here.",
     "accessibleName": "When `contract.requiresAccessibleName` is true, a required prop (aria-label, aria-labelledby or an alt text) is the only thing that names the control or image. Do not omit it.",
     "tokens": "Use only the token names listed under `tokens`. Colour tokens follow the theme (the `.dark` class flips them); do not hard-code colours.",
@@ -908,6 +908,26 @@
           "type": "number",
           "required": false
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (an entrance on mount, a soft glow and lift on hover, a frosted card).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -1404,6 +1424,26 @@
           "default": "['Value', 'Value 2']",
           "description": "Legend labels for `value` / `value2`, shown for \"multiple\" and \"stacked\"."
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (an entrance on mount, a soft glow and lift on hover, a frosted card).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -3732,6 +3772,26 @@
           "required": false,
           "description": "Pixel height override, takes precedence over `size`'s preset."
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (turns into place on mount, the hovered slice lifts, a frosted card).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -4212,6 +4272,40 @@
           ],
           "default": "md"
         },
+        {
+          "name": "flow",
+          "type": "boolean",
+          "required": false,
+          "default": true,
+          "description": "Dots streaming through the band, thinning where the funnel does. Default true; off for reduced motion.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the funnel's silhouette, a light gliding through it) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "formatValue",
+          "type": "((value: number) => string)",
+          "required": false,
+          "description": "How a stage's value is written in the header and the card. Defaults to a compact number (61.2K).",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "description": "`rich`: the header, the drop-off chips, the stream of dots, the wipe-in and a frosted card. `flow` and `formatValue` apply to `rich` only.",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -4289,6 +4383,26 @@
           ],
           "default": "md"
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (the cells arrive as a wave on mount, the hovered one lifts).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -4746,6 +4860,26 @@
           "type": "boolean",
           "required": false
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (an entrance on mount, a soft glow and lift on hover, a frosted card).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -5309,13 +5443,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@16359",
+                "name": "__@iterator@16418",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@16389",
+                "name": "__@unscopables@16448",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -5891,13 +6025,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@16359",
+                "name": "__@iterator@16418",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@16389",
+                "name": "__@unscopables@16448",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -6281,13 +6415,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@16359",
+                "name": "__@iterator@16418",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@16389",
+                "name": "__@unscopables@16448",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -6588,13 +6722,13 @@
                 "description": "Returns the item located at the specified index."
               },
               {
-                "name": "__@iterator@16359",
+                "name": "__@iterator@16418",
                 "type": "() => ArrayIterator<number>",
                 "required": true,
                 "description": "Iterator"
               },
               {
-                "name": "__@unscopables@16389",
+                "name": "__@unscopables@16448",
                 "type": "{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; concat?: boolean | undefined; join?: boolean | undefined; reverse?: boolean | undefined; shift?: boolean | undefined; slice?: boolean | undefined; sort?: boolean | undefined; splice?: boolean | undefined; unshift?: boolean | undefined; indexOf?: boolean | undefined; lastIndexOf?: boolean | undefined; every?: boolean | undefined; some?: boolean | undefined; forEach?: boolean | undefined; map?: boolean | undefined; filter?: boolean | undefined; reduce?: boolean | undefined; reduceRight?: boolean | undefined; find?: boolean | undefined; findIndex?: boolean | undefined; fill?: boolean | undefined; copyWithin?: boolean | undefined; entries?: boolean | undefined; keys?: boolean | undefined; values?: boolean | undefined; includes?: boolean | undefined; flatMap?: boolean | undefined; flat?: boolean | undefined; at?: boolean | undefined; [Symbol.iterator]?: boolean | undefined; readonly [Symbol.unscopables]?: boolean | undefined; }",
                 "required": true,
                 "description": "Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement."
@@ -7367,6 +7501,26 @@
           "type": "string",
           "required": false
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (turns into place on mount, the hovered slice lifts, a frosted card).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -8245,6 +8399,34 @@
           "default": "['Value', 'Value 2']",
           "description": "Legend labels for `value` / `value2`, shown for \"multiple\"."
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the radar's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look. Shapes get a soft gradient fill, a crisp edge and a glow, grow out of the centre on mount and morph when the data changes, and hovering a spoke draws a crosshair, a dot on each series and a card with the values and the gap between two series.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "interactive",
+          "type": "boolean",
+          "required": false,
+          "default": true,
+          "description": "appearance=\"rich\" only: the spoke crosshair and its card. Default true.",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",
@@ -8331,6 +8513,26 @@
           "type": "string",
           "required": false
         },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "required": false,
+          "default": false,
+          "description": "Draw the loading state (the chart's own silhouette, breathing) instead of the chart.",
+          "since": "0.17.0"
+        },
+        {
+          "name": "appearance",
+          "type": "\"default\" | \"rich\"",
+          "required": false,
+          "values": [
+            "default",
+            "rich"
+          ],
+          "default": "default",
+          "description": "`rich`: the livelier look (turns into place on mount, the rings and gauges rise in).",
+          "since": "0.17.0"
+        },
         {
           "name": "className",
           "type": "string",