@exem-ui/react 0.3.4-next.20261006051232 → 0.3.4-next.20261013005830

package/dist/index.d.mts

@@ -1126,6 +1126,12 @@ type ToastInput = string | ToastOptions;
  * toast.info('정보');
  * toast.warning('경고');
  *
+ * // 텍스트 버튼 (문구 오른쪽 한 줄)
+ * toast.success({
+ *   title: '저장 완료',
+ *   action: { label: '되돌리기', onClick: () => handleUndo() },
+ * });
+ *
  * // title + description + action
  * toast.success({
  *   title: '저장 완료',

package/dist/index.d.ts

@@ -1126,6 +1126,12 @@ type ToastInput = string | ToastOptions;
  * toast.info('정보');
  * toast.warning('경고');
  *
+ * // 텍스트 버튼 (문구 오른쪽 한 줄)
+ * toast.success({
+ *   title: '저장 완료',
+ *   action: { label: '되돌리기', onClick: () => handleUndo() },
+ * });
+ *
  * // title + description + action
  * toast.success({
  *   title: '저장 완료',

package/dist/index.js

@@ -2257,7 +2257,7 @@ Toaster.Container = React__namespace.forwardRef(
       {
         ref,
         className: utils.cn(
-          "flex items-center gap-3 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong",
+          "flex items-center gap-2 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong",
           "h-10 w-auto min-w-0 max-w-none",
           className
         ),
@@ -2324,7 +2324,8 @@ Toaster.Action = React__namespace.forwardRef(
           "flex h-7 min-h-[28px] w-auto min-w-[28px] shrink-0 items-center justify-center",
           "rounded-small bg-transparent px-0 py-0",
           "border-0 transition-colors",
-          "hover:bg-solid-primary-hovered",
+          // Toast는 테마와 무관하게 어두운 배경이라 hover 배경도 고정 (solid-primary-hovered는 다크에서 밝아짐)
+          "hover:bg-gray-07",
           "whitespace-nowrap",
           "cursor-pointer",
           "text-body-2",
@@ -2403,40 +2404,41 @@ function ToastContent({
   action,
   close
 }) {
-  const hasExtra = description || action;
-  if (hasExtra) {
+  const closeButton = close && /* @__PURE__ */ jsxRuntime.jsx(
+    Toaster.Action,
+    {
+      className: "rounded-medium",
+      altText: "\uB2EB\uAE30",
+      onClick: () => sonner.toast.dismiss(id)
+    }
+  );
+  const renderAction = (className) => action && /* @__PURE__ */ jsxRuntime.jsx(
+    Toaster.Action,
+    {
+      className: utils.cn("font-medium text-sky-04", className),
+      onClick: () => {
+        action.onClick();
+        sonner.toast.dismiss(id);
+      },
+      children: action.label
+    }
+  );
+  if (description) {
     return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { className: "h-auto min-h-12 flex-col items-start gap-1 py-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Icon, { children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title }),
-        close && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Action, { className: "rounded-medium", onClick: () => sonner.toast.dismiss(id) })
-      ] }),
-      description && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Description, { children: description }),
-      action && /* @__PURE__ */ jsxRuntime.jsx(
-        Toaster.Action,
-        {
-          className: "mt-1 text-text-info hover:text-text-info-hovered",
-          onClick: () => {
-            action.onClick();
-            sonner.toast.dismiss(id);
-          },
-          children: action.label
-        }
-      )
-    ] });
-  }
-  if (close) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { className: "py-1.5 pr-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Icon, { children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title })
+        closeButton
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Toaster.Action, { className: "rounded-medium", onClick: () => sonner.toast.dismiss(id) })
+      /* @__PURE__ */ jsxRuntime.jsx(Toaster.Description, { children: description }),
+      renderAction("mt-1")
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Toaster.Container, { className: utils.cn((action || close) && "py-1.5 pr-1.5"), children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx(Toaster.Icon, { children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title })
+    /* @__PURE__ */ jsxRuntime.jsx(Toaster.Title, { children: title }),
+    renderAction("rounded-medium px-2"),
+    closeButton
   ] });
 }
 function createToast(input, options, icon) {

package/dist/index.mjs

@@ -2232,7 +2232,7 @@ Toaster.Container = React.forwardRef(
       {
         ref,
         className: cn(
-          "flex items-center gap-3 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong",
+          "flex items-center gap-2 rounded-medium border border-border-primary bg-component-toast py-[10px] pl-3 pr-4 text-mono-light shadow-strong",
           "h-10 w-auto min-w-0 max-w-none",
           className
         ),
@@ -2299,7 +2299,8 @@ Toaster.Action = React.forwardRef(
           "flex h-7 min-h-[28px] w-auto min-w-[28px] shrink-0 items-center justify-center",
           "rounded-small bg-transparent px-0 py-0",
           "border-0 transition-colors",
-          "hover:bg-solid-primary-hovered",
+          // Toast는 테마와 무관하게 어두운 배경이라 hover 배경도 고정 (solid-primary-hovered는 다크에서 밝아짐)
+          "hover:bg-gray-07",
           "whitespace-nowrap",
           "cursor-pointer",
           "text-body-2",
@@ -2378,40 +2379,41 @@ function ToastContent({
   action,
   close
 }) {
-  const hasExtra = description || action;
-  if (hasExtra) {
+  const closeButton = close && /* @__PURE__ */ jsx(
+    Toaster.Action,
+    {
+      className: "rounded-medium",
+      altText: "\uB2EB\uAE30",
+      onClick: () => toast$1.dismiss(id)
+    }
+  );
+  const renderAction = (className) => action && /* @__PURE__ */ jsx(
+    Toaster.Action,
+    {
+      className: cn("font-medium text-sky-04", className),
+      onClick: () => {
+        action.onClick();
+        toast$1.dismiss(id);
+      },
+      children: action.label
+    }
+  );
+  if (description) {
     return /* @__PURE__ */ jsxs(Toaster.Container, { className: "h-auto min-h-12 flex-col items-start gap-1 py-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
         icon && /* @__PURE__ */ jsx(Toaster.Icon, { children: icon }),
         /* @__PURE__ */ jsx(Toaster.Title, { children: title }),
-        close && /* @__PURE__ */ jsx(Toaster.Action, { className: "rounded-medium", onClick: () => toast$1.dismiss(id) })
-      ] }),
-      description && /* @__PURE__ */ jsx(Toaster.Description, { children: description }),
-      action && /* @__PURE__ */ jsx(
-        Toaster.Action,
-        {
-          className: "mt-1 text-text-info hover:text-text-info-hovered",
-          onClick: () => {
-            action.onClick();
-            toast$1.dismiss(id);
-          },
-          children: action.label
-        }
-      )
-    ] });
-  }
-  if (close) {
-    return /* @__PURE__ */ jsxs(Toaster.Container, { className: "py-1.5 pr-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 overflow-hidden", children: [
-        icon && /* @__PURE__ */ jsx(Toaster.Icon, { children: icon }),
-        /* @__PURE__ */ jsx(Toaster.Title, { children: title })
+        closeButton
       ] }),
-      /* @__PURE__ */ jsx(Toaster.Action, { className: "rounded-medium", onClick: () => toast$1.dismiss(id) })
+      /* @__PURE__ */ jsx(Toaster.Description, { children: description }),
+      renderAction("mt-1")
     ] });
   }
