@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-32MCQMBJ.mjs

@@ -1,332 +0,0 @@
-import {
-  useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
-import {
-  ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
-import {
-  ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
-
-// src/components/HeatmapChart.tsx
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  classNames,
-  computeHeatmapCells,
-  getHeatmapCellIndexAtPoint,
-  getChartElementOpacity,
-  getChartInnerRect,
-  resolveHeatmapRenderMode,
-  resolveChartTooltipContent,
-  chartAxisTickTextClasses
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var HeatmapChart = ({
-  width = 400,
-  height = 300,
-  padding = 40,
-  data,
-  xLabels,
-  yLabels,
-  minColor = "#f0f9ff",
-  maxColor = "#2563eb",
-  colorSpace = "rgb",
-  cellRadius = 2,
-  cellGap = 1,
-  showValues = false,
-  valueFormatter,
-  renderMode = "auto",
-  canvasThreshold,
-  hoverable = false,
-  hoveredIndex: hoveredIndexProp,
-  activeOpacity = 1,
-  inactiveOpacity = 0.25,
-  selectable = false,
-  selectedIndex: selectedIndexProp,
-  showTooltip = true,
-  title,
-  desc,
-  className,
-  onHoveredIndexChange,
-  onSelectedIndexChange,
-  onCellClick,
-  onCellHover
-}) => {
-  const canvasRef = useRef(null);
-  const {
-    tooltipPosition,
-    resolvedHoveredIndex,
-    activeIndex,
-    handleMouseEnter,
-    handleMouseMove,
-    handleMouseLeave,
-    handleClick
-  } = useChartInteraction({
-    hoverable,
-    showTooltip,
-    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,
-      colorSpace
-    }),
-    [
-      data,
-      xLabels,
-      yLabels,
-      innerRect.width,
-      innerRect.height,
-      cellGap,
-      minColor,
-      maxColor,
-      colorSpace
-    ]
-  );
-  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 pointerInteractive = interactive || showTooltip;
-  const rect = innerRect;
-  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
-  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
-  const resolvedRenderMode = resolveHeatmapRenderMode(cells.length, {
-    renderMode,
-    canvasThreshold
-  });
-  const shouldRenderCanvas = resolvedRenderMode === "canvas";
-  useEffect(() => {
-    if (!shouldRenderCanvas) return;
-    const canvas = canvasRef.current;
-    const context = canvas?.getContext("2d");
-    if (!canvas || !context) return;
-    context.clearRect(0, 0, rect.width, rect.height);
-    context.textAlign = "center";
-    context.textBaseline = "middle";
-    context.font = "10px sans-serif";
-    cells.forEach((cell, idx) => {
-      context.globalAlpha = getChartElementOpacity(idx, activeIndex, {
-        activeOpacity,
-        inactiveOpacity
-      }) ?? 1;
-      context.fillStyle = cell.fill;
-      const radius = Math.max(0, Math.min(cellRadius, cell.w / 2, cell.h / 2));
-      if (radius > 0) {
-        context.beginPath();
-        context.moveTo(cell.x + radius, cell.y);
-        context.lineTo(cell.x + cell.w - radius, cell.y);
-        context.quadraticCurveTo(cell.x + cell.w, cell.y, cell.x + cell.w, cell.y + radius);
-        context.lineTo(cell.x + cell.w, cell.y + cell.h - radius);
-        context.quadraticCurveTo(
-          cell.x + cell.w,
-          cell.y + cell.h,
-          cell.x + cell.w - radius,
-          cell.y + cell.h
-        );
-        context.lineTo(cell.x + radius, cell.y + cell.h);
-        context.quadraticCurveTo(cell.x, cell.y + cell.h, cell.x, cell.y + cell.h - radius);
-        context.lineTo(cell.x, cell.y + radius);
-        context.quadraticCurveTo(cell.x, cell.y, cell.x + radius, cell.y);
-        context.closePath();
-        context.fill();
-      } else {
-        context.fillRect(cell.x, cell.y, cell.w, cell.h);
-      }
-      if (showValues) {
-        context.globalAlpha = 1;
-        context.fillStyle = "var(--tiger-text,#374151)";
-        context.fillText(
-          valueFormatter ? valueFormatter(cell.value) : `${cell.value}`,
-          cell.x + cell.w / 2,
-          cell.y + cell.h / 2
-        );
-      }
-    });
-    context.globalAlpha = 1;
-  }, [
-    shouldRenderCanvas,
-    cells,
-    rect.width,
-    rect.height,
-    activeIndex,
-    activeOpacity,
-    inactiveOpacity,
-    cellRadius,
-    showValues,
-    valueFormatter
-  ]);
-  const getCanvasPoint = useCallback((event) => {
-    const canvas = event.currentTarget;
-    const bounds = canvas.getBoundingClientRect();
-    const nativeEvent = event.nativeEvent;
-    const offsetX = typeof nativeEvent.offsetX === "number" && Number.isFinite(nativeEvent.offsetX) ? nativeEvent.offsetX : event.clientX - bounds.left;
-    const offsetY = typeof nativeEvent.offsetY === "number" && Number.isFinite(nativeEvent.offsetY) ? nativeEvent.offsetY : event.clientY - bounds.top;
-    const scaleX = bounds.width > 0 ? canvas.width / bounds.width : 1;
-    const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
-    return { x: offsetX * scaleX, y: offsetY * scaleY };
-  }, []);
-  const handleCanvasMouseMove = useCallback(
-    (event) => {
-      const point = getCanvasPoint(event);
-      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
-      if (index === null) {
-        handleMouseLeave();
-        return;
-      }
-      handleMouseEnter(index, event);
-      handleMouseMove(event);
-    },
-    [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
-  );
-  const handleCanvasClick = useCallback(
-    (event) => {
-      const point = getCanvasPoint(event);
-      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
-      if (index !== null) {
-        handleClick(index);
-      }
-    },
-    [cells, getCanvasPoint, handleClick]
-  );
-  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}`
-        )),
-        !shouldRenderCanvas && 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 var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
-                  rx: `var(--tiger-chart-block-radius, ${cellRadius}px)`
-                },
-                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 ? /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      content: tooltipContent,
-      open: resolvedHoveredIndex !== null && tooltipContent !== "",
-      x: tooltipPosition.x,
-      y: tooltipPosition.y
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
-    chart,
-    shouldRenderCanvas && /* @__PURE__ */ jsx(
-      "canvas",
-      {
-        ref: canvasRef,
-        width: rect.width,
-        height: rect.height,
-        "data-heatmap-canvas": "true",
-        "data-heatmap-render-mode": resolvedRenderMode,
-        className: classNames(interactive && "cursor-pointer"),
-        style: {
-          position: "absolute",
-          left: `${rect.x}px`,
-          top: `${rect.y}px`,
-          width: `${rect.width}px`,
-          height: `${rect.height}px`,
-          pointerEvents: pointerInteractive ? "auto" : "none"
-        },
-        onMouseMove: pointerInteractive ? handleCanvasMouseMove : void 0,
-        onMouseLeave: pointerInteractive ? handleMouseLeave : void 0,
-        onClick: interactive ? handleCanvasClick : void 0
-      }
-    ),
-    tooltip
-  ] });
-};
-
-export {
-  HeatmapChart
-};

package/dist/chunk-3G5EJRD4.mjs

@@ -1,152 +0,0 @@
-// src/components/Descriptions.tsx
-import { useMemo, useSyncExternalStore } from "react";
-import {
-  classNames,
-  getDescriptionsClasses,
-  getDescriptionsTableClasses,
-  getDescriptionsLabelClasses,
-  getDescriptionsContentClasses,
-  getDescriptionsVerticalItemClasses,
-  groupItemsIntoRows,
-  descriptionsWrapperClasses,
-  descriptionsHeaderClasses,
-  descriptionsTitleClasses,
-  descriptionsExtraClasses,
-  descriptionsVerticalWrapperClasses,
-  resolveResponsiveValue
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Descriptions = ({
-  title,
-  extra,
-  bordered = false,
-  column: columnProp = 3,
-  size = "md",
-  layout = "horizontal",
-  colon = true,
-  labelStyle,
-  contentStyle,
-  items = [],
-  className,
-  children,
-  ...props
-}) => {
-  const isResponsive = typeof columnProp === "object" && columnProp !== null;
-  const subscribe = useMemo(() => {
-    if (!isResponsive) {
-      return () => () => {
-      };
-    }
-    return (cb) => {
-      window.addEventListener("resize", cb);
-      return () => window.removeEventListener("resize", cb);
-    };
-  }, [isResponsive]);
-  const getSnapshot = () => window.innerWidth;
-  const getServerSnapshot = () => 1024;
-  const windowWidth = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  const column = useMemo(
-    () => resolveResponsiveValue(columnProp, windowWidth, 3),
-    [columnProp, windowWidth]
-  );
-  const renderHeader = () => {
-    if (!title && !extra) return null;
-    return /* @__PURE__ */ jsxs("div", { className: descriptionsHeaderClasses, children: [
-      title ? /* @__PURE__ */ jsx("div", { className: descriptionsTitleClasses, children: title }) : null,
-      extra ? /* @__PURE__ */ jsx("div", { className: descriptionsExtraClasses, children: extra }) : null
-    ] });
-  };
-  const renderRow = (rowItems, rowIndex) => {
-    const cells = [];
-    rowItems.forEach((item, itemIndex) => {
-      const span = Math.min(item.span || 1, column);
-      const labelClass = classNames(
-        getDescriptionsLabelClasses(bordered, size, layout),
-        item.labelClassName
-      );
-      const contentClass = classNames(
-        getDescriptionsContentClasses(bordered, size, layout),
-        item.contentClassName
-      );
-      const key = `${rowIndex}-${itemIndex}`;
-      cells.push(
-        /* @__PURE__ */ jsxs("th", { className: labelClass, style: labelStyle, children: [
-          item.label,
-          colon ? ":" : ""
-        ] }, `${key}-label`)
-      );
-      cells.push(
-        /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: contentClass,
-            style: contentStyle,
-            colSpan: span > 1 ? span * 2 - 1 : 1,
-            children: item.content
-          },
-          `${key}-content`
-        )
-      );
-    });
-    return /* @__PURE__ */ jsx("tr", { children: cells }, rowIndex);
-  };
-  const renderHorizontalLayout = () => {
-    if (items.length === 0 && !children) {
-      return null;
-    }
-    const rows = groupItemsIntoRows(items, column);
-    return /* @__PURE__ */ jsx("table", { className: getDescriptionsTableClasses(bordered), children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => renderRow(row, index)) }) });
-  };
-  const renderVerticalItem = (item, index) => {
-    const labelClass = classNames(
-      getDescriptionsLabelClasses(bordered, size, layout),
-      item.labelClassName
-    );
-    const contentClass = classNames(
-      getDescriptionsContentClasses(bordered, size, layout),
-      item.contentClassName
-    );
-    if (bordered) {
-      return /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsxs("th", { className: labelClass, style: labelStyle, children: [
-          item.label,
-          colon ? ":" : ""
-        ] }),
-        /* @__PURE__ */ jsx("td", { className: contentClass, style: contentStyle, children: item.content })
-      ] }, index);
-    }
-    const itemClasses = getDescriptionsVerticalItemClasses(size);
-    return /* @__PURE__ */ jsxs("div", { className: itemClasses, children: [
-      /* @__PURE__ */ jsxs("dt", { className: labelClass, style: labelStyle, children: [
-        item.label,
-        colon ? ":" : ""
-      ] }),
-      /* @__PURE__ */ jsx("dd", { className: contentClass, style: contentStyle, children: item.content })
-    ] }, index);
-  };
-  const renderVerticalLayout = () => {
-    if (items.length === 0 && !children) {
-      return null;
-    }
-    if (bordered) {
-      return /* @__PURE__ */ jsx("table", { className: getDescriptionsTableClasses(bordered), children: /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => renderVerticalItem(item, index)) }) });
-    }
-    return /* @__PURE__ */ jsx("dl", { className: descriptionsVerticalWrapperClasses, children: items.map((item, index) => renderVerticalItem(item, index)) });
-  };
-  const descriptionsClasses = classNames(
-    descriptionsWrapperClasses,
-    getDescriptionsClasses(size),
-    className
-  );
-  return /* @__PURE__ */ jsxs("div", { className: descriptionsClasses, ...props, children: [
-    renderHeader(),
-    layout === "horizontal" ? renderHorizontalLayout() : renderVerticalLayout(),
-    children
-  ] });
-};
-var Descriptions_default = Descriptions;
-
-export {
-  Descriptions,
-  Descriptions_default
-};