@agentero/design-system 0.5.1 → 0.7.0

package/src/toast/toast.d.ts

@@ -0,0 +1,324 @@
+import { ReactNode } from 'react';
+import { toast as sonnerToast } from 'sonner';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Style recipe for Toast using tailwind-variants. Multi-slot recipe whose
+ * variants (`layout`, `type`) drive the two layout treatments (`inline`,
+ * `expanded`) across the five semantic toast types. Compound variants paint
+ * the colored left rail that distinguishes the expanded layout per type.
+ *
+ * Exported for advanced composition (e.g., styling a custom element to match
+ * a Toast slot). Prefer rendering the `Toast` provider + calling `toast()`.
+ *
+ * @summary tailwind-variants recipe backing the Toast component styles
+ */
+export declare const toastRecipe: import('tailwind-variants').TVReturnType<{
+    layout: {
+        inline: {
+            root: string;
+            iconWrapper: string;
+            contentWrapper: string;
+            leading: string;
+            trailing: string;
+        };
+        expanded: {
+            root: string;
+            iconWrapper: string;
+            contentWrapper: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    type: {
+        neutral: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        error: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+        info: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    iconWrapper: string;
+    icon: string;
+    contentWrapper: string;
+    leading: string;
+    title: string;
+    description: string;
+    trailing: string;
+    actionBtn: string;
+}, undefined, {
+    layout: {
+        inline: {
+            root: string;
+            iconWrapper: string;
+            contentWrapper: string;
+            leading: string;
+            trailing: string;
+        };
+        expanded: {
+            root: string;
+            iconWrapper: string;
+            contentWrapper: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    type: {
+        neutral: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        error: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+        info: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    iconWrapper: string;
+    icon: string;
+    contentWrapper: string;
+    leading: string;
+    title: string;
+    description: string;
+    trailing: string;
+    actionBtn: string;
+}, import('tailwind-variants').TVReturnType<{
+    layout: {
+        inline: {
+            root: string;
+            iconWrapper: string;
+            contentWrapper: string;
+            leading: string;
+            trailing: string;
+        };
+        expanded: {
+            root: string;
+            iconWrapper: string;
+            contentWrapper: string;
+            leading: string;
+            trailing: string;
+        };
+    };
+    type: {
+        neutral: {
+            icon: string;
+        };
+        success: {
+            icon: string;
+        };
+        error: {
+            icon: string;
+        };
+        warning: {
+            icon: string;
+        };
+        info: {
+            icon: string;
+        };
+    };
+}, {
+    root: string;
+    iconWrapper: string;
+    icon: string;
+    contentWrapper: string;
+    leading: string;
+    title: string;
+    description: string;
+    trailing: string;
+    actionBtn: string;
+}, undefined, unknown, unknown, undefined>>;
+type ToastVariants = VariantProps<typeof toastRecipe>;
+/**
+ * Semantic type of a toast notification. Drives the built-in icon and the
+ * color applied to the expanded-layout left rail.
+ *
+ * @summary Toast semantic type union (`neutral`, `success`, `error`, `warning`, `info`)
+ */
+export type ToastType = NonNullable<ToastVariants['type']>;
+/** Structured action with a label and click handler, rendered as a secondary Button. */
+type ToastActionObject = {
+    label: ReactNode;
+    onClick: () => void;
+};
+/**
+ * Trailing action rendered next to the title. Pass `{ label, onClick }` for
+ * the built-in secondary Button, or any ReactNode to render a custom control.
+ *
+ * @summary Toast action — structured object or raw ReactNode
+ */
+export type ToastAction = ToastActionObject | ReactNode;
+/**
+ * Options passed to {@link toast} and its typed helpers. Controls the toast's
+ * content, layout, trailing actions, auto-dismiss duration, and id.
+ *
+ * @summary Options for the imperative `toast()` API
+ */
+export type ToastOptions = {
+    /** Optional secondary text shown below the title. */
+    description?: ReactNode;
+    /**
+     * Layout variant. Defaults to `'inline'`.
+     * - `'inline'` — compact single-line layout.
+     * - `'expanded'` — multi-line layout with a colored left rail.
+     */
+    variant?: 'inline' | 'expanded';
+    /** Custom icon that overrides the default type-based icon. */
+    icon?: ReactNode;
+    /**
+     * Optional primary action rendered in the trailing area. Pass
+     * `{ label, onClick }` for the built-in secondary Button, or any ReactNode
+     * for a custom control.
+     */
+    action?: ToastAction;
+    /** Optional cancel button rendered alongside `action`. */
+    cancel?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
+    /** Auto-dismiss duration in milliseconds. Overrides the `Toast` provider default. */
+    duration?: number;
+    /** Explicit toast id — useful for deduplication or programmatic dismissal via `toast.dismiss(id)`. */
+    id?: string | number;
+    /** Additional className merged onto the root element. Escape hatch — prefer `variant` and `type` for style decisions. */
+    className?: string;
+    /** Whether to show the dismiss (close) button. Defaults to `true`. */
+    dismissible?: boolean;
+};
+/**
+ * Imperative API for showing toast notifications. Calling `toast(title)`
+ * fires a neutral toast; the typed helpers (`toast.success`, `toast.error`,
+ * `toast.warning`, `toast.info`) apply the matching semantic icon and color.
+ *
+ * `toast.dismiss(id?)` dismisses a specific toast (or all of them when called
+ * without an id); `toast.loading` + `toast.promise` wire to sonner's async
+ * helpers; `toast.custom` is an escape hatch for fully-custom render output —
+ * reach for the typed helpers first.
+ *
+ * Requires a `<Toast />` provider mounted somewhere in the React tree.
+ *
+ * @summary Imperative `toast()` with typed semantic helpers and async utilities
+ *
+ * @example
+ * toast('Something happened');
+ *
+ * @example
+ * toast.success('Policy saved');
+ * toast.error('Save failed');
+ * toast.warning('License expiring soon');
+ * toast.info('Sync in progress');
+ *
+ * @example
+ * toast.error('Upload failed', {
+ *   variant: 'expanded',
+ *   description: 'The file could not be processed.',
+ *   action: { label: 'Retry', onClick: retry }
+ * });
+ *
+ * @example
+ * const id = toast.info('Uploading...');
+ * toast.dismiss(id);
+ *
+ * @example
+ * toast.promise(saveDocument(), {
+ *   loading: 'Saving...',
+ *   success: 'Saved',
+ *   error: 'Save failed'
+ * });
+ */
+type TypedToastFn = (title: ReactNode, options?: ToastOptions) => string | number;
+type ToastApi = TypedToastFn & {
+    success: TypedToastFn;
+    error: TypedToastFn;
+    warning: TypedToastFn;
+    info: TypedToastFn;
+    dismiss: typeof sonnerToast.dismiss;
+    custom: typeof sonnerToast.custom;
+    loading: typeof sonnerToast.loading;
+    promise: typeof sonnerToast.promise;
+};
+export declare const toast: ToastApi;
+/**
+ * Placement of the Toaster on the screen. Mirrors sonner's `position` prop.
+ *
+ * @summary Toaster screen position union
+ */
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * Props for the `Toast` provider. Exposes the sonner `Toaster` configuration
+ * surface the design system documents directly (`position`, `duration`,
+ * `className`, `dir`, `gap`, `offset`, `expand`, `visibleToasts`, `hotkey`,
+ * `richColors`, `invert`). Any additional props are forwarded to sonner via
+ * the underlying `<Toaster>` component.
+ *
+ * @summary Props accepted by the Toast provider
+ */
+export type ToastProps = {
+    /** Placement of the toaster on the screen. Defaults to `'bottom-right'`. */
+    position?: ToastPosition;
+    /** Default auto-dismiss duration in ms for toasts fired against this provider. Defaults to `5000`. */
+    duration?: number;
+    /** Text direction. Sonner forwards this to the rendered toaster root. */
+    dir?: 'auto' | 'ltr' | 'rtl';
+    /** Gap between stacked toasts, in pixels. */
+    gap?: number;
+    /** Offset from the screen edge, in pixels or as a CSS length. */
+    offset?: string | number;
+    /** When `true`, stack expands on hover instead of auto-collapsing. */
+    expand?: boolean;
+    /** Maximum number of toasts rendered at once before earlier ones dismiss. */
+    visibleToasts?: number;
+    /** Keyboard shortcut used to focus the toaster. */
+    hotkey?: string[];
+    /** When `true`, sonner paints colored backgrounds per type (DS uses its own icon tokens by default). */
+    richColors?: boolean;
+    /** When `true`, flips light/dark theme on the toaster root. */
+    invert?: boolean;
+    /** Additional className merged onto the sonner `<Toaster>` root. */
+    className?: string;
+};
+/**
+ * Toast provider. Renders the sonner `<Toaster />` configured for the
+ * {@link toast} imperative API. Mount it once near the root of your React
+ * tree (below any context providers that the toasts need, and above the
+ * rest of the app) so every call to `toast()` from anywhere in the tree
+ * renders into the same surface.
+ *
+ * Defaults: `position='bottom-right'`, `duration=5000`. The Toaster is sized
+ * to `23.75rem` (`[--width:23.75rem]`) and each list item stretches to that
+ * width (`[&>li]:w-full`) so the DS Toast fills the Toaster row rather than
+ * sonner's 356px default. The provider disables sonner's built-in close
+ * button (`closeButton={false}`) — dismissal is rendered inside each Toast
+ * by the DS component itself.
+ *
+ * Do **not** use Toast for persistent feedback — mount an `Alert` with
+ * `color="success|danger"` instead. Do **not** use Toast for form
+ * validation errors — render those inline with the form field.
+ *
+ * @summary Toast provider; mount once near the app root
+ *
+ * @example
+ * <Toast />
+ *
+ * @example
+ * <Toast position="top-center" duration={4000} />
+ */
+export declare const Toast: ({ position, duration, className, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/toast/toast.js

@@ -0,0 +1,163 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { IconCheckCircle as n, IconCloseSmall as r, IconErrorOutline as i, IconInfoFilled as a, IconWarning as o } from "./icons.js";
+import { tv as s } from "tailwind-variants";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Toaster as u, toast as d } from "sonner";
+//#region src/toast/toast.tsx
+var f = s({
+	slots: {
+		root: "w-full flex items-start border border-border-default-base-primary bg-white text-text-default-base-primary shadow-xs",
+		iconWrapper: "shrink-0",
+		icon: "size-6 [&_svg]:size-6 [&_path]:fill-current",
+		contentWrapper: "flex flex-1 min-w-0",
+		leading: "flex flex-1 min-w-0 text-sm leading-normal",
+		title: "font-semibold text-text-default-base-primary shrink-0",
+		description: "font-normal text-text-default-base-tertiary",
+		trailing: "flex items-center gap-2",
+		actionBtn: "min-w-0 shadow-xs"
+	},
+	variants: {
+		layout: {
+			inline: {
+				root: "rounded-lg p-2 gap-2 items-center",
+				iconWrapper: "pl-1",
+				contentWrapper: "flex-row items-center gap-0",
+				leading: "flex-col items-start gap-0",
+				trailing: "pl-2"
+			},
+			expanded: {
+				root: "rounded-md p-4 gap-1 [background-size:0.375rem_100%] bg-left bg-no-repeat",
+				iconWrapper: "-mt-px",
+				contentWrapper: "flex-col items-start gap-3",
+				leading: "flex-col items-start gap-0 px-2",
+				trailing: "px-2"
+			}
+		},
+		type: {
+			neutral: { icon: "text-icon-default-base-secondary" },
+			success: { icon: "text-icon-default-positive-primary" },
+			error: { icon: "text-icon-default-danger-primary" },
+			warning: { icon: "text-icon-default-warning-primary" },
+			info: { icon: "text-icon-default-info-primary" }
+		}
+	},
+	compoundVariants: [
+		{
+			layout: "expanded",
+			type: "neutral",
+			class: { root: "bg-[linear-gradient(var(--color-rail-neutral),var(--color-rail-neutral))]" }
+		},
+		{
+			layout: "expanded",
+			type: "success",
+			class: { root: "bg-[linear-gradient(var(--color-rail-success),var(--color-rail-success))]" }
+		},
+		{
+			layout: "expanded",
+			type: "error",
+			class: { root: "bg-[linear-gradient(var(--color-rail-danger),var(--color-rail-danger))]" }
+		},
+		{
+			layout: "expanded",
+			type: "warning",
+			class: { root: "bg-[linear-gradient(var(--color-rail-warning),var(--color-rail-warning))]" }
+		},
+		{
+			layout: "expanded",
+			type: "info",
+			class: { root: "bg-[linear-gradient(var(--color-rail-info),var(--color-rail-info))]" }
+		}
+	],
+	defaultVariants: {
+		layout: "inline",
+		type: "neutral"
+	}
+}), p = (e) => typeof e == "object" && !!e && "onClick" in e, m = {
+	neutral: /* @__PURE__ */ c(a, {}),
+	success: /* @__PURE__ */ c(n, {}),
+	info: /* @__PURE__ */ c(a, {}),
+	warning: /* @__PURE__ */ c(o, {}),
+	error: /* @__PURE__ */ c(i, {})
+}, h = ({ id: n, title: i, type: a = "neutral", variant: o = "inline", icon: s, description: u, action: h, cancel: g, className: _, dismissible: v = !0 }) => {
+	let y = f({
+		layout: o,
+		type: a
+	});
+	return /* @__PURE__ */ l("div", {
+		"data-slot": "toast",
+		className: e(y.root(), _),
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: y.iconWrapper(),
+				children: /* @__PURE__ */ c("span", {
+					className: y.icon(),
+					children: s ?? m[a]
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: y.contentWrapper(),
+				children: [/* @__PURE__ */ l("div", {
+					className: y.leading(),
+					children: [i && /* @__PURE__ */ c("h2", {
+						className: y.title(),
+						children: i
+					}), u && /* @__PURE__ */ c("p", {
+						className: y.description(),
+						children: u
+					})]
+				}), (h || g) && /* @__PURE__ */ l("div", {
+					className: y.trailing(),
+					children: [h && (p(h) ? /* @__PURE__ */ c(t, {
+						variant: "secondary",
+						className: y.actionBtn(),
+						onClick: () => {
+							h.onClick(), d.dismiss(n);
+						},
+						children: h.label
+					}) : h), g && /* @__PURE__ */ c(t, {
+						variant: "ghost",
+						onClick: () => {
+							g.onClick(), d.dismiss(n);
+						},
+						children: g.label
+					})]
+				})]
+			}),
+			v && /* @__PURE__ */ c(t, {
+				onClick: () => d.dismiss(n),
+				"aria-label": "Close",
+				variant: "ghost",
+				iconOnly: !0,
+				children: /* @__PURE__ */ c(r, {})
+			})
+		]
+	});
+}, g = (e, t, n) => {
+	let { duration: r, id: i, className: a, ...o } = n ?? {}, s = {};
+	return r !== void 0 && (s.duration = r), i !== void 0 && (s.id = i), d.custom((n) => /* @__PURE__ */ c(h, {
+		id: n,
+		title: e,
+		type: t,
+		className: a,
+		...o
+	}), s);
+}, _ = Object.assign((e, t) => g(e, void 0, t), {
+	success: (e, t) => g(e, "success", t),
+	error: (e, t) => g(e, "error", t),
+	warning: (e, t) => g(e, "warning", t),
+	info: (e, t) => g(e, "info", t),
+	dismiss: d.dismiss,
+	custom: d.custom,
+	loading: d.loading,
+	promise: d.promise
+}), v = ({ position: t = "bottom-right", duration: n = 5e3, className: r, ...i }) => /* @__PURE__ */ c(u, {
+	...i,
+	position: t,
+	duration: n,
+	closeButton: !1,
+	className: e("[--width:23.75rem]! [&>li]:w-full", r)
+});
+//#endregion
+export { v as Toast, _ as toast, f as toastRecipe };

package/theme/base.css

@@ -385,6 +385,8 @@
 
 	--color-border-default-disable-primary: var(--color-slate-100);
 
+	--color-border-menu-divider: #ebebef;
+
 	/* Text Tokens */
 	--color-text-input-normal: var(--color-slate-800);
 	--color-text-input-disable: var(--color-slate-300);
@@ -659,6 +661,21 @@
 	--color-icon-alert-ghost-dynamic: var(--color-orange-700);
 	--color-icon-alert-ghost-playful: var(--color-pink-600);
 
+	/* ========================================
+    * TOAST
+    * ======================================== */
+
+	/* Rail — colored left strip painted on expanded-layout toasts */
+	--color-rail-neutral: var(--color-neutrals-200);
+	--color-rail-success: var(--color-positive-500);
+	--color-rail-danger: var(--color-danger-500);
+	--color-rail-warning: var(--color-warning-500);
+	--color-rail-info: var(--color-blue-600);
+
+	/* Focus Ring */
+	--color-focus-ring-button-primary: var(--color-slate-800);
+	--color-focus-ring-button-destructive: var(--color-danger-500);
+
 	/* ========================================
     * STATUS BALL
     * ======================================== */
@@ -743,6 +760,12 @@
 	--animate-cmd-content-in: cmd-content-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
 	--animate-cmd-content-out: cmd-content-out 150ms ease-in forwards;
 	--animate-fade-in: fadeIn 0.3s forwards;
+	--animate-dropdown-slide-in: dropdownSlideIn 200ms ease-out;
+	--animate-dropdown-slide-out: dropdownSlideOut 150ms ease-in;
+	--animate-dropdown-slide-in-from-top: dropdownSlideInFromTop 200ms ease-out;
+	--animate-dropdown-slide-in-from-bottom: dropdownSlideInFromBottom 200ms ease-out;
+	--animate-dropdown-slide-in-from-left: dropdownSlideInFromLeft 200ms ease-out;
+	--animate-dropdown-slide-in-from-right: dropdownSlideInFromRight 200ms ease-out;
 
 	/* ========================================
     * Z-INDEX
@@ -858,6 +881,72 @@
 		}
 	}
 
+	@keyframes dropdownSlideIn {
+		0% {
+			opacity: 0;
+			transform: scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideOut {
+		0% {
+			opacity: 1;
+			transform: scale(1);
+		}
+		100% {
+			opacity: 0;
+			transform: scale(0.9);
+		}
+	}
+
+	@keyframes dropdownSlideInFromTop {
+		0% {
+			opacity: 0;
+			transform: translateY(-0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideInFromBottom {
+		0% {
+			opacity: 0;
+			transform: translateY(0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideInFromLeft {
+		0% {
+			opacity: 0;
+			transform: translateX(-0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+	}
+
+	@keyframes dropdownSlideInFromRight {
+		0% {
+			opacity: 0;
+			transform: translateX(0.5rem) scale(0.9);
+		}
+		100% {
+			opacity: 1;
+			transform: translateX(0) scale(1);
+		}
+	}
+
 	html {
 		/* body.md textStyle from Panda → text-base */
 		font-size: var(--text-base);