@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/calendar/week-view/week-view.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { DayChip } from "../day-chip/index.js";
+import { EventBlock } from "../event-block/index.js";
+import {
+  addDays,
+  formatHour,
+  formatWeekdayAndDay,
+  minutesSinceMidnight,
+  startOfWeek
+} from "../internal/date-utils.js";
+import { layoutDayEvents } from "../internal/layout.js";
+import { SHADED_DAY_CLASS } from "../internal/styles.js";
+const PX_PER_HOUR = 48;
+const INITIAL_SCROLL_HOUR = 8;
+const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
+const COLUMNS = cn(
+  "grid-cols-[58px_repeat(7,minmax(96px,1fr))]",
+  "@max-[40rem]/week:grid-cols-[52px_repeat(7,minmax(112px,1fr))]"
+);
+const GUTTER = "sticky left-0 z-10 bg-surface";
+function WeekView({
+  week,
+  today,
+  currentTime,
+  events,
+  markers = [],
+  shadedDates = [],
+  workingHours,
+  locale,
+  weekStartsOn = 1,
+  allDayLabel,
+  onOpenEvent,
+  onOpenMarker,
+  className
+}) {
+  const scrollRef = useRef(null);
+  const first = startOfWeek(week, weekStartsOn);
+  const days = Array.from({ length: 7 }, (_, index) => addDays(first, index));
+  const shaded = new Set(shadedDates);
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = INITIAL_SCROLL_HOUR * PX_PER_HOUR;
+    }
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: cn("@container/week min-w-0", className), children: /* @__PURE__ */ jsx("div", { ref: scrollRef, "data-hours-scroll": true, className: "max-h-150 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-[820px] flex-col @max-[40rem]/week:min-w-[836px]", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("sticky top-0 z-20 grid bg-surface", COLUMNS), children: [
+      /* @__PURE__ */ jsx("div", { className: GUTTER }),
+      days.map((date) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-date": date,
+          "data-today": date === today || void 0,
+          className: cn(
+            "flex h-10 min-w-0 items-center truncate whitespace-nowrap border-b-divider px-2 text-meta text-ink-3",
+            date === today && "text-accent-ink"
+          ),
+          children: formatWeekdayAndDay(date, locale)
+        },
+        date
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { "data-all-day-row": true, className: cn("sticky top-10 z-20 grid bg-surface", COLUMNS), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            GUTTER,
+            "whitespace-nowrap border-b-divider px-1.5 pt-2.5 text-right text-meta text-ink-3"
+          ),
+          children: allDayLabel
+        }
+      ),
+      days.map((date) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex min-h-10 flex-col gap-1 border-b-divider border-l-divider p-1",
+          children: [
+            markers.filter((marker) => marker.date === date).map((marker) => /* @__PURE__ */ jsx(DayChip, { marker, onOpen: onOpenMarker }, marker.id)),
+            events.filter((event) => event.date === date && event.allDay).map((event) => /* @__PURE__ */ jsx("div", { "data-event": event.id, children: /* @__PURE__ */ jsx(EventBlock, { event, variant: "compact", onOpen: onOpenEvent }) }, event.id))
+          ]
+        },
+        date
+      ))
+    ] }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("grid", COLUMNS), style: { height: HOURS.length * PX_PER_HOUR }, children: [
+      /* @__PURE__ */ jsx("div", { className: GUTTER, children: HOURS.map((hour) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "-translate-y-1/2 absolute right-2 whitespace-nowrap font-mono text-meta text-ink-3",
+          style: { top: hour * PX_PER_HOUR },
+          children: formatHour(hour, locale)
+        },
+        hour
+      )) }),
+      days.map((date) => {
+        const isToday = date === today;
+        const positioned = layoutDayEvents(
+          events.filter((event) => event.date === date && !event.allDay)
+        );
+        const nowMinutes = isToday && currentTime ? minutesSinceMidnight(currentTime) : void 0;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-date": date,
+            "data-hours-column": true,
+            "data-shaded": shaded.has(date) || void 0,
+            className: cn(
+              "relative border-l-divider bg-[linear-gradient(to_bottom,var(--line)_1px,transparent_1px)] bg-size-[100%_48px]",
+              isToday && "bg-accent-soft/40",
+              shaded.has(date) && SHADED_DAY_CLASS
+            ),
+            children: [
+              workingHours ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-working-hours": true,
+                  className: "pointer-events-none absolute inset-x-0 bg-accent-soft/30",
+                  style: {
+                    top: workingHours[0] * PX_PER_HOUR,
+                    height: (workingHours[1] - workingHours[0]) * PX_PER_HOUR
+                  }
+                }
+              ) : null,
+              positioned.map(({ event, start, end, column, columns }) => {
+                const short = end - start <= 30;
+                const width = 100 / columns;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-event": event.id,
+                    className: "absolute px-px",
+                    style: {
+                      top: start / 60 * PX_PER_HOUR,
+                      height: Math.max((end - start) / 60 * PX_PER_HOUR - 2, 18),
+                      left: `${column * width}%`,
+                      width: `${width}%`
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      EventBlock,
+                      {
+                        event,
+                        variant: short ? "compact" : "detailed",
+                        onOpen: onOpenEvent,
+                        className: "h-full"
+                      }
+                    )
+                  },
+                  event.id
+                );
+              }),
+              nowMinutes !== void 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-now-line": true,
+                  className: "pointer-events-none absolute inset-x-0 h-0.5 bg-danger",
+                  style: { top: nowMinutes / 60 * PX_PER_HOUR }
+                }
+              ) : null
+            ]
+          },
+          date
+        );
+      })
+    ] }) })
+  ] }) }) });
+}
+export {
+  WeekView
+};

