@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/toast/Toast.d.ts

@@ -1,29 +1,53 @@
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-import { ButtonProps } from "../buttons/Button";
-/** Severity. Sets the border tint and the default icon. */
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Severity (Constitution V-A color set, subset; the same members as `AlertVariant`). */
 export declare enum ToastVariant {
+    /** A neutral note (the default): `border.secondary`, an info glyph in `text.secondary`. */
     PRIMARY = "PRIMARY",
+    /** Done: `border.success`, a check glyph. */
     SUCCESS = "SUCCESS",
+    /** Needs attention: `border.warning`, a warning glyph. */
     WARNING = "WARNING",
+    /** Failed: `border.error`, a warning-circle glyph; announced assertively. */
     ERROR = "ERROR"
 }
-export interface ToastProps {
-    /** @default ToastVariant.PRIMARY */
+/** The one action a toast offers. */
+export interface ToastAction {
+    /** Button text ("Undo", "View", "Retry"). */
+    label: string;
+    /** Runs when the button is pressed. Inside the provider the toast is then dismissed. */
+    onClick: () => void;
+}
+export interface ToastProps extends AriaAttributes {
+    /**
+     * Severity: sets the hairline tint, the icon and how urgently it is announced.
+     * @default ToastVariant.PRIMARY
+     */
     variant?: ToastVariant;
-    /** Overrides the icon the variant would pick. Pass the component, not an element. */
+    /** The message ("Source saved"). One short line, medium weight. */
+    header: string;
+    /** Supporting text under the header. Rendered in a `Text`, so inline `Span`, `Code` and `Link` inherit its size and color. */
+    description?: ReactNode;
+    /** Replaces the variant's default icon. Pass the component, not an element. */
     icon?: PhosphorIcon;
-    /** Headline. A string is wrapped in `Text`; a node renders as-is. */
-    header: string | React.ReactNode;
-    /** Supporting line under the header. */
-    subheader: string | React.ReactNode;
-    /** Buttons in a row along the bottom. Each entry is full `ButtonProps`. */
-    actions?: ButtonProps[];
-    /** Adds a dismiss ×. `ToastProvider` supplies this — don't set it by hand. */
-    onClose?: () => void;
+    /** One action button under the text ("Undo", "View"). Choosing it runs `onClick`; inside the provider it also dismisses the toast. */
+    action?: ToastAction;
+    /**
+     * Shows a `Spinner` in place of the icon while the work it reports runs. Inside the provider a loading toast does not time out.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Shows the × button and is called when it is pressed. The provider passes it. */
+    onDismiss?: () => void;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * The toast card itself. You rarely render this directly — call `showToast`
- * from `useToast()` and let `ToastProvider` mount, stack and time it out.
- */
-declare const Toast: ({ variant, icon, header, subheader, actions, onClose, }: ToastProps) => import("react").JSX.Element;
+/** A toast card: severity icon, header, description, one action and a dismiss button. */
+declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Toast;

package/dist/toast/Toast.js

@@ -1,108 +1,149 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextVariant } from "../text/Text.js";
-import FlexItem from "../containers/FlexItem.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import FlexWrapper, { AlignItems, FlexDirection } from "../containers/FlexWrapper.js";
+import Spinner, { SpinnerSize, SpinnerVariant } from "../feedback/Spinner.js";
 /* empty css                */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckCircleIcon, SpinnerGapIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
+import { cx } from "@linaria/core";
+import { CheckCircleIcon, InfoIcon, WarningCircleIcon, WarningIcon, XIcon } from "@phosphor-icons/react";
 //#region src/toast/Toast.tsx
-/** Severity. Sets the border tint and the default icon. */
+/**
+* The toast card: a short, transient message that confirms or reports something the user just did
+* or that just happened. A severity (`variant`) tints the hairline and picks the icon; a one-line
+* `header`, an optional `description`, at most one `action` button and a dismiss button.
+*
+* Apps do not render it: they call `toast()` from `useToast()` under `GalaxyProvider`, whose
+* `ToastProvider` owns the queue, the timers, the announcements and the placement regions and
+* renders this card. The card has no motion and no live region of its own.
+*
+* A message tied to a place on the page that stays until its condition ends is an `Alert`.
+*/
+/** Severity (Constitution V-A color set, subset; the same members as `AlertVariant`). */
 var ToastVariant = /* @__PURE__ */ function(ToastVariant) {
+	/** A neutral note (the default): `border.secondary`, an info glyph in `text.secondary`. */
 	ToastVariant["PRIMARY"] = "PRIMARY";
+	/** Done: `border.success`, a check glyph. */
 	ToastVariant["SUCCESS"] = "SUCCESS";
+	/** Needs attention: `border.warning`, a warning glyph. */
 	ToastVariant["WARNING"] = "WARNING";
+	/** Failed: `border.error`, a warning-circle glyph; announced assertively. */
 	ToastVariant["ERROR"] = "ERROR";
 	return ToastVariant;
 }({});
-var _exp = () => ({ $hasActions }) => $hasActions ? "12px 12px 8px 12px" : "12px";
-var _exp2 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.background.tertiary).with("SUCCESS", () => theme.color.background.tertiary).with("WARNING", () => theme.color.background.tertiary).with("ERROR", () => theme.color.background.tertiary).exhaustive();
-var _exp3 = () => ({ theme, $variant }) => match($variant).with("PRIMARY", () => theme.color.border.secondary).with("SUCCESS", () => theme.color.border.success).with("WARNING", () => theme.color.border.warning).with("ERROR", () => theme.color.border.error).exhaustive();
-var StyledToast = withTheme(/*#__PURE__*/ styled("div")({
-	name: "StyledToast",
-	class: "sgmrm4",
-	propsAsIs: false,
-	vars: {
-		"sgmrm4-0": [_exp()],
-		"sgmrm4-1": [_exp2()],
-		"sgmrm4-2": [_exp3()]
-	}
-}));
-/**
-* The toast card itself. You rarely render this directly — call `showToast`
-* from `useToast()` and let `ToastProvider` mount, stack and time it out.
-*/
-var Toast = ({ variant = "PRIMARY", icon, header, subheader, actions, onClose }) => {
-	const renderIcon = () => {
-		if (icon) return /* @__PURE__ */ jsx(Icon, {
-			component: icon,
-			size: 16
-		});
-		return match(variant).with("PRIMARY", () => /* @__PURE__ */ jsx(Icon, {
-			component: SpinnerGapIcon,
-			size: 16
-		})).with("SUCCESS", () => /* @__PURE__ */ jsx(Icon, {
-			component: CheckCircleIcon,
-			variant: IconVariant.SUCCESS,
-			size: 16,
-			weight: IconWeight.FILL
-		})).with("WARNING", () => /* @__PURE__ */ jsx(Icon, {
-			component: WarningIcon,
-			variant: IconVariant.WARNING,
-			size: 16,
-			weight: IconWeight.FILL
-		})).with("ERROR", () => /* @__PURE__ */ jsx(Icon, {
-			component: WarningIcon,
-			variant: IconVariant.ERROR,
-			size: 16,
-			weight: IconWeight.FILL
-		})).exhaustive();
-	};
-	const hasActions = (actions && actions.length > 0) ?? false;
-	return /* @__PURE__ */ jsxs(StyledToast, {
-		$variant: variant,
-		$hasActions: hasActions,
-		children: [/* @__PURE__ */ jsxs(FlexWrapper, {
-			alignItems: AlignItems.START,
-			gap: 8,
-			children: [
-				/* @__PURE__ */ jsx(FlexWrapper, {
-					width: 20,
-					height: 20,
-					children: renderIcon()
+/** The severity word per variant: the icon's accessible name. `ToastProvider` keeps its own copy for the announcement. */
+var TOAST_VARIANT_TO_SEVERITY_LABEL_MAP = {
+	["PRIMARY"]: "Note",
+	["SUCCESS"]: "Success",
+	["WARNING"]: "Warning",
+	["ERROR"]: "Error"
+};
+/** Card width: the 1.x minimum. No width token exists (the Tooltip / Menu module-constant precedent). */
+/** The dismiss button's accessible name. */
+var DISMISS_LABEL = "Dismiss";
+/** The card. Declared before the variant record composed onto it (cascade order). */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Toast-rgmrm4",
+	propsAsIs: false
+});
+/** One `body_md` line tall, so the icon and the spinner center on the header line. */
+var IconSlot = /*#__PURE__*/ styled("span")({
+	name: "IconSlot",
+	class: "gx-Toast-IconSlot-i1q58c1q",
+	propsAsIs: false
+});
+/** One `body_md` line tall; the 20px `X_SMALL` button centers on the header line. */
+var DismissSlot = /*#__PURE__*/ styled("span")({
+	name: "DismissSlot",
+	class: "gx-Toast-DismissSlot-d1krjadz",
+	propsAsIs: false
+});
+/** Header, description and the action; the only part that shrinks. */
+var Content = /*#__PURE__*/ styled("div")({
+	name: "Content",
+	class: "gx-Toast-Content-c6ce3qp",
+	propsAsIs: false
+});
+/** The action row: 8px under the text (with `Content`'s 4px gap). */
+var Actions = /*#__PURE__*/ styled("div")({
+	name: "Actions",
+	class: "gx-Toast-Actions-ag1wow3",
+	propsAsIs: false
+});
+/** Hairline tint per severity. */
+var TOAST_VARIANT_TO_CSS_MAP = {
+	["PRIMARY"]: "gx-Toast-PRIMARY-p6k3lsc",
+	["SUCCESS"]: "gx-Toast-SUCCESS-s80taf",
+	["WARNING"]: "gx-Toast-WARNING-wsjmb31",
+	["ERROR"]: "gx-Toast-ERROR-e1ftugx"
+};
+/** Default glyph per severity. `ERROR` differs in shape from `WARNING`, so severity is never color-only. */
+var TOAST_VARIANT_TO_ICON_MAP = {
+	["PRIMARY"]: InfoIcon,
+	["SUCCESS"]: CheckCircleIcon,
+	["WARNING"]: WarningIcon,
+	["ERROR"]: WarningCircleIcon
+};
+/** Icon color role per severity. */
+var TOAST_VARIANT_TO_ICON_VARIANT_MAP = {
+	["PRIMARY"]: IconVariant.SECONDARY,
+	["SUCCESS"]: IconVariant.SUCCESS,
+	["WARNING"]: IconVariant.WARNING,
+	["ERROR"]: IconVariant.ERROR
+};
+/** A toast card: severity icon, header, description, one action and a dismiss button. */
+var Toast = forwardRef(function Toast({ variant = "PRIMARY", header, description, icon, action, isLoading = false, onDismiss, id, className, style, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id,
+		className: cx(TOAST_VARIANT_TO_CSS_MAP[variant], className),
+		style,
+		children: [
+			/* @__PURE__ */ jsx(IconSlot, { children: isLoading ? /* @__PURE__ */ jsx(Spinner, {
+				size: SpinnerSize.X_LARGE,
+				variant: SpinnerVariant.SECONDARY,
+				"aria-hidden": true
+			}) : /* @__PURE__ */ jsx(Icon, {
+				component: icon ?? TOAST_VARIANT_TO_ICON_MAP[variant],
+				size: 16,
+				weight: IconWeight.FILL,
+				variant: TOAST_VARIANT_TO_ICON_VARIANT_MAP[variant],
+				ariaLabel: TOAST_VARIANT_TO_SEVERITY_LABEL_MAP[variant]
+			}) }),
+			/* @__PURE__ */ jsxs(Content, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "p",
+					size: TextSize.BODY_MD,
+					weight: TextWeight.MEDIUM,
+					variant: TextVariant.PRIMARY,
+					children: header
 				}),
-				/* @__PURE__ */ jsx(FlexItem, {
-					grow: 1,
-					children: /* @__PURE__ */ jsxs(FlexWrapper, {
-						direction: FlexDirection.COLUMN,
-						gap: 4,
-						children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, { children: header }) : header, typeof subheader === "string" ? /* @__PURE__ */ jsx(Text, {
-							variant: TextVariant.TERTIARY,
-							children: subheader
-						}) : subheader]
-					})
+				description !== void 0 && /* @__PURE__ */ jsx(Text, {
+					as: "div",
+					size: TextSize.BODY_MD,
+					variant: TextVariant.SECONDARY,
+					children: description
 				}),
-				onClose && /* @__PURE__ */ jsx(Button, {
-					icon: XIcon,
-					variant: ButtonVariant.TERTIARY,
+				action !== void 0 && /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(Button, {
+					label: action.label,
 					size: ButtonSize.SMALL,
-					onClick: onClose
-				})
-			]
-		}), hasActions && /* @__PURE__ */ jsx(FlexWrapper, {
-			alignItems: AlignItems.CENTER,
-			gap: 8,
-			children: actions?.map((action, index) => /* @__PURE__ */ jsx(Button, {
-				label: action.label,
-				variant: action.variant ?? ButtonVariant.TERTIARY,
-				size: ButtonSize.SMALL,
-				onClick: action.onClick
-			}, index))
-		})]
+					variant: ButtonVariant.SECONDARY,
+					onClick: () => action.onClick()
+				}) })
+			] }),
+			onDismiss !== void 0 && /* @__PURE__ */ jsx(DismissSlot, { children: /* @__PURE__ */ jsx(Button, {
+				icon: XIcon,
+				variant: ButtonVariant.TERTIARY,
+				size: ButtonSize.X_SMALL,
+				ariaLabel: DISMISS_LABEL,
+				onClick: () => onDismiss()
+			}) })
+		]
 	});
