@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-NQNHM4OL.mjs

@@ -0,0 +1,330 @@
+import {
+  useChartInteraction
+} from "./chunk-6QML6T3Y.mjs";
+import {
+  ChartTooltip
+} from "./chunk-NASC6XHN.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
+
+// src/components/HeatmapChart.tsx
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  computeHeatmapCells,
+  getHeatmapCellIndexAtPoint,
+  getChartElementOpacity,
+  getChartInnerRect,
+  resolveHeatmapRenderMode,
+  resolveChartTooltipContent,
+  chartAxisTickTextClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HeatmapChart = ({
+  width = 400,
+  height = 300,
+  padding = 40,
+  data,
+  xLabels,
+  yLabels,
+  minColor = "#f0f9ff",
+  maxColor = "#2563eb",
+  colorSpace = "rgb",
+  cellRadius = 2,
+  cellGap = 1,
+  showValues = false,
+  valueFormatter,
+  renderMode = "auto",
+  canvasThreshold,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showTooltip = true,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onCellClick,
+  onCellHover
+}) => {
+  const canvasRef = useRef(null);
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onCellHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onCellClick }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const cells = useMemo(
+    () => computeHeatmapCells(data, {
+      xLabels,
+      yLabels,
+      width: innerRect.width,
+      height: innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    }),
+    [
+      data,
+      xLabels,
+      yLabels,
+      innerRect.width,
+      innerRect.height,
+      cellGap,
+      minColor,
+      maxColor,
+      colorSpace
+    ]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, cells, void 0, (cell) => {
+      const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
+      return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
+    }),
+    [resolvedHoveredIndex, cells, valueFormatter]
+  );
+  const interactive = hoverable || selectable;
+  const rect = innerRect;
+  const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
+  const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
+  const resolvedRenderMode = resolveHeatmapRenderMode(cells.length, {
+    renderMode,
+    canvasThreshold
+  });
+  const shouldRenderCanvas = resolvedRenderMode === "canvas";
+  useEffect(() => {
+    if (!shouldRenderCanvas) return;
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    context.clearRect(0, 0, rect.width, rect.height);
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    context.font = "10px sans-serif";
+    cells.forEach((cell, idx) => {
+      context.globalAlpha = getChartElementOpacity(idx, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      }) ?? 1;
+      context.fillStyle = cell.fill;
+      const radius = Math.max(0, Math.min(cellRadius, cell.w / 2, cell.h / 2));
+      if (radius > 0) {
+        context.beginPath();
+        context.moveTo(cell.x + radius, cell.y);
+        context.lineTo(cell.x + cell.w - radius, cell.y);
+        context.quadraticCurveTo(cell.x + cell.w, cell.y, cell.x + cell.w, cell.y + radius);
+        context.lineTo(cell.x + cell.w, cell.y + cell.h - radius);
+        context.quadraticCurveTo(
+          cell.x + cell.w,
+          cell.y + cell.h,
+          cell.x + cell.w - radius,
+          cell.y + cell.h
+        );
+        context.lineTo(cell.x + radius, cell.y + cell.h);
+        context.quadraticCurveTo(cell.x, cell.y + cell.h, cell.x, cell.y + cell.h - radius);
+        context.lineTo(cell.x, cell.y + radius);
+        context.quadraticCurveTo(cell.x, cell.y, cell.x + radius, cell.y);
+        context.closePath();
+        context.fill();
+      } else {
+        context.fillRect(cell.x, cell.y, cell.w, cell.h);
+      }
+      if (showValues) {
+        context.globalAlpha = 1;
+        context.fillStyle = "var(--tiger-text,#374151)";
+        context.fillText(
+          valueFormatter ? valueFormatter(cell.value) : `${cell.value}`,
+          cell.x + cell.w / 2,
+          cell.y + cell.h / 2
+        );
+      }
+    });
+    context.globalAlpha = 1;
+  }, [
+    shouldRenderCanvas,
+    cells,
+    rect.width,
+    rect.height,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity,
+    cellRadius,
+    showValues,
+    valueFormatter
+  ]);
+  const getCanvasPoint = useCallback((event) => {
+    const canvas = event.currentTarget;
+    const bounds = canvas.getBoundingClientRect();
+    const nativeEvent = event.nativeEvent;
+    const offsetX = typeof nativeEvent.offsetX === "number" && Number.isFinite(nativeEvent.offsetX) ? nativeEvent.offsetX : event.clientX - bounds.left;
+    const offsetY = typeof nativeEvent.offsetY === "number" && Number.isFinite(nativeEvent.offsetY) ? nativeEvent.offsetY : event.clientY - bounds.top;
+    const scaleX = bounds.width > 0 ? canvas.width / bounds.width : 1;
+    const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
+    return { x: offsetX * scaleX, y: offsetY * scaleY };
+  }, []);
+  const handleCanvasMouseMove = useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index === null) {
+        handleMouseLeave();
+        return;
+      }
+      handleMouseEnter(index, event);
+      handleMouseMove(event);
+    },
+    [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
+  );
+  const handleCanvasClick = useCallback(
+    (event) => {
+      const point = getCanvasPoint(event);
+      const index = getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      if (index !== null) {
+        handleClick(index);
+      }
+    },
+    [cells, getCanvasPoint, handleClick]
+  );
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        xLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: i * (cellW + cellGap) + cellW / 2,
+            y: rect.height + 16,
+            className: chartAxisTickTextClasses,
+            textAnchor: "middle",
+            children: lbl
+          },
+          `x-${i}`
+        )),
+        yLabels.map((lbl, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: -8,
+            y: i * (cellH + cellGap) + cellH / 2,
+            className: chartAxisTickTextClasses,
+            textAnchor: "end",
+            dominantBaseline: "middle",
+            children: lbl
+          },
+          `y-${i}`
+        )),
+        !shouldRenderCanvas && cells.map((cell, idx) => {
+          const opacity = getChartElementOpacity(idx, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: cell.x,
+                y: cell.y,
+                width: cell.w,
+                height: cell.h,
+                rx: cellRadius,
+                fill: cell.fill,
+                opacity,
+                className: classNames(interactive && "cursor-pointer"),
+                style: {
+                  transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
+                  rx: `var(--tiger-chart-block-radius, ${cellRadius}px)`
+                },
+                onMouseEnter: (e) => handleMouseEnter(idx, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(idx)
+              }
+            ),
+            showValues && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: cell.x + cell.w / 2,
+                y: cell.y + cell.h / 2,
+                className: "fill-[color:var(--tiger-text,#374151)] text-[10px]",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                children: valueFormatter ? valueFormatter(cell.value) : `${cell.value}`
+              }
+            )
+          ] }, `cell-${idx}`);
+        })
+      ]
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+    chart,
+    shouldRenderCanvas && /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        width: rect.width,
+        height: rect.height,
+        "data-heatmap-canvas": "true",
+        "data-heatmap-render-mode": resolvedRenderMode,
+        className: classNames(interactive && "cursor-pointer"),
+        style: {
+          position: "absolute",
+          left: `${rect.x}px`,
+          top: `${rect.y}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`,
+          pointerEvents: interactive ? "auto" : "none"
+        },
+        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onClick: interactive ? handleCanvasClick : void 0
+      }
+    ),
+    tooltip
+  ] });
+};
+
+export {
+  HeatmapChart
+};

