@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/chart-grid/grid-math.d.ts

@@ -0,0 +1,26 @@
+export type Extent = readonly [number, number];
+/** Smallest range covering every extent; null when none is finite. */
+export declare function unionExtent(extents: ReadonlyArray<Extent | null | undefined>): [number, number] | null;
+export interface SharedDomainOptions {
+    /** Widen the domain to round tick values (default true). */
+    nice?: boolean;
+    /** Force zero into the domain (bars). */
+    includeZero?: boolean;
+    tickCount?: number;
+}
+/** One domain for every panel, so the same height means the same value everywhere. */
+export declare function sharedDomain(extents: ReadonlyArray<Extent | null | undefined>, { nice, includeZero, tickCount }?: SharedDomainOptions): [number, number] | null;
+export interface GridColumnsOptions {
+    /** Narrowest a panel may get before the grid drops a column. */
+    minPanelWidth: number;
+    maxColumns?: number;
+    gap?: number;
+}
+/**
+ * Columns that fit a container: as many as keep every panel at least
+ * `minPanelWidth` wide (gaps included), never more than `maxColumns` or
+ * `count`, never fewer than one.
+ */
+export declare function gridColumns(width: number, count: number, { minPanelWidth, maxColumns, gap }: GridColumnsOptions): number;
+/** Width of one panel for a container width and a column count. */
+export declare function panelWidth(width: number, columns: number, gap?: number): number;

package/dist/charts/chart-grid/grid-math.js

@@ -0,0 +1,37 @@
+import { niceDomain } from "../core/scales/linear.js";
+function unionExtent(extents) {
+  let lo = Number.POSITIVE_INFINITY;
+  let hi = Number.NEGATIVE_INFINITY;
+  for (const extent of extents) {
+    if (!extent) continue;
+    const [a, b] = extent;
+    if (!Number.isFinite(a) || !Number.isFinite(b)) continue;
+    lo = Math.min(lo, a, b);
+    hi = Math.max(hi, a, b);
+  }
+  return lo <= hi ? [lo, hi] : null;
+}
+function sharedDomain(extents, { nice = true, includeZero = false, tickCount = 5 } = {}) {
+  const union = unionExtent(extents);
+  if (!union) return null;
+  let [lo, hi] = union;
+  if (includeZero) {
+    lo = Math.min(lo, 0);
+    hi = Math.max(hi, 0);
+  }
+  return nice ? niceDomain(lo, hi, tickCount) : [lo, hi];
+}
+function gridColumns(width, count, { minPanelWidth, maxColumns = 6, gap = 16 }) {
+  if (count <= 0) return 1;
+  const fit = Math.floor((width + gap) / (Math.max(1, minPanelWidth) + gap));
+  return Math.max(1, Math.min(fit, maxColumns, count));
+}
+function panelWidth(width, columns, gap = 16) {
+  return Math.max(0, (width - gap * (columns - 1)) / Math.max(1, columns));
+}
+export {
+  gridColumns,
+  panelWidth,
+  sharedDomain,
+  unionExtent
+};

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

@@ -0,0 +1,2 @@
+export * from "./chart-grid.js";
+export * from "./grid-math.js";

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

@@ -0,0 +1,2 @@
+export * from "./chart-grid.js";
+export * from "./grid-math.js";

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

