@sakaniui/react 0.16.0 → 0.17.1

package/dist/components/AreaChart/AreaChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export type AreaChartVariant = 'default' | 'stacked' | 'step' | 'linear';
 export interface AreaChartDatum {
     label: string;
@@ -15,6 +16,10 @@ export interface AreaChartProps {
     seriesLabels?: [string, string?];
     size?: ChartSize;
     height?: number;
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (an entrance on mount, a soft glow and lift on hover, a frosted card). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const AreaChart: React.FC<AreaChartProps>;

package/dist/components/BarChart/BarChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export type BarChartVariant = 'default' | 'active' | 'multiple' | 'stacked' | 'negative' | 'horizontal';
 export interface BarChartDatum {
     label: string;
@@ -13,6 +14,10 @@ export interface BarChartProps {
     size?: ChartSize;
     /** Legend labels for `value` / `value2`, shown for "multiple" and "stacked". */
     seriesLabels?: [string, string?];
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (an entrance on mount, a soft glow and lift on hover, a frosted card). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const BarChart: React.FC<BarChartProps>;

package/dist/components/BarChart/index.d.ts

@@ -1,2 +1,2 @@
 export { BarChart, default } from './BarChart';
-export type { BarChartProps, BarChartDatum, BarChartVariant, ChartSize } from './BarChart';
+export type { BarChartProps, BarChartDatum, BarChartVariant, ChartSize, ChartAppearance } from './BarChart';

package/dist/components/DonutChart/DonutChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export interface DonutDatum {
     label: string;
     value: number;
@@ -13,6 +14,10 @@ export interface DonutChartProps {
     centerCaption?: string;
     /** Pixel height override, takes precedence over `size`'s preset. */
     height?: number;
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (turns into place on mount, the hovered slice lifts, a frosted card). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const DonutChart: React.FC<DonutChartProps>;

package/dist/components/FunnelChart/FunnelChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export interface FunnelDatum {
     label: string;
     value: number;
@@ -7,6 +8,14 @@ export interface FunnelDatum {
 export interface FunnelChartProps {
     data: FunnelDatum[];
     size?: ChartSize;
+    /** Dots streaming through the band, thinning where the funnel does. Default true; off for reduced motion. */
+    flow?: boolean;
+    /** Draw the loading state (the funnel's silhouette, a light gliding through it) instead of the chart. */
+    loading?: boolean;
+    /** How a stage's value is written in the header and the card. Defaults to a compact number (61.2K). */
+    formatValue?: (value: number) => string;
+    /** `rich`: the header, the drop-off chips, the stream of dots, the wipe-in and a frosted card. `default` is the Figma funnel. `flow` and `formatValue` apply to `rich` only. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const FunnelChart: React.FC<FunnelChartProps>;

package/dist/components/HeatmapChart/HeatmapChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export interface HeatmapChartProps {
     /** Row-major matrix of values; every row must be the same length. */
     data: number[][];
@@ -8,6 +9,10 @@ export interface HeatmapChartProps {
     /** Legend label for the tooltip's value row (Figma: "Revenue"). */
     valueLabel?: string;
     size?: ChartSize;
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (the cells arrive as a wave on mount, the hovered one lifts). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const HeatmapChart: React.FC<HeatmapChartProps>;

package/dist/components/LineChart/LineChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export type LineChartVariant = 'default' | 'linear' | 'step' | 'multiple' | 'dots' | 'custom-dots' | 'dots-colors' | 'label' | 'custom-label';
 export interface LineChartProps {
     /** Rows keyed by label plus one field per series. */
@@ -19,6 +20,10 @@ export interface LineChartProps {
      * on an ancestor. */
     height?: number;
     showLegend?: boolean;
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (an entrance on mount, a soft glow and lift on hover, a frosted card). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const LineChart: React.FC<LineChartProps>;

package/dist/components/PieChart/PieChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export type PieChartVariant = 'pie' | 'pie-no-separator' | 'label' | 'custom-label' | 'label-list' | 'donut' | 'donut-active' | 'donut-with-text' | 'stacked' | 'interactive';
 export interface PieDatum {
     label: string;
@@ -12,6 +13,10 @@ export interface PieChartProps {
     /** Big number shown in the center. Only rendered for "donut-with-text". */
     centerValue?: string;
     centerCaption?: string;
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (turns into place on mount, the hovered slice lifts, a frosted card). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const PieChart: React.FC<PieChartProps>;

package/dist/components/RadarChart/RadarChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export type RadarChartVariant = 'default' | 'dots' | 'dots-grid-none' | 'lines-only' | 'circle-grid' | 'circle-grid-no-lines' | 'grid-custom' | 'grid-filled' | 'circle-grid-filled' | 'multiple' | 'custom-label';
 export interface RadarDatum {
     label: string;
@@ -13,6 +14,16 @@ export interface RadarChartProps {
     size?: ChartSize;
     /** Legend labels for `value` / `value2`, shown for "multiple". */
     seriesLabels?: [string, string?];
+    /** Draw the loading state (the radar's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /**
+     * `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. `default` is the Figma look.
+     */
+    appearance?: ChartAppearance;
+    /** appearance="rich" only: the spoke crosshair and its card. Default true. */
+    interactive?: boolean;
     className?: string;
 }
 export declare const RadarChart: React.FC<RadarChartProps>;

package/dist/components/RadialChart/RadialChart.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+export type ChartAppearance = 'default' | 'rich';
 export type RadialChartVariant = 'multi' | 'grid' | 'text' | 'shape' | 'gauge-tick' | 'stacked' | 'stacked-3-layers' | 'stacked-label';
 export interface RadialDatum {
     label: string;
@@ -12,6 +13,10 @@ export interface RadialChartProps {
     size?: ChartSize;
     centerValue?: string;
     centerCaption?: string;
+    /** Draw the loading state (the chart's own silhouette, breathing) instead of the chart. */
+    loading?: boolean;
+    /** `rich`: the livelier look (turns into place on mount, the rings and gauges rise in). `default` is the Figma look. */
+    appearance?: ChartAppearance;
     className?: string;
 }
 export declare const RadialChart: React.FC<RadialChartProps>;