@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/chunk-BPQEM6AF.mjs

@@ -0,0 +1,110 @@
+import {
+  StatusIcon,
+  StatusIconWithLoading
+} from "./chunk-FLYJVZED.mjs";
+
+// src/components/MessageContainer.tsx
+import { useCallback, useEffect, useState } from "react";
+import {
+  ANIMATION_DURATION_MS,
+  classNames,
+  defaultMessageThemeColors,
+  getMessageIconPath,
+  getMessageTypeClasses,
+  messageBaseClasses,
+  messageCloseButtonClasses,
+  messageCloseIconPath,
+  messageContainerBaseClasses,
+  messageContentClasses,
+  messageIconClasses,
+  messageLoadingSpinnerClasses,
+  messagePositionClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MESSAGE_CONTAINER_ID = "tiger-message-container";
+var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
+var MessageItem = ({ message, onClose }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+  const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
+  const messageClasses = classNames(
+    messageBaseClasses,
+    colorScheme.bg,
+    colorScheme.border,
+    colorScheme.text,
+    message.className,
+    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
+  );
+  const iconPath = message.icon || getMessageIconPath(message.type);
+  const iconClass = classNames(messageIconClasses, colorScheme.icon);
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    setTimeout(() => onClose?.(message.id), ANIMATION_DURATION_MS);
+  }, [message.id, onClose]);
+  const a11yRole = message.type === "error" ? "alert" : "status";
+  const ariaLive = message.type === "error" ? "assertive" : "polite";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: messageClasses,
+      role: a11yRole,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      "aria-busy": message.type === "loading" || void 0,
+      "data-tiger-message": true,
+      "data-tiger-message-type": message.type,
+      "data-tiger-message-id": String(message.id),
+      children: [
+        /* @__PURE__ */ jsx(
+          StatusIconWithLoading,
+          {
+            path: iconPath,
+            className: iconClass,
+            isLoading: message.type === "loading",
+            spinnerClass: messageLoadingSpinnerClasses
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: messageContentClasses, children: message.content }),
+        message.closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: messageCloseButtonClasses,
+            onClick: handleClose,
+            "aria-label": MESSAGE_CLOSE_ARIA_LABEL,
+            type: "button",
+            children: /* @__PURE__ */ jsx(StatusIcon, { path: messageCloseIconPath, className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+var MessageContainer = ({
+  position = "top",
+  messages = [],
+  onClose
+}) => {
+  const containerClasses = classNames(messageContainerBaseClasses, messagePositionClasses[position]);
+  const containerId = position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${position}`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      id: containerId,
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      "data-tiger-message-position": position,
+      "data-tiger-message-container": true,
+      children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, onClose }, message.id))
+    }
+  );
+};
+var MessageContainer_default = MessageContainer;
+
+export {
+  MessageContainer,
+  MessageContainer_default
+};

package/dist/{chunk-XBM76P27.mjs → chunk-BSXPB2V6.mjs}

@@ -1,15 +1,15 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
 
 // src/components/PieChart.tsx
 import { useId, useMemo } from "react";
@@ -215,6 +215,8 @@ var PieChart = ({
                   filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
                 },
                 tabIndex: selectable ? 0 : void 0,
+                role: selectable ? "button" : "img",
+                "aria-label": arc.data.label ?? String(arc.value),
                 "data-pie-slice": "true",
                 "data-index": arc.index,
                 onMouseEnter: (e) => handleMouseEnter(arc.index, e),
@@ -286,7 +288,7 @@ var PieChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-I7FEGKX2.mjs → chunk-CR4QBH46.mjs}

@@ -1,18 +1,25 @@
 import {
-  useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+  renderBodyPortal,
+  useBodyScrollLock,
+  useEscapeKey,
+  useFocusTrap
+} from "./chunk-SEWNVIHH.mjs";
 import {
   StatusIcon
 } from "./chunk-FLYJVZED.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
 // src/components/Tour.tsx
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
-import ReactDOM from "react-dom";
 import {
   classNames,
   isBrowser,
-  resolveLocaleText,
   mergeTigerLocale,
+  captureActiveElement,
+  focusFirst,
+  restoreFocus,
   tourPopoverClasses,
   tourTitleClasses,
   tourDescriptionClasses,
@@ -25,6 +32,7 @@ import {
   getActiveTourSteps,
   getCurrentActiveTourStep,
   getActiveTourStepPosition,
+  getTourLabels,
   closeIconPathD
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -50,9 +58,10 @@ var Tour = ({
     () => mergeTigerLocale(config.locale, locale),
     [config.locale, locale]
   );
-  const nextLabel = resolveLocaleText("Next", nextText, mergedLocale?.formWizard?.nextText);
-  const prevLabel = resolveLocaleText("Previous", prevText, mergedLocale?.formWizard?.prevText);
-  const finishLabel = resolveLocaleText("Finish", finishText, mergedLocale?.formWizard?.finishText);
+  const labels = useMemo(
+    () => getTourLabels(mergedLocale, { nextText, prevText, finishText }),
+    [finishText, mergedLocale, nextText, prevText]
+  );
   const [internalStep, setInternalStep] = useState(0);
   const [resolvedSteps, setResolvedSteps] = useState(steps);
   const currentStep = controlledCurrent ?? internalStep;
@@ -65,6 +74,8 @@ var Tour = ({
   const step = activeStepInfo?.step;
   const [targetRect, setTargetRect] = useState();
   const popoverRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
   useEffect(() => {
     if (!loadSteps) {
       setResolvedSteps(steps);
@@ -126,6 +137,19 @@ var Tour = ({
     onOpenChange?.(false);
     onClose?.();
   }, [onOpenChange, onClose]);
+  useEffect(() => {
+    if (open) {
+      previousActiveElementRef.current = captureActiveElement();
+      const timer = setTimeout(() => {
+        focusFirst([closeButtonRef.current, popoverRef.current]);
+      }, 0);
+      return () => clearTimeout(timer);
+    }
+    restoreFocus(previousActiveElementRef.current);
+  }, [open]);
+  useEscapeKey({ enabled: open, onEscape: close });
+  useBodyScrollLock({ enabled: open });
+  useFocusTrap({ enabled: open, containerRef: popoverRef });
   if (!open || !step) return null;
   if (!isBrowser()) return null;
   const placement = step.placement ?? "bottom";
@@ -159,9 +183,10 @@ var Tour = ({
           closable && /* @__PURE__ */ jsx(
             "button",
             {
+              ref: closeButtonRef,
               className: tourCloseButtonClasses,
               type: "button",
-              "aria-label": "Close tour",
+              "aria-label": labels.closeAriaLabel,
               onClick: close,
               children: /* @__PURE__ */ jsx(StatusIcon, { path: closeIconPathD, className: "h-4 w-4" })
             }
@@ -181,7 +206,7 @@ var Tour = ({
                   type: "button",
                   className: "px-3 py-1.5 text-sm rounded-md border border-[var(--tiger-border,#e5e7eb)] text-[var(--tiger-text,#111827)] hover:bg-[var(--tiger-surface-muted,#f9fafb)] transition-colors mr-2",
                   onClick: prev,
-                  children: prevLabel
+                  children: labels.prevText
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -190,7 +215,7 @@ var Tour = ({
                   type: "button",
                   className: "px-3 py-1.5 text-sm rounded-md bg-[var(--tiger-primary,#2563eb)] text-white hover:bg-[var(--tiger-primary-hover,#1d4ed8)] transition-colors",
                   onClick: next,
-                  children: isLast ? finishLabel : nextLabel
+                  children: isLast ? labels.finishText : labels.nextText
                 }
               )
             ] })
@@ -199,7 +224,7 @@ var Tour = ({
       }
     )
   ] });
-  return ReactDOM.createPortal(content, document.body);
+  return renderBodyPortal(content);
 };
 
 export {

package/dist/{chunk-QOEE2PW5.mjs → chunk-D524E52A.mjs}

@@ -1,3 +1,7 @@
+import {
+  useControlledState
+} from "./chunk-MEFARVQI.mjs";
+
 // src/components/Carousel.tsx
 import React, {
   useState,
@@ -40,16 +44,30 @@ var Carousel = forwardRef(
     arrows = false,
     infinite = true,
     speed = 500,
-    initialSlide = 0,
+    currentIndex: controlledCurrentIndex,
+    defaultCurrentIndex = 0,
     pauseOnHover = true,
     pauseOnFocus = true,
     className,
     style,
+    onCurrentIndexChange,
     onChange,
     onBeforeChange,
     children
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = useState(initialSlide);
+    const slides = useMemo(() => {
+      return React.Children.toArray(children).filter((child) => React.isValidElement(child));
+    }, [children]);
+    const slideCount = slides.length;
+    const [currentIndexValue, setCurrentIndexValue] = useControlledState(
+      controlledCurrentIndex,
+      clampSlideIndex(defaultCurrentIndex, slideCount),
+      onCurrentIndexChange
+    );
+    const currentIndex = useMemo(
+      () => clampSlideIndex(currentIndexValue, slideCount),
+      [currentIndexValue, slideCount]
+    );
     const [isPaused, setIsPaused] = useState(false);
     const containerRef = useRef(null);
     const touchStartRef = useRef(null);
@@ -60,20 +78,24 @@ var Carousel = forwardRef(
     onBeforeChangeRef.current = onBeforeChange;
     const currentIndexRef = useRef(currentIndex);
     currentIndexRef.current = currentIndex;
-    const slides = useMemo(() => {
-      return React.Children.toArray(children).filter((child) => React.isValidElement(child));
-    }, [children]);
-    const slideCount = slides.length;
+    const navigateToIndex = useCallback(
+      (index) => {
+        const current = currentIndexRef.current;
+        const clampedIndex = clampSlideIndex(index, slideCount);
+        if (clampedIndex === current) return;
+        onBeforeChangeRef.current?.(current, clampedIndex);
+        setCurrentIndexValue(clampedIndex);
+        onChangeRef.current?.(clampedIndex, current);
+      },
+      [slideCount, setCurrentIndexValue]
+    );
     const navigateByDirection = useCallback(
       (direction) => {
         const current = currentIndexRef.current;
         const targetIndex = direction === "next" ? getNextSlideIndex(current, slideCount, infinite) : getPrevSlideIndex(current, slideCount, infinite);
-        if (targetIndex === current) return;
-        onBeforeChangeRef.current?.(current, targetIndex);
-        setCurrentIndex(targetIndex);
-        onChangeRef.current?.(targetIndex, current);
+        navigateToIndex(targetIndex);
       },
-      [slideCount, infinite]
+      [slideCount, infinite, navigateToIndex]
     );
     const containerClasses = useMemo(
       () => classNames(getCarouselContainerClasses(className)),
@@ -109,14 +131,9 @@ var Carousel = forwardRef(
     }, [dotPosition]);
     const goTo = useCallback(
       (index) => {
-        const clampedIndex = clampSlideIndex(index, slideCount);
-        if (clampedIndex === currentIndex) return;
-        onBeforeChange?.(currentIndex, clampedIndex);
-        const prevIndex = currentIndex;
-        setCurrentIndex(clampedIndex);
-        onChange?.(clampedIndex, prevIndex);
+        navigateToIndex(index);
       },
-      [currentIndex, slideCount, onBeforeChange, onChange]
+      [navigateToIndex]
     );
     const next = useCallback(() => {
       const nextIdx = getNextSlideIndex(currentIndex, slideCount, infinite);
@@ -147,15 +164,13 @@ var Carousel = forwardRef(
           const curr = currentIndexRef.current;
           const nextIdx = getNextSlideIndex(curr, slideCount, infinite);
           if (nextIdx !== curr) {
-            onBeforeChangeRef.current?.(curr, nextIdx);
-            setCurrentIndex(nextIdx);
-            onChangeRef.current?.(nextIdx, curr);
+            navigateToIndex(nextIdx);
           }
         }
       });
       controller.start();
       return () => controller.stop();
-    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite]);
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite, navigateToIndex]);
     useEffect(() => {
       const container = containerRef.current;
       if (!container || slideCount <= 1) return;

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

@@ -43,14 +43,7 @@ var Splitter = ({
     const totalGutter = (paneCount2 - 1) * gutterSize;
     const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
     if (controlledSizes && controlledSizes.length > 0) {
-      if (total > 0) {
-        const sum = controlledSizes.reduce((a, b) => a + b, 0);
-        if (sum > 0) {
-          setPaneSizes(controlledSizes.map((s) => s / sum * total));
-        }
-      } else {
-        setPaneSizes([...controlledSizes]);
-      }
+      setPaneSizes([...controlledSizes]);
     } else {
       if (total > 0) {
         const eachSize = total / paneCount2;

package/dist/chunk-EKILTLUO.mjs

@@ -0,0 +1,222 @@
+import {
+  ChartTooltip
+} from "./chunk-YORCCCQX.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
+
+// src/components/GaugeChart.tsx
+import React, { useId, useMemo, useState, useRef, useEffect } from "react";
+import {
+  classNames,
+  createGaugeArcPath,
+  createGaugeNeedlePath,
+  valueToGaugeAngle,
+  computeGaugeTicks,
+  getChartInnerRect,
+  chartAxisTickTextClasses,
+  getStableChartGradientPrefix,
+  createGaugeAnimation
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GaugeChart = ({
+  width = 280,
+  height = 200,
+  padding = 24,
+  value,
+  min = 0,
+  max = 100,
+  startAngle = 135,
+  endAngle = 405,
+  arcWidth = 20,
+  showTicks = true,
+  tickCount = 5,
+  valueFormatter,
+  tooltipFormatter,
+  label,
+  segments,
+  trackColor = "var(--tiger-border,#e5e7eb)",
+  color = "var(--tiger-primary,#2563eb)",
+  gradient = false,
+  showTooltip = true,
+  title: chartTitle,
+  desc,
+  className
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const radius = useMemo(
+    () => Math.min(innerRect.width, innerRect.height) / 2 - 4,
+    [innerRect.width, innerRect.height]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const needleAngle = useMemo(
+    () => valueToGaugeAngle(value, min, max, startAngle, endAngle),
+    [value, min, max, startAngle, endAngle]
+  );
+  const [animatedAngle, setAnimatedAngle] = useState(needleAngle);
+  const prevAngleRef = useRef(needleAngle);
+  useEffect(() => {
+    const from = prevAngleRef.current;
+    const to = needleAngle;
+    prevAngleRef.current = to;
+    if (from === to) return;
+    const ctrl = createGaugeAnimation({
+      from,
+      to,
+      onUpdate: (v) => setAnimatedAngle(v)
+    });
+    return () => ctrl.stop();
+  }, [needleAngle]);
+  const ticks = useMemo(
+    () => showTicks ? computeGaugeTicks(cx, cy, radius, min, max, startAngle, endAngle, tickCount) : [],
+    [showTicks, cx, cy, radius, min, max, startAngle, endAngle, tickCount]
+  );
+  const trackPath = createGaugeArcPath(cx, cy, radius, startAngle, endAngle, arcWidth);
+  const valuePath = animatedAngle > startAngle ? createGaugeArcPath(cx, cy, radius, startAngle, animatedAngle, arcWidth) : null;
+  const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, animatedAngle);
+  const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
+  const [tooltip, setTooltip] = useState({
+    open: false,
+    x: 0,
+    y: 0
+  });
+  const tooltipContent = tooltipFormatter ? tooltipFormatter(value) : label ? `${label}: ${formattedValue}` : formattedValue;
+  const handleTooltipMove = (e) => {
+    if (!showTooltip) return;
+    setTooltip({ open: true, x: e.clientX, y: e.clientY });
+  };
+  const handleTooltipLeave = () => setTooltip((t) => ({ ...t, open: false }));
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("gauge", gradientId),
+    [gradientId]
+  );
+  const valueGradientId = `${gradientPrefix}-value`;
+  const wrapperRef = useRef(null);
+  const handleTooltipFocus = () => {
+    if (!showTooltip) return;
+    const rect = wrapperRef.current?.getBoundingClientRect();
+    if (rect)
+      setTooltip({ open: true, x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "inline-block relative",
+      tabIndex: showTooltip ? 0 : void 0,
+      role: "img",
+      "aria-label": label ? `${label}: ${formattedValue}` : formattedValue,
+      onMouseMove: handleTooltipMove,
+      onMouseLeave: handleTooltipLeave,
+      onFocus: handleTooltipFocus,
+      onBlur: handleTooltipLeave,
+      children: [
+        /* @__PURE__ */ jsxs(
+          ChartCanvas,
+          {
+            width,
+            height,
+            padding,
+            title: chartTitle,
+            desc,
+            className: classNames(className),
+            children: [
+              gradient && !segments && valuePath && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: valueGradientId, x1: 0, y1: 0, x2: 0, y2: 1, children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+              ] }) }),
+              /* @__PURE__ */ jsx("path", { d: trackPath, fill: trackColor, strokeWidth: 0 }),
+              segments ? segments.map((seg, i) => {
+                const sStart = valueToGaugeAngle(seg.range[0], min, max, startAngle, endAngle);
+                const sEnd = valueToGaugeAngle(seg.range[1], min, max, startAngle, endAngle);
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: createGaugeArcPath(cx, cy, radius, sStart, sEnd, arcWidth),
+                    fill: seg.color,
+                    strokeWidth: 0
+                  },
+                  `seg-${i}`
+                );
+              }) : valuePath && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: valuePath,
+                  fill: gradient ? `url(#${valueGradientId})` : color,
+                  strokeWidth: 0
+                }
+              ),
+              ticks.map((tick, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: tick.x1,
+                    y1: tick.y1,
+                    x2: tick.x2,
+                    y2: tick.y2,
+                    stroke: "var(--tiger-text-secondary,#6b7280)",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: tick.x2 + (tick.x2 - tick.x1) * 1.5,
+                    y: tick.y2 + (tick.y2 - tick.y1) * 1.5,
+                    className: chartAxisTickTextClasses,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    style: { fontSize: "10px" },
+                    children: tick.label
+                  }
+                )
+              ] }, `tick-${i}`)),
+              /* @__PURE__ */ jsx("path", { d: needlePath, fill: "var(--tiger-text,#374151)" }),
+              /* @__PURE__ */ jsx("circle", { cx, cy, r: 5, fill: "var(--tiger-text,#374151)" }),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: cx,
+                  y: cy + radius * 0.35,
+                  className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  children: formattedValue
+                }
+              ),
+              label && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: cx,
+                  y: cy + radius * 0.35 + 20,
+                  className: chartAxisTickTextClasses,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  children: label
+                }
+              )
+            ]
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            content: tooltipContent,
+            open: tooltip.open && tooltipContent !== "",
+            x: tooltip.x,
+            y: tooltip.y
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  GaugeChart
+};

