@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-FPQMJFFM.mjs → chunk-IELUUOM4.mjs}

@@ -1,9 +1,9 @@
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/AvatarGroup.tsx
-import React, { createContext, useMemo } from "react";
+import React, { createContext, isValidElement, useMemo } from "react";
 import {
   getAvatarGroupClasses,
   getAvatarGroupItemClasses,
@@ -16,9 +16,15 @@ import {
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AvatarGroupContext = createContext(null);
+function isAvatarElement(child) {
+  if (!isValidElement(child)) return false;
+  const type = child.type;
+  return type.displayName === "Avatar" || type.name === "Avatar";
+}
 var AvatarGroup = ({
   max,
   size,
+  shape,
   className,
   locale,
   labels: labelsOverride,
@@ -35,11 +41,12 @@ var AvatarGroup = ({
     [mergedLocale, labelsOverride]
   );
   const contextValue = useMemo(
-    () => ({ size, itemClass: getAvatarGroupItemClasses() }),
-    [size]
+    () => ({ size, shape, itemClass: getAvatarGroupItemClasses() }),
+    [size, shape]
   );
-  const childArray = React.Children.toArray(children);
-  const { visibleItems, overflowCount } = getVisibleGroupItems(childArray, max);
+  const childArray = React.Children.toArray(children).filter(isAvatarElement);
+  const { visibleItems, overflowCount, visibleCount } = getVisibleGroupItems(childArray, max);
+  const overflowShape = shape ?? "circle";
   return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -52,7 +59,8 @@ var AvatarGroup = ({
         overflowCount > 0 && /* @__PURE__ */ jsx(
           "span",
           {
-            className: getAvatarGroupOverflowClasses(size ?? "md"),
+            className: getAvatarGroupOverflowClasses(size ?? "md", overflowShape, visibleCount > 0),
+            role: "img",
             "aria-label": getAvatarGroupOverflowLabel(overflowCount, labels.overflowAriaLabel),
             children: getAvatarGroupOverflowText(overflowCount)
           }

package/dist/chunk-ION7IDAW.mjs

@@ -0,0 +1,297 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-JX2WKSVM.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  ChartLegend
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/SunburstChart.tsx
+import { useId, useMemo } from "react";
+import {
+  classNames,
+  layoutSunburst,
+  getChartElementOpacity,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  isChartNavigationKey,
+  nextSunburstArcIndex,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate,
+  sunburstArcTransitionClasses,
+  DEFAULT_SUNBURST_SIZE,
+  DEFAULT_SUNBURST_PADDING
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SunburstChart = ({
+  width = DEFAULT_SUNBURST_SIZE,
+  height = DEFAULT_SUNBURST_SIZE,
+  padding = DEFAULT_SUNBURST_PADDING,
+  responsive = false,
+  data,
+  innerRadiusRatio = 0,
+  showLabels = true,
+  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,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onArcClick,
+  onArcHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const interactive = hoverable || selectable || Boolean(onArcClick);
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("sunburst", gradientId),
+    [gradientId]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const outerRadius = Math.min(innerRect.width, innerRect.height) / 2;
+  const innerRadius = outerRadius * Math.max(0, Math.min(1, innerRadiusRatio));
+  const arcs = useMemo(
+    () => layoutSunburst(data, {
+      cx,
+      cy,
+      innerRadius,
+      outerRadius,
+      colors: palette
+    }),
+    [data, cx, cy, innerRadius, outerRadius, palette]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    resolvedSelectedIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => arcs[index]?.datum,
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onArcHover?.(index, index !== null ? arcs[index]?.datum ?? null : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, datum) => {
+      if (datum !== void 0) onArcClick?.(index, datum);
+    }
+  });
+  const roots = useMemo(() => arcs.filter((arc) => arc.depth === 0), [arcs]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: roots.map((arc) => arc.datum),
+      palette,
+      activeIndex,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (d) => d.label,
+      getColor: (_d, i) => roots[i]?.color ?? palette[i % palette.length]
+    }).map((item, i) => ({ ...item, index: roots[i]?.index ?? item.index })),
+    [roots, palette, activeIndex, resolvedSelectedIndex]
+  );
+  const tooltipContent = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const arc = arcs[resolvedHoveredIndex];
+    if (!arc) return "";
+    if (tooltipFormatter) return tooltipFormatter(arc.datum, arc.index);
+    return formatChartTemplate(labels.sunburstTooltip, {
+      label: arc.label,
+      value: arc.value,
+      percent: arc.percent.toFixed(1)
+    });
+  }, [resolvedHoveredIndex, arcs, tooltipFormatter, labels.sunburstTooltip]);
+  const visualActive = arcs.findIndex((arc) => arc.index === (activeIndex ?? resolvedHoveredIndex));
+  const handleArcKeyDown = (event, index) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const next = nextSunburstArcIndex(index, event.key, arcs);
+      const node = event.currentTarget.parentElement?.querySelector(
+        `[data-sunburst-arc][data-index="${next}"]`
+      );
+      if (node instanceof SVGElement) node.focus();
+      handleMouseEnter(next, event);
+      return;
+    }
+    handleKeyDown(event, index);
+  };
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc,
+      onResolvedSizeChange,
+      children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: arcs.map((arc) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${arc.index}`,
+            gradientUnits: "userSpaceOnUse",
+            x1: cx,
+            y1: cy - outerRadius,
+            x2: cx,
+            y2: cy + outerRadius,
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: arc.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: arc.color, stopOpacity: 0.7 })
+            ]
+          },
+          `grad-${arc.index}`
+        )) }),
+        /* @__PURE__ */ jsxs("g", { "data-series-type": "sunburst", children: [
+          arcs.map((arc, visualIndex) => {
+            const opacity = getChartElementOpacity(arc.index, activeIndex, {
+              activeOpacity,
+              inactiveOpacity
+            });
+            const ariaLabel = formatChartTemplate(labels.sunburstTooltip, {
+              label: arc.label,
+              value: arc.value,
+              percent: arc.percent.toFixed(1)
+            });
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: arc.path,
+                fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
+                opacity,
+                stroke: "var(--tiger-surface,#ffffff)",
+                strokeWidth: 1,
+                "data-sunburst-arc": "",
+                "data-index": arc.index,
+                className: classNames(interactive && "cursor-pointer", sunburstArcTransitionClasses),
+                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(arc.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onFocus: (e) => handleMouseEnter(arc.index, e),
+                onClick: () => handleClick(arc.index),
+                onKeyDown: (e) => handleArcKeyDown(e, arc.index)
+              },
+              `arc-${arc.index}`
+            );
+          }),
+          showLabels && arcs.map(
+            (arc) => arc.showLabel && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: arc.labelX,
+                y: arc.labelY,
+                fill: arc.labelFill,
+                className: "text-xs pointer-events-none select-none",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                "aria-hidden": "true",
+                children: arc.label
+              },
+              `label-${arc.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,
+        legendPosition,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
+};
+var SunburstChart_default = SunburstChart;
+
+export {
+  SunburstChart,
+  SunburstChart_default
+};