@expcat/tigercat-react 2.0.19 → 2.1.1

package/dist/{chunk-LZKBDQE4.mjs → chunk-MYI3FPG4.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";
@@ -16,6 +16,7 @@ import { useId, useMemo } from "react";
 import {
   classNames,
   computeSunburstArcs,
+  getSunburstLabelPoint,
   getChartElementOpacity,
   getChartInnerRect,
   getStableChartGradientPrefix,
@@ -30,7 +31,7 @@ var SunburstChart = ({
   padding = 24,
   data,
   innerRadiusRatio = 0,
-  showLabels: _showLabels = true,
+  showLabels = true,
   colors,
   gradient = false,
   hoverable = false,
@@ -97,6 +98,7 @@ var SunburstChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -189,11 +191,28 @@ var SunburstChart = ({
             },
             `arc-${arc.index}`
           );
+        }),
+        showLabels && arcs.map((arc) => {
+          const { x, y } = getSunburstLabelPoint(arc, cx, cy);
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x,
+              y,
+              className: "fill-white text-xs",
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: { pointerEvents: "none" },
+              "aria-hidden": "true",
+              children: arc.label
+            },
+            `label-${arc.index}`
+          );
         })
       ] })
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/{chunk-OIGEBCAS.mjs → chunk-NADODEZX.mjs}

@@ -64,6 +64,10 @@ var Signature = forwardRef(
     const canvasRef = useRef(null);
     const strokesRef = useRef([]);
     const activeStrokeRef = useRef(null);
+    const capturedPointerIdRef = useRef(null);
+    const documentPointerListeningRef = useRef(false);
+    const finishStrokeRef = useRef(() => {
+    });
     const [strokes, setStrokes] = useState([]);
     const isDisabled = disabled || readonly;
     const normalizedLineWidth = clampSignatureLineWidth(lineWidth);
@@ -118,9 +122,52 @@ var Signature = forwardRef(
       },
       [createPayload, onChange]
     );
