canny-ui-react 6.6.2 → 7.0.0

package/README.md

@@ -55,7 +55,7 @@ export function SignInCard() {
 
 ## Highlights
 
-- **Buttons** — 7 variants × 5 colors × 3 sizes × 3 shapes, click-position ripple powered by `motion`, attached/spaced groups, FAB with spring entrance, Radix-powered toggles and segmented controls
+- **Buttons** — 7 variants × 5 colors × 3 sizes × 3 shapes, click-position ripple powered by `motion`, `asChild` to render a router `<Link>` / `<a>` as a button, attached/spaced groups, FAB with spring entrance, Radix-powered toggles and segmented controls
 - **Inputs** — prefix/suffix slots, clear button, password toggle, validation states wired through `<Field>`
 - **Select / MultiSelect** — Radix Select + cmdk combobox with chip tokens, groups, descriptions, `maxItems` cap
 - **Layout primitives** — `<Box>`, `<Stack>`, `<Row>`, `<Grid>`, `<Container>` map props to utility classes, polymorphic `as`

package/dist/components/Accordion/Accordion.d.ts

@@ -28,9 +28,16 @@ type RootMultiple = AccordionRootBase & {
     defaultValue?: string[];
     /** Fires when the open set changes. */
     onValueChange?: (value: string[]) => void;
+    /** Start with every direct `AccordionItem` open (uncontrolled; ignored when `defaultValue`/`value` is set). */
+    expandAll?: boolean;
 };
 export type AccordionProps = (RootSingle | RootMultiple) & {
     variant?: 'plain' | 'bordered' | 'separated';
+    /**
+     * Remember the open item(s) in localStorage under this key and restore them on
+     * mount (uncontrolled accordions only). Storage failures are ignored.
+     */
+    persistKey?: string;
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx

package/dist/components/Alert/Alert.types.d.ts

@@ -18,6 +18,11 @@ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     action?: ReactNode;
     /** When provided, renders a close button that invokes this callback. */
     onDismiss?: () => void;
+    /**
+     * Play a short exit animation before `onDismiss` fires. Default `true`;
+     * skipped under `prefers-reduced-motion`. Set `false` for an immediate callback.
+     */
+    exitAnimation?: boolean;
     /** Accessible label for the dismiss button. */
     dismissLabel?: string;
 }

package/dist/components/Autocomplete/Autocomplete.types.d.ts

@@ -25,7 +25,7 @@ interface AutocompleteBase {
     searchPlaceholder?: string;
     /** Empty-state when no options match the search. */
     emptyText?: ReactNode;
-    /** Show a loading spinner inside the dropdown. */
+    /** Show a loading spinner inside the dropdown (appears after 150ms to avoid flicker). */
     loading?: boolean;
     /** Loading-state text. */
     loadingText?: ReactNode;
@@ -37,6 +37,24 @@ interface AutocompleteBase {
     disabled?: boolean;
     /** Show a clear button when something is selected. */
     clearable?: boolean;
+    /** Highlight the part of each label matching the search text. Default: `true`. */
+    highlightMatch?: boolean;
+    /** Values shown as a "Recent" group while the search box is empty. */
+    recentItems?: string[];
+    /** Heading for the `recentItems` group. Default: `'Recent'`. */
+    recentLabel?: string;
+    /**
+     * Controlled open state of the dropdown. Pair with `onOpenChange`; leave
+     * unset to let the component manage it.
+     */
+    open?: boolean;
+    /** Uncontrolled initial open state. Default: `false`. */
+    defaultOpen?: boolean;
+    /**
+     * Fires when the dropdown asks to open or close (trigger click, Esc, outside
+     * click, or a pick in single mode) — e.g. to load options on first open.
+     */
+    onOpenChange?: (open: boolean) => void;
     /** Field-threading: id forwarded to the trigger. */
     id?: string;
     /** Field-threading: forwarded ARIA. */

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,5 @@
-import type { AvatarProps, AvatarStackProps } from './Avatar.types';
+import type { AvatarGroupProps, AvatarProps, AvatarStackProps } from './Avatar.types';
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
 export declare const AvatarStack: import("react").ForwardRefExoticComponent<AvatarStackProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Overlapping avatars that collapse past `max` into a "+N" avatar. */
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Avatar/Avatar.types.d.ts

@@ -7,6 +7,11 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     status?: AvatarStatus;
     src?: string;
     alt?: string;
+    /**
+     * Full name. When there is no `src` (or the image fails to load) and no
+     * `children`, its initials are shown.
+     */
+    name?: string;
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
@@ -15,6 +20,15 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     sx?: SxProp;
     children?: ReactNode;
 }
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Avatars shown before collapsing the rest into "+N". Default 5. */
+    max?: number;
+    /** Real total when the children are only a page of a bigger set. Defaults to the child count. */
+    total?: number;
+    /** Size applied to the "+N" overflow avatar. Match your avatars. */
+    size?: AvatarSize;
+    children: ReactNode;
+}
 export interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }

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