@@ -0,0 +1,59 @@
+import { type ExportTexts } from "../core/export-menu.js";
+import { type ValueFormat } from "../core/format.js";
+import { type ChartLabels } from "../core/types.js";
+export interface ChordGroupInput {
+    id: string;
+    name: string;
+    /** CSS color; defaults to a palette slot. */
+    color?: string;
+}
+/** Visible strings of the chord chart. */
+export interface ChordLabels extends ChartLabels {
+    /** Data table header of the row (where a flow starts). */
+    from: string;
+    to: string;
+    /** Tooltip row: everything entering a group. */
+    inflow: string;
+    /** Tooltip row: everything leaving a group. */
+    outflow: string;
+    exportTexts: ExportTexts;
+}
+export declare const DEFAULT_CHORD_LABELS: ChordLabels;
+export interface ChordChartProps {
+    /** Accessible name of the drawing and caption of the data table. */
+    title: string;
+    description?: string;
+    groups: readonly ChordGroupInput[];
+    /** `matrix[i][j]`: flow from group `i` to group `j`. A group's arc spans its row sum. */
+    matrix: ReadonlyArray<readonly number[]>;
+    /** Gap between groups, in degrees. */
+    padAngle?: number;
+    /** Where the first group starts, degrees from twelve o'clock. */
+    startAngle?: number;
+    /** Thickness of the group ring as a fraction of the radius. */
+    ringWidth?: number;
+    sortGroups?: "input" | "ascending" | "descending";
+    /** Order of the ribbon ends inside a group. */
+    sortSubgroups?: "input" | "ascending" | "descending";
+    /** Group names around the ring (hidden automatically in narrow containers). */
+    showLabels?: boolean;
+    valueFormat?: ValueFormat;
+    height?: number | "fill";
+    /** Width / height ratio of the drawing; ignored with `"fill"`. */
+    aspectRatio?: number;
+    legend?: boolean;
+    tooltip?: boolean;
+    /** SVG and PNG export buttons. */
+    exportable?: boolean;
+    animate?: boolean;
+    loading?: boolean;
+    labels?: Partial<ChordLabels>;
+    onGroupClick?: (group: ChordGroupInput, index: number) => void;
+    className?: string;
+}
+/**
+ * Chord diagram: groups share a circle, ribbons between them are the flows
+ * (who switches to whom, which service goes with which). Hover a group to
+ * light its ribbons, a ribbon to isolate it; arrows walk the groups.
+ */
+export declare function ChordChart({ title, description, groups, matrix, padAngle, startAngle, ringWidth, sortGroups, sortSubgroups, showLabels, valueFormat, height, aspectRatio, legend, tooltip, exportable, animate, loading, labels: labelsProp, onGroupClick, className, }: ChordChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,427 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useRef, useState } from "react";
+import { DECORATIVE } from "../core/a11y.js";
+import { estimateTextWidth } from "../core/axes.js";
+import { ChartFrame } from "../core/chart-frame.js";
+import { chordLayout, chordsOf, ribbonPath } from "../core/chord.js";
+import { ChartDataTable } from "../core/data-table.js";
+import { DEFAULT_EXPORT_TEXTS, ExportMenu } from "../core/export-menu.js";
+import { resolveFormat } from "../core/format.js";
+import { ChartLegend } from "../core/legend.js";
+import { EASE_OUT, fadeIn, useEntryAnimation } from "../core/motion.js";
+import { seriesColor } from "../core/palette.js";
+import { arcPath, degToRad, polarPoint } from "../core/polar.js";
+import { ChartTooltip } from "../core/tooltip.js";
+import { DEFAULT_LABELS } from "../core/types.js";
+import { useIndexNavigation } from "../core/use-index-navigation.js";
+const DEFAULT_CHORD_LABELS = {
+  ...DEFAULT_LABELS,
+  explore: "Chord diagram. Left and right arrows move between groups, Escape clears. Ribbons show the flows between groups.",
+  category: "From",
+  from: "From",
+  to: "To",
+  inflow: "In",
+  outflow: "Out",
+  exportTexts: DEFAULT_EXPORT_TEXTS
+};
+const RIM_GAP = 8;
+function ChordChart({
+  title,
+  description,
+  groups,
+  matrix,
+  padAngle = 3,
+  startAngle = 0,
+  ringWidth = 0.09,
+  sortGroups = "input",
+  sortSubgroups = "descending",
+  showLabels = true,
+  valueFormat,
+  height = 420,
+  aspectRatio,
+  legend = true,
+  tooltip = true,
+  exportable = false,
+  animate = true,
+  loading,
+  labels: labelsProp,
+  onGroupClick,
+  className
+}) {
+  const labels = useMemo(
+    () => labelsProp ? { ...DEFAULT_CHORD_LABELS, ...labelsProp } : DEFAULT_CHORD_LABELS,
+    [labelsProp]
+  );
+  const format = useMemo(() => resolveFormat(valueFormat), [valueFormat]);
+  const layout = useMemo(
+    () => chordLayout(matrix, {
+      padAngle: degToRad(padAngle),
+      startAngle: degToRad(startAngle),
+      sortGroups,
+      sortSubgroups
+    }),
+    [matrix, padAngle, startAngle, sortGroups, sortSubgroups]
+  );
+  const colors = useMemo(
+    () => groups.map((group, index) => seriesColor(index, group.color)),
+    [groups]
+  );
+  const empty = layout.groups.length === 0;
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      height,
+      aspectRatio,
+      labels,
+      loading,
+      empty,
+      skeleton: "ring",
+      className,
+      legend: legend || exportable ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1", children: [
+        legend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: groups.map((group, index) => ({
+              id: group.id,
+              name: group.name,
+              color: colors[index],
+              shape: "dot"
+            }))
+          }
+        ) : /* @__PURE__ */ jsx("span", {}),
+        exportable ? /* @__PURE__ */ jsx(
+          ExportMenu,
+          {
+            title,
+            texts: labels.exportTexts,
+            getSvgs: (root) => Array.from(
+              root.closest('[class~="@container/chart"]')?.querySelectorAll("svg[data-export-part]") ?? []
+            )
+          }
+        ) : null
+      ] }) : void 0,
+      table: /* @__PURE__ */ jsx(
+        ChartDataTable,
+        {
+          caption: description ? `${title}. ${description}` : title,
+          categoryHeader: labels.from,
+          categories: groups.map((group) => group.name),
+          columns: groups.map((group, j) => ({
+            id: group.id,
+            name: `${labels.to} ${group.name}`,
+            values: groups.map((_, i) => format(matrix[i]?.[j] ?? 0))
+          }))
+        }
+      ),
+      children: (width, drawingHeight) => /* @__PURE__ */ jsx(
+        ChordPlot,
+        {
+          title,
+          groups,
+          matrix,
+          layout,
+          colors,
+          ringWidth,
+          showLabels,
+          format,
+          labels,
+          tooltip,
+          animate,
+          onGroupClick,
+          width,
+          height: drawingHeight
+        }
+      )
+    }
+  );
+}
+const chordKey = (chord) => `${chord.source.index}:${chord.target.index}`;
+function ChordPlot({
+  title,
+  groups,
+  matrix,
+  layout,
+  colors,
+  ringWidth,
+  showLabels,
+  format,
+  labels,
+  tooltip,
+  animate,
+  onGroupClick,
+  width,
+  height
+}) {
+  const svgRef = useRef(null);
+  const order = useMemo(
+    () => [...layout.groups].sort((a, b) => a.startAngle - b.startAngle),
+    [layout.groups]
+  );
+  const nav = useIndexNavigation(order.length, { wrap: true });
+  const [hover, setHover] = useState(null);
+  const rim = showLabels && width >= 420;
+  const labelRoom = rim ? Math.min(
+    width * 0.28,
+    Math.max(...groups.map((group) => estimateTextWidth(group.name, 11.5))) + RIM_GAP + 6
+  ) : 0;
+  const radius = Math.max(40, Math.min(width / 2 - labelRoom - 4, height / 2 - (rim ? 16 : 4)));
+  const inner = radius * (1 - Math.min(0.4, Math.max(0.03, ringWidth)));
+  const cx = width / 2;
+  const cy = height / 2;
+  useEntryAnimation(
+    svgRef,
+    (root) => {
+      root.querySelectorAll("[data-ribbon]").forEach((node, i) => {
+        fadeIn(node, 500, i * 25);
+      });
+      root.querySelectorAll("[data-arc]").forEach((node, i) => {
+        node.animate(
+          [
+            { opacity: 0, transform: "scale(.9)" },
+            { opacity: 1, transform: "scale(1)" }
+          ],
+          { duration: 520, delay: i * 50, easing: EASE_OUT, fill: "backwards" }
+        );
+      });
+    },
+    { disabled: !animate, replayKey: layout.chords.length * 100 + layout.groups.length }
+  );
+  const keyboardGroup = nav.active != null ? order[nav.active]?.index ?? null : null;
+  const focus = hover?.focus ?? (keyboardGroup != null ? { kind: "group", index: keyboardGroup } : null);
+  const lit = useMemo(() => {
+    if (!focus) return null;
+    if (focus.kind === "group") {
+      return new Set(chordsOf(layout, focus.index).map(chordKey));
+    }
+    return /* @__PURE__ */ new Set([focus.key]);
+  }, [focus, layout]);
+  const litGroups = useMemo(() => {
+    if (!focus) return null;
+    if (focus.kind === "group") {
+      const set = /* @__PURE__ */ new Set([focus.index]);
+      for (const chord2 of chordsOf(layout, focus.index)) {
+        set.add(chord2.source.index);
+        set.add(chord2.target.index);
+      }
+      return set;
+    }
+    const chord = layout.chords.find((candidate) => chordKey(candidate) === focus.key);
+    return chord ? /* @__PURE__ */ new Set([chord.source.index, chord.target.index]) : null;
+  }, [focus, layout]);
+  const point = (event) => {
+    const box = svgRef.current?.getBoundingClientRect();
+    return box ? { x: event.clientX - box.left, y: event.clientY - box.top } : { x: 0, y: 0 };
+  };
+  const inflow = (index) => matrix.reduce((sum, row, i) => sum + (i === index ? 0 : row[index] ?? 0), 0) + (matrix[index]?.[index] ?? 0);
+  const tip = (() => {
+    if (!focus) return null;
+    const anchor = hover ? { x: hover.x, y: hover.y } : focus.kind === "group" ? (() => {
+      const group = layout.groups.find((g) => g.index === focus.index);
+      return group ? polarPoint(cx, cy, inner, (group.startAngle + group.endAngle) / 2) : { x: cx, y: cy };
+    })() : { x: cx, y: cy };
+    if (focus.kind === "group") {
+      const group = groups[focus.index];
+      if (!group) return null;
+      const rows2 = [
+        {
+          id: "out",
+          name: labels.outflow,
+          value: format(layout.groups.find((g) => g.index === focus.index)?.value ?? 0),
+          color: colors[focus.index],
+          shape: "dot"
+        },
+        {
+          id: "in",
+          name: labels.inflow,
+          value: format(inflow(focus.index)),
+          color: "transparent"
+        }
+      ];
+      const flows = (matrix[focus.index] ?? []).map((value, j) => ({ value, j })).filter(({ value, j }) => value > 0 && j !== focus.index).sort((a2, b2) => b2.value - a2.value).slice(0, 4);
+      for (const { value, j } of flows) {
+        rows2.push({
+          id: `to-${j}`,
+          name: `\u2192 ${groups[j]?.name ?? j}`,
+          value: format(value),
+          color: colors[j],
+          shape: "dot"
+        });
+      }
+      return { title: group.name, rows: rows2, ...anchor };
+    }
+    const chord = layout.chords.find((candidate) => chordKey(candidate) === focus.key);
+    if (!chord) return null;
+    const a = chord.source.index;
+    const b = chord.target.index;
+    const rows = [
+      {
+        id: "ab",
+        name: `${groups[a]?.name} \u2192 ${groups[b]?.name}`,
+        value: format(matrix[a]?.[b] ?? 0),
+        color: colors[a],
+        shape: "dot"
+      }
+    ];
+    if (a !== b) {
+      rows.push({
+        id: "ba",
+        name: `${groups[b]?.name} \u2192 ${groups[a]?.name}`,
+        value: format(matrix[b]?.[a] ?? 0),
+        color: colors[b],
+        shape: "dot"
+      });
+    }
+    return { title: `${groups[a]?.name} \u2194 ${groups[b]?.name}`, rows, ...anchor };
+  })();
+  const valueText = (() => {
+    const group = keyboardGroup != null ? groups[keyboardGroup] : null;
+    if (!group || keyboardGroup == null) return title;
+    const out = layout.groups.find((g) => g.index === keyboardGroup)?.value ?? 0;
+    const flows = (matrix[keyboardGroup] ?? []).map((value, j) => ({ value, j })).filter(({ value, j }) => value > 0 && j !== keyboardGroup).sort((a, b) => b.value - a.value).map(({ value, j }) => `${groups[j]?.name} ${format(value)}`);
+    return `${group.name}: ${labels.outflow} ${format(out)}, ${labels.inflow} ${format(inflow(keyboardGroup))}. ${flows.join(", ")}`;
+  })();
+  return /* @__PURE__ */ jsxs("div", { ref: nav.ref, className: "relative", style: { width, height }, children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: svgRef,
+        role: "img",
+        "aria-label": title,
+        "data-export-part": "",
+        width,
+        height,
+        className: "block overflow-visible",
+        children: /* @__PURE__ */ jsxs("g", { transform: `translate(${cx},${cy})`, children: [
+          /* @__PURE__ */ jsx(
+            ChordRibbons,
+            {
+              chords: layout.chords,
+              radius: inner - 2,
+              colors,
+              lit,
+              onEnter: (chord, event) => setHover({ focus: { kind: "chord", key: chordKey(chord) }, ...point(event) }),
+              onLeave: () => setHover(null)
+            }
+          ),
+          layout.groups.map((group) => {
+            const dim = litGroups ? !litGroups.has(group.index) : false;
+            return (
+              // biome-ignore lint/a11y/noStaticElementInteractions: pointer shortcut; keyboard users explore through the slider.
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  "data-arc": "",
+                  d: arcPath({
+                    cx: 0,
+                    cy: 0,
+                    innerRadius: inner,
+                    outerRadius: radius,
+                    startAngle: group.startAngle,
+                    endAngle: group.endAngle,
+                    cornerRadius: 3
+                  }),
+                  className: onGroupClick ? "cursor-pointer" : "cursor-default",
+                  style: {
+                    fill: colors[group.index],
+                    opacity: dim ? 0.3 : 1,
+                    transition: "opacity 150ms",
+                    transformBox: "fill-box",
+                    transformOrigin: "center"
+                  },
+                  onPointerEnter: (event) => setHover({ focus: { kind: "group", index: group.index }, ...point(event) }),
+                  onPointerMove: (event) => setHover({ focus: { kind: "group", index: group.index }, ...point(event) }),
+                  onPointerLeave: () => setHover(null),
+                  onClick: () => {
+                    const input = groups[group.index];
+                    if (input) onGroupClick?.(input, group.index);
+                  }
+                },
+                group.index
+              )
+            );
+          }),
+          rim ? layout.groups.map((group) => {
+            const mid = (group.startAngle + group.endAngle) / 2;
+            const at = polarPoint(0, 0, radius + RIM_GAP, mid);
+            const sin = Math.sin(mid);
+            const cos = Math.cos(mid);
+            const dim = litGroups ? !litGroups.has(group.index) : false;
+            return /* @__PURE__ */ jsx(
+              "text",
+              {
+                ...DECORATIVE,
+                x: at.x,
+                y: at.y + (cos > 0.4 ? -2 : cos < -0.4 ? 10 : 4),
+                textAnchor: sin > 0.25 ? "start" : sin < -0.25 ? "end" : "middle",
+                className: "pointer-events-none select-none fill-ink-2 font-semibold text-[11.5px]",
+                style: { opacity: dim ? 0.4 : 1, transition: "opacity 150ms" },
+                children: groups[group.index]?.name
+              },
+              group.index
+            );
+          }) : null
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "slider",
+        "aria-label": labels.explore,
+        "aria-valuemin": 1,
+        "aria-valuemax": Math.max(1, order.length),
+        "aria-valuenow": (nav.active ?? 0) + 1,
+        "aria-valuetext": valueText,
+        tabIndex: 0,
+        ...nav.sliderProps,
+        className: "pointer-events-none absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2"
+      }
+    ),
+    tooltip && tip && tip.rows.length > 0 ? /* @__PURE__ */ jsx(
+      ChartTooltip,
+      {
+        x: tip.x,
+        y: tip.y,
+        containerWidth: width,
+        title: tip.title,
+        rows: tip.rows
+      }
+    ) : null
+  ] });
+}
+const ChordRibbons = memo(function ChordRibbons2({
+  chords,
+  radius,
+  colors,
+  lit,
+  onEnter,
+  onLeave
+}) {
+  return /* @__PURE__ */ jsx("g", { children: chords.map((chord) => {
+    const on = lit ? lit.has(chordKey(chord)) : null;
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        "data-ribbon": "",
+        d: ribbonPath(chord, radius),
+        className: "motion-safe:transition-[fill-opacity] motion-safe:duration-150",
+        style: {
+          fill: colors[chord.source.index],
+          fillOpacity: on === null ? 0.5 : on ? 0.8 : 0.07,
+          stroke: colors[chord.source.index],
+          strokeOpacity: on === null ? 0.25 : on ? 0.7 : 0.05,
+          strokeWidth: 0.75
+        },
+        onPointerEnter: (event) => onEnter(chord, event),
+        onPointerMove: (event) => onEnter(chord, event),
+        onPointerLeave: onLeave
+      },
+      chordKey(chord)
+    );
+  }) });
+});
+export {
+  ChordChart,
+  DEFAULT_CHORD_LABELS
+};

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

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

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

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

