@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-QI6WAP6Y.js

@@ -0,0 +1,285 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var BarChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  xScale,
+  yScale,
+  barColor = "var(--tiger-primary,#2563eb)",
+  barRadius = 4,
+  barPaddingInner = 0.2,
+  barPaddingOuter = 0.1,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  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,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onBarClick,
+  onBarHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onBarHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onBarClick
+    }
+  });
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const xDomain = react.useMemo(() => data.map((item) => String(item.x)), [data]);
+  const yValues = react.useMemo(() => data.map((item) => item.y), [data]);
+  const resolvedXScale = react.useMemo(() => {
+    if (xScale) return xScale;
+    return tigercatCore.createBandScale(xDomain, [0, innerRect.width], {
+      paddingInner: barPaddingInner,
+      paddingOuter: barPaddingOuter
+    });
+  }, [xScale, xDomain, innerRect.width, barPaddingInner, barPaddingOuter]);
+  const resolvedYScale = react.useMemo(() => {
+    if (yScale) return yScale;
+    const extent = tigercatCore.getNumberExtent(yValues, { includeZero: true });
+    return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScale, yValues, innerRect.height]);
+  const palette = react.useMemo(
+    () => colors && colors.length > 0 ? colors : barColor ? [barColor] : [...tigercatCore.DEFAULT_CHART_COLORS],
+    [colors, barColor]
+  );
+  const bars = react.useMemo(() => {
+    const scale = resolvedXScale;
+    const bandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.width / Math.max(1, data.length) * 0.8);
+    const baseline = resolvedYScale.map(0);
+    return data.map((item, index) => {
+      const xKey = scale.type === "linear" ? Number(item.x) : String(item.x);
+      const xPos = scale.map(xKey);
+      const barX = scale.bandwidth ? xPos : xPos - bandWidth / 2;
+      const barYValue = resolvedYScale.map(item.y);
+      const barHeight = Math.abs(baseline - barYValue);
+      const barY = Math.min(baseline, barYValue);
+      const color = item.color ?? palette[index % palette.length];
+      const opacity = tigercatCore.getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        x: barX,
+        y: barY,
+        width: bandWidth,
+        height: barHeight,
+        color,
+        opacity,
+        datum: item,
+        index
+      };
+    });
+  }, [
+    resolvedXScale,
+    resolvedYScale,
+    data,
+    innerRect.width,
+    palette,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity
+  ]);
+  const legendItems = react.useMemo(
+    () => data.map((item, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(item, index) : item.label ?? String(item.x),
+      color: item.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [data, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = react.useCallback(
+    (datum, index) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, index);
+      const label = datum.label ?? String(datum.x);
+      return `${label}: ${datum.y}`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = react.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__ */ jsxRuntime.jsxs(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+          chunk3QFHVAZT_js.ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+          chunkE5GD3H7L_js.ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkAX5XRD2Q_js.ChartSeries, { data, type: "bar", children: bars.map((bar) => /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            rx: barRadius,
+            ry: barRadius,
+            fill: bar.color,
+            opacity: bar.opacity,
+            className: tigercatCore.classNames(
+              "transition-opacity duration-150",
+              (hoverable || selectable) && "cursor-pointer"
+            ),
+            tabIndex: selectable ? 0 : void 0,
+            onMouseEnter: (e) => handleMouseEnter(bar.index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(bar.index),
+            onKeyDown: (e) => handleKeyDown(e, bar.index)
+          },
+          `bar-${bar.index}`
+        )) })
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  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: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var BarChart_default = BarChart;
+
+exports.BarChart = BarChart;
+exports.BarChart_default = BarChart_default;

package/dist/{chunk-WK5HN4OH.js → chunk-QY6I7LU5.js}

@@ -1,10 +1,10 @@
 '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');
 
-// src/components/Tooltip.tsx
 var tooltipIdCounter = 0;
 var createTooltipId = () => `tiger-tooltip-${++tooltipIdCounter}`;
 var Tooltip = ({
@@ -14,6 +14,7 @@ var Tooltip = ({
   trigger = "hover",
   placement = "top",
   disabled = false,
+  offset = 8,
   className,
   style,
   children,
@@ -25,6 +26,8 @@ var Tooltip = ({
   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 tooltipIdRef = react.useRef(null);
   if (!tooltipIdRef.current) {
     tooltipIdRef.current = createTooltipId();
@@ -32,6 +35,17 @@ var Tooltip = ({
   const tooltipId = tooltipIdRef.current;
   const tooltipContent = contentContent ?? content;
   const describedBy = tooltipContent != null ? tooltipId : void 0;
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = chunkZYPEO2KY_js.useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
   const setVisible = react.useCallback(
     (newVisible) => {
       if (disabled && newVisible) return;
@@ -62,35 +76,26 @@ var Tooltip = ({
     if (disabled || trigger !== "focus") return;
     setVisible(false);
   };
-  react.useEffect(() => {
-    if (!currentVisible || trigger !== "click") return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (containerRef.current?.contains(target)) return;
-      setVisible(false);
-    };
-    const timeoutId = setTimeout(() => {
-      document.addEventListener("click", handleClickOutside);
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [currentVisible, trigger, setVisible]);
-  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, setVisible]);
+  chunkZYPEO2KY_js.useClickOutside({
+    enabled: currentVisible && trigger === "click",
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  chunkZYPEO2KY_js.useEscapeKey({
+    enabled: currentVisible,
+    onEscape: () => setVisible(false)
+  });
   const containerClasses = tigercatCore.classNames(tigercatCore.getTooltipContainerClasses(), className);
   const triggerClasses = tigercatCore.getTooltipTriggerClasses(disabled);
-  const contentWrapperClasses = tigercatCore.getDropdownMenuWrapperClasses(currentVisible, placement);
   const contentClasses = tigercatCore.getTooltipContentClasses();
+  const floatingStyles = {
+    position: "absolute",
+    left: x,
+    top: y,
+    transformOrigin: tigercatCore.getTransformOrigin(actualPlacement),
+    zIndex: 1e3
+  };
   const triggerHandlers = {};
   if (trigger === "click") {
     triggerHandlers.onClick = handleTriggerClick;
@@ -105,8 +110,17 @@ var Tooltip = ({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: triggerClasses, "aria-describedby": describedBy, ...triggerHandlers, children }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: tooltipContent }) })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        "aria-describedby": describedBy,
+        ...triggerHandlers,
+        children
+      }
+    ),
+    currentVisible && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: tooltipContent }) })
   ] });
 };
 

package/dist/{chunk-KSW5JDIV.js → chunk-R7TOQU3U.js}

@@ -56,7 +56,7 @@ var MessageItem = ({ message, onClose }) => {
   const iconClass = tigercatCore.classNames(tigercatCore.messageIconClasses, colorScheme.icon);
   const handleClose = react.useCallback(() => {
     setIsVisible(false);
-    setTimeout(() => onClose(message.id), 300);
+    setTimeout(() => onClose(message.id), tigercatCore.ANIMATION_DURATION_MS);
   }, [message.id, onClose]);
   const a11yRole = message.type === "error" ? "alert" : "status";
   const ariaLive = message.type === "error" ? "assertive" : "polite";

package/dist/chunk-RQSQXQN6.mjs

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+import { getChartAxisTicks, classNames, chartAxisLineClasses, chartAxisTickLineClasses, chartAxisTickTextClasses, chartAxisLabelClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from '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 = useMemo(
+    () => 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__ */ jsxs("g", { ...props, className: classNames(className), transform: `translate(${x}, ${y})`, children: [
+    /* @__PURE__ */ jsx("line", { ...axisLine, className: 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__ */ jsxs("g", { "data-axis-tick": "true", children: [
+        /* @__PURE__ */ jsx("line", { ...tickLine, className: chartAxisTickLineClasses }),
+        /* @__PURE__ */ jsx("text", { ...textProps, className: chartAxisTickTextClasses, children: tick.label })
+      ] }, `${tick.value}`);
+    }),
+    label ? /* @__PURE__ */ jsx(
+      "text",
+      {
+        className: 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;
+
+export { ChartAxis, ChartAxis_default };

package/dist/chunk-SDLMB34Y.mjs

@@ -0,0 +1,32 @@
+import { classNames } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ChartSeries.tsx
+var ChartSeries = ({
+  data,
+  name,
+  color,
+  opacity,
+  type,
+  className,
+  children,
+  ...props
+}) => {
+  const content = typeof children === "function" ? children({ data, name, color, opacity, type }) : children;
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      ...props,
+      className: classNames(className),
+      "data-series-name": name,
+      "data-series-type": type,
+      fill: color,
+      stroke: color,
+      opacity,
+      children: content
+    }
+  );
+};
+var ChartSeries_default = ChartSeries;
+
+export { ChartSeries, ChartSeries_default };

package/dist/chunk-UG3I4PCY.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var chunkN32MAX4A_js = require('./chunk-N32MAX4A.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DonutChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  innerRadius,
+  innerRadiusRatio = 0.6,
+  outerRadius,
+  startAngle = 0,
+  endAngle = Math.PI * 2,
+  padAngle = 0,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Accessibility
+  title,
+  desc,
+  className,
+  // Callbacks
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const resolvedOuterRadius = react.useMemo(() => {
+    if (typeof outerRadius === "number") return Math.max(0, outerRadius);
+    return Math.max(0, Math.min(innerRect.width, innerRect.height) / 2);
+  }, [outerRadius, innerRect.width, innerRect.height]);
+  const resolvedInnerRadius = react.useMemo(() => {
+    if (typeof innerRadius === "number") {
+      return Math.min(Math.max(0, innerRadius), resolvedOuterRadius);
+    }
+    const ratio = Math.min(Math.max(innerRadiusRatio ?? 0.6, 0), 1);
+    return resolvedOuterRadius * ratio;
+  }, [innerRadius, innerRadiusRatio, resolvedOuterRadius]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkN32MAX4A_js.PieChart,
+    {
+      width,
+      height,
+      padding,
+      data,
+      innerRadius: resolvedInnerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      padAngle,
+      colors,
+      showLabels,
+      labelFormatter,
+      hoverable,
+      hoveredIndex,
+      activeOpacity,
+      inactiveOpacity,
+      selectable,
+      selectedIndex,
+      showLegend,
+      legendPosition,
+      legendMarkerSize,
+      legendGap,
+      showTooltip,
+      tooltipFormatter,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      onHoveredIndexChange,
+      onSelectedIndexChange,
+      onSliceClick,
+      onSliceHover
+    }
+  );
+};
+var DonutChart_default = DonutChart;
+
+exports.DonutChart = DonutChart;
+exports.DonutChart_default = DonutChart_default;