@fluix-ui/react 0.0.2

package/dist/index.cjs

@@ -0,0 +1,760 @@
+'use strict';
+
+var core = require('@fluix-ui/core');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/index.ts
+function DefaultIcon({ state }) {
+  switch (state) {
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+        }
+      );
+    case "error":
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ]
+        }
+      );
+    case "warning":
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+          ]
+        }
+      );
+    case "info":
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+          ]
+        }
+      );
+    case "loading":
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          "data-fluix-icon": "spin",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "2", x2: "12", y2: "6" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "18", x2: "12", y2: "22" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "4.93", x2: "7.76", y2: "7.76" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16.24", y1: "16.24", x2: "19.07", y2: "19.07" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "12", x2: "6", y2: "12" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "12", x2: "22", y2: "12" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "7.76", y2: "16.24" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16.24", y1: "7.76", x2: "19.07", y2: "4.93" })
+          ]
+        }
+      );
+    case "action":
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "10 8 16 12 10 16 10 8", fill: "currentColor", stroke: "none" })
+          ]
+        }
+      );
+    default:
+      return null;
+  }
+}
+function renderToastIcon(icon, state) {
+  if (icon != null) {
+    if (typeof icon === "object" && icon !== null && "type" in icon) {
+      return icon;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: String(icon) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, { state });
+}
+
+// src/toast.root-vars.ts
+function getToastRootVars(input) {
+  return {
+    "--_h": `${input.open ? input.expanded : input.height}px`,
+    "--_pw": `${input.resolvedPillWidth}px`,
+    "--_px": `${input.pillX}px`,
+    "--_ht": `translateY(${input.open ? input.edge === "bottom" ? 3 : -3 : 0}px) scale(${input.open ? 0.9 : 1})`,
+    "--_co": `${input.open ? 1 : 0}`,
+    "--_cy": `${input.open ? 0 : -14}px`,
+    "--_cm": `${input.open ? input.expandedContent : 0}px`,
+    "--_by": `${input.open ? input.height - input.bodyMergeOverlap : input.height}px`,
+    "--_bh": `${input.open ? input.expandedContent : 0}px`,
+    "--_bo": `${input.open ? 1 : 0}`
+  };
+}
+
+// src/toast.viewport-offset.ts
+function resolveOffsetValue(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function resolveSides(offset) {
+  if (offset == null) return {};
+  if (typeof offset === "number" || typeof offset === "string") {
+    const value = resolveOffsetValue(offset);
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  const top = offset.top != null ? resolveOffsetValue(offset.top) : void 0;
+  const right = offset.right != null ? resolveOffsetValue(offset.right) : void 0;
+  const bottom = offset.bottom != null ? resolveOffsetValue(offset.bottom) : void 0;
+  const left = offset.left != null ? resolveOffsetValue(offset.left) : void 0;
+  return { top, right, bottom, left };
+}
+function getViewportOffsetStyle(offset, position) {
+  const sides = resolveSides(offset);
+  const style = {};
+  if (position.startsWith("top") && sides.top) style.top = sides.top;
+  if (position.startsWith("bottom") && sides.bottom) style.bottom = sides.bottom;
+  if (position.endsWith("right") && sides.right) style.right = sides.right;
+  if (position.endsWith("left") && sides.left) style.left = sides.left;
+  if (position.endsWith("center")) {
+    if (sides.left) style.paddingLeft = sides.left;
+    if (sides.right) style.paddingRight = sides.right;
+  }
+  return style;
+}
+var WIDTH = 350;
+var HEIGHT = 40;
+var PILL_PADDING = 10;
+var MIN_EXPAND_RATIO = 2.25;
+var HEADER_EXIT_MS = 600 * 0.7;
+var BODY_MERGE_OVERLAP = 6;
+function getPillAlign(position) {
+  if (position.includes("right")) return "right";
+  if (position.includes("center")) return "center";
+  return "left";
+}
+function ToastItem({
+  item,
+  machine,
+  localState,
+  onLocalStateChange
+}) {
+  const rootRef = react.useRef(null);
+  const headerRef = react.useRef(null);
+  const innerRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const pillRef = react.useRef(null);
+  const connectCleanupRef = react.useRef(null);
+  const hoveringRef = react.useRef(false);
+  const pendingDismissRef = react.useRef(false);
+  const dismissRequestedRef = react.useRef(false);
+  const forcedDismissTimerRef = react.useRef(null);
+  const headerPadRef = react.useRef(null);
+  const pillRoRef = react.useRef(null);
+  const pillRafRef = react.useRef(0);
+  const pillObservedRef = react.useRef(null);
+  const headerExitRef = react.useRef(null);
+  const onLocalStateChangeRef = react.useRef(onLocalStateChange);
+  onLocalStateChangeRef.current = onLocalStateChange;
+  const pillAnimRef = react.useRef(null);
+  const pillFirstRef = react.useRef(true);
+  const prevPillRef = react.useRef({ x: 0, width: HEIGHT, height: HEIGHT });
+  const [pillWidth, setPillWidth] = react.useState(0);
+  const [contentHeight, setContentHeight] = react.useState(0);
+  const headerKey = `${item.state}-${item.title ?? item.state}`;
+  const [headerLayer, setHeaderLayer] = react.useState(() => ({
+    current: {
+      key: headerKey,
+      view: {
+        state: item.state,
+        title: item.title ?? item.state,
+        icon: item.icon,
+        styles: item.styles
+      }
+    },
+    prev: null
+  }));
+  const { ready, expanded: isExpanded } = localState;
+  const roundness = item.roundness ?? core.TOAST_DEFAULTS.roundness;
+  const blur = Math.min(10, Math.max(6, roundness * 0.45));
+  const filterId = `fluix-gooey-${item.id.replace(/[^a-z0-9-]/gi, "-")}`;
+  const hasDesc = Boolean(item.description) || Boolean(item.button);
+  const isLoading = item.state === "loading";
+  const open = hasDesc && isExpanded && !isLoading;
+  const position = getPillAlign(item.position);
+  const edge = item.position.startsWith("top") ? "bottom" : "top";
+  const resolvedPillWidth = Math.max(pillWidth || HEIGHT, HEIGHT);
+  const pillHeight = HEIGHT + blur * 3;
+  const pillX = position === "right" ? WIDTH - resolvedPillWidth : position === "center" ? (WIDTH - resolvedPillWidth) / 2 : 0;
+  const minExpanded = HEIGHT * MIN_EXPAND_RATIO;
+  const rawExpanded = hasDesc ? Math.max(minExpanded, HEIGHT + contentHeight) : minExpanded;
+  const frozenExpandedRef = react.useRef(rawExpanded);
+  if (open) {
+    frozenExpandedRef.current = rawExpanded;
+  }
+  const expanded = open ? rawExpanded : frozenExpandedRef.current;
+  const expandedContent = Math.max(0, expanded - HEIGHT);
+  const svgHeight = hasDesc ? Math.max(expanded, minExpanded) : HEIGHT;
+  const viewBox = `0 0 ${WIDTH} ${svgHeight}`;
+  const attrs = react.useMemo(
+    () => core.Toaster.getAttrs(item, { ready, expanded: isExpanded }),
+    [item, ready, isExpanded]
+  );
+  const rootVars = react.useMemo(
+    () => getToastRootVars({
+      open,
+      expanded,
+      height: HEIGHT,
+      resolvedPillWidth,
+      pillX,
+      edge,
+      expandedContent,
+      bodyMergeOverlap: BODY_MERGE_OVERLAP
+    }),
+    [open, expanded, resolvedPillWidth, pillX, edge, expandedContent]
+  );
+  react.useLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    for (const [key, value] of Object.entries(rootVars)) {
+      el.style.setProperty(key, value);
+    }
+  }, [rootVars]);
+  react.useLayoutEffect(() => {
+    setHeaderLayer((state) => {
+      if (state.current.key === headerKey) {
+        const newView = {
+          state: item.state,
+          title: item.title ?? item.state,
+          icon: item.icon,
+          styles: item.styles
+        };
+        if (state.current.view === newView) return state;
+        return { ...state, current: { key: headerKey, view: newView } };
+      }
+      return {
+        prev: state.current,
+        current: {
+          key: headerKey,
+          view: {
+            state: item.state,
+            title: item.title ?? item.state,
+            icon: item.icon,
+            styles: item.styles
+          }
+        }
+      };
+    });
+  }, [headerKey, item.state, item.title, item.icon, item.styles]);
+  react.useEffect(() => {
+    if (!headerLayer.prev) return;
+    if (headerExitRef.current) clearTimeout(headerExitRef.current);
+    headerExitRef.current = setTimeout(() => {
+      setHeaderLayer((s) => s.prev ? { ...s, prev: null } : s);
+      headerExitRef.current = null;
+    }, HEADER_EXIT_MS);
+    return () => {
+      if (headerExitRef.current) clearTimeout(headerExitRef.current);
+    };
+  }, [headerLayer.prev]);
+  react.useLayoutEffect(() => {
+    const el = innerRef.current;
+    const header = headerRef.current;
+    if (!el || !header) return;
+    if (headerPadRef.current === null) {
+      const cs = getComputedStyle(header);
+      headerPadRef.current = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
+    }
+    const px = headerPadRef.current;
+    const measure = () => {
+      const w = el.scrollWidth + px + PILL_PADDING;
+      if (w > PILL_PADDING) {
+        setPillWidth((prev) => prev === w ? prev : w);
+      }
+    };
+    measure();
+    if (!pillRoRef.current) {
+      pillRoRef.current = new ResizeObserver(() => {
+        cancelAnimationFrame(pillRafRef.current);
+        pillRafRef.current = requestAnimationFrame(() => {
+          const inner = innerRef.current;
+          const pad = headerPadRef.current ?? 0;
+          if (!inner) return;
+          const w = inner.scrollWidth + pad + PILL_PADDING;
+          if (w > PILL_PADDING) {
+            setPillWidth((prev) => prev === w ? prev : w);
+          }
+        });
+      });
+    }
+    if (pillObservedRef.current !== el) {
+      if (pillObservedRef.current) {
+        pillRoRef.current.unobserve(pillObservedRef.current);
+      }
+      pillRoRef.current.observe(el);
+      pillObservedRef.current = el;
+    }
+  }, []);
+  react.useLayoutEffect(() => {
+    if (!hasDesc) {
+      setContentHeight(0);
+      return;
+    }
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const h = el.scrollHeight;
+      setContentHeight((prev) => prev === h ? prev : h);
+    };
+    measure();
+    let rafId = 0;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(measure);
+    });
+    ro.observe(el);
+    return () => {
+      cancelAnimationFrame(rafId);
+      ro.disconnect();
+    };
+  }, [hasDesc]);
+  react.useEffect(() => {
+    const timer = setTimeout(() => {
+      onLocalStateChangeRef.current({ ready: true });
+    }, 32);
+    return () => clearTimeout(timer);
+  }, []);
+  react.useEffect(() => {
+    hoveringRef.current = false;
+    pendingDismissRef.current = false;
+    dismissRequestedRef.current = false;
+    if (forcedDismissTimerRef.current) {
+      clearTimeout(forcedDismissTimerRef.current);
+      forcedDismissTimerRef.current = null;
+    }
+  }, []);
+  react.useEffect(() => {
+    const el = pillRef.current;
+    if (!el || !ready) return;
+    const prev = prevPillRef.current;
+    const next = { x: pillX, width: resolvedPillWidth, height: open ? pillHeight : HEIGHT };
+    if (prev.x === next.x && prev.width === next.width && prev.height === next.height) return;
+    pillAnimRef.current?.cancel();
+    if (pillFirstRef.current) {
+      pillFirstRef.current = false;
+      el.setAttribute("x", String(next.x));
+      el.setAttribute("width", String(next.width));
+      el.setAttribute("height", String(next.height));
+      prevPillRef.current = next;
+      return;
+    }
+    const anim = core.animateSpring(
+      el,
+      {
+        x: { from: prev.x, to: next.x, unit: "px" },
+        width: { from: prev.width, to: next.width, unit: "px" },
+        height: { from: prev.height, to: next.height, unit: "px" }
+      },
+      core.FLUIX_SPRING
+    );
+    pillAnimRef.current = anim;
+    prevPillRef.current = next;
+    return () => {
+      anim?.cancel();
+    };
+  }, [ready, pillX, resolvedPillWidth, open, pillHeight]);
+  react.useEffect(() => {
+    const duration = item.duration;
+    if (duration == null || duration <= 0) return;
+    const timer = setTimeout(() => {
+      if (hoveringRef.current) {
+        pendingDismissRef.current = true;
+        forcedDismissTimerRef.current = setTimeout(() => {
+          if (dismissRequestedRef.current) return;
+          dismissRequestedRef.current = true;
+          pendingDismissRef.current = false;
+          machine.dismiss(item.id);
+        }, 1200);
+        return;
+      }
+      pendingDismissRef.current = false;
+      dismissRequestedRef.current = true;
+      machine.dismiss(item.id);
+    }, duration);
+    return () => {
+      clearTimeout(timer);
+      if (forcedDismissTimerRef.current) {
+        clearTimeout(forcedDismissTimerRef.current);
+        forcedDismissTimerRef.current = null;
+      }
+    };
+  }, [item.id, item.duration, machine]);
+  react.useEffect(() => {
+    if (!ready) return;
+    const timers = [];
+    if (item.autoExpandDelayMs != null && item.autoExpandDelayMs > 0) {
+      timers.push(
+        setTimeout(() => {
+          if (!hoveringRef.current) onLocalStateChangeRef.current({ expanded: true });
+        }, item.autoExpandDelayMs)
+      );
+    }
+    if (item.autoCollapseDelayMs != null && item.autoCollapseDelayMs > 0) {
+      timers.push(
+        setTimeout(() => {
+          if (!hoveringRef.current) onLocalStateChangeRef.current({ expanded: false });
+        }, item.autoCollapseDelayMs)
+      );
+    }
+    return () => timers.forEach(clearTimeout);
+  }, [item.autoExpandDelayMs, item.autoCollapseDelayMs, ready]);
+  react.useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const callbacks = {
+      onExpand: () => {
+        if (item.exiting || dismissRequestedRef.current) return;
+        onLocalStateChangeRef.current({ expanded: true });
+      },
+      onCollapse: () => {
+        if (item.exiting || dismissRequestedRef.current) return;
+        if (item.autopilot !== false) return;
+        onLocalStateChangeRef.current({ expanded: false });
+      },
+      onDismiss: () => {
+        if (dismissRequestedRef.current) return;
+        dismissRequestedRef.current = true;
+        machine.dismiss(item.id);
+      },
+      onHoverStart: () => {
+        hoveringRef.current = true;
+      },
+      onHoverEnd: () => {
+        hoveringRef.current = false;
+        if (pendingDismissRef.current) {
+          pendingDismissRef.current = false;
+          if (dismissRequestedRef.current) return;
+          dismissRequestedRef.current = true;
+          machine.dismiss(item.id);
+        }
+      }
+    };
+    const { destroy } = core.Toaster.connect(el, callbacks, item);
+    connectCleanupRef.current = destroy;
+    return () => {
+      destroy();
+      connectCleanupRef.current = null;
+    };
+  }, [item, machine]);
+  react.useEffect(() => {
+    return () => {
+      pillRoRef.current?.disconnect();
+      cancelAnimationFrame(pillRafRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: rootRef, type: "button", ...attrs.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ...attrs.canvas, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        "data-fluix-svg": true,
+        width: WIDTH,
+        height: svgHeight,
+        viewBox,
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "filter",
+            {
+              id: filterId,
+              x: "-20%",
+              y: "-20%",
+              width: "140%",
+              height: "140%",
+              colorInterpolationFilters: "sRGB",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: blur, result: "blur" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "feColorMatrix",
+                  {
+                    in: "blur",
+                    type: "matrix",
+                    values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10",
+                    result: "goo"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("g", { filter: `url(#${filterId})`, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                ref: pillRef,
+                "data-fluix-pill": true,
+                x: pillX,
+                y: 0,
+                width: resolvedPillWidth,
+                height: HEIGHT,
+                rx: roundness,
+                ry: roundness,
+                fill: item.fill ?? "#FFFFFF"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                "data-fluix-body": true,
+                x: 0,
+                y: HEIGHT,
+                width: WIDTH,
+                height: 0,
+                rx: roundness,
+                ry: roundness,
+                fill: item.fill ?? "#FFFFFF",
+                opacity: 0
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, ...attrs.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-fluix-header-stack": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: innerRef,
+          "data-fluix-header-inner": true,
+          "data-layer": "current",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ...attrs.badge,
+                "data-state": headerLayer.current.view.state,
+                className: headerLayer.current.view.styles?.badge,
+                children: renderToastIcon(headerLayer.current.view.icon, headerLayer.current.view.state)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                ...attrs.title,
+                "data-state": headerLayer.current.view.state,
+                className: headerLayer.current.view.styles?.title,
+                children: headerLayer.current.view.title
+              }
+            )
+          ]
+        },
+        headerLayer.current.key
+      ),
+      headerLayer.prev && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-fluix-header-inner": true,
+          "data-layer": "prev",
+          "data-exiting": "true",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-fluix-badge": true,
+                "data-state": headerLayer.prev.view.state,
+                className: headerLayer.prev.view.styles?.badge,
+                children: renderToastIcon(headerLayer.prev.view.icon, headerLayer.prev.view.state)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "data-fluix-title": true,
+                "data-state": headerLayer.prev.view.state,
+                className: headerLayer.prev.view.styles?.title,
+                children: headerLayer.prev.view.title
+              }
+            )
+          ]
+        },
+        headerLayer.prev.key
+      )
+    ] }) }),
+    hasDesc && /* @__PURE__ */ jsxRuntime.jsx("div", { ...attrs.content, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: contentRef, ...attrs.description, className: item.styles?.description, children: [
+      typeof item.description === "string" ? item.description : item.description,
+      item.button && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ...attrs.button,
+          type: "button",
+          className: item.styles?.button,
+          onClick: (e) => {
+            e.stopPropagation();
+            item.button?.onClick();
+          },
+          children: item.button.title
+        }
+      )
+    ] }) })
+  ] });
+}
+var EMPTY_STATE = { toasts: [], config: { position: "top-right" } };
+function getServerSnapshot() {
+  return EMPTY_STATE;
+}
+function ViewportGroup({
+  position,
+  layout,
+  offset,
+  children
+}) {
+  const sectionRef = react.useRef(null);
+  const offsetStyle = react.useMemo(() => getViewportOffsetStyle(offset, position), [offset, position]);
+  react.useLayoutEffect(() => {
+    const el = sectionRef.current;
+    if (!el) return;
+    el.style.top = "";
+    el.style.right = "";
+    el.style.bottom = "";
+    el.style.left = "";
+    el.style.paddingLeft = "";
+    el.style.paddingRight = "";
+    Object.assign(el.style, offsetStyle);
+  }, [offsetStyle]);
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { ref: sectionRef, ...core.Toaster.getViewportAttrs(position, layout), children });
+}
+function Toaster({ config } = {}) {
+  const machine = react.useMemo(() => core.Toaster.getMachine(), []);
+  const snapshot = react.useSyncExternalStore(
+    machine.store.subscribe,
+    machine.store.getSnapshot,
+    getServerSnapshot
+  );
+  react.useEffect(() => {
+    if (config) machine.configure(config);
+  }, [machine, config]);
+  const [localState, setLocalState] = react.useState(() => ({}));
+  const setToastLocal = react.useCallback(
+    (id, patch) => {
+      setLocalState((prev) => {
+        const next = { ...prev };
+        if (!next[id]) next[id] = { ready: false, expanded: false };
+        next[id] = { ...next[id], ...patch };
+        return next;
+      });
+    },
+    []
+  );
+  react.useEffect(() => {
+    const ids = new Set(snapshot.toasts.map((t) => t.id));
+    setLocalState((prev) => {
+      const next = {};
+      for (const id of ids) {
+        next[id] = prev[id] ?? { ready: false, expanded: false };
+      }
+      return Object.keys(next).length ? next : prev;
+    });
+  }, [snapshot.toasts]);
+  const byPosition = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of snapshot.toasts) {
+      const list = map.get(item.position) ?? [];
+      list.push(item);
+      map.set(item.position, list);
+    }
+    return map;
+  }, [snapshot.toasts]);
+  const resolvedOffset = snapshot.config?.offset ?? config?.offset;
+  const resolvedLayout = snapshot.config?.layout ?? config?.layout ?? "stack";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Array.from(byPosition.entries()).map(([position, toasts]) => /* @__PURE__ */ jsxRuntime.jsx(
+    ViewportGroup,
+    {
+      position,
+      layout: resolvedLayout,
+      offset: resolvedOffset,
+      children: toasts.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        ToastItem,
+        {
+          item,
+          machine,
+          localState: localState[item.id] ?? { ready: false, expanded: false },
+          onLocalStateChange: (patch) => setToastLocal(item.id, patch)
+        },
+        item.instanceId
+      ))
+    },
+    position
+  )) });
+}
+
+Object.defineProperty(exports, "fluix", {
+  enumerable: true,
+  get: function () { return core.fluix; }
+});
+exports.Toaster = Toaster;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map