@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-CBALIFPW.mjs

@@ -0,0 +1,275 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartAxis } from './chunk-RQSQXQN6.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartGrid } from './chunk-677VSTPW.mjs';
+import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { ChartSeries } from './chunk-SDLMB34Y.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { useMemo, useCallback } from 'react';
+import { getChartInnerRect, getNumberExtent, createLinearScale, DEFAULT_CHART_COLORS, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ScatterChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  xScale,
+  yScale,
+  pointSize = 4,
+  pointColor = "var(--tiger-primary,#2563eb)",
+  pointOpacity,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = false,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  onHoveredIndexChange,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  onSelectedIndexChange,
+  onPointClick,
+  onPointHover,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  legendFormatter,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Other
+  colors,
+  title,
+  desc,
+  className
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onPointHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onPointClick
+    }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const xValues = useMemo(() => data.map((item) => item.x), [data]);
+  const yValues = useMemo(() => data.map((item) => item.y), [data]);
+  const resolvedXScale = useMemo(() => {
+    if (xScale) return xScale;
+    const extent = getNumberExtent(xValues, { includeZero });
+    return createLinearScale(extent, [0, innerRect.width]);
+  }, [xScale, xValues, includeZero, innerRect.width]);
+  const resolvedYScale = useMemo(() => {
+    if (yScale) return yScale;
+    const extent = getNumberExtent(yValues, { includeZero });
+    return createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScale, yValues, includeZero, innerRect.height]);
+  const palette = useMemo(
+    () => colors && colors.length > 0 ? colors : pointColor ? [pointColor] : [...DEFAULT_CHART_COLORS],
+    [colors, pointColor]
+  );
+  const points = useMemo(
+    () => data.map((item, index) => {
+      const color = item.color ?? palette[index % palette.length];
+      const opacity = getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        cx: resolvedXScale.map(item.x),
+        cy: resolvedYScale.map(item.y),
+        r: item.size ?? pointSize,
+        color,
+        opacity: pointOpacity ?? opacity,
+        datum: item
+      };
+    }),
+    [
+      data,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      resolvedXScale,
+      resolvedYScale,
+      pointSize,
+      pointOpacity
+    ]
+  );
+  const legendItems = useMemo(
+    () => data.map((item, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(item, index) : item.label ?? `(${item.x}, ${item.y})`,
+      color: item.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [data, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = useCallback(
+    (datum, index) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, index);
+      const label = datum.label ?? `Point ${index + 1}`;
+      return `${label}: (${datum.x}, ${datum.y})`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const datum = data[resolvedHoveredIndex];
+    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
+  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        showGrid && /* @__PURE__ */ jsx(
+          ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(ChartSeries, { data, type: "scatter", children: points.map((point, index) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: point.cx,
+            cy: point.cy,
+            r: point.r,
+            fill: point.color,
+            opacity: point.opacity,
+            className: classNames(
+              "transition-opacity duration-150",
+              (hoverable || selectable) && "cursor-pointer"
+            ),
+            tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": point.datum.label ?? `Point ${index + 1}: (${point.datum.x}, ${point.datum.y})`,
+            "data-point-index": index,
+            onMouseEnter: (e) => handleMouseEnter(index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(index),
+            onKeyDown: (e) => handleKeyDown(e, index)
+          },
+          `point-${index}`
+        )) })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsx(
+      ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var ScatterChart_default = ScatterChart;
+
+export { ScatterChart, ScatterChart_default };

package/dist/{chunk-BIWO5KB4.mjs → chunk-CJJ56NVL.mjs}

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
 import { flushSync } from 'react-dom';
-import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, messageContentClasses, messageCloseButtonClasses, messageCloseIconPath, isBrowser, messageLoadingSpinnerClasses, icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap } from '@expcat/tigercat-core';
+import { classNames, messageContainerBaseClasses, messagePositionClasses, getMessageTypeClasses, defaultMessageThemeColors, messageBaseClasses, getMessageIconPath, messageIconClasses, ANIMATION_DURATION_MS, messageContentClasses, messageCloseButtonClasses, messageCloseIconPath, isBrowser, messageLoadingSpinnerClasses, icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Message.tsx
@@ -54,7 +54,7 @@ var MessageItem = ({ message, onClose }) => {
   const iconClass = classNames(messageIconClasses, colorScheme.icon);
   const handleClose = useCallback(() => {
     setIsVisible(false);
-    setTimeout(() => onClose(message.id), 300);
+    setTimeout(() => onClose(message.id), ANIMATION_DURATION_MS);
   }, [message.id, onClose]);
   const a11yRole = message.type === "error" ? "alert" : "status";
   const ariaLive = message.type === "error" ? "assertive" : "polite";

package/dist/{chunk-ENR3RIMM.js → chunk-DGBYGBLR.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -8,7 +9,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/components/Popconfirm.tsx
 var popconfirmIdCounter = 0;
 var createPopconfirmId = () => `tiger-popconfirm-${++popconfirmIdCounter}`;
 var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -39,7 +39,8 @@ var Popconfirm = ({
   okText = "\u786E\u5B9A",
   cancelText = "\u53D6\u6D88",
   okType = "primary",
-  placement = "top",
+  placement: initialPlacement = "top",
+  offset = 8,
   disabled = false,
   className,
   style,
@@ -55,6 +56,8 @@ var Popconfirm = ({
   const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
   const currentVisible = isControlled ? visible : internalVisible;
   const containerRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
   const popconfirmIdRef = React.useRef(null);
   if (!popconfirmIdRef.current) {
     popconfirmIdRef.current = createPopconfirmId();
@@ -82,40 +85,40 @@ var Popconfirm = ({
     if (disabled) return;
     setVisible(!currentVisible);
   };
-  React.useEffect(() => {
-    if (!currentVisible) return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (containerRef.current?.contains(target)) return;
-      setVisible(false);
-    };
-    const timeoutId = window.setTimeout(() => {
-      document.addEventListener("click", handleClickOutside);
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [currentVisible]);
-  React.useEffect(() => {
-    if (!currentVisible) return;
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      setVisible(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [currentVisible]);
+  const { x, y, placement } = chunkZYPEO2KY_js.useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement: initialPlacement,
+    offset
+  });
+  const handleOutsideClick = React.useCallback(() => setVisible(false), []);
+  const handleEscape = React.useCallback(() => setVisible(false), []);
+  chunkZYPEO2KY_js.useClickOutside({
+    enabled: currentVisible,
+    refs: [containerRef],
+    onOutsideClick: handleOutsideClick,
+    defer: true
+  });
+  chunkZYPEO2KY_js.useEscapeKey({
+    enabled: currentVisible,
+    onEscape: handleEscape
+  });
+  const contentWrapperStyles = React.useMemo(
+    () => ({
+      position: "absolute",
+      left: x,
+      top: y,
+      transformOrigin: tigercatCore.getTransformOrigin(placement)
+    }),
+    [x, y, placement]
+  );
   const containerClasses = React.useMemo(
     () => tigercatCore.classNames(tigercatCore.getPopconfirmContainerClasses(), className),
     [className]
   );
   const triggerClasses = React.useMemo(() => tigercatCore.getPopconfirmTriggerClasses(disabled), [disabled]);
-  const contentWrapperClasses = React.useMemo(
-    () => tigercatCore.getDropdownMenuWrapperClasses(Boolean(currentVisible), placement),
-    [currentVisible, placement]
-  );
+  const contentWrapperClasses = React.useMemo(() => "absolute z-50", []);
   const arrowClasses = React.useMemo(() => tigercatCore.getPopconfirmArrowClasses(placement), [placement]);
   const contentClasses = React.useMemo(() => tigercatCore.getPopconfirmContentClasses(), []);
   const titleClasses = React.useMemo(() => tigercatCore.getPopconfirmTitleClasses(), []);
@@ -171,34 +174,44 @@ var Popconfirm = ({
     );
   })();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
-    triggerNode,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          id: popconfirmId,
-          role: "dialog",
-          "aria-modal": "false",
-          "aria-labelledby": titleId,
-          "aria-describedby": describedBy,
-          className: contentClasses,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
-              showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PopconfirmIcon, { type: icon }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
-                (description || descriptionContent) && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonsClasses, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
-            ] })
-          ]
-        }
-      )
-    ] }) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, children: triggerNode }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: floatingRef,
+        className: contentWrapperClasses,
+        style: contentWrapperStyles,
+        hidden: !currentVisible,
+        "aria-hidden": !currentVisible,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              id: popconfirmId,
+              role: "dialog",
+              "aria-modal": "false",
+              "aria-labelledby": titleId,
+              "aria-describedby": describedBy,
+              className: contentClasses,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
+                  showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PopconfirmIcon, { type: icon }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
+                    (description || descriptionContent) && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonsClasses, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    )
   ] });
 };
 

