@agentero/design-system 0.5.0 → 0.6.0

package/src/toast/icons.js

@@ -0,0 +1,45 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/toast/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M10.5808 14.1462L8.25765 11.8231C8.1192 11.6846 7.94517 11.6138 7.73555 11.6106C7.52593 11.6074 7.34869 11.6782 7.20382 11.8231C7.05896 11.968 6.98653 12.1436 6.98653 12.35C6.98653 12.5564 7.05896 12.732 7.20382 12.8769L9.94805 15.6211C10.1288 15.8019 10.3397 15.8923 10.5808 15.8923C10.8218 15.8923 11.0327 15.8019 11.2134 15.6211L16.7769 10.0577C16.9153 9.91923 16.9862 9.7452 16.9894 9.53558C16.9926 9.32596 16.9218 9.14872 16.7769 9.00386C16.632 8.85899 16.4564 8.78656 16.25 8.78656C16.0436 8.78656 15.8679 8.85899 15.7231 9.00386L10.5808 14.1462ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29658C3.74667 7.14043 4.42342 6.13475 5.27825 5.27953C6.1331 4.4243 7.13834 3.74724 8.29398 3.24836C9.44959 2.74947 10.6844 2.50003 11.9983 2.50003C13.3122 2.50003 14.5473 2.74936 15.7034 3.24803C16.8596 3.7467 17.8652 4.42345 18.7205 5.27828C19.5757 6.13313 20.2527 7.13837 20.7516 8.29401C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7517C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.87501 17.675 6.32501C16.125 4.77501 14.2333 4.00001 12 4.00001C9.76664 4.00001 7.87498 4.77501 6.32498 6.32501C4.77498 7.87501 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })
+}), r = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M3.42555 20.4999C3.25605 20.4999 3.10382 20.4585 2.96887 20.3756C2.83392 20.2928 2.72897 20.1836 2.654 20.048C2.57602 19.9134 2.53312 19.7676 2.52532 19.6105C2.51752 19.4535 2.5599 19.2979 2.65245 19.1439L11.2132 4.35609C11.3057 4.20206 11.4216 4.08819 11.5607 4.01447C11.6998 3.94074 11.8462 3.90387 12.0001 3.90387C12.1539 3.90387 12.3004 3.94074 12.4395 4.01447C12.5786 4.08819 12.6944 4.20206 12.787 4.35609L21.3477 19.1439C21.4403 19.2979 21.4827 19.4535 21.4749 19.6105C21.4671 19.7676 21.4242 19.9134 21.3462 20.048C21.2712 20.1836 21.1663 20.2928 21.0313 20.3756C20.8964 20.4585 20.7441 20.4999 20.5746 20.4999H3.42555ZM4.4501 19H19.5501L12.0001 5.99997L4.4501 19ZM12.0001 17.8076C12.2289 17.8076 12.4208 17.7302 12.5756 17.5754C12.7304 17.4206 12.8078 17.2288 12.8078 17C12.8078 16.7711 12.7304 16.5793 12.5756 16.4245C12.4208 16.2697 12.2289 16.1923 12.0001 16.1923C11.7712 16.1923 11.5794 16.2697 11.4246 16.4245C11.2698 16.5793 11.1924 16.7711 11.1924 17C11.1924 17.2288 11.2698 17.4206 11.4246 17.5754C11.5794 17.7302 11.7712 17.8076 12.0001 17.8076ZM12.0004 15.1923C12.213 15.1923 12.3911 15.1204 12.5347 14.9767C12.6783 14.8329 12.7501 14.6548 12.7501 14.4423V10.9423C12.7501 10.7298 12.6782 10.5517 12.5344 10.4079C12.3906 10.2642 12.2124 10.1923 11.9998 10.1923C11.7872 10.1923 11.6091 10.2642 11.4655 10.4079C11.3219 10.5517 11.2501 10.7298 11.2501 10.9423V14.4423C11.2501 14.6548 11.322 14.8329 11.4658 14.9767C11.6096 15.1204 11.7878 15.1923 12.0004 15.1923Z" })
+}), i = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12.0003 16.75C12.2129 16.75 12.391 16.6781 12.5345 16.5343C12.6782 16.3906 12.75 16.2125 12.75 16V11.75C12.75 11.5375 12.6781 11.3593 12.5343 11.2155C12.3904 11.0718 12.2122 11 11.9998 11C11.7871 11 11.609 11.0718 11.4655 11.2155C11.3218 11.3593 11.25 11.5375 11.25 11.75V16C11.25 16.2125 11.3219 16.3906 11.4658 16.5343C11.6096 16.6781 11.7878 16.75 12.0003 16.75ZM12 9.2885C12.2288 9.2885 12.4207 9.21108 12.5755 9.05625C12.7303 8.90142 12.8077 8.70958 12.8077 8.48075C12.8077 8.25192 12.7303 8.06008 12.5755 7.90525C12.4207 7.75058 12.2288 7.67325 12 7.67325C11.7712 7.67325 11.5793 7.75058 11.4245 7.90525C11.2697 8.06008 11.1923 8.25192 11.1923 8.48075C11.1923 8.70958 11.2697 8.90142 11.4245 9.05625C11.5793 9.21108 11.7712 9.2885 12 9.2885ZM12.0017 21.5C10.6877 21.5 9.45267 21.2507 8.2965 20.752C7.14033 20.2533 6.13467 19.5766 5.2795 18.7218C4.42433 17.8669 3.74725 16.8617 3.24825 15.706C2.74942 14.5503 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45267 3.248 8.2965C3.74667 7.14033 4.42342 6.13467 5.27825 5.2795C6.13308 4.42433 7.13833 3.74725 8.294 3.24825C9.44967 2.74942 10.6844 2.5 11.9983 2.5C13.3123 2.5 14.5473 2.74933 15.7035 3.248C16.8597 3.74667 17.8653 4.42342 18.7205 5.27825C19.5757 6.13308 20.2528 7.13833 20.7518 8.294C21.2506 9.44967 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2507 14.5473 20.752 15.7035C20.2533 16.8597 19.5766 17.8653 18.7218 18.7205C17.8669 19.5757 16.8617 20.2528 15.706 20.7518C14.5503 21.2506 13.3156 21.5 12.0017 21.5Z" })
+}), a = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12 13.0634L8.75381 16.3096C8.60895 16.4545 8.4333 16.5253 8.22689 16.5221C8.02049 16.5189 7.84485 16.4449 7.69999 16.3C7.55512 16.1551 7.48269 15.9779 7.48269 15.7683C7.48269 15.5587 7.55512 15.3814 7.69999 15.2366L10.9366 12L7.69036 8.77883C7.5455 8.63396 7.47467 8.45672 7.47789 8.2471C7.48109 8.03749 7.55512 7.86024 7.69999 7.71538C7.84485 7.57051 8.0221 7.49808 8.23171 7.49808C8.44131 7.49808 8.61855 7.57051 8.76341 7.71538L12 10.9616L15.2212 7.71538C15.366 7.57051 15.5417 7.49808 15.7481 7.49808C15.9545 7.49808 16.1301 7.57051 16.275 7.71538C16.4301 7.87051 16.5077 8.05032 16.5077 8.2548C16.5077 8.45929 16.4301 8.63396 16.275 8.77883L13.0384 12L16.2846 15.2462C16.4295 15.391 16.5019 15.5667 16.5019 15.7731C16.5019 15.9795 16.4295 16.1551 16.2846 16.3C16.1295 16.4551 15.9497 16.5327 15.7452 16.5327C15.5407 16.5327 15.366 16.4551 15.2212 16.3L12 13.0634Z" })
+});
+//#endregion
+export { t as IconCheckCircle, a as IconCloseSmall, n as IconErrorOutline, i as IconInfoFilled, r as IconWarning };

package/src/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { Toast, toast, toastRecipe } from './toast';
+export type { ToastProps, ToastOptions, ToastType, ToastAction } from './toast';

package/src/toast/index.js

@@ -0,0 +1,2 @@
+import { Toast as e, toast as t, toastRecipe as n } from "./toast.js";
+export { e as Toast, t as toast, n as toastRecipe };

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 };