@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-677VSTPW.mjs

@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { getChartGridLineDasharray, getChartAxisTicks, classNames, chartGridLineClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ChartGrid.tsx
+var ChartGrid = ({
+  xScale,
+  yScale,
+  show = "both",
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  lineStyle = "solid",
+  strokeWidth = 1,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const dasharray = useMemo(() => getChartGridLineDasharray(lineStyle), [lineStyle]);
+  const resolvedXTicks = useMemo(() => {
+    if (!xScale) return [];
+    return getChartAxisTicks(xScale, { tickCount: xTicks, tickValues: xTickValues });
+  }, [xScale, xTicks, xTickValues]);
+  const resolvedYTicks = useMemo(() => {
+    if (!yScale) return [];
+    return getChartAxisTicks(yScale, { tickCount: yTicks, tickValues: yTickValues });
+  }, [yScale, yTicks, yTickValues]);
+  const shouldRenderX = show === "both" || show === "x";
+  const shouldRenderY = show === "both" || show === "y";
+  const xRange = xScale?.range;
+  const yRange = yScale?.range;
+  return /* @__PURE__ */ jsxs("g", { ...props, className: classNames(className), transform: `translate(${x}, ${y})`, children: [
+    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: tick.position,
+        y1: yRange[0],
+        x2: tick.position,
+        y2: yRange[1],
+        className: chartGridLineClasses,
+        strokeWidth,
+        strokeDasharray: dasharray
+      },
+      `x-${tick.value}`
+    )) : null,
+    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: xRange[0],
+        y1: tick.position,
+        x2: xRange[1],
+        y2: tick.position,
+        className: chartGridLineClasses,
+        strokeWidth,
+        strokeDasharray: dasharray
+      },
+      `y-${tick.value}`
+    )) : null
+  ] });
+};
+var ChartGrid_default = ChartGrid;
+
+export { ChartGrid, ChartGrid_default };

package/dist/chunk-6DYS4PJT.mjs

@@ -0,0 +1,99 @@
+import { PieChart } from './chunk-LZNG2HGC.mjs';
+import { useMemo } from 'react';
+import { getChartInnerRect, classNames } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+var DonutChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  innerRadius,
+  innerRadiusRatio = 0.6,
+  outerRadius,
+  startAngle = 0,
+  endAngle = Math.PI * 2,
+  padAngle = 0,
+  colors,
+  showLabels = false,
+  labelFormatter,
+  // Interaction props
+  hoverable = false,
+  hoveredIndex,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex,
+  // Legend props
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  // Tooltip props
+  showTooltip = true,
+  tooltipFormatter,
+  // Accessibility
+  title,
+  desc,
+  className,
+  // Callbacks
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSliceClick,
+  onSliceHover
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, 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.6, 0), 1);
+    return resolvedOuterRadius * ratio;
+  }, [innerRadius, innerRadiusRatio, resolvedOuterRadius]);
+  return /* @__PURE__ */ jsx(
+    PieChart,
+    {
+      width,
+      height,
+      padding,
+      data,
+      innerRadius: resolvedInnerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      padAngle,
+      colors,
+      showLabels,
+      labelFormatter,
+      hoverable,
+      hoveredIndex,
+      activeOpacity,
+      inactiveOpacity,
+      selectable,
+      selectedIndex,
+      showLegend,
+      legendPosition,
+      legendMarkerSize,
+      legendGap,
+      showTooltip,
+      tooltipFormatter,
+      title,
+      desc,
+      className: classNames(className),
+      onHoveredIndexChange,
+      onSelectedIndexChange,
+      onSliceClick,
+      onSliceHover
+    }
+  );
+};
+var DonutChart_default = DonutChart;
+
+export { DonutChart, DonutChart_default };

