react-snackbar-glass 0.0.0-stage → 1.0.0

package/dist/index.cjs

@@ -0,0 +1,967 @@
+'use strict';
+
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/core/createSnackbarStore.ts
+var EMPTY = Object.freeze([]);
+var DEFAULT_CONFIG = {
+  position: "bottom-right",
+  duration: 5e3,
+  dismissible: true,
+  progress: true,
+  tone: "glass",
+  size: "md",
+  maxVisible: 3
+};
+var sequence = 0;
+function createId() {
+  sequence += 1;
+  const random = Math.random().toString(36).slice(2, 7);
+  return `prs-${Date.now().toString(36)}-${sequence.toString(36)}-${random}`;
+}
+function normalizeDuration(value, fallback) {
+  if (value === void 0) return fallback;
+  if (value === null) return Infinity;
+  if (!Number.isFinite(value) || value <= 0) return Infinity;
+  return Math.max(1, Math.round(value));
+}
+function isPlainOptions(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !react.isValidElement(value) && !("$$typeof" in value);
+}
+function contentToOptions(content) {
+  if (isPlainOptions(content)) return content;
+  return { message: content };
+}
+function resolveContent(content, value) {
+  const resolved = typeof content === "function" ? content(value) : content;
+  return contentToOptions(resolved);
+}
+function createSnackbarStore(initialConfig = {}) {
+  let config = {
+    ...DEFAULT_CONFIG,
+    ...initialConfig.position !== void 0 ? { position: initialConfig.position } : null,
+    ...initialConfig.duration !== void 0 ? {
+      duration: normalizeDuration(
+        initialConfig.duration,
+        DEFAULT_CONFIG.duration
+      )
+    } : null,
+    ...initialConfig.dismissible !== void 0 ? { dismissible: initialConfig.dismissible } : null,
+    ...initialConfig.progress !== void 0 ? { progress: initialConfig.progress } : null,
+    ...initialConfig.tone !== void 0 ? { tone: initialConfig.tone } : null,
+    ...initialConfig.size !== void 0 ? { size: initialConfig.size } : null,
+    ...initialConfig.maxVisible !== void 0 ? { maxVisible: Math.max(1, Math.floor(initialConfig.maxVisible)) } : null
+  };
+  let records = EMPTY;
+  const listeners = /* @__PURE__ */ new Set();
+  const timers = /* @__PURE__ */ new Map();
+  const shown = /* @__PURE__ */ new Set();
+  const pauseReasons = /* @__PURE__ */ new Map();
+  let pageHidden = false;
+  const emit = () => {
+    for (const listener of listeners) listener();
+  };
+  const find = (id) => records.find((record) => record.id === id);
+  const replace = (id, record) => {
+    records = records.map((current) => current.id === id ? record : current);
+  };
+  const cleanup = (id) => {
+    timers.delete(id);
+    shown.delete(id);
+    pauseReasons.delete(id);
+  };
+  const stopTimer = (timer) => {
+    if (timer.handle !== null) {
+      clearTimeout(timer.handle);
+      timer.handle = null;
+    }
+    if (timer.startedAt !== null) {
+      timer.remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
+      timer.startedAt = null;
+    }
+  };
+  const schedule = (id, timer) => {
+    timer.startedAt = Date.now();
+    timer.handle = setTimeout(() => {
+      timer.handle = null;
+      timer.startedAt = null;
+      timer.remaining = 0;
+      dismiss(id, "timeout");
+    }, Math.max(0, timer.remaining));
+  };
+  const startTimer = (id) => {
+    const record = find(id);
+    if (!record || record.phase !== "visible" || !shown.has(id) || record.duration === Infinity || pageHidden || (pauseReasons.get(id)?.size ?? 0) > 0) {
+      return;
+    }
+    const existing = timers.get(id);
+    if (existing) {
+      if (existing.handle === null && existing.startedAt === null) {
+        schedule(id, existing);
+      }
+      return;
+    }
+    const timer = {
+      remaining: record.duration,
+      startedAt: null,
+      handle: null
+    };
+    timers.set(id, timer);
+    schedule(id, timer);
+  };
+  const resetTimer = (id) => {
+    const timer = timers.get(id);
+    if (timer) {
+      if (timer.handle !== null) clearTimeout(timer.handle);
+      timers.delete(id);
+    }
+    startTimer(id);
+  };
+  const setPaused = (id, paused) => {
+    const record = find(id);
+    if (!record || record.paused === paused) return;
+    replace(id, { ...record, paused });
+    emit();
+  };
+  const pause = (id, reason = "manual") => {
+    const record = find(id);
+    if (!record || record.phase !== "visible") return;
+    let reasons = pauseReasons.get(id);
+    if (!reasons) {
+      reasons = /* @__PURE__ */ new Set();
+      pauseReasons.set(id, reasons);
+    }
+    if (reasons.has(reason)) return;
+    reasons.add(reason);
+    const timer = timers.get(id);
+    if (timer) stopTimer(timer);
+    setPaused(id, true);
+  };
+  const resume = (id, reason = "manual") => {
+    const reasons = pauseReasons.get(id);
+    if (!reasons || !reasons.has(reason)) return;
+    reasons.delete(reason);
+    if (reasons.size > 0) return;
+    pauseReasons.delete(id);
+    setPaused(id, false);
+    startTimer(id);
+  };
+  const dismiss = (id, reason = "manual") => {
+    const record = find(id);
+    if (!record || record.phase === "exiting") return;
+    const timer = timers.get(id);
+    if (timer) {
+      stopTimer(timer);
+      timers.delete(id);
+    }
+    if (!shown.has(id)) {
+      records = records.filter((current) => current.id !== id);
+      cleanup(id);
+      emit();
+      record.onClose?.(reason, id);
+      return;
+    }
+    pauseReasons.delete(id);
+    replace(id, {
+      ...record,
+      phase: "exiting",
+      closeReason: reason,
+      paused: false
+    });
+    emit();
+    record.onClose?.(reason, id);
+  };
+  const dismissAll = (reason = "dismissAll") => {
+    const callbacks = [];
+    const remaining = [];
+    for (const record of records) {
+      if (record.phase === "exiting") {
+        remaining.push(record);
+        continue;
+      }
+      const timer = timers.get(record.id);
+      if (timer) {
+        stopTimer(timer);
+        timers.delete(record.id);
+      }
+      if (!shown.has(record.id)) {
+        cleanup(record.id);
+        callbacks.push(() => record.onClose?.(reason, record.id));
+        continue;
+      }
+      pauseReasons.delete(record.id);
+      remaining.push({
+        ...record,
+        phase: "exiting",
+        closeReason: reason,
+        paused: false
+      });
+      callbacks.push(() => record.onClose?.(reason, record.id));
+    }
+    records = remaining;
+    emit();
+    for (const callback of callbacks) callback();
+  };
+  const show = (options) => {
+    const id = options.id ?? createId();
+    const existing = find(id);
+    if (existing) {
+      update(id, options);
+      const current = find(id);
+      if (current && current.phase === "exiting") {
+        records = records.map(
+          (record2) => record2.id === id ? { ...record2, phase: "visible", closeReason: void 0, paused: false } : record2
+        );
+        pauseReasons.delete(id);
+        emit();
+        startTimer(id);
+      }
+      return id;
+    }
+    const record = {
+      id,
+      title: options.title,
+      message: options.message,
+      variant: options.variant ?? "neutral",
+      tone: options.tone ?? config.tone,
+      size: options.size ?? config.size,
+      duration: normalizeDuration(options.duration, config.duration),
+      position: options.position ?? config.position,
+      icon: options.icon,
+      action: options.action ?? null,
+      dismissible: options.dismissible ?? config.dismissible,
+      progress: options.progress ?? config.progress,
+      className: options.className,
+      style: options.style,
+      createdAt: Date.now(),
+      phase: "visible",
+      paused: false,
+      closeReason: void 0,
+      onOpen: options.onOpen,
+      onClose: options.onClose
+    };
+    records = [...records, record];
+    emit();
+    return id;
+  };
+  const update = (id, options) => {
+    const record = find(id);
+    if (!record) return;
+    const next = {
+      ...record,
+      ...options.title !== void 0 ? { title: options.title } : null,
+      ...options.message !== void 0 ? { message: options.message } : null,
+      ...options.variant !== void 0 ? { variant: options.variant } : null,
+      ...options.tone !== void 0 ? { tone: options.tone } : null,
+      ...options.size !== void 0 ? { size: options.size } : null,
+      ...options.position !== void 0 ? { position: options.position } : null,
+      ...options.icon !== void 0 ? { icon: options.icon } : null,
+      ...options.action !== void 0 ? { action: options.action } : null,
+      ...options.dismissible !== void 0 ? { dismissible: options.dismissible } : null,
+      ...options.progress !== void 0 ? { progress: options.progress } : null,
+      ...options.className !== void 0 ? { className: options.className } : null,
+      ...options.style !== void 0 ? { style: options.style } : null,
+      ...options.onOpen !== void 0 ? { onOpen: options.onOpen } : null,
+      ...options.onClose !== void 0 ? { onClose: options.onClose } : null,
+      ...options.duration !== void 0 ? { duration: normalizeDuration(options.duration, record.duration) } : null
+    };
+    const durationChanged = next.duration !== record.duration;
+    replace(id, next);
+    emit();
+    if (durationChanged && next.phase === "visible" && shown.has(id)) {
+      if (next.duration === Infinity) {
+        const timer = timers.get(id);
+        if (timer) {
+          stopTimer(timer);
+          timers.delete(id);
+        }
+      } else {
+        resetTimer(id);
+      }
+    }
+  };
+  const notifyShown = (id) => {
+    if (shown.has(id)) return;
+    const record = find(id);
+    if (!record || record.phase !== "visible") return;
+    shown.add(id);
+    record.onOpen?.(id);
+    startTimer(id);
+  };
+  const notifyExited = (id) => {
+    const record = find(id);
+    if (!record || record.phase !== "exiting") return;
+    cleanup(id);
+    records = records.filter((current) => current.id !== id);
+    emit();
+  };
+  const setPageHidden = (hidden) => {
+    if (pageHidden === hidden) return;
+    pageHidden = hidden;
+    for (const record of records) {
+      if (hidden) {
+        pause(record.id, "page");
+      } else {
+        resume(record.id, "page");
+        startTimer(record.id);
+      }
+    }
+  };
+  const setConfig = (patch) => {
+    config = {
+      ...config,
+      ...patch.position !== void 0 ? { position: patch.position } : null,
+      ...patch.duration !== void 0 ? {
+        duration: normalizeDuration(patch.duration, config.duration)
+      } : null,
+      ...patch.dismissible !== void 0 ? { dismissible: patch.dismissible } : null,
+      ...patch.progress !== void 0 ? { progress: patch.progress } : null,
+      ...patch.tone !== void 0 ? { tone: patch.tone } : null,
+      ...patch.size !== void 0 ? { size: patch.size } : null,
+      ...patch.maxVisible !== void 0 ? { maxVisible: Math.max(1, Math.floor(patch.maxVisible)) } : null
+    };
+  };
+  const promise = (input, messages, options = {}) => {
+    const loadingOptions = contentToOptions(messages.loading ?? "Loading\u2026");
+    const id = options.id ?? createId();
+    show({
+      dismissible: false,
+      ...options,
+      ...loadingOptions,
+      id,
+      duration: loadingOptions.duration !== void 0 ? loadingOptions.duration : null,
+      variant: loadingOptions.variant ?? "loading",
+      progress: loadingOptions.progress ?? false
+    });
+    const settle = (content, value, variant) => {
+      const next = resolveContent(content, value);
+      update(id, {
+        ...next,
+        variant: next.variant ?? variant,
+        duration: next.duration !== void 0 ? next.duration : options.duration !== void 0 ? options.duration : 4e3
+      });
+    };
+    return input.then(
+      (value) => {
+        settle(messages.success, value, "success");
+        return value;
+      },
+      (error) => {
+        settle(messages.error, error, "error");
+        throw error;
+      }
+    );
+  };
+  return {
+    show,
+    update,
+    dismiss,
+    dismissAll,
+    promise,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getSnapshot: () => records,
+    getServerSnapshot: () => EMPTY,
+    getConfig: () => ({ ...config }),
+    setConfig,
+    pause,
+    resume,
+    notifyShown,
+    notifyExited,
+    setPageHidden
+  };
+}
+var strokeProps = {
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 1.7,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var BellIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      ...strokeProps,
+      d: "M5.2 8.1a4.8 4.8 0 0 1 9.6 0c0 3.1 1.3 4.3 1.3 4.3H3.9s1.3-1.2 1.3-4.3Z"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { ...strokeProps, d: "M8.2 15.2a1.9 1.9 0 0 0 3.6 0" })
+] });
+var CheckIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { ...strokeProps, d: "M4.6 10.4 8 13.8l7.4-7.6", strokeWidth: 2 }) });
+var ErrorIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { ...strokeProps, cx: "10", cy: "10", r: "6.6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { ...strokeProps, d: "M10 6.4v4.2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "13.5", r: "0.95", fill: "currentColor" })
+] });
+var WarningIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      ...strokeProps,
+      d: "M8.6 3.6a1.6 1.6 0 0 1 2.8 0l5.2 9.6a1.6 1.6 0 0 1-1.4 2.4H4.8a1.6 1.6 0 0 1-1.4-2.4l5.2-9.6Z"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { ...strokeProps, d: "M10 7.6v3.2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "13.3", r: "0.95", fill: "currentColor" })
+] });
+var InfoIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { ...strokeProps, cx: "10", cy: "10", r: "6.6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { ...strokeProps, d: "M10 9.1v4.2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "6.5", r: "0.95", fill: "currentColor" })
+] });
+var SpinnerIcon = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 20 20",
+    width: "18",
+    height: "18",
+    "aria-hidden": "true",
+    className: "prs-icon-spin",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          ...strokeProps,
+          cx: "10",
+          cy: "10",
+          r: "6.4",
+          opacity: "0.22",
+          strokeWidth: 2
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          ...strokeProps,
+          d: "M10 3.6a6.4 6.4 0 0 1 6.4 6.4",
+          strokeWidth: 2
+        }
+      )
+    ]
+  }
+);
+var SparkIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 20 20", width: "18", height: "18", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      ...strokeProps,
+      d: "M10 2.9c.55 3.9 2.2 5.55 6.1 6.1-3.9.55-5.55 2.2-6.1 6.1-.55-3.9-2.2-5.55-6.1-6.1C7.8 8.45 9.45 6.8 10 2.9Z"
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { ...strokeProps, d: "M15.2 13.4c.2 1.4.8 2 2.2 2.2-1.4.2-2 .8-2.2 2.2-.2-1.4-.8-2-2.2-2.2 1.4-.2 2-.8 2.2-2.2Z" })
+] });
+var defaultIcons = {
+  neutral: BellIcon,
+  success: CheckIcon,
+  error: ErrorIcon,
+  warning: WarningIcon,
+  info: InfoIcon,
+  loading: SpinnerIcon,
+  custom: SparkIcon
+};
+var DefaultCloseIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    d: "M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6"
+  }
+) });
+function SnackbarItem({
+  record,
+  store,
+  icons,
+  closeIcon,
+  closeLabel,
+  pauseOnHover,
+  pauseOnFocus,
+  swipeToDismiss,
+  swipeThreshold
+}) {
+  const [dragX, setDragX] = react.useState(0);
+  const [dragging, setDragging] = react.useState(false);
+  const [actionPending, setActionPending] = react.useState(false);
+  const gesture = react.useRef(null);
+  const dragXRef = react.useRef(0);
+  const draggingRef = react.useRef(false);
+  const suppressClick = react.useRef(false);
+  const surfaceRef = react.useRef(null);
+  const { id, phase, action, title, message, variant, duration } = record;
+  react.useEffect(() => {
+    store.notifyShown(id);
+  }, [store, id]);
+  react.useEffect(() => {
+    if (phase !== "exiting") return;
+    const timeout = setTimeout(() => store.notifyExited(id), 400);
+    return () => clearTimeout(timeout);
+  }, [phase, store, id]);
+  const resetDrag = () => {
+    dragXRef.current = 0;
+    draggingRef.current = false;
+    setDragX(0);
+    setDragging(false);
+  };
+  const pauseForDrag = () => {
+    store.pause(id, "drag");
+  };
+  const resumeForDrag = () => {
+    store.resume(id, "drag");
+  };
+  const handlePointerDown = (event) => {
+    suppressClick.current = false;
+    if (!swipeToDismiss || phase === "exiting") return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const target = event.target;
+    if (target.closest(
+      'button, a, input, textarea, select, [role="button"], [data-prs-no-swipe]'
+    )) {
+      return;
+    }
+    gesture.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      axis: "pending"
+    };
+  };
+  const handlePointerMove = (event) => {
+    const current = gesture.current;
+    if (!current) return;
+    const dx = event.clientX - current.startX;
+    const dy = event.clientY - current.startY;
+    if (current.axis === "pending") {
+      if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return;
+      if (Math.abs(dy) > Math.abs(dx)) {
+        gesture.current = null;
+        return;
+      }
+      current.axis = "x";
+      draggingRef.current = true;
+      setDragging(true);
+      pauseForDrag();
+      surfaceRef.current?.setPointerCapture?.(event.pointerId);
+    }
+    if (event.cancelable) event.preventDefault();
+    const absolute = Math.abs(dx);
+    const damped = absolute > 96 ? 96 + (absolute - 96) * 0.32 : absolute;
+    const next = Math.sign(dx) * damped;
+    dragXRef.current = next;
+    setDragX(next);
+    if (absolute > 8) suppressClick.current = true;
+  };
+  const finishGesture = (event) => {
+    const current = gesture.current;
+    if (!current) return;
+    if (draggingRef.current) {
+      const shouldDismiss = Math.abs(dragXRef.current) >= swipeThreshold;
+      resetDrag();
+      resumeForDrag();
+      if (surfaceRef.current?.hasPointerCapture?.(current.pointerId)) {
+        surfaceRef.current.releasePointerCapture(current.pointerId);
+      }
+      if (shouldDismiss) {
+        suppressClick.current = true;
+        store.dismiss(id, "swipe");
+      }
+    } else {
+      resetDrag();
+    }
+    gesture.current = null;
+    if (event.type === "pointercancel") resumeForDrag();
+  };
+  const handleLostPointerCapture = () => {
+    if (!draggingRef.current) return;
+    resetDrag();
+    resumeForDrag();
+    gesture.current = null;
+  };
+  const handleAnimationEnd = (event) => {
+    if (event.target !== event.currentTarget) return;
+    if (phase === "exiting") store.notifyExited(id);
+  };
+  const handleAction = async () => {
+    if (!action || actionPending) return;
+    const result = action.onClick?.(id);
+    if (result && typeof result.then === "function") {
+      setActionPending(true);
+      try {
+        await result;
+      } finally {
+        setActionPending(false);
+      }
+    }
+    if (action.closeOnClick !== false) store.dismiss(id, "action");
+  };
+  const handleBlur = (event) => {
+    if (!pauseOnFocus) return;
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      store.resume(id, "focus");
+    }
+  };
+  const resolvedIcon = record.icon === void 0 ? icons?.[variant] ?? defaultIcons[variant] : record.icon;
+  const showIcon = record.icon !== false;
+  const showProgress = record.progress && Number.isFinite(duration) && duration > 0;
+  const style = {
+    ...record.style,
+    "--prs-drag-x": `${dragX}px`,
+    "--prs-drag-opacity": String(
+      1 - Math.min(Math.abs(dragX) / 300, 0.55)
+    )
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `prs-item${record.className ? ` ${record.className}` : ""}`,
+      "data-variant": variant,
+      "data-tone": record.tone,
+      "data-size": record.size,
+      "data-state": phase,
+      "data-paused": record.paused ? "true" : "false",
+      "data-dragging": dragging ? "true" : "false",
+      "data-has-icon": showIcon ? "true" : "false",
+      "data-dismissible": record.dismissible ? "true" : "false",
+      "data-prs-id": record.id,
+      "data-position": record.position,
+      style,
+      role: variant === "error" ? "alert" : "status",
+      "aria-live": variant === "error" ? "assertive" : "polite",
+      "aria-atomic": "true",
+      "aria-busy": actionPending || variant === "loading" ? true : void 0,
+      onPointerEnter: () => {
+        if (pauseOnHover) store.pause(id, "hover");
+      },
+      onPointerLeave: () => {
+        if (pauseOnHover) store.resume(id, "hover");
+      },
+      onFocus: () => {
+        if (pauseOnFocus) store.pause(id, "focus");
+      },
+      onBlur: handleBlur,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && record.dismissible) {
+          event.stopPropagation();
+          store.dismiss(id, "escape");
+        }
+      },
+      onAnimationEnd: handleAnimationEnd,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: surfaceRef,
+          className: "prs-item__surface",
+          onClickCapture: (event) => {
+            if (!suppressClick.current) return;
+            suppressClick.current = false;
+            event.preventDefault();
+            event.stopPropagation();
+          },
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: finishGesture,
+          onPointerCancel: finishGesture,
+          onLostPointerCapture: handleLostPointerCapture,
+          children: [
+            showIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "prs-item__icon", "aria-hidden": "true", children: resolvedIcon }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "prs-item__content",
+                "data-has-title": title !== void 0 && title !== null ? "true" : "false",
+                children: [
+                  title !== void 0 && title !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__title", children: title }) : null,
+                  message !== void 0 && message !== null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__message", children: message }) : null,
+                  action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-item__actions", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "prs-action",
+                      onClick: handleAction,
+                      disabled: actionPending,
+                      "aria-busy": actionPending || void 0,
+                      children: [
+                        actionPending ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "prs-action__spinner", "aria-hidden": "true" }) : null,
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: action.label })
+                      ]
+                    }
+                  ) }) : null
+                ]
+              }
+            ),
+            record.dismissible ? /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "prs-close",
+                "aria-label": closeLabel,
+                onClick: () => store.dismiss(id, "manual"),
+                children: closeIcon ?? DefaultCloseIcon
+              }
+            ) : null,
+            showProgress ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prs-progress", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "prs-progress__bar",
+                style: { animationDuration: `${duration}ms` }
+              },
+              duration
+            ) }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var POSITIONS = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+];
+function SnackbarHost({
+  store,
+  maxVisible = 3,
+  offset = 20,
+  gap = 12,
+  width = 384,
+  theme = "auto",
+  container,
+  pauseOnHover = true,
+  pauseOnFocus = true,
+  pauseOnDocumentHidden = true,
+  swipeToDismiss = true,
+  swipeThreshold = 88,
+  icons,
+  closeIcon,
+  closeLabel = "Dismiss notification",
+  regionLabel = "Notifications",
+  className,
+  style,
+  zIndex = 2147483e3,
+  dir
+}) {
+  const records = react.useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getServerSnapshot
+  );
+  const [portalNode, setPortalNode] = react.useState(null);
+  const regionRefs = react.useRef(/* @__PURE__ */ new Map());
+  const topsRef = react.useRef(/* @__PURE__ */ new Map());
+  react.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const target = typeof container === "function" ? container() : container ?? document.body;
+    setPortalNode(target);
+    return () => setPortalNode(null);
+  }, [container]);
+  react.useEffect(() => {
+    if (!pauseOnDocumentHidden || typeof document === "undefined") return;
+    const sync = () => store.setPageHidden(document.visibilityState === "hidden");
+    sync();
+    document.addEventListener("visibilitychange", sync);
+    return () => {
+      document.removeEventListener("visibilitychange", sync);
+      store.setPageHidden(false);
+    };
+  }, [store, pauseOnDocumentHidden]);
+  react.useLayoutEffect(() => {
+    if (!portalNode) {
+      topsRef.current.clear();
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const next = /* @__PURE__ */ new Map();
+    for (const region of regionRefs.current.values()) {
+      const regionTop = region.getBoundingClientRect().top;
+      const nodes = region.querySelectorAll("[data-prs-id]");
+      for (const node of nodes) {
+        const id = node.dataset.prsId;
+        if (!id) continue;
+        const top = regionTop + node.offsetTop;
+        next.set(id, top);
+        const previous = topsRef.current.get(id);
+        if (reduced || previous === void 0 || node.dataset.state === "exiting" || typeof node.animate !== "function") {
+          continue;
+        }
+        const delta = previous - top;
+        if (Math.abs(delta) < 0.5) continue;
+        node.animate(
+          [
+            { transform: `translate3d(0, ${delta}px, 0)` },
+            { transform: "translate3d(0, 0, 0)" }
+          ],
+          {
+            duration: 320,
+            easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+          }
+        );
+      }
+    }
+    topsRef.current = next;
+  });
+  if (!portalNode) return null;
+  const byPosition = /* @__PURE__ */ new Map();
+  for (const record of records) {
+    const bucket = byPosition.get(record.position);
+    if (bucket) bucket.push(record);
+    else byPosition.set(record.position, [record]);
+  }
+  const limit = Math.max(1, Math.floor(maxVisible));
+  const rootStyle = {
+    "--prs-width": `${width}px`,
+    "--prs-offset": `${offset}px`,
+    "--prs-gap": `${gap}px`,
+    "--prs-z-index": String(zIndex),
+    ...style
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `prs-root${className ? ` ${className}` : ""}`,
+        "data-prs-theme": theme,
+        dir,
+        style: rootStyle,
+        children: POSITIONS.map((position) => {
+          const items = byPosition.get(position);
+          if (!items || items.length === 0) return null;
+          const visible = items.slice(0, limit);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "section",
+            {
+              ref: (node) => {
+                if (node) regionRefs.current.set(position, node);
+                else regionRefs.current.delete(position);
+              },
+              className: "prs-region",
+              "data-position": position,
+              "aria-label": regionLabel,
+              children: visible.map((record) => /* @__PURE__ */ jsxRuntime.jsx(
+                SnackbarItem,
+                {
+                  record,
+                  store,
+                  icons,
+                  closeIcon,
+                  closeLabel,
+                  pauseOnHover,
+                  pauseOnFocus,
+                  swipeToDismiss,
+                  swipeThreshold
+                },
+                record.id
+              ))
+            },
+            position
+          );
+        })
+      }
+    ),
+    portalNode
+  );
+}
+var SnackbarContext = react.createContext(null);
+function SnackbarProvider({
+  children,
+  store: providedStore,
+  position,
+  duration,
+  dismissible,
+  progress,
+  tone,
+  size,
+  maxVisible,
+  ...hostProps
+}) {
+  const store = react.useMemo(
+    () => providedStore ?? createSnackbarStore({
+      position,
+      duration,
+      dismissible,
+      progress,
+      tone,
+      size
+    }),
+    // The store is intentionally created once per provider instance.
+    // Subsequent config changes are pushed below.
+    [providedStore]
+  );
+  react.useEffect(() => {
+    store.setConfig({
+      position,
+      duration,
+      dismissible,
+      progress,
+      tone,
+      size,
+      maxVisible
+    });
+  }, [store, position, duration, dismissible, progress, tone, size, maxVisible]);
+  const api = react.useMemo(() => {
+    const preset = (variant) => (message, options = {}) => store.show({ ...options, message, variant });
+    return {
+      show: store.show,
+      update: store.update,
+      dismiss: store.dismiss,
+      dismissAll: store.dismissAll,
+      promise: store.promise,
+      success: preset("success"),
+      error: preset("error"),
+      warning: preset("warning"),
+      info: preset("info"),
+      neutral: preset("neutral"),
+      custom: preset("custom"),
+      loading: (message, options = {}) => store.show({
+        ...options,
+        message,
+        variant: "loading",
+        duration: options.duration !== void 0 ? options.duration : null
+      }),
+      store
+    };
+  }, [store]);
+  const value = react.useMemo(() => ({ store, api }), [store, api]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(SnackbarContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SnackbarHost,
+      {
+        store,
+        maxVisible: maxVisible ?? store.getConfig().maxVisible,
+        ...hostProps
+      }
+    )
+  ] });
+}
+function useSnackbarContext() {
+  const context = react.useContext(SnackbarContext);
+  if (!context) {
+    throw new Error(
+      "useSnackbar must be used inside a <SnackbarProvider>. Render the provider above the component that displays snackbars."
+    );
+  }
+  return context;
+}
+function useSnackbar() {
+  return useSnackbarContext().api;
+}
+function useSnackbarStore() {
+  return useSnackbarContext().store;
+}
+
+exports.SnackbarHost = SnackbarHost;
+exports.SnackbarProvider = SnackbarProvider;
+exports.createSnackbarStore = createSnackbarStore;
+exports.useSnackbar = useSnackbar;
+exports.useSnackbarStore = useSnackbarStore;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map