@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/{chunk-ZBVFM3GJ.js → chunk-XO6NSGV3.js}

@@ -85,6 +85,19 @@ function Table({
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
+  // v0.6.0 props
+  virtual = false,
+  virtualHeight = 400,
+  virtualItemHeight: _virtualItemHeight = 40,
+  editable = false,
+  editableCells,
+  filterMode = "basic",
+  advancedFilterRules = [],
+  columnDraggable = false,
+  summaryRow,
+  groupBy,
+  exportable = false,
+  exportFilename = "export",
   onChange,
   onRowClick,
   onSelectionChange,
@@ -92,6 +105,9 @@ function Table({
   onFilterChange,
   onPageChange,
   onExpandChange,
+  onCellChange,
+  onColumnOrderChange,
+  onExport,
   className,
   ...props
 }) {
@@ -194,13 +210,17 @@ function Table({
   );
   const processedData = React.useMemo(() => {
     let data = dataSource;
-    data = tigercatCore.filterData(data, filterState);
+    if (filterMode === "advanced" && advancedFilterRules.length > 0) {
+      data = tigercatCore.filterDataAdvanced(data, advancedFilterRules);
+    } else {
+      data = tigercatCore.filterData(data, filterState);
+    }
     if (sortState.key && sortState.direction) {
       const column = columnByKey[sortState.key];
       data = tigercatCore.sortData(data, sortState.key, sortState.direction, column?.sortFn);
     }
     return data;
-  }, [dataSource, filterState, sortState, columnByKey]);
+  }, [dataSource, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
   const paginatedData = React.useMemo(() => {
     if (pagination === false) {
       return processedData;
@@ -399,6 +419,59 @@ function Table({
   const someSelected = React.useMemo(() => {
     return selectedRowKeys.length > 0 && !allSelected;
   }, [selectedRowKeys.length, allSelected]);
+  const [editingCell, setEditingCell] = React.useState(
+    null
+  );
+  const [editingValue, setEditingValue] = React.useState("");
+  const isCellEditable = React.useCallback(
+    (columnKey, rowIndex) => {
+      if (!editable) return false;
+      if (!editableCells) return true;
+      return !!editableCells.get(columnKey)?.has(rowIndex);
+    },
+    [editable, editableCells]
+  );
+  const startEditing = React.useCallback((rowIndex, columnKey, currentValue) => {
+    setEditingCell({ rowIndex, columnKey });
+    setEditingValue(String(currentValue ?? ""));
+  }, []);
+  const commitEdit = React.useCallback(() => {
+    if (editingCell) {
+      onCellChange?.(editingCell.rowIndex, editingCell.columnKey, editingValue);
+      setEditingCell(null);
+    }
+  }, [editingCell, editingValue, onCellChange]);
+  const cancelEdit = React.useCallback(() => {
+    setEditingCell(null);
+  }, []);
+  const handleExport = React.useCallback(() => {
+    const csv = tigercatCore.exportTableToCsv(displayColumns, processedData);
+    tigercatCore.downloadCsv(csv, exportFilename);
+    onExport?.(csv);
+  }, [displayColumns, processedData, exportFilename, onExport]);
+  const [dragColumnKey, setDragColumnKey] = React.useState(null);
+  const handleDragStart = React.useCallback((columnKey) => {
+    setDragColumnKey(columnKey);
+  }, []);
+  const handleDrop = React.useCallback(
+    (targetKey) => {
+      if (!dragColumnKey || dragColumnKey === targetKey) return;
+      const cols = [...displayColumns];
+      const fromIdx = cols.findIndex((c) => c.key === dragColumnKey);
+      const toIdx = cols.findIndex((c) => c.key === targetKey);
+      if (fromIdx >= 0 && toIdx >= 0) {
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        onColumnOrderChange?.(cols);
+      }
+      setDragColumnKey(null);
+    },
+    [dragColumnKey, displayColumns, onColumnOrderChange]
+  );
+  const groupedData = React.useMemo(() => {
+    if (!groupBy) return null;
+    return tigercatCore.groupDataByColumn(paginatedData, groupBy);
+  }, [groupBy, paginatedData]);
   const renderTableHeader = React.useCallback(() => {
     const expandHeaderTh = expandable ? /* @__PURE__ */ jsxRuntime.jsx("th", { className: tigercatCore.getExpandIconCellClasses(size), "aria-label": "Expand" }) : null;
     const expandAtStart = expandable?.expandIconPosition !== "end";
@@ -449,6 +522,10 @@ function Table({
               (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
             ),
             style,
+            draggable: columnDraggable ? true : void 0,
+            onDragStart: columnDraggable ? () => handleDragStart(column.key) : void 0,
+            onDragOver: columnDraggable ? (e) => e.preventDefault() : void 0,
+            onDrop: columnDraggable ? () => handleDrop(column.key) : void 0,
             onClick: column.sortable ? () => handleSort(column.key) : void 0,
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -513,7 +590,10 @@ function Table({
     handleSelectAll,
     columnLockable,
     toggleColumnLock,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    columnDraggable,
+    handleDragStart,
+    handleDrop
   ]);
   const renderTableBody = React.useCallback(() => {
     if (loading) {
@@ -522,7 +602,7 @@ function Table({
     if (paginatedData.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, className: tigercatCore.tableEmptyStateClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedData.map((record, index) => {
+    const renderDataRow = (record, index) => {
       const key = pageRowKeys[index];
       const isSelected = selectedRowKeySet.has(key);
       const isExpanded = expandedRowKeySet.has(key);
@@ -587,15 +667,32 @@ function Table({
                 stickyBgClass,
                 hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
               ) : void 0;
+              const isEditing = editingCell?.rowIndex === index && editingCell?.columnKey === column.key;
+              const cellEditable = isCellEditable(column.key, index);
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "td",
                 {
                   className: tigercatCore.classNames(
                     tigercatCore.getTableCellClasses(size, column.align || "left", column.className),
-                    stickyCellClass
+                    stickyCellClass,
+                    cellEditable && tigercatCore.getEditableCellClasses(!!isEditing)
                   ),
                   style,
-                  children: column.render ? column.render(record, index) : cellValue
+                  onDoubleClick: cellEditable ? () => startEditing(index, column.key, cellValue) : void 0,
+                  children: isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      className: tigercatCore.editableCellInputClasses,
+                      value: editingValue,
+                      onChange: (e) => setEditingValue(e.target.value),
+                      onBlur: commitEdit,
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") commitEdit();
+                        if (e.key === "Escape") cancelEdit();
+                      },
+                      autoFocus: true
+                    }
+                  ) : column.render ? column.render(record, index) : cellValue
                 },
                 column.key
               );
@@ -613,7 +710,22 @@ function Table({
         ] }, key);
       }
       return rowNode;
-    }) });
+    };
+    if (groupedData) {
+      return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from(groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("tr", { className: tigercatCore.tableGroupHeaderClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("td", { colSpan: totalColumnCount, className: tigercatCore.getGroupHeaderCellClasses(size), children: [
+          groupKey,
+          " (",
+          groupItems.length,
+          ")"
+        ] }) }),
+        groupItems.map((record, idx) => {
+          const globalIndex = paginatedData.indexOf(record);
+          return renderDataRow(record, globalIndex >= 0 ? globalIndex : idx);
+        })
+      ] }, `group-${groupKey}`)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: paginatedData.map((record, index) => renderDataRow(record, index)) });
   }, [
     loading,
     paginatedData,
@@ -632,7 +744,14 @@ function Table({
     handleRowClick,
     handleSelectRow,
     handleToggleExpand,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    groupedData,
+    editingCell,
+    editingValue,
+    isCellEditable,
+    startEditing,
+    commitEdit,
+    cancelEdit
   ]);
   const renderPagination = React.useCallback(() => {
     if (pagination === false || !paginationInfo) {
@@ -693,19 +812,36 @@ function Table({
     handlePageChange,
     handlePageSizeChange
   ]);
-  const wrapperStyle = React.useMemo(
-    () => maxHeight ? {
+  const renderSummaryRow = React.useCallback(() => {
+    if (!summaryRow?.show) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: tigercatCore.tableSummaryRowClasses, children: [
+      rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getTableCellClasses(size, "left") }),
+      expandable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getTableCellClasses(size, "left") }),
+      displayColumns.map((column) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: tigercatCore.getTableCellClasses(size, column.align || "left"), children: summaryRow.data[column.dataKey || column.key] ?? "" }, column.key))
+    ] }) });
+  }, [summaryRow, displayColumns, size, rowSelection, expandable]);
+  const wrapperStyle = React.useMemo(() => {
+    if (virtual) {
+      return {
+        height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
+        overflow: "auto"
+      };
+    }
+    return maxHeight ? {
       maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
-    } : void 0,
-    [maxHeight]
-  );
+    } : void 0;
+  }, [maxHeight, virtual, virtualHeight]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: tigercatCore.getTableWrapperClasses(bordered, maxHeight),
+      className: tigercatCore.getTableWrapperClasses(
+        bordered,
+        maxHeight || (virtual ? virtualHeight : void 0)
+      ),
       style: wrapperStyle,
       "aria-busy": loading,
       children: [
+        exportable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: tigercatCore.tableExportButtonClasses, onClick: handleExport, children: "Export CSV" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "table",
           {
@@ -721,7 +857,8 @@ function Table({
             } : props.style,
             children: [
               renderTableHeader(),
-              renderTableBody()
+              renderTableBody(),
+              renderSummaryRow()
             ]
           }
         ),

package/dist/{chunk-FMF2G6BJ.js → chunk-XR6B2URW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkW4TFISRK_js = require('./chunk-W4TFISRK.js');
+var chunkWK5QJO57_js = require('./chunk-WK5QJO57.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -57,7 +57,7 @@ var DonutChart = ({
   // DonutChart-specific
   centerValue,
   centerLabel,
-  animated = false,
+  animated: _animated = false,
   // Callbacks
   onHoveredIndexChange,
   onSelectedIndexChange,
@@ -98,7 +98,7 @@ var DonutChart = ({
   const centerY = pad.top + innerRect.height / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", "data-donut-chart": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkW4TFISRK_js.PieChart,
+      chunkWK5QJO57_js.PieChart,
       {
         width,
         height,

package/dist/chunk-Y3NDP56G.mjs

@@ -0,0 +1,174 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import React, { useMemo } from 'react';
+import { getChartInnerRect, computeHeatmapCells, resolveChartTooltipContent, classNames, chartAxisTickTextClasses, getChartElementOpacity } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var HeatmapChart = ({
+  width = 400,
+  height = 300,
+  padding = 40,
+  data,
+  xLabels,
+  yLabels,
+  minColor = "#f0f9ff",
+  maxColor = "#2563eb",
+  cellRadius = 2,
+  cellGap = 1,
+  showValues = false,
+  valueFormatter,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onCellClick }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const cells = useMemo(
+    () => computeHeatmapCells(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor
+    }),
+    [data, xLabels, yLabels, innerRect.width, innerRect.height, cellGap, minColor, maxColor]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, cells, void 0, (cell) => {
+      const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
+      return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+    }),
+    [resolvedHoveredIndex, cells, valueFormatter]
+  );
+  const interactive = hoverable || selectable;
+  const rect = innerRect;
+  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
+  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        xLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: i * (cellW + cellGap) + cellW / 2,
+            y: rect.height + 16,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: lbl
+          },
+          `x-${i}`
+        )),
+        yLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: -8,
+            y: i * (cellH + cellGap) + cellH / 2,
+            className: chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: lbl
+          },
+          `y-${i}`
+        )),
+        cells.map((cell, idx) => {
+          const opacity = getChartElementOpacity(idx, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                className: classNames(interactive && "cursor-pointer"),
+                style: { transition: "opacity 0.2s ease-out" },
+                onMouseEnter: (e) => handleMouseEnter(idx, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(idx)
+              }
+            ),
+            showValues && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                className: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                children: valueFormatter ? valueFormatter(cell.value) : `${cell.value}`
+              }
+            )
+          ] }, `cell-${idx}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    chart,
+    tooltip
+  ] });
+};
+
+export { HeatmapChart };

package/dist/chunk-YHFBPSMF.js

@@ -0,0 +1,198 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var TreeMapChart = ({
+  width = 400,
+  height = 300,
+  padding = 8,
+  data,
+  gap = 2,
+  showLabels = true,
+  minLabelSize = 10,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter: _tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onNodeClick,
+  onNodeHover
+}) => {
+  const innerRect = React.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = React.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const nodes = React.useMemo(
+    () => tigercatCore.computeTreeMapNodes(data, {
+      width: innerRect.width,
+      height: innerRect.height,
+      gap,
+      colors: palette
+    }),
+    [data, innerRect.width, innerRect.height, gap, palette]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => {
+      const node = nodes[index];
+      return node ? { label: node.label, value: node.value } : {};
+    },
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      const node = index !== null ? nodes[index] : null;
+      onNodeHover?.(
+        index,
+        node ? { label: node.label, value: node.value } : null
+      );
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onNodeClick }
+  });
+  const total = React.useMemo(() => nodes.reduce((s, n) => s + n.value, 0), [nodes]);
+  const legendItems = React.useMemo(
+    () => tigercatCore.buildChartLegendItems({
+      data: nodes,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [nodes, palette, activeIndex]
+  );
+  const tooltipContent = React.useMemo(
+    () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex, nodes, void 0, (node) => {
+      const pct = total > 0 ? (node.value / total * 100).toFixed(1) : "0";
+      return `${node.label}: ${node.value} (${pct}%)`;
+    }),
+    [resolvedHoveredIndex, nodes, total]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ jsxRuntime.jsx(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "treemap", children: nodes.map((node) => {
+        const opacity = tigercatCore.getChartElementOpacity(node.index, activeIndex, {
+          activeOpacity,
+          inactiveOpacity
+        });
+        return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: node.x,
+              y: node.y,
+              width: node.w,
+              height: node.h,
+              rx: 2,
+              fill: node.color,
+              opacity,
+              className: tigercatCore.classNames(interactive && "cursor-pointer"),
+              style: { transition: "opacity 0.2s ease-out" },
+              onMouseEnter: (e) => handleMouseEnter(node.index, e),
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleClick(node.index)
+            }
+          ),
+          showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: node.x + node.w / 2,
+              y: node.y + node.h / 2,
+              className: "fill-white text-xs",
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: {
+                pointerEvents: "none",
+                fontSize: `${Math.min(12, node.h * 0.3)}px`
+              },
+              children: node.label
+            }
+          )
+        ] }, `node-${node.index}`);
+      }) })
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunk6PBNFLM7_js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+
+exports.TreeMapChart = TreeMapChart;