@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-BO45CU4Q.js

@@ -0,0 +1,323 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
+
+
+var _chunkWV5XHYW6js = require('./chunk-WV5XHYW6.js');
+
+
+var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
+
+
+var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
+
+// src/components/PieChart.tsx
+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,
+  labelPosition = "inside",
+  borderWidth = 2,
+  borderColor = "var(--tiger-surface,#ffffff)",
+  hoverOffset = 8,
+  shadow = false,
+  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,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = _chunkXTV5JLLCjs.useChartInteraction.call(void 0, {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      _optionalChain([onHoveredIndexChange, 'optionalCall', _ => _(index)]);
+      _optionalChain([onSliceHover, 'optionalCall', _2 => _2(index, index !== null ? data[index] : null)]);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onSliceClick
+    }
+  });
+  const innerRect = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
+    [width, height, padding]
+  );
+  const resolvedOuterRadius = _react.useMemo.call(void 0, () => {
+    if (typeof outerRadius === "number") return Math.max(0, outerRadius);
+    const maxR = Math.min(innerRect.width, innerRect.height) / 2;
+    return labelPosition === "outside" ? maxR * 0.72 : maxR;
+  }, [outerRadius, innerRect.width, innerRect.height, labelPosition]);
+  const resolvedInnerRadius = _react.useMemo.call(void 0, 
+    () => Math.min(Math.max(0, _nullishCoalesce(innerRadius, () => ( 0))), resolvedOuterRadius),
+    [innerRadius, resolvedOuterRadius]
+  );
+  const arcs = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getPieArcs.call(void 0, data, {
+      startAngle,
+      endAngle,
+      padAngle
+    }),
+    [data, startAngle, endAngle, padAngle]
+  );
+  const palette = _react.useMemo.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, colors), [colors]);
+  const gradientId = _react.useId.call(void 0, );
+  const gradientPrefix = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getStableChartGradientPrefix.call(void 0, "pie", gradientId),
+    [gradientId]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
+  const total = _react.useMemo.call(void 0, () => data.reduce((sum, d) => sum + d.value, 0), [data]);
+  const formatLabel = _nullishCoalesce(labelFormatter, () => ( ((value, datum) => _nullishCoalesce(datum.label, () => ( `${value}`)))));
+  const legendItems = _react.useMemo.call(void 0, 
+    () => _tigercatcore.buildChartLegendItems.call(void 0, {
+      data: arcs.map((a) => a.data),
+      palette,
+      activeIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : _nullishCoalesce(d.label, () => ( `${i + 1}`)),
+      getColor: (d, i) => _nullishCoalesce(d.color, () => ( palette[i % palette.length]))
+    }),
+    [arcs, legendFormatter, palette, activeIndex]
+  );
+  const tooltipContent = _react.useMemo.call(void 0, 
+    () => _tigercatcore.resolveChartTooltipContent.call(void 0, resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
+      const label = _nullishCoalesce(datum.label, () => ( `Slice ${index + 1}`));
+      const percentage = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
+      return `${label}: ${datum.value} (${percentage}%)`;
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter, total]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkUKLVOR4Ejs.ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: _tigercatcore.classNames.call(void 0, className),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { "data-series-type": "pie", children: [
+          gradient && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: arcs.map((arc) => {
+            const color = _nullishCoalesce(arc.data.color, () => ( palette[arc.index % palette.length]));
+            return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${arc.index}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "stop", { offset: "100%", stopColor: color, stopOpacity: 0.7 })
+                ]
+              },
+              `pie-grad-${arc.index}`
+            );
+          }) }),
+          arcs.map((arc) => {
+            const color = _nullishCoalesce(arc.data.color, () => ( palette[arc.index % palette.length]));
+            const path = _tigercatcore.createPieArcPath.call(void 0, {
+              cx,
+              cy,
+              innerRadius: resolvedInnerRadius,
+              outerRadius: resolvedOuterRadius,
+              startAngle: arc.startAngle,
+              endAngle: arc.endAngle
+            });
+            const isEmphasized = activeIndex === arc.index;
+            const opacity = _tigercatcore.getChartElementOpacity.call(void 0, arc.index, activeIndex, {
+              activeOpacity,
+              inactiveOpacity
+            });
+            const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? _tigercatcore.computePieHoverOffset.call(void 0, arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "path",
+              {
+                d: path,
+                fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : color,
+                opacity,
+                stroke: borderColor,
+                strokeWidth: borderWidth,
+                strokeLinejoin: "round",
+                className: _tigercatcore.classNames.call(void 0, 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 var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-spring,cubic-bezier(0.4,0,0.2,1)), opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-decelerate,ease-out)",
+                  filter: shadow ? isEmphasized ? _tigercatcore.PIE_EMPHASIS_SHADOW : _tigercatcore.PIE_BASE_SHADOW : void 0
+                },
+                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 && labelPosition === "outside" && arcs.map((arc) => {
+          const color = _nullishCoalesce(arc.data.color, () => ( palette[arc.index % palette.length]));
+          const line = _tigercatcore.computePieLabelLine.call(void 0, 
+            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) : `${_nullishCoalesce(arc.data.label, () => ( arc.value))} ${pct}%`;
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "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__ */ _jsxruntime.jsx.call(void 0, 
+              "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 } = _tigercatcore.polarToCartesian.call(void 0, cx, cy, labelRadius, angle);
+          const label = formatLabel(arc.value, arc.data, arc.index);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "text",
+            {
+              x,
+              y,
+              className: _tigercatcore.chartAxisTickTextClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              children: label
+            },
+            `label-${arc.index}`
+          );
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUVMQJOTXjs.ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkWV5XHYW6js.ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var PieChart_default = PieChart;
+
+
+
+
+exports.PieChart = PieChart; exports.PieChart_default = PieChart_default;

package/dist/chunk-C3NKZZQQ.js

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkAKZY7QYAjs = require('./chunk-AKZY7QYA.js');
+
+// src/components/DropdownItem.tsx
+var _react = require('react');
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var DropdownItem = ({
+  disabled = false,
+  divided = false,
+  className,
+  onClick,
+  children,
+  ...buttonProps
+}) => {
+  const context = _react.useContext.call(void 0, _chunkAKZY7QYAjs.DropdownContext);
+  const handleClick = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    _optionalChain([onClick, 'optionalCall', _ => _(event)]);
+    if (_optionalChain([context, 'optionalAccess', _2 => _2.closeOnClick])) {
+      context.handleItemClick();
+    }
+  };
+  const itemClasses = _tigercatcore.classNames.call(void 0, _tigercatcore.getDropdownItemClasses.call(void 0, disabled, divided), className);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      role: "menuitem",
+      tabIndex: -1,
+      "aria-disabled": disabled,
+      disabled,
+      onClick: handleClick,
+      ...buttonProps,
+      children
+    }
+  );
+};
+
+
+
+exports.DropdownItem = DropdownItem;