package/dist/charts/choropleth-map/choropleth-drilldown.d.ts

@@ -0,0 +1,36 @@
+import type { ValueFormat } from "../core/format.js";
+import type { GeoMap } from "../maps/geo/types.js";
+import { type ChoroplethDatum, type ChoroplethMapProps, type ChoroplethRegionInfo } from "./choropleth-map.js";
+/** One level of a drilldown: a map and the values of its regions. */
+export interface DrilldownLevel {
+    id: string;
+    /** Name in the breadcrumb, e.g. "Mundo" or "Perú". */
+    name: string;
+    map: GeoMap;
+    data: readonly ChoroplethDatum[];
+    /** Overrides the value name / format of the map for this level. */
+    valueName?: string;
+    valueFormat?: ValueFormat;
+}
+export interface ChoroplethDrilldownProps extends Omit<ChoroplethMapProps, "map" | "data" | "onRegionClick" | "title"> {
+    /** Accessible name; the current level is appended: "Clientes: Perú". */
+    title: string;
+    root: DrilldownLevel;
+    /**
+     * Level to open when a region is clicked, given the path so far (root first), or nothing when
+     * that region has no detail (the click goes to `onRegionClick`).
+     */
+    resolve: (region: ChoroplethRegionInfo, path: readonly DrilldownLevel[]) => DrilldownLevel | null | undefined;
+    /** Accessible name of the breadcrumb navigation. */
+    breadcrumbLabel?: string;
+    /** Called after every change of level with the new path (root first). */
+    onNavigate?: (path: readonly DrilldownLevel[]) => void;
+    /** Click on a region without detail. */
+    onRegionClick?: (region: ChoroplethRegionInfo, path: readonly DrilldownLevel[]) => void;
+}
+/**
+ * `ChoroplethMap` that opens a region into a finer map (world to country, country to
+ * departments) with a breadcrumb back up. The map of each level only needs its own geometry, so
+ * only levels the user opens are ever drawn. The path is announced politely to screen readers.
+ */
+export declare function ChoroplethDrilldown({ title, root, resolve, breadcrumbLabel, onNavigate, onRegionClick, className, ...mapProps }: ChoroplethDrilldownProps): import("react").JSX.Element;

