@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-WCIUNNIN.mjs

@@ -0,0 +1,108 @@
+// src/components/Card.tsx
+import { forwardRef } from "react";
+import {
+  classNames,
+  getCardClasses,
+  getCardCoverWrapperClasses,
+  resolveCardPadding,
+  resolveCardRoot,
+  handleCardActivation,
+  cardHeaderClasses,
+  cardFooterClasses,
+  cardCoverClasses,
+  cardActionsClasses,
+  cardDirectionClasses,
+  cardHorizontalBodyClasses
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderCover(cover, coverAlt, horizontal) {
+  if (cover == null || cover === false) return null;
+  const wrapperClass = getCardCoverWrapperClasses(horizontal);
+  if (typeof cover === "string") {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClass, "data-tiger-card-cover": "", children: /* @__PURE__ */ jsx("img", { src: cover, alt: coverAlt, className: cardCoverClasses }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: wrapperClass, "data-tiger-card-cover": "", children: cover });
+}
+var Card = forwardRef(function Card2({
+  variant = "default",
+  size = "md",
+  direction = "vertical",
+  hoverable = false,
+  cover,
+  coverAlt = "",
+  href,
+  padding,
+  header,
+  footer,
+  actions,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ...props
+}, ref) {
+  const isHorizontal = direction === "horizontal";
+  const hasCover = cover != null && cover !== false;
+  const nestedInteractive = actions != null;
+  const clickable = Boolean(onClick) || Boolean(href?.trim());
+  const root = resolveCardRoot({ href, clickable, nestedInteractive });
+  const paddingClass = resolveCardPadding(size, padding);
+  const cardClasses = classNames(
+    getCardClasses(variant, hoverable, clickable),
+    cardDirectionClasses[direction],
+    !hasCover && paddingClass,
+    className
+  );
+  const bodyContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    header != null && /* @__PURE__ */ jsx("div", { className: cardHeaderClasses, children: header }),
+    children != null && /* @__PURE__ */ jsx("div", { children }),
+    footer != null && /* @__PURE__ */ jsx("div", { className: cardFooterClasses, children: footer }),
+    actions != null && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(cardActionsClasses, cardFooterClasses),
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => event.stopPropagation(),
+        children: actions
+      }
+    )
+  ] });
+  const content = hasCover ? /* @__PURE__ */ jsx("div", { className: classNames(cardHorizontalBodyClasses, paddingClass), "data-tiger-card-body": "", children: bodyContent }) : isHorizontal ? /* @__PURE__ */ jsx("div", { className: cardHorizontalBodyClasses, "data-tiger-card-body": "", children: bodyContent }) : bodyContent;
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || root.tag === "a") return;
+    if (root.role) {
+      handleCardActivation(event, () => {
+        if (href) {
+          window.location.assign(href);
+          return;
+        }
+        onClick?.(event);
+      });
+    }
+  };
+  const shared = {
+    ...props,
+    className: cardClasses,
+    onClick,
+    onKeyDown: handleKeyDown,
+    role: root.role,
+    tabIndex: root.tabIndex,
+    "data-tiger-card": ""
+  };
+  if (root.tag === "a") {
+    return /* @__PURE__ */ jsxs("a", { ...shared, ref, href, children: [
+      renderCover(cover, coverAlt, isHorizontal),
+      content
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { ...shared, ref, children: [
+    renderCover(cover, coverAlt, isHorizontal),
+    content
+  ] });
+});
+Card.displayName = "Card";
+
+export {
+  Card
+};

package/dist/chunk-WFLXJOFU.mjs

@@ -0,0 +1,124 @@
+import {
+  useButtonGroupContext
+} from "./chunk-G5NPND2T.mjs";
+
+// src/components/Button.tsx
+import React, { forwardRef, useMemo } from "react";
+import {
+  resolveButtonClasses,
+  resolveButtonHtmlType,
+  resolveButtonIconPlacement,
+  getButtonIconSlotClasses,
+  getButtonSpinnerClasses,
+  getSpinnerSVG,
+  omitUnsupportedColorProp,
+  warnMissingAccessibleName,
+  TIGER_CHROME_ATTR
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var createDefaultSpinner = (size) => {
+  const spinnerSvg = getSpinnerSVG("spinner");
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getButtonSpinnerClasses(size),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: spinnerSvg.elements.map(
+        (el, index) => React.createElement(el.type, { key: index, ...el.attrs })
+      )
+    }
+  );
+};
+function hasLabelContent(children) {
+  if (children == null || children === false) return false;
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children).trim().length > 0;
+  }
+  return React.Children.count(children) > 0;
+}
+var Button = forwardRef(function Button2({
+  variant = "primary",
+  size,
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  icon,
+  block = false,
+  iconPosition = "start",
+  htmlType,
+  type,
+  danger = false,
+  onClick,
+  children,
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...rest
+}, ref) {
+  const domRest = omitUnsupportedColorProp("Button", rest);
+  const group = useButtonGroupContext();
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedType = resolveButtonHtmlType(htmlType, type);
+  const hasLabel = hasLabelContent(children);
+  warnMissingAccessibleName("Button", {
+    text: hasLabel ? "named" : "",
+    ariaLabel,
+    ariaLabelledby
+  });
+  const buttonClasses = useMemo(
+    () => resolveButtonClasses({
+      variant,
+      danger,
+      size: resolvedSize,
+      disabled,
+      loading,
+      block,
+      className
+    }),
+    [variant, danger, resolvedSize, disabled, loading, block, className]
+  );
+  const placement = resolveButtonIconPlacement(iconPosition);
+  const slotClass = getButtonIconSlotClasses(placement, hasLabel);
+  const chrome = loading ? /* @__PURE__ */ jsx("span", { className: slotClass || void 0, "aria-hidden": "true", children: loadingIcon ?? createDefaultSpinner(resolvedSize) }) : icon ? /* @__PURE__ */ jsx("span", { className: slotClass || void 0, "aria-hidden": "true", children: icon }) : null;
+  const handleClick = (event) => {
+    if (disabled || loading) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...domRest,
+      ref,
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      className: buttonClasses,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-busy": ariaBusyProp ?? (loading ? true : void 0),
+      "aria-disabled": ariaDisabledProp ?? (disabled ? true : void 0),
+      disabled: disabled || void 0,
+      onClick: handleClick,
+      type: resolvedType,
+      children: placement === "end" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        chrome
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        chrome,
+        children
+      ] })
+    }
+  );
+});
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/chunk-WKZZ4IQK.mjs

