Next Preview Work Final

src/components/Tabs.js

@@ -1,5 +1,5 @@
 // components/Tabs.js
-import { $, $html, $for } from "sigpro";
+import { $, $html, $for } from "../sigpro.js";
 import { val, ui } from "../core/utils.js";
 
 /**
@@ -13,58 +13,63 @@ import { val, ui } from "../core/utils.js";
 export const Tabs = (props) => {
   const { items, class: className, ...rest } = props;
   const itemsSignal = typeof items === "function" ? items : () => items || [];
-  const name = `tabs-${Math.random().toString(36).slice(2, 9)}`;
+  const activeIndex = $(0);
 
-  // Encontrar el índice activo
-  const getActiveIndex = () => {
-    const arr = itemsSignal();
-    const idx = arr.findIndex(it => val(it.active) === true);
-    return idx === -1 ? 0 : idx;
-  };
+  $watch(() => {
+    const idx = itemsSignal().findIndex(it => val(it.active) === true);
+    if (idx !== -1 && idx !== activeIndex()) activeIndex(idx);
+  });
 
-  const activeIndex = $(getActiveIndex);
-
-  const updateActiveIndex = () => {
-    const newIndex = getActiveIndex();
-    if (newIndex !== activeIndex()) activeIndex(newIndex);
-  };
-
-  $watch(() => updateActiveIndex());
-
-  return $html("div", {
-    ...rest,
-    class: ui('tabs', className || 'tabs-box')
-  }, [
-    $for(itemsSignal, (it, idx) => {
-      const isChecked = () => activeIndex() === idx;
-      const getLabelText = () => {
-        const label = typeof it.label === "function" ? it.label() : it.label;
-        return typeof label === "string" ? label : `Tab ${idx + 1}`;
-      };
-
-      return [
-        $html("input", {
-          type: "radio",
-          name: name,
-          class: "tab",
-          "aria-label": getLabelText(),
-          checked: isChecked,  // ← función reactiva, no string hardcodeado
-          disabled: () => val(it.disabled),
-          onchange: (e) => {
-            if (e.target.checked && !val(it.disabled)) {
+  return $html("div", { ...rest, class: "w-full" }, [
+    // 1. Tab List: Aplanamos los botones para que sean hijos directos
+    $html("div", { 
+      role: "tablist", 
+      class: ui('tabs', className || 'tabs-box') 
+    }, () => {
+      const list = itemsSignal();
+      return list.map((it, idx) => {
+        const isSelected = () => activeIndex() === idx;
+        
+        const tab = $html("button", {
+          role: "tab",
+          class: () => ui("tab", isSelected() ? "tab-active" : ""),
+          onclick: (e) => {
+            e.preventDefault();
+            if (!val(it.disabled)) {
               if (it.onclick) it.onclick();
-              if (typeof it.active === "function") it.active(true);
               activeIndex(idx);
             }
           }
-        }),
-        $html("div", {
+        });
+
+        // Mantenemos el watch para el label por si es dinámico
+        $watch(() => {
+          const content = val(it.label);
+          if (content instanceof Node) {
+            tab.replaceChildren(content);
+          } else {
+            tab.textContent = String(content);
+          }
+        });
+
+        return tab;
+      });
+    }),
+
+    // 2. Tab Content: Aquí el display:contents no molesta tanto, 
+    // pero lo aplanamos por consistencia
+    $html("div", { class: "tab-panels" }, () => {
+      return itemsSignal().map((it, idx) => {
+        const isVisible = () => activeIndex() === idx;
+        
+        return $html("div", {
+          role: "tabpanel",
           class: "tab-content bg-base-100 border-base-300 p-6",
-          style: () => isChecked() ? "display: block" : "display: none"
+          style: () => isVisible() ? "display: block" : "display: none"
         }, [
-          typeof it.content === "function" ? it.content() : it.content
-        ])
-      ];
-    }, (it, idx) => idx)
+          () => typeof it.content === "function" ? it.content() : it.content
+        ]);
+      });
+    })
   ]);
 };