@opendata-ai/openchart-react 6.27.0 → 6.28.2

package/dist/index.js

@@ -10,6 +10,7 @@ import {
 import {
   clearRenderers,
   compile,
+  compileBarList,
   compileChart,
   compileGraph,
   compileSankey,
@@ -21,8 +22,10 @@ import {
   validateSpec
 } from "@opendata-ai/openchart-engine";
 
-// src/Chart.tsx
-import { createChart } from "@opendata-ai/openchart-vanilla";
+// src/BarList.tsx
+import {
+  createBarList
+} from "@opendata-ai/openchart-vanilla";
 import {
   forwardRef,
   useCallback,
@@ -46,9 +49,81 @@ function VizThemeProvider({ theme, darkMode, children }) {
   return /* @__PURE__ */ jsx(VizThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(VizDarkModeContext.Provider, { value: darkMode, children }) });
 }
 
-// src/Chart.tsx
+// src/BarList.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var Chart = forwardRef(function Chart2({
+var BarList = forwardRef(function BarList2({ spec, theme: themeProp, darkMode, onRowClick, onRowHover, className, style }, ref) {
+  const contextTheme = useVizTheme();
+  const contextDarkMode = useVizDarkMode();
+  const theme = themeProp ?? contextTheme;
+  const resolvedDarkMode = darkMode ?? contextDarkMode;
+  const containerRef = useRef(null);
+  const instanceRef = useRef(null);
+  const specRef = useRef("");
+  const handlersRef = useRef({});
+  handlersRef.current = { onRowClick, onRowHover };
+  const stableOnRowClick = useCallback(
+    (row) => handlersRef.current.onRowClick?.(row),
+    []
+  );
+  const stableOnRowHover = useCallback(
+    (row) => handlersRef.current.onRowHover?.(row),
+    []
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      get instance() {
+        return instanceRef.current;
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const options = {
+      theme,
+      darkMode: resolvedDarkMode,
+      onRowClick: stableOnRowClick,
+      onRowHover: stableOnRowHover,
+      responsive: true
+    };
+    instanceRef.current = createBarList(container, spec, options);
+    specRef.current = JSON.stringify(spec);
+    return () => {
+      instanceRef.current?.destroy();
+      instanceRef.current = null;
+    };
+  }, [theme, resolvedDarkMode, stableOnRowClick, stableOnRowHover]);
+  useEffect(() => {
+    const instance = instanceRef.current;
+    if (!instance) return;
+    const specString = JSON.stringify(spec);
+    if (specString === specRef.current) return;
+    specRef.current = specString;
+    instance.update(spec);
+  }, [spec]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      className: className ? `oc-barlist-root ${className}` : "oc-barlist-root",
+      style
+    }
+  );
+});
+
+// src/Chart.tsx
+import { createChart } from "@opendata-ai/openchart-vanilla";
+import {
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Chart = forwardRef2(function Chart2({
   spec,
   theme: themeProp,
   darkMode,
@@ -71,10 +146,10 @@ var Chart = forwardRef(function Chart2({
   const contextDarkMode = useVizDarkMode();
   const theme = themeProp ?? contextTheme;
   const resolvedDarkMode = darkMode ?? contextDarkMode;
-  const containerRef = useRef(null);
-  const chartRef = useRef(null);
-  const specRef = useRef("");
-  const handlersRef = useRef({});
+  const containerRef = useRef2(null);
+  const chartRef = useRef2(null);
+  const specRef = useRef2("");
+  const handlersRef = useRef2({});
   handlersRef.current = {
     onDataPointClick,
     onMarkClick,
@@ -88,48 +163,48 @@ var Chart = forwardRef(function Chart2({
     onDeselect,
     onTextEdit
   };
-  const stableOnDataPointClick = useCallback(
+  const stableOnDataPointClick = useCallback2(
     (data) => handlersRef.current.onDataPointClick?.(data),
     []
   );
-  const stableOnMarkClick = useCallback(
+  const stableOnMarkClick = useCallback2(
     (event) => handlersRef.current.onMarkClick?.(event),
     []
   );
-  const stableOnMarkHover = useCallback(
+  const stableOnMarkHover = useCallback2(
     (event) => handlersRef.current.onMarkHover?.(event),
     []
   );
-  const stableOnMarkLeave = useCallback(() => handlersRef.current.onMarkLeave?.(), []);
-  const stableOnLegendToggle = useCallback(
+  const stableOnMarkLeave = useCallback2(() => handlersRef.current.onMarkLeave?.(), []);
+  const stableOnLegendToggle = useCallback2(
     (series, visible) => handlersRef.current.onLegendToggle?.(series, visible),
     []
   );
-  const stableOnAnnotationClick = useCallback(
+  const stableOnAnnotationClick = useCallback2(
     (annotation, event) => handlersRef.current.onAnnotationClick?.(annotation, event),
     []
   );
-  const stableOnAnnotationEdit = useCallback(
+  const stableOnAnnotationEdit = useCallback2(
     (annotation, updatedOffset) => handlersRef.current.onAnnotationEdit?.(annotation, updatedOffset),
     []
   );
-  const stableOnEdit = useCallback(
+  const stableOnEdit = useCallback2(
     (edit) => handlersRef.current.onEdit?.(edit),
     []
   );
-  const stableOnSelect = useCallback(
+  const stableOnSelect = useCallback2(
     (element) => handlersRef.current.onSelect?.(element),
     []
   );
-  const stableOnDeselect = useCallback(
+  const stableOnDeselect = useCallback2(
     (element) => handlersRef.current.onDeselect?.(element),
     []
   );
-  const stableOnTextEdit = useCallback(
+  const stableOnTextEdit = useCallback2(
     (element, oldText, newText) => handlersRef.current.onTextEdit?.(element, oldText, newText),
     []
   );
-  useImperativeHandle(
+  useImperativeHandle2(
     ref,
     () => ({
       getSelectedElement() {
@@ -147,7 +222,7 @@ var Chart = forwardRef(function Chart2({
     }),
     []
   );
-  useEffect(() => {
+  useEffect2(() => {
     const container = containerRef.current;
     if (!container) return;
     const options = {
@@ -191,7 +266,7 @@ var Chart = forwardRef(function Chart2({
     stableOnDeselect,
     stableOnTextEdit
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     const chart = chartRef.current;
     if (!chart) return;
     const specString = JSON.stringify(spec);
@@ -200,7 +275,7 @@ var Chart = forwardRef(function Chart2({
       chart.update(spec);
     }
   }, [spec]);
-  useEffect(() => {
+  useEffect2(() => {
     const chart = chartRef.current;
     if (!chart || !chart.select) return;
     if (selectedElementProp) {
@@ -209,7 +284,7 @@ var Chart = forwardRef(function Chart2({
       chart.deselect();
     }
   }, [selectedElementProp]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: containerRef,
@@ -223,8 +298,8 @@ var Chart = forwardRef(function Chart2({
 import {
   createTable
 } from "@opendata-ai/openchart-vanilla";
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function DataTable({
   spec,
   theme: themeProp,
@@ -243,15 +318,15 @@ function DataTable({
   const contextDarkMode = useVizDarkMode();
   const theme = themeProp ?? contextTheme;
   const resolvedDarkMode = darkMode ?? contextDarkMode;
-  const containerRef = useRef2(null);
-  const tableRef = useRef2(null);
-  const handlersRef = useRef2({});
+  const containerRef = useRef3(null);
+  const tableRef = useRef3(null);
+  const handlersRef = useRef3({});
   handlersRef.current = { onRowClick, onSortChange, onSearchChange, onPageChange };
-  const stableOnRowClick = useCallback2(
+  const stableOnRowClick = useCallback3(
     (row) => handlersRef.current.onRowClick?.(row),
     []
   );
-  const stableOnStateChange = useCallback2(
+  const stableOnStateChange = useCallback3(
     (state) => {
       if (state.sort !== void 0) handlersRef.current.onSortChange?.(state.sort);
       if (state.search !== void 0) handlersRef.current.onSearchChange?.(state.search);
@@ -259,9 +334,9 @@ function DataTable({
     },
     []
   );
-  const prevSpecRef = useRef2("");
+  const prevSpecRef = useRef3("");
   const isControlled = sort !== void 0 || search !== void 0 || page !== void 0;
-  useEffect2(() => {
+  useEffect3(() => {
     const container = containerRef.current;
     if (!container) return;
     const mountOptions = {
@@ -285,7 +360,7 @@ function DataTable({
       tableRef.current = null;
     };
   }, [theme, resolvedDarkMode, isControlled, stableOnRowClick, stableOnStateChange]);
-  useEffect2(() => {
+  useEffect3(() => {
     const table = tableRef.current;
     if (!table || !isControlled) return;
     table.setState({
@@ -294,7 +369,7 @@ function DataTable({
       page: page ?? 0
     });
   }, [sort, search, page, isControlled]);
-  useEffect2(() => {
+  useEffect3(() => {
     const table = tableRef.current;
     if (!table) return;
     const specString = JSON.stringify(spec);
@@ -303,7 +378,7 @@ function DataTable({
       table.update(spec);
     }
   }, [spec]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       ref: containerRef,
@@ -318,14 +393,14 @@ import {
   createGraph
 } from "@opendata-ai/openchart-vanilla";
 import {
-  forwardRef as forwardRef2,
-  useCallback as useCallback3,
-  useEffect as useEffect3,
-  useImperativeHandle as useImperativeHandle2,
-  useRef as useRef3
+  forwardRef as forwardRef3,
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useImperativeHandle as useImperativeHandle3,
+  useRef as useRef4
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Graph = forwardRef2(function Graph2({
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Graph = forwardRef3(function Graph2({
   spec,
   theme: themeProp,
   darkMode,
@@ -343,10 +418,10 @@ var Graph = forwardRef2(function Graph2({
   const contextDarkMode = useVizDarkMode();
   const theme = themeProp ?? contextTheme;
   const resolvedDarkMode = darkMode ?? contextDarkMode;
-  const containerRef = useRef3(null);
-  const graphRef = useRef3(null);
-  const specRef = useRef3("");
-  const handlersRef = useRef3({});
+  const containerRef = useRef4(null);
+  const graphRef = useRef4(null);
+  const specRef = useRef4("");
+  const handlersRef = useRef4({});
   handlersRef.current = {
     onNodeClick,
     onNodeDoubleClick,
@@ -354,27 +429,27 @@ var Graph = forwardRef2(function Graph2({
     onEdgeHover,
     onSelectionChange
   };
-  const stableOnNodeClick = useCallback3(
+  const stableOnNodeClick = useCallback4(
     (node) => handlersRef.current.onNodeClick?.(node),
     []
   );
-  const stableOnNodeDoubleClick = useCallback3(
+  const stableOnNodeDoubleClick = useCallback4(
     (node) => handlersRef.current.onNodeDoubleClick?.(node),
     []
   );
-  const stableOnNodeHover = useCallback3(
+  const stableOnNodeHover = useCallback4(
     (node) => handlersRef.current.onNodeHover?.(node),
     []
   );
-  const stableOnEdgeHover = useCallback3(
+  const stableOnEdgeHover = useCallback4(
     (edge) => handlersRef.current.onEdgeHover?.(edge),
     []
   );
-  const stableOnSelectionChange = useCallback3(
+  const stableOnSelectionChange = useCallback4(
     (nodeIds) => handlersRef.current.onSelectionChange?.(nodeIds),
     []
   );
-  useImperativeHandle2(
+  useImperativeHandle3(
     ref,
     () => ({
       search(query) {
@@ -404,7 +479,7 @@ var Graph = forwardRef2(function Graph2({
     }),
     []
   );
-  useEffect3(() => {
+  useEffect4(() => {
     const container = containerRef.current;
     if (!container) return;
     const options = {
@@ -436,7 +511,7 @@ var Graph = forwardRef2(function Graph2({
     stableOnEdgeHover,
     stableOnSelectionChange
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     const graph = graphRef.current;
     if (!graph) return;
     const specString = JSON.stringify(spec);
@@ -460,7 +535,7 @@ var Graph = forwardRef2(function Graph2({
     }
     graph.update(spec);
   }, [spec]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ref: containerRef,
@@ -472,13 +547,13 @@ var Graph = forwardRef2(function Graph2({
 
 // src/hooks.ts
 import { createChart as createChart2 } from "@opendata-ai/openchart-vanilla";
-import { useEffect as useEffect4, useRef as useRef4, useState } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useState } from "react";
 function useChart(spec, options) {
-  const ref = useRef4(null);
-  const chartRef = useRef4(null);
+  const ref = useRef5(null);
+  const chartRef = useRef5(null);
   const [layout, setLayout] = useState(null);
-  const specRef = useRef4("");
-  useEffect4(() => {
+  const specRef = useRef5("");
+  useEffect5(() => {
     const container = ref.current;
     if (!container) return;
     const mountOpts = {
@@ -497,7 +572,7 @@ function useChart(spec, options) {
       setLayout(null);
     };
   }, [options?.theme, options?.darkMode, options?.onDataPointClick, options?.responsive]);
-  useEffect4(() => {
+  useEffect5(() => {
     const chart = chartRef.current;
     if (!chart) return;
     const specString = JSON.stringify(spec);
@@ -515,7 +590,7 @@ function useChart(spec, options) {
 }
 function useDarkMode(mode) {
   const [isDark, setIsDark] = useState(() => resolveInitial(mode));
-  useEffect4(() => {
+  useEffect5(() => {
     if (mode !== "auto") {
       setIsDark(mode === "force");
       return;
@@ -542,25 +617,25 @@ function resolveInitial(mode) {
 }
 
 // src/hooks/useGraph.ts
-import { useCallback as useCallback4, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useRef as useRef6 } from "react";
 function useGraph() {
-  const ref = useRef5(null);
-  const search = useCallback4((query) => {
+  const ref = useRef6(null);
+  const search = useCallback5((query) => {
     ref.current?.search(query);
   }, []);
-  const clearSearch = useCallback4(() => {
+  const clearSearch = useCallback5(() => {
     ref.current?.clearSearch();
   }, []);
-  const zoomToFit = useCallback4(() => {
+  const zoomToFit = useCallback5(() => {
     ref.current?.zoomToFit();
   }, []);
-  const zoomToNode = useCallback4((nodeId) => {
+  const zoomToNode = useCallback5((nodeId) => {
     ref.current?.zoomToNode(nodeId);
   }, []);
-  const selectNode = useCallback4((nodeId) => {
+  const selectNode = useCallback5((nodeId) => {
     ref.current?.selectNode(nodeId);
   }, []);
-  const getSelectedNodes = useCallback4(() => {
+  const getSelectedNodes = useCallback5(() => {
     return ref.current?.getSelectedNodes() ?? [];
   }, []);
   return {
@@ -578,24 +653,24 @@ function useGraph() {
 import {
   createTable as createTable2
 } from "@opendata-ai/openchart-vanilla";
-import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef6, useState as useState2 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef7, useState as useState2 } from "react";
 function useTable(spec, options) {
-  const ref = useRef6(null);
-  const tableRef = useRef6(null);
+  const ref = useRef7(null);
+  const tableRef = useRef7(null);
   const [state, setState] = useState2({
     sort: null,
     search: "",
     page: 0
   });
   const originalOnStateChange = options?.onStateChange;
-  const handleStateChange = useCallback5(
+  const handleStateChange = useCallback6(
     (newState) => {
       setState(newState);
       originalOnStateChange?.(newState);
     },
     [originalOnStateChange]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     const container = ref.current;
     if (!container) return;
     const mountOpts = {
@@ -618,7 +693,7 @@ function useTable(spec, options) {
     options,
     spec
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     const table = tableRef.current;
     if (!table) return;
     table.update(spec);
@@ -632,21 +707,21 @@ function useTable(spec, options) {
 }
 
 // src/hooks/useTableState.ts
-import { useCallback as useCallback6, useState as useState3 } from "react";
+import { useCallback as useCallback7, useState as useState3 } from "react";
 function useTableState(initialState) {
   const [sort, setSortInternal] = useState3(initialState?.sort ?? null);
   const [search, setSearchInternal] = useState3(initialState?.search ?? "");
   const [page, setPageInternal] = useState3(initialState?.page ?? 0);
-  const setSort = useCallback6((newSort) => {
+  const setSort = useCallback7((newSort) => {
     setSortInternal(newSort);
   }, []);
-  const setSearch = useCallback6((query) => {
+  const setSearch = useCallback7((query) => {
     setSearchInternal(query);
   }, []);
-  const setPage = useCallback6((newPage) => {
+  const setPage = useCallback7((newPage) => {
     setPageInternal(newPage);
   }, []);
-  const resetState = useCallback6(() => {
+  const resetState = useCallback7(() => {
     setSortInternal(initialState?.sort ?? null);
     setSearchInternal(initialState?.search ?? "");
     setPageInternal(initialState?.page ?? 0);
@@ -667,14 +742,14 @@ import {
   createSankey
 } from "@opendata-ai/openchart-vanilla";
 import {
-  forwardRef as forwardRef3,
-  useCallback as useCallback7,
-  useEffect as useEffect6,
-  useImperativeHandle as useImperativeHandle3,
-  useRef as useRef7
+  forwardRef as forwardRef4,
+  useCallback as useCallback8,
+  useEffect as useEffect7,
+  useImperativeHandle as useImperativeHandle4,
+  useRef as useRef8
 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Sankey = forwardRef3(function Sankey2({
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Sankey = forwardRef4(function Sankey2({
   spec,
   theme: themeProp,
   darkMode,
@@ -689,33 +764,33 @@ var Sankey = forwardRef3(function Sankey2({
   const contextDarkMode = useVizDarkMode();
   const theme = themeProp ?? contextTheme;
   const resolvedDarkMode = darkMode ?? contextDarkMode;
-  const containerRef = useRef7(null);
-  const instanceRef = useRef7(null);
-  const specRef = useRef7("");
-  const handlersRef = useRef7({});
+  const containerRef = useRef8(null);
+  const instanceRef = useRef8(null);
+  const specRef = useRef8("");
+  const handlersRef = useRef8({});
   handlersRef.current = {
     onNodeClick,
     onLinkClick,
     onNodeHover,
     onLinkHover
   };
-  const stableOnNodeClick = useCallback7(
+  const stableOnNodeClick = useCallback8(
     (node) => handlersRef.current.onNodeClick?.(node),
     []
   );
-  const stableOnLinkClick = useCallback7(
+  const stableOnLinkClick = useCallback8(
     (link) => handlersRef.current.onLinkClick?.(link),
     []
   );
-  const stableOnNodeHover = useCallback7(
+  const stableOnNodeHover = useCallback8(
     (node) => handlersRef.current.onNodeHover?.(node),
     []
   );
-  const stableOnLinkHover = useCallback7(
+  const stableOnLinkHover = useCallback8(
     (link) => handlersRef.current.onLinkHover?.(link),
     []
   );
-  useImperativeHandle3(
+  useImperativeHandle4(
     ref,
     () => ({
       get instance() {
@@ -724,7 +799,7 @@ var Sankey = forwardRef3(function Sankey2({
     }),
     []
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const container = containerRef.current;
     if (!container) return;
     const options = {
@@ -750,7 +825,7 @@ var Sankey = forwardRef3(function Sankey2({
     stableOnNodeHover,
     stableOnLinkHover
   ]);
-  useEffect6(() => {
+  useEffect7(() => {
     const instance = instanceRef.current;
     if (!instance) return;
     const specString = JSON.stringify(spec);
@@ -758,7 +833,7 @@ var Sankey = forwardRef3(function Sankey2({
     specRef.current = specString;
     instance.update(spec);
   }, [spec]);
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ref: containerRef,
@@ -773,35 +848,35 @@ import {
   createTileMap
 } from "@opendata-ai/openchart-vanilla";
 import {
-  forwardRef as forwardRef4,
-  useCallback as useCallback8,
-  useEffect as useEffect7,
-  useImperativeHandle as useImperativeHandle4,
-  useRef as useRef8
+  forwardRef as forwardRef5,
+  useCallback as useCallback9,
+  useEffect as useEffect8,
+  useImperativeHandle as useImperativeHandle5,
+  useRef as useRef9
 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var TileMap = forwardRef4(function TileMap2({ spec, theme: themeProp, darkMode, onTileClick, onTileHover, className, style }, ref) {
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TileMap = forwardRef5(function TileMap2({ spec, theme: themeProp, darkMode, onTileClick, onTileHover, className, style }, ref) {
   const contextTheme = useVizTheme();
   const contextDarkMode = useVizDarkMode();
   const theme = themeProp ?? contextTheme;
   const resolvedDarkMode = darkMode ?? contextDarkMode;
-  const containerRef = useRef8(null);
-  const instanceRef = useRef8(null);
-  const specRef = useRef8("");
-  const handlersRef = useRef8({});
+  const containerRef = useRef9(null);
+  const instanceRef = useRef9(null);
+  const specRef = useRef9("");
+  const handlersRef = useRef9({});
   handlersRef.current = {
     onTileClick,
     onTileHover
   };
-  const stableOnTileClick = useCallback8(
+  const stableOnTileClick = useCallback9(
     (tile) => handlersRef.current.onTileClick?.(tile),
     []
   );
-  const stableOnTileHover = useCallback8(
+  const stableOnTileHover = useCallback9(
     (tile) => handlersRef.current.onTileHover?.(tile),
     []
   );
-  useImperativeHandle4(
+  useImperativeHandle5(
     ref,
     () => ({
       get instance() {
@@ -810,7 +885,7 @@ var TileMap = forwardRef4(function TileMap2({ spec, theme: themeProp, darkMode,
     }),
     []
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const container = containerRef.current;
     if (!container) return;
     const options = {
@@ -827,7 +902,7 @@ var TileMap = forwardRef4(function TileMap2({ spec, theme: themeProp, darkMode,
       instanceRef.current = null;
     };
   }, [theme, resolvedDarkMode, stableOnTileClick, stableOnTileHover]);
-  useEffect7(() => {
+  useEffect8(() => {
     const instance = instanceRef.current;
     if (!instance) return;
     const specString = JSON.stringify(spec);
@@ -835,7 +910,7 @@ var TileMap = forwardRef4(function TileMap2({ spec, theme: themeProp, darkMode,
     specRef.current = specString;
     instance.update(spec);
   }, [spec]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ref: containerRef,
@@ -846,11 +921,17 @@ var TileMap = forwardRef4(function TileMap2({ spec, theme: themeProp, darkMode,
 });
 
 // src/Visualization.tsx
-import { isGraphSpec, isSankeySpec, isTableSpec, isTileMapSpec } from "@opendata-ai/openchart-core";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import {
+  isBarListSpec,
+  isGraphSpec,
+  isSankeySpec,
+  isTableSpec,
+  isTileMapSpec
+} from "@opendata-ai/openchart-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Visualization({ spec, theme, darkMode, className, style }) {
   if (isTableSpec(spec)) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       DataTable,
       {
         spec,
@@ -862,17 +943,21 @@ function Visualization({ spec, theme, darkMode, className, style }) {
     );
   }
   if (isGraphSpec(spec)) {
-    return /* @__PURE__ */ jsx7(Graph, { spec, theme, darkMode, className, style });
+    return /* @__PURE__ */ jsx8(Graph, { spec, theme, darkMode, className, style });
   }
   if (isSankeySpec(spec)) {
-    return /* @__PURE__ */ jsx7(Sankey, { spec, theme, darkMode, className, style });
+    return /* @__PURE__ */ jsx8(Sankey, { spec, theme, darkMode, className, style });
   }
   if (isTileMapSpec(spec)) {
-    return /* @__PURE__ */ jsx7(TileMap, { spec, theme, darkMode, className, style });
+    return /* @__PURE__ */ jsx8(TileMap, { spec, theme, darkMode, className, style });
+  }
+  if (isBarListSpec(spec)) {
+    return /* @__PURE__ */ jsx8(BarList, { spec, theme, darkMode, className, style });
   }
-  return /* @__PURE__ */ jsx7(Chart, { spec, theme, darkMode, className, style });
+  return /* @__PURE__ */ jsx8(Chart, { spec, theme, darkMode, className, style });
 }
 export {
+  BarList,
   Chart,
   DataTable,
   Graph,
@@ -882,6 +967,7 @@ export {
   VizThemeProvider,
   clearRenderers,
   compile,
+  compileBarList,
   compileChart,
   compileGraph,
   compileSankey,