@lobehub/ui 4.31.0 → 4.32.0

package/es/Toast/Toast.mjs

@@ -2,7 +2,7 @@
 
 import Icon_default from "../Icon/Icon.mjs";
 import { useToastContext } from "./context.mjs";
-import { rootVariants, styles } from "./style.mjs";
+import { actionVariants, rootVariants, styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cssVar, cx } from "antd-style";
@@ -31,10 +31,13 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 	const toastData = toast.data;
 	const type = toastData?.type ?? "default";
 	const closable = toastData?.closable ?? true;
+	const hideCloseButton = toastData?.hideCloseButton ?? false;
+	const showCloseButton = closable && !hideCloseButton;
 	const icon = toastData?.icon;
 	const title = toast.title ?? toastData?.title;
 	const description = toast.description ?? toastData?.description;
 	const actionProps = toast.actionProps ?? toastData?.actionProps;
+	const actions = toastData?.actions;
 	const iconColor = typeColors[type];
 	const IconComponent = icon ?? typeIcons[type];
 	const isLoading = type === "loading";
@@ -51,6 +54,25 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 			})
 		});
 	};
+	const renderActions = () => {
+		if (actions && actions.length > 0) return /* @__PURE__ */ jsx("div", {
+			className: cx(styles.actions, classNames?.actions),
+			style: customStyles?.actions,
+			children: actions.map((action, index) => /* @__PURE__ */ jsx(Toast.Action, {
+				className: cx(actionVariants({ variant: action.variant ?? "primary" }), classNames?.action),
+				onClick: action.onClick,
+				style: customStyles?.action,
+				...action.props,
+				children: action.label
+			}, index))
+		});
+		if (actionProps) return /* @__PURE__ */ jsx(Toast.Action, {
+			className: cx(actionVariants({ variant: "primary" }), classNames?.action),
+			style: customStyles?.action,
+			...actionProps
+		});
+		return null;
+	};
 	return /* @__PURE__ */ jsx(Toast.Root, {
 		className: cx(rootVariants({ position }), classNames?.root),
 		style: {
@@ -59,21 +81,26 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 		},
 		swipeDirection,
 		toast,
-		children: /* @__PURE__ */ jsxs(Toast.Content, {
+		children: /* @__PURE__ */ jsx(Toast.Content, {
 			className: cx(styles.content, classNames?.content),
 			style: customStyles?.content,
-			children: [/* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsxs("div", {
 				className: styles.toastBody,
 				children: [renderIcon(), /* @__PURE__ */ jsxs("div", {
-					style: {
-						flex: 1,
-						minWidth: 0
-					},
+					className: styles.contentArea,
 					children: [
-						title && /* @__PURE__ */ jsx(Toast.Title, {
-							className: cx(styles.title, classNames?.title),
-							style: customStyles?.title,
-							children: title
+						/* @__PURE__ */ jsxs("div", {
+							className: styles.titleRow,
+							children: [title && /* @__PURE__ */ jsx(Toast.Title, {
+								className: cx(styles.title, classNames?.title),
+								style: customStyles?.title,
+								children: title
+							}), showCloseButton && /* @__PURE__ */ jsx(Toast.Close, {
+								"aria-label": "Close",
+								className: cx(styles.close, classNames?.close),
+								style: customStyles?.close,
+								children: /* @__PURE__ */ jsx(X, { size: 14 })
+							})]
 						}),
 						description && /* @__PURE__ */ jsx(Toast.Description, {
 							className: cx(styles.description, classNames?.description),
@@ -83,19 +110,10 @@ const ToastItem = memo(({ toast, classNames, styles: customStyles }) => {
 							},
 							children: description
 						}),
-						actionProps && /* @__PURE__ */ jsx(Toast.Action, {
-							className: cx(styles.action, classNames?.action),
-							style: customStyles?.action,
-							...actionProps
-						})
+						renderActions()
 					]
 				})]
-			}), closable && /* @__PURE__ */ jsx(Toast.Close, {
-				"aria-label": "Close",
-				className: cx(styles.close, classNames?.close),
-				style: customStyles?.close,
-				children: /* @__PURE__ */ jsx(X, { size: 14 })
-			})]
+			})
 		})
 	});
 });

