@expcat/tigercat-react 0.1.8 → 0.2.10

package/dist/{chunk-K7ZMB2TH.mjs → chunk-5XKYWZZZ.mjs}

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, tablePaginationContainerClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, getSortIconClasses, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
+import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Table.tsx
@@ -12,9 +12,9 @@ var SortIcon = ({ direction }) => {
         className: getSortIconClasses(true),
         width: "16",
         height: "16",
-        viewBox: "0 0 16 16",
+        viewBox: icon16ViewBox,
         fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: "M8 3l4 4H4l4-4z" })
+        children: /* @__PURE__ */ jsx("path", { d: sortAscIcon16PathD })
       }
     );
   }
@@ -25,9 +25,9 @@ var SortIcon = ({ direction }) => {
         className: getSortIconClasses(true),
         width: "16",
         height: "16",
-        viewBox: "0 0 16 16",
+        viewBox: icon16ViewBox,
         fill: "currentColor",
-        children: /* @__PURE__ */ jsx("path", { d: "M8 13l-4-4h8l-4 4z" })
+        children: /* @__PURE__ */ jsx("path", { d: sortDescIcon16PathD })
       }
     );
   }
@@ -37,14 +37,14 @@ var SortIcon = ({ direction }) => {
       className: getSortIconClasses(false),
       width: "16",
       height: "16",
-      viewBox: "0 0 16 16",
+      viewBox: icon16ViewBox,
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx("path", { d: "M8 3l4 4H4l4-4zM8 13l-4-4h8l-4 4z" })
+      children: /* @__PURE__ */ jsx("path", { d: sortBothIcon16PathD })
     }
   );
 };
 var LockIcon = ({ locked }) => {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: locked ? /* @__PURE__ */ jsx("path", { d: "M17 8h-1V6a4 4 0 10-8 0v2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-2-2zm-7-2a2 2 0 114 0v2h-4V6z" }) : /* @__PURE__ */ jsx("path", { d: "M17 8h-1V6a4 4 0 00-7.75-1.41 1 1 0 101.9.62A2 2 0 0114 6v2H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V10a2 2 0 00-2-2zm0 12H7V10h10v10z" }) });
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD }) });
 };
 var LoadingSpinner = () => /* @__PURE__ */ jsx(
   "svg",
@@ -586,13 +586,13 @@ function Table({
     const { totalPages, startIndex, endIndex, hasNext, hasPrev } = paginationInfo;
     const total = processedData.length;
     const paginationConfig2 = pagination;
-    return /* @__PURE__ */ jsxs("div", { className: tablePaginationContainerClasses, children: [
-      paginationConfig2.showTotal !== false && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-700", children: paginationConfig2.totalText ? paginationConfig2.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs("div", { className: getSimplePaginationContainerClasses(), children: [
+      paginationConfig2.showTotal !== false && /* @__PURE__ */ jsx("div", { className: getSimplePaginationTotalClasses(), children: paginationConfig2.totalText ? paginationConfig2.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results` }),
+      /* @__PURE__ */ jsxs("div", { className: getSimplePaginationControlsClasses(), children: [
         paginationConfig2.showSizeChanger !== false && /* @__PURE__ */ jsx(
           "select",
           {
-            className: "px-3 py-1 border border-gray-300 rounded text-sm",
+            className: getSimplePaginationSelectClasses(),
             value: currentPageSize,
             onChange: (e) => handlePageSizeChange(Number(e.target.value)),
             children: (paginationConfig2.pageSizeOptions || [10, 20, 50, 100]).map((size2) => /* @__PURE__ */ jsxs("option", { value: size2, children: [
@@ -601,20 +601,17 @@ function Table({
             ] }, size2))
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: getSimplePaginationButtonsWrapperClasses(), children: [
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: classNames(
-                "px-3 py-1 border border-gray-300 rounded text-sm",
-                hasPrev ? "hover:bg-gray-50 text-gray-700" : "text-gray-400 cursor-not-allowed"
-              ),
+              className: getSimplePaginationButtonClasses(!hasPrev),
               disabled: !hasPrev,
               onClick: () => handlePageChange(currentPage - 1),
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsxs("span", { className: "px-3 py-1 text-sm text-gray-700", children: [
+          /* @__PURE__ */ jsxs("span", { className: getSimplePaginationPageIndicatorClasses(), children: [
             "Page ",
             currentPage,
             " of ",
@@ -623,10 +620,7 @@ function Table({
           /* @__PURE__ */ jsx(
             "button",
             {
-              className: classNames(
-                "px-3 py-1 border border-gray-300 rounded text-sm",
-                hasNext ? "hover:bg-gray-50 text-gray-700" : "text-gray-400 cursor-not-allowed"
-              ),
+              className: getSimplePaginationButtonClasses(!hasNext),
               disabled: !hasNext,
               onClick: () => handlePageChange(currentPage + 1),
               children: "Next"

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";