Updateing Docs

src/components/Tabs.js

@@ -1,46 +1,65 @@
-import { $html, $for } from "sigpro";
-import { val, joinClass } from "../core/utils.js";
+// components/Tabs.js
+import { $, $html, $for } from "sigpro";
+import { val, ui } from "../core/utils.js";
 
-/** TABS */
+/**
+ * Tabs component
+ * 
+ * daisyUI classes used:
+ * - tabs, tabs-box, tabs-lifted, tabs-bordered
+ * - tab, tab-active, tab-disabled
+ * - flex, flex-col, gap-4, w-full, p-4
+ */
 export const Tabs = (props) => {
-  const { items, ...rest } = props;
+  const { class: className, items, activeIndex = $(0), ...rest } = props;
+  
   const itemsSignal = typeof items === "function" ? items : () => items || [];
 
+  // 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);
+  };
+
   return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
     $html(
       "div",
       {
         role: "tablist",
-        class: joinClass("tabs tabs-box", props.class),
+        class: ui('tabs tabs-box', className),
       },
       $for(
         itemsSignal,
-        (it) =>
-          $html(
+        (it, idx) => {
+          const isActive = val(it.active) ?? (currentActive() === idx);
+          
+          return $html(
             "a",
             {
               role: "tab",
-              class: () => joinClass(
-                "tab", 
-                val(it.active) && "tab-active", 
-                val(it.disabled) && "tab-disabled", 
-                it.tip && "tooltip"
-              ),
-              "data-tip": it.tip,
-              onclick: (e) => !val(it.disabled) && it.onclick?.(e),
+              class: () => ui('tab', isActive ? 'tab-active' : '', val(it.disabled) ? 'tab-disabled' : ''),
+              onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
             },
             it.label,
-          ),
-        (t) => t.label,
+          );
+        },
+        (t, idx) => t.label + idx,
       ),
     ),
     () => {
-      const active = itemsSignal().find((it) => val(it.active));
-      if (!active) return null;
-      const content = val(active.content);
+      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
       ]);
     },
   ]);
-};
+};