package/es/Toast/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","names":["typeIcons: Record<ToastType, typeof Info>","typeColors: Record<ToastType, string>","Icon","BaseToast"],"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { type ReactNode, memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { rootVariants, styles } from './style';\nimport type { ToastOptions, ToastProps, ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n  default: Info,\n  error: XCircle,\n  info: Info,\n  loading: Loader2,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n  default: cssVar.colorText,\n  error: cssVar.colorError,\n  info: cssVar.colorInfo,\n  loading: cssVar.colorPrimary,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n  const { position, swipeDirection } = useToastContext();\n  const toastData = toast.data as ToastOptions | undefined;\n  const type = toastData?.type ?? 'default';\n  const closable = toastData?.closable ?? true;\n  const icon = toastData?.icon;\n  const title = toast.title ?? toastData?.title;\n  const description = toast.description ?? toastData?.description;\n  const actionProps = toast.actionProps ?? toastData?.actionProps;\n\n  const iconColor = typeColors[type];\n  const IconComponent = icon ?? typeIcons[type];\n  const isLoading = type === 'loading';\n\n  const renderIcon = (): ReactNode => {\n    if (!IconComponent) return null;\n    return (\n      <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n        <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n      </div>\n    );\n  };\n\n  return (\n    <BaseToast.Root\n      className={cx(rootVariants({ position }), classNames?.root)}\n      style={{\n        ...customStyles?.root,\n        ...toastData?.style,\n      }}\n      swipeDirection={swipeDirection}\n      toast={toast}\n    >\n      <BaseToast.Content\n        className={cx(styles.content, classNames?.content)}\n        style={customStyles?.content}\n      >\n        <div className={styles.toastBody}>\n          {renderIcon()}\n          <div style={{ flex: 1, minWidth: 0 }}>\n            {title && (\n              <BaseToast.Title\n                className={cx(styles.title, classNames?.title)}\n                style={customStyles?.title}\n              >\n                {title}\n              </BaseToast.Title>\n            )}\n            {description && (\n              <BaseToast.Description\n                className={cx(styles.description, classNames?.description)}\n                style={{\n                  marginBlockStart: title ? 4 : 0,\n                  ...customStyles?.description,\n                }}\n              >\n                {description}\n              </BaseToast.Description>\n            )}\n            {actionProps && (\n              <BaseToast.Action\n                className={cx(styles.action, classNames?.action)}\n                style={customStyles?.action}\n                {...actionProps}\n              />\n            )}\n          </div>\n        </div>\n        {closable && (\n          <BaseToast.Close\n            aria-label=\"Close\"\n            className={cx(styles.close, classNames?.close)}\n            style={customStyles?.close}\n          >\n            <X size={14} />\n          </BaseToast.Close>\n        )}\n      </BaseToast.Content>\n    </BaseToast.Root>\n  );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,YAA4C;CAChD,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACV;AAED,MAAMC,aAAwC;CAC5C,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,MAAM,OAAO;CACb,SAAS,OAAO;CAChB,SAAS,OAAO;CAChB,SAAS,OAAO;CACjB;AAED,MAAM,YAAY,MAAkB,EAAE,OAAO,YAAY,QAAQ,mBAAmB;CAClF,MAAM,EAAE,UAAU,mBAAmB,iBAAiB;CACtD,MAAM,YAAY,MAAM;CACxB,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,WAAW,WAAW,YAAY;CACxC,MAAM,OAAO,WAAW;CACxB,MAAM,QAAQ,MAAM,SAAS,WAAW;CACxC,MAAM,cAAc,MAAM,eAAe,WAAW;CACpD,MAAM,cAAc,MAAM,eAAe,WAAW;CAEpD,MAAM,YAAY,WAAW;CAC7B,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,YAAY,SAAS;CAE3B,MAAM,mBAA8B;AAClC,MAAI,CAAC,cAAe,QAAO;AAC3B,SACE,oBAAC;GAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAACC;IAAK,OAAO;IAAW,MAAM;IAAe,MAAM;IAAI,MAAM;KAAa;IACtE;;AAIV,QACE,oBAACC,MAAU;EACT,WAAW,GAAG,aAAa,EAAE,UAAU,CAAC,EAAE,YAAY,KAAK;EAC3D,OAAO;GACL,GAAG,cAAc;GACjB,GAAG,WAAW;GACf;EACe;EACT;YAEP,qBAACA,MAAU;GACT,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAClD,OAAO,cAAc;cAErB,qBAAC;IAAI,WAAW,OAAO;eACpB,YAAY,EACb,qBAAC;KAAI,OAAO;MAAE,MAAM;MAAG,UAAU;MAAG;;MACjC,SACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;OAC9C,OAAO,cAAc;iBAEpB;QACe;MAEnB,eACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,aAAa,YAAY,YAAY;OAC1D,OAAO;QACL,kBAAkB,QAAQ,IAAI;QAC9B,GAAG,cAAc;QAClB;iBAEA;QACqB;MAEzB,eACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,QAAQ,YAAY,OAAO;OAChD,OAAO,cAAc;OACrB,GAAI;QACJ;;MAEA;KACF,EACL,YACC,oBAACA,MAAU;IACT,cAAW;IACX,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IAC9C,OAAO,cAAc;cAErB,oBAAC,KAAE,MAAM,KAAM;KACC;IAEF;GACL;EAEnB;AAEF,UAAU,cAAc;AAExB,oBAAe"}
+{"version":3,"file":"Toast.mjs","names":["typeIcons: Record<ToastType, typeof Info>","typeColors: Record<ToastType, string>","Icon","BaseToast"],"sources":["../../src/Toast/Toast.tsx"],"sourcesContent":["'use client';\n\nimport { Toast as BaseToast } from '@base-ui/react/toast';\nimport { cssVar, cx } from 'antd-style';\nimport { AlertTriangle, CheckCircle, Info, Loader2, X, XCircle } from 'lucide-react';\nimport { type ReactNode, memo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useToastContext } from './context';\nimport { actionVariants, rootVariants, styles } from './style';\nimport type { ToastOptions, ToastProps, ToastType } from './type';\n\nconst typeIcons: Record<ToastType, typeof Info> = {\n  default: Info,\n  error: XCircle,\n  info: Info,\n  loading: Loader2,\n  success: CheckCircle,\n  warning: AlertTriangle,\n};\n\nconst typeColors: Record<ToastType, string> = {\n  default: cssVar.colorText,\n  error: cssVar.colorError,\n  info: cssVar.colorInfo,\n  loading: cssVar.colorPrimary,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n\nconst ToastItem = memo<ToastProps>(({ toast, classNames, styles: customStyles }) => {\n  const { position, swipeDirection } = useToastContext();\n  const toastData = toast.data as ToastOptions | undefined;\n  const type = toastData?.type ?? 'default';\n  const closable = toastData?.closable ?? true;\n  const hideCloseButton = toastData?.hideCloseButton ?? false;\n  const showCloseButton = closable && !hideCloseButton;\n  const icon = toastData?.icon;\n  const title = toast.title ?? toastData?.title;\n  const description = toast.description ?? toastData?.description;\n  const actionProps = toast.actionProps ?? toastData?.actionProps;\n  const actions = toastData?.actions;\n\n  const iconColor = typeColors[type];\n  const IconComponent = icon ?? typeIcons[type];\n  const isLoading = type === 'loading';\n\n  const renderIcon = (): ReactNode => {\n    if (!IconComponent) return null;\n    return (\n      <div className={cx(styles.icon, classNames?.icon)} style={customStyles?.icon}>\n        <Icon color={iconColor} icon={IconComponent} size={18} spin={isLoading} />\n      </div>\n    );\n  };\n\n  const renderActions = (): ReactNode => {\n    if (actions && actions.length > 0) {\n      return (\n        <div className={cx(styles.actions, classNames?.actions)} style={customStyles?.actions}>\n          {actions.map((action, index) => (\n            <BaseToast.Action\n              className={cx(\n                actionVariants({ variant: action.variant ?? 'primary' }),\n                classNames?.action,\n              )}\n              key={index}\n              onClick={action.onClick}\n              style={customStyles?.action}\n              {...action.props}\n            >\n              {action.label}\n            </BaseToast.Action>\n          ))}\n        </div>\n      );\n    }\n    if (actionProps) {\n      return (\n        <BaseToast.Action\n          className={cx(actionVariants({ variant: 'primary' }), classNames?.action)}\n          style={customStyles?.action}\n          {...actionProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <BaseToast.Root\n      className={cx(rootVariants({ position }), classNames?.root)}\n      style={{\n        ...customStyles?.root,\n        ...toastData?.style,\n      }}\n      swipeDirection={swipeDirection}\n      toast={toast}\n    >\n      <BaseToast.Content\n        className={cx(styles.content, classNames?.content)}\n        style={customStyles?.content}\n      >\n        <div className={styles.toastBody}>\n          {renderIcon()}\n          <div className={styles.contentArea}>\n            <div className={styles.titleRow}>\n              {title && (\n                <BaseToast.Title\n                  className={cx(styles.title, classNames?.title)}\n                  style={customStyles?.title}\n                >\n                  {title}\n                </BaseToast.Title>\n              )}\n              {showCloseButton && (\n                <BaseToast.Close\n                  aria-label=\"Close\"\n                  className={cx(styles.close, classNames?.close)}\n                  style={customStyles?.close}\n                >\n                  <X size={14} />\n                </BaseToast.Close>\n              )}\n            </div>\n            {description && (\n              <BaseToast.Description\n                className={cx(styles.description, classNames?.description)}\n                style={{\n                  marginBlockStart: title ? 4 : 0,\n                  ...customStyles?.description,\n                }}\n              >\n                {description}\n              </BaseToast.Description>\n            )}\n            {renderActions()}\n          </div>\n        </div>\n      </BaseToast.Content>\n    </BaseToast.Root>\n  );\n});\n\nToastItem.displayName = 'ToastItem';\n\nexport default ToastItem;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,YAA4C;CAChD,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CACV;AAED,MAAMC,aAAwC;CAC5C,SAAS,OAAO;CAChB,OAAO,OAAO;CACd,MAAM,OAAO;CACb,SAAS,OAAO;CAChB,SAAS,OAAO;CAChB,SAAS,OAAO;CACjB;AAED,MAAM,YAAY,MAAkB,EAAE,OAAO,YAAY,QAAQ,mBAAmB;CAClF,MAAM,EAAE,UAAU,mBAAmB,iBAAiB;CACtD,MAAM,YAAY,MAAM;CACxB,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,WAAW,WAAW,YAAY;CACxC,MAAM,kBAAkB,WAAW,mBAAmB;CACtD,MAAM,kBAAkB,YAAY,CAAC;CACrC,MAAM,OAAO,WAAW;CACxB,MAAM,QAAQ,MAAM,SAAS,WAAW;CACxC,MAAM,cAAc,MAAM,eAAe,WAAW;CACpD,MAAM,cAAc,MAAM,eAAe,WAAW;CACpD,MAAM,UAAU,WAAW;CAE3B,MAAM,YAAY,WAAW;CAC7B,MAAM,gBAAgB,QAAQ,UAAU;CACxC,MAAM,YAAY,SAAS;CAE3B,MAAM,mBAA8B;AAClC,MAAI,CAAC,cAAe,QAAO;AAC3B,SACE,oBAAC;GAAI,WAAW,GAAG,OAAO,MAAM,YAAY,KAAK;GAAE,OAAO,cAAc;aACtE,oBAACC;IAAK,OAAO;IAAW,MAAM;IAAe,MAAM;IAAI,MAAM;KAAa;IACtE;;CAIV,MAAM,sBAAiC;AACrC,MAAI,WAAW,QAAQ,SAAS,EAC9B,QACE,oBAAC;GAAI,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAAE,OAAO,cAAc;aAC3E,QAAQ,KAAK,QAAQ,UACpB,oBAACC,MAAU;IACT,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,WAAW,WAAW,CAAC,EACxD,YAAY,OACb;IAED,SAAS,OAAO;IAChB,OAAO,cAAc;IACrB,GAAI,OAAO;cAEV,OAAO;MALH,MAMY,CACnB;IACE;AAGV,MAAI,YACF,QACE,oBAACA,MAAU;GACT,WAAW,GAAG,eAAe,EAAE,SAAS,WAAW,CAAC,EAAE,YAAY,OAAO;GACzE,OAAO,cAAc;GACrB,GAAI;IACJ;AAGN,SAAO;;AAGT,QACE,oBAACA,MAAU;EACT,WAAW,GAAG,aAAa,EAAE,UAAU,CAAC,EAAE,YAAY,KAAK;EAC3D,OAAO;GACL,GAAG,cAAc;GACjB,GAAG,WAAW;GACf;EACe;EACT;YAEP,oBAACA,MAAU;GACT,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;GAClD,OAAO,cAAc;aAErB,qBAAC;IAAI,WAAW,OAAO;eACpB,YAAY,EACb,qBAAC;KAAI,WAAW,OAAO;;MACrB,qBAAC;OAAI,WAAW,OAAO;kBACpB,SACC,oBAACA,MAAU;QACT,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;QAC9C,OAAO,cAAc;kBAEpB;SACe,EAEnB,mBACC,oBAACA,MAAU;QACT,cAAW;QACX,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;QAC9C,OAAO,cAAc;kBAErB,oBAAC,KAAE,MAAM,KAAM;SACC;QAEhB;MACL,eACC,oBAACA,MAAU;OACT,WAAW,GAAG,OAAO,aAAa,YAAY,YAAY;OAC1D,OAAO;QACL,kBAAkB,QAAQ,IAAI;QAC9B,GAAG,cAAc;QAClB;iBAEA;QACqB;MAEzB,eAAe;;MACZ;KACF;IACY;GACL;EAEnB;AAEF,UAAU,cAAc;AAExB,oBAAe"}

package/es/Toast/imperative.d.mts

@@ -1,5 +1,5 @@
 import { ToastAPI, ToastPosition } from "./type.mjs";
-import * as react84 from "react";
+import * as react9 from "react";
 
 //#region src/Toast/imperative.d.ts
 declare const toast: ToastAPI;
@@ -31,14 +31,14 @@ interface ToastHostProps {
    */
   swipeDirection?: ('left' | 'right' | 'up' | 'down') | ('left' | 'right' | 'up' | 'down')[];
 }
-declare const ToastHost: react84.MemoExoticComponent<({
+declare const ToastHost: react9.MemoExoticComponent<({
   root,
   className,
   duration,
   limit,
   position,
   swipeDirection
-}: ToastHostProps) => react84.ReactPortal | null>;
+}: ToastHostProps) => react9.ReactPortal | null>;
 declare const useToast: () => ToastAPI;
 //#endregion
 export { TOAST_CONTAINER_ATTR, ToastHost, ToastHostProps, toast, useToast };

package/es/Toast/index.d.mts

@@ -1,3 +1,3 @@
-import { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./type.mjs";
+import { ToastAPI, ToastAction, ToastActionVariant, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./type.mjs";
 import { TOAST_CONTAINER_ATTR, ToastHost, ToastHostProps, toast, useToast } from "./imperative.mjs";
-export { TOAST_CONTAINER_ATTR, ToastAPI, ToastHost, type ToastHostProps, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType, toast, useToast };
+export { TOAST_CONTAINER_ATTR, ToastAPI, ToastAction, ToastActionVariant, ToastHost, type ToastHostProps, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType, toast, useToast };

package/es/Toast/style.mjs

@@ -7,11 +7,11 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     cursor: pointer;
 
     display: inline-flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
 
     height: 28px;
-    margin-block-start: 8px;
     padding-inline: 12px;
     border: none;
     border-radius: ${cssVar$1.borderRadiusSM};
@@ -19,11 +19,50 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     font-size: 12px;
     font-weight: 500;
     line-height: 1;
+
+    transition:
+      background 0.2s,
+      color 0.2s;
+
+    &:focus-visible {
+      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
+      outline-offset: 1px;
+    }
+  `,
+	actionDanger: css$1`
     color: ${cssVar$1.colorTextLightSolid};
+    background: ${cssVar$1.colorError};
 
-    background: ${cssVar$1.colorPrimary};
+    &:hover {
+      background: ${cssVar$1.colorErrorHover};
+    }
+
+    &:active {
+      background: ${cssVar$1.colorErrorActive};
+    }
 
-    transition: background 0.2s;
+    &:focus-visible {
+      outline-color: ${cssVar$1.colorErrorBorder};
+    }
+  `,
+	actionGhost: css$1`
+    border: 1px solid ${cssVar$1.colorBorder};
+    color: ${cssVar$1.colorText};
+    background: transparent;
+
+    &:hover {
+      border-color: ${cssVar$1.colorPrimary};
+      color: ${cssVar$1.colorPrimary};
+    }
+
+    &:active {
+      border-color: ${cssVar$1.colorPrimaryActive};
+      color: ${cssVar$1.colorPrimaryActive};
+    }
+  `,
+	actionPrimary: css$1`
+    color: ${cssVar$1.colorTextLightSolid};
+    background: ${cssVar$1.colorPrimary};
 
     &:hover {
       background: ${cssVar$1.colorPrimaryHover};
@@ -32,25 +71,53 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     &:active {
       background: ${cssVar$1.colorPrimaryActive};
     }
+  `,
+	actionSecondary: css$1`
+    color: ${cssVar$1.colorText};
+    background: ${cssVar$1.colorFillSecondary};
+
+    &:hover {
+      background: ${cssVar$1.colorFillTertiary};
+    }
 
-    &:focus-visible {
-      outline: 2px solid ${cssVar$1.colorPrimaryBorder};
-      outline-offset: 1px;
+    &:active {
+      background: ${cssVar$1.colorFill};
+    }
+  `,
+	actionText: css$1`
+    color: ${cssVar$1.colorPrimary};
+    background: transparent;
+
+    &:hover {
+      background: ${cssVar$1.colorFillTertiary};
+    }
+
+    &:active {
+      background: ${cssVar$1.colorFillSecondary};
     }
+  `,
+	actions: css$1`
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0;
+    gap: 8px;
+    align-items: center;
+    align-self: flex-end;
+    justify-content: flex-end;
+
+    margin-block-start: 8px;
   `,
 	close: css$1`
     cursor: pointer;
 
-    position: absolute;
-    inset-block-start: 8px;
-    inset-inline-end: 8px;
-
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
 
     width: 20px;
     height: 20px;
+    margin-inline-start: auto;
     padding: 0;
     border: none;
     border-radius: ${cssVar$1.borderRadiusSM};
@@ -79,6 +146,12 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
       pointer-events: auto;
       opacity: 1;
     }
+  `,
+	contentArea: css$1`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
   `,
 	description: css$1`
     margin: 0;
@@ -111,7 +184,6 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     height: var(--toast-collapsed-height);
     padding-block: 12px;
     padding-inline: 16px;
-    padding-inline-end: 32px;
     border-radius: ${cssVar$1.borderRadiusLG};
 
     color: ${cssVar$1.colorText};
@@ -222,6 +294,11 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
     font-weight: 500;
     line-height: 1.5;
     color: ${cssVar$1.colorText};
+  `,
+	titleRow: css$1`
+    display: flex;
+    gap: 8px;
+    align-items: center;
   `,
 	toastBody: css$1`
     display: flex;
@@ -290,7 +367,17 @@ const rootVariants = cva(styles.root, {
 		"top-right": styles.rootTop
 	} }
 });
+const actionVariants = cva(styles.action, {
+	defaultVariants: { variant: "primary" },
+	variants: { variant: {
+		danger: styles.actionDanger,
+		ghost: styles.actionGhost,
+		primary: styles.actionPrimary,
+		secondary: styles.actionSecondary,
+		text: styles.actionText
+	} }
+});
 
 //#endregion
-export { rootVariants, styles, viewportVariants };
+export { actionVariants, rootVariants, styles, viewportVariants };
 //# sourceMappingURL=style.mjs.map

package/es/Toast/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    margin-block-start: 8px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n    color: ${cssVar.colorTextLightSolid};\n\n    background: ${cssVar.colorPrimary};\n\n    transition: background 0.2s;\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 8px;\n    inset-inline-end: 8px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    padding-inline-end: 32px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1100;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;;;;;;;;;;;qBAWQA,SAAO,eAAe;;;;;aAK9BA,SAAO,oBAAoB;;kBAEtBA,SAAO,aAAa;;;;;oBAKlBA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;;2BAInBA,SAAO,mBAAmB;;;;CAKnD,OAAO,KAAG;;;;;;;;;;;;;;;qBAeSA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;CAI5C,SAAS,KAAG;;;;;;;;;;;;;;CAeZ,aAAa,KAAG;;;;aAILA,SAAO,mBAAmB;;CAGrC,MAAM,KAAG;;;;;;CAOT,MAAM,KAAG;;;;;;;;;;;;;;;;;;;;qBAoBUA,SAAO,eAAe;;aAE9BA,SAAO,UAAU;;kBAEZA,SAAO,gBAAgB;;;qCAGJA,SAAO,aAAa;4CACbA,SAAO,aAAa;4CACpBA,SAAO,aAAa;0CACtBA,SAAO,aAAa;4CAClBA,SAAO,aAAa;6CACnBA,SAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,KAAG;;;;;;aAMCA,SAAO,UAAU;;CAG5B,WAAW,KAAG;;;;;CAMd,UAAU,KAAG;;;;;;;;;;;;;CAcb,gBAAgB,KAAG;;;;;CAMnB,oBAAoB,KAAG;;;;CAKvB,qBAAqB,KAAG;;;;CAKxB,aAAa,KAAG;;;;;CAMhB,iBAAiB,KAAG;;;;CAKpB,kBAAkB,KAAG;;;;CAItB,EAAE;AAEH,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Toast/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  action: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    height: 28px;\n    padding-inline: 12px;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition:\n      background 0.2s,\n      color 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  actionDanger: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorError};\n\n    &:hover {\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorErrorActive};\n    }\n\n    &:focus-visible {\n      outline-color: ${cssVar.colorErrorBorder};\n    }\n  `,\n\n  actionGhost: css`\n    border: 1px solid ${cssVar.colorBorder};\n    color: ${cssVar.colorText};\n    background: transparent;\n\n    &:hover {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    &:active {\n      border-color: ${cssVar.colorPrimaryActive};\n      color: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionPrimary: css`\n    color: ${cssVar.colorTextLightSolid};\n    background: ${cssVar.colorPrimary};\n\n    &:hover {\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active {\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  actionSecondary: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillSecondary};\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFill};\n    }\n  `,\n\n  actionText: css`\n    color: ${cssVar.colorPrimary};\n    background: transparent;\n\n    &:hover {\n      background: ${cssVar.colorFillTertiary};\n    }\n\n    &:active {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  actions: css`\n    display: flex;\n    flex-grow: 1;\n    flex-shrink: 0;\n    gap: 8px;\n    align-items: center;\n    align-self: flex-end;\n    justify-content: flex-end;\n\n    margin-block-start: 8px;\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 20px;\n    height: 20px;\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 0.2s;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n\n  content: css`\n    overflow: hidden;\n    transition: opacity 0.2s;\n\n    &[data-behind] {\n      pointer-events: none;\n      opacity: 0;\n    }\n\n    &[data-expanded] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n  `,\n\n  contentArea: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-width: 0;\n  `,\n\n  description: css`\n    margin: 0;\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  root: css`\n    --toast-gap: 12px;\n    --toast-peek: 12px;\n    --toast-scale: calc(1 - var(--toast-index) * 0.05);\n    --toast-shrink: calc(1 - var(--toast-scale));\n    --toast-collapsed-height: var(--toast-frontmost-height, var(--toast-height));\n\n    cursor: default;\n    user-select: none;\n\n    position: absolute;\n    z-index: calc(1000 - var(--toast-index));\n    inset-inline: 0;\n\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--toast-collapsed-height);\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-radius: ${cssVar.borderRadiusLG};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    background-clip: padding-box;\n    box-shadow:\n      0 0 0 1px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 1px 1px -0.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 3px 3px -1.5px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 6px 6px -3px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 12px 12px -6px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent),\n      0 24px 24px -12px color-mix(in srgb, ${cssVar.colorBgSolid} 3%, transparent);\n\n    transition:\n      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 0.4s,\n      height 0.15s;\n\n    /* Fill gap between stacked toasts to prevent hover flicker */\n    &::after {\n      content: '';\n      position: absolute;\n      inset-inline: 0;\n      height: calc(var(--toast-gap) + var(--toast-peek) + 8px);\n    }\n\n    &[data-limited] {\n      opacity: 0;\n    }\n\n    &[data-swiping] {\n      transition: none;\n    }\n  `,\n\n  // Bottom positions - stack upward\n  rootBottom: css`\n    inset-block: auto 0;\n    transform-origin: bottom center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) -\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-start: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) * -1 + var(--toast-index) *\n              var(--toast-gap) * -1\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(150%);\n      opacity: 0;\n    }\n  `,\n\n  // Top positions - stack downward\n  rootTop: css`\n    inset-block: 0 auto;\n    transform-origin: top center;\n    transform: translateX(var(--toast-swipe-movement-x))\n      translateY(\n        calc(\n          var(--toast-swipe-movement-y) + (var(--toast-index) * var(--toast-peek)) +\n            (var(--toast-shrink) * var(--toast-collapsed-height))\n        )\n      )\n      scale(var(--toast-scale));\n\n    &::after {\n      inset-block-end: 100%;\n    }\n\n    &[data-expanded] {\n      transform: translateX(var(--toast-swipe-movement-x))\n        translateY(\n          calc(\n            var(--toast-swipe-movement-y) + var(--toast-offset-y) + var(--toast-index) *\n              var(--toast-gap)\n          )\n        )\n        scale(1);\n      height: var(--toast-height);\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translateY(-150%);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  titleRow: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n  `,\n\n  toastBody: css`\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1100;\n\n    width: 360px;\n    max-width: calc(100vw - 32px);\n\n    outline: 0;\n\n    @media (width <= 480px) {\n      width: calc(100vw - 32px);\n    }\n  `,\n\n  viewportBottom: css`\n    inset-block-end: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportBottomLeft: css`\n    inset-block-end: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportBottomRight: css`\n    inset-block-end: 16px;\n    inset-inline-end: 16px;\n  `,\n\n  viewportTop: css`\n    inset-block-start: 16px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n  `,\n\n  viewportTopLeft: css`\n    inset-block-start: 16px;\n    inset-inline-start: 16px;\n  `,\n\n  viewportTopRight: css`\n    inset-block-start: 16px;\n    inset-inline-end: 16px;\n  `,\n}));\n\nexport const viewportVariants = cva(styles.viewport, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.viewportBottom,\n      'bottom-left': styles.viewportBottomLeft,\n      'bottom-right': styles.viewportBottomRight,\n      'top': styles.viewportTop,\n      'top-left': styles.viewportTopLeft,\n      'top-right': styles.viewportTopRight,\n    },\n  },\n});\n\nexport const rootVariants = cva(styles.root, {\n  defaultVariants: {\n    position: 'bottom-right',\n  },\n  variants: {\n    position: {\n      'bottom': styles.rootBottom,\n      'bottom-left': styles.rootBottom,\n      'bottom-right': styles.rootBottom,\n      'top': styles.rootTop,\n      'top-left': styles.rootTop,\n      'top-right': styles.rootTop,\n    },\n  },\n});\n\nexport const actionVariants = cva(styles.action, {\n  defaultVariants: {\n    variant: 'primary',\n  },\n  variants: {\n    variant: {\n      danger: styles.actionDanger,\n      ghost: styles.actionGhost,\n      primary: styles.actionPrimary,\n      secondary: styles.actionSecondary,\n      text: styles.actionText,\n    },\n  },\n});\n"],"mappings":";;;;AAGA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,QAAQ,KAAG;;;;;;;;;;;qBAWQA,SAAO,eAAe;;;;;;;;;;;2BAWhBA,SAAO,mBAAmB;;;;CAKnD,cAAc,KAAG;aACNA,SAAO,oBAAoB;kBACtBA,SAAO,WAAW;;;oBAGhBA,SAAO,gBAAgB;;;;oBAIvBA,SAAO,iBAAiB;;;;uBAIrBA,SAAO,iBAAiB;;;CAI7C,aAAa,KAAG;wBACMA,SAAO,YAAY;aAC9BA,SAAO,UAAU;;;;sBAIRA,SAAO,aAAa;eAC3BA,SAAO,aAAa;;;;sBAIbA,SAAO,mBAAmB;eACjCA,SAAO,mBAAmB;;;CAIvC,eAAe,KAAG;aACPA,SAAO,oBAAoB;kBACtBA,SAAO,aAAa;;;oBAGlBA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;CAI5C,iBAAiB,KAAG;aACTA,SAAO,UAAU;kBACZA,SAAO,mBAAmB;;;oBAGxBA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,UAAU;;;CAInC,YAAY,KAAG;aACJA,SAAO,aAAa;;;;oBAIbA,SAAO,kBAAkB;;;;oBAIzBA,SAAO,mBAAmB;;;CAI5C,SAAS,KAAG;;;;;;;;;;;CAYZ,OAAO,KAAG;;;;;;;;;;;;;qBAaSA,SAAO,eAAe;;aAE9BA,SAAO,kBAAkB;;;;;;;eAOvBA,SAAO,UAAU;oBACZA,SAAO,mBAAmB;;;CAI5C,SAAS,KAAG;;;;;;;;;;;;;;CAeZ,aAAa,KAAG;;;;;;CAOhB,aAAa,KAAG;;;;aAILA,SAAO,mBAAmB;;CAGrC,MAAM,KAAG;;;;;;CAOT,MAAM,KAAG;;;;;;;;;;;;;;;;;;;qBAmBUA,SAAO,eAAe;;aAE9BA,SAAO,UAAU;;kBAEZA,SAAO,gBAAgB;;;qCAGJA,SAAO,aAAa;4CACbA,SAAO,aAAa;4CACpBA,SAAO,aAAa;0CACtBA,SAAO,aAAa;4CAClBA,SAAO,aAAa;6CACnBA,SAAO,aAAa;;;;;;;;;;;;;;;;;;;;;;;CAyB/D,YAAY,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,SAAS,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCZ,OAAO,KAAG;;;;;;aAMCA,SAAO,UAAU;;CAG5B,UAAU,KAAG;;;;;CAMb,WAAW,KAAG;;;;;CAMd,UAAU,KAAG;;;;;;;;;;;;;CAcb,gBAAgB,KAAG;;;;;CAMnB,oBAAoB,KAAG;;;;CAKvB,qBAAqB,KAAG;;;;CAKxB,aAAa,KAAG;;;;;CAMhB,iBAAiB,KAAG;;;;CAKpB,kBAAkB,KAAG;;;;CAItB,EAAE;AAEH,MAAa,mBAAmB,IAAI,OAAO,UAAU;CACnD,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EACf,UAAU,gBACX;CACD,UAAU,EACR,UAAU;EACR,UAAU,OAAO;EACjB,eAAe,OAAO;EACtB,gBAAgB,OAAO;EACvB,OAAO,OAAO;EACd,YAAY,OAAO;EACnB,aAAa,OAAO;EACrB,EACF;CACF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EACf,SAAS,WACV;CACD,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,OAAO,OAAO;EACd,SAAS,OAAO;EAChB,WAAW,OAAO;EAClB,MAAM,OAAO;EACd,EACF;CACF,CAAC"}

package/es/Toast/type.d.mts

@@ -6,11 +6,36 @@ import { Toast } from "@base-ui/react/toast";
 //#region src/Toast/type.d.ts
 type ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading' | 'default';
 type ToastPosition = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
+type ToastActionVariant = 'primary' | 'secondary' | 'text' | 'danger' | 'ghost';
+interface ToastAction {
+  /**
+   * Action button label
+   */
+  label: ReactNode;
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+  /**
+   * Additional props for the button
+   */
+  props?: Omit<React.ComponentPropsWithRef<'button'>, 'onClick'>;
+  /**
+   * Button variant
+   * @default 'primary'
+   */
+  variant?: ToastActionVariant;
+}
 interface ToastOptions {
   /**
    * Action button props
+   * @deprecated Use `actions` instead
    */
   actionProps?: React.ComponentPropsWithRef<'button'>;
+  /**
+   * Multiple action buttons
+   */
+  actions?: ToastAction[];
   /**
    * Additional class name
    */
@@ -33,6 +58,11 @@ interface ToastOptions {
    * @default 5000
    */
   duration?: number;
+  /**
+   * Hide the close button
+   * @default false
+   */
+  hideCloseButton?: boolean;
   /**
    * Custom icon
    */
@@ -80,6 +110,7 @@ interface ToastInstance {
 interface ToastProps {
   classNames?: {
     action?: string;
+    actions?: string;
     close?: string;
     content?: string;
     description?: string;
@@ -89,6 +120,7 @@ interface ToastProps {
   };
   styles?: {
     action?: CSSProperties;
+    actions?: CSSProperties;
     close?: CSSProperties;
     content?: CSSProperties;
     description?: CSSProperties;
@@ -114,5 +146,5 @@ interface ToastAPI {
   warning: (options: Omit<ToastOptions, 'type'> | string) => ToastInstance;
 }
 //#endregion
-export { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType };
+export { ToastAPI, ToastAction, ToastActionVariant, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType };
 //# sourceMappingURL=type.d.mts.map

package/es/Toc/Toc.d.mts

@@ -1,8 +1,8 @@
 import { TocProps } from "./type.mjs";
-import * as react79 from "react";
+import * as react8 from "react";
 
 //#region src/Toc/Toc.d.ts
-declare const Toc: react79.NamedExoticComponent<TocProps>;
+declare const Toc: react8.NamedExoticComponent<TocProps>;
 //#endregion
 export { Toc };
 //# sourceMappingURL=Toc.d.mts.map

package/es/Video/index.d.mts

@@ -1,7 +1,7 @@
 import { FlexboxProps } from "../Flex/type.mjs";
 import "../Flex/index.mjs";
 import { VideoProps as VideoProps$1 } from "../types/index.mjs";
-import * as react42 from "react";
+import * as react68 from "react";
 import { CSSProperties, Ref } from "react";
 
 //#region src/Video/index.d.ts
@@ -39,7 +39,7 @@ interface VideoProps extends VideoProps$1, Pick<FlexboxProps, 'width' | 'height'
   };
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-declare const Video: react42.NamedExoticComponent<VideoProps>;
+declare const Video: react68.NamedExoticComponent<VideoProps>;
 //#endregion
 export { Video, VideoProps };
 //# sourceMappingURL=index.d.mts.map

package/es/awesome/AuroraBackground/AuroraBackground.d.mts

@@ -1,8 +1,8 @@
 import { AuroraBackgroundProps } from "./type.mjs";
-import * as react144 from "react";
+import * as react148 from "react";
 
 //#region src/awesome/AuroraBackground/AuroraBackground.d.ts
-declare const AuroraBackground: react144.NamedExoticComponent<AuroraBackgroundProps>;
+declare const AuroraBackground: react148.NamedExoticComponent<AuroraBackgroundProps>;
 //#endregion
 export { AuroraBackground };
 //# sourceMappingURL=AuroraBackground.d.mts.map

package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts

@@ -1,9 +1,9 @@
 import { ButtonProps } from "../../Button/type.mjs";
 import "../../Button/index.mjs";
-import * as react145 from "react";
+import * as react150 from "react";
 
 //#region src/awesome/BottomGradientButton/BottomGradientButton.d.ts
-declare const BottomGradientButton: react145.NamedExoticComponent<ButtonProps>;
+declare const BottomGradientButton: react150.NamedExoticComponent<ButtonProps>;
 //#endregion
 export { BottomGradientButton };
 //# sourceMappingURL=BottomGradientButton.d.mts.map

package/es/awesome/Features/Features.d.mts

@@ -1,8 +1,8 @@
 import { FeaturesProps } from "./type.mjs";
-import * as react146 from "react";
+import * as react153 from "react";
 
 //#region src/awesome/Features/Features.d.ts
-declare const Features: react146.NamedExoticComponent<FeaturesProps>;
+declare const Features: react153.NamedExoticComponent<FeaturesProps>;
 //#endregion
 export { Features };
 //# sourceMappingURL=Features.d.mts.map

package/es/awesome/GradientButton/GradientButton.d.mts

@@ -1,8 +1,8 @@
 import { GradientButtonProps } from "./type.mjs";
-import * as react149 from "react";
+import * as react144 from "react";
 
 //#region src/awesome/GradientButton/GradientButton.d.ts
-declare const GradientButton: react149.NamedExoticComponent<GradientButtonProps>;
+declare const GradientButton: react144.NamedExoticComponent<GradientButtonProps>;
 //#endregion
 export { GradientButton };
 //# sourceMappingURL=GradientButton.d.mts.map

package/es/awesome/GridBackground/GridBackground.d.mts

@@ -1,8 +1,8 @@
 import { GridBackgroundProps } from "./type.mjs";
-import * as react147 from "react";
+import * as react145 from "react";
 
 //#region src/awesome/GridBackground/GridBackground.d.ts
-declare const GridBackground: react147.NamedExoticComponent<GridBackgroundProps>;
+declare const GridBackground: react145.NamedExoticComponent<GridBackgroundProps>;
 //#endregion
 export { GridBackground };
 //# sourceMappingURL=GridBackground.d.mts.map

package/es/awesome/GridBackground/GridShowcase.d.mts

@@ -1,8 +1,8 @@
 import { GridShowcaseProps } from "./type.mjs";
-import * as react148 from "react";
+import * as react146 from "react";
 
 //#region src/awesome/GridBackground/GridShowcase.d.ts
-declare const GridShowcase: react148.NamedExoticComponent<GridShowcaseProps>;
+declare const GridShowcase: react146.NamedExoticComponent<GridShowcaseProps>;
 //#endregion
 export { GridShowcase };
 //# sourceMappingURL=GridShowcase.d.mts.map

package/es/awesome/Hero/Hero.d.mts

@@ -1,8 +1,8 @@
 import { HeroProps } from "./type.mjs";
-import * as react151 from "react";
+import * as react147 from "react";
 
 //#region src/awesome/Hero/Hero.d.ts
-declare const Hero: react151.NamedExoticComponent<HeroProps>;
+declare const Hero: react147.NamedExoticComponent<HeroProps>;
 //#endregion
 export { Hero };
 //# sourceMappingURL=Hero.d.mts.map

package/es/awesome/Spline/Spine.d.mts

@@ -1,9 +1,9 @@
 import { SplineProps } from "./type.mjs";
-import * as react150 from "react";
+import * as react149 from "react";
 import "@splinetool/runtime";
 
 //#region src/awesome/Spline/Spine.d.ts
-declare const Spline: react150.NamedExoticComponent<SplineProps>;
+declare const Spline: react149.NamedExoticComponent<SplineProps>;
 //#endregion
 export { Spline };
 //# sourceMappingURL=Spine.d.mts.map

package/es/awesome/Spotlight/Spotlight.d.mts

@@ -1,8 +1,8 @@
 import { SpotlightProps } from "./type.mjs";
-import * as react152 from "react";
+import * as react151 from "react";
 
 //#region src/awesome/Spotlight/Spotlight.d.ts
-declare const Spotlight: react152.NamedExoticComponent<SpotlightProps>;
+declare const Spotlight: react151.NamedExoticComponent<SpotlightProps>;
 //#endregion
 export { Spotlight };
 //# sourceMappingURL=Spotlight.d.mts.map

package/es/awesome/SpotlightCard/SpotlightCard.d.mts

@@ -1,8 +1,8 @@
 import { SpotlightCardProps } from "./type.mjs";
-import * as react153 from "react";
+import * as react152 from "react";
 
 //#region src/awesome/SpotlightCard/SpotlightCard.d.ts
-declare const SpotlightCard: react153.NamedExoticComponent<SpotlightCardProps<any>>;
+declare const SpotlightCard: react152.NamedExoticComponent<SpotlightCardProps<any>>;
 //#endregion
 export { SpotlightCard };
 //# sourceMappingURL=SpotlightCard.d.mts.map

package/es/brand/LobeChat/index.d.mts

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react81 from "react";
+import * as react5 from "react";
 import { ReactNode } from "react";
 
 //#region src/brand/LobeChat/index.d.ts
@@ -8,7 +8,7 @@ interface LobeChatProps extends DivProps {
   size?: number;
   type?: '3d' | 'flat' | 'mono' | 'text' | 'combine';
 }
-declare const LobeChat: react81.NamedExoticComponent<LobeChatProps>;
+declare const LobeChat: react5.NamedExoticComponent<LobeChatProps>;
 //#endregion
 export { LobeChat, LobeChatProps };
 //# sourceMappingURL=index.d.mts.map