@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/{chunk-LNKI6HQ3.js → chunk-LIJLFLYE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNEULKOYJ_js = require('./chunk-NEULKOYJ.js');
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
 var chunkEQWQXURG_js = require('./chunk-EQWQXURG.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -13,7 +13,8 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var DropdownContext = React.createContext(null);
 var Dropdown = ({
   trigger = "hover",
-  placement = "bottom-start",
+  placement: initialPlacement = "bottom-start",
+  offset = 4,
   disabled = false,
   visible: controlledVisible,
   defaultVisible = false,
@@ -28,6 +29,8 @@ var Dropdown = ({
   const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
   const visible = controlledVisible !== void 0 ? controlledVisible : internalVisible;
   const containerRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
   const hoverTimerRef = React.useRef(null);
   const setVisible = React.useCallback(
     (newVisible) => {
@@ -66,15 +69,22 @@ var Dropdown = ({
     if (trigger !== "click") return;
     setVisible(!visible);
   }, [trigger, visible, setVisible]);
-  chunkNEULKOYJ_js.useClickOutside({
+  chunkZYPEO2KY_js.useClickOutside({
     enabled: trigger === "click" && visible,
     refs: [containerRef],
     onOutsideClick: () => setVisible(false)
   });
-  chunkNEULKOYJ_js.useEscapeKey({
+  chunkZYPEO2KY_js.useEscapeKey({
     enabled: visible,
     onEscape: () => setVisible(false)
   });
+  const { x, y, placement } = chunkZYPEO2KY_js.useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: visible,
+    placement: initialPlacement,
+    offset
+  });
   React.useEffect(() => {
     return () => {
       if (hoverTimerRef.current) {
@@ -88,7 +98,16 @@ var Dropdown = ({
     className
   );
   const triggerClasses = tigercatCore.getDropdownTriggerClasses(disabled);
-  const menuWrapperClasses = tigercatCore.getDropdownMenuWrapperClasses(visible, placement);
+  const menuWrapperClasses = "absolute z-50";
+  const menuWrapperStyles = React.useMemo(
+    () => ({
+      position: "absolute",
+      left: x,
+      top: y,
+      transformOrigin: tigercatCore.getTransformOrigin(placement)
+    }),
+    [x, y, placement]
+  );
   const contextValue = {
     closeOnClick,
     handleItemClick
@@ -124,6 +143,7 @@ var Dropdown = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            ref: triggerRef,
             className: triggerClasses,
             onClick: handleClick,
             onMouseEnter: handleMouseEnter,
@@ -136,7 +156,9 @@ var Dropdown = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
+            ref: floatingRef,
             className: menuWrapperClasses,
+            style: menuWrapperStyles,
             hidden: !visible,
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,

package/dist/chunk-LVC43YX2.mjs

@@ -0,0 +1,72 @@
+import { useRef, useState, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { classNames } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ChartTooltip.tsx
+var ChartTooltip = ({
+  content,
+  visible = false,
+  x = 0,
+  y = 0,
+  className
+}) => {
+  const tooltipRef = useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = useState({ x, y });
+  useEffect(() => {
+    if (!visible) return;
+    let newX = x + 12;
+    let newY = y - 8;
+    requestAnimationFrame(() => {
+      if (!tooltipRef.current) return;
+      const rect = tooltipRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      if (newX + rect.width > viewportWidth - 8) {
+        newX = x - rect.width - 12;
+      }
+      if (newY + rect.height > viewportHeight - 8) {
+        newY = y - rect.height - 8;
+      }
+      newX = Math.max(8, newX);
+      newY = Math.max(8, newY);
+      setAdjustedPosition({ x: newX, y: newY });
+    });
+    setAdjustedPosition({ x: newX, y: newY });
+  }, [x, y, visible]);
+  const tooltipClasses = useMemo(
+    () => classNames(
+      "fixed z-[9999] pointer-events-none",
+      "px-3 py-2 rounded-md shadow-lg",
+      "bg-[color:var(--tiger-bg-elevated,#1f2937)]",
+      "text-[color:var(--tiger-text-inverse,#f9fafb)]",
+      "text-sm whitespace-nowrap",
+      "transition-opacity duration-150",
+      visible ? "opacity-100" : "opacity-0",
+      className
+    ),
+    [visible, className]
+  );
+  if (!content) return null;
+  const tooltip = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: tooltipRef,
+      className: tooltipClasses,
+      style: {
+        left: `${adjustedPosition.x}px`,
+        top: `${adjustedPosition.y}px`
+      },
+      role: "tooltip",
+      "data-chart-tooltip": "true",
+      children: content
+    }
+  );
+  if (typeof document !== "undefined") {
+    return createPortal(tooltip, document.body);
+  }
+  return null;
+};
+var ChartTooltip_default = ChartTooltip;
+
+export { ChartTooltip, ChartTooltip_default };

package/dist/chunk-LZNG2HGC.mjs

@@ -0,0 +1,227 @@
+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 { jsxs, jsx } from '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
+  } = 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 = 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(
+    () => Math.min(Math.max(0, innerRadius ?? 0), resolvedOuterRadius),
+    [innerRadius, resolvedOuterRadius]
+  );
+  const arcs = useMemo(
+    () => getPieArcs(data, {
+      startAngle,
+      endAngle,
+      padAngle
+    }),
+    [data, startAngle, endAngle, padAngle]
+  );
+  const palette = useMemo(
+    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_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
+    })),
+    [arcs, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = 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 = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const datum = data[resolvedHoveredIndex];
+    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
+  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        /* @__PURE__ */ jsx("g", { "data-series-type": "pie", children: arcs.map((arc) => {
+          const color = arc.data.color ?? palette[arc.index % palette.length];
+          const path = createPieArcPath({
+            cx,
+            cy,
+            innerRadius: resolvedInnerRadius,
+            outerRadius: resolvedOuterRadius,
+            startAngle: arc.startAngle,
+            endAngle: arc.endAngle
+          });
+          const opacity = getChartElementOpacity(arc.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: path,
+              fill: color,
+              opacity,
+              className: 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 } = polarToCartesian(cx, cy, labelRadius, angle);
+          const label = formatLabel(arc.value, arc.data, arc.index);
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x,
+              y,
+              className: chartAxisTickTextClasses,
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              children: label
+            },
+            `label-${arc.index}`
+          );
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsx(
+      ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var PieChart_default = PieChart;
+
+export { PieChart, PieChart_default };

package/dist/chunk-M375I56K.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartTooltip.tsx
+var ChartTooltip = ({
+  content,
+  visible = false,
+  x = 0,
+  y = 0,
+  className
+}) => {
+  const tooltipRef = react.useRef(null);
+  const [adjustedPosition, setAdjustedPosition] = react.useState({ x, y });
+  react.useEffect(() => {
+    if (!visible) return;
+    let newX = x + 12;
+    let newY = y - 8;
+    requestAnimationFrame(() => {
+      if (!tooltipRef.current) return;
+      const rect = tooltipRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      if (newX + rect.width > viewportWidth - 8) {
+        newX = x - rect.width - 12;
+      }
+      if (newY + rect.height > viewportHeight - 8) {
+        newY = y - rect.height - 8;
+      }
+      newX = Math.max(8, newX);
+      newY = Math.max(8, newY);
+      setAdjustedPosition({ x: newX, y: newY });
+    });
+    setAdjustedPosition({ x: newX, y: newY });
+  }, [x, y, visible]);
+  const tooltipClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      "fixed z-[9999] pointer-events-none",
+      "px-3 py-2 rounded-md shadow-lg",
+      "bg-[color:var(--tiger-bg-elevated,#1f2937)]",
+      "text-[color:var(--tiger-text-inverse,#f9fafb)]",
+      "text-sm whitespace-nowrap",
+      "transition-opacity duration-150",
+      visible ? "opacity-100" : "opacity-0",
+      className
+    ),
+    [visible, className]
+  );
+  if (!content) return null;
+  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: tooltipRef,
+      className: tooltipClasses,
+      style: {
+        left: `${adjustedPosition.x}px`,
+        top: `${adjustedPosition.y}px`
+      },
+      role: "tooltip",
+      "data-chart-tooltip": "true",
+      children: content
+    }
+  );
+  if (typeof document !== "undefined") {
+    return reactDom.createPortal(tooltip, document.body);
+  }
+  return null;
+};
+var ChartTooltip_default = ChartTooltip;
+
+exports.ChartTooltip = ChartTooltip;
+exports.ChartTooltip_default = ChartTooltip_default;

package/dist/{chunk-7OLWGHUR.mjs → chunk-MF3H7WWW.mjs}

@@ -1,7 +1,7 @@
-import { useEscapeKey } from './chunk-ZO4XVOHU.mjs';
+import { useEscapeKey } from './chunk-WLIFEALE.mjs';
 import React, { useEffect, useCallback, useMemo, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { getModalContentClasses, getModalContainerClasses, resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, classNames, modalMaskClasses, modalHeaderClasses, modalTitleClasses, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { getModalContentClasses, getModalContainerClasses, resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, getFocusableElements, getFocusTrapNavigation, classNames, modalMaskClasses, modalHeaderClasses, modalTitleClasses, modalCloseButtonClasses, modalBodyClasses, modalFooterClasses, modalWrapperClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Modal = ({
@@ -86,6 +86,16 @@ var Modal = ({
     restoreFocus(previousActiveElementRef.current);
   }, [visible]);
   useEscapeKey({ enabled: visible, onEscape: handleClose });
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Tab" && dialogRef.current) {
+      const focusables = getFocusableElements(dialogRef.current);
+      const result = getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
+      if (result.shouldHandle && result.next) {
+        event.preventDefault();
+        result.next.focus();
+      }
+    }
+  }, []);
   const CloseIcon = /* @__PURE__ */ jsx(
     "svg",
     {
@@ -139,6 +149,7 @@ var Modal = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
+            onKeyDown: handleKeyDown,
             "data-tiger-modal": "",
             children: [
               (title || titleContent || closable) && /* @__PURE__ */ jsxs("div", { className: modalHeaderClasses, children: [