Updateing Docs

src/components/Alert.js

@@ -1,50 +1,42 @@
+// components/Alert.js
 import { $html } from "sigpro";
-import { val } from "../core/utils.js";
-import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+import { ui, getIcon } from "../core/utils.js";
 
-/** ALERT */
+/**
+ * Alert component
+ * 
+ * daisyUI classes used:
+ * - alert, alert-info, alert-success, alert-warning, alert-error
+ * - alert-soft, alert-outline, alert-dash
+ */
 export const Alert = (props, children) => {
-  const { type = "info", soft = true, ...rest } = props;
-  
-  const icons = {
-    info: iconInfo,
-    success: iconSuccess,
-    warning: iconWarning,
-    error: iconError,
+  const { class: className, actions, type = 'info', soft = true, ...rest } = props;
+
+  const iconMap = {
+    info: "icon-[lucide--info]",
+    success: "icon-[lucide--check-circle]",
+    warning: "icon-[lucide--alert-triangle]",
+    error: "icon-[lucide--alert-circle]",
   };
 
-  const typeClass = () => {
-    const t = val(type);
-    const map = {
-      info: "alert-info",
-      success: "alert-success",
-      warning: "alert-warning",
-      error: "alert-error",
-    };
-    return map[t] || t;
-  };
+  // Build the complete class string
+  const typeClass = `alert-${type}`;
+  const softClass = soft ? 'alert-soft' : '';
+  const allClasses = [typeClass, softClass, className].filter(Boolean).join(' ');
 
   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,
-    ],
-  );
-};
+  return $html("div", {
+    ...rest,
+    role: "alert",
+    class: ui('alert', allClasses),
+  }, () => [
+    getIcon(iconMap[type]),
+    $html("div", { class: "flex-1" }, [
+      $html("span", {}, [typeof content === "function" ? content() : content])
+    ]),
+    actions ? $html("div", { class: "flex-none" }, [
+      typeof actions === "function" ? actions() : actions
+    ]) : null,
+  ].filter(Boolean));
+};