import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils.js";
import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
import { tagVariants } from "../Tag/tag.js";
import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
const triggerSize = {
  sm: "h-5 min-w-5",
  md: "h-6 min-w-6",
  lg: "h-6 min-w-6"
};
const triggerText = {
  sm: "text-[10px]",
  md: "text-caption",
  lg: "text-caption"
};
function ShrinkWrapList({ children }) {
  const containerRef = React.useRef(null);
  React.useLayoutEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    let rafId = 0;
    rafId = requestAnimationFrame(() => {
      rafId = 0;
      const cs = getComputedStyle(container);
      const padL = parseFloat(cs.paddingLeft) || 0;
      const padR = parseFloat(cs.paddingRight) || 0;
      const gap = parseFloat(cs.gap) || parseFloat(cs.columnGap) || 0;
      const available = container.offsetWidth - padL - padR;
      const items = Array.from(container.children);
      if (items.length === 0) return;
      let currentRow = 0;
      let maxRow = 0;
      items.forEach((item) => {
        const w = item.offsetWidth;
        const needed = currentRow > 0 ? currentRow + gap + w : w;
        if (needed > available && currentRow > 0) {
          maxRow = Math.max(maxRow, currentRow);
          currentRow = w;
        } else {
          currentRow = needed;
        }
      });
      maxRow = Math.max(maxRow, currentRow);
      container.style.maxWidth = `${Math.ceil(maxRow) + padL + padR + 1}px`;
    });
    return () => {
      if (rafId) cancelAnimationFrame(rafId);
    };
  }, [children]);
  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-wrap gap-1 p-2 max-w-[280px]", children });
}
const OverflowIndicator = React.forwardRef(
  function OverflowIndicator2({ count, shape = "circle", size = "md", children, className, ...props }, ref) {
    if (count <= 0) return null;
    const trigger = shape === "tag" ? /* @__PURE__ */ jsx(
      "span",
      {
        ref,
        "data-overflow-indicator": "",
        tabIndex: 0,
        role: "button",
        "aria-haspopup": "dialog",
        className: cn(tagVariants({ color: "neutral", size }), "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", className),
        ...props,
        children: /* @__PURE__ */ jsxs("span", { className: "px-1", children: [
          "+",
          count
        ] })
      }
    ) : /* @__PURE__ */ jsxs(
      "span",
      {
        ref,
        "data-overflow-indicator": "",
        tabIndex: 0,
        role: "button",
        "aria-haspopup": "dialog",
        className: cn(
          "shrink-0 rounded-full inline-grid place-content-center",
          "bg-muted text-foreground font-medium leading-none cursor-pointer",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
          triggerSize[size],
          triggerText[size],
          className
        ),
        ...props,
        children: [
          "+",
          count
        ]
      }
    );
    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_RICH_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
      /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: trigger }),
      /* @__PURE__ */ jsx(HoverCardContent, { className: "bg-tooltip rounded-lg", "data-theme": "dark", children: /* @__PURE__ */ jsx(ShrinkWrapList, { children }) })
    ] });
  }
);
OverflowIndicator.displayName = "OverflowIndicator";
const overflowIndicatorMeta = {
  component: "OverflowIndicator",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-muted"],
    fg: ["text-foreground"],
    ring: []
  }
};
export {
  OverflowIndicator,
  overflowIndicatorMeta
};
//# sourceMappingURL=overflow-indicator.js.map