+    const handleDocumentPointerEnd = useRef(() => {
+      finishStrokeRef.current();
+    }).current;
+    const detachDocumentPointerListeners = () => {
+      if (!documentPointerListeningRef.current || typeof document === "undefined") return;
+      document.removeEventListener("pointerup", handleDocumentPointerEnd);
+      document.removeEventListener("pointercancel", handleDocumentPointerEnd);
+      documentPointerListeningRef.current = false;
+    };
+    const attachDocumentPointerListeners = () => {
+      if (documentPointerListeningRef.current || typeof document === "undefined") return;
+      document.addEventListener("pointerup", handleDocumentPointerEnd);
+      document.addEventListener("pointercancel", handleDocumentPointerEnd);
+      documentPointerListeningRef.current = true;
+    };
+    const captureCanvasPointer = (pointerId) => {
+      capturedPointerIdRef.current = pointerId;
+      const canvas = canvasRef.current;
+      if (!canvas || typeof canvas.setPointerCapture !== "function") return;
+      try {
+        canvas.setPointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const releaseCanvasPointer = () => {
+      const canvas = canvasRef.current;
+      const pointerId = capturedPointerIdRef.current;
+      capturedPointerIdRef.current = null;
+      if (!canvas || pointerId == null || typeof canvas.releasePointerCapture !== "function") return;
+      if (typeof canvas.hasPointerCapture === "function") {
+        try {
+          if (!canvas.hasPointerCapture(pointerId)) return;
+        } catch {
+          return;
+        }
+      }
+      try {
+        canvas.releasePointerCapture(pointerId);
+      } catch {
+      }
+    };
     const clear = useCallback(() => {
       strokesRef.current = [];
       activeStrokeRef.current = null;
+      detachDocumentPointerListeners();
+      releaseCanvasPointer();
       setStrokes([]);
       draw([]);
       emitChange([]);
@@ -137,13 +184,23 @@ var Signature = forwardRef(
       [clear, toDataURL, toSVG]
     );
     const getPointFromEvent = (event) => {
-      const rect = event.currentTarget.getBoundingClientRect();
+      const canvas = canvasRef.current;
+      const rect = canvas?.getBoundingClientRect() ?? {
+        left: 0,
+        top: 0,
+        width,
+        height
+      };
       return getSignaturePoint(event.clientX, event.clientY, rect, width, height);
     };
     const handlePointerDown = (event) => {
       if (isDisabled) return;
       event.preventDefault();
       event.currentTarget.focus();
+      const pointerId = event.pointerId;
+      if (typeof pointerId === "number") {
+        captureCanvasPointer(pointerId);
+      }
       const stroke = {
         color: penColor,
         lineWidth: normalizedLineWidth,
@@ -153,6 +210,7 @@ var Signature = forwardRef(
       activeStrokeRef.current = stroke;
       strokesRef.current = nextStrokes;
       setStrokes(nextStrokes);
+      attachDocumentPointerListeners();
       onBegin?.();
     };
     const handlePointerMove = (event) => {
@@ -169,7 +227,16 @@ var Signature = forwardRef(
       activeStrokeRef.current = null;
       const payload = emitChange(strokesRef.current);
       onEnd?.(payload);
+      detachDocumentPointerListeners();
+      releaseCanvasPointer();
     };
+    finishStrokeRef.current = finishStroke;
+    useEffect(() => {
+      return () => {
+        detachDocumentPointerListeners();
+        releaseCanvasPointer();
+      };
+    }, []);
     const handleKeyDown = (event) => {
       if (!clearable || isDisabled) return;
       if (event.key !== "Delete" && event.key !== "Backspace") return;
@@ -192,6 +259,7 @@ var Signature = forwardRef(
           onPointerMove: handlePointerMove,
           onPointerUp: finishStroke,
           onPointerCancel: finishStroke,
+          onLostPointerCapture: finishStroke,
           onKeyDown: handleKeyDown
         }
       ) }),

package/dist/{chunk-KMP5CVNK.mjs → chunk-NJWTZ5MO.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 import {
   ChartLegend
 } from "./chunk-F2ITBDUS.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/RadarChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
@@ -20,7 +20,9 @@ import {
   chartAxisTickTextClasses,
   chartGridLineClasses,
   classNames,
+  createCircleRingPath,
   createPolygonPath,
+  createPolygonRingPath,
   getChartGridLineDasharray,
   getChartInnerRect,
   getRadarAngles,
@@ -121,6 +123,7 @@ var RadarChart = ({
     wrapperClasses
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -142,11 +145,11 @@ var RadarChart = ({
   const [hoveredPoint, setHoveredPoint] = useState(null);
   const handlePointEnter = useCallback(
     (seriesIndex, pointIndex, event) => {
-      if (!hoverable) return;
+      if (!hoverable && !showTooltip) return;
       setHoveredPoint({ seriesIndex, pointIndex });
       handleHoverEnter(seriesIndex, event);
     },
-    [hoverable, handleHoverEnter]
+    [hoverable, showTooltip, handleHoverEnter]
   );
   const handlePointMove = useCallback(
     (event) => {
@@ -422,52 +425,61 @@ var RadarChart = ({
         ] }),
         splitAreaPaths.map((area, index) => {
           if (area.type === "circle-ring") {
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "circle",
+            if (area.innerRadius > 0) {
+              return /* @__PURE__ */ jsx(
+                "path",
                 {
-                  cx: area.cx,
-                  cy: area.cy,
-                  r: area.outerRadius,
+                  d: createCircleRingPath(area.cx, area.cy, area.outerRadius, area.innerRadius),
                   fill: area.color,
                   fillOpacity: splitAreaOpacity,
+                  fillRule: "evenodd",
                   stroke: "none",
                   "data-radar-split-area": "true"
-                }
-              ),
-              area.innerRadius > 0 ? /* @__PURE__ */ jsx(
-                "circle",
-                {
-                  cx: area.cx,
-                  cy: area.cy,
-                  r: area.innerRadius,
-                  fill: "var(--tiger-bg,#fff)",
-                  stroke: "none"
-                }
-              ) : null
-            ] }, `split-${index}`);
-          }
-          const outerPath = createPolygonPath(area.outerPoints);
-          return /* @__PURE__ */ jsxs("g", { children: [
-            outerPath ? /* @__PURE__ */ jsx(
-              "path",
+                },
+                `split-${index}`
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "circle",
               {
-                d: outerPath,
+                cx: area.cx,
+                cy: area.cy,
+                r: area.outerRadius,
                 fill: area.color,
                 fillOpacity: splitAreaOpacity,
                 stroke: "none",
                 "data-radar-split-area": "true"
-              }
-            ) : null,
-            area.innerPoints.length > 0 ? /* @__PURE__ */ jsx(
+              },
+              `split-${index}`
+            );
+          }
+          if (area.innerPoints.length > 0) {
+            const ringPath = createPolygonRingPath(area.outerPoints, area.innerPoints);
+            return ringPath ? /* @__PURE__ */ jsx(
               "path",
               {
-                d: createPolygonPath(area.innerPoints),
-                fill: "var(--tiger-bg,#fff)",
-                stroke: "none"
-              }
-            ) : null
-          ] }, `split-${index}`);
+                d: ringPath,
+                fill: area.color,
+                fillOpacity: splitAreaOpacity,
+                fillRule: "evenodd",
+                stroke: "none",
+                "data-radar-split-area": "true"
+              },
+              `split-${index}`
+            ) : null;
+          }
+          const outerPath = createPolygonPath(area.outerPoints);
+          return outerPath ? /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: outerPath,
+              fill: area.color,
+              fillOpacity: splitAreaOpacity,
+              stroke: "none",
+              "data-radar-split-area": "true"
+            },
+            `split-${index}`
+          ) : null;
         }),
         gridPaths.map(
           (grid, index) => grid.type === "circle" ? /* @__PURE__ */ jsx(
@@ -581,9 +593,9 @@ var RadarChart = ({
                       "data-series-index": seriesIndex,
                       "data-series-key": item.seriesKey,
                       "data-point-index": point.index,
-                      onMouseEnter: showTooltip && hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
-                      onMouseMove: showTooltip && hoverable ? handlePointMove : void 0,
-                      onMouseLeave: showTooltip && hoverable ? handlePointLeave : void 0,
+                      onMouseEnter: showTooltip || hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
+                      onMouseMove: showTooltip || hoverable ? handlePointMove : void 0,
+                      onMouseLeave: showTooltip || hoverable ? handlePointLeave : void 0,
                       onFocus: showTooltip && hoverable ? (e) => showPointTooltipFromElement(e.currentTarget, seriesIndex, point.index) : void 0,
                       onBlur: showTooltip && hoverable ? handlePointLeave : void 0,
                       onKeyDown: showTooltip && hoverable ? (e) => {
@@ -635,7 +647,7 @@ var RadarChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,

package/dist/chunk-NLGLBTSM.mjs

@@ -0,0 +1,138 @@
+import {
+  Button
+} from "./chunk-5TE7KLE5.mjs";
+import {
+  Link
+} from "./chunk-XZVQ3PJS.mjs";
+
+// src/components/PageHeader.tsx
+import { forwardRef, useCallback, useMemo } from "react";
+import {
+  chevronLeftSolidIcon20PathD,
+  composeComponentClasses,
+  getPageHeaderBackButtonClasses,
+  getPageHeaderRootClasses,
+  hasPageHeaderHeadingContent,
+  icon20ViewBox,
+  pageHeaderActionsClasses,
+  pageHeaderBackIconClasses,
+  pageHeaderBackWrapClasses,
+  pageHeaderContentClasses,
+  pageHeaderHeadingRowClasses,
+  pageHeaderMainClasses,
+  pageHeaderStartClasses,
+  pageHeaderSubtitleClasses,
+  pageHeaderTitleClasses,
+  pageHeaderTitleRowClasses,
+  resolvePageHeaderBackAriaLabel,
+  resolvePageHeaderBackVisibility
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: pageHeaderBackIconClasses,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: chevronLeftSolidIcon20PathD, clipRule: "evenodd" })
+    }
+  );
+}
+var PageHeader = forwardRef(
+  ({
+    showBack,
+    backHref,
+    backAriaLabel,
+    title,
+    subTitle,
+    breadcrumb,
+    actions,
+    back,
+    onBack,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const hasBackOverride = back != null && back !== false;
+    const hasBreadcrumb = breadcrumb != null && breadcrumb !== false;
+    const hasTitle = title != null && title !== false && title !== "";
+    const hasSubtitle = subTitle != null && subTitle !== false && subTitle !== "";
+    const hasActions = actions != null && actions !== false;
+    const hasBody = children != null && children !== false;
+    const showBackControl = resolvePageHeaderBackVisibility({
+      showBack,
+      hasHandler: Boolean(onBack),
+      hasBackHref: Boolean(backHref),
+      hasBackOverride
+    });
+    const showHeading = hasPageHeaderHeadingContent({
+      showBack: showBackControl,
+      hasBreadcrumb,
+      hasTitle,
+      hasSubtitle,
+      hasActions
+    });
+    const resolvedBackAriaLabel = resolvePageHeaderBackAriaLabel(backAriaLabel);
+    const rootClasses = useMemo(
+      () => composeComponentClasses(getPageHeaderRootClasses(className)),
+      [className]
+    );
+    const backButtonClasses = useMemo(() => getPageHeaderBackButtonClasses(), []);
+    const handleBack = useCallback(
+      (event) => {
+        onBack?.(event);
+      },
+      [onBack]
+    );
+    const defaultBackControl = backHref ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: backHref,
+        underline: false,
+        variant: "default",
+        className: backButtonClasses,
+        "aria-label": resolvedBackAriaLabel,
+        onClick: handleBack,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        className: backButtonClasses,
+        "aria-label": resolvedBackAriaLabel,
+        onClick: handleBack,
+        children: /* @__PURE__ */ jsx(BackIcon, {})
+      }
+    );
+    return /* @__PURE__ */ jsxs("header", { ...rest, ref, "data-page-header": "", className: rootClasses, style, children: [
+      showHeading ? /* @__PURE__ */ jsxs("div", { className: pageHeaderHeadingRowClasses, "data-page-header-heading": "", children: [
+        /* @__PURE__ */ jsxs("div", { className: pageHeaderStartClasses, children: [
+          showBackControl ? /* @__PURE__ */ jsx("div", { className: pageHeaderBackWrapClasses, "data-page-header-back": "", children: hasBackOverride ? back : defaultBackControl }) : null,
+          hasBreadcrumb || hasTitle || hasSubtitle ? /* @__PURE__ */ jsxs("div", { className: pageHeaderMainClasses, children: [
+            hasBreadcrumb ? breadcrumb : null,
+            hasTitle || hasSubtitle ? /* @__PURE__ */ jsxs("div", { className: pageHeaderTitleRowClasses, children: [
+              hasTitle ? /* @__PURE__ */ jsx("div", { className: pageHeaderTitleClasses, "data-page-header-title": "", children: title }) : null,
+              hasSubtitle ? /* @__PURE__ */ jsx("div", { className: pageHeaderSubtitleClasses, "data-page-header-subtitle": "", children: subTitle }) : null
+            ] }) : null
+          ] }) : null
+        ] }),
+        hasActions ? /* @__PURE__ */ jsx("div", { className: pageHeaderActionsClasses, "data-page-header-actions": "", children: actions }) : null
+      ] }) : null,
+      hasBody ? /* @__PURE__ */ jsx("div", { className: pageHeaderContentClasses, children }) : null
+    ] });
+  }
+);
+PageHeader.displayName = "PageHeader";
+var PageHeader_default = PageHeader;
+
+export {
+  PageHeader,
+  PageHeader_default
+};

package/dist/chunk-NT7GW2FD.mjs

@@ -0,0 +1,40 @@
+// src/components/AspectRatio.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  getAspectRatioContentClasses,
+  getAspectRatioRootClasses,
+  getAspectRatioStyle,
+  ASPECT_RATIO_DEFAULT
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var AspectRatio = forwardRef(
+  ({
+    ratio = ASPECT_RATIO_DEFAULT,
+    className,
+    contentClassName,
+    children,
+    style: styleProp,
+    ...rest
+  }, ref) => {
+    const rootClasses = useMemo(() => getAspectRatioRootClasses(className), [className]);
+    const contentClasses = useMemo(
+      () => getAspectRatioContentClasses(contentClassName),
+      [contentClassName]
+    );
+    const style = useMemo(
+      () => ({
+        ...getAspectRatioStyle(ratio),
+        ...styleProp
+      }),
+      [ratio, styleProp]
+    );
+    return /* @__PURE__ */ jsx("div", { ref, "data-aspect-ratio": "", className: rootClasses, style, ...rest, children: /* @__PURE__ */ jsx("div", { "data-aspect-ratio-content": "", className: contentClasses, children }) });
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var AspectRatio_default = AspectRatio;
+
+export {
+  AspectRatio,
+  AspectRatio_default
+};

package/dist/{chunk-773LH7BK.mjs → chunk-O6VYD4E4.mjs}

@@ -28,11 +28,14 @@ import {
   kanbanSwimlaneCollapsedClasses,
   kanbanAddColumnClasses,
   filterColumns,
+  filterCards,
   groupBySwimlane,
   getColumnCardCount,
   moveCard,
+  mapVisibleCardIndexToSource,
   reorderColumns,
   isWipExceeded,
+  appendDefaultTaskBoardCard,
   createTaskBoardDragController,
   createDefaultDragSnapshot
 } from "@expcat/tigercat-core";
@@ -343,6 +346,17 @@ var TaskBoard = ({
     },
     [onColumnsChange]
   );
+  const consumerOnCardAdd = onCardAdd;
+  const showAddCard = Boolean(allowAddCard || consumerOnCardAdd);
+  const handleCardAdd = useCallback(
+    (columnId) => {
+      if (consumerOnCardAdd == null) {
+        updateColumns(appendDefaultTaskBoardCard(columnsRef.current, columnId));
+      }
+      consumerOnCardAdd?.(columnId);
+    },
+    [consumerOnCardAdd, updateColumns]
+  );
   const [dragSnap, setDragSnap] = useState(createDefaultDragSnapshot);
   const boardRef = useRef(null);
   const beforeCardMoveRef = useRef(beforeCardMove);
@@ -355,9 +369,17 @@ var TaskBoard = ({
   onColumnMoveRef.current = onColumnMove;
   const enforceWipLimitRef = useRef(enforceWipLimit);
   enforceWipLimitRef.current = enforceWipLimit;
+  const filterTextRef = useRef(filterText);
+  filterTextRef.current = filterText;
   const applyCardMove = useCallback(
     async (cardId, fromColumnId, toColumnId, toIdx) => {
-      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, toIdx, {
+      const sourceCol = columnsRef.current.find((c) => c.id === toColumnId);
+      const mappedIdx = sourceCol == null ? toIdx : mapVisibleCardIndexToSource(
+        sourceCol.cards,
+        filterCards(sourceCol.cards, filterTextRef.current),
+        toIdx
+      );
+      const result = moveCard(columnsRef.current, cardId, fromColumnId, toColumnId, mappedIdx, {
         enforceWipLimit: enforceWipLimitRef.current
       });
       if (!result) return;
@@ -442,7 +464,7 @@ var TaskBoard = ({
               renderColumnHeader,
               renderColumnFooter,
               renderEmptyColumn,
-              onCardAdd,
+              onCardAdd: showAddCard ? handleCardAdd : void 0,
               dragType,
               dragCtrl,
               dragStateId,

package/dist/{chunk-G7D4QV7A.mjs → chunk-O7TV5OKS.mjs}

@@ -9,13 +9,28 @@ import {
   floatButtonSizeClasses,
   floatButtonTypeClasses,
   floatButtonDisabledClasses,
-  floatButtonGroupClasses,
+  floatButtonIconSizeClasses,
+  floatButtonPlusIconPath,
+  getFloatButtonGroupClasses,
   getViewportOffsetStyle,
   viewportFloatingBaseClasses,
   viewportPlacementClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var FloatButtonGroupContext = createContext(null);
+var DefaultPlusIcon = ({ size }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: floatButtonIconSizeClasses[size],
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: floatButtonPlusIconPath })
+  }
+);
 var FloatButton = ({
   shape,
   size = "md",
@@ -58,11 +73,11 @@ var FloatButton = ({
       type: "button",
       disabled,
       style: buttonStyle,
-      "aria-label": ariaLabel ?? tooltip,
+      "aria-label": children != null ? ariaLabel ?? tooltip : ariaLabel ?? tooltip ?? "Add",
       title: tooltip,
       onClick: disabled ? void 0 : onClick,
       ...props,
-      children
+      children: children ?? /* @__PURE__ */ jsx(DefaultPlusIcon, { size })
     }
   );
 };
@@ -74,6 +89,10 @@ var FloatButtonGroup = ({
   children,
   className,
   onOpenChange,
+  placement = "bottom-right",
+  offset,
+  portal = true,
+  style,
   ...props
 }) => {
   const groupContextValue = useMemo(() => ({ shape: groupShape }), [groupShape]);
@@ -92,12 +111,20 @@ var FloatButtonGroup = ({
     setInternalOpen(false);
     onOpenChange?.(false);
   }, [onOpenChange]);
-  const groupClasses = useMemo(() => classNames(floatButtonGroupClasses, className), [className]);
-  if (!isBrowser()) return null;
+  const groupClasses = useMemo(
+    () => classNames(getFloatButtonGroupClasses({ placement, portal }), className),
+    [placement, portal, className]
+  );
+  const groupStyle = useMemo(
+    () => ({ ...getViewportOffsetStyle(placement, offset), ...style }),
+    [placement, offset, style]
+  );
+  if (portal && !isBrowser()) return null;
   const content = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: groupClasses,
+      style: groupStyle,
       onMouseEnter: trigger === "hover" ? handleMouseEnter : void 0,
       onMouseLeave: trigger === "hover" ? handleMouseLeave : void 0,
       ...props,
@@ -107,7 +134,7 @@ var FloatButtonGroup = ({
       ]
     }
   ) });
-  return ReactDOM.createPortal(content, document.body);
+  return portal ? ReactDOM.createPortal(content, document.body) : content;
 };
 
 export {