package/dist/charts/area-chart/area-chart.d.ts

@@ -0,0 +1,10 @@
+import type { CartesianChartProps } from "../core/cartesian/types.js";
+import type { ChartSeries } from "../core/types.js";
+export interface AreaChartProps extends Omit<CartesianChartProps, "series" | "orientation" | "barRadius" | "rightAxis"> {
+    series: readonly ChartSeries[];
+}
+/**
+ * Volume over time with a soft gradient fill. `stack="normal"` piles series
+ * into a total; `stack="percent"` shows each one's share of 100%.
+ */
+export declare function AreaChart({ series, curve, ...props }: AreaChartProps): import("react").JSX.Element;

package/dist/charts/area-chart/area-chart.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { CartesianChart } from "../core/cartesian/cartesian-chart.js";
+function AreaChart({ series, curve = "smooth", ...props }) {
+  const areas = useMemo(
+    () => series.map((item) => ({ ...item, kind: "area" })),
+    [series]
+  );
+  return /* @__PURE__ */ jsx(CartesianChart, { ...props, curve, series: areas });
+}
+export {
+  AreaChart
+};

package/dist/charts/area-chart/index.d.ts

@@ -0,0 +1 @@
+export * from "./area-chart.js";

package/dist/charts/area-chart/index.js

@@ -0,0 +1 @@
+export * from "./area-chart.js";

package/dist/charts/bar-chart/bar-chart.d.ts

@@ -0,0 +1,35 @@
+import type { CartesianChartProps } from "../core/cartesian/types.js";
+import type { ChartSeries } from "../core/types.js";
+/** One series of bars. Give `ranges` instead of `data` for floating bars. */
+export interface BarSeries extends Omit<ChartSeries, "data"> {
+    /** One value per category; `null` leaves a gap. Not needed with `ranges`. */
+    data?: ReadonlyArray<number | null>;
+    /**
+     * Floating bars: `[start, end]` per category (range column or range bar).
+     * The value shown on tooltips and labels is the end; both ends are rounded.
+     */
+    ranges?: ReadonlyArray<readonly [number, number] | null>;
+    /**
+     * With `stack`, series of the same group pile up and every group is a
+     * column of its own next to the others (grouped stacked bars).
+     */
+    stackGroup?: string;
+    /** Color of each bar; `undefined` entries keep the series color. */
+    colors?: ReadonlyArray<string | undefined>;
+}
+export interface BarChartProps extends Omit<CartesianChartProps, "series" | "curve" | "markers" | "gradient" | "brush" | "rightAxis" | "xScale"> {
+    series: readonly BarSeries[];
+    /** One palette color per bar instead of one per series (single-series charts). */
+    distributed?: boolean;
+}
+/**
+ * Columns (`orientation="vertical"`, default) or horizontal bars. Several
+ * series are grouped side by side, or piled with `stack`. Bars are rounded at
+ * their value end only, negative values grow downwards (or to the left).
+ *
+ * Also: floating `ranges`, `stackGroup` piles side by side, `categoryGroups`
+ * labels under the axis, a `reversed` value axis (`yAxis.reversed`), SVG
+ * `pattern` fills per series, per-bar `colors` / `distributed`, and
+ * `onCategoryClick` for drill-down.
+ */
+export declare function BarChart({ series, distributed, ...props }: BarChartProps): import("react").JSX.Element;

