@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-N32MAX4A.js

@@ -0,0 +1,230 @@
+'use strict';
+
+var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var PieChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  innerRadius = 0,
+  outerRadius,
+  startAngle = 0,
+  endAngle = Math.PI * 2,
+  padAngle = 0,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = chunkKQZ4F7FZ_js.useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSliceHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onSliceClick
+    }
+  });
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const resolvedOuterRadius = react.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 = react.useMemo(
+    () => Math.min(Math.max(0, innerRadius ?? 0), resolvedOuterRadius),
+    [innerRadius, resolvedOuterRadius]
+  );
+  const arcs = react.useMemo(
+    () => tigercatCore.getPieArcs(data, {
+      startAngle,
+      endAngle,
+      padAngle
+    }),
+    [data, startAngle, endAngle, padAngle]
+  );
+  const palette = react.useMemo(
+    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
+    [colors]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
+  const total = react.useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const formatLabel = labelFormatter ?? ((value, datum) => datum.label ?? `${value}`);
+  const legendItems = react.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
+    })),
+    [arcs, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = react.useCallback(
+    (datum, index) => {
+      if (tooltipFormatter) return 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]
+  );
+  const tooltipContent = react.useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const datum = data[resolvedHoveredIndex];
+    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
+  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const chart = /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkDUWAV47E_js.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: tigercatCore.classNames(className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("g", { "data-series-type": "pie", children: arcs.map((arc) => {
+          const color = arc.data.color ?? palette[arc.index % palette.length];
+          const path = tigercatCore.createPieArcPath({
+            cx,
+            cy,
+            innerRadius: resolvedInnerRadius,
+            outerRadius: resolvedOuterRadius,
+            startAngle: arc.startAngle,
+            endAngle: arc.endAngle
+          });
+          const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: path,
+              fill: color,
+              opacity,
+              className: tigercatCore.classNames(
+                "transition-opacity duration-150",
+                (hoverable || selectable) && "cursor-pointer"
+              ),
+              tabIndex: selectable ? 0 : void 0,
+              "data-pie-slice": "true",
+              "data-index": arc.index,
+              onMouseEnter: (e) => handleMouseEnter(arc.index, e),
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleClick(arc.index),
+              onKeyDown: (e) => handleKeyDown(e, arc.index)
+            },
+            `slice-${arc.index}`
+          );
+        }) }),
+        showLabels && arcs.map((arc) => {
+          const angle = (arc.startAngle + arc.endAngle) / 2;
+          const { x, y } = tigercatCore.polarToCartesian(cx, cy, labelRadius, angle);
+          const label = formatLabel(arc.value, arc.data, arc.index);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x,
+              y,
+              className: tigercatCore.chartAxisTickTextClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              children: label
+            },
+            `label-${arc.index}`
+          );
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
+    chunkM375I56K_js.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  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: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var PieChart_default = PieChart;
+
+exports.PieChart = PieChart;
+exports.PieChart_default = PieChart_default;

package/dist/{chunk-YYKJ63LD.mjs → chunk-NMDNLB3C.mjs}

@@ -1,5 +1,5 @@
 import { useId, useState, useRef, useMemo, useEffect } from 'react';
-import { filterOptions, getSelectTriggerClasses, classNames, selectBaseClasses, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses } from '@expcat/tigercat-core';
+import { filterOptions, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Select.tsx
@@ -364,16 +364,9 @@ var Select = (props) => {
             {
               className: "w-5 h-5 text-[var(--tiger-select-check-icon,var(--tiger-primary,#2563eb))]",
               xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 20 20",
+              viewBox: icon20ViewBox,
               fill: "currentColor",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-                  clipRule: "evenodd"
-                }
-              )
+              children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: checkSolidIcon20PathD, clipRule: "evenodd" })
             }
           )
         ] })
@@ -432,16 +425,9 @@ var Select = (props) => {
               {
                 className: "w-4 h-4 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-select-icon-hover,var(--tiger-text-muted,#6b7280))]",
                 xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 20 20",
+                viewBox: icon20ViewBox,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-                    clipRule: "evenodd"
-                  }
-                )
+                children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: closeSolidIcon20PathD, clipRule: "evenodd" })
               }
             ) }),
             /* @__PURE__ */ jsx("span", { className: classNames("inline-flex", isOpen && "rotate-180"), children: /* @__PURE__ */ jsx(
@@ -449,16 +435,9 @@ var Select = (props) => {
               {
                 className: "w-5 h-5 text-[var(--tiger-select-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
                 xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 20 20",
+                viewBox: icon20ViewBox,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    fillRule: "evenodd",
-                    d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
-                    clipRule: "evenodd"
-                  }
-                )
+                children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronDownSolidIcon20PathD, clipRule: "evenodd" })
               }
             ) })
           ] })

package/dist/{chunk-77D7VQMG.js → chunk-OD2NNQD2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkLNKI6HQ3_js = require('./chunk-LNKI6HQ3.js');
+var chunkLIJLFLYE_js = require('./chunk-LIJLFLYE.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,7 +13,7 @@ var DropdownItem = ({
   children,
   ...buttonProps
 }) => {
-  const context = react.useContext(chunkLNKI6HQ3_js.DropdownContext);
+  const context = react.useContext(chunkLIJLFLYE_js.DropdownContext);
   const handleClick = (event) => {
     if (disabled) {
       event.preventDefault();