react-snackbar-glass 1.1.0 → 1.3.0

package/dist/index.d.ts

@@ -13,6 +13,26 @@ type SnackbarTone = 'glass' | 'solid';
  * mini style, `lg` is an editorial width for richer content.
  */
 type SnackbarSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * How much room a snackbar takes.
+ *
+ * - `card` — full card: title, message, action, countdown hairline.
+ * - `compact` — fully rounded single-line pill.
+ * - `inline` — message-only status line: content width, ~38px tall, never
+ *   wraps and never shows a title or countdown.
+ */
+type SnackbarLayout = 'card' | 'compact' | 'inline';
+/**
+ * Enter/exit animation preset.
+ *
+ * - `slide` — spring slide from the edge with a soft blur (default).
+ * - `fade` — pure opacity cross-fade.
+ * - `scale` — zoom in/out from the center.
+ * - `pop` — bouncy overshoot.
+ * - `flip` — 3D flip on the X axis.
+ * - `none` — appears and disappears instantly.
+ */
+type SnackbarAnimation = 'slide' | 'fade' | 'scale' | 'pop' | 'flip' | 'none';
 type SnackbarPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 type SnackbarTheme = 'light' | 'dark' | 'auto';
 type SnackbarPhase = 'visible' | 'exiting';
@@ -59,6 +79,30 @@ interface SnackbarOptions {
     dismissible?: boolean;
     /** Show the countdown hairline. @default true */
     progress?: boolean;
+    /**
+     * Single-line pill: no title, no countdown hairline and tighter padding.
+     * Ideal for high-frequency, low-stakes messages.
+     *
+     * Sugar for `layout: 'compact'`.
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * How much room the snackbar takes. `compact: true` is sugar for
+     * `layout: 'compact'`; `toast.single()` uses `'inline'`.
+     * @default 'card'
+     */
+    layout?: SnackbarLayout;
+    /**
+     * Enter/exit animation preset. Applies to both phases unless
+     * `enterAnimation` / `exitAnimation` override it.
+     * @default 'slide'
+     */
+    animation?: SnackbarAnimation;
+    /** Enter animation for this snackbar only. */
+    enterAnimation?: SnackbarAnimation;
+    /** Exit animation for this snackbar only. */
+    exitAnimation?: SnackbarAnimation;
     /** @default 'glass' */
     tone?: SnackbarTone;
     /** @default 'md' */
@@ -84,6 +128,11 @@ interface SnackbarRecord {
     readonly action: SnackbarAction | null;
     readonly dismissible: boolean;
     readonly progress: boolean;
+    readonly compact: boolean;
+    readonly layout: SnackbarLayout;
+    readonly animation: SnackbarAnimation;
+    readonly enterAnimation: SnackbarAnimation;
+    readonly exitAnimation: SnackbarAnimation;
     readonly className: string | undefined;
     readonly style: CSSProperties | undefined;
     readonly createdAt: number;
@@ -102,6 +151,16 @@ interface SnackbarStoreConfig {
     dismissible?: boolean;
     /** @default true */
     progress?: boolean;
+    /** Default `compact` value for new snackbars. @default false */
+    compact?: boolean;
+    /** Default layout for new snackbars. @default 'card' */
+    layout?: SnackbarLayout;
+    /** Default enter/exit animation. @default 'slide' */
+    animation?: SnackbarAnimation;
+    /** Default enter animation; falls back to `animation`. */
+    enterAnimation?: SnackbarAnimation;
+    /** Default exit animation; falls back to `animation`. */
+    exitAnimation?: SnackbarAnimation;
     /** @default 'glass' */
     tone?: SnackbarTone;
     /** Default size for new snackbars. @default 'md' */
@@ -114,6 +173,11 @@ interface ResolvedSnackbarStoreConfig {
     duration: number;
     dismissible: boolean;
     progress: boolean;
+    compact: boolean;
+    layout: SnackbarLayout;
+    animation: SnackbarAnimation;
+    enterAnimation: SnackbarAnimation;
+    exitAnimation: SnackbarAnimation;
     tone: SnackbarTone;
     size: SnackbarSize;
     maxVisible: number;
@@ -145,8 +209,15 @@ interface SnackbarStore {
     /** Internal-ish lifecycle hook, called by the viewport after the exit animation. */
     notifyExited(id: string): void;
     setPageHidden(hidden: boolean): void;
+    /** Whether the stack is collapsed into a single summary pill. */
+    getMinimized(): boolean;
+    getServerMinimized(): boolean;
+    /** Collapse (`true`) or expand (`false`) the visible stack. */
+    setMinimized(minimized: boolean): void;
 }
 type SnackbarPresetOptions = Omit<SnackbarOptions, 'message' | 'variant'>;
+/** `toast.single()` options: everything except the forced inline layout. */
+type ToastSingleOptions = Omit<SnackbarOptions, 'message' | 'layout'>;
 interface SnackbarApi {
     /** Queue a fully customised snackbar and return its id. */
     show(options: SnackbarOptions): string;
@@ -160,7 +231,18 @@ interface SnackbarApi {
     neutral(message: ReactNode, options?: SnackbarPresetOptions): string;
     loading(message: ReactNode, options?: SnackbarPresetOptions): string;
     custom(message: ReactNode, options?: SnackbarPresetOptions): string;
+    /**
+     * Message-only status line (`layout: 'inline'`): content width, one line,
+     * no title and no countdown. Ideal for instant feedback such as
+     * “Position set to top-center”.
+     */
+    single(message: ReactNode, options?: ToastSingleOptions): string;
     promise<T>(promise: Promise<T>, messages: SnackbarPromiseOptions<T>, options?: SnackbarOptions): Promise<T>;
+    /** Collapse the visible stack into one summary pill. */
+    minimize(): void;
+    /** Restore the full stack after `minimize()`. */
+    expand(): void;
+    isMinimized(): boolean;
     /** Escape hatch for scheduling, subscribing or advanced updates. */
     store: SnackbarStore;
 }
@@ -187,7 +269,18 @@ interface ToastApi {
     neutral(message: ReactNode, options?: ToastPresetOptions): string;
     loading(message: ReactNode, options?: ToastPresetOptions): string;
     custom(message: ReactNode, options?: ToastPresetOptions): string;
+    /**
+     * Message-only status line (`layout: 'inline'`): content width, one line,
+     * no title and no countdown. Ideal for instant feedback such as
+     * “Position set to top-center”.
+     */
+    single(message: ReactNode, options?: ToastSingleOptions): string;
     promise<T>(promise: Promise<T>, messages: SnackbarPromiseOptions<T>, options?: SnackbarOptions): Promise<T>;
+    /** Collapse the visible stack into one summary pill. */
+    minimize(): void;
+    /** Restore the full stack after `minimize()`. */
+    expand(): void;
+    isMinimized(): boolean;
     /** The store behind the global API (same instance the provider renders). */
     readonly store: SnackbarStore;
 }
@@ -218,6 +311,11 @@ interface SnackbarHostProps {
     closeLabel?: string;
     /** Accessible label for each notification region. @default 'Notifications' */
     regionLabel?: string;
+    /**
+     * Text shown on the collapsed pill. Defaults to
+     * `"1 notification"` / `"3 notifications"`.
+     */
+    minimizedLabel?: (count: number) => ReactNode;
     className?: string;
     style?: CSSProperties;
     /** @default 2147483000 */
@@ -237,6 +335,16 @@ interface SnackbarProviderProps extends Omit<SnackbarHostProps, 'store'> {
     dismissible?: boolean;
     /** @default true */
     progress?: boolean;
+    /** Render every snackbar as a single-line pill. @default false */
+    compact?: boolean;
+    /** Default layout for new snackbars. @default 'card' */
+    layout?: SnackbarLayout;
+    /** Default enter/exit animation. @default 'slide' */
+    animation?: SnackbarAnimation;
+    /** Default enter animation; falls back to `animation`. */
+    enterAnimation?: SnackbarAnimation;
+    /** Default exit animation; falls back to `animation`. */
+    exitAnimation?: SnackbarAnimation;
     /** @default 'glass' */
     tone?: SnackbarTone;
     /** Default size for new snackbars. @default 'md' */
@@ -259,9 +367,9 @@ declare function getDefaultStore(): SnackbarStore;
  */
 declare function setDefaultStore(store: SnackbarStore | null): void;
 
-declare function SnackbarHost({ store, maxVisible, offset, gap, width, theme, container, pauseOnHover, pauseOnFocus, pauseOnDocumentHidden, swipeToDismiss, swipeThreshold, icons, closeIcon, closeLabel, regionLabel, className, style, zIndex, dir, }: SnackbarHostProps): react.ReactPortal | null;
+declare function SnackbarHost({ store, maxVisible, offset, gap, width, theme, container, pauseOnHover, pauseOnFocus, pauseOnDocumentHidden, swipeToDismiss, swipeThreshold, icons, closeIcon, closeLabel, regionLabel, minimizedLabel, className, style, zIndex, dir, }: SnackbarHostProps): react.ReactPortal | null;
 
-declare function SnackbarProvider({ children, store: providedStore, position, duration, dismissible, progress, tone, size, maxVisible, ...hostProps }: SnackbarProviderProps): react.JSX.Element;
+declare function SnackbarProvider({ children, store: providedStore, position, duration, dismissible, progress, compact, layout, animation, enterAnimation, exitAnimation, tone, size, maxVisible, ...hostProps }: SnackbarProviderProps): react.JSX.Element;
 /** Imperative API for showing and managing snackbars. */
 declare function useSnackbar(): SnackbarApi;
 /** Low-level store access for subscriptions and advanced integrations. */
@@ -281,4 +389,4 @@ declare function useSnackbarStore(): SnackbarStore;
  */
 declare const toast: ToastApi;
 
-export { type ResolvedSnackbarStoreConfig, type SnackbarAction, type SnackbarApi, type SnackbarCloseReason, SnackbarHost, type SnackbarHostProps, type SnackbarOptions, type SnackbarPhase, type SnackbarPosition, type SnackbarPromiseContent, type SnackbarPromiseOptions, SnackbarProvider, type SnackbarProviderProps, type SnackbarRecord, type SnackbarSize, type SnackbarStore, type SnackbarStoreConfig, type SnackbarTheme, type SnackbarTone, type SnackbarVariant, type ToastApi, type ToastPresetOptions, createSnackbarStore, getDefaultStore, setDefaultStore, toast, useSnackbar, useSnackbarStore };
+export { type ResolvedSnackbarStoreConfig, type SnackbarAction, type SnackbarAnimation, type SnackbarApi, type SnackbarCloseReason, SnackbarHost, type SnackbarHostProps, type SnackbarLayout, type SnackbarOptions, type SnackbarPhase, type SnackbarPosition, type SnackbarPromiseContent, type SnackbarPromiseOptions, SnackbarProvider, type SnackbarProviderProps, type SnackbarRecord, type SnackbarSize, type SnackbarStore, type SnackbarStoreConfig, type SnackbarTheme, type SnackbarTone, type SnackbarVariant, type ToastApi, type ToastPresetOptions, type ToastSingleOptions, createSnackbarStore, getDefaultStore, setDefaultStore, toast, useSnackbar, useSnackbarStore };

package/dist/index.js

@@ -9,6 +9,10 @@ var DEFAULT_CONFIG = {
   duration: 5e3,
   dismissible: true,
   progress: true,
+  layout: "card",
+  animation: "slide",
+  enterAnimation: "slide",
+  exitAnimation: "slide",
   tone: "glass",
   size: "md",
   maxVisible: 3
@@ -36,28 +40,45 @@ 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
+function resolveLayout(layout, compact, fallback) {
+  if (layout !== void 0) return layout;
+  if (compact !== void 0) return compact ? "compact" : "card";
+  return fallback;
+}
+function resolveLayoutPatch(record, options) {
+  if (options.layout === void 0 && options.compact === void 0) return {};
+  const layout = resolveLayout(options.layout, options.compact, record.layout);
+  return { layout, compact: layout === "compact" };
+}
+function mergeConfig(previous, patch) {
+  const layout = resolveLayout(patch.layout, patch.compact, previous.layout);
+  return {
+    position: patch.position ?? previous.position,
+    duration: patch.duration !== void 0 ? normalizeDuration(patch.duration, previous.duration) : previous.duration,
+    dismissible: patch.dismissible ?? previous.dismissible,
+    progress: patch.progress ?? previous.progress,
+    compact: layout === "compact",
+    layout,
+    animation: patch.animation ?? previous.animation,
+    enterAnimation: patch.enterAnimation ?? patch.animation ?? previous.enterAnimation,
+    exitAnimation: patch.exitAnimation ?? patch.animation ?? previous.exitAnimation,
+    tone: patch.tone ?? previous.tone,
+    size: patch.size ?? previous.size,
+    maxVisible: patch.maxVisible !== void 0 ? Math.max(1, Math.floor(patch.maxVisible)) : previous.maxVisible
   };
+}
+function createSnackbarStore(initialConfig = {}) {
+  let config = mergeConfig(
+    DEFAULT_CONFIG,
+    initialConfig
+  );
   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;
+  let minimized = false;
   const emit = () => {
     for (const listener of listeners) listener();
   };
@@ -218,6 +239,7 @@ function createSnackbarStore(initialConfig = {}) {
       }
       return id;
     }
+    const layout = resolveLayout(options.layout, options.compact, config.layout);
     const record = {
       id,
       title: options.title,
@@ -231,6 +253,11 @@ function createSnackbarStore(initialConfig = {}) {
       action: options.action ?? null,
       dismissible: options.dismissible ?? config.dismissible,
       progress: options.progress ?? config.progress,
+      compact: layout === "compact",
+      layout,
+      animation: options.animation ?? config.animation,
+      enterAnimation: options.enterAnimation ?? options.animation ?? config.enterAnimation,
+      exitAnimation: options.exitAnimation ?? options.animation ?? config.exitAnimation,
       className: options.className,
       style: options.style,
       createdAt: Date.now(),
@@ -259,6 +286,14 @@ function createSnackbarStore(initialConfig = {}) {
       ...options.action !== void 0 ? { action: options.action } : null,
       ...options.dismissible !== void 0 ? { dismissible: options.dismissible } : null,
       ...options.progress !== void 0 ? { progress: options.progress } : null,
+      ...resolveLayoutPatch(record, options),
+      ...options.animation !== void 0 ? {
+        animation: options.animation,
+        enterAnimation: options.animation,
+        exitAnimation: options.animation
+      } : null,
+      ...options.enterAnimation !== void 0 ? { enterAnimation: options.enterAnimation } : null,
+      ...options.exitAnimation !== void 0 ? { exitAnimation: options.exitAnimation } : 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,
@@ -308,18 +343,7 @@ function createSnackbarStore(initialConfig = {}) {
     }
   };
   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
-    };
+    config = mergeConfig(config, patch);
   };
   const promise = (input, messages, options = {}) => {
     const loadingOptions = contentToOptions(messages.loading ?? "Loading\u2026");
@@ -370,7 +394,14 @@ function createSnackbarStore(initialConfig = {}) {
     resume,
     notifyShown,
     notifyExited,
-    setPageHidden
+    setPageHidden,
+    getMinimized: () => minimized,
+    getServerMinimized: () => false,
+    setMinimized(next) {
+      if (minimized === next) return;
+      minimized = next;
+      emit();
+    }
   };
 }
 
@@ -615,7 +646,10 @@ function SnackbarItem({
   };
   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 isInline = record.layout === "inline";
+  const isTimed = Number.isFinite(duration) && duration > 0;
+  const showProgress = record.layout === "card" && record.progress && isTimed;
+  const showClose = record.dismissible && (!isInline || !isTimed);
   const style = {
     ...record.style,
     "--prs-drag-x": `${dragX}px`,
@@ -635,6 +669,10 @@ function SnackbarItem({
       "data-dragging": dragging ? "true" : "false",
       "data-has-icon": showIcon ? "true" : "false",
       "data-dismissible": record.dismissible ? "true" : "false",
+      "data-compact": record.compact ? "true" : "false",
+      "data-layout": record.layout,
+      "data-enter": record.enterAnimation,
+      "data-exit": record.exitAnimation,
       "data-prs-id": record.id,
       "data-position": record.position,
       style,
@@ -683,7 +721,7 @@ function SnackbarItem({
                 className: "prs-item__content",
                 "data-has-title": title !== void 0 && title !== null ? "true" : "false",
                 children: [
-                  title !== void 0 && title !== null ? /* @__PURE__ */ jsx("div", { className: "prs-item__title", children: title }) : null,
+                  title !== void 0 && title !== null && !isInline ? /* @__PURE__ */ jsx("div", { className: "prs-item__title", children: title }) : null,
                   message !== void 0 && message !== null ? /* @__PURE__ */ jsx("div", { className: "prs-item__message", children: message }) : null,
                   action ? /* @__PURE__ */ jsx("div", { className: "prs-item__actions", children: /* @__PURE__ */ jsxs(
                     "button",
@@ -702,7 +740,7 @@ function SnackbarItem({
                 ]
               }
             ),
-            record.dismissible ? /* @__PURE__ */ jsx(
+            showClose ? /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -734,6 +772,9 @@ var POSITIONS = [
   "bottom-center",
   "bottom-right"
 ];
+function defaultMinimizedLabel(count) {
+  return `${count} notification${count === 1 ? "" : "s"}`;
+}
 function SnackbarHost({
   store,
   maxVisible = 3,
@@ -751,6 +792,7 @@ function SnackbarHost({
   closeIcon,
   closeLabel = "Dismiss notification",
   regionLabel = "Notifications",
+  minimizedLabel = defaultMinimizedLabel,
   className,
   style,
   zIndex = 2147483e3,
@@ -761,6 +803,11 @@ function SnackbarHost({
     store.getSnapshot,
     store.getServerSnapshot
   );
+  const minimized = useSyncExternalStore(
+    store.subscribe,
+    store.getMinimized,
+    store.getServerMinimized
+  );
   const [portalNode, setPortalNode] = useState(null);
   const regionRefs = useRef(/* @__PURE__ */ new Map());
   const topsRef = useRef(/* @__PURE__ */ new Map());
@@ -824,6 +871,7 @@ function SnackbarHost({
     else byPosition.set(record.position, [record]);
   }
   const limit = Math.max(1, Math.floor(maxVisible));
+  const minimizedPosition = records[0]?.position ?? null;
   const rootStyle = {
     "--prs-width": `${width}px`,
     "--prs-offset": `${offset}px`,
@@ -842,6 +890,32 @@ function SnackbarHost({
         children: POSITIONS.map((position) => {
           const items = byPosition.get(position);
           if (!items || items.length === 0) return null;
+          if (minimized) {
+            if (position !== minimizedPosition) return null;
+            return /* @__PURE__ */ jsx(
+              "section",
+              {
+                className: "prs-region prs-region--minimized",
+                "data-position": position,
+                "aria-label": regionLabel,
+                children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "prs-minimized",
+                    "data-count": items.length,
+                    onClick: () => store.setMinimized(false),
+                    title: "Expand notifications",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "prs-minimized__dot", "aria-hidden": "true" }),
+                      /* @__PURE__ */ jsx("span", { className: "prs-minimized__count", children: minimizedLabel(items.length) })
+                    ]
+                  }
+                )
+              },
+              position
+            );
+          }
           const visible = items.slice(0, limit);
           return /* @__PURE__ */ jsx(
             "section",
@@ -885,6 +959,11 @@ function SnackbarProvider({
   duration,
   dismissible,
   progress,
+  compact,
+  layout,
+  animation,
+  enterAnimation,
+  exitAnimation,
   tone,
   size,
   maxVisible,
@@ -906,11 +985,30 @@ function SnackbarProvider({
       duration,
       dismissible,
       progress,
+      compact,
+      layout,
+      animation,
+      enterAnimation,
+      exitAnimation,
       tone,
       size,
       maxVisible
     });
-  }, [store, position, duration, dismissible, progress, tone, size, maxVisible]);
+  }, [
+    store,
+    position,
+    duration,
+    dismissible,
+    progress,
+    compact,
+    layout,
+    animation,
+    enterAnimation,
+    exitAnimation,
+    tone,
+    size,
+    maxVisible
+  ]);
   const api = useMemo(() => {
     const preset2 = (variant) => (message, options = {}) => store.show({ ...options, message, variant });
     return {
@@ -925,12 +1023,16 @@ function SnackbarProvider({
       info: preset2("info"),
       neutral: preset2("neutral"),
       custom: preset2("custom"),
+      single: (message, options = {}) => store.show({ ...options, message, layout: "inline" }),
       loading: (message, options = {}) => store.show({
         ...options,
         message,
         variant: "loading",
         duration: options.duration !== void 0 ? options.duration : null
       }),
+      minimize: () => store.setMinimized(true),
+      expand: () => store.setMinimized(false),
+      isMinimized: () => store.getMinimized(),
       store
     };
   }, [store]);
@@ -988,6 +1090,7 @@ function createToast() {
   toast2.info = preset("info");
   toast2.neutral = preset("neutral");
   toast2.custom = preset("custom");
+  toast2.single = (message, options = {}) => getDefaultStore().show({ ...options, message, layout: "inline" });
   toast2.loading = (message, options = {}) => getDefaultStore().show({
     ...options,
     message,
@@ -995,6 +1098,9 @@ function createToast() {
     duration: options.duration !== void 0 ? options.duration : null
   });
   toast2.promise = (input, messages, options) => getDefaultStore().promise(input, messages, options);
+  toast2.minimize = () => getDefaultStore().setMinimized(true);
+  toast2.expand = () => getDefaultStore().setMinimized(false);
+  toast2.isMinimized = () => getDefaultStore().getMinimized();
   Object.defineProperty(toast2, "store", {
     get: getDefaultStore,
     enumerable: true