package/dist/charts/bar-chart/bar-chart.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { CartesianChart } from "../core/cartesian/cartesian-chart.js";
+import { seriesColor } from "../core/palette.js";
+function toSeries(item, index, distributed) {
+  const { ranges, colors, data, ...rest } = item;
+  const base = {
+    ...rest,
+    kind: "column",
+    data: ranges ? ranges.map((range) => range ? range[1] : null) : data ?? []
+  };
+  if (ranges) base.from = ranges.map((range) => range ? range[0] : null);
+  if (colors) base.pointColors = colors;
+  else if (distributed) {
+    base.pointColors = base.data.map((_, position) => seriesColor(position + index));
+  }
+  return base;
+}
+function BarChart({ series, distributed = false, ...props }) {
+  const columns = useMemo(
+    () => series.map((item, index) => toSeries(item, index, distributed)),
+    [series, distributed]
+  );
+  return /* @__PURE__ */ jsx(CartesianChart, { ...props, series: columns });
+}
+export {
+  BarChart
+};

package/dist/charts/bar-chart/bar-race-chart.d.ts

@@ -0,0 +1,41 @@
+import { type ValueFormat } from "../core/format.js";
+import { type ChartLabels } from "../core/types.js";
+import { type RaceFrame } from "./bar-race.js";
+export interface BarRaceEntity {
+    id: string;
+    name: string;
+    /** CSS color or token; defaults to the palette slot of the entity. */
+    color?: string;
+}
+export interface BarRaceChartProps {
+    entities: readonly BarRaceEntity[];
+    /** One entry per moment; `values[i]` belongs to `entities[i]`. */
+    frames: readonly RaceFrame[];
+    /** Accessible name of the chart. */
+    title: string;
+    description?: string;
+    /** How many bars race at once (default 6). */
+    topN?: number;
+    /** Milliseconds between two frames (default 1400). */
+    frameDuration?: number;
+    /** Starts playing (default true; reduced motion starts paused). */
+    defaultPlaying?: boolean;
+    /** Starts over after the last frame (default true). */
+    loop?: boolean;
+    valueFormat?: ValueFormat;
+    height?: number | "fill";
+    aspectRatio?: number;
+    loading?: boolean;
+    playLabel?: string;
+    pauseLabel?: string;
+    /** Accessible name of the moment slider. */
+    momentLabel?: string;
+    labels?: Partial<ChartLabels>;
+    className?: string;
+}
+/**
+ * Bar race: horizontal bars that grow, shrink and swap places as time moves
+ * through `frames`. Play/pause, scrub with the slider, `topN` limits the rows.
+ * Under `prefers-reduced-motion` the bars step from frame to frame.
+ */
+export declare function BarRaceChart({ entities, frames, title, description, topN, frameDuration, defaultPlaying, loop, valueFormat, height, aspectRatio, loading, playLabel, pauseLabel, momentLabel, labels: labelOverrides, className, }: BarRaceChartProps): import("react").JSX.Element;

package/dist/charts/bar-chart/bar-race-chart.js