package/dist/chunk-6PBNFLM7.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartLegend.tsx
+var ChartLegend = ({
+  items,
+  position = "bottom",
+  markerSize = 10,
+  gap = 8,
+  interactive = false,
+  className,
+  onItemClick,
+  onItemHover,
+  onItemLeave
+}) => {
+  const containerClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      "flex flex-wrap",
+      position === "right" || position === "left" ? "flex-col gap-2" : "flex-row gap-3",
+      className
+    ),
+    [position, className]
+  );
+  const handleClick = react.useCallback(
+    (item) => {
+      if (!interactive) return;
+      onItemClick?.(item.index, item);
+    },
+    [interactive, onItemClick]
+  );
+  const handleHover = react.useCallback(
+    (item) => {
+      if (!interactive) return;
+      onItemHover?.(item.index, item);
+    },
+    [interactive, onItemHover]
+  );
+  const handleLeave = react.useCallback(() => {
+    if (!interactive) return;
+    onItemLeave?.();
+  }, [interactive, onItemLeave]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: containerClasses,
+      role: "list",
+      "aria-label": "Chart legend",
+      "data-chart-legend": "true",
+      children: items.map((item) => {
+        const ItemComponent = interactive ? "button" : "div";
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          ItemComponent,
+          {
+            type: interactive ? "button" : void 0,
+            className: tigercatCore.classNames(
+              "flex items-center gap-2 text-sm",
+              "text-[color:var(--tiger-text-secondary,#6b7280)]",
+              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] transition-colors" : "cursor-default",
+              item.active === false ? "opacity-50" : void 0
+            ),
+            role: "listitem",
+            "data-legend-item": "true",
+            onClick: interactive ? () => handleClick(item) : void 0,
+            onMouseEnter: interactive ? () => handleHover(item) : void 0,
+            onMouseLeave: interactive ? handleLeave : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "inline-block rounded-full shrink-0",
+                  style: {
+                    width: `${markerSize}px`,
+                    height: `${markerSize}px`,
+                    backgroundColor: item.color
+                  },
+                  "aria-hidden": "true",
+                  "data-legend-marker": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginRight: `${gap}px` }, children: item.label })
+            ]
+          },
+          `legend-${item.index}`
+        );
+      })
+    }
+  );
+};
+var ChartLegend_default = ChartLegend;
+
+exports.ChartLegend = ChartLegend;
+exports.ChartLegend_default = ChartLegend_default;

package/dist/{chunk-DCRVIDMY.mjs → chunk-6ZC7H22S.mjs}

@@ -1,4 +1,4 @@
-import { DropdownContext } from './chunk-WSCSDSV7.mjs';
+import { DropdownContext } from './chunk-7IKJBQQV.mjs';
 import { useContext } from 'react';
 import { classNames, getDropdownItemClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-WSCSDSV7.mjs → chunk-7IKJBQQV.mjs}

@@ -1,13 +1,14 @@
-import { useClickOutside, useEscapeKey } from './chunk-ZO4XVOHU.mjs';
+import { useClickOutside, useEscapeKey, useFloating } from './chunk-WLIFEALE.mjs';
 import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
-import React, { createContext, useState, useRef, useCallback, useEffect } from 'react';
-import { classNames, getDropdownContainerClasses, getDropdownTriggerClasses, getDropdownMenuWrapperClasses } from '@expcat/tigercat-core';
+import React, { createContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { classNames, getDropdownContainerClasses, getDropdownTriggerClasses, getTransformOrigin } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DropdownContext = createContext(null);
 var Dropdown = ({
   trigger = "hover",
-  placement = "bottom-start",
+  placement: initialPlacement = "bottom-start",
+  offset = 4,
   disabled = false,
   visible: controlledVisible,
   defaultVisible = false,
@@ -22,6 +23,8 @@ var Dropdown = ({
   const [internalVisible, setInternalVisible] = useState(defaultVisible);
   const visible = controlledVisible !== void 0 ? controlledVisible : internalVisible;
   const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
   const hoverTimerRef = useRef(null);
   const setVisible = useCallback(
     (newVisible) => {
@@ -69,6 +72,13 @@ var Dropdown = ({
     enabled: visible,
     onEscape: () => setVisible(false)
   });
+  const { x, y, placement } = useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: visible,
+    placement: initialPlacement,
+    offset
+  });
   useEffect(() => {
     return () => {
       if (hoverTimerRef.current) {
@@ -82,7 +92,16 @@ var Dropdown = ({
     className
   );
   const triggerClasses = getDropdownTriggerClasses(disabled);
-  const menuWrapperClasses = getDropdownMenuWrapperClasses(visible, placement);
+  const menuWrapperClasses = "absolute z-50";
+  const menuWrapperStyles = useMemo(
+    () => ({
+      position: "absolute",
+      left: x,
+      top: y,
+      transformOrigin: getTransformOrigin(placement)
+    }),
+    [x, y, placement]
+  );
   const contextValue = {
     closeOnClick,
     handleItemClick
@@ -118,6 +137,7 @@ var Dropdown = ({
         /* @__PURE__ */ jsx(
           "div",
           {
+            ref: triggerRef,
             className: triggerClasses,
             onClick: handleClick,
             onMouseEnter: handleMouseEnter,
@@ -130,7 +150,9 @@ var Dropdown = ({
         /* @__PURE__ */ jsx(
           "div",
           {
+            ref: floatingRef,
             className: menuWrapperClasses,
+            style: menuWrapperStyles,
             hidden: !visible,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,

package/dist/{chunk-OTRGVENC.js → chunk-7SLNHUGJ.js}

@@ -69,7 +69,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
   const iconClass = tigercatCore.classNames(tigercatCore.notificationIconClasses, colorScheme.icon);
   const handleClose = () => {
     setIsVisible(false);
-    setTimeout(() => onClose(notification2.id), 300);
+    setTimeout(() => onClose(notification2.id), tigercatCore.ANIMATION_DURATION_MS);
   };
   const a11yRole = notification2.type === "error" ? "alert" : "status";
   const ariaLive = notification2.type === "error" ? "assertive" : "polite";