changed to new functions

2026-04-22 12:06:34 +02:00
parent 5a5f593025
commit 59e6d972a8
125 changed files with 1934 additions and 2015 deletions
--- a/src/components/Accordion.js
+++ b/src/components/Accordion.js
@@ -1,5 +1,5 @@
 // components/Accordion.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui, val } from "../utils.js";

 /**
@@ -14,16 +14,16 @@ import { ui, val } from "../utils.js";
 export const Accordion = (props, children) => {
  const { class: className, title, name, open, ...rest } = props;

-  return Tag("div", {
+  return h("div", {
    ...rest,
    class: ui('collapse collapse-arrow bg-base-200 mb-2', className),
  }, [
-    Tag("input", {
+    h("input", {
      type: name ? "radio" : "checkbox",
      name: name,
      checked: val(open),
    }),
-    Tag("div", { class: "collapse-title text-xl font-medium" }, title),
-    Tag("div", { class: "collapse-content" }, children),
+    h("div", { class: "collapse-title text-xl font-medium" }, title),
+    h("div", { class: "collapse-content" }, children),
  ]);
 };
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -1,5 +1,5 @@
 // components/Alert.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui, getIcon } from "../utils.js";

 /**
@@ -26,16 +26,16 @@ export const Alert = (props, children) => {

  const content = children || props.message;

-  return Tag("div", {
+  return h("div", {
    ...rest,
    role: "alert",
    class: ui('alert', allClasses),
  }, () => [
    getIcon(iconMap[type]),
-    Tag("div", { class: "flex-1" }, [
-      Tag("span", {}, [typeof content === "function" ? content() : content])
+    h("div", { class: "flex-1" }, [
+      h("span", {}, [typeof content === "function" ? content() : content])
    ]),
-    actions ? Tag("div", { class: "flex-none" }, [
+    actions ? h("div", { class: "flex-none" }, [
      typeof actions === "function" ? actions() : actions
    ]) : null,
  ].filter(Boolean));
--- a/src/components/Autocomplete.js
+++ b/src/components/Autocomplete.js
@@ -1,5 +1,5 @@
 // components/Autocomplete.js
-import { $, Tag, For } from "sigpro";
+import { $, h, each } from "sigpro";
 import { val } from "../utils.js";
 import { Input } from "./Input.js";

@@ -22,10 +22,10 @@ export const Autocomplete = (props) => {
  const cursor = $(-1);

  // FIX CRÍTICO: En lugar de una computed automática, usamos una señal manual
-  // y un Watch para garantizar que la lista se actualice SÍNCRONAMENTE.
+  // y un watch para garantizar que la lista se actualice SÍNCRONAMENTE.
  const list = $([]);

-  Watch(() => {
+  watch(() => {
    const q = String(query()).toLowerCase();
    const data = val(items) || [];
    const filtered = q 
@@ -64,7 +64,7 @@ export const Autocomplete = (props) => {
    }
  };

-  return Tag("div", { class: 'relative w-full' }, [
+  return h("div", { class: 'relative w-full' }, [
    Input({
      label,
      class: className, 
@@ -75,14 +75,14 @@ export const Autocomplete = (props) => {
      onkeydown: nav,
      oninput: (e) => {
        const v = e.target.value;
-        query(v); // Esto dispara el Watch de arriba y actualiza 'list'
+        query(v); // Esto dispara el watch de arriba y actualiza 'list'
        if (typeof value === "function") value(v);
        isOpen(true);
        cursor(-1);
      },
      ...rest,
    }),
-    Tag(
+    h(
      "ul",
      {
        class: "absolute dropdown-menu left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
@@ -90,11 +90,11 @@ export const Autocomplete = (props) => {
        style: () => (isOpen() && list().length ? "display:block" : "display:none"),
      },
      [
-        For(
+        each(
          list,
          (opt, i) =>
-            Tag("li", {}, [
-              Tag(
+            h("li", {}, [
+              h(
                "a",
                {
                  class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
@@ -107,7 +107,7 @@ export const Autocomplete = (props) => {
          (opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
        ),
        // Mensaje de "no hay datos" reactivo
-        () => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, "nodata")),
+        () => (list().length ? null : h("li", { class: "p-2 text-center opacity-50" }, "nodata")),
      ],
    ),
  ]);
--- a/src/components/Badge.js
+++ b/src/components/Badge.js
@@ -1,5 +1,5 @@
 // components/Badge.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -14,7 +14,7 @@ import { ui } from "../utils.js";
 export const Badge = (props, children) => {
  const { class: className, ...rest } = props;

-  return Tag("span", {
+  return h("span", {
    ...rest,
    class: ui('badge', className),
  }, children);
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,5 +1,5 @@
 // components/Button.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui, val, getIcon } from "../utils.js";

 /**
@@ -16,7 +16,7 @@ import { ui, val, getIcon } from "../utils.js";
 export const Button = (props, children) => {
  const { class: className, ...rest } = props;

-  return Tag("button", {
+  return h("button", {
    ...rest,
    class: ui('btn', className),
    disabled: () => val(props.disabled),
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -1,4 +1,4 @@
-import { $, Tag, Watch } from "sigpro";
+import { $, h, watch } from "sigpro";
 import { val, getIcon } from "../utils.js";

 export const Calendar = (props) => {
@@ -66,9 +66,9 @@ export const Calendar = (props) => {
  };
  
  const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
-    return Tag("div", { class: "flex-1" }, [
-      Tag("div", { class: "flex gap-2 items-center" }, [
-        Tag("input", {
+    return h("div", { class: "flex-1" }, [
+      h("div", { class: "flex gap-2 items-center" }, [
+        h("input", {
          type: "range",
          min: 0,
          max: 23,
@@ -79,38 +79,38 @@ export const Calendar = (props) => {
            onHourChange(newHour);
          },
        }),
-        Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
+        h("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
          () => String(val(hVal)).padStart(2, "0") + ":00"
        ),
      ]),
    ]);
  };
  
-  return Tag("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${className}` }, [
-    Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
-      Tag("div", { class: "flex gap-0.5" }, [
-        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
+  return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${className}` }, [
+    h("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
+      h("div", { class: "flex gap-0.5" }, [
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
          getIcon("icon-[lucide--chevrons-left]")
        ),
-        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
          getIcon("icon-[lucide--chevron-left]")
        ),
      ]),
-      Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
+      h("span", { class: "font-bold uppercase flex-1 text-center" }, [
        () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
      ]),
-      Tag("div", { class: "flex gap-0.5" }, [
-        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
+      h("div", { class: "flex gap-0.5" }, [
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
          getIcon("icon-[lucide--chevron-right]")
        ),
-        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
          getIcon("icon-[lucide--chevrons-right]")
        ),
      ]),
    ]),
    
-    Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
-      ...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
+    h("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
+      ...["L", "M", "X", "J", "V", "S", "D"].map((d) => h("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
      () => {
        const d = internalDate();
        const year = d.getFullYear();
@@ -120,14 +120,14 @@ export const Calendar = (props) => {
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        
        const nodes = [];
-        for (let i = 0; i < offset; i++) nodes.push(Tag("div"));
+        for (let i = 0; i < offset; i++) nodes.push(h("div"));
        
        for (let i = 1; i <= daysInMonth; i++) {
          const date = new Date(year, month, i);
          const dStr = formatDate(date);
          
          nodes.push(
-            Tag("button", {
+            h("button", {
              type: "button",
              class: () => {
                const v = val(value);
@@ -160,9 +160,9 @@ export const Calendar = (props) => {
      },
    ]),
    
-    hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+    hour ? h("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
      isRangeMode()
-        ? Tag("div", { class: "flex gap-4" }, [
+        ? h("div", { class: "flex gap-4" }, [
            HourSlider({
              value: startHour,
              onChange: (newHour) => startHour(newHour),
--- a/src/components/Checkbox.js
+++ b/src/components/Checkbox.js
@@ -1,5 +1,5 @@
 // components/Checkbox.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -16,15 +16,15 @@ import { val, ui } from "../utils.js";
 export const Checkbox = (props) => {
  const { class: className, value, toggle, label, ...rest } = props;

-  const checkEl = Tag("input", {
+  const checkEl = h("input", {
    ...rest,
    type: "checkbox",
    class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
    checked: value
  });

-  return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+  return h("label", { class: "label cursor-pointer justify-start gap-3" }, [
    checkEl,
-    label ? Tag("span", { class: "label-text" }, label) : null,
+    label ? h("span", { class: "label-text" }, label) : null,
  ]);
 };
--- a/src/components/Colorpicker.js
+++ b/src/components/Colorpicker.js
@@ -1,5 +1,5 @@
 // components/Colorpicker.js
-import { $, Tag, If } from "sigpro";
+import { $, h, when} from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {

  const getColor = () => val(value) || "#000000";

-  return Tag("div", { class: ui('relative w-fit', className) }, [
-    Tag(
+  return h("div", { class: ui('relative w-fit', className) }, [
+    h(
      "button",
      {
        type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
        ...rest,
      },
      [
-        Tag("div", {
+        h("div", {
          class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
          style: () => `background-color: ${getColor()}`,
        }),
-        label ? Tag("span", { class: "opacity-80" }, label) : null,
+        label ? h("span", { class: "opacity-80" }, label) : null,
      ],
    ),

-    If(isOpen, () =>
-      Tag(
+    when(isOpen, () =>
+      h(
        "div",
        {
          class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
          onclick: (e) => e.stopPropagation(),
        },
        [
-          Tag(
+          h(
            "div",
            { class: "grid grid-cols-8 gap-1" },
            palette.map((c) =>
-              Tag("button", {
+              h("button", {
                type: "button",
                style: `background-color: ${c}`,
                class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
      ),
    ),

-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("div", {
        class: "fixed inset-0 z-[100]",
        onclick: () => isOpen(false),
      }),
--- a/src/components/Datepicker.js
+++ b/src/components/Datepicker.js
@@ -1,4 +1,4 @@
-import { $, Tag, If, Watch } from "sigpro";
+import { $, h, when, watch } from "sigpro";
 import { val, ui, getIcon } from "../utils.js";
 import { Input } from "./Input.js";
 import { Calendar } from "./Calendar.js";
@@ -12,7 +12,7 @@ export const Datepicker = (props) => {
  // Formatear el valor para mostrarlo en el input
  const displayValue = $("");
  
-  Watch(() => {
+  watch(() => {
    const v = val(value);
    if (!v) {
      displayValue("");
@@ -42,7 +42,7 @@ export const Datepicker = (props) => {
    }
  };
  
-  return Tag("div", { class: ui('relative w-full', className) }, [
+  return h("div", { class: ui('relative w-full', className) }, [
    Input({
      label,
      placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
@@ -56,8 +56,8 @@ export const Datepicker = (props) => {
      ...rest,
    }),
    
-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("div", {
        class: "absolute left-0 mt-2 z-[100]",
        onclick: (e) => e.stopPropagation(),
      }, [
@@ -70,6 +70,6 @@ export const Datepicker = (props) => {
      ])
    ),
    
-    If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
+    when(isOpen, () => h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
  ]);
 };
--- a/src/components/Drawer.js
+++ b/src/components/Drawer.js
@@ -1,5 +1,5 @@
 // components/Drawer.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -14,11 +14,11 @@ export const Drawer = (props, children) => {
  
  const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
  
-  return Tag("div", {
+  return h("div", {
    ...rest,
    class: ui('drawer', className),
  }, [
-    Tag("input", {
+    h("input", {
      id: drawerId,
      type: "checkbox",
      class: "drawer-toggle",
@@ -27,18 +27,18 @@ export const Drawer = (props, children) => {
        if (typeof open === "function") open(e.target.checked);
      }
    }),
-    Tag("div", { class: "drawer-content" }, [
+    h("div", { class: "drawer-content" }, [
      typeof content === "function" ? content() : content
    ]),
-    Tag("div", { class: "drawer-side" }, [
-      Tag("label", { 
+    h("div", { class: "drawer-side" }, [
+      h("label", { 
        for: drawerId, 
        class: "drawer-overlay",
        onclick: () => {
          if (typeof open === "function") open(false);
        }
      }),
-      Tag("div", { class: "min-h-full bg-base-200 w-80" }, [
+      h("div", { class: "min-h-full bg-base-200 w-80" }, [
        typeof side === "function" ? side() : side
      ])
    ])
--- a/src/components/Dropdown.js
+++ b/src/components/Dropdown.js
@@ -1,5 +1,5 @@
 // components/Dropdown.js
-import { Tag, For, Watch } from "sigpro";
+import { h, each, watch } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -28,11 +28,11 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
 export const Dropdown = (props) => {
  const { class: className, label, icon, items, ...rest } = props;

-  return Tag("details", {
+  return h("details", {
    ...rest,
    class: ui('dropdown', className),
  }, [
-    Tag("summary", {
+    h("summary", {
      class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
      style: "display: inline-flex;",
      onclick: (e) => {
@@ -48,15 +48,15 @@ export const Dropdown = (props) => {
      () => icon ? (typeof icon === "function" ? icon() : icon) : null,
      () => label ? (typeof label === "function" ? label() : label) : null
    ]),
-    Tag("ul", { 
+    h("ul", { 
      tabindex: "-1",
      class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300" 
    }, [
      () => {
        const currentItems = typeof items === "function" ? items() : (items || []);
        return currentItems.map(item => 
-          Tag("li", {}, [
-            Tag("a", { 
+          h("li", {}, [
+            h("a", { 
              class: item.class || "",
              onclick: (e) => {
                if (item.onclick) item.onclick(e);
@@ -67,8 +67,8 @@ export const Dropdown = (props) => {
                }
              }
            }, [
-              item.icon ? Tag("span", {}, item.icon) : null,
-              Tag("span", {}, item.label)
+              item.icon ? h("span", {}, item.icon) : null,
+              h("span", {}, item.label)
            ])
          ])
        );
--- a/src/components/Fab.js
+++ b/src/components/Fab.js
@@ -1,5 +1,5 @@
 // components/Fab.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui, getIcon } from "../utils.js";

 /**
@@ -16,14 +16,14 @@ import { val, ui, getIcon } from "../utils.js";
 export const Fab = (props) => {
  const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;

-  return Tag(
+  return h(
    "div",
    {
      ...rest,
      class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className),
    },
    [
-      Tag(
+      h(
        "div",
        {
          tabindex: 0,
@@ -37,9 +37,9 @@ export const Fab = (props) => {
      ),

      ...val(actions).map((act) =>
-        Tag("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
-          act.label ? Tag("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
-          Tag(
+        h("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
+          act.label ? h("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
+          h(
            "button",
            {
              type: "button",
--- a/src/components/Fetch.js
+++ b/src/components/Fetch.js
@@ -1,4 +1,4 @@
-import { $$, Tag, isFunc } from "sigpro";
+import { $$, h, isFunc } from "sigpro";

 const _cache = new Map();

@@ -42,10 +42,10 @@ export const Request = async (key, url, opts = {}) => {
 export const Response = ({ name, loading, error }, { children }) => {
  const store = getStore(name);
  
-  return Tag("div", { style: "display:contents" }, [
+  return h("div", { style: "display:contents" }, [
    () => {
      if (store.loading) return loading || "Cargando...";
-      if (store.error) return isFunc(error) ? error(store.error) : Tag("p", {}, store.error);
+      if (store.error) return isFunc(error) ? error(store.error) : h("p", {}, store.error);
      if (store.data) return isFunc(children[0]) ? children[0](store.data) : children;
      return null;
    }
--- a/src/components/Fieldset.js
+++ b/src/components/Fieldset.js
@@ -1,5 +1,5 @@
 // components/Fieldset.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -13,7 +13,7 @@ import { val, ui } from "../utils.js";
 export const Fieldset = (props, children) => {
  const { class: className, legend, ...rest } = props;

-  return Tag(
+  return h(
    "fieldset",
    {
      ...rest,
@@ -22,7 +22,7 @@ export const Fieldset = (props, children) => {
    [
      () => {
        const legendText = val(legend);
-        return legendText ? Tag("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
+        return legendText ? h("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
      },
      children,
    ],
--- a/src/components/Fileinput.js
+++ b/src/components/Fileinput.js
@@ -1,5 +1,5 @@
 // components/Fileinput.js
-import { $, Tag, If, For } from "sigpro";
+import { $, h, when, each } from "sigpro";
 import { ui, getIcon } from "../utils.js";

 /**
@@ -47,15 +47,15 @@ export const Fileinput = (props) => {
    onselect?.(updated);
  };

-  return Tag("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
-    Tag(
+  return h("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
+    h(
      "div",
      {
        class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
        "data-tip": tooltip,
      },
      [
-        Tag(
+        h(
          "label",
          {
            class: () => `
@@ -76,12 +76,12 @@ export const Fileinput = (props) => {
            },
          },
          [
-            Tag("div", { class: "flex items-center gap-3 w-full" }, [
+            h("div", { class: "flex items-center gap-3 w-full" }, [
              getIcon("icon-[lucide--upload]"),
-              Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
-              Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
+              h("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
+              h("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
            ]),
-            Tag("input", {
+            h("input", {
              type: "file",
              multiple: true,
              accept: accept,
@@ -93,22 +93,22 @@ export const Fileinput = (props) => {
      ],
    ),

-    () => (error() ? Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
+    () => (error() ? h("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),

-    If(
+    when(
      () => selectedFiles().length > 0,
      () =>
-        Tag("ul", { class: "mt-2 space-y-1" }, [
-          For(
+        h("ul", { class: "mt-2 space-y-1" }, [
+          each(
            selectedFiles,
            (file, index) =>
-              Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
-                Tag("div", { class: "flex items-center gap-2 truncate" }, [
-                  Tag("span", { class: "opacity-50" }, "📄"),
-                  Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
-                  Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
+              h("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
+                h("div", { class: "flex items-center gap-2 truncate" }, [
+                  h("span", { class: "opacity-50" }, "📄"),
+                  h("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
+                  h("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
                ]),
-                Tag(
+                h(
                  "button",
                  {
                    type: "button",
--- a/src/components/Icon.js
+++ b/src/components/Icon.js
@@ -1,7 +1,7 @@
 // components/Icon.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Icon = (iconClass) => {
  if (!iconClass) return null;
-  return Tag("span", { class: iconClass });
+  return h("span", { class: iconClass });
 };
--- a/src/components/Indicator.js
+++ b/src/components/Indicator.js
@@ -1,5 +1,5 @@
 // components/Indicator.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -15,12 +15,12 @@ import { ui } from "../utils.js";
 export const Indicator = (props, children) => {
  const { value, class: className, ...rest } = props;
  
-  return Tag("div", {
+  return h("div", {
    ...rest,
    class: "indicator"
  }, () => [
    // El indicador debe ir PRIMERO (antes que el children)
-    value ? Tag("span", { 
+    value ? h("span", { 
      class: ui('indicator-item badge', className) 
    }, () => typeof value === "function" ? value() : value) : null,
    children
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -1,5 +1,5 @@
 // components/Input.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui, getIcon } from "../utils.js";

 /**
@@ -72,7 +72,7 @@ export const Input = (props) => {
    return classes.trim();
  };

-  const inputElement = Tag("input", {
+  const inputElement = h("input", {
    ...rest,
    type: () => (isPassword ? (visible() ? "text" : "password") : type),
    placeholder: placeholder || (label ? " " : placeholder),
@@ -85,10 +85,10 @@ export const Input = (props) => {

  const inputContent = () => [
    inputElement,
-    leftIcon ? Tag("div", {
+    leftIcon ? h("div", {
      class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60",
    }, leftIcon) : null,
-    isPassword ? Tag("button", {
+    isPassword ? h("button", {
      type: "button",
      class: ui("absolute right-3 inset-y-0 flex items-center", "btn btn-ghost btn-circle opacity-50 hover:opacity-100", buttonSize()),
      onclick: (e) => {
@@ -96,19 +96,19 @@ export const Input = (props) => {
        visible(!visible());
      }
    }, () => getPasswordIcon()) : null,
-    Tag("div", {
+    h("div", {
      class: "text-error text-xs mt-1 px-3 absolute -bottom-5 left-0",
    }, () => hasError() ? errorMsg() : null),
  ];

  // Con floating label - añadir w-full para que ocupe todo el ancho
  if (label) {
-    return Tag("label", { class: ui("floating-label w-full", className) }, () => [
-      Tag("div", { class: "relative w-full" }, inputContent),
-      Tag("span", {}, val(label))
+    return h("label", { class: ui("floating-label w-full", className) }, () => [
+      h("div", { class: "relative w-full" }, inputContent),
+      h("span", {}, val(label))
    ]);
  }

  // Sin label
-  return Tag("div", { class: "relative w-full" }, inputContent);
+  return h("div", { class: "relative w-full" }, inputContent);
 };
--- a/src/components/InputPopover.js
+++ b/src/components/InputPopover.js
@@ -15,14 +15,14 @@ export const InputPopover = (props) => {
  const isOpen = $(false);
  const displayValue = $(format(val(signal)));

-  Watch(signal, () => {
+  watch(signal, () => {
    displayValue(format(val(signal)));
  });

  const close = () => isOpen(false);
  const toggle = () => isOpen(!isOpen());

-  return Tag("div", { class: ui("relative w-full", className) }, [
+  return h("div", { class: ui("relative w-full", className) }, [
    Input({
      label,
      placeholder,
@@ -33,12 +33,12 @@ export const InputPopover = (props) => {
      onfocus: () => isOpen(true),
      ...rest,
    }),
-    If(isOpen, () => Tag("div", {
+    when(isOpen, () => h("div", {
      class: "absolute left-0 mt-2 z-[100]",
      onclick: (e) => e.stopPropagation(),
    }, [
      typeof content === "function" ? content({ signal, close }) : content
    ])),
-    If(isOpen, () => Tag("div", { class: "fixed inset-0 z-[90]", onclick: close }))
+    when(isOpen, () => h("div", { class: "fixed inset-0 z-[90]", onclick: close }))
  ]);
 };
--- a/src/components/Label.js
+++ b/src/components/Label.js
@@ -1,19 +1,19 @@
 // components/Label.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui, val } from "../utils.js";

 export const Label = (props) => {
  const { children, value, floating = false, class: className, ...rest } = props;

  if (floating) {
-    return Tag("label", { class: ui("floating-label", className), ...rest }, () => [
+    return h("label", { class: ui("floating-label", className), ...rest }, () => [
      typeof children === 'function' ? children() : children,
-      value ? Tag("span", {}, val(value)) : null
+      value ? h("span", {}, val(value)) : null
    ]);
  }

-  return Tag("label", { class: ui("label", className), ...rest }, () => [
-    value ? Tag("span", { class: "label-text" }, val(value)) : null,
+  return h("label", { class: ui("label", className), ...rest }, () => [
+    value ? h("span", { class: "label-text" }, val(value)) : null,
    typeof children === 'function' ? children() : children
  ]);
 };
--- a/src/components/List.js
+++ b/src/components/List.js
@@ -1,5 +1,5 @@
 // components/List.js
-import { Tag, If, For } from "sigpro";
+import { h, when, each } from "sigpro";
 import { ui, val } from "../utils.js";

 /**
@@ -14,20 +14,20 @@ import { ui, val } from "../utils.js";
 export const List = (props) => {
  const { class: className, items, header, render = (item) => item, keyFn = (item, index) => item.id ?? index, ...rest } = props;

-  const listItems = For(
+  const listItems = each(
    items,
-    (item, index) => Tag("li", { 
+    (item, index) => h("li", { 
      class: "list-row", 
      style: "width: 100%; display: block;" 
    }, [
-      Tag("div", { style: "width: 100%;" }, [render(item, index)])
+      h("div", { style: "width: 100%;" }, [render(item, index)])
    ]),
    keyFn
  );

-  return Tag("ul", {
+  return h("ul", {
    ...rest,
    style: "display: block; width: 100%;",
    class: ui('list bg-base-100 rounded-box shadow-md', className),
-  }, header ? [If(header, () => Tag("li", { class: "p-4 pb-2 text-xs opacity-60", style: "width: 100%;" }, [val(header)])), listItems] : listItems);
+  }, header ? [when(header, () => h("li", { class: "p-4 pb-2 text-xs opacity-60", style: "width: 100%;" }, [val(header)])), listItems] : listItems);
 };
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -1,5 +1,5 @@
 // components/Menu.js
-import { Tag, For } from "sigpro";
+import { h, each } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -15,22 +15,22 @@ export const Menu = (props) => {
  const { class: className, items, ...rest } = props;

  const renderItems = (items) =>
-    For(
+    each(
      () => items || [],
      (it) =>
-        Tag("li", {}, [
+        h("li", {}, [
          it.children
-            ? Tag("details", { open: it.open }, [
-                Tag("summary", {}, [it.icon && Tag("span", { class: "mr-2" }, it.icon), it.label]),
-                Tag("ul", {}, renderItems(it.children)),
+            ? h("details", { open: it.open }, [
+                h("summary", {}, [it.icon && h("span", { class: "mr-2" }, it.icon), it.label]),
+                h("ul", {}, renderItems(it.children)),
              ])
-            : Tag("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
-                it.icon && Tag("span", { class: "mr-2" }, it.icon),
+            : h("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
+                it.icon && h("span", { class: "mr-2" }, it.icon),
                it.label,
              ]),
        ]),
      (it, i) => it.label || i,
    );

-  return Tag("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
+  return h("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
 };
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -1,5 +1,5 @@
 // components/Modal.js
-import { Tag, Watch } from "sigpro";
+import { h, watch } from "sigpro";
 import { ui } from "../utils.js";
 import { Button } from "./Button.js";

@@ -27,13 +27,13 @@ export const Modal = (props, children) => {
    }
  };

-  Watch(() => handleOpen());
+  watch(() => handleOpen());

  const close = () => {
    if (typeof open === "function") open(false);
  };

-  return Tag("dialog", { 
+  return h("dialog", { 
    ...rest,
    ref: (el) => {
      dialogElement = el;
@@ -43,22 +43,22 @@ export const Modal = (props, children) => {
    onclose: close,
    oncancel: close
  }, [
-    Tag("div", { class: "modal-box" }, [
-      title ? Tag("h3", { class: "text-lg font-bold mb-4" }, () => 
+    h("div", { class: "modal-box" }, [
+      title ? h("h3", { class: "text-lg font-bold mb-4" }, () => 
        typeof title === "function" ? title() : title
      ) : null,
-      Tag("div", { class: "py-2" }, [
+      h("div", { class: "py-2" }, [
        typeof children === "function" ? children() : children
      ]),
-      Tag("div", { class: "modal-action" }, [
-        Tag("form", { method: "dialog", class: "flex gap-2" }, [
+      h("div", { class: "modal-action" }, [
+        h("form", { method: "dialog", class: "flex gap-2" }, [
          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
          Button({ type: "submit" }, "close")
        ])
      ])
    ]),
-    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
-      Tag("button", {}, "close")
+    h("form", { method: "dialog", class: "modal-backdrop" }, [
+      h("button", {}, "close")
    ])
  ]);
 };
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,5 +1,5 @@
 // components/Navbar.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -12,5 +12,5 @@ import { ui } from "../utils.js";
 export const Navbar = (props, children) => {
  const { class: className, ...rest } = props;

-  return Tag("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
+  return h("div", { ...rest, class: ui('navbar bg-base-100 shadow-sm px-4', className) }, children);
 };
--- a/src/components/Radio.js
+++ b/src/components/Radio.js
@@ -1,5 +1,5 @@
 // components/Radio.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -15,7 +15,7 @@ import { val, ui } from "../utils.js";
 export const Radio = (props) => {
  const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;

-  const radioEl = Tag("input", {
+  const radioEl = h("input", {
    ...rest,
    type: "radio",
    name: name,
@@ -28,10 +28,10 @@ export const Radio = (props) => {

  if (!label && !tooltip) return radioEl;

-  const layout = Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+  const layout = h("label", { class: "label cursor-pointer justify-start gap-3" }, [
    radioEl,
-    label ? Tag("span", { class: "label-text" }, label) : null,
+    label ? h("span", { class: "label-text" }, label) : null,
  ]);

-  return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+  return tooltip ? h("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
 };
--- a/src/components/Range.js
+++ b/src/components/Range.js
@@ -1,5 +1,5 @@
 // components/Range.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -15,7 +15,7 @@ import { val, ui } from "../utils.js";
 export const Range = (props) => {
  const {class: className, label, tooltip, value, ...rest } = props;

-  const rangeEl = Tag("input", {
+  const rangeEl = h("input", {
    ...rest,
    type: "range",
    class: ui('range', className),
@@ -25,10 +25,10 @@ export const Range = (props) => {

  if (!label && !tooltip) return rangeEl;

-  const layout = Tag("div", { class: "flex flex-col gap-2" }, [
-    label ? Tag("span", { class: "label-text" }, label) : null, 
+  const layout = h("div", { class: "flex flex-col gap-2" }, [
+    label ? h("span", { class: "label-text" }, label) : null, 
    rangeEl
  ]);

-  return tooltip ? Tag("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+  return tooltip ? h("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
 };
--- a/src/components/Rating.js
+++ b/src/components/Rating.js
@@ -1,5 +1,5 @@
 // components/Rating.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -15,7 +15,7 @@ export const Rating = (props) => {

  const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;

-  return Tag(
+  return h(
    "div",
    {
      ...rest,
@@ -23,7 +23,7 @@ export const Rating = (props) => {
    },
    Array.from({ length: val(count) }, (_, i) => {
      const starValue = i + 1;
-      return Tag("input", {
+      return h("input", {
        type: "radio",
        name: ratingGroup,
        class: `mask ${mask}`,
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -1,5 +1,5 @@
 // components/Select.js
-import { Tag, For } from "sigpro";
+import { h, each } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -14,17 +14,17 @@ import { val, ui } from "../utils.js";
 export const Select = (props) => {
  const { class: className, label, items, value, ...rest } = props;

-  const selectEl = Tag(
+  const selectEl = h(
    "select",
    {
      ...rest,
      class: ui('select select-bordered w-full', className),
      value: value
    },
-    For(
+    each(
      () => val(items) || [],
      (opt) =>
-        Tag(
+        h(
          "option",
          {
            value: opt.value,
@@ -38,8 +38,8 @@ export const Select = (props) => {

  if (!label) return selectEl;

-  return Tag("label", { class: "fieldset-label flex flex-col gap-1" }, [
-    Tag("span", {}, label), 
+  return h("label", { class: "fieldset-label flex flex-col gap-1" }, [
+    h("span", {}, label), 
    selectEl
  ]);
 };
--- a/src/components/Spinner.js
+++ b/src/components/Spinner.js
@@ -1,11 +1,11 @@
 // components/Spinner.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val } from "../utils.js";

 export const Spinner = (props) => {
  const { value, ...rest } = props;
-  return If(
+  return when(
    () => val(value),
-    () => Tag("span", { class: "loading loading-spinner", ...rest })
+    () => h("span", { class: "loading loading-spinner", ...rest })
  );
 };
--- a/src/components/Stack.js
+++ b/src/components/Stack.js
@@ -1,5 +1,5 @@
 // components/Stack.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -11,5 +11,5 @@ import { ui } from "../utils.js";
 export const Stack = (props, children) => {
  const { class: className, ...rest } = props;

-  return Tag("div", { ...rest, class: ui('stack', className) }, children);
+  return h("div", { ...rest, class: ui('stack', className) }, children);
 };
--- a/src/components/Stat.js
+++ b/src/components/Stat.js
@@ -1,5 +1,5 @@
 // components/Stat.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -12,10 +12,10 @@ import { val, ui } from "../utils.js";
 export const Stat = (props) => {
  const { class: className, icon, label, value, desc, ...rest } = props;

-  return Tag("div", { ...rest, class: ui('stat', className) }, [
-    icon && Tag("div", { class: "stat-figure text-secondary" }, icon),
-    label && Tag("div", { class: "stat-title" }, label),
-    Tag("div", { class: "stat-value" }, () => val(value) ?? value),
-    desc && Tag("div", { class: "stat-desc" }, desc),
+  return h("div", { ...rest, class: ui('stat', className) }, [
+    icon && h("div", { class: "stat-figure text-secondary" }, icon),
+    label && h("div", { class: "stat-title" }, label),
+    h("div", { class: "stat-value" }, () => val(value) ?? value),
+    desc && h("div", { class: "stat-desc" }, desc),
  ]);
 };
--- a/src/components/Swap.js
+++ b/src/components/Swap.js
@@ -1,5 +1,5 @@
 // components/Swap.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui, val } from "../utils.js";

 /**
@@ -12,8 +12,8 @@ import { ui, val } from "../utils.js";
 export const Swap = (props) => {
  const { class: className, value, on, off, ...rest } = props;

-  return Tag("label", { ...rest, class: ui('swap', className) }, [
-    Tag("input", {
+  return h("label", { ...rest, class: ui('swap', className) }, [
+    h("input", {
      type: "checkbox",
      checked: () => val(value),
      onclick: (e) => {
@@ -22,7 +22,7 @@ export const Swap = (props) => {
        }
      }
    }),
-    Tag("div", { class: "swap-on" }, on),
-    Tag("div", { class: "swap-off" }, off),
+    h("div", { class: "swap-on" }, on),
+    h("div", { class: "swap-off" }, off),
  ]);
 };
--- a/src/components/Table.js
+++ b/src/components/Table.js
@@ -1,5 +1,5 @@
 // components/Table.js
-import { Tag, For, If } from "sigpro";
+import { h, each, when} from "sigpro";
 import { val, ui } from "../utils.js";

 /**
@@ -23,15 +23,15 @@ export const Table = (props) => {

  const getInternalKeyFn = keyFn || ((item, idx) => item.id || idx);

-  return Tag("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
-    Tag("table", { ...rest, class: tableClass }, [
-      Tag("thead", {}, [
-        Tag("tr", {},
-          columns.map(col => Tag("th", { class: col.class || "" }, col.label))
+  return h("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
+    h("table", { ...rest, class: tableClass }, [
+      h("thead", {}, [
+        h("tr", {},
+          columns.map(col => h("th", { class: col.class || "" }, col.label))
        )
      ]),
-      Tag("tbody", {}, [
-        For(items, (item, index) => {
+      h("tbody", {}, [
+        each(items, (item, index) => {
          
          const it = () => {
            const currentItems = val(items);
@@ -39,21 +39,21 @@ export const Table = (props) => {
            return currentItems.find((u, i) => getInternalKeyFn(u, i) === key) || item;
          };

-          return Tag("tr", { class: "hover" },
+          return h("tr", { class: "hover" },
            columns.map(col => {
              const cellContent = () => {
                const latestItem = it(); 
                if (col.render) return col.render(latestItem, index);
                return val(latestItem[col.key]);
              };
-              return Tag("td", { class: col.class || "" }, [cellContent]);
+              return h("td", { class: col.class || "" }, [cellContent]);
            })
          );
        }, getInternalKeyFn),

-        If(() => val(items).length === 0, () =>
-          Tag("tr", {}, [
-            Tag("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
+        when(() => val(items).length === 0, () =>
+          h("tr", {}, [
+            h("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
              val(empty)
            ])
          ])
--- a/src/components/Tabs.js
+++ b/src/components/Tabs.js
@@ -1,5 +1,5 @@
 // components/Tabs.js
-import { $, Tag, Watch } from "sigpro";
+import { $, h, watch } from "sigpro";
 import { val, ui, getIcon } from "../utils.js";

 /**
@@ -15,7 +15,7 @@ export const Tabs = (props) => {
  const itemsSignal = typeof items === "function" ? items : () => items || [];
  const activeIndex = $(0);

-  Watch(() => {
+  watch(() => {
    const list = itemsSignal();
    const idx = list.findIndex(it => val(it.active) === true);
    if (idx !== -1 && activeIndex() !== idx) {
@@ -42,7 +42,7 @@ export const Tabs = (props) => {
    activeIndex(newActive);
  };

-  return Tag("div", { ...rest, class: ui('tabs', className) }, () => {
+  return h("div", { ...rest, class: ui('tabs', className) }, () => {
    const list = itemsSignal();
    const elements = [];

@@ -60,13 +60,13 @@ export const Tabs = (props) => {
          e.stopPropagation();
          removeTab(i, item);
        };
-        const wrapper = Tag("span", { class: "flex items-center" }, [labelNode, closeIcon]);
+        const wrapper = h("span", { class: "flex items-center" }, [labelNode, closeIcon]);
        buttonChildren.push(wrapper);
      } else {
        buttonChildren.push(labelNode);
      }

-      const buttonBase = Tag("button", {
+      const buttonBase = h("button", {
        class: () => ui("tab", activeIndex() === i ? "tab-active" : ""),
        onclick: (e) => {
          e.preventDefault();
@@ -78,7 +78,7 @@ export const Tabs = (props) => {
      }, buttonChildren);

      const button = item.tip
-        ? Tag("div", { class: "tooltip", "data-tip": item.tip }, buttonBase)
+        ? h("div", { class: "tooltip", "data-tip": item.tip }, buttonBase)
        : buttonBase;

      elements.push(button);
@@ -93,8 +93,8 @@ export const Tabs = (props) => {
        contentNode = document.createTextNode(String(rawContent));
      }

-      const inner = Tag("div", { class: "tab-content-inner" }, contentNode);
-      const panel = Tag("div", {
+      const inner = h("div", { class: "tab-content-inner" }, contentNode);
+      const panel = h("div", {
        class: "tab-content bg-base-100 border-base-300 p-6",
        style: () => activeIndex() === i ? "display: block" : "display: none"
      }, inner);
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,5 +1,5 @@
 // components/Timeline.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { val, ui, getIcon } from "../utils.js";

 /**
@@ -21,7 +21,7 @@ export const Timeline = (props) => {
    error: "icon-[lucide--alert-circle]",
  };

-  return Tag(
+  return h(
    "ul",
    {
      ...rest,
@@ -44,14 +44,14 @@ export const Timeline = (props) => {

        const renderSlot = (content) => (typeof content === "function" ? content() : content);

-        return Tag("li", { class: "flex-1" }, [
-          !isFirst ? Tag("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
-          Tag("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
-          Tag("div", { class: "timeline-middle" }, [
+        return h("li", { class: "flex-1" }, [
+          !isFirst ? h("hr", { class: () => prevCompleted() ? "bg-primary" : "" }) : null,
+          h("div", { class: "timeline-start" }, [() => renderSlot(item.title)]),
+          h("div", { class: "timeline-middle" }, [
            () => item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
          ]),
-          Tag("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
-          !isLast ? Tag("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null,
+          h("div", { class: "timeline-end timeline-box shadow-sm" }, [() => renderSlot(item.detail)]),
+          !isLast ? h("hr", { class: () => isCompleted() ? "bg-primary" : "" }) : null,
        ]);
      });
    }
--- a/src/components/Toast.js
+++ b/src/components/Toast.js
@@ -1,5 +1,5 @@
 // components/Toast.js
-import { Tag, Mount } from "sigpro";
+import { h, mount } from "sigpro";
 import { getIcon } from "../utils.js";
 import { Button } from "./Button.js";

@@ -17,14 +17,14 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
  let container = document.getElementById("sigpro-toast-container");
  
  if (!container) {
-    container = Tag("div", {
+    container = h("div", {
      id: "sigpro-toast-container",
      class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none",
    });
    document.body.appendChild(container);
  }

-  const toastHost = Tag("div", { style: "display: contents" });
+  const toastHost = h("div", { style: "display: contents" });
  container.appendChild(toastHost);

  let timeoutId;
@@ -48,13 +48,13 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
  const ToastComponent = () => {
    const closeIcon = getIcon("icon-[lucide--x]");
    
-    const el = Tag(
+    const el = h(
      "div",
      {
        class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
      },
      [
-        Tag("span", {}, [typeof message === "function" ? message() : message]), 
+        h("span", {}, [typeof message === "function" ? message() : message]), 
        Button({ 
          class: "btn-xs btn-circle btn-ghost", 
          onclick: close 
@@ -66,7 +66,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
    return el;
  };

-  const instance = Mount(ToastComponent, toastHost);
+  const instance = mount(ToastComponent, toastHost);

  if (duration > 0) {
    timeoutId = setTimeout(close, duration);
--- a/src/components/Tooltip.js
+++ b/src/components/Tooltip.js
@@ -1,5 +1,5 @@
 // components/Tooltip.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";
 import { ui } from "../utils.js";

 /**
@@ -12,7 +12,7 @@ import { ui } from "../utils.js";
 * - tooltip-open
 */
 export const Tooltip = (props, children) =>
-  Tag("div", {
+  h("div", {
    ...props,
    class: () => ui('tooltip w-full', props.class),
    "data-tip": props.tip,