package/dist/charts/choropleth-map/choropleth-drilldown.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { ChartBreadcrumb } from "../core/breadcrumb.js";
+import {
+  ChoroplethMap
+} from "./choropleth-map.js";
+function ChoroplethDrilldown({
+  title,
+  root,
+  resolve,
+  breadcrumbLabel = "Map level",
+  onNavigate,
+  onRegionClick,
+  className,
+  ...mapProps
+}) {
+  const [path, setPath] = useState([root]);
+  const level = path[path.length - 1] ?? root;
+  const go = (next) => {
+    setPath(next);
+    onNavigate?.(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      ChartBreadcrumb,
+      {
+        label: breadcrumbLabel,
+        items: path.map((item) => ({ id: item.id, name: item.name })),
+        onSelect: (id) => {
+          const index = path.findIndex((item) => item.id === id);
+          if (index >= 0) go(path.slice(0, index + 1));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: path.map((item) => item.name).join(" > ") }),
+    /* @__PURE__ */ createElement(
+      ChoroplethMap,
+      {
+        ...mapProps,
+        key: level.id,
+        title: `${title}: ${level.name}`,
+        map: level.map,
+        data: level.data,
+        valueName: level.valueName ?? mapProps.valueName,
+        valueFormat: level.valueFormat ?? mapProps.valueFormat,
+        onRegionClick: (region) => {
+          const next = resolve(region, path);
+          if (next) go([...path, next]);
+          else onRegionClick?.(region, path);
+        }
+      }
+    )
+  ] });
+}
+export {
+  ChoroplethDrilldown
+};