@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/chunk-S4GNTA7V.mjs

@@ -0,0 +1,176 @@
+import { PieChart } from './chunk-SH6O6LDJ.mjs';
+import { useMemo } from 'react';
+import { getChartInnerRect, normalizeChartPadding, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DONUT_PALETTE = [
+  "#5470c6",
+  "#91cc75",
+  "#fac858",
+  "#ee6666",
+  "#73c0de",
+  "#3ba272",
+  "#fc8452",
+  "#9a60b4",
+  "#ea7ccc"
+];
+var DonutChart = ({
+  width = 320,
+  height = 240,
+  padding = 24,
+  data,
+  innerRadius,
+  innerRadiusRatio = 0.62,
+  outerRadius,
+  startAngle = 0,
+  endAngle = Math.PI * 2,
+  padAngle = 0.04,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  labelPosition = "inside",
+  borderWidth = 0,
+  borderColor = "#ffffff",
+  hoverOffset = 10,
+  shadow = true,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex,
+  activeOpacity = 1,
+  inactiveOpacity = 0.3,
+  selectable = false,
+  selectedIndex,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Accessibility
+  title,
+  desc,
+  className,
+  // DonutChart-specific
+  centerValue,
+  centerLabel,
+  animated = false,
+  // Callbacks
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const pad = useMemo(() => normalizeChartPadding(padding), [padding]);
+  const resolvedOuterRadius = useMemo(() => {
+    if (typeof outerRadius === "number") return Math.max(0, outerRadius);
+    return Math.max(0, Math.min(innerRect.width, innerRect.height) / 2);
+  }, [outerRadius, innerRect.width, innerRect.height]);
+  const resolvedInnerRadius = useMemo(() => {
+    if (typeof innerRadius === "number") {
+      return Math.min(Math.max(0, innerRadius), resolvedOuterRadius);
+    }
+    const ratio = Math.min(Math.max(innerRadiusRatio ?? 0.62, 0), 1);
+    return resolvedOuterRadius * ratio;
+  }, [innerRadius, innerRadiusRatio, resolvedOuterRadius]);
+  const resolvedColors = useMemo(
+    () => colors && colors.length > 0 ? colors : DONUT_PALETTE,
+    [colors]
+  );
+  const donutTooltipFormatter = useMemo(() => {
+    if (tooltipFormatter) return tooltipFormatter;
+    const total = data.reduce((s, d) => s + d.value, 0);
+    return (datum, index) => {
+      const pct = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+      const label = datum.label ?? `#${index + 1}`;
+      return `${label}: ${datum.value} (${pct}%)`;
+    };
+  }, [tooltipFormatter, data]);
+  const hasCenterContent = centerValue !== void 0 || centerLabel !== void 0;
+  const centerX = pad.left + innerRect.width / 2;
+  const centerY = pad.top + innerRect.height / 2;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", "data-donut-chart": "true", children: [
+    /* @__PURE__ */ jsx(
+      PieChart,
+      {
+        width,
+        height,
+        padding,
+        data,
+        innerRadius: resolvedInnerRadius,
+        outerRadius,
+        startAngle,
+        endAngle,
+        padAngle,
+        colors: resolvedColors,
+        showLabels,
+        labelFormatter,
+        labelPosition,
+        borderWidth,
+        borderColor,
+        hoverOffset,
+        shadow,
+        hoverable,
+        hoveredIndex,
+        activeOpacity,
+        inactiveOpacity,
+        selectable,
+        selectedIndex,
+        showLegend,
+        legendPosition,
+        legendMarkerSize,
+        legendGap,
+        showTooltip,
+        tooltipFormatter: donutTooltipFormatter,
+        title,
+        desc,
+        className: classNames(className),
+        onHoveredIndexChange,
+        onSelectedIndexChange,
+        onSliceClick,
+        onSliceHover
+      }
+    ),
+    hasCenterContent && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-donut-center": "true",
+        style: {
+          position: "absolute",
+          left: `${centerX}px`,
+          top: `${centerY}px`,
+          transform: "translate(-50%, -50%)",
+          textAlign: "center",
+          pointerEvents: "none",
+          lineHeight: "1.3"
+        },
+        children: [
+          centerValue !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-xl font-semibold text-[color:var(--tiger-text,#1f2937)]",
+              style: { lineHeight: "1.2" },
+              children: `${centerValue}`
+            }
+          ),
+          centerLabel !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-xs text-[color:var(--tiger-text-secondary,#6b7280)]",
+              style: { marginTop: "2px" },
+              children: centerLabel
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var DonutChart_default = DonutChart;
+
+export { DonutChart, DonutChart_default };

package/dist/{chunk-VSF4DF7N.js → chunk-SAZ6V6DX.js}

@@ -28,13 +28,16 @@ var RadioGroup = ({
     `tiger-radio-group-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`
   );
   const groupName = name || generatedNameRef.current;
-  const handleChange = (newValue) => {
-    if (disabled) return;
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-    onChange?.(newValue);
-  };
+  const handleChange = React.useCallback(
+    (newValue) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [disabled, isControlled, onChange]
+  );
   const handleKeyDown = (event) => {
     if (disabled) return;
     if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "ArrowUp" && event.key !== "ArrowLeft") {
@@ -58,20 +61,20 @@ var RadioGroup = ({
     nextInput.focus();
     nextInput.click();
   };
-  const contextValue = {
-    value: currentValue,
-    name: groupName,
-    disabled,
-    size,
-    onChange: handleChange
-  };
+  const contextValue = React.useMemo(
+    () => ({
+      value: currentValue,
+      name: groupName,
+      disabled,
+      size,
+      onChange: handleChange
+    }),
+    [currentValue, groupName, disabled, size, handleChange]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: tigercatCore.getRadioGroupClasses({
-        className,
-        hasCustomClass: !!className
-      }),
+      className: tigercatCore.getRadioGroupClasses({ className }),
       role: "radiogroup",
       onKeyDown: handleKeyDown,
       ...props,

package/dist/{chunk-Q3DPJHNM.js → chunk-SFALTVPS.js}

@@ -5,6 +5,7 @@ var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var Upload = ({
   accept,
   multiple = false,
@@ -32,7 +33,6 @@ var Upload = ({
   style,
   ...divProps
 }) => {
-  const spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
   const config = chunkQL6UEG3U_js.useTigerConfig();
   const mergedLocale = react.useMemo(
     () => tigercatCore.mergeTigerLocale(config.locale, locale),
@@ -126,9 +126,7 @@ var Upload = ({
     onChange?.(file, newFileList);
   };
   const handlePreview = (file) => {
-    if (onPreview) {
-      onPreview(file);
-    }
+    onPreview?.(file);
   };
   const handleDragOver = (event) => {
     if (disabled) return;
@@ -206,7 +204,7 @@ var Upload = ({
       "button",
       {
         type: "button",
-        className: tigercatCore.getUploadButtonClasses(drag, disabled),
+        className: tigercatCore.getUploadButtonClasses(disabled),
         onClick: handleClick,
         disabled,
         "aria-label": labels.buttonAriaLabel,

package/dist/{chunk-LZNG2HGC.mjs → chunk-SH6O6LDJ.mjs}

@@ -2,8 +2,8 @@ import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
 import { ChartCanvas } from './chunk-IS467WAO.mjs';
 import { ChartLegend } from './chunk-Z6F67MJE.mjs';
 import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { useMemo, useCallback } from 'react';
-import { getChartInnerRect, getPieArcs, DEFAULT_CHART_COLORS, classNames, createPieArcPath, getChartElementOpacity, polarToCartesian, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { useMemo } from 'react';
+import { getChartInnerRect, getPieArcs, resolveChartPalette, buildChartLegendItems, resolveChartTooltipContent, classNames, createPieArcPath, getChartElementOpacity, computePieHoverOffset, PIE_EMPHASIS_SHADOW, PIE_BASE_SHADOW, computePieLabelLine, polarToCartesian, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var PieChart = ({
@@ -19,6 +19,11 @@ var PieChart = ({
   colors,
   showLabels = false,
   labelFormatter,
+  labelPosition = "inside",
+  borderWidth = 2,
+  borderColor = "#ffffff",
+  hoverOffset = 8,
+  shadow = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -77,8 +82,9 @@ var PieChart = ({
   );
   const resolvedOuterRadius = useMemo(() => {
     if (typeof outerRadius === "number") return Math.max(0, outerRadius);
-    return Math.max(0, Math.min(innerRect.width, innerRect.height) / 2);
-  }, [outerRadius, innerRect.width, innerRect.height]);
+    const maxR = Math.min(innerRect.width, innerRect.height) / 2;
+    return labelPosition === "outside" ? maxR * 0.72 : maxR;
+  }, [outerRadius, innerRect.width, innerRect.height, labelPosition]);
   const resolvedInnerRadius = useMemo(
     () => Math.min(Math.max(0, innerRadius ?? 0), resolvedOuterRadius),
     [innerRadius, resolvedOuterRadius]
@@ -91,38 +97,31 @@ var PieChart = ({
     }),
     [data, startAngle, endAngle, padAngle]
   );
-  const palette = useMemo(
-    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_COLORS],
-    [colors]
-  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
   const cx = innerRect.width / 2;
   const cy = innerRect.height / 2;
   const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
   const total = useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const formatLabel = labelFormatter ?? ((value, datum) => datum.label ?? `${value}`);
   const legendItems = useMemo(
-    () => arcs.map((arc) => ({
-      index: arc.index,
-      label: legendFormatter ? legendFormatter(arc.data, arc.index) : arc.data.label ?? `${arc.index + 1}`,
-      color: arc.data.color ?? palette[arc.index % palette.length],
-      active: activeIndex === null || activeIndex === arc.index
-    })),
+    () => buildChartLegendItems({
+      data: arcs.map((a) => a.data),
+      palette,
+      activeIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : d.label ?? `${i + 1}`,
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
     [arcs, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = useCallback(
-    (datum, index) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, index);
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
       const label = datum.label ?? `Slice ${index + 1}`;
       const percentage = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
       return `${label}: ${datum.value} (${percentage}%)`;
-    },
-    [tooltipFormatter, total]
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter, total]
   );
-  const tooltipContent = useMemo(() => {
-    if (resolvedHoveredIndex === null) return "";
-    const datum = data[resolvedHoveredIndex];
-    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
-  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -143,20 +142,28 @@ var PieChart = ({
             startAngle: arc.startAngle,
             endAngle: arc.endAngle
           });
+          const isEmphasized = activeIndex === arc.index;
           const opacity = getChartElementOpacity(arc.index, activeIndex, {
             activeOpacity,
             inactiveOpacity
           });
+          const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
           return /* @__PURE__ */ jsx(
             "path",
             {
               d: path,
               fill: color,
               opacity,
-              className: classNames(
-                "transition-opacity duration-150",
-                (hoverable || selectable) && "cursor-pointer"
-              ),
+              stroke: borderColor,
+              strokeWidth: borderWidth,
+              strokeLinejoin: "round",
+              className: classNames(interactive && "cursor-pointer"),
+              style: {
+                transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
+                transformOrigin: `${cx}px ${cy}px`,
+                transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
+                filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+              },
               tabIndex: selectable ? 0 : void 0,
               "data-pie-slice": "true",
               "data-index": arc.index,
@@ -169,7 +176,42 @@ var PieChart = ({
             `slice-${arc.index}`
           );
         }) }),
-        showLabels && arcs.map((arc) => {
+        showLabels && labelPosition === "outside" && arcs.map((arc) => {
+          const color = arc.data.color ?? palette[arc.index % palette.length];
+          const line = computePieLabelLine(
+            cx,
+            cy,
+            resolvedOuterRadius,
+            arc.startAngle,
+            arc.endAngle
+          );
+          const pct = total > 0 ? (arc.value / total * 100).toFixed(1) : "0";
+          const labelText = labelFormatter ? labelFormatter(arc.value, arc.data, arc.index) : `${arc.data.label ?? arc.value} ${pct}%`;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                points: `${line.anchor.x},${line.anchor.y} ${line.elbow.x},${line.elbow.y} ${line.label.x},${line.label.y}`,
+                fill: "none",
+                stroke: color,
+                strokeWidth: 1,
+                opacity: 0.5
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: line.label.x,
+                y: line.label.y,
+                textAnchor: line.textAnchor,
+                dominantBaseline: "middle",
+                className: "fill-[color:var(--tiger-text-secondary,#6b7280)] text-xs",
+                children: labelText
+              }
+            )
+          ] }, `label-group-${arc.index}`);
+        }),
+        showLabels && labelPosition !== "outside" && arcs.map((arc) => {
           const angle = (arc.startAngle + arc.endAngle) / 2;
           const { x, y } = polarToCartesian(cx, cy, labelRadius, angle);
           const label = formatLabel(arc.value, arc.data, arc.index);
@@ -213,7 +255,7 @@ var PieChart = ({
         position: legendPosition,
         markerSize: legendMarkerSize,
         gap: legendGap,
-        interactive: hoverable || selectable,
+        interactive,
         onItemClick: handleLegendClick,
         onItemHover: handleLegendHover,
         onItemLeave: handleLegendLeave