package/dist/chunk-DUWAV47E.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartCanvas.tsx
+var ChartCanvas = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  className,
+  title,
+  desc,
+  children,
+  ...props
+}) => {
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const svgClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.chartCanvasBaseClasses, className), [className]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ...props,
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: svgClasses,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+        desc ? /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+      ]
+    }
+  );
+};
+var ChartCanvas_default = ChartCanvas;
+
+exports.ChartCanvas = ChartCanvas;
+exports.ChartCanvas_default = ChartCanvas_default;

package/dist/chunk-E5GD3H7L.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartAxis.tsx
+var ChartAxis = ({
+  orientation = "bottom",
+  scale,
+  ticks = 5,
+  tickValues,
+  tickFormat,
+  tickSize = 6,
+  tickPadding = 4,
+  label,
+  labelOffset = 28,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const axisTicks = react.useMemo(
+    () => tigercatCore.getChartAxisTicks(scale, {
+      tickCount: ticks,
+      tickValues,
+      tickFormat
+    }),
+    [scale, ticks, tickValues, tickFormat]
+  );
+  const isHorizontal = orientation === "top" || orientation === "bottom";
+  const isTopOrLeft = orientation === "top" || orientation === "left";
+  const rangeStart = scale.range[0];
+  const rangeEnd = scale.range[1];
+  const axisLine = isHorizontal ? { x1: rangeStart, y1: 0, x2: rangeEnd, y2: 0 } : { x1: 0, y1: rangeStart, x2: 0, y2: rangeEnd };
+  const tickDirection = isTopOrLeft ? -1 : 1;
+  const labelBase = tickSize + tickPadding + labelOffset;
+  const labelPosition = (rangeStart + rangeEnd) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { ...props, className: tigercatCore.classNames(className), transform: `translate(${x}, ${y})`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { ...axisLine, className: tigercatCore.chartAxisLineClasses, "data-axis-line": "true" }),
+    axisTicks.map((tick) => {
+      const textAnchor = isHorizontal ? "middle" : isTopOrLeft ? "end" : "start";
+      const tickLine = isHorizontal ? {
+        x1: tick.position,
+        y1: 0,
+        x2: tick.position,
+        y2: tickSize * tickDirection
+      } : {
+        x1: 0,
+        y1: tick.position,
+        x2: tickSize * tickDirection,
+        y2: tick.position
+      };
+      const textProps = isHorizontal ? {
+        x: tick.position,
+        y: tickSize * tickDirection + tickPadding * tickDirection,
+        textAnchor,
+        dy: isTopOrLeft ? "-0.32em" : "0.71em"
+      } : {
+        x: (tickSize + tickPadding) * tickDirection,
+        y: tick.position,
+        textAnchor,
+        dy: "0.32em"
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-axis-tick": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { ...tickLine, className: tigercatCore.chartAxisTickLineClasses }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { ...textProps, className: tigercatCore.chartAxisTickTextClasses, children: tick.label })
+      ] }, `${tick.value}`);
+    }),
+    label ? /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        className: tigercatCore.chartAxisLabelClasses,
+        "data-axis-label": "true",
+        ...isHorizontal ? {
+          x: labelPosition,
+          y: labelBase * tickDirection,
+          textAnchor: "middle",
+          dy: isTopOrLeft ? "-0.32em" : "0.71em"
+        } : {
+          x: labelBase * tickDirection,
+          y: labelPosition,
+          textAnchor: "middle",
+          transform: `rotate(${isTopOrLeft ? -90 : 90} ${labelBase * tickDirection} ${labelPosition})`
+        },
+        children: label
+      }
+    ) : null
+  ] });
+};
+var ChartAxis_default = ChartAxis;
+
+exports.ChartAxis = ChartAxis;
+exports.ChartAxis_default = ChartAxis_default;