@mindlogic-ai/logician-ui 4.0.0-alpha.37 → 4.0.0-alpha.38

package/USAGE.md

@@ -297,3 +297,20 @@ function App() {
   Responsive Button
 </Button>
 ```
+
+### 5. Actions in Feedback Surfaces
+
+- A toast takes at most one action, through the `action` prop; dismiss is the ×
+- Never put a `<Button>` inside a toast's `description`
+- Inside a tinted toast or banner, the action uses the status color
+- Panes and dialogs carry buttons: ink solid primary + outline neutral
+
+Full rules and the surface matrix: Storybook → **Guidelines / Actions in feedback surfaces** (`src/guidelines/FeedbackActions.mdx`).
+
+```tsx
+showToast({
+  status: 'error',
+  description: '크레딧이 부족합니다.',
+  action: { label: '크레딧 구매', onClick: openCreditPurchaseModal },
+});
+```

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

@@ -2,8 +2,12 @@ import { ToastProps } from './Toast.types';
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
-export declare const Toast: ({ title, description, status, onClose, ...rest }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ title, description, status, onClose, action, ...rest }: ToastProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toast.d.ts.map

package/dist/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,kDAMnB,UAAU,4CA+BZ,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,GAAI,0DAOnB,UAAU,4CAuCZ,CAAC"}

package/dist/components/Toast/Toast.js

@@ -9,10 +9,14 @@ var ToastIcon = require('./ToastIcon/ToastIcon.js');
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
-const Toast = ({ title, description, status = 'success', onClose, ...rest }) => (jsxRuntime.jsxs(react.Toast.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, children: [jsxRuntime.jsx(ToastIcon.ToastIcon, { status: status }), jsxRuntime.jsxs(react.Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsxRuntime.jsx(react.Toast.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsxRuntime.jsx(react.Toast.Description, { color: "inherit", fontWeight: "semibold", children: description }))] })] }), jsxRuntime.jsx(react.Toast.CloseTrigger, { onClick: onClose, cursor: "pointer", ...Toast_styles.closeButtonStyles[status] })] }));
+const Toast = ({ title, description, status = 'success', onClose, action, ...rest }) => (jsxRuntime.jsxs(react.Toast.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, children: [jsxRuntime.jsx(ToastIcon.ToastIcon, { status: status }), jsxRuntime.jsxs(react.Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsxRuntime.jsx(react.Toast.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsxRuntime.jsx(react.Toast.Description, { color: "inherit", fontWeight: "semibold", children: description })), action && (jsxRuntime.jsx(react.Toast.ActionTrigger, { onClick: action.onClick, ...Toast_styles.actionStyles[status], children: action.label }))] })] }), jsxRuntime.jsx(react.Toast.CloseTrigger, { onClick: onClose, cursor: "pointer", ...Toast_styles.closeButtonStyles[status] })] }));
 
 exports.Toast = Toast;
 //# sourceMappingURL=Toast.js.map

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","Flex","_jsx","ToastIcon","Stack","closeButtonStyles"],"mappings":";;;;;;;;AAMA;;;;;AAKG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,GAAG,IAAI,EACI,MACXA,gBAACC,WAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,eAAA,CAACE,UAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBC,cAAA,CAACC,mBAAS,IAAC,MAAM,EAAE,MAAM,EAAA,CAAI,EAC7BJ,eAAA,CAACK,WAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJF,eAACF,WAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVE,cAAA,CAACF,WAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,EAAA,CACY,CAC3B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPE,cAAA,CAACF,WAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACXK,8BAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","Flex","_jsx","ToastIcon","Stack","actionStyles","closeButtonStyles"],"mappings":";;;;;;;;AAMA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,MAAM,EACN,GAAG,IAAI,EACI,MACXA,gBAACC,WAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,gBAACE,UAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBC,eAACC,mBAAS,EAAA,EAAC,MAAM,EAAE,MAAM,GAAI,EAC7BJ,eAAA,CAACK,WAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJF,eAACF,WAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVE,cAAA,CAACF,WAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,GACY,CAC3B,EACA,MAAM,KACLE,cAAA,CAACF,WAAW,CAAC,aAAa,EAAA,EACxB,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,GAClBK,yBAAY,CAAC,MAAM,CAAS,EAAA,QAAA,EAEhC,MAAM,CAAC,KAAK,EAAA,CACa,CAC7B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPH,cAAA,CAACF,WAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACXM,8BAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}

package/dist/components/Toast/Toast.mjs

@@ -1,16 +1,20 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Toast as Toast$1, Flex, Stack } from '@chakra-ui/react';
-import { closeButtonStyles } from './Toast.styles.mjs';
+import { actionStyles, closeButtonStyles } from './Toast.styles.mjs';
 import { ToastIcon } from './ToastIcon/ToastIcon.mjs';
 
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
-const Toast = ({ title, description, status = 'success', onClose, ...rest }) => (jsxs(Toast$1.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxs(Flex, { align: "center", gap: 2, children: [jsx(ToastIcon, { status: status }), jsxs(Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsx(Toast$1.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsx(Toast$1.Description, { color: "inherit", fontWeight: "semibold", children: description }))] })] }), jsx(Toast$1.CloseTrigger, { onClick: onClose, cursor: "pointer", ...closeButtonStyles[status] })] }));
+const Toast = ({ title, description, status = 'success', onClose, action, ...rest }) => (jsxs(Toast$1.Root, { width: { md: 'sm' }, borderWidth: "1px", borderRadius: "md", boxShadow: "lg", pointerEvents: "auto", ...rest, children: [jsxs(Flex, { align: "center", gap: 2, children: [jsx(ToastIcon, { status: status }), jsxs(Stack, { gap: 1, flex: 1, maxWidth: "100%", children: [title && (jsx(Toast$1.Title, { fontWeight: "bold", fontSize: "h5", children: title })), description && (jsx(Toast$1.Description, { color: "inherit", fontWeight: "semibold", children: description })), action && (jsx(Toast$1.ActionTrigger, { onClick: action.onClick, ...actionStyles[status], children: action.label }))] })] }), jsx(Toast$1.CloseTrigger, { onClick: onClose, cursor: "pointer", ...closeButtonStyles[status] })] }));
 
 export { Toast };
 //# sourceMappingURL=Toast.mjs.map

package/dist/components/Toast/Toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","_jsx"],"mappings":";;;;;;AAMA;;;;;AAKG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,GAAG,IAAI,EACI,MACXA,KAACC,OAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,IAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBE,GAAA,CAAC,SAAS,IAAC,MAAM,EAAE,MAAM,EAAA,CAAI,EAC7BF,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJE,IAACD,OAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVC,GAAA,CAACD,OAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,EAAA,CACY,CAC3B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPC,GAAA,CAACD,OAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACX,iBAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}
+{"version":3,"file":"Toast.mjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":[null],"names":["_jsxs","ChakraToast","_jsx"],"mappings":";;;;;;AAMA;;;;;;;;;AASG;AACI,MAAM,KAAK,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,MAAM,GAAG,SAAS,EAClB,OAAO,EACP,MAAM,EACN,GAAG,IAAI,EACI,MACXA,KAACC,OAAW,CAAC,IAAI,EAAA,EACf,KAAK,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EACnB,WAAW,EAAC,KAAK,EACjB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,IAAI,EACd,aAAa,EAAC,MAAM,EAAA,GAChB,IAAI,EAAA,QAAA,EAAA,CAERD,KAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAA,QAAA,EAAA,CAEzBE,IAAC,SAAS,EAAA,EAAC,MAAM,EAAE,MAAM,GAAI,EAC7BF,IAAA,CAAC,KAAK,EAAA,EAAC,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA,QAAA,EAAA,CACpC,KAAK,KACJE,IAACD,OAAW,CAAC,KAAK,EAAA,EAAC,UAAU,EAAC,MAAM,EAAC,QAAQ,EAAC,IAAI,EAAA,QAAA,EAC/C,KAAK,GACY,CACrB,EACA,WAAW,KACVC,GAAA,CAACD,OAAW,CAAC,WAAW,EAAA,EAAC,KAAK,EAAC,SAAS,EAAC,UAAU,EAAC,UAAU,EAAA,QAAA,EAC3D,WAAW,GACY,CAC3B,EACA,MAAM,KACLC,GAAA,CAACD,OAAW,CAAC,aAAa,EAAA,EACxB,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,GAClB,YAAY,CAAC,MAAM,CAAS,EAAA,QAAA,EAEhC,MAAM,CAAC,KAAK,EAAA,CACa,CAC7B,CAAA,EAAA,CACK,CAAA,EAAA,CACH,EACPC,GAAA,CAACD,OAAW,CAAC,YAAY,IACvB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,SAAS,EAAA,GACX,iBAAiB,CAAC,MAAM,CAAS,EAAA,CACtC,CAAA,EAAA,CACe;;;;"}

package/dist/components/Toast/Toast.styles.d.ts

@@ -13,4 +13,12 @@ export declare const toastStyles: Record<ToastStatus, BoxProps>;
  * Uses BoxProps for flexibility with Toast.CloseTrigger
  */
 export declare const closeButtonStyles: Record<ToastStatus, BoxProps>;
+export declare const actionStyles: Record<ToastStatus, BoxProps>;
+/** Default duration (ms) of a toast without an action, when none is given */
+export declare const TOAST_DEFAULT_DURATION = 5000;
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+export declare const TOAST_ACTION_DURATION = 8000;
 //# sourceMappingURL=Toast.styles.d.ts.map

package/dist/components/Toast/Toast.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAqBrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAyB3D,CAAC"}
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD;;;;;GAKG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAqBrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAyB3D,CAAC;AA0BF,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,WAAW,EAAE,QAAQ,CAyBtD,CAAC;AAEF,6EAA6E;AAC7E,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,qBAAqB,OAAO,CAAC"}

package/dist/components/Toast/Toast.styles.js

@@ -60,7 +60,66 @@ const closeButtonStyles = {
         },
     },
 };
+/**
+ * Action styles for each toast status.
+ *
+ * A toast's action is a text action in the toast's own text color — the same
+ * palette as `toastStyles[status].color` — with the hover tint of the close ×.
+ * No border and no fill: a neutral or outlined button inside a tinted toast
+ * reads as a separate card dropped on top of it.
+ *
+ * `ml: -2` cancels the horizontal padding so the label lines up with the
+ * description text above it.
+ */
+const actionBase = {
+    fontWeight: 'bold',
+    px: 2,
+    py: 1,
+    ml: -2,
+    height: 'auto',
+    alignSelf: 'flex-start',
+    borderRadius: 'sm',
+    borderWidth: 0,
+    bg: 'transparent',
+    cursor: 'pointer',
+};
+const actionStyles = {
+    info: {
+        ...actionBase,
+        color: 'primary.dark',
+        _hover: { bg: 'primary.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'primary.dark' },
+    },
+    warning: {
+        ...actionBase,
+        color: 'warning.dark',
+        _hover: { bg: 'warning.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'warning.dark' },
+    },
+    success: {
+        ...actionBase,
+        color: 'success.dark',
+        _hover: { bg: 'success.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'success.dark' },
+    },
+    error: {
+        ...actionBase,
+        color: 'danger.dark',
+        _hover: { bg: 'danger.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'danger.dark' },
+    },
+};
+/** Default duration (ms) of a toast without an action, when none is given */
+const TOAST_DEFAULT_DURATION = 5000;
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+const TOAST_ACTION_DURATION = 8000;
 
+exports.TOAST_ACTION_DURATION = TOAST_ACTION_DURATION;
+exports.TOAST_DEFAULT_DURATION = TOAST_DEFAULT_DURATION;
+exports.actionStyles = actionStyles;
 exports.closeButtonStyles = closeButtonStyles;
 exports.toastStyles = toastStyles;
 //# sourceMappingURL=Toast.styles.js.map

package/dist/components/Toast/Toast.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.js","sources":["../../../src/components/Toast/Toast.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;AAKG;AACI,MAAM,WAAW,GAAkC;AACxD,IAAA,IAAI,EAAE;QACJ,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,OAAO,EAAE;QACP,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,OAAO,EAAE;QACP,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,KAAK,EAAE;QACL,EAAE,EAAE,mBAAmB;QACvB,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,gBAAgB;AAC9B,KAAA;;AAGH;;;;AAIG;AACI,MAAM,iBAAiB,GAAkC;AAC9D,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACF,KAAA;;;;;;"}
+{"version":3,"file":"Toast.styles.js","sources":["../../../src/components/Toast/Toast.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/Toast/Toast.styles.mjs

@@ -58,6 +58,62 @@ const closeButtonStyles = {
         },
     },
 };
+/**
+ * Action styles for each toast status.
+ *
+ * A toast's action is a text action in the toast's own text color — the same
+ * palette as `toastStyles[status].color` — with the hover tint of the close ×.
+ * No border and no fill: a neutral or outlined button inside a tinted toast
+ * reads as a separate card dropped on top of it.
+ *
+ * `ml: -2` cancels the horizontal padding so the label lines up with the
+ * description text above it.
+ */
+const actionBase = {
+    fontWeight: 'bold',
+    px: 2,
+    py: 1,
+    ml: -2,
+    height: 'auto',
+    alignSelf: 'flex-start',
+    borderRadius: 'sm',
+    borderWidth: 0,
+    bg: 'transparent',
+    cursor: 'pointer',
+};
+const actionStyles = {
+    info: {
+        ...actionBase,
+        color: 'primary.dark',
+        _hover: { bg: 'primary.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'primary.dark' },
+    },
+    warning: {
+        ...actionBase,
+        color: 'warning.dark',
+        _hover: { bg: 'warning.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'warning.dark' },
+    },
+    success: {
+        ...actionBase,
+        color: 'success.dark',
+        _hover: { bg: 'success.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'success.dark' },
+    },
+    error: {
+        ...actionBase,
+        color: 'danger.dark',
+        _hover: { bg: 'danger.lighter' },
+        _focusVisible: { outline: '2px solid', outlineColor: 'danger.dark' },
+    },
+};
+/** Default duration (ms) of a toast without an action, when none is given */
+const TOAST_DEFAULT_DURATION = 5000;
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+const TOAST_ACTION_DURATION = 8000;
 
-export { closeButtonStyles, toastStyles };
+export { TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION, actionStyles, closeButtonStyles, toastStyles };
 //# sourceMappingURL=Toast.styles.mjs.map

package/dist/components/Toast/Toast.styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.mjs","sources":["../../../src/components/Toast/Toast.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";AAIA;;;;;AAKG;AACI,MAAM,WAAW,GAAkC;AACxD,IAAA,IAAI,EAAE;QACJ,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,OAAO,EAAE;QACP,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,OAAO,EAAE;QACP,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,iBAAiB;AAC/B,KAAA;AACD,IAAA,KAAK,EAAE;QACL,EAAE,EAAE,mBAAmB;QACvB,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,gBAAgB;AAC9B,KAAA;;AAGH;;;;AAIG;AACI,MAAM,iBAAiB,GAAkC;AAC9D,IAAA,IAAI,EAAE;AACJ,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,iBAAiB;AACtB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,KAAK,EAAE,eAAe;AACtB,QAAA,MAAM,EAAE;AACN,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACF,KAAA;;;;;"}
+{"version":3,"file":"Toast.styles.mjs","sources":["../../../src/components/Toast/Toast.styles.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -5,6 +5,20 @@ import { BoxProps, ToastOptions, ToastRootProps, ToastStatusChangeDetails } from
  * Subset of Zag.js Type, excluding 'loading' for UI consistency
  */
 export type ToastStatus = 'info' | 'warning' | 'success' | 'error';
+/**
+ * The single action a toast can carry.
+ *
+ * Rendered as a text action in the toast's status color, under the
+ * description. Clicking it calls `onClick` and dismisses the toast.
+ * One action per toast — dismiss is the ×, never a second action.
+ * See the "Guidelines/Actions in feedback surfaces" page in Storybook.
+ */
+export interface ToastAction {
+    /** Action label — keep it to a short verb phrase ("크레딧 구매", "Undo") */
+    label: ReactNode;
+    /** Called when the action is clicked; the toast is dismissed afterwards */
+    onClick: () => void;
+}
 /**
  * Toast component props
  * Uses ToastRootProps as base and overrides title for ReactNode support
@@ -18,14 +32,22 @@ export interface ToastProps extends Omit<ToastRootProps, 'title'> {
     status?: ToastStatus;
     /** Custom close handler */
     onClose?: () => void;
+    /** One action, rendered as a text action in the status color */
+    action?: ToastAction;
 }
 /**
  * Options for useToast hook
  * Extends Chakra's ToastOptions with custom properties
  */
-export interface UseToastOptions extends ToastOptions {
+export interface UseToastOptions extends Omit<ToastOptions, 'action'> {
     /** Toast status - restricted to common statuses */
     status?: ToastStatus;
+    /**
+     * One action, rendered as a text action in the status color.
+     * Unlike Chakra's `action`, the label accepts any ReactNode.
+     * When set and `duration` is not given, the toast stays for 8s instead of 5s.
+     */
+    action?: ToastAction;
     /** Custom styles to apply to the toast */
     styles?: BoxProps;
 }
@@ -38,6 +60,8 @@ export interface ToasterCreateOptions extends ToastOptions {
     meta?: {
         /** Custom close handler for the toast */
         onClose?: () => void;
+        /** Toast action (ReactNode label); takes precedence over Chakra's `action` */
+        action?: ToastAction;
         /** Custom styles to merge with default toast styles */
         styles?: BoxProps;
         /** Allow additional custom metadata */

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,wBAAwB,EACzB,MAAM,kBAAkB,CAAC;AAE1B;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gCAAgC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,YAAY;IACnD,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,mEAAmE;IACnE,IAAI,CAAC,EAAE;QACL,yCAAyC;QACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,uDAAuD;QACvD,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB,uCAAuC;QACvC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED;;GAEG;AACH,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,wBAAwB,EACzB,MAAM,kBAAkB,CAAC;AAE1B;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW;IAC1B,uEAAuE;IACvE,KAAK,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC;IAC/D,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gCAAgC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC;IACnE,mDAAmD;IACnD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,mEAAmE;IACnE,IAAI,CAAC,EAAE;QACL,yCAAyC;QACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,8EAA8E;QAC9E,MAAM,CAAC,EAAE,WAAW,CAAC;QACrB,uDAAuD;QACvD,MAAM,CAAC,EAAE,QAAQ,CAAC;QAClB,uCAAuC;QACvC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;CACH;AAED;;GAEG;AACH,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/components/Toast/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAGpB,MAAM,kBAAkB,CAAC;AAK1B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,EAAE,mBAGpB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,+CA0BnB,CAAC"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAGpB,MAAM,kBAAkB,CAAC;AAM1B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,EAAE,mBAGpB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,+CAoCnB,CAAC"}

package/dist/components/Toast/Toaster.js

@@ -50,7 +50,15 @@ const Toaster = () => (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(r
             // Extract custom data from meta
             const customStyles = toast.meta?.styles || {};
             const onClose = toast.meta?.onClose;
-            return (jsxRuntime.jsx(Toast.Toast, { title: toast.title, description: toast.description, status: toast.type, onClose: onClose, ...Toast_styles.toastStyles[toast.type], ...customStyles }));
+            // `useToast` passes the action through meta so its label can be a
+            // ReactNode. A plain `toaster.create({ action })` (Chakra's own option)
+            // also works: Toast.ActionTrigger already calls `toast.action.onClick`
+            // itself, so the handler passed down here must not call it again.
+            const action = toast.meta?.action ??
+                (toast.action
+                    ? { label: toast.action.label, onClick: () => { } }
+                    : undefined);
+            return (jsxRuntime.jsx(Toast.Toast, { title: toast.title, description: toast.description, status: toast.type, onClose: onClose, action: action, ...Toast_styles.toastStyles[toast.type], ...customStyles }));
         } }) }));
 
 exports.Toaster = Toaster;

package/dist/components/Toast/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":[null],"names":["createToaster","_jsx","Portal","ChakraToaster","Toast","toastStyles"],"mappings":";;;;;;;;AAUA;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAwBA,mBAAa,CAAC;AACxD,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,eAAe,EAAE,IAAI;AACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI,MAAM,OAAO,GAAG,OACrBC,cAAA,CAACC,YAAM,cACLD,cAAA,CAACE,aAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAC5B,aAAa,EAAC,MAAM,EACpB,GAAG,EAAE,CAAC,YAEL,CAAC,KAAK,KAAI;;YAET,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE;AAC7C,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO;AAEnC,YAAA,QACEF,cAAA,CAACG,WAAK,EAAA,EACJ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,KACZC,wBAAW,CAAC,KAAK,CAAC,IAAgC,CAAC,EAAA,GACnD,YAAY,EAAA,CAChB;QAEN,CAAC,EAAA,CACa,EAAA,CACT;;;;;"}
+{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":[null],"names":["createToaster","_jsx","Portal","ChakraToaster","Toast","toastStyles"],"mappings":";;;;;;;;AAWA;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAwBA,mBAAa,CAAC;AACxD,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,eAAe,EAAE,IAAI;AACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI,MAAM,OAAO,GAAG,OACrBC,cAAA,CAACC,YAAM,cACLD,cAAA,CAACE,aAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAC5B,aAAa,EAAC,MAAM,EACpB,GAAG,EAAE,CAAC,YAEL,CAAC,KAAK,KAAI;;YAET,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE;AAC7C,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO;;;;;AAKnC,YAAA,MAAM,MAAM,GACV,KAAK,CAAC,IAAI,EAAE,MAAM;iBACjB,KAAK,CAAC;AACL,sBAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAK,EAAE,CAAC;sBAC9C,SAAS,CAAC;AAEhB,YAAA,QACEF,cAAA,CAACG,WAAK,IACJ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EAAA,GACVC,wBAAW,CAAC,KAAK,CAAC,IAAgC,CAAC,KACnD,YAAY,EAAA,CAChB;QAEN,CAAC,EAAA,CACa,EAAA,CACT;;;;;"}

package/dist/components/Toast/Toaster.mjs

@@ -48,7 +48,15 @@ const Toaster = () => (jsx(Portal, { children: jsx(Toaster$1, { toaster: toaster
             // Extract custom data from meta
             const customStyles = toast.meta?.styles || {};
             const onClose = toast.meta?.onClose;
-            return (jsx(Toast, { title: toast.title, description: toast.description, status: toast.type, onClose: onClose, ...toastStyles[toast.type], ...customStyles }));
+            // `useToast` passes the action through meta so its label can be a
+            // ReactNode. A plain `toaster.create({ action })` (Chakra's own option)
+            // also works: Toast.ActionTrigger already calls `toast.action.onClick`
+            // itself, so the handler passed down here must not call it again.
+            const action = toast.meta?.action ??
+                (toast.action
+                    ? { label: toast.action.label, onClick: () => { } }
+                    : undefined);
+            return (jsx(Toast, { title: toast.title, description: toast.description, status: toast.type, onClose: onClose, action: action, ...toastStyles[toast.type], ...customStyles }));
         } }) }));
 
 export { Toaster, toaster };

package/dist/components/Toast/Toaster.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.mjs","sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraToaster"],"mappings":";;;;;;AAUA;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAwB,aAAa,CAAC;AACxD,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,eAAe,EAAE,IAAI;AACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI,MAAM,OAAO,GAAG,OACrBA,GAAA,CAAC,MAAM,cACLA,GAAA,CAACC,SAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAC5B,aAAa,EAAC,MAAM,EACpB,GAAG,EAAE,CAAC,YAEL,CAAC,KAAK,KAAI;;YAET,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE;AAC7C,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO;AAEnC,YAAA,QACED,GAAA,CAAC,KAAK,EAAA,EACJ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,KACZ,WAAW,CAAC,KAAK,CAAC,IAAgC,CAAC,EAAA,GACnD,YAAY,EAAA,CAChB;QAEN,CAAC,EAAA,CACa,EAAA,CACT;;;;"}
+{"version":3,"file":"Toaster.mjs","sources":["../../../src/components/Toast/Toaster.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraToaster"],"mappings":";;;;;;AAWA;;;;;;;;;;;;AAYG;AACI,MAAM,OAAO,GAAwB,aAAa,CAAC;AACxD,IAAA,SAAS,EAAE,KAAK;AAChB,IAAA,eAAe,EAAE,IAAI;AACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACI,MAAM,OAAO,GAAG,OACrBA,GAAA,CAAC,MAAM,cACLA,GAAA,CAACC,SAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAC5B,aAAa,EAAC,MAAM,EACpB,GAAG,EAAE,CAAC,YAEL,CAAC,KAAK,KAAI;;YAET,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,MAAM,IAAI,EAAE;AAC7C,YAAA,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO;;;;;AAKnC,YAAA,MAAM,MAAM,GACV,KAAK,CAAC,IAAI,EAAE,MAAM;iBACjB,KAAK,CAAC;AACL,sBAAE,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,MAAK,EAAE,CAAC;sBAC9C,SAAS,CAAC;AAEhB,YAAA,QACED,GAAA,CAAC,KAAK,IACJ,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,MAAM,EAAE,KAAK,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EAAA,GACV,WAAW,CAAC,KAAK,CAAC,IAAgC,CAAC,KACnD,YAAY,EAAA,CAChB;QAEN,CAAC,EAAA,CACa,EAAA,CACT;;;;"}

package/dist/components/Toast/useToast.d.ts

@@ -3,7 +3,7 @@ import { UseToastOptions } from './Toast.types';
  * Custom hook for managing toast notifications
  * @returns Toast management functions
  */
-export declare const useToast: () => (({ status, title, description, styles: stylesProp, duration, ...rest }: UseToastOptions) => string) & {
+export declare const useToast: () => (({ status, title, description, styles: stylesProp, duration: durationProp, action, ...rest }: UseToastOptions) => string) & {
     dismiss: (id?: string) => void;
     dismissAll: () => void;
     update: (id: string, data: Partial<import("@zag-js/toast").Props<import("react").ReactNode>>) => string;

package/dist/components/Toast/useToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/useToast.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,eAAe,EAChB,MAAM,eAAe,CAAC;AAKvB;;;GAGG;AACH,eAAO,MAAM,QAAQ,iFAUhB,eAAe;;;;CAsDnB,CAAC"}
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/useToast.tsx"],"names":[],"mappings":"AAOA,OAAO,EAGL,eAAe,EAChB,MAAM,eAAe,CAAC;AAKvB;;;GAGG;AACH,eAAO,MAAM,QAAQ,uGAWhB,eAAe;;;;CAgEnB,CAAC"}

package/dist/components/Toast/useToast.js

@@ -12,7 +12,14 @@ const MAX_TOASTS = 3;
  */
 const useToast = () => {
     const activeToasts = React.useRef([]); // Track active toast IDs
-    const showToast = ({ status = 'success', title, description, styles: stylesProp, duration = 5000, ...rest }) => {
+    const showToast = ({ status = 'success', title, description, styles: stylesProp, duration: durationProp, action, ...rest }) => {
+        // A toast with an action stays longer, unless the caller chose a duration
+        // (including `null` / `Infinity` for a persistent toast).
+        const duration = durationProp !== undefined
+            ? durationProp
+            : action
+                ? Toast_styles.TOAST_ACTION_DURATION
+                : Toast_styles.TOAST_DEFAULT_DURATION;
         // NOTE: placement is not supported - must be configured in Toaster.tsx createToaster()
         const styles = {
             ...Toast_styles.toastStyles[status],
@@ -35,6 +42,7 @@ const useToast = () => {
             meta: {
                 // Pass custom data through meta
                 styles, // for custom toast style
+                action, // ReactNode label, so it travels in meta rather than `action`
                 onClose: () => Toaster.toaster.dismiss(toastId), // Custom close handler
             },
             onStatusChange: (details) => {

package/dist/components/Toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.js","sources":["../../../src/components/Toast/useToast.tsx"],"sourcesContent":[null],"names":["useRef","toastStyles","toaster"],"mappings":";;;;;;;AAUA,MAAM,UAAU,GAAG,CAAC;AAEpB;;;AAGG;AACI,MAAM,QAAQ,GAAG,MAAK;IAC3B,MAAM,YAAY,GAAGA,YAAM,CAAW,EAAE,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,WAAW,EACX,MAAM,EAAE,UAAU,EAClB,QAAQ,GAAG,IAAI,EACf,GAAG,IAAI,EACS,KAAI;;AAEpB,QAAA,MAAM,MAAM,GAAG;YACb,GAAGC,wBAAW,CAAC,MAAM,CAAC;AACtB,YAAA,GAAG,UAAU;SACd;;QAGD,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,IAAI,UAAU,EAAE;AAC7C,YAAA,MAAM,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,OAAO;YAC5C,IAAI,aAAa,EAAE;AACjB,gBAAAC,eAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAC/B,gBAAA,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC/B;QACF;;AAGA,QAAA,MAAM,OAAO,GAAGA,eAAO,CAAC,MAAM,CAAC;YAC7B,QAAQ;YACR,KAAK;YACL,WAAW;YACX,IAAI,EAAE,MAAM;AACZ,YAAA,IAAI,EAAE;;AAEJ,gBAAA,MAAM;gBACN,OAAO,EAAE,MAAMA,eAAO,CAAC,OAAO,CAAC,OAAO,CAAC;AACxC,aAAA;AACD,YAAA,cAAc,EAAE,CAAC,OAAiC,KAAI;AACpD,gBAAA,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE;;AAElC,oBAAA,YAAY,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAChD,CAAC,EAAE,KAAK,EAAE,KAAK,OAAO,CACvB;gBACH;YACF,CAAC;AACD,YAAA,GAAG,IAAI;AACgB,SAAA,CAAC;;AAG1B,QAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAElC,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAKA,eAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACzD,QAAA,YAAY,CAAC,OAAO,GAAG,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9B,OAAO,EAAEA,eAAO,CAAC,OAAO;QACxB,UAAU;QACV,MAAM,EAAEA,eAAO,CAAC,MAAM;AACvB,KAAA,CAAC;AACJ;;;;"}
+{"version":3,"file":"useToast.js","sources":["../../../src/components/Toast/useToast.tsx"],"sourcesContent":[null],"names":["useRef","TOAST_ACTION_DURATION","TOAST_DEFAULT_DURATION","toastStyles","toaster"],"mappings":";;;;;;;AAcA,MAAM,UAAU,GAAG,CAAC;AAEpB;;;AAGG;AACI,MAAM,QAAQ,GAAG,MAAK;IAC3B,MAAM,YAAY,GAAGA,YAAM,CAAW,EAAE,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,WAAW,EACX,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,GAAG,IAAI,EACS,KAAI;;;AAGpB,QAAA,MAAM,QAAQ,GACZ,YAAY,KAAK;AACf,cAAE;AACF,cAAE;AACA,kBAAEC;kBACAC,mCAAsB;;AAG9B,QAAA,MAAM,MAAM,GAAG;YACb,GAAGC,wBAAW,CAAC,MAAM,CAAC;AACtB,YAAA,GAAG,UAAU;SACd;;QAGD,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,IAAI,UAAU,EAAE;AAC7C,YAAA,MAAM,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,OAAO;YAC5C,IAAI,aAAa,EAAE;AACjB,gBAAAC,eAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAC/B,gBAAA,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC/B;QACF;;AAGA,QAAA,MAAM,OAAO,GAAGA,eAAO,CAAC,MAAM,CAAC;YAC7B,QAAQ;YACR,KAAK;YACL,WAAW;YACX,IAAI,EAAE,MAAM;AACZ,YAAA,IAAI,EAAE;;AAEJ,gBAAA,MAAM;AACN,gBAAA,MAAM;gBACN,OAAO,EAAE,MAAMA,eAAO,CAAC,OAAO,CAAC,OAAO,CAAC;AACxC,aAAA;AACD,YAAA,cAAc,EAAE,CAAC,OAAiC,KAAI;AACpD,gBAAA,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE;;AAElC,oBAAA,YAAY,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAChD,CAAC,EAAE,KAAK,EAAE,KAAK,OAAO,CACvB;gBACH;YACF,CAAC;AACD,YAAA,GAAG,IAAI;AACgB,SAAA,CAAC;;AAG1B,QAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAElC,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAKA,eAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACzD,QAAA,YAAY,CAAC,OAAO,GAAG,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9B,OAAO,EAAEA,eAAO,CAAC,OAAO;QACxB,UAAU;QACV,MAAM,EAAEA,eAAO,CAAC,MAAM;AACvB,KAAA,CAAC;AACJ;;;;"}

package/dist/components/Toast/useToast.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useRef } from 'react';
-import { toastStyles } from './Toast.styles.mjs';
+import { toastStyles, TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION } from './Toast.styles.mjs';
 import { toaster } from './Toaster.mjs';
 
 const MAX_TOASTS = 3;
@@ -10,7 +10,14 @@ const MAX_TOASTS = 3;
  */
 const useToast = () => {
     const activeToasts = useRef([]); // Track active toast IDs
-    const showToast = ({ status = 'success', title, description, styles: stylesProp, duration = 5000, ...rest }) => {
+    const showToast = ({ status = 'success', title, description, styles: stylesProp, duration: durationProp, action, ...rest }) => {
+        // A toast with an action stays longer, unless the caller chose a duration
+        // (including `null` / `Infinity` for a persistent toast).
+        const duration = durationProp !== undefined
+            ? durationProp
+            : action
+                ? TOAST_ACTION_DURATION
+                : TOAST_DEFAULT_DURATION;
         // NOTE: placement is not supported - must be configured in Toaster.tsx createToaster()
         const styles = {
             ...toastStyles[status],
@@ -33,6 +40,7 @@ const useToast = () => {
             meta: {
                 // Pass custom data through meta
                 styles, // for custom toast style
+                action, // ReactNode label, so it travels in meta rather than `action`
                 onClose: () => toaster.dismiss(toastId), // Custom close handler
             },
             onStatusChange: (details) => {

package/dist/components/Toast/useToast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useToast.mjs","sources":["../../../src/components/Toast/useToast.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,CAAC;AAEpB;;;AAGG;AACI,MAAM,QAAQ,GAAG,MAAK;IAC3B,MAAM,YAAY,GAAG,MAAM,CAAW,EAAE,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,WAAW,EACX,MAAM,EAAE,UAAU,EAClB,QAAQ,GAAG,IAAI,EACf,GAAG,IAAI,EACS,KAAI;;AAEpB,QAAA,MAAM,MAAM,GAAG;YACb,GAAG,WAAW,CAAC,MAAM,CAAC;AACtB,YAAA,GAAG,UAAU;SACd;;QAGD,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,IAAI,UAAU,EAAE;AAC7C,YAAA,MAAM,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,OAAO;YAC5C,IAAI,aAAa,EAAE;AACjB,gBAAA,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAC/B,gBAAA,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC/B;QACF;;AAGA,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC;YAC7B,QAAQ;YACR,KAAK;YACL,WAAW;YACX,IAAI,EAAE,MAAM;AACZ,YAAA,IAAI,EAAE;;AAEJ,gBAAA,MAAM;gBACN,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;AACxC,aAAA;AACD,YAAA,cAAc,EAAE,CAAC,OAAiC,KAAI;AACpD,gBAAA,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE;;AAElC,oBAAA,YAAY,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAChD,CAAC,EAAE,KAAK,EAAE,KAAK,OAAO,CACvB;gBACH;YACF,CAAC;AACD,YAAA,GAAG,IAAI;AACgB,SAAA,CAAC;;AAG1B,QAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAElC,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACzD,QAAA,YAAY,CAAC,OAAO,GAAG,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9B,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,UAAU;QACV,MAAM,EAAE,OAAO,CAAC,MAAM;AACvB,KAAA,CAAC;AACJ;;;;"}
+{"version":3,"file":"useToast.mjs","sources":["../../../src/components/Toast/useToast.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAcA,MAAM,UAAU,GAAG,CAAC;AAEpB;;;AAGG;AACI,MAAM,QAAQ,GAAG,MAAK;IAC3B,MAAM,YAAY,GAAG,MAAM,CAAW,EAAE,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAG,CAAC,EACjB,MAAM,GAAG,SAAS,EAClB,KAAK,EACL,WAAW,EACX,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,GAAG,IAAI,EACS,KAAI;;;AAGpB,QAAA,MAAM,QAAQ,GACZ,YAAY,KAAK;AACf,cAAE;AACF,cAAE;AACA,kBAAE;kBACA,sBAAsB;;AAG9B,QAAA,MAAM,MAAM,GAAG;YACb,GAAG,WAAW,CAAC,MAAM,CAAC;AACtB,YAAA,GAAG,UAAU;SACd;;QAGD,IAAI,YAAY,CAAC,OAAO,CAAC,MAAM,IAAI,UAAU,EAAE;AAC7C,YAAA,MAAM,CAAC,aAAa,CAAC,GAAG,YAAY,CAAC,OAAO;YAC5C,IAAI,aAAa,EAAE;AACjB,gBAAA,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAC/B,gBAAA,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC/B;QACF;;AAGA,QAAA,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC;YAC7B,QAAQ;YACR,KAAK;YACL,WAAW;YACX,IAAI,EAAE,MAAM;AACZ,YAAA,IAAI,EAAE;;AAEJ,gBAAA,MAAM;AACN,gBAAA,MAAM;gBACN,OAAO,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC;AACxC,aAAA;AACD,YAAA,cAAc,EAAE,CAAC,OAAiC,KAAI;AACpD,gBAAA,IAAI,OAAO,CAAC,MAAM,KAAK,WAAW,EAAE;;AAElC,oBAAA,YAAY,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAChD,CAAC,EAAE,KAAK,EAAE,KAAK,OAAO,CACvB;gBACH;YACF,CAAC;AACD,YAAA,GAAG,IAAI;AACgB,SAAA,CAAC;;AAG1B,QAAA,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;AAElC,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACzD,QAAA,YAAY,CAAC,OAAO,GAAG,EAAE;AAC3B,IAAA,CAAC;AAED,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;QAC9B,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,UAAU;QACV,MAAM,EAAE,OAAO,CAAC,MAAM;AACvB,KAAA,CAAC;AACJ;;;;"}

package/dist/index.js

@@ -383,6 +383,9 @@ exports.TagCloseButton = TagCloseButton.TagCloseButton;
 exports.TagLabel = TagLabel.TagLabel;
 exports.Textarea = Textarea.Textarea;
 exports.Toast = Toast.Toast;
+exports.TOAST_ACTION_DURATION = Toast_styles.TOAST_ACTION_DURATION;
+exports.TOAST_DEFAULT_DURATION = Toast_styles.TOAST_DEFAULT_DURATION;
+exports.actionStyles = Toast_styles.actionStyles;
 exports.closeButtonStyles = Toast_styles.closeButtonStyles;
 exports.toastStyles = Toast_styles.toastStyles;
 exports.Toaster = Toaster.Toaster;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -138,7 +138,7 @@ export { TagCloseButton } from './components/Tag/TagCloseButton/TagCloseButton.m
 export { TagLabel } from './components/Tag/TagLabel/TagLabel.mjs';
 export { Textarea } from './components/Textarea/Textarea.mjs';
 export { Toast } from './components/Toast/Toast.mjs';
-export { closeButtonStyles, toastStyles } from './components/Toast/Toast.styles.mjs';
+export { TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION, actionStyles, closeButtonStyles, toastStyles } from './components/Toast/Toast.styles.mjs';
 export { Toaster, toaster } from './components/Toast/Toaster.mjs';
 export { useToast } from './components/Toast/useToast.mjs';
 export { Tooltip } from './components/Tooltip/Tooltip.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.37",
+  "version": "4.0.0-alpha.38",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Toast/Toast.action.test.tsx

@@ -0,0 +1,135 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { system } from '@/theme';
+
+import { TOAST_ACTION_DURATION, TOAST_DEFAULT_DURATION } from './Toast.styles';
+import type { UseToastOptions } from './Toast.types';
+import { Toaster, toaster } from './Toaster';
+import { useToast } from './useToast';
+
+let showToast: ReturnType<typeof useToast>;
+
+const Harness = () => {
+  showToast = useToast();
+  return null;
+};
+
+const renderToaster = () =>
+  render(
+    <ChakraProvider value={system}>
+      <Toaster />
+      <Harness />
+    </ChakraProvider>
+  );
+
+const fire = (options: UseToastOptions) => {
+  let id = '';
+  act(() => {
+    id = showToast(options);
+  });
+  return id;
+};
+
+afterEach(() => {
+  act(() => {
+    toaster.remove();
+  });
+  vi.restoreAllMocks();
+});
+
+describe('Toast action', () => {
+  it('renders the action as a named button under the description', async () => {
+    renderToaster();
+    fire({
+      status: 'error',
+      description: '크레딧이 부족합니다.',
+      action: { label: '크레딧 구매', onClick: () => {} },
+    });
+
+    const action = await screen.findByRole('button', { name: '크레딧 구매' });
+    expect(action).toHaveAttribute('type', 'button');
+    // Exactly one action besides the close ×.
+    expect(screen.getAllByRole('button')).toHaveLength(2);
+  });
+
+  it('calls onClick once and dismisses the toast', async () => {
+    renderToaster();
+    const onClick = vi.fn();
+    fire({
+      status: 'error',
+      description: '크레딧이 부족합니다.',
+      action: { label: '크레딧 구매', onClick },
+    });
+
+    const action = await screen.findByRole('button', { name: '크레딧 구매' });
+    const root = action.closest('[data-scope="toast"][data-part="root"]');
+    expect(root).toHaveAttribute('data-state', 'open');
+
+    fireEvent.click(action);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    // Dismissed: the root leaves the open state (exit animation follows).
+    await waitFor(() => expect(root).toHaveAttribute('data-state', 'closed'));
+  });
+
+  it("accepts Chakra's own toaster.create({ action }) without double-calling", async () => {
+    renderToaster();
+    const onClick = vi.fn();
+    act(() => {
+      toaster.create({
+        type: 'info',
+        description: 'Exported.',
+        action: { label: 'Open', onClick },
+      });
+    });
+
+    fireEvent.click(await screen.findByRole('button', { name: 'Open' }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders no action button when none is given', async () => {
+    renderToaster();
+    fire({ status: 'success', description: 'Saved.' });
+
+    await screen.findByText('Saved.');
+    expect(screen.getAllByRole('button')).toHaveLength(1); // close × only
+  });
+});
+
+describe('useToast duration', () => {
+  const durationOf = (options: UseToastOptions) => {
+    const create = vi.spyOn(toaster, 'create');
+    fire(options);
+    return create.mock.calls.at(-1)?.[0].duration;
+  };
+
+  it('defaults to 5s without an action', () => {
+    renderToaster();
+    expect(durationOf({ description: 'Saved.' })).toBe(TOAST_DEFAULT_DURATION);
+  });
+
+  it('defaults to 8s with an action', () => {
+    renderToaster();
+    expect(
+      durationOf({
+        description: 'Deleted.',
+        action: { label: 'Undo', onClick: () => {} },
+      })
+    ).toBe(TOAST_ACTION_DURATION);
+  });
+
+  it("keeps the caller's duration, including null", () => {
+    renderToaster();
+    const action = { label: 'Undo', onClick: () => {} };
+    expect(durationOf({ description: 'a', action, duration: 3000 })).toBe(3000);
+    expect(durationOf({ description: 'b', action, duration: null })).toBe(null);
+  });
+});

package/src/components/Toast/Toast.stories.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import { Button } from '../Button';
 import { Toast } from './Toast';
+import type { UseToastOptions } from './Toast.types';
 import { Toaster } from './Toaster';
 import { useToast } from './useToast';
 
@@ -481,3 +482,113 @@ export const RapidFire: Story = {
     );
   },
 };
+
+/**
+ * Toasts with an action.
+ *
+ * The action is a text action in the toast's own status color, under the
+ * description and aligned with it — not a neutral `<Button>` inside
+ * `description`. One action per toast; dismiss stays on the ×. A toast with
+ * an action stays for 8s unless `duration` is given.
+ *
+ * See "Guidelines/Actions in feedback surfaces".
+ */
+const ActionStory = ({
+  label,
+  options,
+}: {
+  label: string;
+  /** Builds the toast options; `fired` reports a click back to the story */
+  options: (fired: (message: string) => () => void) => UseToastOptions;
+}) => {
+  const showToast = useToast();
+  const [log, setLog] = useState<string | null>(null);
+  const fired = (message: string) => () => setLog(`onClick: ${message}`);
+
+  return (
+    <>
+      <Toaster />
+      <Stack gap={3} align="center">
+        <Button onClick={() => showToast(options(fired))}>{label}</Button>
+        {log && (
+          <Text fontSize="sm" color="fg.muted">
+            {log}
+          </Text>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export const ActionError: Story = {
+  name: 'Action / Error',
+  render: () => (
+    <ActionStory
+      label="Show error toast with action"
+      options={(fired) => ({
+        status: 'error',
+        description:
+          '크레딧이 부족해 응답을 생성하지 못했습니다. 이번 달 남은 크레딧: 0',
+        action: { label: '크레딧 구매', onClick: fired('크레딧 구매') },
+      })}
+    />
+  ),
+};
+
+export const ActionWarning: Story = {
+  name: 'Action / Warning',
+  render: () => (
+    <ActionStory
+      label="Show warning toast with action"
+      options={(fired) => ({
+        status: 'warning',
+        title: '모델 지원 종료',
+        description: '이 채팅의 모델이 지원 종료되어 기본 모델로 바뀌었습니다.',
+        action: { label: '모델 선택', onClick: fired('모델 선택') },
+      })}
+    />
+  ),
+};
+
+export const ActionInfo: Story = {
+  name: 'Action / Info',
+  render: () => (
+    <ActionStory
+      label="Show info toast with action"
+      options={(fired) => ({
+        status: 'info',
+        description: '내보내기가 끝났습니다. 파일을 다운로드할 수 있습니다.',
+        action: { label: '파일 열기', onClick: fired('파일 열기') },
+      })}
+    />
+  ),
+};
+
+export const ActionSuccess: Story = {
+  name: 'Action / Success',
+  render: () => (
+    <ActionStory
+      label="Show success toast with action"
+      options={(fired) => ({
+        status: 'success',
+        title: '업로드 완료',
+        description: '문서 3개를 프로젝트에 추가했습니다.',
+        action: { label: '프로젝트 보기', onClick: fired('프로젝트 보기') },
+      })}
+    />
+  ),
+};
+
+export const ActionShortMessage: Story = {
+  name: 'Action / Short message',
+  render: () => (
+    <ActionStory
+      label="Show short toast with undo"
+      options={(fired) => ({
+        status: 'success',
+        description: '채팅을 삭제했습니다.',
+        action: { label: '되돌리기', onClick: fired('되돌리기') },
+      })}
+    />
+  ),
+};

package/src/components/Toast/Toast.styles.ts

@@ -62,3 +62,63 @@ export const closeButtonStyles: Record<ToastStatus, BoxProps> = {
     },
   },
 };
+
+/**
+ * Action styles for each toast status.
+ *
+ * A toast's action is a text action in the toast's own text color — the same
+ * palette as `toastStyles[status].color` — with the hover tint of the close ×.
+ * No border and no fill: a neutral or outlined button inside a tinted toast
+ * reads as a separate card dropped on top of it.
+ *
+ * `ml: -2` cancels the horizontal padding so the label lines up with the
+ * description text above it.
+ */
+const actionBase: BoxProps = {
+  fontWeight: 'bold',
+  px: 2,
+  py: 1,
+  ml: -2,
+  height: 'auto',
+  alignSelf: 'flex-start',
+  borderRadius: 'sm',
+  borderWidth: 0,
+  bg: 'transparent',
+  cursor: 'pointer',
+};
+
+export const actionStyles: Record<ToastStatus, BoxProps> = {
+  info: {
+    ...actionBase,
+    color: 'primary.dark',
+    _hover: { bg: 'primary.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'primary.dark' },
+  },
+  warning: {
+    ...actionBase,
+    color: 'warning.dark',
+    _hover: { bg: 'warning.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'warning.dark' },
+  },
+  success: {
+    ...actionBase,
+    color: 'success.dark',
+    _hover: { bg: 'success.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'success.dark' },
+  },
+  error: {
+    ...actionBase,
+    color: 'danger.dark',
+    _hover: { bg: 'danger.lighter' },
+    _focusVisible: { outline: '2px solid', outlineColor: 'danger.dark' },
+  },
+};
+
+/** Default duration (ms) of a toast without an action, when none is given */
+export const TOAST_DEFAULT_DURATION = 5000;
+
+/**
+ * Default duration (ms) of a toast that carries an action, when none is given.
+ * The reader needs time to read the message *and* decide to act.
+ */
+export const TOAST_ACTION_DURATION = 8000;

package/src/components/Toast/Toast.tsx

@@ -1,20 +1,25 @@
 import { Flex, Stack, Toast as ChakraToast } from '@chakra-ui/react';
 
-import { closeButtonStyles } from './Toast.styles';
+import { actionStyles, closeButtonStyles } from './Toast.styles';
 import { ToastProps } from './Toast.types';
 import { ToastIcon } from './ToastIcon/ToastIcon';
 
 /**
  * Toast component using Chakra UI v3 composition pattern
  *
- * Uses Toast.Root, Toast.Title, Toast.Description, and Toast.CloseTrigger
- * for better composition and customization.
+ * Uses Toast.Root, Toast.Title, Toast.Description, Toast.ActionTrigger and
+ * Toast.CloseTrigger for better composition and customization.
+ *
+ * `action` renders under the description as a text action in the status
+ * color, aligned with the text column. Don't put a `<Button>` in
+ * `description` — use `action`.
  */
 export const Toast = ({
   title,
   description,
   status = 'success',
   onClose,
+  action,
   ...rest
 }: ToastProps) => (
   <ChakraToast.Root
@@ -39,6 +44,14 @@ export const Toast = ({
             {description}
           </ChakraToast.Description>
         )}
+        {action && (
+          <ChakraToast.ActionTrigger
+            onClick={action.onClick}
+            {...(actionStyles[status] as any)}
+          >
+            {action.label}
+          </ChakraToast.ActionTrigger>
+        )}
       </Stack>
     </Flex>
     <ChakraToast.CloseTrigger

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

@@ -12,6 +12,21 @@ import {
  */
 export type ToastStatus = 'info' | 'warning' | 'success' | 'error';
 
+/**
+ * The single action a toast can carry.
+ *
+ * Rendered as a text action in the toast's status color, under the
+ * description. Clicking it calls `onClick` and dismisses the toast.
+ * One action per toast — dismiss is the ×, never a second action.
+ * See the "Guidelines/Actions in feedback surfaces" page in Storybook.
+ */
+export interface ToastAction {
+  /** Action label — keep it to a short verb phrase ("크레딧 구매", "Undo") */
+  label: ReactNode;
+  /** Called when the action is clicked; the toast is dismissed afterwards */
+  onClick: () => void;
+}
+
 /**
  * Toast component props
  * Uses ToastRootProps as base and overrides title for ReactNode support
@@ -25,15 +40,23 @@ export interface ToastProps extends Omit<ToastRootProps, 'title'> {
   status?: ToastStatus;
   /** Custom close handler */
   onClose?: () => void;
+  /** One action, rendered as a text action in the status color */
+  action?: ToastAction;
 }
 
 /**
  * Options for useToast hook
  * Extends Chakra's ToastOptions with custom properties
  */
-export interface UseToastOptions extends ToastOptions {
+export interface UseToastOptions extends Omit<ToastOptions, 'action'> {
   /** Toast status - restricted to common statuses */
   status?: ToastStatus;
+  /**
+   * One action, rendered as a text action in the status color.
+   * Unlike Chakra's `action`, the label accepts any ReactNode.
+   * When set and `duration` is not given, the toast stays for 8s instead of 5s.
+   */
+  action?: ToastAction;
   /** Custom styles to apply to the toast */
   styles?: BoxProps;
 }
@@ -47,6 +70,8 @@ export interface ToasterCreateOptions extends ToastOptions {
   meta?: {
     /** Custom close handler for the toast */
     onClose?: () => void;
+    /** Toast action (ReactNode label); takes precedence over Chakra's `action` */
+    action?: ToastAction;
     /** Custom styles to merge with default toast styles */
     styles?: BoxProps;
     /** Allow additional custom metadata */

package/src/components/Toast/Toaster.tsx

@@ -7,6 +7,7 @@ import {
 
 import { Toast } from './Toast';
 import { toastStyles } from './Toast.styles';
+import type { ToastAction } from './Toast.types';
 
 /**
  * Global toaster instance for managing toast notifications
@@ -61,6 +62,15 @@ export const Toaster = () => (
         // Extract custom data from meta
         const customStyles = toast.meta?.styles || {};
         const onClose = toast.meta?.onClose;
+        // `useToast` passes the action through meta so its label can be a
+        // ReactNode. A plain `toaster.create({ action })` (Chakra's own option)
+        // also works: Toast.ActionTrigger already calls `toast.action.onClick`
+        // itself, so the handler passed down here must not call it again.
+        const action: ToastAction | undefined =
+          toast.meta?.action ??
+          (toast.action
+            ? { label: toast.action.label, onClick: () => {} }
+            : undefined);
 
         return (
           <Toast
@@ -68,6 +78,7 @@ export const Toaster = () => (
             description={toast.description}
             status={toast.type}
             onClose={onClose}
+            action={action}
             {...toastStyles[toast.type as keyof typeof toastStyles]}
             {...customStyles}
           />

package/src/components/Toast/useToast.tsx

@@ -1,6 +1,10 @@
 import { useRef } from 'react';
 
-import { toastStyles } from './Toast.styles';
+import {
+  TOAST_ACTION_DURATION,
+  TOAST_DEFAULT_DURATION,
+  toastStyles,
+} from './Toast.styles';
 import {
   ToasterCreateOptions,
   ToastStatusChangeDetails,
@@ -22,9 +26,19 @@ export const useToast = () => {
     title,
     description,
     styles: stylesProp,
-    duration = 5000,
+    duration: durationProp,
+    action,
     ...rest
   }: UseToastOptions) => {
+    // A toast with an action stays longer, unless the caller chose a duration
+    // (including `null` / `Infinity` for a persistent toast).
+    const duration =
+      durationProp !== undefined
+        ? durationProp
+        : action
+          ? TOAST_ACTION_DURATION
+          : TOAST_DEFAULT_DURATION;
+
     // NOTE: placement is not supported - must be configured in Toaster.tsx createToaster()
     const styles = {
       ...toastStyles[status],
@@ -49,6 +63,7 @@ export const useToast = () => {
       meta: {
         // Pass custom data through meta
         styles, // for custom toast style
+        action, // ReactNode label, so it travels in meta rather than `action`
         onClose: () => toaster.dismiss(toastId), // Custom close handler
       },
       onStatusChange: (details: ToastStatusChangeDetails) => {

package/src/guidelines/FeedbackActions.mdx

@@ -0,0 +1,133 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Guidelines/Actions in feedback surfaces" />
+
+# Actions in feedback surfaces
+
+Toasts, inline banners, panes and dialogs often need a control: "buy credits",
+"undo", "open file". This page covers which control goes where and how it
+should look.
+
+The test for every case: **does the control look like it belongs to the
+container it sits in?**
+
+> Visual prototype with before/after and a playground:
+> [feedback-actions-proto.apps.mindlogic.tools](https://feedback-actions-proto.apps.mindlogic.tools/)
+> (company login).
+
+---
+
+## Why this exists
+
+Until `Toast` had an `action` prop, callers who wanted a button in a toast put
+a `<Button>` inside `description` and styled it themselves. On the credit-402
+toast in FactChat that produced a neutral outline button (`#494949` text, ink
+hairline) on a rose toast (`#FFE6E8` background, `#69000A` text). It carried
+none of the toast's colors, so it read as a separate card dropped on top.
+
+The fix is one recipe for every toast: the action uses the toast's own text
+color, the same treatment as the close ×.
+
+---
+
+## Rules
+
+### 1. Match the container's weight
+
+Toasts and inline banners carry **text actions**. Buttons belong to surfaces
+that own the space: a pane, a dialog, an empty state.
+
+### 2. The action takes the status color
+
+Inside a tinted container the action uses **that container's text color**
+(`danger.dark` on an error toast, `primary.dark` on an info toast). Never a
+neutral control.
+
+### 3. One action per toast; dismiss is ×
+
+No 「닫기」 or 「취소」 button in a toast; the × already does that. If a
+message needs two actions, it is not a toast; use a dialog or a pane.
+
+### 4. Don't repeat the action in the copy
+
+If the action says 「크레딧 구매」, the message doesn't also say "purchase
+credits to continue". Toast copy stays **within 2 lines**.
+
+### 5. In a pane, the fix is the primary
+
+In a pane or empty state, the action that fixes the problem is the primary
+(ink solid, `colorPalette="neutral" variant="solid"`). Dismiss is outline
+neutral (`colorPalette="neutral" variant="outline"`).
+
+### 6. Toasts with an action stay longer
+
+The reader has to read the message and then decide to act. A toast with an
+action defaults to **8s** instead of 5s. `useToast` does this for you when
+`duration` is not given.
+
+---
+
+## Which control goes where
+
+| Surface            | Primary action                                     | Secondary / dismiss              | Max actions | Copy                                       |
+| ------------------ | -------------------------------------------------- | -------------------------------- | ----------- | ------------------------------------------ |
+| Toast              | Text action in status color, via the `action` prop | × only                           | 1           | ≤ 2 lines, no hint that repeats the action |
+| Inline banner      | Trailing text action in status color               | × if dismissible                 | 1           | 1 line, wraps on mobile                    |
+| Pane / empty state | Ink solid (`neutral` `solid`)                      | Outline neutral                  | 2           | Title + reason + optional hint             |
+| Dialog             | Ink solid, right                                   | Outline neutral, left of primary | 2           | Title + body                               |
+
+---
+
+## Usage
+
+```tsx
+import { useToast } from '@mindlogic-ai/logician-ui';
+
+const showToast = useToast();
+
+showToast({
+  status: 'error',
+  description: '크레딧이 부족해 응답을 생성하지 못했습니다.',
+  action: {
+    label: '크레딧 구매',
+    onClick: openCreditPurchaseModal,
+  },
+  // duration defaults to 8000 because an action is set
+});
+```
+
+- The action renders under the description, aligned with the text column, in
+  the toast's status color with the same hover tint as the ×.
+- Clicking it calls `onClick` and dismisses the toast.
+- `label` accepts any `ReactNode`, but keep it a short verb phrase.
+- An explicit `duration` (including `null` for a persistent toast) always wins.
+- Chakra's own `toaster.create({ action: { label, onClick } })` renders the
+  same way; with that route the label must be a string and the duration
+  default is Chakra's, not 8s.
+
+### Don't: a button inside `description`
+
+```tsx
+// ✗ A neutral control dropped onto a tinted toast; it carries none of the
+//   toast's colors, adds a third line, and dismissal is left to the caller.
+showToast({
+  status: 'error',
+  description: (
+    <>
+      크레딧이 부족합니다. 크레딧을 구매하면 계속 사용할 수 있습니다.
+      <Button colorPalette="neutral" variant="outline" onClick={buy}>
+        크레딧 구매
+      </Button>
+    </>
+  ),
+});
+
+// ✓ One action, in the toast's color, and the copy doesn't repeat it.
+showToast({
+  status: 'error',
+  description: '크레딧이 부족합니다.',
+  action: { label: '크레딧 구매', onClick: buy },
+});
+```
+
+See **Components/Toast → Action / …** for each status and a short-message case.