@@ -0,0 +1,403 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-IPI45RUK.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/HeatmapChart.tsx
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  layoutHeatmap,
+  getHeatmapCellIndexAtPoint,
+  getHeatmapDevicePixelRatio,
+  paintHeatmapCanvas,
+  resolveHeatmapRenderMode,
+  formatHeatmapTooltip,
+  heatmapLabelFill,
+  heatmapCellTransitionClasses,
+  getChartElementOpacity,
+  getCartesianChartShellClasses,
+  chartAxisTickTextClasses,
+  chartMarkTabIndex,
+  isChartNavigationKey,
+  nextHeatmapCellIndex,
+  getChartLabels,
+  mergeTigerLocale,
+  DEFAULT_HEATMAP_WIDTH,
+  DEFAULT_HEATMAP_HEIGHT,
+  DEFAULT_HEATMAP_PADDING,
+  DEFAULT_HEATMAP_MIN_COLOR,
+  DEFAULT_HEATMAP_MAX_COLOR,
+  DEFAULT_HEATMAP_CELL_RADIUS,
+  DEFAULT_HEATMAP_CELL_GAP
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HeatmapChart = ({
+  width = DEFAULT_HEATMAP_WIDTH,
+  height = DEFAULT_HEATMAP_HEIGHT,
+  padding = DEFAULT_HEATMAP_PADDING,
+  responsive = false,
+  data,
+  xLabels,
+  yLabels,
+  minColor = DEFAULT_HEATMAP_MIN_COLOR,
+  maxColor = DEFAULT_HEATMAP_MAX_COLOR,
+  min,
+  max,
+  colorSpace = "rgb",
+  cellRadius = DEFAULT_HEATMAP_CELL_RADIUS,
+  cellGap = DEFAULT_HEATMAP_CELL_GAP,
+  showValues = false,
+  valueFormatter,
+  renderMode = "auto",
+  canvasThreshold,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const interactive = hoverable || selectable || Boolean(onCellClick);
+  const canvasRef = useRef(null);
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const layout = useMemo(
+    () => layoutHeatmap(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace,
+      min,
+      max
+    }),
+    [
+      data,
+      xLabels,
+      yLabels,
+      innerRect.width,
+      innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace,
+      min,
+      max
+    ]
+  );
+  const cells = layout.cells;
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => cells[index]?.datum ?? null,
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? cells[index]?.datum ?? null : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, datum) => onCellClick?.(index, datum ?? null)
+  });
+  const formatValue = useCallback(
+    (value) => {
+      if (value === null) return "";
+      return valueFormatter ? valueFormatter(value) : `${value}`;
+    },
+    [valueFormatter]
+  );
+  const tooltipContent = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const cell = cells[resolvedHoveredIndex];
+    if (!cell) return "";
+    if (tooltipFormatter) return tooltipFormatter(cell.datum, cell.index);
+    return formatHeatmapTooltip(labels.heatmapTooltip, cell, formatValue(cell.value));
+  }, [resolvedHoveredIndex, cells, tooltipFormatter, labels.heatmapTooltip, formatValue]);
+  const pointerInteractive = interactive || showTooltip;
+  const resolvedRenderMode = resolveHeatmapRenderMode(cells.length, {
+    renderMode,
+    canvasThreshold
+  });
+  const shouldRenderCanvas = resolvedRenderMode === "canvas";
+  const visualActive = cells.findIndex(
+    (cell) => cell.index === (activeIndex ?? resolvedHoveredIndex)
+  );
+  useEffect(() => {
+    if (!shouldRenderCanvas) return;
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    const dpr = getHeatmapDevicePixelRatio();
+    canvas.width = Math.max(0, Math.round(innerRect.width * dpr));
+    canvas.height = Math.max(0, Math.round(innerRect.height * dpr));
+    paintHeatmapCanvas(context, cells, {
+      width: innerRect.width,
+      height: innerRect.height,
+      dpr,
+      cellRadius,
+      showValues,
+      valueFormatter,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity
+    });
+  }, [
+    shouldRenderCanvas,
+    cells,
+    innerRect.width,
+    innerRect.height,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    cellRadius,
+    showValues,
+    valueFormatter
+  ]);
+  const getCanvasPoint = useCallback(
+    (event) => {
+      const canvas = event.currentTarget;
+      const bounds = canvas.getBoundingClientRect();
+      const cssWidth = innerRect.width;
+      const cssHeight = innerRect.height;
+      const x = bounds.width > 0 ? (event.clientX - bounds.left) / bounds.width * cssWidth : 0;
+      const y = bounds.height > 0 ? (event.clientY - bounds.top) / bounds.height * cssHeight : 0;
+      return { x, y };
+    },
+    [innerRect.width, innerRect.height]
+  );
+  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 handleCellKeyDown = (event, index) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const next = nextHeatmapCellIndex(index, event.key, layout.cols, layout.rows);
+      if (!shouldRenderCanvas) {
+        const node = event.currentTarget.parentElement?.querySelector(
+          `[data-heatmap-cell][data-index="${next}"]`
+        );
+        if (node instanceof SVGElement) node.focus();
+      }
+      handleMouseEnter(next, event);
+      return;
+    }
+    handleKeyDown(event, index);
+  };
+  const hiddenTable = /* @__PURE__ */ jsxs("table", { className: "sr-only", "data-heatmap-table": "", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", {}),
+      xLabels.map((label) => /* @__PURE__ */ jsx("th", { scope: "col", children: label }, `hx-${label}`))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: yLabels.map((yLabel, row) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { scope: "row", children: yLabel }),
+      xLabels.map((xLabel, col) => {
+        const cell = cells[row * layout.cols + col];
+        return /* @__PURE__ */ jsx("td", { children: formatValue(cell?.value ?? null) }, `hv-${xLabel}-${yLabel}`);
+      })
+    ] }, `hy-${yLabel}`)) })
+  ] });
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc,
+      onResolvedSizeChange,
+      children: [
+        layout.xAxisLabels.map((label, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: label.x,
+            y: label.y,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: label.text
+          },
+          `x-${i}`
+        )),
+        layout.yAxisLabels.map((label, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: label.x,
+            y: label.y,
+            className: chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: label.text
+          },
+          `y-${i}`
+        )),
+        !shouldRenderCanvas && cells.map((cell, visualIndex) => {
+          const opacity = getChartElementOpacity(cell.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          const ariaLabel = formatHeatmapTooltip(
+            labels.heatmapTooltip,
+            cell,
+            formatValue(cell.value)
+          );
+          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,
+                "data-heatmap-cell": "",
+                "data-index": cell.index,
+                className: classNames(
+                  interactive && "cursor-pointer",
+                  heatmapCellTransitionClasses
+                ),
+                tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                role: interactive ? "button" : void 0,
+                "aria-hidden": interactive ? void 0 : true,
+                "aria-label": interactive ? ariaLabel : void 0,
+                onMouseEnter: (e) => handleMouseEnter(cell.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onFocus: (e) => handleMouseEnter(cell.index, e),
+                onClick: () => handleClick(cell.index),
+                onKeyDown: (e) => handleCellKeyDown(e, cell.index)
+              }
+            ),
+            showValues && cell.value !== null && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                fill: heatmapLabelFill(cell.fill, cell.heat),
+                className: "text-[10px] pointer-events-none",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                "aria-hidden": "true",
+                children: formatValue(cell.value)
+              }
+            )
+          ] }, `cell-${cell.index}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend: false,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        shouldRenderCanvas && /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "data-heatmap-canvas": "true",
+            "data-heatmap-render-mode": resolvedRenderMode,
+            className: classNames(interactive && "cursor-pointer"),
+            tabIndex: interactive ? 0 : void 0,
+            "aria-hidden": interactive ? void 0 : true,
+            style: {
+              position: "absolute",
+              left: `${innerRect.x}px`,
+              top: `${innerRect.y}px`,
+              width: `${innerRect.width}px`,
+              height: `${innerRect.height}px`,
+              pointerEvents: pointerInteractive ? "auto" : "none"
+            },
+            onMouseMove: pointerInteractive ? handleCanvasMouseMove : void 0,
+            onMouseLeave: pointerInteractive ? handleMouseLeave : void 0,
+            onClick: interactive ? handleCanvasClick : void 0,
+            onKeyDown: interactive ? (event) => handleCellKeyDown(event, visualActive < 0 ? 0 : cells[visualActive]?.index ?? 0) : void 0
+          }
+        ),
+        hiddenTable,
+        tooltip
+      ]
+    }
+  );
+};
+var HeatmapChart_default = HeatmapChart;
+
+export {
+  HeatmapChart,
+  HeatmapChart_default
+};