@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/{chunk-NCHUEGUW.mjs → chunk-TEVEXDY2.mjs}

@@ -1,6 +1,12 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
@@ -9,16 +15,13 @@ import {
 } from "./chunk-RQSQXQN6.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/LineChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
@@ -29,7 +32,6 @@ import {
   createLinePath,
   createPointScale,
   getChartElementOpacity,
-  getChartInnerRect,
   getStableChartGradientPrefix,
   getNumberExtent,
   linePointTransitionClasses,
@@ -109,9 +111,11 @@ var LineChart = ({
     () => getStableChartGradientPrefix("line", gradientId),
     [gradientId]
   );
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
   );
   const resolvedSeries = useMemo(
     () => resolveSeriesData(series, data, {
@@ -133,6 +137,7 @@ var LineChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -255,17 +260,21 @@ var LineChart = ({
     (seriesIndex, pointIndex, event) => {
       setHoveredPointInfo({ seriesIndex, pointIndex });
       setTooltipPosition({ x: event.clientX, y: event.clientY });
-      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      if (hoverable) {
+        onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      }
     },
-    [onPointHover, resolvedSeries]
+    [hoverable, onPointHover, resolvedSeries]
   );
   const handlePointMouseMove = useCallback((event) => {
     setTooltipPosition({ x: event.clientX, y: event.clientY });
   }, []);
   const handlePointMouseLeave = useCallback(() => {
     setHoveredPointInfo(null);
-    onPointHover?.(null, null, null);
-  }, [onPointHover]);
+    if (hoverable) {
+      onPointHover?.(null, null, null);
+    }
+  }, [hoverable, onPointHover]);
   const showPointTooltipFromElement = useCallback(
     (el, seriesIndex, pointIndex) => {
       if (!hoverable) return;
@@ -293,6 +302,7 @@ var LineChart = ({
     [selectable, handleSeriesSelect]
   );
   const pointClickable = selectable || !!onPointClick;
+  const trackPointHover = showTooltip || hoverable;
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -303,6 +313,7 @@ var LineChart = ({
       title,
       desc,
       className: classNames(className),
+      onResolvedSizeChange,
       children: [
         (seriesData.some((sd) => sd.showArea) || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsx("style", { children: `
@@ -477,9 +488,9 @@ var LineChart = ({
                     tabIndex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
-                    onMouseMove: hoverable ? handlePointMouseMove : void 0,
-                    onMouseLeave: hoverable ? handlePointMouseLeave : void 0,
+                    onMouseEnter: trackPointHover ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMouseMove: trackPointHover ? handlePointMouseMove : void 0,
+                    onMouseLeave: trackPointHover ? handlePointMouseLeave : void 0,
                     onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);

package/dist/{chunk-DJOFM2VO.mjs → chunk-TO6MZFNQ.mjs}

@@ -4,9 +4,11 @@ import {
   classNames,
   getSplitterContainerClasses,
   getSplitterGutterClasses,
+  getSplitterGutterCssVars,
   getSplitterGutterHandleClasses,
   getPaneStyle,
   resizePanes,
+  resolveInitialPaneSizes,
   createDocumentDragSession
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -37,20 +39,21 @@ var Splitter = ({
   useEffect(() => cleanupDragSession, [cleanupDragSession]);
   useEffect(() => {
     const el = containerRef.current;
-    if (!el) return;
     const paneCount2 = React.Children.count(children);
     if (paneCount2 === 0) return;
-    const totalGutter = (paneCount2 - 1) * gutterSize;
-    const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
-    if (controlledSizes && controlledSizes.length > 0) {
-      setPaneSizes([...controlledSizes]);
-    } else {
-      if (total > 0) {
-        const eachSize = total / paneCount2;
-        setPaneSizes(Array.from({ length: paneCount2 }, () => eachSize));
-      }
+    const containerSize = el ? direction === "horizontal" ? el.clientWidth : el.clientHeight : 0;
+    const resolved = resolveInitialPaneSizes(
+      paneCount2,
+      containerSize,
+      gutterSize,
+      controlledSizes,
+      min,
+      max
+    );
+    if (resolved) {
+      setPaneSizes(resolved);
     }
-  }, [children, direction, gutterSize, controlledSizes]);
+  }, [children, direction, gutterSize, controlledSizes, min, max]);
   const paneCount = paneSizes.length;
   const mins = useMemo(() => Array.from({ length: paneCount }, () => min), [paneCount, min]);
   const maxes = useMemo(() => Array.from({ length: paneCount }, () => max), [paneCount, max]);
@@ -136,35 +139,44 @@ var Splitter = ({
     () => classNames(getSplitterContainerClasses(direction, className)),
     [direction, className]
   );
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: containerClasses, style, "data-direction": direction, children: childArray.map((child, i) => {
-    const size = paneSizes[i];
-    const paneStyle = size != null ? getPaneStyle(size, direction) : void 0;
-    const isDragging = draggingIndex === i;
-    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "tiger-splitter-pane relative overflow-auto",
-          style: paneStyle,
-          "data-pane-index": i,
-          children: child
-        }
-      ),
-      i < childArray.length - 1 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: getSplitterGutterClasses(direction, !!isDragging, disabled),
-          role: "separator",
-          "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
-          tabIndex: disabled ? -1 : 0,
-          "data-gutter-index": i,
-          onMouseDown: (e) => handleMouseDown(i, e),
-          onKeyDown: (e) => handleKeyDown(i, e),
-          children: /* @__PURE__ */ jsx("div", { className: getSplitterGutterHandleClasses(direction) })
-        }
-      )
-    ] }, i);
-  }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: containerClasses,
+      style: { ...style, ...getSplitterGutterCssVars(gutterSize) },
+      "data-direction": direction,
+      children: childArray.map((child, i) => {
+        const size = paneSizes[i];
+        const paneStyle = size != null ? getPaneStyle(size, direction) : void 0;
+        const isDragging = draggingIndex === i;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tiger-splitter-pane relative overflow-auto",
+              style: paneStyle,
+              "data-pane-index": i,
+              children: child
+            }
+          ),
+          i < childArray.length - 1 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getSplitterGutterClasses(direction, !!isDragging, disabled),
+              role: "separator",
+              "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+              tabIndex: disabled ? -1 : 0,
+              "data-gutter-index": i,
+              onMouseDown: (e) => handleMouseDown(i, e),
+              onKeyDown: (e) => handleKeyDown(i, e),
+              children: /* @__PURE__ */ jsx("div", { className: getSplitterGutterHandleClasses(direction) })
+            }
+          )
+        ] }, i);
+      })
+    }
+  );
 };
 var Splitter_default = Splitter;
 

package/dist/chunk-TQ6RIFWR.mjs

@@ -0,0 +1,135 @@
+// src/components/Marquee.tsx
+import { forwardRef, useCallback, useState } from "react";
+import {
+  getMarqueeContentClasses,
+  getMarqueeRootClasses,
+  getMarqueeTrackClasses,
+  getMarqueeTrackStyle,
+  injectMarqueeStyles,
+  isMarqueeFocusInside,
+  isMarqueePaused,
+  resolveMarqueeAriaLabel,
+  resolveMarqueeDirection,
+  resolveMarqueePauseOnHover,
+  resolveMarqueeRepeat
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Marquee = forwardRef(
+  ({
+    direction,
+    duration,
+    pauseOnHover,
+    gap,
+    repeat,
+    ariaLabel,
+    className,
+    style,
+    children,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  }, ref) => {
+    injectMarqueeStyles();
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const resolvedDirection = resolveMarqueeDirection(direction);
+    const resolvedPauseOnHover = resolveMarqueePauseOnHover(pauseOnHover);
+    const copies = resolveMarqueeRepeat(repeat);
+    const paused = isMarqueePaused({
+      pauseOnHover: resolvedPauseOnHover,
+      hovered,
+      focused
+    });
+    const { "aria-label": ariaLabelAttr, ...domProps } = rest;
+    const resolvedAriaLabel = resolveMarqueeAriaLabel(
+      typeof ariaLabelAttr === "string" ? ariaLabelAttr : ariaLabel
+    );
+    const handleMouseEnter = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover) setHovered(true);
+        onMouseEnter?.(event);
+      },
+      [onMouseEnter, resolvedPauseOnHover]
+    );
+    const handleMouseLeave = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover) setHovered(false);
+        onMouseLeave?.(event);
+      },
+      [onMouseLeave, resolvedPauseOnHover]
+    );
+    const handleFocus = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover) setFocused(true);
+        onFocus?.(event);
+      },
+      [onFocus, resolvedPauseOnHover]
+    );
+    const handleBlur = useCallback(
+      (event) => {
+        if (resolvedPauseOnHover && !isMarqueeFocusInside(event.currentTarget, event.relatedTarget)) {
+          setFocused(false);
+        }
+        onBlur?.(event);
+      },
+      [onBlur, resolvedPauseOnHover]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...domProps,
+        ref,
+        role: "region",
+        "aria-label": resolvedAriaLabel,
+        "data-marquee": "",
+        "data-marquee-direction": resolvedDirection,
+        "data-marquee-paused": paused ? "true" : "false",
+        "data-marquee-pause-on-hover": resolvedPauseOnHover ? "true" : "false",
+        className: getMarqueeRootClasses({
+          direction: resolvedDirection,
+          pauseOnHover: resolvedPauseOnHover,
+          repeat: copies,
+          className
+        }),
+        style,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-marquee-track": "",
+            className: getMarqueeTrackClasses(resolvedDirection),
+            style: getMarqueeTrackStyle({ duration, gap, repeat: copies }),
+            children: Array.from({ length: copies }, (_, index) => {
+              const clone = index > 0;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: getMarqueeContentClasses({
+                    direction: resolvedDirection,
+                    clone
+                  }),
+                  "data-marquee-content": "",
+                  ...clone ? { "data-marquee-clone": "", "aria-hidden": true } : {},
+                  children
+                },
+                clone ? `clone-${index}` : "content"
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+Marquee.displayName = "Marquee";
+var Marquee_default = Marquee;
+
+export {
+  Marquee,
+  Marquee_default
+};

package/dist/chunk-U4M3DC2P.mjs

@@ -0,0 +1,48 @@
+// src/components/LoadingBarRoot.ts
+var loadingBarModulePromise = null;
+var pendingCommands = [];
+var resolvedApi = null;
+function loadLoadingBarModule() {
+  loadingBarModulePromise ??= import("./components/LoadingBar.mjs");
+  return loadingBarModulePromise;
+}
+function applyCommand(api, command) {
+  if (command.type === "start") {
+    api.start(command.options);
+    return;
+  }
+  api[command.type]();
+}
+function enqueue(command) {
+  if (resolvedApi) {
+    applyCommand(resolvedApi, command);
+    return;
+  }
+  pendingCommands.push(command);
+  void loadLoadingBarModule().then(({ LoadingBar: LoadingBar2 }) => {
+    resolvedApi = LoadingBar2;
+    const queue = pendingCommands;
+    pendingCommands = [];
+    for (const item of queue) {
+      applyCommand(LoadingBar2, item);
+    }
+  });
+}
+var LoadingBar = {
+  start(options) {
+    enqueue({ type: "start", options });
+  },
+  finish() {
+    enqueue({ type: "finish" });
+  },
+  error() {
+    enqueue({ type: "error" });
+  },
+  clear() {
+    enqueue({ type: "clear" });
+  }
+};
+
+export {
+  LoadingBar
+};

package/dist/{chunk-ZCGIZOMT.mjs → chunk-V7HJ5HLC.mjs}

@@ -275,14 +275,11 @@ var ImagePreview = ({
     },
     [handleNext, handlePrev, touchSwipeThreshold]
   );
-  const handleMaskClick = useCallback(
-    (e) => {
-      if (maskClosable && e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [maskClosable, handleClose]
-  );
+  const handleMaskClick = useCallback(() => {
+    if (maskClosable) {
+      handleClose();
+    }
+  }, [maskClosable, handleClose]);
   const transform = useMemo(
     () => `${calculateTransform(scale, offsetX, offsetY)} rotate(${rotation}deg)`,
     [scale, offsetX, offsetY, rotation]
@@ -298,10 +295,9 @@ var ImagePreview = ({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": labels.previewDialogAriaLabel,
-        onClick: handleMaskClick,
         onWheel: handleWheel,
         children: [
-          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true", onClick: handleMaskClick }),
           /* @__PURE__ */ jsx(
             "img",
             {

package/dist/{chunk-SIDDYP3O.mjs → chunk-VJWSKJLJ.mjs}

@@ -1,6 +1,6 @@
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 
 // src/components/OrgChart.tsx
 import { useMemo, useState } from "react";

package/dist/{chunk-ZG56T75O.mjs → chunk-WTHWLCRL.mjs}

@@ -3,9 +3,10 @@ import {
 } from "./chunk-HKAZXG74.mjs";
 
 // src/utils/use-popup.ts
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   buildTriggerHandlerMap,
+  createFloatingHoverDelayController,
   restoreFocus
 } from "@expcat/tigercat-core";
 function usePopup(options) {
@@ -33,6 +34,18 @@ function usePopup(options) {
     },
     [disabled, isControlled, onOpenChange]
   );
+  const setVisibleRef = useRef(setVisible);
+  setVisibleRef.current = setVisible;
+  const hoverControllerRef = useRef(
+    null
+  );
+  if (hoverControllerRef.current === null) {
+    hoverControllerRef.current = createFloatingHoverDelayController({
+      show: () => setVisibleRef.current(true),
+      hide: () => setVisibleRef.current(false)
+    });
+  }
+  const hoverController = hoverControllerRef.current;
   const restoreTriggerFocus = useCallback(() => {
     const trigger2 = triggerRef.current;
     const target = trigger2?.querySelector(
@@ -43,19 +56,32 @@ function usePopup(options) {
     }, 0);
   }, []);
   const closeAndRestoreFocus = useCallback(() => {
-    setVisible(false);
+    hoverController.closeNow();
     restoreTriggerFocus();
-  }, [restoreTriggerFocus, setVisible]);
+  }, [hoverController, restoreTriggerFocus]);
+  const effectiveTrigger = multiTrigger ? trigger : "click";
   const handleToggle = useCallback(() => {
-    if (!disabled) setVisible(!currentVisible);
-  }, [disabled, currentVisible, setVisible]);
+    if (disabled) return;
+    hoverController.cancel();
+    setVisible(!currentVisible);
+  }, [disabled, currentVisible, setVisible, hoverController]);
   const handleShow = useCallback(() => {
-    if (!disabled) setVisible(true);
-  }, [disabled, setVisible]);
+    if (disabled) return;
+    if (effectiveTrigger === "hover") {
+      hoverController.enter();
+      return;
+    }
+    hoverController.cancel();
+    setVisible(true);
+  }, [disabled, effectiveTrigger, setVisible, hoverController]);
   const handleHide = useCallback(() => {
-    if (!disabled) setVisible(false);
-  }, [disabled, setVisible]);
-  const effectiveTrigger = multiTrigger ? trigger : "click";
+    if (disabled) return;
+    if (effectiveTrigger === "hover") {
+      hoverController.leave();
+      return;
+    }
+    hoverController.closeNow();
+  }, [disabled, effectiveTrigger, hoverController]);
   const overlay = useAnchoredOverlay({
     enabled: currentVisible,
     referenceRef: triggerRef,
@@ -69,10 +95,24 @@ function usePopup(options) {
       if (reason === "escape") {
         closeAndRestoreFocus();
       } else {
-        setVisible(false);
+        hoverController.closeNow();
       }
     }
   });
+  useEffect(() => {
+    if (!multiTrigger || effectiveTrigger !== "hover" || !currentVisible) return;
+    const el = floatingRef.current;
+    if (!el) return;
+    const handleEnter = () => hoverController.enter();
+    const handleLeave = () => hoverController.leave();
+    el.addEventListener("mouseenter", handleEnter);
+    el.addEventListener("mouseleave", handleLeave);
+    return () => {
+      el.removeEventListener("mouseenter", handleEnter);
+      el.removeEventListener("mouseleave", handleLeave);
+    };
+  }, [multiTrigger, effectiveTrigger, currentVisible, hoverController]);
+  useEffect(() => () => hoverController.dispose(), [hoverController]);
   const triggerHandlers = useMemo(() => {
     if (!multiTrigger) {
       return { onClick: handleToggle };

package/dist/{chunk-KP6DEYWB.mjs → chunk-X4L3W7RQ.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-ZG56T75O.mjs";
+} from "./chunk-WTHWLCRL.mjs";
 import {
   renderOverlayPortal
 } from "./chunk-HKAZXG74.mjs";

package/dist/{chunk-ZMRTETN2.mjs → chunk-X6C6MNG5.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
@@ -87,6 +87,7 @@ var TreeMapChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -200,7 +201,7 @@ var TreeMapChart = ({
       ] })
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/chunk-XT43B7ZI.mjs

@@ -0,0 +1,58 @@
+// src/components/LoadingBarContainer.tsx
+import {
+  DEFAULT_LOADING_BAR_ARIA_LABEL,
+  DEFAULT_LOADING_BAR_COLOR,
+  DEFAULT_LOADING_BAR_HEIGHT,
+  getLoadingBarContainerClasses,
+  getLoadingBarFillClasses,
+  getLoadingBarFillStyle,
+  LOADING_BAR_CONTAINER_ID
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var LoadingBarContainer = ({
+  percentage = 0,
+  status = "idle",
+  color = DEFAULT_LOADING_BAR_COLOR,
+  height = DEFAULT_LOADING_BAR_HEIGHT,
+  className,
+  style,
+  ariaLabel,
+  ...rest
+}) => {
+  const isBusy = status === "loading";
+  const resolvedAriaLabel = ariaLabel?.trim() || DEFAULT_LOADING_BAR_ARIA_LABEL;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      id: LOADING_BAR_CONTAINER_ID,
+      className: getLoadingBarContainerClasses(className),
+      style: { ...style, height: `${height}px` },
+      "data-tiger-loading-bar-container": "",
+      "data-tiger-loading-bar-status": status,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getLoadingBarFillClasses(status, color),
+          style: getLoadingBarFillStyle(percentage, height),
+          role: "progressbar",
+          "aria-label": resolvedAriaLabel,
+          "aria-valuemin": 0,
+          "aria-valuemax": 100,
+          "aria-valuenow": Math.round(percentage),
+          "aria-busy": isBusy || void 0,
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          "data-tiger-loading-bar": "",
+          "data-tiger-loading-bar-status": status
+        }
+      )
+    }
+  );
+};
+var LoadingBarContainer_default = LoadingBarContainer;
+
+export {
+  LoadingBarContainer,
+  LoadingBarContainer_default
+};