package/dist/chunk-CB4SK5AU.mjs

@@ -0,0 +1,235 @@
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
+
+// src/components/Gantt.tsx
+import { useMemo, useState } from "react";
+import {
+  classNames,
+  computeGanttLayout,
+  ganttAxisTextClasses,
+  ganttDependencyClasses,
+  ganttLabelClasses,
+  ganttProgressClasses,
+  ganttRowClasses,
+  ganttTodayLineClasses,
+  getChartInnerRect,
+  getGanttTaskAriaLabel,
+  getGanttTaskClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Gantt({
+  data,
+  width = 760,
+  height = 360,
+  padding = 24,
+  scale = "week",
+  rowHeight = 40,
+  barHeight = 18,
+  taskLabelWidth = 140,
+  timelineHeight = 36,
+  minDate,
+  maxDate,
+  minBarWidth = 6,
+  showToday = false,
+  showProgress = true,
+  showDependencies = true,
+  hoverable = false,
+  selectable = false,
+  selectedId,
+  activeOpacity = 1,
+  inactiveOpacity = 0.35,
+  dateFormatter,
+  colors,
+  title,
+  desc,
+  ariaLabel = "Gantt chart",
+  className,
+  onTaskClick,
+  onTaskHover,
+  onSelectedIdChange
+}) {
+  const [innerSelectedId, setInnerSelectedId] = useState(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [height, padding, width]
+  );
+  const layout = useMemo(
+    () => computeGanttLayout(data, {
+      width: innerRect.width,
+      rowHeight,
+      barHeight,
+      taskLabelWidth,
+      timelineHeight,
+      minDate,
+      maxDate,
+      minBarWidth,
+      scale,
+      colors,
+      today: showToday ? /* @__PURE__ */ new Date() : void 0,
+      dateFormatter
+    }),
+    [
+      barHeight,
+      colors,
+      data,
+      dateFormatter,
+      innerRect.width,
+      maxDate,
+      minBarWidth,
+      minDate,
+      rowHeight,
+      scale,
+      showToday,
+      taskLabelWidth,
+      timelineHeight
+    ]
+  );
+  const activeId = resolvedSelectedId ?? hoveredId;
+  const selectTask = (task) => {
+    if (selectable && !task.task.disabled) {
+      const nextId = resolvedSelectedId === task.id ? null : task.id;
+      if (selectedId === void 0) setInnerSelectedId(nextId);
+      onSelectedIdChange?.(nextId);
+    }
+    onTaskClick?.(task.task);
+  };
+  const setHoveredTask = (task) => {
+    if (!hoverable) return;
+    setHoveredId(task?.id ?? null);
+    onTaskHover?.(task?.task ?? null);
+  };
+  const getTaskOpacity = (task) => {
+    if (activeId === null) return activeOpacity;
+    return activeId === task.id ? activeOpacity : inactiveOpacity;
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "gantt", children: [
+        /* @__PURE__ */ jsxs("g", { "data-gantt-axis": "true", children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: taskLabelWidth,
+              x2: layout.width,
+              y1: timelineHeight - 1,
+              y2: timelineHeight - 1,
+              stroke: "var(--tiger-border,#d1d5db)"
+            }
+          ),
+          layout.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: tick.x,
+                x2: tick.x,
+                y1: 0,
+                y2: layout.height,
+                stroke: "var(--tiger-border,#e5e7eb)"
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: tick.x + 4, y: 16, className: ganttAxisTextClasses, children: tick.label })
+          ] }, `${tick.label}-${tick.x}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-gantt-rows": "true", children: layout.tasks.map((task) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: timelineHeight + task.index * rowHeight,
+            width: layout.width,
+            height: rowHeight,
+            className: task.index % 2 === 0 ? ganttRowClasses : void 0,
+            opacity: task.index % 2 === 0 ? 0.75 : 0
+          },
+          `row-${task.id}`
+        )) }),
+        showToday && layout.todayX !== null ? /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: layout.todayX,
+            x2: layout.todayX,
+            y1: 0,
+            y2: layout.height,
+            className: ganttTodayLineClasses,
+            "data-gantt-today": "true"
+          }
+        ) : null,
+        showDependencies ? /* @__PURE__ */ jsx("g", { "data-gantt-dependencies": "true", children: layout.dependencies.map((dependency) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: dependency.path,
+            className: ganttDependencyClasses
+          },
+          `${dependency.sourceId}-${dependency.targetId}`
+        )) }) : null,
+        /* @__PURE__ */ jsx("g", { "data-gantt-tasks": "true", children: layout.tasks.map((task) => {
+          const selected = resolvedSelectedId === task.id;
+          const interactive = (hoverable || selectable) && !task.task.disabled;
+          return /* @__PURE__ */ jsxs("g", { opacity: getTaskOpacity(task), children: [
+            /* @__PURE__ */ jsx("text", { x: 0, y: task.y + task.height / 2 + 4, className: ganttLabelClasses, children: task.task.label }),
+            /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: getGanttTaskClasses(interactive, selected),
+                role: interactive ? "button" : "group",
+                tabIndex: interactive ? 0 : void 0,
+                "aria-label": getGanttTaskAriaLabel(task.task),
+                onMouseEnter: () => setHoveredTask(task),
+                onMouseLeave: () => setHoveredTask(null),
+                onClick: () => selectTask(task),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    selectTask(task);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.width,
+                      height: task.height,
+                      rx: 4,
+                      fill: task.color,
+                      stroke: selected ? "var(--tiger-text,#111827)" : void 0,
+                      strokeWidth: selected ? 2 : void 0
+                    }
+                  ),
+                  showProgress && task.progressWidth > 0 ? /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.progressWidth,
+                      height: task.height,
+                      rx: 4,
+                      className: ganttProgressClasses
+                    }
+                  ) : null
+                ]
+              }
+            )
+          ] }, task.id);
+        }) })
+      ] })
+    }
+  );
+}
+Gantt.displayName = "Gantt";
+
+export {
+  Gantt
+};