@@ -0,0 +1,252 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { estimateTextWidth } from "../core/axes.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { ChartDataTable } from "../core/data-table.js";
+import { resolveFormat } from "../core/format.js";
+import { useReducedMotion } from "../core/motion.js";
+import { seriesColor } from "../core/palette.js";
+import { resolveLabels } from "../core/types.js";
+import { raceItems, visibleMax } from "./bar-race.js";
+const ROW_GAP = 0.22;
+function PlayIcon({ playing }) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 24 24", children: playing ? /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7 5v14M17 5v14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3.4",
+      strokeLinecap: "round"
+    }
+  ) : /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8 5.5v13l11-6.5z",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function BarRaceChart({
+  entities,
+  frames,
+  title,
+  description,
+  topN = 6,
+  frameDuration = 1400,
+  defaultPlaying = true,
+  loop = true,
+  valueFormat,
+  height = 340,
+  aspectRatio,
+  loading,
+  playLabel = "Play",
+  pauseLabel = "Pause",
+  momentLabel = "Moment",
+  labels: labelOverrides,
+  className
+}) {
+  const labels = resolveLabels(labelOverrides);
+  const reduced = useReducedMotion();
+  const fmt = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const last = Math.max(0, frames.length - 1);
+  const [position, setPosition] = useState(0);
+  const [playing, setPlaying] = useState(defaultPlaying);
+  const stamp = useRef(null);
+  const current = useRef(0);
+  current.current = position;
+  useEffect(() => {
+    if (reduced) setPlaying(false);
+  }, [reduced]);
+  useEffect(() => {
+    if (!playing || last === 0 || typeof requestAnimationFrame !== "function") return;
+    stamp.current = null;
+    let frame = 0;
+    const step = (now) => {
+      const previous = stamp.current ?? now;
+      stamp.current = now;
+      const delta = (now - previous) / frameDuration;
+      let next = current.current + delta;
+      if (next >= last) {
+        if (loop) next -= last;
+        else {
+          next = last;
+          setPlaying(false);
+        }
+      }
+      current.current = next;
+      setPosition(next);
+      frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+  }, [playing, last, frameDuration, loop]);
+  const shown = reduced ? Math.round(position) : position;
+  const frameIndex = Math.min(last, Math.round(shown));
+  const caption = frames[frameIndex]?.label ?? "";
+  const limit = Math.max(1, Math.min(topN, entities.length));
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      labels,
+      loading,
+      empty: entities.length === 0 || frames.length === 0,
+      skeleton: "bars",
+      className,
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              if (!playing && position >= last) setPosition(0);
+              setPlaying((value) => !value);
+            },
+            "aria-label": playing ? pauseLabel : playLabel,
+            className: "inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-button border-0 bg-surface-2 text-ink-2 outline-none hover:bg-sunken hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2",
+            children: /* @__PURE__ */ jsx(PlayIcon, { playing })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: last,
+            step: 0.01,
+            value: Math.min(position, last),
+            "aria-label": momentLabel,
+            "aria-valuetext": caption,
+            onChange: (event) => {
+              setPlaying(false);
+              setPosition(Number(event.currentTarget.value));
+            },
+            className: "h-1.5 min-w-0 flex-1 cursor-pointer accent-(--accent)"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-12 text-right font-bold text-[12px] text-ink-2 tabular-nums", children: caption })
+      ] }),
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: description ? `${title}. ${description}` : title,
+          categoryHeader: labels.category,
+          categories: entities.map((entity) => entity.name),
+          columns: frames.map((frame, index) => ({
+            id: `${index}-${frame.label}`,
+            name: frame.label,
+            values: entities.map((_, entity) => fmt(frame.values[entity] ?? 0))
+          }))
+        }
+      ),
+      children: (width, measuredHeight) => /* @__PURE__ */ jsx(
+        RacePlot,
+        {
+          width,
+          height: measuredHeight,
+          entities,
+          frames,
+          position: shown,
+          limit,
+          caption,
+          fmt,
+          title
+        }
+      )
+    }
+  );
+}
+function RacePlot({
+  width,
+  height,
+  entities,
+  frames,
+  position,
+  limit,
+  caption,
+  fmt,
+  title
+}) {
+  const items = useMemo(() => raceItems(frames, position), [frames, position]);
+  const max = visibleMax(items, limit) || 1;
+  const left = Math.min(
+    width * 0.34,
+    Math.max(56, Math.max(...entities.map((entity) => estimateTextWidth(entity.name, 12))) + 12)
+  );
+  const right = 64;
+  const innerWidth = Math.max(20, width - left - right);
+  const rowHeight = Math.max(14, (height - 8) / limit);
+  const barHeight = rowHeight * (1 - ROW_GAP);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      role: "img",
+      "aria-label": `${title}. ${caption}`,
+      width,
+      height,
+      className: "block overflow-visible",
+      children: [
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: width - 2,
+            y: height - 6,
+            textAnchor: "end",
+            className: "pointer-events-none font-extrabold text-[44px] tabular-nums",
+            style: { fill: "var(--ink-3)", fillOpacity: 0.22 },
+            children: caption
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { transform: `translate(${left},4)`, children: items.filter((item) => item.rank < limit + 1).map((item) => {
+          const entity = entities[item.index];
+          const y = item.rank * rowHeight + (rowHeight - barHeight) / 2;
+          const length = Math.max(2, item.value / max * innerWidth);
+          const fade = Math.min(1, Math.max(0, limit - item.rank));
+          return /* @__PURE__ */ jsxs("g", { transform: `translate(0,${y})`, style: { opacity: fade }, children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                width: length,
+                height: barHeight,
+                rx: Math.min(6, barHeight / 2),
+                style: { fill: entity.color ?? seriesColor(item.index) }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: -10,
+                y: barHeight / 2,
+                dy: "0.34em",
+                textAnchor: "end",
+                className: "font-semibold text-[12px]",
+                style: { fill: "var(--ink-2)" },
+                children: entity.name
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: length + 8,
+                y: barHeight / 2,
+                dy: "0.34em",
+                className: "font-bold text-[11px] tabular-nums",
+                style: { fill: "var(--ink-2)" },
+                children: fmt(item.value)
+              }
+            )
+          ] }, entity.id);
+        }) })
+      ]
+    }
+  );
+}
+export {
+  BarRaceChart
+};

