@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-X6C6MNG5.mjs

@@ -1,240 +0,0 @@
-import {
-  useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
-import {
-  ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
-import {
-  ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
-import {
-  ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
-
-// src/components/TreeMapChart.tsx
-import React, { useId, useMemo } from "react";
-import {
-  classNames,
-  computeTreeMapNodes,
-  getChartElementOpacity,
-  getChartInnerRect,
-  getStableChartGradientPrefix,
-  resolveChartPalette,
-  buildChartLegendItems,
-  resolveChartTooltipContent
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TreeMapChart = ({
-  width = 400,
-  height = 300,
-  padding = 8,
-  data,
-  gap = 2,
-  showLabels = true,
-  minLabelSize = 10,
-  colors,
-  gradient = false,
-  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 = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
-  );
-  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
-  const gradientId = useId();
-  const gradientPrefix = useMemo(
-    () => getStableChartGradientPrefix("treemap", gradientId),
-    [gradientId]
-  );
-  const nodes = useMemo(
-    () => 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
-  } = useChartInteraction({
-    hoverable,
-    showTooltip,
-    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 = useMemo(() => nodes.reduce((s, n) => s + n.value, 0), [nodes]);
-  const legendItems = useMemo(
-    () => buildChartLegendItems({
-      data: nodes,
-      palette,
-      activeIndex,
-      getLabel: (d) => d.label,
-      getColor: (d) => d.color
-    }),
-    [nodes, palette, activeIndex]
-  );
-  const tooltipContent = useMemo(
-    () => 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__ */ jsx(
-    ChartCanvas,
-    {
-      width,
-      height,
-      padding,
-      title,
-      desc,
-      className: classNames(className),
-      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "treemap", children: [
-        gradient && /* @__PURE__ */ jsx("defs", { children: nodes.map((node) => /* @__PURE__ */ jsxs(
-          "linearGradient",
-          {
-            id: `${gradientPrefix}-${node.index}`,
-            x1: "0",
-            y1: "0",
-            x2: "0",
-            y2: "1",
-            children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: node.color, stopOpacity: 1 }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: node.color, stopOpacity: 0.7 })
-            ]
-          },
-          `grad-${node.index}`
-        )) }),
-        nodes.map((node) => {
-          const opacity = getChartElementOpacity(node.index, activeIndex, {
-            activeOpacity,
-            inactiveOpacity
-          });
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: node.x,
-                y: node.y,
-                width: node.w,
-                height: node.h,
-                rx: 2,
-                fill: gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
-                opacity,
-                className: classNames(interactive && "cursor-pointer"),
-                style: {
-                  transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
-                  rx: "var(--tiger-chart-block-radius, 2px)",
-                  filter: activeIndex === node.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
-                },
-                onMouseEnter: (e) => handleMouseEnter(node.index, e),
-                onMouseMove: handleMouseMove,
-                onMouseLeave: handleMouseLeave,
-                onClick: () => handleClick(node.index)
-              }
-            ),
-            showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      content: tooltipContent,
-      open: resolvedHoveredIndex !== null && tooltipContent !== "",
-      x: tooltipPosition.x,
-      y: tooltipPosition.y
-    }
-  ) : null;
-  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,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
-};
-
-export {
-  TreeMapChart
-};

package/dist/chunk-XVHTJQ4T.mjs

@@ -1,140 +0,0 @@
-// src/components/ScrollSpy.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  classNames,
-  createProgrammaticScrollLock,
-  createScrollSpyObserver,
-  createScrollSpyPayload,
-  flattenScrollSpyItems,
-  getInitialScrollSpyActiveKey,
-  getScrollSpyItemClasses,
-  getScrollSpyItemByKey,
-  getScrollSpyKeyString,
-  getScrollSpyListClasses,
-  getScrollSpyRootClasses,
-  scrollSpyNestedListClasses,
-  scrollToScrollSpyItem
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var getWindowContainer = () => window;
-var ScrollSpy = ({
-  items = [],
-  activeKey,
-  defaultActiveKey,
-  offsetTop = 0,
-  targetOffset,
-  bounds = 5,
-  direction = "vertical",
-  sticky = false,
-  ariaLabel = "Scroll navigation",
-  getContainer = getWindowContainer,
-  className,
-  style,
-  onActiveKeyChange,
-  onClick,
-  ...rest
-}) => {
-  const isControlled = activeKey !== void 0;
-  const [innerActiveKey, setInnerActiveKey] = useState(
-    () => getInitialScrollSpyActiveKey(items, activeKey, defaultActiveKey)
-  );
-  const currentActiveKey = isControlled ? activeKey : innerActiveKey;
-  const flatItems = useMemo(() => flattenScrollSpyItems(items), [items]);
-  const activeKeyString = currentActiveKey === void 0 ? "" : getScrollSpyKeyString(currentActiveKey);
-  const getContainerRef = useRef(getContainer);
-  getContainerRef.current = getContainer;
-  const scrollLockRef = useRef(createProgrammaticScrollLock(() => getContainerRef.current()));
-  const onActiveKeyChangeRef = useRef(onActiveKeyChange);
-  onActiveKeyChangeRef.current = onActiveKeyChange;
-  const emitActive = useCallback(
-    (item, source) => {
-      const nextKeyString = getScrollSpyKeyString(item.key);
-      if (nextKeyString === activeKeyString) return;
-      const payload = createScrollSpyPayload(item, source);
-      if (!isControlled) setInnerActiveKey(item.key);
-      onActiveKeyChangeRef.current?.(item.key, item, payload);
-    },
-    [activeKeyString, isControlled]
-  );
-  useEffect(() => {
-    if (isControlled) return;
-    const currentItem = getScrollSpyItemByKey(items, innerActiveKey);
-    if (!currentItem || currentItem.disabled) {
-      setInnerActiveKey(getInitialScrollSpyActiveKey(items, void 0, defaultActiveKey));
-    }
-  }, [defaultActiveKey, innerActiveKey, isControlled, items]);
-  useEffect(() => {
-    const container = getContainerRef.current();
-    return createScrollSpyObserver(items, {
-      container,
-      offsetTop,
-      targetOffset,
-      bounds,
-      onChange: (item) => {
-        if (scrollLockRef.current.isLocked()) return;
-        emitActive(item, "scroll");
-      }
-    });
-  }, [bounds, emitActive, items, offsetTop, targetOffset]);
-  useEffect(() => {
-    return () => {
-      scrollLockRef.current.dispose();
-    };
-  }, []);
-  const handleClick = useCallback(
-    (item, event) => {
-      event.preventDefault();
-      if (item.disabled) return;
-      onClick?.(item, event);
-      emitActive(item, "click");
-      scrollLockRef.current.lock();
-      scrollToScrollSpyItem(item, getContainerRef.current(), targetOffset ?? offsetTop);
-    },
-    [emitActive, offsetTop, onClick, targetOffset]
-  );
-  function renderItems(list, nested = false) {
-    return /* @__PURE__ */ jsx("ul", { className: nested ? scrollSpyNestedListClasses : getScrollSpyListClasses(direction), children: list.map((item) => {
-      const keyString = getScrollSpyKeyString(item.key);
-      const isActive = keyString === activeKeyString;
-      const hasChildren = Boolean(item.children?.length);
-      return /* @__PURE__ */ jsxs(
-        "li",
-        {
-          "data-depth": flatItems.find((flat) => flat.key === item.key)?.depth ?? 0,
-          children: [
-            /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: item.href,
-                className: getScrollSpyItemClasses(isActive, item.disabled),
-                "aria-current": isActive ? "location" : void 0,
-                "aria-disabled": item.disabled || void 0,
-                "data-key": keyString,
-                onClick: (event) => handleClick(item, event),
-                children: item.label
-              }
-            ),
-            hasChildren ? renderItems(item.children ?? [], true) : null
-          ]
-        },
-        keyString
-      );
-    }) });
-  }
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      ...rest,
-      className: classNames(getScrollSpyRootClasses(sticky, className)),
-      style,
-      "aria-label": ariaLabel,
-      children: renderItems(items)
-    }
-  );
-};
-var ScrollSpy_default = ScrollSpy;
-
-export {
-  ScrollSpy,
-  ScrollSpy_default
-};

package/dist/chunk-Y5X3G2LD.mjs

@@ -1,115 +0,0 @@
-// src/components/VirtualList.tsx
-import { useState, useMemo, useRef, useCallback, useLayoutEffect } from "react";
-import {
-  virtualListContainerClasses,
-  virtualListInnerClasses,
-  fixedSizeStrategy,
-  variableSizeStrategy,
-  dynamicSizeStrategy,
-  classNames
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var VirtualList = ({
-  itemCount = 0,
-  itemHeight = 40,
-  estimatedItemHeight,
-  getItemHeight,
-  sizeStrategy: customStrategy,
-  height = 400,
-  overscan = 5,
-  className,
-  renderItem,
-  onScroll
-}) => {
-  const [scrollTop, setScrollTop] = useState(0);
-  const [measureVersion, setMeasureVersion] = useState(0);
-  const containerRef = useRef(null);
-  const itemRefs = useRef(/* @__PURE__ */ new Map());
-  const isDynamic = !customStrategy && !getItemHeight && estimatedItemHeight !== void 0;
-  const strategy = useMemo(() => {
-    if (customStrategy) return customStrategy;
-    if (getItemHeight) return variableSizeStrategy(getItemHeight, itemCount);
-    if (estimatedItemHeight !== void 0)
-      return dynamicSizeStrategy(estimatedItemHeight, itemCount);
-    return fixedSizeStrategy(itemHeight);
-  }, [customStrategy, getItemHeight, estimatedItemHeight, itemHeight, itemCount]);
-  const range = useMemo(
-    () => strategy.getRange(scrollTop, height, itemCount, overscan),
-    // measureVersion participates so re-measured heights recompute the window.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [scrollTop, height, itemCount, overscan, strategy, measureVersion]
-  );
-  useLayoutEffect(() => {
-    if (!isDynamic || !strategy.updateItemHeight) return;
-    let changed = false;
-    itemRefs.current.forEach((el, i) => {
-      if (!el) return;
-      const measured = el.offsetHeight;
-      if (measured > 0 && measured !== strategy.getItemHeight(i)) {
-        strategy.updateItemHeight(i, measured);
-        changed = true;
-      }
-    });
-    if (changed) setMeasureVersion((v) => v + 1);
-  }, [isDynamic, strategy]);
-  const handleScroll = useCallback(() => {
-    if (containerRef.current) {
-      const st = containerRef.current.scrollTop;
-      setScrollTop(st);
-      onScroll?.(st);
-    }
-  }, [onScroll]);
-  const { startIndex, endIndex, totalHeight } = range;
-  const items = [];
-  for (let i = startIndex; i <= endIndex; i++) {
-    const itemH = strategy.getItemHeight(i);
-    if (isDynamic) {
-      const index = i;
-      items.push(
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: (el) => {
-              if (el) itemRefs.current.set(index, el);
-              else itemRefs.current.delete(index);
-            },
-            style: { width: "100%" },
-            children: renderItem({ index })
-          },
-          index
-        )
-      );
-    } else {
-      items.push(
-        /* @__PURE__ */ jsx("div", { style: { height: `${itemH}px`, width: "100%" }, children: renderItem({ index: i }) }, i)
-      );
-    }
-  }
-  const offsetTop = startIndex >= 0 ? strategy.getItemOffset(startIndex) : 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: classNames(virtualListContainerClasses, className),
-      style: { height: `${height}px` },
-      onScroll: handleScroll,
-      children: /* @__PURE__ */ jsx("div", { className: virtualListInnerClasses, style: { height: `${totalHeight}px` }, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            transform: `translateY(${offsetTop}px)`,
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%"
-          },
-          children: items
-        }
-      ) })
-    }
-  );
-};
-
-export {
-  VirtualList
-};