@@ -1,2 +1,2 @@
-export { Avatar, AvatarStack } from './Avatar';
-export type { AvatarProps, AvatarStackProps, AvatarSize, AvatarStatus } from './Avatar.types';
+export { Avatar, AvatarStack, AvatarGroup } from './Avatar';
+export type { AvatarProps, AvatarStackProps, AvatarGroupProps, AvatarSize, AvatarStatus } from './Avatar.types';

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -11,6 +11,12 @@ export interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'chil
     /** Separator node between items. Default: chevron. */
     separator?: ReactNode;
     size?: 'sm' | 'md';
+    /**
+     * Collapse long trails: when there are more items than this, show the first
+     * item and the last `maxItems - 1`, with the hidden ones in an ellipsis menu.
+     * Minimum 2. Default: show everything.
+     */
+    maxItems?: number;
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx

package/dist/components/Button/Button.types.d.ts

@@ -24,6 +24,22 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     iconPosition?: ButtonIconPosition;
     /** Disable the MUI-style click ripple. Default: `false`. */
     disableRipple?: boolean;
+    /**
+     * Render the single child element instead of a `<button>` — typically a
+     * router `<Link>` or an `<a href>` — so a button that navigates keeps link
+     * behaviour (middle-click, "open in new tab", link semantics). The child gets
+     * the button's classes, icon, spinner and ripple, and its own content goes
+     * in the button's content slot. `disabled` / `loading` set `aria-disabled`,
+     * drop it from the tab order and cancel the click (links have no `disabled`
+     * attribute). The child must accept a ref and spread its props onto the DOM
+     * element. Default: `false`.
+     *
+     * @example
+     *   <Button asChild variant="outline" icon={<Pencil size={14} />}>
+     *     <Link href={`/workflows/${id}/edit`}>Edit</Link>
+     *   </Button>
+     */
+    asChild?: boolean;
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx

package/dist/components/Button/IconButton.d.ts

@@ -1,13 +1,23 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { ButtonProps } from './Button.types';
 export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'icon' | 'iconPosition'> {
     /** Icon element. Required. */
     icon: ReactNode;
     /** Accessible label. Required — icon-only buttons must have one. */
     'aria-label': string;
+    /**
+     * With `asChild`: the element to render as, e.g. `<Link href="/edit" />`.
+     * The icon is placed inside it.
+     */
+    children?: ReactElement;
 }
 /**
  * Convenience over `<Button shape="circle" icon={...} aria-label="…" />`.
  * Enforces `aria-label` at the type level for icon-only accessibility.
+ *
+ * @example
+ *   <IconButton icon={<Pencil size={16} />} aria-label="Edit" asChild>
+ *     <Link href={`/workflows/${id}/edit`} />
+ *   </IconButton>
  */
 export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { CSSProperties } from 'react';
 import type { SxProp } from '../Layout/sx';
