@simplybusiness/mobius 7.0.0 → 7.1.0

package/dist/types/src/components/Toast/Toast.d.ts

@@ -0,0 +1,13 @@
+import type { ToastOptions } from "./types";
+export declare const toast: {
+    /** Show an info toast */
+    info: (message: string, options?: ToastOptions) => string | number;
+    /** Show a success toast */
+    success: (message: string, options?: ToastOptions) => string | number;
+    /** Show a warning toast */
+    warning: (message: string, options?: ToastOptions) => string | number;
+    /** Show an error toast */
+    error: (message: string, options?: ToastOptions) => string | number;
+    /** Dismiss a specific toast by ID or all toasts */
+    dismiss: (toastId?: string | number) => string | number;
+};

package/dist/types/src/components/Toast/ToastOptionsDoc.d.ts

@@ -0,0 +1,9 @@
+import type { ToastOptions } from "./types";
+/**
+ * Documentation-only component for ToastOptions.
+ * Exists solely to provide ArgTypes for the toast() function options.
+ */
+export declare const ToastOptionsDoc: {
+    (_props: ToastOptions): null;
+    displayName: string;
+};

package/dist/types/src/components/Toast/Toaster.d.ts

@@ -0,0 +1,19 @@
+import type { ToastPosition } from "./types";
+export interface ToasterProps {
+    /** Position of the toast container */
+    position?: ToastPosition;
+    /** Whether to show the close (X) button on toasts */
+    closeButton?: boolean;
+    /** Whether toasts expand on hover */
+    expand?: boolean;
+    /** Duration in milliseconds before auto-dismiss (default: 4000) */
+    duration?: number;
+    /** Maximum number of visible toasts */
+    visibleToasts?: number;
+    /** Gap between toasts in pixels */
+    gap?: number;
+}
+export declare const Toaster: {
+    ({ position, closeButton, expand, duration, visibleToasts, gap, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/types/src/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+export { toast } from "./Toast";
+export { Toaster } from "./Toaster";
+export type { ToasterProps } from "./Toaster";
+export type { ToastOptions, ToastVariant, ToastPosition } from "./types";

package/dist/types/src/components/Toast/state.d.ts

@@ -0,0 +1,3 @@
+export declare const toastState: {
+    showCloseButton: boolean;
+};

package/dist/types/src/components/Toast/types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+export type ToastVariant = "info" | "success" | "warning" | "error";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export type ToastOptions = {
+    /** Title of the toast */
+    title?: string;
+    /** Description/body text of the toast */
+    description?: ReactNode;
+    /** Duration in milliseconds before auto-dismiss */
+    duration?: number;
+    /** Action button configuration */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Cancel button configuration */
+    cancel?: {
+        label: string;
+        onClick?: () => void;
+    };
+    /** Callback when toast is dismissed */
+    onDismiss?: () => void;
+    /** Callback when toast auto-closes */
+    onAutoClose?: () => void;
+    /** Whether to show the close button (defaults to Toaster's closeButton prop) */
+    showCloseButton?: boolean;
+};

package/dist/types/src/components/index.d.ts

@@ -43,6 +43,7 @@ export * from "./TextAreaInput";
 export * from "./TextField";
 export * from "./TextOrHTML";
 export * from "./Title";
+export * from "./Toast";
 export * from "./Trust";
 export * from "./ExpandableText";
 export * from "./VisuallyHidden";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -89,7 +89,8 @@
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",
     "react-accessible-dropdown-menu-hook": "^4.0.1",
-    "react-imask": "^7.6.1"
+    "react-imask": "^7.6.1",
+    "sonner": "^2.0.7"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx}": "eslint --fix"

package/src/components/Combobox/Combobox.tsx

@@ -210,6 +210,7 @@ const ComboboxInner = <T extends ComboboxOption>({
     blurTimeoutRef.current = setTimeout(() => {
       onBlur?.(e);
       setIsOpen(false);
+      setIsChanging(false);
     }, 150);
   };
 

package/src/components/Toast/Toast.css

@@ -0,0 +1,233 @@
+/* Toaster container positioning (keep Sonner's positioning logic) */
+[data-sonner-toaster] {
+  font-family: var(--font-family);
+}
+
+/* Base toast styles */
+.mobius-toast {
+  position: relative;
+  font-family: var(--font-family);
+  font-size: var(--font-size-regular);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  background-color: var(--color-background);
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-1);
+  box-shadow: var(--shadow-md);
+  padding: var(--size-md);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-sm);
+  width: var(--toast-width);
+  max-width: calc(100vw - var(--size-lg) * 2);
+  box-sizing: border-box;
+}
+
+/* Variant styles */
+.mobius-toast.--info {
+  border-color: var(--color-info);
+  background-color: var(--color-info-background);
+}
+
+.mobius-toast.--success {
+  border-color: var(--color-valid);
+  background-color: var(--color-valid-background);
+}
+
+.mobius-toast.--warning {
+  border-color: var(--color-warning);
+  background-color: var(--color-warning-background);
+}
+
+.mobius-toast.--error {
+  border-color: var(--color-error);
+  background-color: var(--color-error-background);
+}
+
+/* Icon */
+.mobius-toast__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
+}
+
+.mobius-toast__icon .mobius-icon {
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* Body wrapper for content + actions */
+.mobius-toast__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-sm);
+  flex: 1;
+  min-width: 0;
+  padding-right: var(--size-lg);
+}
+
+/* Content wrapper (title + description) */
+.mobius-toast__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-xxs);
+}
+
+/* Title */
+.mobius-toast__title {
+  font-size: var(--font-size-regular);
+  font-weight: 600;
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  margin: 0;
+}
+
+/* Description */
+.mobius-toast__description {
+  font-size: var(--font-size-regular);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  margin: 0;
+}
+
+/* Actions wrapper - separate row for buttons */
+.mobius-toast__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--size-xs);
+  flex-wrap: wrap;
+}
+
+/* Shared button styles */
+.mobius-toast__action,
+.mobius-toast__cancel {
+  font-family: var(--font-family);
+  font-size: var(--font-size-small);
+  font-weight: 600;
+  padding: var(--size-xs) var(--size-sm);
+  border-radius: var(--radius-1);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Action button (primary) */
+.mobius-toast__action {
+  background-color: var(--button-primary-color);
+  color: var(--button-primary-content-color);
+  border: none;
+}
+
+.mobius-toast__action:hover {
+  filter: brightness(0.9);
+}
+
+/* Action button variant colors */
+.mobius-toast.--info .mobius-toast__action {
+  background-color: var(--color-info);
+}
+
+.mobius-toast.--success .mobius-toast__action {
+  background-color: var(--color-valid);
+}
+
+.mobius-toast.--warning .mobius-toast__action {
+  background-color: var(--color-warning);
+}
+
+.mobius-toast.--error .mobius-toast__action {
+  background-color: var(--color-error);
+}
+
+/* Cancel button (secondary) */
+.mobius-toast__cancel {
+  background-color: transparent;
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.mobius-toast__cancel:hover {
+  background-color: var(--color-background-hover);
+}
+
+/* Cancel button variant border colors */
+.mobius-toast.--info .mobius-toast__cancel {
+  border-color: var(--color-info);
+  color: var(--color-info);
+}
+
+.mobius-toast.--success .mobius-toast__cancel {
+  border-color: var(--color-valid);
+  color: var(--color-valid);
+}
+
+.mobius-toast.--warning .mobius-toast__cancel {
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+.mobius-toast.--error .mobius-toast__cancel {
+  border-color: var(--color-error);
+  color: var(--color-error);
+}
+
+/* Close button */
+.mobius-toast__close {
+  position: absolute;
+  top: var(--size-md);
+  right: var(--size-sm);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-1);
+  cursor: pointer;
+  padding: var(--size-xxs);
+  width: var(--size-md);
+  height: var(--size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  transition: color 0.15s ease;
+}
+
+.mobius-toast__close:hover {
+  color: var(--color-text);
+}
+
+/* Close icon */
+.mobius-toast__close-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobius-toast__close-icon .mobius-icon {
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* Close button variant colors */
+.mobius-toast.--info .mobius-toast__close {
+  color: var(--color-info);
+}
+
+.mobius-toast.--success .mobius-toast__close {
+  color: var(--color-valid);
+}
+
+.mobius-toast.--warning .mobius-toast__close {
+  color: var(--color-warning);
+}
+
+.mobius-toast.--error .mobius-toast__close {
+  color: var(--color-error);
+}
+
+/* Close button hover - darken slightly */
+.mobius-toast .mobius-toast__close:hover {
+  filter: brightness(0.8);
+}

package/src/components/Toast/Toast.mdx

@@ -0,0 +1,131 @@
+{/* prettier-ignore-start */}
+
+import { Meta, Canvas, ArgTypes } from "@storybook/addon-docs/blocks";
+import { Toaster } from "./Toaster";
+import { ToastOptionsDoc } from "./ToastOptionsDoc";
+import * as ToastStories from "./Toast.stories";
+
+<Meta of={ToastStories} />
+
+# Toast
+
+Toast notifications provide brief, non-blocking feedback messages to users. Built on [Sonner](https://sonner.emilkowal.ski/), toasts automatically dismiss after a configurable duration and support keyboard dismissal.
+
+## Usage
+
+```tsx
+import { Toaster, toast } from "@simplybusiness/mobius";
+
+// 1. Add the Toaster component once at your app root
+function App() {
+  return (
+    <>
+      <Toaster />
+      <YourApp />
+    </>
+  );
+}
+
+// 2. Call toast functions from anywhere in your app
+function SaveButton() {
+  const handleSave = async () => {
+    await saveData();
+    toast.success("Your changes have been saved");
+  };
+
+  return <Button onClick={handleSave}>Save</Button>;
+}
+```
+
+## Variants
+
+Toasts come in four variants that match the Alert component styling:
+
+<Canvas of={ToastStories.AllVariants} />
+
+### Info
+
+Use for neutral informational messages.
+
+```tsx
+toast.info("Your session will expire in 5 minutes");
+```
+
+### Success
+
+Use to confirm successful operations.
+
+```tsx
+toast.success("Your changes have been saved");
+```
+
+### Warning
+
+Use to alert users to potential issues.
+
+```tsx
+toast.warning("Please review your input before continuing");
+```
+
+### Error
+
+Use to inform users of errors or failures.
+
+```tsx
+toast.error("Something went wrong. Please try again.");
+```
+
+## With Title
+
+Add a title for more structured messages:
+
+<Canvas of={ToastStories.WithTitle} />
+
+```tsx
+toast.success("Your quote has been saved and sent to your email.", {
+  title: "Quote saved",
+});
+```
+
+## Toaster Props
+
+<ArgTypes of={Toaster} />
+
+## Toast Options
+
+All toast functions accept an optional second parameter with these options:
+
+<ArgTypes of={ToastOptionsDoc} />
+
+## Dismissing Toasts
+
+Toasts can be dismissed in several ways:
+
+1. **Auto-dismiss**: After the configured duration (default 4 seconds)
+2. **Close button**: Clicking the X button
+3. **Keyboard**: Pressing Escape
+4. **Programmatically**: Using `toast.dismiss()`
+
+```tsx
+// Dismiss all toasts
+toast.dismiss();
+
+// Dismiss a specific toast by ID
+const toastId = toast.info("Loading...");
+toast.dismiss(toastId);
+```
+
+## Accessibility
+
+- Toasts use appropriate ARIA attributes for announcements
+- Keyboard dismissal with Escape key
+- Respects `prefers-reduced-motion` for animations
+- Focus management for action buttons
+
+## Interactive Demo
+
+Press 'R' to show a random toast in the interactive demo below:
+
+<Canvas of={ToastStories.InteractiveDemo} />
+
+{/* prettier-ignore-end */}