package/dist/chunk-NRLGZRK2.js

@@ -0,0 +1,227 @@
+"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; }// src/components/CronEditor.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var modeOptions = [
+  { label: "Any", value: "any" },
+  { label: "Every", value: "every" },
+  { label: "Specific", value: "specific" },
+  { label: "Range", value: "range" },
+  { label: "Custom", value: "custom" }
+];
+var CronEditor = ({
+  value,
+  defaultValue = _tigercatcore.defaultCronExpression,
+  disabled = false,
+  readonly = false,
+  size = "md",
+  presets = _tigercatcore.defaultCronPresets,
+  ariaLabel = "Cron editor",
+  className,
+  onChange,
+  onValidate
+}) => {
+  const [innerValue, setInnerValue] = _react.useState.call(void 0, defaultValue);
+  const expression = _nullishCoalesce(value, () => ( innerValue));
+  const validation = _react.useMemo.call(void 0, () => _tigercatcore.validateCronExpression.call(void 0, expression), [expression]);
+  const inactive = disabled || readonly;
+  function commit(nextValue) {
+    const normalized = _tigercatcore.normalizeCronExpression.call(void 0, nextValue);
+    const nextValidation = _tigercatcore.validateCronExpression.call(void 0, normalized);
+    if (value === void 0) setInnerValue(normalized);
+    _optionalChain([onChange, 'optionalCall', _ => _(normalized, nextValidation)]);
+    _optionalChain([onValidate, 'optionalCall', _2 => _2(nextValidation)]);
+  }
+  function handleRawExpressionChange(nextValue) {
+    const nextValidation = _tigercatcore.validateCronExpression.call(void 0, nextValue);
+    if (value === void 0) setInnerValue(nextValue);
+    _optionalChain([onChange, 'optionalCall', _3 => _3(nextValue, nextValidation)]);
+    _optionalChain([onValidate, 'optionalCall', _4 => _4(nextValidation)]);
+  }
+  function handleFieldRawChange(meta, raw) {
+    commit(_tigercatcore.updateCronExpressionField.call(void 0, expression, meta.key, raw));
+  }
+  function handleModeChange(meta, control, mode) {
+    const nextControl = {
+      ...control,
+      mode,
+      value: _nullishCoalesce(control.value, () => ( meta.min)),
+      start: _nullishCoalesce(control.start, () => ( meta.min)),
+      end: _nullishCoalesce(control.end, () => ( meta.max)),
+      step: _nullishCoalesce(control.step, () => ( 1))
+    };
+    handleFieldRawChange(meta, _tigercatcore.buildCronFieldValue.call(void 0, nextControl, meta));
+  }
+  function renderFieldControl(meta, control) {
+    if (control.mode === "any") return null;
+    if (control.mode === "every") {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          type: "number",
+          min: 1,
+          max: meta.max,
+          className: _tigercatcore.getCronEditorControlClasses.call(void 0, size),
+          value: _nullishCoalesce(control.step, () => ( 1)),
+          disabled: inactive,
+          "aria-label": `${meta.label} step`,
+          onChange: (event) => handleFieldRawChange(
+            meta,
+            _tigercatcore.buildCronFieldValue.call(void 0, { ...control, step: Number(event.target.value) }, meta)
+          )
+        }
+      );
+    }
+    if (control.mode === "specific") {
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "input",
+        {
+          type: "number",
+          min: meta.min,
+          max: meta.max,
+          className: _tigercatcore.getCronEditorControlClasses.call(void 0, size),
+          value: _nullishCoalesce(control.value, () => ( meta.min)),
+          disabled: inactive,
+          "aria-label": `${meta.label} value`,
+          onChange: (event) => handleFieldRawChange(
+            meta,
+            _tigercatcore.buildCronFieldValue.call(void 0, { ...control, value: Number(event.target.value) }, meta)
+          )
+        }
+      );
+    }
+    if (control.mode === "range") {
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-2 gap-1", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            type: "number",
+            min: meta.min,
+            max: meta.max,
+            className: _tigercatcore.getCronEditorControlClasses.call(void 0, size),
+            value: _nullishCoalesce(control.start, () => ( meta.min)),
+            disabled: inactive,
+            "aria-label": `${meta.label} range start`,
+            onChange: (event) => handleFieldRawChange(
+              meta,
+              _tigercatcore.buildCronFieldValue.call(void 0, { ...control, start: Number(event.target.value) }, meta)
+            )
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "input",
+          {
+            type: "number",
+            min: meta.min,
+            max: meta.max,
+            className: _tigercatcore.getCronEditorControlClasses.call(void 0, size),
+            value: _nullishCoalesce(control.end, () => ( meta.max)),
+            disabled: inactive,
+            "aria-label": `${meta.label} range end`,
+            onChange: (event) => handleFieldRawChange(
+              meta,
+              _tigercatcore.buildCronFieldValue.call(void 0, { ...control, end: Number(event.target.value) }, meta)
+            )
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        type: "text",
+        className: _tigercatcore.getCronEditorControlClasses.call(void 0, size),
+        value: control.raw,
+        disabled: inactive,
+        "aria-label": `${meta.label} custom value`,
+        onChange: (event) => handleFieldRawChange(meta, event.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: _tigercatcore.classNames.call(void 0, _tigercatcore.cronEditorBaseClasses, className),
+      role: "group",
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              type: "text",
+              className: _tigercatcore.classNames.call(void 0, _tigercatcore.getCronEditorControlClasses.call(void 0, size, !validation.valid), "flex-1"),
+              value: expression,
+              disabled,
+              readOnly: readonly,
+              "aria-label": "Cron expression",
+              onChange: (event) => handleRawExpressionChange(event.target.value)
+            }
+          ),
+          presets.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "select",
+            {
+              className: _tigercatcore.getCronEditorControlClasses.call(void 0, size),
+              value: presets.some((preset) => preset.value === expression) ? expression : "",
+              disabled: inactive,
+              "aria-label": "Cron preset",
+              onChange: (event) => {
+                if (event.target.value) commit(event.target.value);
+              },
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: "Preset" }),
+                presets.map((preset) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: preset.value, children: preset.label }, preset.value))
+              ]
+            }
+          )
+        ] }),
+        validation.issues.filter((issue) => issue.field === "expression").map((issue) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.cronEditorErrorClasses, children: issue.message }, issue.message)),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.cronEditorFieldsClasses, children: _tigercatcore.cronFieldMetas.map((meta) => {
+          const raw = _tigercatcore.getCronFieldValue.call(void 0, expression, meta.key);
+          const control = _tigercatcore.parseCronFieldControl.call(void 0, raw);
+          const issue = _tigercatcore.getCronFieldIssue.call(void 0, validation, meta.key);
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.cronEditorFieldClasses, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: _tigercatcore.cronEditorLabelClasses, children: meta.label }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "select",
+              {
+                className: _tigercatcore.getCronEditorControlClasses.call(void 0, size, !!issue),
+                value: control.mode,
+                disabled: inactive,
+                "aria-label": `${meta.label} mode`,
+                onChange: (event) => handleModeChange(meta, control, event.target.value),
+                children: modeOptions.map((mode) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: mode.value, children: mode.label }, mode.value))
+              }
+            ),
+            renderFieldControl(meta, control),
+            issue && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.cronEditorErrorClasses, children: issue.message })
+          ] }, meta.key);
+        }) })
+      ]
+    }
+  );
+};
+var CronEditor_default = CronEditor;
+
+
+
+
+exports.CronEditor = CronEditor; exports.CronEditor_default = CronEditor_default;