-  return /* @__PURE__ */ jsxs(Toaster.Container, { children: [
+  return /* @__PURE__ */ jsxs(Toaster.Container, { className: cn((action || close) && "py-1.5 pr-1.5"), children: [
     icon && /* @__PURE__ */ jsx(Toaster.Icon, { children: icon }),
-    /* @__PURE__ */ jsx(Toaster.Title, { children: title })
+    /* @__PURE__ */ jsx(Toaster.Title, { children: title }),
+    renderAction("rounded-medium px-2"),
+    closeButton
   ] });
 }
 function createToast(input, options, icon) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exem-ui/react",
-  "version": "0.3.4-next.20261006051232",
+  "version": "0.3.4-next.20261013005830",
   "description": "Exem Design System - React Components",
   "author": "Exem Design Team",
   "license": "Apache-2.0",
@@ -100,7 +100,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tiny-invariant": "^1.3.3",
-    "@exem-ui/core": "0.3.3-next.20261006051232"
+    "@exem-ui/core": "0.3.3-next.20261013005830"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
@@ -136,7 +136,7 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.16.0",
-    "@exem-ui/tailwindcss3": "0.3.2-next.20261006051232"
+    "@exem-ui/tailwindcss3": "0.3.2-next.20261013005830"
   },
   "scripts": {
     "generate": "node scripts/generate-icons.js",