+import type { Aggregate } from './chartScale';
 export interface BarSeries {
     /** Key into each datum for this series' value. */
     key: string;
@@ -21,7 +22,20 @@ export interface BarChartProps<D extends Record<string, unknown> = Record<string
     stacked?: boolean;
     grid?: boolean;
     legend?: boolean;
-    /** Format y-axis tick values. */
+    /** Clicking a legend entry hides / shows that series. Default `true`. */
+    legendToggle?: boolean;
+    /** Content shown instead of the chart when there is no data. Default "No data". */
+    empty?: ReactNode;
+    /**
+     * Max bars drawn. More categories than this are aggregated into contiguous buckets
+     * (labelled "first – last"). Default: as many as fit at ~6px each.
+     */
+    maxBars?: number;
+    /** How bucketed categories combine when `maxBars` kicks in. Default `'sum'`. */
+    aggregate?: Aggregate;
+    /** Entrance animation (and smooth transitions when data changes). Default `true`; off under reduced motion and for very large charts. */
+    animate?: boolean;
+    /** Format y-axis tick values. Default compact (1.2K, 3M). */
     yTickFormatter?: (value: number) => string;
     /** Format x-axis category labels. */
     xTickFormatter?: (value: string) => string;
@@ -40,4 +54,4 @@ export interface BarChartProps<D extends Record<string, unknown> = Record<string
      */
     sx?: SxProp;
 }