-};
+});
+Toast.displayName = "Toast";
 //#endregion
 export { ToastVariant, Toast as default };

package/dist/toast/ToastProvider.d.ts

@@ -1,25 +1,25 @@
-import { PropsWithChildren } from "react";
-import { ToastVariant, type ToastProps } from "./Toast";
-/** What you pass to `showToast`. Every `ToastProps` field except `onClose`, which the provider owns. */
-export type ShowToastProps = Omit<ToastProps, "onClose"> & {
-    /** Milliseconds before auto-dismiss. Pass `0` to make it stay. @default 3000 */
-    timeout?: number;
-    /** Viewport offset. Toasts sharing the same four values stack together. */
-    top?: number | string;
-    left?: number | string;
-    right?: number | string;
-    bottom?: number | string;
-};
-export interface ToastContextProps {
-    /** Queue a toast. Returns its id, for dismissing it early via `hideToast`. */
-    showToast: (options: ShowToastProps) => string;
-    /** Dismiss one toast by id, or every toast when called with no argument. */
-    hideToast: (id?: string) => void;
-}
-export declare const ToastContext: import("react").Context<ToastContextProps | undefined>;
 /**
- * Owns the toast queue. Mount it once near the root, then call `showToast` from
- * `useToast()` anywhere below. Handles stacking, timers and dismissal.
+ * The toast root: one queue per React root, the timers, the screen-reader announcements and the
+ * placement regions. `GalaxyProvider` mounts it (inside `OverlayProvider`), so apps never do;
+ * mount it yourself only in a React root that has no `GalaxyProvider`. A nested `ToastProvider`
+ * reuses the outer queue.
+ *
+ * The regions (`ToastViewport`, the only toast module that imports `ScaleFade` and so
+ * `framer-motion`) load lazily with the first toast, so `GalaxyProvider` never requires the
+ * optional `framer-motion` peer. The two live regions are static, so they exist before the first
+ * toast, as live regions must.
+ *
+ * It renders no element around `children`. SSR: nothing renders on the server (`Portal`, and no
+ * entries); the store is created in render-time state, and timers and listeners start in effects.
  */
-export declare const ToastProvider: ({ children }: PropsWithChildren) => import("react").JSX.Element;
-export { ToastVariant };
+import { type ReactNode } from "react";
+export interface ToastProviderProps {
+    /** The app. Mounted by `GalaxyProvider`; mount it yourself only in a React root that has no `GalaxyProvider`. */
+    children: ReactNode;
+}
+/** Holds the toast queue and renders its regions and live regions. */
+declare function ToastProvider({ children }: ToastProviderProps): import("react").JSX.Element;
+declare namespace ToastProvider {
+    var displayName: string;
+}
+export default ToastProvider;