@flood-md/react 0.2.11 → 0.2.13

package/README.md

@@ -6,11 +6,22 @@ HTML semantics and refs, no third-party component library or Tailwind dependency
 Named imports support tree shaking in optimizing ES-module bundlers. Import the
 shared stylesheet explicitly; styles are not split by component.
 
+Sheet is a bottom-aligned Drawer for short tasks, navigation and touch-friendly
+choices. It fits short content, caps long content to the viewport, and keeps
+Drawer dismissal, focus restoration, body scrolling and the optional footer.
+
 SegmentedControl options can display a `count` alongside the label, for example
 `{value: "pending", label: "Pending", count: 2}`. Use this for a small, mutually
 exclusive choice that updates one collection. The count is read with the visible
 label and does not change the submitted value.
 
+Version 0.2.12 adds opt-in DataTable column visibility. Set
+`showColumnVisibility` for the Columns menu, and supply `hiddenColumnIds` and
+`onHiddenColumnIdsChange` when the host saves preferences. The active sort and
+record-opening columns stay visible. See [DataTable](../../docs/components/data-table.md).
+Pass the Columns control from `toolbar={({ columns }) => …}` into
+`CollectionToolbar.actions` to keep it alongside search and filters.
+
 The 0.2.11 candidate adds optional DataTable row `primaryAction` for opening an
 in-place detail panel, plus `toolbar` and `inset="roomy"` for a shared table edge.
 The title is a native button and the rest of the row also responds to pointer
@@ -46,7 +57,7 @@ the interactive size. It defaults to size; shrinking a supporting glyph must
 not shrink its target or bypass IconSlot with a custom SVG width. Existing glyph
 roles at a 16px root are 2xs=14px, xs/sm=16px and md/lg=20px.
 
-This package documents the **0.2.11** source API. Keep Flood package versions aligned and follow the guide matching
+This package documents the **0.2.13** source API. Keep Flood package versions aligned and follow the guide matching
 your installed declarations; source changes do not modify an existing npm release.
 
 NavigationItem (0.2.11 candidate) is the shared small row for destinations,
@@ -431,6 +442,10 @@ edge-to-edge content when the host already provides safe padding. The default
 padding can wrap text and change content height. Native
 fallback scrollbars retain their platform behavior.
 
