@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-Y3NDP56G.mjs

@@ -1,174 +0,0 @@
-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

@@ -1,198 +0,0 @@
-'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;

package/dist/chunk-Z6CRXABX.js

@@ -1,88 +0,0 @@
-'use strict';
-
-var react = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/Affix.tsx
-var Affix = ({
-  offsetTop = 0,
-  offsetBottom,
-  target,
-  zIndex = 10,
-  className,
-  children,
-  onChange,
-  ...props
-}) => {
-  const wrapperRef = react.useRef(null);
-  const placeholderRef = react.useRef(null);
-  const originalRectRef = react.useRef(null);
-  const [state, setState] = react.useState({ affixed: false, style: {} });
-  const prevAffixed = react.useRef(false);
-  const update = react.useCallback(() => {
-    const el = prevAffixed.current && placeholderRef.current ? placeholderRef.current : wrapperRef.current;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    if (!originalRectRef.current || !prevAffixed.current) {
-      originalRectRef.current = {
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height
-      };
-    }
-    const resolved = tigercatCore.resolveAffixTarget(target);
-    const containerRect = resolved.getRect();
-    const newState = tigercatCore.calculateAffixState(
-      originalRectRef.current,
-      containerRect,
-      offsetBottom !== void 0 ? void 0 : offsetTop,
-      offsetBottom,
-      zIndex
-    );
-    if (newState.affixed !== prevAffixed.current) {
-      prevAffixed.current = newState.affixed;
-      onChange?.(newState.affixed);
-    }
-    setState(newState);
-  }, [offsetTop, offsetBottom, target, zIndex, onChange]);
-  react.useEffect(() => {
-    const resolved = tigercatCore.resolveAffixTarget(target);
-    const scrollEl = resolved.element;
-    scrollEl.addEventListener("scroll", update, { passive: true });
-    window.addEventListener("resize", update, { passive: true });
-    update();
-    return () => {
-      scrollEl.removeEventListener("scroll", update);
-      window.removeEventListener("resize", update);
-    };
-  }, [target, update]);
-  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(className), [className]);
-  if (state.affixed) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: placeholderRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          style: {
-            width: originalRectRef.current?.width ?? 0,
-            height: originalRectRef.current?.height ?? 0
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref: wrapperRef,
-          className: wrapperClasses,
-          style: state.style,
-          ...props,
-          children
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className: wrapperClasses, ...props, children });
-};
-
-exports.Affix = Affix;

package/dist/chunk-ZIUOENTL.mjs

@@ -1,85 +0,0 @@
-import { createContext, useContext, useRef, useState, useCallback, useMemo, useEffect } from 'react';
-import { replaceKeys, toggleKey, classNames, getMenuClasses, initRovingTabIndex } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
-// src/components/Menu.tsx
-var MenuContext = createContext(null);
-function useMenuContext() {
-  return useContext(MenuContext);
-}
-var Menu = ({
-  mode = "vertical",
-  theme = "light",
-  selectedKeys: controlledSelectedKeys,
-  defaultSelectedKeys = [],
-  openKeys: controlledOpenKeys,
-  defaultOpenKeys = [],
-  collapsed = false,
-  multiple = true,
-  inlineIndent = 24,
-  className,
-  style,
-  onSelect,
-  onOpenChange,
-  children
-}) => {
-  const menuRef = useRef(null);
-  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
-  const [internalOpenKeys, setInternalOpenKeys] = useState(defaultOpenKeys);
-  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
-  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
-  const handleSelect = useCallback(
-    (key) => {
-      const newSelectedKeys = replaceKeys(key, selectedKeys);
-      if (controlledSelectedKeys === void 0) {
-        setInternalSelectedKeys(newSelectedKeys);
-      }
-      onSelect?.(key, { selectedKeys: newSelectedKeys });
-    },
-    [controlledSelectedKeys, selectedKeys, onSelect]
-  );
-  const handleOpenChange = useCallback(
-    (key) => {
-      const toggled = toggleKey(key, openKeys);
-      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
-      if (controlledOpenKeys === void 0) {
-        setInternalOpenKeys(newOpenKeys);
-      }
-      onOpenChange?.(key, { openKeys: newOpenKeys });
-    },
-    [openKeys, multiple, controlledOpenKeys, onOpenChange]
-  );
-  const menuClasses = useMemo(() => {
-    return classNames(getMenuClasses(mode, theme, collapsed), className);
-  }, [mode, theme, collapsed, className]);
-  const contextValue = useMemo(
-    () => ({
-      mode,
-      theme,
-      collapsed,
-      inlineIndent,
-      selectedKeys,
-      openKeys,
-      handleSelect,
-      handleOpenChange
-    }),
-    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
-  );
-  useEffect(() => {
-    if (menuRef.current) initRovingTabIndex(menuRef.current);
-  }, [mode, collapsed, selectedKeys, openKeys]);
-  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref: menuRef,
-      className: menuClasses,
-      style,
-      role: "menu",
-      "data-tiger-menu-root": "true",
-      "data-tiger-menu-mode": mode,
-      children
-    }
-  ) });
-};
-
-export { Menu, useMenuContext };

