From b5263d2ab3bc16d3cca365cadf26656b68aa3e74 Mon Sep 17 00:00:00 2001
From: Natxo <1172351+natxocc@users.noreply.github.com>
Date: Tue, 31 Mar 2026 12:18:59 +0200
Subject: [PATCH] Implement Floating Action Button component

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

diff --git a/src/components/Fab.js b/src/components/Fab.js
new file mode 100644
index 0000000..5fa655e
--- /dev/null
+++ b/src/components/Fab.js
@@ -0,0 +1,51 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+
+/** FAB (Floating Action Button) */
+export const 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 || ""
+      }`,
+    },
+    [
+      // Botón principal
+      $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
+        ],
+      ),
+
+      // Acciones secundarias (se despliegan hacia arriba)
+      ...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 || ""],
+          ),
+        ]),
+      ),
+    ],
+  );
+};