+AppShell content mode uses the same ScrollArea. For a workspace whose layout
+already provides clearance, `scrollContentInset="none"` keeps the content
+width stable when rails appear. The default protects edge-to-edge content.
+
 ```tsx
 <ScrollArea aria-label="Activity" style={{ maxHeight: "12rem" }}>
   <Stack gap="4">{/* Long activity content */}</Stack>
@@ -604,8 +619,9 @@ Available in 0.2.3. Import Flood CSS and use FloodRoot for dark foundations.
 
 Disclosure corner geometry: Accordion headers have square internal seams. Only
 the first header has upper shell corners, and only a closed last header has lower
-shell corners. An open Collapsible header has square lower corners where its
-panel begins. Hover backgrounds follow that same shape without clipping focus.
+shell corners. A standalone Collapsible has an inset, rounded trigger and a
+separate gap before the revealed content. The trigger label and panel share
+an inline edge.
 
 
 ## Tooltip, Popover and Dialog
@@ -804,7 +820,12 @@ assertive uses role=alert. Choose urgency deliberately for dynamically inserted
 content. Announcements depend on actual assistive technology; initial static
 markup is not guaranteed to be read aloud. No focus movement, auto-dismiss,
 timeout or built-in close/action button is supplied. Compose named host actions
-inside children when needed. Alert is separate from Dialog and future Toast.
+inside children when needed. A titleless Alert centers its glyph alongside a
+single Inline row. Subtle and ghost actions inherit the feedback tint on
+interactive states. Use a floating ToastRegion for brief operation results.
+ToastRegion defaults to `placement="bottom-end"`. Choose `bottom-start`,
+`top-end` or `top-start` for a different logical corner, or `inline` to
+embed it in a layout. New floating cards enter from their placement edge.
 
 See the [WAI Meter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/),
 [Alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) and
@@ -953,6 +974,9 @@ visually while retaining their full text/title. A hidden counter frees its slot.
 The host owns accepted changes, captured IDs, confirmation and focus after the
 bar disappears. Positioning is host-owned: use a stable bounded width for a
 floating rail, plus viewport safe-area spacing and measured scroll clearance.
+For table selection, place the rail at the viewport's bottom center. Set
+`showSelection={false}` on DataTable to keep its count available to assistive
+technology while BulkActionBar displays the visible count.
 
 OverflowActions also accepts leading/trailing slots and maxVisibleActions. Slot
 width is reserved before measuring commands; use action owners in those slots
@@ -963,6 +987,9 @@ under one named action panel. After hydration it uses one Tab entry, directional
 arrows, Home/End and optional looping. Disabled/hidden actions are skipped. Arrows
 move focus, not activation. Horizontal order follows writing direction. In vertical
 toolbars open Menu with Enter/Space; horizontal menus retain Up/Down opening.
+A vertical pill centers its actions on a single axis. Use same-size icon controls
+with accessible names for a compact rail. Use a rounded toolbar for a vertical
+group of labeled actions.
 Keep text inputs and independent selection widgets outside this action-only API.
 Native child handlers and refs remain attached; Toolbar owns their tabIndex while
 mounted and restores original attributes on cleanup. Without JavaScript, native
@@ -1109,6 +1136,7 @@ relative path, without reading their contents. Single mode replaces its selectio
 
 AlertDialog (0.2.5) is a concise confirmation, composed from Flood's
 native modal layer and Button. Supply title, description, trigger and onConfirm.
+Line breaks in the description separate distinct thoughts while allowing each line to wrap.
 Cancel receives initial focus; Escape cancels; outside clicks do not dismiss.
 Tab containment, background inertness, scroll lock and return focus reuse Dialog.
 Translate confirmLabel/cancelLabel. onConfirm runs before requesting close, while
@@ -1145,7 +1173,8 @@ The CSS build assembles the original component styles into the shared stylesheet
 
 
 Section headingLevel controls native h2–h6 semantics. Its independent headingSize
-uses the existing Heading roles (section/page/large/display), defaulting to section.
+uses the Heading roles (group/section/page/large/display), defaulting to section.
+Choose group for a compact section inside a Drawer or another constrained panel.
 Keep document hierarchy meaningful when changing visual emphasis.
 
 ## Editable and TagInput · 0.2.7
@@ -1192,8 +1221,11 @@ when a query changes; ready rows must match pageSize/totalRows. Selection defaul
 to the supplied page in server mode and the full collection in client mode.
 Server selectionScope="dataset" requires controlled selectedIds/onSelectionChange;
 the host validates IDs outside the page. Checkboxes only select the current page.
-This API does not fetch, cancel requests, select an entire remote query, virtualize
-or manage column visibility/resizing/pinning.
+The host owns request execution and cancellation, remote query selection and
+virtualization. DataTable supports optional column visibility, width preferences,
+logical edge pinning and expandable record details. Use Sparkline for a compact
+trend cell. See [DataTable](../../docs/components/data-table.md) and
+[Sparkline](../../docs/components/sparkline.md).
 
 DatePicker and DateRangePicker pass viewLabels to their calendars. Calendar panels
 use minimal Popover chrome, with Escape/selection/trigger dismissal; there is no

package/dist/app-shell.js

@@ -5,7 +5,7 @@ const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLa
 export const ApplicationTopBar = /* @__PURE__ */ forwardRef(function ApplicationTopBar({ start, end, bordered, className, ...props }, ref) {
     return _jsxs("header", { ...props, ref: ref, className: ["flood-app-top-bar", className].filter(Boolean).join(" "), "data-bordered": bordered || undefined, children: [start != null && _jsx(Inline, { align: "center", gap: "2", className: "flood-app-top-bar__start", children: start }), end != null && _jsx(Inline, { align: "center", gap: "2", className: "flood-app-top-bar__end", children: end })] });
 });
-export const ApplicationShell = /* @__PURE__ */ forwardRef(function ApplicationShell({ navigation, navigationSide, navigationDrawer, topBar, footer, scroll, mainId, mainAs: Main = "main", mainLabel, mainRef, scrollLabel, scrollOrientation = "both", skipLabel, children, className, ...props }, ref) {
+export const ApplicationShell = /* @__PURE__ */ forwardRef(function ApplicationShell({ navigation, navigationSide, navigationDrawer, topBar, footer, scroll, mainId, mainAs: Main = "main", mainLabel, mainRef, scrollLabel, scrollOrientation = "both", scrollContentInset = "scrollbar", skipLabel, children, className, ...props }, ref) {
     const generatedId = useId();
     const contentId = mainId ?? `flood-app-${generatedId}`;
     const root = useRef(null);
@@ -61,6 +61,6 @@ export const ApplicationShell = /* @__PURE__ */ forwardRef(function ApplicationS
         ? topBar(navigationTrigger)
         : _jsxs(_Fragment, { children: [navigationTrigger && _jsx(AppTopBar, { start: navigationTrigger }), topBar] });
     return _jsxs("div", { ...props, ref: root, className: ["flood-app-shell", className].filter(Boolean).join(" "), "data-scroll": scroll, children: [_jsx(SkipLink, { href: `#${contentId}`, children: skipLabel }), navigationSide === "start" && navigationSlot, _jsxs("div", { className: "flood-app-shell__workspace", children: [chrome, _jsx(Main, { ref: mainRef, id: contentId, "aria-label": mainLabel, tabIndex: -1, className: "flood-app-shell__main", children: scroll === "content"
