events on Tabs

src/components/Tabs.js

@@ -1,6 +1,6 @@
 // components/Tabs.js
-// import { $, Tag, For } from "../sigpro.js";
-import { val, ui } from "../core/utils.js";
+import { $, Tag, Watch } from "../sigpro.js";
+import { val, ui, getIcon } from "..//core/utils.js";
 
 /**
  * Tabs component
@@ -11,11 +11,10 @@ import { val, ui } from "../core/utils.js";
  * - bg-base-100, border-base-300, p-6
  */
 export const Tabs = (props) => {
-  const { items, class: className, ...rest } = props;
+  const { items, class: className, onTabClose, ...rest } = props;
   const itemsSignal = typeof items === "function" ? items : () => items || [];
   const activeIndex = $(0);
 
-  // Sincroniza con active:true solo cuando cambia la lista de items
   Watch(() => {
     const list = itemsSignal();
     const idx = list.findIndex(it => val(it.active) === true);
@@ -25,7 +24,9 @@ export const Tabs = (props) => {
   });
 
   const removeTab = (indexToRemove, item) => {
-    if (item.onClose) item.onClose();
+    if (item.onClose) item.onClose(item);
+    if (onTabClose) onTabClose(item, indexToRemove);
+
     const currentItems = itemsSignal();
     const newItems = currentItems.filter((_, idx) => idx !== indexToRemove);
     const isWritableSignal = typeof items === "function" && !items._isComputed;
@@ -48,7 +49,6 @@ export const Tabs = (props) => {
     for (let i = 0; i < list.length; i++) {
       const item = list[i];
 
-      // --- Botón ---
       const label = val(item.label);
       const labelNode = label instanceof Node ? label : document.createTextNode(String(label));
       const buttonChildren = [];
@@ -66,23 +66,23 @@ export const Tabs = (props) => {
         buttonChildren.push(labelNode);
       }
 
-      const button = Tag("button", {
-        class: () => {
-          const isActive = activeIndex() === i;
-          return ui("tab", isActive ? "tab-active" : "");
-        },
+      const buttonBase = Tag("button", {
+        class: () => ui("tab", activeIndex() === i ? "tab-active" : ""),
         onclick: (e) => {
           e.preventDefault();
           if (!val(item.disabled)) {
             if (item.onclick) item.onclick();
             activeIndex(i);
           }
-        },
-        title: item.tip || ""
+        }
       }, buttonChildren);
+
+      const button = item.tip
+        ? Tag("div", { class: "tooltip", "data-tip": item.tip }, buttonBase)
+        : buttonBase;
+
       elements.push(button);
 
-      // --- Panel ---
       let contentNode;
       const rawContent = val(item.content);
       if (typeof rawContent === "function") {