package/dist/chunk-ZYPEO2KY.js

@@ -1,115 +0,0 @@
-'use strict';
-
-var react = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-
-// src/utils/overlay.ts
-function useClickOutside({
-  enabled,
-  refs,
-  onOutsideClick,
-  defer = false
-}) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const handler = (event) => {
-      const elements = refs.map((ref) => ref?.current);
-      if (tigercatCore.isEventOutside(event, elements)) {
-        onOutsideClick();
-      }
-    };
-    const attach = () => document.addEventListener("click", handler);
-    const detach = () => document.removeEventListener("click", handler);
-    if (!defer) {
-      attach();
-      return () => detach();
-    }
-    const timer = window.setTimeout(() => attach(), 0);
-    return () => {
-      window.clearTimeout(timer);
-      detach();
-    };
-  }, [enabled, refs, onOutsideClick, defer]);
-}
-function useEscapeKey({ enabled, onEscape }) {
-  react.useEffect(() => {
-    if (!enabled) return;
-    const handler = (event) => {
-      if (event.defaultPrevented) return;
-      if (!tigercatCore.isEscapeKey(event)) return;
-      onEscape();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [enabled, onEscape]);
-}
-function useFloating(options) {
-  const {
-    referenceRef,
-    floatingRef,
-    enabled,
-    placement: initialPlacement = "bottom",
-    offset: offsetDistance = 8,
-    arrowRef,
-    onPlacementChange
-  } = options;
-  const [x, setX] = react.useState(0);
-  const [y, setY] = react.useState(0);
-  const [placement, setPlacement] = react.useState(initialPlacement);
-  const [arrowX, setArrowX] = react.useState(void 0);
-  const [arrowY, setArrowY] = react.useState(void 0);
-  const onPlacementChangeRef = react.useRef(onPlacementChange);
-  onPlacementChangeRef.current = onPlacementChange;
-  const update = react.useCallback(async () => {
-    const reference = referenceRef.current;
-    const floating = floatingRef.current;
-    if (!reference || !floating) return;
-    const floatingOptions = {
-      placement: initialPlacement,
-      offset: offsetDistance,
-      flip: true,
-      shift: true,
-      arrowElement: arrowRef?.current
-    };
-    const result = await tigercatCore.computeFloatingPosition(
-      reference,
-      floating,
-      floatingOptions
-    );
-    setX(result.x);
-    setY(result.y);
-    setPlacement((prev) => {
-      if (prev !== result.placement) {
-        onPlacementChangeRef.current?.(result.placement);
-        return result.placement;
-      }
-      return prev;
-    });
-    if (result.arrow) {
-      setArrowX(result.arrow.x);
-      setArrowY(result.arrow.y);
-    }
-  }, [referenceRef, floatingRef, initialPlacement, offsetDistance, arrowRef]);
-  react.useEffect(() => {
-    const reference = referenceRef.current;
-    const floating = floatingRef.current;
-    if (!enabled || !reference || !floating) return;
-    update();
-    const cleanup = tigercatCore.autoUpdateFloating(reference, floating, update);
-    return () => {
-      cleanup();
-    };
-  }, [enabled, referenceRef, floatingRef, update]);
-  return {
-    x,
-    y,
-    placement,
-    arrowX,
-    arrowY,
-    update
-  };
-}
-
-exports.useClickOutside = useClickOutside;
-exports.useEscapeKey = useEscapeKey;
-exports.useFloating = useFloating;