package/dist/{chunk-6BOSSZM3.mjs → chunk-EPWAROC2.mjs}

@@ -1,9 +1,9 @@
 import {
   useCheckboxGroup
-} from "./chunk-MV2JQ6XQ.mjs";
+} from "./chunk-OL3RXYMG.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Checkbox.tsx
 import { useEffect, useRef } from "react";

package/dist/chunk-FNBTGIDG.mjs

@@ -0,0 +1,52 @@
+// src/components/MessageRoot.ts
+var messageModulePromise = null;
+function loadMessageModule() {
+  messageModulePromise ??= import("./components/Message.mjs");
+  return messageModulePromise;
+}
+function forwardMessage(method, options) {
+  let closeMessage = null;
+  let requestedClose = false;
+  void loadMessageModule().then(({ Message: Message2 }) => {
+    const close = Message2[method](options);
+    if (requestedClose) {
+      close();
+    } else {
+      closeMessage = close;
+    }
+  });
+  return () => {
+    if (closeMessage) {
+      closeMessage();
+      closeMessage = null;
+    } else {
+      requestedClose = true;
+    }
+  };
+}
+var Message = {
+  success(options) {
+    return forwardMessage("success", options);
+  },
+  warning(options) {
+    return forwardMessage("warning", options);
+  },
+  error(options) {
+    return forwardMessage("error", options);
+  },
+  info(options) {
+    return forwardMessage("info", options);
+  },
+  loading(options) {
+    return forwardMessage("loading", options);
+  },
+  clear() {
+    void loadMessageModule().then(({ Message: Message2 }) => {
+      Message2.clear();
+    });
+  }
+};
+
+export {
+  Message
+};