package/dist/{chunk-WAIXKROS.mjs → chunk-NSEO2B74.mjs}

@@ -1,8 +1,16 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { scrollToTop, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, getScrollTop, backTopIconPath } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/BackTop.tsx
+import { useState, useEffect, useCallback, useMemo } from "react";
+import {
+  classNames,
+  createBackTopVisibilityController,
+  scrollToTop,
+  backTopButtonClasses,
+  backTopContainerClasses,
+  backTopHiddenClasses,
+  backTopVisibleClasses,
+  backTopIconPath
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var DefaultIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -16,9 +24,10 @@ var DefaultIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: backTopIconPath })
   }
 );
+var getDefaultTarget = () => window;
 var BackTop = ({
   visibilityHeight = 400,
-  target = () => window,
+  target = getDefaultTarget,
   duration = 450,
   onClick,
   children,
@@ -30,13 +39,16 @@ var BackTop = ({
   useEffect(() => {
     const el = target();
     if (!el) return;
-    const onScroll = () => {
-      setVisible(getScrollTop(el) >= visibilityHeight);
-    };
-    el.addEventListener("scroll", onScroll, { passive: true });
-    onScroll();
+    const visibilityController = createBackTopVisibilityController({
+      target: el,
+      getVisibilityHeight: () => visibilityHeight,
+      onChange: setVisible
+    });
+    el.addEventListener("scroll", visibilityController.schedule, { passive: true });
+    visibilityController.update();
     return () => {
-      el.removeEventListener("scroll", onScroll);
+      el.removeEventListener("scroll", visibilityController.schedule);
+      visibilityController.cancel();
     };
   }, [target, visibilityHeight]);
   const handleClick = useCallback(
@@ -70,4 +82,7 @@ var BackTop = ({
 };
 var BackTop_default = BackTop;
 
-export { BackTop, BackTop_default };
+export {
+  BackTop,
+  BackTop_default
+};

package/dist/{chunk-VONFSF4S.mjs → chunk-O4UDB6ZE.mjs}

@@ -1,8 +1,22 @@
-import { usePopup } from './chunk-AMOH5AMN.mjs';
-import { useRef, useMemo } from 'react';
-import { createFloatingIdFactory, classNames, getPopoverContainerClasses, getPopoverTriggerClasses, getPopoverContentClasses, POPOVER_TITLE_CLASSES, POPOVER_TEXT_CLASSES } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  usePopup
+} from "./chunk-4XOWNEZA.mjs";
+import {
+  renderBodyPortal
+} from "./chunk-SEWNVIHH.mjs";
 
+// src/components/Popover.tsx
+import { useMemo, useRef } from "react";
+import {
+  classNames,
+  createFloatingIdFactory,
+  getPopoverContainerClasses,
+  getPopoverTriggerClasses,
+  getPopoverContentClasses,
+  POPOVER_TITLE_CLASSES,
+  POPOVER_TEXT_CLASSES
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var createPopoverId = createFloatingIdFactory("popover");
 var Popover = ({
   open,
@@ -49,22 +63,26 @@ var Popover = ({
         children
       }
     ),
-    currentVisible && /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: popoverId,
-        role: "dialog",
-        "aria-modal": "false",
-        "aria-labelledby": hasTitle ? titleId : void 0,
-        "aria-describedby": hasContent ? contentId : void 0,
-        className: contentClasses,
-        children: [
-          hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: POPOVER_TITLE_CLASSES, children: titleContent || title }),
-          hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: POPOVER_TEXT_CLASSES, children: contentContent || content })
-        ]
-      }
-    ) })
+    currentVisible && renderBodyPortal(
+      /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          id: popoverId,
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": hasTitle ? titleId : void 0,
+          "aria-describedby": hasContent ? contentId : void 0,
+          className: contentClasses,
+          children: [
+            hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: POPOVER_TITLE_CLASSES, children: titleContent || title }),
+            hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: POPOVER_TEXT_CLASSES, children: contentContent || content })
+          ]
+        }
+      ) })
+    )
   ] });
 };
 
-export { Popover };
+export {
+  Popover
+};