Docs Updated

src/components/Tabs.js

@@ -7,59 +7,64 @@ import { val, ui } from "../core/utils.js";
  * 
  * daisyUI classes used:
  * - tabs, tabs-box, tabs-lifted, tabs-bordered
- * - tab, tab-active, tab-disabled
- * - flex, flex-col, gap-4, w-full, p-4
+ * - tab, tab-content
+ * - bg-base-100, border-base-300, p-6
  */
 export const Tabs = (props) => {
-  const { class: className, items, activeIndex = $(0), ...rest } = props;
-  
+  const { items, class: className, ...rest } = props;
   const itemsSignal = typeof items === "function" ? items : () => items || [];
+  const name = `tabs-${Math.random().toString(36).slice(2, 9)}`;
 
-  // Si no se provee activeIndex, creamos uno interno
-  const internalActive = $(0);
-  const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
-
-  const handleTabClick = (idx, onClick) => (e) => {
-    if (typeof currentActive === "function") {
-      currentActive(idx);
-    }
-    onClick?.(e);
+  // Encontrar el índice activo
+  const getActiveIndex = () => {
+    const arr = itemsSignal();
+    const idx = arr.findIndex(it => val(it.active) === true);
+    return idx === -1 ? 0 : idx;
   };
 
-  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
-    $html(
-      "div",
-      {
-        role: "tablist",
-        class: ui('tabs tabs-box', className),
-      },
-      $for(
-        itemsSignal,
-        (it, idx) => {
-          const isActive = val(it.active) ?? (currentActive() === idx);
-          
-          return $html(
-            "a",
-            {
-              role: "tab",
-              class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''),
-              onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
-            },
-            it.label,
-          );
-        },
-        (t, idx) => t.label + idx,
-      ),
-    ),
-    () => {
-      const activeItem = itemsSignal().find((it, idx) => 
-        val(it.active) ?? (currentActive() === idx)
-      );
-      if (!activeItem) return null;
-      const content = val(activeItem.content);
-      return $html("div", { class: "p-4" }, [
-        typeof content === "function" ? content() : content
-      ]);
-    },
+  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)) {
+              if (it.onclick) it.onclick();
+              if (typeof it.active === "function") it.active(true);
+              activeIndex(idx);
+            }
+          }
+        }),
+        $html("div", {
+          class: "tab-content bg-base-100 border-base-300 p-6",
+          style: () => isChecked() ? "display: block" : "display: none"
+        }, [
+          typeof it.content === "function" ? it.content() : it.content
+        ])
+      ];
+    }, (it, idx) => idx)
   ]);
 };