package/dist/charts/bar-chart/bar-race.d.ts

@@ -0,0 +1,23 @@
+/** Pure interpolation behind `BarRaceChart`: values and ranks between two frames. */
+export interface RaceFrame {
+    /** Caption of the moment, e.g. "2026" or "oct". */
+    label: string;
+    /** One value per entity, in the order of the entities. */
+    values: readonly number[];
+}
+export interface RaceItem {
+    /** Index of the entity. */
+    index: number;
+    value: number;
+    /** 0 is the longest bar; fractional while two bars swap places. */
+    rank: number;
+}
+/** Rank of every value, 0 for the largest; ties keep the entity order. */
+export declare function ranksOf(values: readonly number[]): number[];
+/**
+ * State at a fractional frame `position`: values move linearly, ranks follow a
+ * smoothstep so a bar glides into its new row instead of jumping.
+ */
+export declare function raceItems(frames: readonly RaceFrame[], position: number): RaceItem[];
+/** Largest value among the `limit` bars that are on screen at this moment. */
+export declare function visibleMax(items: readonly RaceItem[], limit: number): number;

package/dist/charts/bar-chart/bar-race.js

@@ -0,0 +1,42 @@
+function ranksOf(values) {
+  const order = values.map((_, index) => index).sort((a, b) => {
+    const diff = values[b] - values[a];
+    return diff !== 0 ? diff : a - b;
+  });
+  const ranks = new Array(values.length).fill(0);
+  order.forEach((entity, rank) => {
+    ranks[entity] = rank;
+  });
+  return ranks;
+}
+const smooth = (t) => t * t * (3 - 2 * t);
+function raceItems(frames, position) {
+  if (frames.length === 0) return [];
+  const last = frames.length - 1;
+  const at = Math.min(last, Math.max(0, position));
+  const lo = Math.floor(at);
+  const hi = Math.min(last, lo + 1);
+  const t = at - lo;
+  const a = frames[lo];
+  const b = frames[hi];
+  const ranksA = ranksOf(a.values);
+  const ranksB = ranksOf(b.values);
+  return a.values.map((value, index) => {
+    const next = b.values[index] ?? value;
+    return {
+      index,
+      value: value + (next - value) * t,
+      rank: ranksA[index] + (ranksB[index] - ranksA[index]) * smooth(t)
+    };
+  });
+}
+function visibleMax(items, limit) {
+  let max = 0;
+  for (const item of items) if (item.rank < limit) max = Math.max(max, item.value);
+  return max;
+}
+export {
+  raceItems,
+  ranksOf,
+  visibleMax
+};

package/dist/charts/bar-chart/drilldown-bar-chart.d.ts

@@ -0,0 +1,18 @@
+import type { HierarchyDatum } from "../core/hierarchy.js";
+import { type BarChartProps } from "./bar-chart.js";
+export interface DrilldownBarChartProps extends Omit<BarChartProps, "series" | "categories" | "onCategoryClick" | "distributed"> {
+    /** Tree to explore: the chart shows the children of the focused node. */
+    data: HierarchyDatum;
+    /** Name of the single series (tooltip and data table). */
+    seriesName?: string;
+    /** Accessible name of the breadcrumb navigation. */
+    breadcrumbLabel?: string;
+    /** Largest first (default) or in data order. */
+    sort?: boolean;
+}
+/**
+ * Bars of one level of a hierarchy. Click (or Enter on) a bar that has
+ * children to drill into it; the breadcrumb above brings you back out.
+ * Bars that can be opened carry a `›` after their label.
+ */
+export declare function DrilldownBarChart({ data, seriesName, breadcrumbLabel, sort, height, className, ...rest }: DrilldownBarChartProps): import("react").JSX.Element;