From 8e691c22531d55bfe75ce9770cd1b1147dfc8d22 Mon Sep 17 00:00:00 2001
From: Natxo <1172351+natxocc@users.noreply.github.com>
Date: Tue, 31 Mar 2026 12:18:21 +0200
Subject: [PATCH] Implement Alert component with customizable types

---
 src/components/Alert.js | 50 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/Alert.js

diff --git a/src/components/Alert.js b/src/components/Alert.js
new file mode 100644
index 0000000..2e4d69a
--- /dev/null
+++ b/src/components/Alert.js
@@ -0,0 +1,50 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+
+/** ALERT */
+export const Alert = (props, children) => {
+  const { type = "info", soft = true, ...rest } = props;
+  
+  const icons = {
+    info: iconInfo,
+    success: iconSuccess,
+    warning: iconWarning,
+    error: iconError,
+  };
+
+  const typeClass = () => {
+    const t = val(type);
+    const map = {
+      info: "alert-info",
+      success: "alert-success",
+      warning: "alert-warning",
+      error: "alert-error",
+    };
+    return map[t] || t;
+  };
+
+  const content = children || props.message;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      role: "alert",
+      class: () => `alert ${typeClass()} ${val(soft) ? "alert-soft" : ""} ${props.class || ""}`,
+    },
+    [
+      $html("img", {
+        src: icons[val(type)] || icons.info,
+        class: "w-4 h-4 object-contain",
+        alt: val(type),
+      }),
+      $html("div", { class: "flex-1" }, [
+        $html("span", {}, [typeof content === "function" ? content() : content])
+      ]),
+      props.actions ? $html("div", { class: "flex-none" }, [
+        typeof props.actions === "function" ? props.actions() : props.actions
+      ]) : null,
+    ],
+  );
+};