-export declare function BarChart<D extends Record<string, unknown>>({ data, xKey, series, height, label, stacked, grid, legend, yTickFormatter, xTickFormatter, renderTooltip, className, style, sx, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;
+export declare function BarChart<D extends Record<string, unknown>>({ data: dataProp, xKey, series: allSeries, height, label, stacked, grid, legend, legendToggle, empty, maxBars, aggregate, animate, yTickFormatter, xTickFormatter, renderTooltip, className, style, sx, }: BarChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/ChartA11y.d.ts

@@ -3,8 +3,10 @@ import type { ReactNode } from 'react';
  * Visually hidden data-table mirror of a chart. Screen readers get the exact
  * values the SVG conveys visually; sighted users never see it.
  */
-export declare function SrOnlyChartTable({ caption, head, rows, }: {
+export declare function SrOnlyChartTable({ caption, head, rows, maxRows, }: {
     caption: string;
     head: string[];
     rows: ReactNode[][];
+    /** Cap on rendered rows (evenly sampled, first/last kept) + a summary row. Default 200. */
+    maxRows?: number;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/ChartParts.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+/** Series keys hidden via the legend, plus a toggle. */
+export declare function useHiddenKeys(): [Set<string>, (key: string) => void];
+export interface LegendEntry {
+    key: string;
+    label: string;
+    color: string;
+}
+/** Legend whose entries are toggle buttons (`aria-pressed`) unless `interactive` is off. */
+export declare function ChartLegend({ entries, hidden, onToggle, interactive, }: {
+    entries: LegendEntry[];
+    hidden: Set<string>;
+    onToggle: (key: string) => void;
+    interactive?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** No-data message centered over the (empty) plot, so layout does not jump. */
+export declare function ChartEmpty({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { PieChartProps } from './PieChart';
+import type { ChartBaseProps } from './chartExtra';
+export interface DonutChartProps extends Omit<PieChartProps, 'centerLabel' | 'innerRadius' | 'className' | 'style' | 'sx' | 'empty' | 'label'>, ChartBaseProps {
+    /** Hole size as a fraction of the outer radius. Default `0.62`. */
+    innerRadius?: number;
+    /** Custom center content. Defaults to the animated total (+ `centerCaption`). */
+    centerLabel?: ReactNode;
+    /** Small caption under the animated total, e.g. "workflows". */
+    centerCaption?: ReactNode;
+    /** Format the center total. */
+    valueFormatter?: (value: number) => string;
+}
+/** Donut chart: `PieChart` with a hole, a center-label slot, a sweep-in and a count-up total. */
+export declare function DonutChart({ data, innerRadius, centerLabel, centerCaption, valueFormatter, label, animate, loading, empty, height, className, style, sx, ...rest }: DonutChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import type { ChartBaseProps } from './chartExtra';
+export interface FunnelDatum {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface FunnelChartProps extends ChartBaseProps {
+    /** Stages, top to bottom (usually descending). */
+    data: FunnelDatum[];
+    height?: number;
+    /** Show each stage's % of the first stage. Default `true`. */
+    showPercent?: boolean;
+    valueFormatter?: (value: number) => string;
+}
+/** Funnel: stage widths scale with value; hover shows step conversion. */
+export declare function FunnelChart({ data: rawData, height, showPercent, valueFormatter, label, animate, loading, empty, className, style, sx, }: FunnelChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/GanttChart.d.ts

@@ -0,0 +1,75 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { SxProp } from '../Layout/sx';
+import type { GanttScale } from './gantt/ganttUtils';
+export type { GanttScale } from './gantt/ganttUtils';
+export interface GanttTask {
+    id: string;
+    name: string;
+    /** `Date` or ISO string. Date-only strings (`2026-03-01`) are read as local midnight. */
+    start: Date | string;
+    /**
+     * `Date` or ISO string. A date-only / midnight end is *inclusive* (the bar covers that whole
+     * day); an end with a time of day is exact. Ignored for milestones.
+     */
+    end: Date | string;
+    /** 0–100. Draws a filled portion of the bar. */
+    progress?: number;
+    /** Bar color. Defaults to the group's palette color. */
+    color?: string;
+    /** Tasks sharing a `group` are listed together under a collapsible header. */
+    group?: string;
+    /** Ids of tasks that must finish before this one starts (draws arrows). */
+    dependsOn?: string[];
+    /** Render as a diamond at `start` instead of a bar. */
+    milestone?: boolean;
+}
+export interface GanttChartProps {
+    tasks: GanttTask[];
+    /** Zoom level. Defaults to a scale chosen from the date range; a scale too fine for the range is coarsened automatically. */
+    scale?: GanttScale;
+    /** Max height of the chart in px; taller content scrolls vertically and only visible rows are rendered. Default 360. */
+    height?: number;
+    /** Height of each task row in px. Default 36. */
+    rowHeight?: number;
+    /** Width of the sticky task-name column in px. Default 200. Draggable at the header edge; narrow containers clamp it. */
+    nameWidth?: number;
+    /**
+     * Pixels per day, overriding the scale's default. The timeline is capped at ~20,000px, so a
+     * value that would exceed it is reduced (coarser header scale) automatically.
+     */
+    pxPerDay?: number;
+    /** Show zoom in / out buttons. Default `false`. */
+    zoomControls?: boolean;
+    /** Accessible label for the chart (group `aria-label` + hidden table caption). */
+    label?: string;
+    /** Reference date for the today marker. Defaults to now. */
+    today?: Date | string;
+    /** Draw the today marker. Default `true`. */
+    showToday?: boolean;
+    /** Allow dragging bars to move / resize and arrow keys to move the focused bar. */
+    editable?: boolean;
+    /** Called when an editable bar is moved or resized (snapped to whole days). Update `tasks` in response. */
+    onTaskChange?: (next: GanttTask, prev: GanttTask) => void;
+    /** Called when a bar is clicked, or activated with Enter / Space. */
+    onTaskClick?: (task: GanttTask) => void;
+    /** Group names that start collapsed. */
+    defaultCollapsed?: string[];
+    /** Animate bars, progress and dependency arrows. Default `true`; always off under `prefers-reduced-motion`. */
+    animate?: boolean;
+    /** Show a skeleton instead of the chart. */
+    loading?: boolean;
+    /** Content shown instead of the chart when there are no tasks. Default "No tasks". */
+    empty?: ReactNode;
+    /** Custom tooltip body for a hovered task. */
+    renderTooltip?: (task: GanttTask) => ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
+     * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
+     * merges into inline style; responsive sx injects a scoped class. Applied to
+     * the chart's outer container.
+     */
+    sx?: SxProp;
+}
+export declare function GanttChart({ tasks, scale: scaleProp, height, rowHeight, nameWidth, pxPerDay, zoomControls, label, today, showToday, editable, onTaskChange, onTaskClick, defaultCollapsed, animate, loading, empty, renderTooltip, className, style, sx, }: GanttChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/GaugeChart.d.ts

@@ -0,0 +1,25 @@
+import type { ChartBaseProps } from './chartExtra';
+export interface GaugeThreshold {
+    /** Value at (and above) which this color applies. */
+    from: number;
+    color: string;
+}
+export interface GaugeChartProps extends Omit<ChartBaseProps, 'empty'> {
+    value: number;
+    min?: number;
+    max?: number;
+    /** Color steps, e.g. `[{ from: 0, color: 'var(--color-danger)' }, { from: 50, color: ... }]`. */
+    thresholds?: GaugeThreshold[];
+    /** Fixed arc color (ignored when `thresholds` match). */
+    color?: string;
+    /** `semi` = 180° dial, `radial` = 270° dial. */
+    variant?: 'semi' | 'radial';
+    /** Show a needle. Default `true` for `semi`. */
+    needle?: boolean;
+    height?: number;
+    /** Small caption under the value. */
+    caption?: string;
+    valueFormatter?: (value: number) => string;
+}
+/** Semi / radial gauge with an animated arc, needle and count-up value. */
+export declare function GaugeChart({ value: valueIn, min: minIn, max: maxIn, thresholds, color, variant, needle, height, caption, valueFormatter: formatter, label, animate, loading, className, style, sx, }: GaugeChartProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/Heatmap.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import type { ChartBaseProps } from './chartExtra';
+export interface HeatmapProps<D extends Record<string, unknown> = Record<string, unknown>> extends ChartBaseProps {
+    data: D[];
+    /** `matrix` = x by y grid; `calendar` = GitHub-style day grid. Default `matrix`. */
+    variant?: 'matrix' | 'calendar';
+    /** Matrix: key for the column category. Default `'x'`. */
+    xKey?: string;
+    /** Matrix: key for the row category. Default `'y'`. */
+    yKey?: string;
+    /** Key for the cell value. Default `'value'`. */
+    valueKey?: string;
+    /** Calendar: key holding a `yyyy-MM-dd` date. Default `'date'`. */
+    dateKey?: string;
+    /** Calendar: number of weeks shown, ending at `endDate`. Default `26`. */
+    weeks?: number;
+    /** Calendar: last day shown (`yyyy-MM-dd`). Defaults to the latest date in `data`. */
+    endDate?: string;
+    /** Matrix: explicit category order. */
+    xOrder?: string[];
+    yOrder?: string[];
+    /** Colors from lowest to highest value. Default: 5 steps of the primary token. */
+    colorScale?: string[];
+    /** Cell size in px. Default: up to 28 (matrix) / 13 (calendar), shrunk to fit the container (min 5). */
+    cellSize?: number;
+    /** Print the value inside matrix cells. */
+    showValues?: boolean;
+    /** Show the low-to-high legend. Default `true`. */
+    legend?: boolean;
+    valueFormatter?: (value: number) => string;
+    renderTooltip?: (params: {
+        title: string;
+        value: number | null;
+    }) => ReactNode;
+}
+/** Matrix or calendar heatmap with a configurable color scale. */
+export declare function Heatmap<D extends Record<string, unknown>>({ data: dataProp, variant, xKey, yKey, valueKey, dateKey, weeks: weeksProp, endDate, xOrder, yOrder, colorScale: colorProp, cellSize, showValues, legend, valueFormatter, renderTooltip, label, animate, loading, empty, className, style, sx, }: HeatmapProps<D>): import("react/jsx-runtime").JSX.Element;

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

@@ -13,10 +13,24 @@ export interface LineChartProps<D extends Record<string, unknown> = Record<strin
     area?: boolean;
     /** Stack the series (area charts). */
     stacked?: boolean;
-    /** Show point markers. */
+    /** Show point markers. Automatically skipped above ~100 visible points per series. */
     dots?: boolean;
+    /**
+     * Max points drawn per series. Longer series are reduced with LTTB (visual shape kept);
+     * the tooltip and keyboard navigation still use the full data. Default ~2 per plot pixel.
+     */
+    maxPoints?: number;
+    /** Entrance animation (and smooth transitions when data changes). Default `true`; off under reduced motion and for very large charts. */
+    animate?: boolean;
     grid?: boolean;
     legend?: boolean;
+    /** Clicking a legend entry hides / shows that series. Default `true`. */
+    legendToggle?: boolean;
+    /** Vertical guide line (and enlarged points) at the hovered category. Default `true`. */
+    crosshair?: boolean;
+    /** Content shown instead of the chart when there is no data. Default "No data". */
+    empty?: ReactNode;
+    /** Format y-axis tick values. Default compact (1.2K, 3M). */
     yTickFormatter?: (value: number) => string;
     xTickFormatter?: (value: string) => string;
     renderTooltip?: (params: {

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

@@ -14,13 +14,33 @@ export interface PieChartProps {
     /** Inner radius as a fraction of the outer radius (0 = pie, 0.6 = donut). */
     innerRadius?: number;
     legend?: boolean;
+    /** Clicking a legend entry hides / shows that slice. Default `true`. */
+    legendToggle?: boolean;
+    /** Content shown instead of the chart when there is no data. Default "No data". */
+    empty?: ReactNode;
     /** Custom tooltip body for a hovered slice. */
     renderTooltip?: (params: {
         datum: PieDatum;
         percent: number;
     }) => ReactNode;
-    /** Center label (e.g. a total) for donut charts. */
-    centerLabel?: ReactNode;
+    /**
+     * Center label (e.g. a total) for donut charts. May be a function receiving the hole's
+     * pixel `diameter` so the content can size itself.
+     */
+    centerLabel?: ReactNode | ((params: {
+        diameter: number;
+    }) => ReactNode);
+    /**
+     * Max slices drawn; the smallest are grouped into one "Other" slice (a toggle expands
+     * them). Default `10`; `0` or `Infinity` disables grouping.
+     */
+    maxSlices?: number;
+    /** Label of the grouped slice. Default "Other". */
+    otherLabel?: string;
+    /** Format values in the tooltip. Default: grouped thousands, compact above a billion. */
+    valueFormatter?: (value: number) => string;
+    /** Entrance animation (and smooth transitions when data changes). Default `true`; off under reduced motion and for very large charts. */
+    animate?: boolean;
     className?: string;
     style?: CSSProperties;
     /**
@@ -31,4 +51,6 @@ export interface PieChartProps {
      */
     sx?: SxProp;
 }
-export declare function PieChart({ data, height, label, innerRadius, legend, renderTooltip, centerLabel, className, style, sx, }: PieChartProps): import("react/jsx-runtime").JSX.Element;
+/** Share as text: "<0.1%" / "0.4%" for tiny slices, whole percent otherwise. */
+export declare function formatShare(frac: number): string;
+export declare function PieChart({ data, height, label, innerRadius, legend, legendToggle, empty, renderTooltip, centerLabel, maxSlices, otherLabel, valueFormatter, animate, className, style, sx, }: PieChartProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import type { ChartBaseProps } from './chartExtra';
+import type { BarSeries } from './BarChart';
+export interface RadarChartProps<D extends Record<string, unknown> = Record<string, unknown>> extends ChartBaseProps {
+    data: D[];
+    /** Key for each axis label. */
+    axisKey: string;
+    series: BarSeries[];
+    height?: number;
+    /** Outer ring value. Defaults to the data max. */
+    max?: number;
+    /** Number of concentric rings. Default `4`. */
+    levels?: number;
+    /** Fill the polygons. Default `true`. */
+    fill?: boolean;
+    legend?: boolean;
+    legendToggle?: boolean;
+    /**
+     * Scale every axis to its own maximum (for axes on wildly different scales). `'auto'`
+     * (default) turns it on only when no `max` is set and axis maxima differ by over 20x.
+     * Tooltips always show the real values.
+     */
+    normalize?: boolean | 'auto';
+}
+/** Spider / radar chart: one polygon per series across the axes. */
+export declare function RadarChart<D extends Record<string, unknown>>({ data: rawData, axisKey, series: allSeriesIn, height, max, levels, fill, legend, legendToggle, normalize, label, animate, loading, empty, className, style, sx, }: RadarChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/ScatterChart.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { ChartBaseProps } from './chartExtra';
+export interface ScatterChartProps<D extends Record<string, unknown> = Record<string, unknown>> extends ChartBaseProps {
+    data: D[];
+    xKey: string;
+    yKey: string;
+    /** Key for bubble size; omit for uniform dots. */
+    sizeKey?: string;
+    /** Key whose value splits points into colored groups (and the legend). */
+    groupKey?: string;
+    /** Key for the point name shown in the tooltip. */
+    nameKey?: string;
+    /** Colors by group (in order of first appearance) or a single color. */
+    colors?: string[];
+    /** Bubble radius range in px. Default `[4, 22]`. */
+    sizeRange?: [number, number];
+    height?: number;
+    /**
+     * Max dots drawn. Above this the plot is thinned to one dot per grid cell (per group) so the
+     * outline of the cloud is kept; hover and keyboard still see every point. Default 1500.
+     */
+    maxPoints?: number;
+    grid?: boolean;
+    legend?: boolean;
+    legendToggle?: boolean;
+    xTickFormatter?: (v: number) => string;
+    yTickFormatter?: (v: number) => string;
+    renderTooltip?: (params: {
+        datum: D;
+    }) => ReactNode;
+}
+/** Scatter plot with optional bubble size and color groups. */
+export declare function ScatterChart<D extends Record<string, unknown>>({ data: dataProp, xKey, yKey, sizeKey, groupKey, nameKey, colors, sizeRange, height, maxPoints, grid, legend, legendToggle, xTickFormatter, yTickFormatter, renderTooltip, label, animate, loading, empty, className, style, sx, }: ScatterChartProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/Sparkline.d.ts

@@ -0,0 +1,17 @@
+import type { ChartBaseProps } from './chartExtra';
+export interface SparklineProps<D extends Record<string, unknown> = Record<string, unknown>> extends Omit<ChartBaseProps, 'empty'> {
+    /** Numbers, or objects read through `valueKey`. */
+    data: Array<number | D>;
+    /** Key to read from object data. Default `'value'`. */
+    valueKey?: string;
+    variant?: 'line' | 'area' | 'bar';
+    width?: number;
+    height?: number;
+    color?: string;
+    /** Dot on the last point (line / area). Default `true`. */
+    showLast?: boolean;
+    /** Message shown when there is no data. Default is a dash. */
+    emptyText?: string;
+}
+/** Tiny inline chart with no axes. */
+export declare function Sparkline<D extends Record<string, unknown> = Record<string, unknown>>({ data, valueKey, variant, width, height, color, showLast, label, emptyText, animate, loading, className, style, sx, }: SparklineProps<D>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/StatCard.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { ChartBaseProps } from './chartExtra';
+export interface StatCardProps extends Omit<ChartBaseProps, 'empty' | 'label'> {
+    /** Metric name. */
+    label: string;
+    /** Number (counts up) or preformatted text. */
+    value: number | string;
+    /** Format a numeric `value`. */
+    valueFormatter?: (value: number) => string;
+    /** Change vs the previous period, in percent. Sign decides the arrow + color. */
+    delta?: number;
+    /** Text after the delta, e.g. "vs last week". */
+    deltaLabel?: string;
+    /** Treat a decrease as good (e.g. churn, latency). */
+    deltaInverse?: boolean;
+    /** Trend data for the inline sparkline. */
+    trend?: number[];
+    /** Sparkline color. */
+    color?: string;
+    icon?: ReactNode;
+}
+/** KPI card: animated value, delta chip and sparkline. */
+export declare function StatCard({ label, value, valueFormatter, delta, deltaLabel, deltaInverse, trend, color, icon, animate, loading, className, style, sx, }: StatCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Charts/cartesian.d.ts

@@ -0,0 +1,23 @@
+import type { KeyboardEvent, ReactNode } from 'react';
+/** Axis tick label: compact (1.2K / 3M), tiny values in exponent form, never NaN. */
+export declare function axisFmt(n: number): string;
+/** Tooltip value: exact up to 1e9 (grouped), compact beyond; `null` -> "no data". */
+export declare function tipFmt(n: number | null | undefined): string;
+/** Left gutter wide enough for the widest y label (clamped so tiny containers keep a plot). */
+export declare function gutterFor(labels: readonly string[], width: number, min?: number): number;
+/** Truncated x category label (full text stays in tooltip / aria). */
+export declare const shortLabel: (s: string, max?: number) => string;
+/** Evenly sampled rows for the sr-only table + a trailing "more" row (cap = SrOnlyChartTable default). */
+export declare function sampleRows(n: number, build: (i: number) => ReactNode[], cap?: number): ReactNode[][];
+/** Arrow/Home/End navigation over `count` ordered marks for a focusable svg. */
+export declare function indexKeys(count: number, current: number | null, set: (i: number | null) => void, step?: number): (e: KeyboardEvent) => void;
+/** Per-mark focusable/mouse handlers are only worth their cost below this many marks. */
+export declare const MARK_CAP = 60;
+/** `niceScale` that can never return a degenerate / non-finite domain. */
+export declare function safeScale(min: number, max: number, count?: number): {
+    lo: number;
+    hi: number;
+    ticks: number[];
+};
+/** Plain-object view of a datum (null / primitives -> {}). */
+export declare const rowOf: (d: unknown) => Record<string, unknown>;