new FAB

src/sigpro-ui.js

@@ -1046,6 +1046,48 @@ export const UI = ($, defaultLang = "es") => {
     );
   };
 
+  /** FAB */
+  ui.Fab = (props) => {
+    const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+
+    return $.html(
+      "div",
+      {
+        ...rest,
+        class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${props.class || ""}`,
+      },
+      [
+        $.html(
+          "div",
+          {
+            tabindex: 0,
+            role: "button",
+            class: "btn btn-lg btn-circle btn-primary shadow-2xl",
+          },
+          [icon ? (typeof icon === "function" ? icon() : icon) : null, !icon && label ? label : null],
+        ),
+
+        ...val(actions).map((act) =>
+          $.html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
+            act.label ? $.html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
+            $.html(
+              "button",
+              {
+                type: "button",
+                class: `btn btn-circle shadow-lg ${act.class || ""}`,
+                onclick: (e) => {
+                  e.stopPropagation();
+                  act.onclick?.(e);
+                },
+              },
+              [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
+            ),
+          ]),
+        ),
+      ],
+    );
+  };
+
   /** TOAST */
   ui.Toast = (message, type = "alert-success", duration = 3500) => {
     let container = document.getElementById("sigpro-toast-container");