-                            ? _jsx(ScrollArea, { orientation: scrollOrientation, "aria-label": scrollLabel, className: "flood-app-shell__scroll", children: children })
+                            ? _jsx(ScrollArea, { orientation: scrollOrientation, contentInset: scrollContentInset, "aria-label": scrollLabel, className: "flood-app-shell__scroll", children: children })
                             : children }), footer] }), navigationSide === "end" && navigationSlot] });
 });

package/dist/box-plot.d.ts

@@ -0,0 +1,2 @@
+import { type BoxPlotProps } from "./index.js";
+export declare const DistributionBoxes: import("react").ForwardRefExoticComponent<BoxPlotProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/box-plot.js

@@ -0,0 +1,148 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+import { placeOverlay } from "./overlay-runtime.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+const useChartLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const stats = ["low", "q1", "median", "q3", "high"];
+const defaults = {
+    low: "Lower whisker", q1: "Q1", median: "Median", q3: "Q3", high: "Upper whisker", outliers: "Outliers",
+};
+const tooltipRows = [[2], [1, 3], [0, 4], [5]];
+export const DistributionBoxes = /* @__PURE__ */ forwardRef(function DistributionBoxes({ label, items, domain, formatValue = number.format, formatAxisValue = formatValue, statisticLabels, emptyLabel = "No observations", missingLabel = "No data", navigationLabel = "Use the arrow keys to explore groups, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const plot = useRef(null);
+    const tooltip = useRef(null);
+    const [cursor, setCursor] = useState(0);
+    const [hover, setHover] = useState();
+    const [touch, setTouch] = useState();
+    const [focused, setFocused] = useState(false);
+    const ids = new Set();
+    let min = Infinity;
+    let max = -Infinity;
+    for (const { id, label: name, summary, outliers = [] } of items) {
+        if (!id.trim() || ids.has(id) || !name.trim())
+            throw new Error("Flood BoxPlot needs unique IDs and nonempty labels");
+        ids.add(id);
+        if (!summary) {
+            if (outliers.length)
+                throw new RangeError("Flood BoxPlot outliers require a summary");
+            continue;
+        }
+        const values = stats.map(key => summary[key]);
+        if (values.some((value, i) => !Number.isFinite(value) || (i > 0 && value < values[i - 1]))) {
+            throw new RangeError("Flood BoxPlot statistics must be finite and ordered from low to high");
+        }
+        min = Math.min(min, summary.low);
+        max = Math.max(max, summary.high);
+        for (const value of outliers) {
+            if (!Number.isFinite(value) || (value >= summary.low && value <= summary.high)) {
+                throw new RangeError("Flood BoxPlot outliers must be finite and outside the whiskers");
+            }
+            min = Math.min(min, value);
+            max = Math.max(max, value);
+        }
+    }
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || domain[0] > min || domain[1] < max)) {
+        throw new RangeError("Flood BoxPlot domain must have finite increasing bounds containing every observation");
+    }
+    const hasData = min <= max;
+    const [floor, ceiling] = domain ?? [min, max];
+    const span = ceiling - floor;
+    const position = (value) => {
+        if (span === 0)
+            return 50;
+        return 100 * (Number.isFinite(span) ? (value - floor) / span : (value / 2 - floor / 2) / (ceiling / 2 - floor / 2));
+    };
+    const last = items.length - 1;
+    const active = Math.min(hover ?? touch ?? cursor, last);
+    const item = items[active];
+    const summary = item?.summary;
+    const inspecting = hover !== undefined || touch !== undefined || focused;
+    const readouts = summary ? stats.map(key => ({
+        label: statisticLabels?.[key] ?? defaults[key], value: formatValue(summary[key]),
+    })) : [];
+    if (item?.outliers?.length) {
+        readouts.push({ label: statisticLabels?.outliers ?? defaults.outliers, value: number.format(item.outliers.length) });
+    }
+    const valueText = [item?.label, ...(summary ? readouts.map(entry => `${entry.label}: ${entry.value}`) : [missingLabel])].join(", ");
+    useChartLayoutEffect(() => {
+        const panel = tooltip.current;
+        const frame = plot.current;
+        if (!panel || !frame)
+            return;
+        const mark = frame.querySelector("[data-active] .flood-box-plot__median, [data-active] .flood-box-plot__missing");
+        if (!mark)
+            return;
+        const positionTooltip = () => {
+            const bounds = frame.getBoundingClientRect();
+            if (!bounds.width || !frame.offsetWidth)
+                return;
+            const marker = mark.getBoundingClientRect();
+            const scale = bounds.width / frame.offsetWidth;
+            const gap = parseFloat(getComputedStyle(panel).columnGap) * scale;
+            const size = panel.getBoundingClientRect();
+            const x = (marker.left + marker.right) / 2;
+            const y = (marker.top + marker.bottom) / 2;
+            const anchor = { left: x, right: x, top: y, bottom: y, width: 0, height: 0 };
+            const horizontalRoom = size.width + 2 * gap;
+            const side = bounds.right - x >= horizontalRoom ? "right"
+                : x - bounds.left >= horizontalRoom ? "left"
+                    : y - bounds.top < bounds.bottom - y ? "bottom" : "top";
+            const { left, top } = placeOverlay(anchor, size, bounds, side, "center", gap);
+            panel.style.left = `${(left - bounds.left) / scale}px`;
+            panel.style.top = `${(top - bounds.top) / scale}px`;
+            panel.dataset.positioned = "";
+        };
+        positionTooltip();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(positionTooltip);
+        observer.observe(frame);
+        observer.observe(panel);
+        return () => observer.disconnect();
+    }, [active, inspecting, item, formatValue, floor, ceiling]);
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHover(undefined);
+                setTouch(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHover(undefined);
+        setTouch(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(last, next)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-box-plot", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: hasData ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { ref: plot, className: "flood-box-plot__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : `${label}. ${valueText}`, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? items.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHover(undefined), children: [_jsx("div", { className: "flood-box-plot__rows", "aria-hidden": "true", children: items.map(({ id, label: name, summary: values, outliers }, index) => _jsxs("div", { className: "flood-box-plot__row", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                    setHover(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                    setTouch(previous => previous === index ? undefined : index); }, children: [_jsx(Text, { className: "flood-box-plot__category", size: "helper", tone: "subtle", dir: "auto", title: name, children: name }), _jsxs("div", { className: "flood-box-plot__track", children: [values && _jsxs(_Fragment, { children: [_jsx("span", { className: "flood-box-plot__whisker", "data-side": "start", style: { left: `${position(values.low)}%`, right: `${100 - position(values.q1)}%` } }), _jsx("span", { className: "flood-box-plot__whisker", "data-side": "end", style: { left: `${position(values.q3)}%`, right: `${100 - position(values.high)}%` } }), _jsx("span", { className: "flood-box-plot__box", style: { left: `${position(values.q1)}%`, right: `${100 - position(values.q3)}%` } }), _jsx("span", { className: "flood-box-plot__median", style: { left: `${position(values.median)}%` } }), outliers?.map((value, i) => _jsx("span", { className: "flood-box-plot__outlier", style: { left: `${position(value)}%` } }, i))] }), !values && _jsx("span", { className: "flood-box-plot__missing" })] })] }, id)) }), _jsxs("div", { className: "flood-box-plot__axis", "aria-hidden": "true", children: [_jsx(Text, { size: "helper", tone: "subtle", children: formatAxisValue(floor) }), floor !== ceiling && _jsxs(_Fragment, { children: [_jsx(Text, { size: "helper", tone: "subtle", children: formatAxisValue(floor / 2 + ceiling / 2) }), _jsx(Text, { size: "helper", tone: "subtle", children: formatAxisValue(ceiling) })] })] }), inspecting && item && _jsxs(Surface, { ref: tooltip, className: "flood-chart__tooltip flood-box-plot__tooltip", "aria-hidden": "true", padding: "2", elevation: "raised", children: [_jsx(Text, { size: "helper", dir: "auto", children: item.label }), summary ? tooltipRows.map(([start, end]) => {
+                                    const first = readouts[start];
+                                    if (!first)
+                                        return null;
+                                    const last = end === undefined ? undefined : readouts[end];
+                                    return _jsxs("div", { className: "flood-box-plot__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", dir: "auto", children: start === 0 ? statisticLabels?.whiskers ?? "Whiskers" :
+                                                    last ? `${first.label}–${last.label}` : first.label }), _jsx(Text, { size: "helper", tone: start === 2 ? "default" : "subtle", children: last ? _jsxs(_Fragment, { children: [_jsxs("span", { children: [first.value, "\u2013"] }), _jsx("wbr", {}), _jsx("span", { children: last.value })] }) : first.value })] }, start);
+                                }) : _jsx(Text, { size: "helper", tone: "subtle", children: missingLabel })] })] })] }) : _jsx(Text, { className: "flood-box-plot__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/bullet-chart.d.ts

@@ -0,0 +1,2 @@
+import { type BulletChartProps } from "./index.js";
+export declare const BulletPlot: import("react").ForwardRefExoticComponent<BulletChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/bullet-chart.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Inline, Meter, Stack, Text } from "./index.js";
+const defaultNumber = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const BulletPlot = /* @__PURE__ */ forwardRef(function BulletPlot({ label, items, max, formatValue = defaultNumber.format, valueLabel = "Actual", targetLabel = "Target", emptyLabel = "No data", className, ...props }, ref) {
+    const ids = new Set();
+    let largest = 0;
+    for (const { id, label: itemLabel, value, target } of items) {
+        if (!id.trim() || ids.has(id) || !itemLabel.trim()) {
+            throw new Error("Flood BulletChart needs unique IDs and nonempty row labels");
+        }
+        if (!Number.isFinite(value) || value < 0 || !Number.isFinite(target) || target < 0) {
+            throw new RangeError("Flood BulletChart actual and target values must be finite and nonnegative");
+        }
+        ids.add(id);
+        largest = Math.max(largest, value, target);
+    }
+    const limit = max ?? (largest || 1);
+    if (!Number.isFinite(limit) || limit <= 0 || limit < largest) {
+        throw new RangeError("Flood BulletChart max must be finite, positive and at least the largest actual or target");
+    }
+    return _jsx("div", { ...props, ref: ref, className: ["flood-bullet-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: items.length ? _jsx("ul", { className: "flood-bullet-chart__items", role: "list", children: items.map(item => {
+                const actual = formatValue(item.value);
+                const target = formatValue(item.target);
+                return _jsx("li", { children: _jsxs(Stack, { gap: "2", children: [_jsxs(Inline, { gap: "2", align: "baseline", className: "flood-bullet-chart__caption", "aria-hidden": "true", children: [_jsx(Text, { size: "compact", children: item.label }), _jsxs(Inline, { gap: "2", align: "baseline", className: "flood-bullet-chart__numbers", children: [_jsx(Text, { size: "compact", className: "flood-bullet-chart__actual", children: actual }), _jsxs(Text, { size: "helper", tone: "subtle", children: [targetLabel, " ", target] })] })] }), _jsxs("div", { className: "flood-bullet-chart__plot", "data-zero": item.value === 0 || undefined, children: [_jsx(Meter, { label: item.label, value: item.value, max: limit, tone: "accent", hideLabel: true, valueText: `${valueLabel}: ${actual}, ${targetLabel}: ${target}` }), _jsx("span", { "aria-hidden": "true", className: "flood-bullet-chart__target", style: { "--flood-bullet-target": `${item.target / limit * 100}%` } })] })] }) }, item.id);
+            }) }) : _jsx(Text, { size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/charts.d.ts

@@ -0,0 +1,6 @@
+import { type BarChartProps, type BarListProps, type DonutChartProps, type HeatmapProps, type LineChartProps } from "./index.js";
+export declare const SeriesPlot: import("react").ForwardRefExoticComponent<LineChartProps & Required<Pick<LineChartProps, "curve" | "emptyLabel" | "missingLabel" | "navigationLabel" | "variant">> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const GroupedBars: import("react").ForwardRefExoticComponent<BarChartProps & Required<Pick<BarChartProps, "emptyLabel" | "missingLabel" | "navigationLabel">> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ShareRing: import("react").ForwardRefExoticComponent<DonutChartProps & Required<Pick<DonutChartProps, "emptyLabel" | "navigationLabel" | "totalLabel">> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HeatmapGrid: import("react").ForwardRefExoticComponent<HeatmapProps & Required<Pick<HeatmapProps, "emptyLabel" | "missingLabel">> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RankedBars: import("react").ForwardRefExoticComponent<BarListProps & import("react").RefAttributes<HTMLDivElement>>;