@sarunyu/system-one 4.9.13 → 4.9.22

package/dist/index.js

@@ -325,8 +325,9 @@ function AlertStatusIcon({
   if (status === "critical") return /* @__PURE__ */ jsx(XCircle, { size: 16, weight: "fill", className });
   return /* @__PURE__ */ jsx(Info, { size: 16, weight: "fill", className });
 }
-const Alert = forwardRef(function Alert2({ status = "normal", message, multiline = false, className }, ref) {
+const Alert = forwardRef(function Alert2({ status = "normal", title, message, multiline = false, className }, ref) {
   const style = alertStyles[status];
+  const hasTitle = Boolean(title);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -334,23 +335,33 @@ const Alert = forwardRef(function Alert2({ status = "normal", message, multiline
       role: "status",
       className: cn(
         "flex w-full items-center gap-1.5 rounded px-2 py-1",
-        multiline && "items-start",
+        (multiline || hasTitle) && "items-start",
         style.container,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(AlertStatusIcon, { status, className: cn("shrink-0", multiline && "mt-0.5", style.icon) }),
         /* @__PURE__ */ jsx(
-          "p",
+          AlertStatusIcon,
           {
-            className: cn(
-              "min-w-0 flex-1 text-sm leading-5 font-normal",
-              multiline ? "line-clamp-2" : "truncate",
-              style.text
-            ),
-            children: message
+            status,
+            className: cn("shrink-0 mt-0.5", style.icon)
           }
-        )
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5", children: [
+          hasTitle && /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-5 font-medium", style.text), children: title }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm leading-5 font-normal",
+                !hasTitle && !multiline && "truncate",
+                !hasTitle && multiline && "line-clamp-2",
+                style.text
+              ),
+              children: message
+            }
+          )
+        ] })
       ]
     }
   );
@@ -4167,7 +4178,7 @@ const Toast = forwardRef(function Toast2({
   );
 });
 Toast.displayName = "Toast";
-function ToastStack({ items, className, renderItem }) {
+function ToastStack({ items = [], className, renderItem }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children: items.map(
     (item) => renderItem ? /* @__PURE__ */ jsx("div", { children: renderItem(item) }, item.id) : /* @__PURE__ */ jsx(Toast, { ...item }, item.id)
   ) });
@@ -4175,6 +4186,9 @@ function ToastStack({ items, className, renderItem }) {
 function Toaster({ items, renderItem, className, duration = 4e3, onRemove }) {
   const timers = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
+    if (duration > 0 && !onRemove) {
+      console.warn("[Toaster] duration is set but onRemove is not provided — toasts will never dismiss. Pass onRemove={(id) => setToasts(t => t.filter(x => x.id !== id))} to enable auto-dismiss.");
+    }
     if (!onRemove || duration === 0) return;
     items.forEach((item) => {
       if (!timers.current.has(item.id)) {
@@ -4644,7 +4658,7 @@ const Tag = forwardRef(function Tag2({
     {
       ref,
       className: cn(
-        "inline-flex items-center justify-center rounded-[4px]",
+        "inline-flex w-fit items-center justify-center rounded-[4px]",
         (icon || close) && "gap-[2px]",
         s.container,
         bgClass,
@@ -4697,7 +4711,7 @@ function StatusTag({ type = "stop", text, className }) {
     "div",
     {
       className: cn(
-        "inline-flex items-center justify-center gap-1 rounded-[8px] px-2 py-1",
+        "inline-flex w-fit items-center justify-center gap-1 rounded-[8px] px-2 py-1",
         className
       ),
       children: [