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/components/accordion.js
+++ b/components/accordion.js
@@ -1,22 +1,22 @@
 // components/Accordion.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Accordion = (props) => {
  const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
  
  if (props.items && Array.isArray(props.items)) {
-    return Tag("div", { class: `space-y-2 ${props.class ?? ''}` }, 
-      props.items.map(item => Tag("div", { class: `collapse ${item.class ?? ''}` }, [
-        Tag("input", { type: "radio", name, checked: item.open }),
-        Tag("div", { class: "collapse-title text-xl font-medium" }, item.title),
-        Tag("div", { class: "collapse-content" }, item.children)
+    return h("div", { class: `space-y-2 ${props.class ?? ''}` }, 
+      props.items.map(item => h("div", { class: `collapse ${item.class ?? ''}` }, [
+        h("input", { type: "radio", name, checked: item.open }),
+        h("div", { class: "collapse-title text-xl font-medium" }, item.title),
+        h("div", { class: "collapse-content" }, item.children)
      ]))
    );
  }
  
-  return Tag("div", { class: `collapse ${props.class ?? ''}` }, [
-    Tag("input", { type: "radio", name, checked: props.open }),
-    Tag("div", { class: "collapse-title text-xl font-medium" }, props.title),
-    Tag("div", { class: "collapse-content" }, props.children)
+  return h("div", { class: `collapse ${props.class ?? ''}` }, [
+    h("input", { type: "radio", name, checked: props.open }),
+    h("div", { class: "collapse-title text-xl font-medium" }, props.title),
+    h("div", { class: "collapse-content" }, props.children)
  ]);
 };
--- a/components/alert.js
+++ b/components/alert.js
@@ -1,7 +1,7 @@
 // components/Alert.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Alert = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
 };
--- a/components/autocomplete.js
+++ b/components/autocomplete.js
@@ -1,5 +1,5 @@
 // components/Autocomplete.js
-import { $, Tag, For, Watch } from "sigpro";
+import { $, h, each, watch } from "sigpro";

 export const Autocomplete = (props) => {
  const query = $("");
@@ -7,12 +7,12 @@ export const Autocomplete = (props) => {
  const cursor = $(-1);
  const filteredItems = $([]);

-  Watch(() => {
+  watch(() => {
    const v = typeof props.value === "function" ? props.value() : props.value;
    return v || "";
  }, (newVal) => setTimeout(() => query(newVal), 0));

-  Watch(() => {
+  watch(() => {
    const q = String(query()).toLowerCase();
    const allItems = typeof props.items === "function" ? props.items() : props.items;
    const filtered = q
@@ -50,10 +50,10 @@ export const Autocomplete = (props) => {
    }
  };

-  return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [
-    Tag("label", { class: "input input-bordered w-full" }, [
-      Tag("span", { class: "icon-[lucide--search]" }),
-      Tag("input", {
+  return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
+    h("label", { class: "input input-bordered w-full" }, [
+      h("span", { class: "icon-[lucide--search]" }),
+      h("input", {
        ...props,
        type: "text",
        class: "grow",
@@ -72,13 +72,13 @@ export const Autocomplete = (props) => {
      })
    ]),

-    Tag("ul", {
+    h("ul", {
      class: "absolute 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",
      style: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};`
    }, [
-      For(filteredItems, (item, idx) =>
-        Tag("li", {}, [
-          Tag("a", {
+      each(filteredItems, (item, idx) =>
+        h("li", {}, [
+          h("a", {
            class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`,
            onclick: () => pick(item),
            onmouseenter: () => cursor(idx)
@@ -86,7 +86,7 @@ export const Autocomplete = (props) => {
        ]),
        (item, idx) => (typeof item === "string" ? item : item.value) + idx
      ),
-      () => filteredItems().length === 0 ? Tag("li", { class: "flex justify-center p-4 opacity-50" }, Tag("span", { class: "icon-[lucide--search-x] text-2xl" })) : null
+      () => filteredItems().length === 0 ? h("li", { class: "flex justify-center p-4 opacity-50" }, h("span", { class: "icon-[lucide--search-x] text-2xl" })) : null
    ])
  ]);
 };
--- a/components/badge.js
+++ b/components/badge.js
@@ -1,7 +1,7 @@
 // components/Badge.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Badge = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
+  return h("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
 };
--- a/components/button.js
+++ b/components/button.js
@@ -1,6 +1,6 @@
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Button = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
+  return h("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
 };
--- a/components/calendar.js
+++ b/components/calendar.js
@@ -1,5 +1,5 @@
 // components/Calendar.js
-import { $, Tag } from "sigpro";
+import { $, h } from "sigpro";

 export const Calendar = (props) => {
  const internalDate = $(new Date());
@@ -69,9 +69,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) => {
          class: "range range-xs flex-1",
          oninput: (e) => onHourChange(parseInt(e.target.value))
        }),
-        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(typeof hVal === "function" ? hVal() : 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 ${props.class ?? ''}`.trim() }, [
-    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) }, 
-          Tag("span", { class: "icon-[lucide--chevrons-left]" })
+  return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${props.class ?? ''}`.trim() }, [
+    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) }, 
+          h("span", { class: "icon-[lucide--chevrons-left]" })
        ),
-        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
-          Tag("span", { class: "icon-[lucide--chevron-left]" })
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+          h("span", { class: "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) }, 
-          Tag("span", { class: "icon-[lucide--chevron-right]" })
+      h("div", { class: "flex gap-0.5" }, [
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
+          h("span", { class: "icon-[lucide--chevron-right]" })
        ),
-        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
-          Tag("span", { class: "icon-[lucide--chevrons-right]" })
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+          h("span", { class: "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 cells = [];
-        for (let i = 0; i < offset; i++) cells.push(Tag("div"));
+        for (let i = 0; i < offset; i++) cells.push(h("div"));
        
        for (let i = 1; i <= daysInMonth; i++) {
          const date = new Date(year, month, i);
          const dStr = formatDate(date);
          
          cells.push(
-            Tag("button", {
+            h("button", {
              type: "button",
              class: () => {
                const v = getCurrentValue();
@@ -160,9 +160,9 @@ export const Calendar = (props) => {
      }
    ]),
    
-    props.hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+    props.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: (h) => startHour(h) }),
            HourSlider({ value: endHour, onChange: (h) => endHour(h) })
          ])
--- a/components/card.js
+++ b/components/card.js
@@ -1,22 +1,22 @@
 // components/Card.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Card = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `card ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `card ${props.class ?? ''}` }, children);
 };

 export const CardTitle = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
 };

 export const CardBody = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
 };

 export const CardActions = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
 };
--- a/components/carousel.js
+++ b/components/carousel.js
@@ -1,12 +1,12 @@
 // components/Carousel.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Carousel = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
 };

 export const CarouselItem = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
 };
--- a/components/chat.js
+++ b/components/chat.js
@@ -1,33 +1,33 @@
 // components/Chat.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Chat = (props, children) => {
    children === undefined && (children = props, props = {});
-    return Tag("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
+    return h("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
 };

 export const ChatImage = (props, children) => {
    children === undefined && (children = props, props = {});
-    return Tag("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
-        Tag("div", { class: "w-10 rounded-full" },
-            typeof children === "string" ? Tag("img", { src: children, alt: "avatar" }) : children
+    return h("div", { ...props, class: `chat-image avatar ${props.class ?? ''}` },
+        h("div", { class: "w-10 rounded-full" },
+            typeof children === "string" ? h("img", { src: children, alt: "avatar" }) : children
        )
    );
 };

 export const ChatHeader = (props, children) => {
    children === undefined && (children = props, props = {});
-    return Tag("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
+    return h("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
 };

 export const ChatFooter = (props, children) => {
    children === undefined && (children = props, props = {});
-    return Tag("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
+    return h("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
 };

 export const ChatBubble = (props, children) => {
    children === undefined && (children = props, props = {});
-    return Tag("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
+    return h("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
 };

 export const ChatMessage = (props) => {
--- a/components/checkbox.js
+++ b/components/checkbox.js
@@ -1,4 +1,4 @@
 // components/Checkbox.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Checkbox = (props) => Tag("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
+export const Checkbox = (props) => h("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
--- a/components/colorpicker.js
+++ b/components/colorpicker.js
@@ -1,5 +1,5 @@
 // components/Colorpicker.js
-import { $, Tag, If } from "sigpro";
+import { $, h, when} from "sigpro";

 export const Colorpicker = (props) => {
  const isOpen = $(false);
@@ -20,28 +20,28 @@ export const Colorpicker = (props) => {
    return (typeof v === "function" ? v() : v) || "#000000";
  };

-  return Tag("div", { class: `relative w-fit ${props.class ?? ''}` }, [
-    Tag("button", {
+  return h("div", { class: `relative w-fit ${props.class ?? ''}` }, [
+    h("button", {
      type: "button",
      class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
      onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); },
      ...props
    }, [
-      Tag("div", {
+      h("div", {
        class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
        style: () => `background-color: ${getColor()}`
      }),
-      props.label ? Tag("span", { class: "opacity-80" }, props.label) : null
+      props.label ? h("span", { class: "opacity-80" }, props.label) : null
    ]),

-    If(isOpen, () =>
-      Tag("div", {
+    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("div", { class: "grid grid-cols-8 gap-1" },
+        h("div", { class: "grid grid-cols-8 gap-1" },
          palette.map(c =>
-            Tag("button", {
+            h("button", {
              type: "button",
              style: `background-color: ${c}`,
              class: () => {
@@ -58,8 +58,8 @@ export const Colorpicker = (props) => {
      ])
    ),

-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("div", {
        class: "fixed inset-0 z-[100]",
        onclick: () => isOpen(false)
      })
--- a/components/datepicker.js
+++ b/components/datepicker.js
@@ -1,5 +1,5 @@
 // components/Datepicker.js
-import { $, Tag, If, Watch } from "sigpro";
+import { $, h, when, watch } from "sigpro";
 import { Calendar } from "./calendar.js";

 export const Datepicker = (props) => {
@@ -11,7 +11,7 @@ export const Datepicker = (props) => {
  
  const displayValue = $("");
  
-  Watch(() => {
+  watch(() => {
    const v = typeof props.value === "function" ? props.value() : props.value;
    if (!v) {
      displayValue("");
@@ -49,10 +49,10 @@ export const Datepicker = (props) => {
    isOpen(!isOpen());
  };
  
-  return Tag("div", { class: `relative w-full ${props.class ?? ''}` }, [
-    Tag("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
-      Tag("span", { class: "icon-[lucide--calendar]" }),
-      Tag("input", {
+  return h("div", { class: `relative w-full ${props.class ?? ''}` }, [
+    h("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
+      h("span", { class: "icon-[lucide--calendar]" }),
+      h("input", {
        ...props,
        type: "text",
        class: "grow",
@@ -62,8 +62,8 @@ export const Datepicker = (props) => {
      })
    ]),
    
-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("div", {
        class: "absolute left-0 mt-2 z-[100]",
        onclick: (e) => e.stopPropagation()
      }, [
@@ -76,8 +76,8 @@ 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/components/divider.js
+++ b/components/divider.js
@@ -1,4 +1,4 @@
 // components/Collapse.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Divider = (props) => Tag("div", { ...props, class: `divider ${props.class ?? ''}` });
+export const Divider = (props) => h("div", { ...props, class: `divider ${props.class ?? ''}` });
--- a/components/drawer.js
+++ b/components/drawer.js
@@ -1,29 +1,29 @@
 // components/Drawer.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Drawer = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
 };

 export const Sidebar = (props) => {
  const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
-  return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
-    Tag("input", {
+  return h("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
+    h("input", {
      id,
      type: "checkbox",
      class: "drawer-toggle",
      checked: () => (typeof props.open === "function" ? props.open() : props.open),
      onchange: (e) => typeof props.open === "function" && props.open(e.target.checked)
    }),
-    Tag("div", { class: "drawer-content" }, props.children),
-    Tag("div", { class: "drawer-side" }, [
-      Tag("label", {
+    h("div", { class: "drawer-content" }, props.children),
+    h("div", { class: "drawer-side" }, [
+      h("label", {
        for: id,
        class: "drawer-overlay",
        onclick: () => typeof props.open === "function" && props.open(false)
      }),
-      Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" },
+      h("div", { class: "min-h-full bg-base-200 w-80 p-4" },
        typeof props.content === "function" ? props.content() : props.content
      )
    ])
--- a/components/dropdown.js
+++ b/components/dropdown.js
@@ -1,5 +1,5 @@
 // components/Dropdown.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 let currentOpen = null;

@@ -13,7 +13,7 @@ if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
  window.__dropdownHandlerRegistered = true;
 }

-export const Dropdown = (props) => Tag("details", {
+export const Dropdown = (props) => h("details", {
  ...props,
  class: `dropdown ${props.class ?? ''}`,
  onclick: (e) => {
--- a/components/fab.js
+++ b/components/fab.js
@@ -1,7 +1,7 @@
 // components/Fab.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Fab = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
 };
--- a/components/fieldset.js
+++ b/components/fieldset.js
@@ -1,10 +1,10 @@
 // components/Fieldset.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Fieldset = (props, children) => Tag("fieldset", {
+export const Fieldset = (props, children) => h("fieldset", {
  ...props,
  class: `fieldset ${props.class ?? ''}`
 }, [
-  props.legend ? Tag("legend", { class: "fieldset-legend" }, props.legend) : null,
+  props.legend ? h("legend", { class: "fieldset-legend" }, props.legend) : null,
  children
 ]);
--- a/components/fileinput.js
+++ b/components/fileinput.js
@@ -1,5 +1,5 @@
 // components/Fileinput.js
-import { $, Tag, If, For } from "sigpro";
+import { $, h, when, each } from "sigpro";

 export const Fileinput = (props) => {
  const selectedFiles = $([]);
@@ -24,19 +24,19 @@ export const Fileinput = (props) => {
    props.onselect?.(updated);
  };

-  return Tag("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
-    Tag("label", {
+  return h("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
+    h("label", {
      class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}`,
      ondragover: (e) => { e.preventDefault(); isDragging(true); },
      ondragleave: () => isDragging(false),
      ondrop: (e) => { e.preventDefault(); isDragging(false); handleFiles(e.dataTransfer.files); }
    }, [
-      Tag("div", { class: "flex items-center gap-3 w-full" }, [
-        Tag("span", { class: "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 ${props.max || 2}MB`)
+      h("div", { class: "flex items-center gap-3 w-full" }, [
+        h("span", { class: "icon-[lucide--upload]" }),
+        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 ${props.max || 2}MB`)
      ]),
-      Tag("input", {
+      h("input", {
        type: "file",
        multiple: true,
        accept: props.accept || "*",
@@ -44,21 +44,21 @@ export const Fileinput = (props) => {
        onchange: (e) => handleFiles(e.target.files)
      })
    ]),
-    () => error() && Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
-    If(() => selectedFiles().length > 0, () =>
-      Tag("ul", { class: "mt-2 space-y-1" }, [
-        For(selectedFiles, (file, idx) =>
-          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)`)
+    () => error() && h("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
+    when(() => selectedFiles().length > 0, () =>
+      h("ul", { class: "mt-2 space-y-1" }, [
+        each(selectedFiles, (file, idx) =>
+          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("button", {
+            h("button", {
              type: "button",
              class: "btn btn-ghost btn-xs btn-circle",
              onclick: (e) => { e.preventDefault(); removeFile(idx); }
-            }, Tag("span", { class: "icon-[lucide--x]" }))
+            }, h("span", { class: "icon-[lucide--x]" }))
          ]),
          (file) => file.name + file.lastModified
        )
--- a/components/icon.js
+++ b/components/icon.js
@@ -1,14 +1,14 @@
 // components/Icon.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Icon = (props, children) => {
  if (typeof props === "string") {
    if (props.includes("icon-") || props.startsWith("lucide-")) {
-      return Tag("span", { class: props }, children);
+      return h("span", { class: props }, children);
    }
-    return Tag("span", { class: "icon" }, props);
+    return h("span", { class: "icon" }, props);
  }
  if (!props) return null;
  const { class: className, ...rest } = props;
-  return Tag("span", { ...rest, class: className }, children);
+  return h("span", { ...rest, class: className }, children);
 };
--- a/components/indicator.js
+++ b/components/indicator.js
@@ -1,10 +1,10 @@
 // components/Indicator.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Indicator = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `indicator ${props.class ?? ''}` }, [
-    props.value ? Tag("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null,
+  return h("div", { ...props, class: `indicator ${props.class ?? ''}` }, [
+    props.value ? h("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null,
    children
  ]);
 };
--- a/components/input.js
+++ b/components/input.js
@@ -1,13 +1,13 @@
 // components/Input.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Input = (props) => Tag("input", { ...props, class: `input ${props.class ?? ''}` });
+export const Input = (props) => h("input", { ...props, class: `input ${props.class ?? ''}` });

-export const InputLabel = (props) => Tag("label", { class: `${props.float ? 'floating-label' : 'input'}` },
+export const InputLabel = (props) => h("label", { class: `${props.float ? 'floating-label' : 'input'}` },
  [
-    Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
+    h("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
    props.left ?? null,
-    Tag("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }),
+    h("input", { ...props, class: `${props.float ? 'input' : ''} ${props.class ?? ''}` }),
    props.right ?? null
  ]
 );
--- a/components/kbd.js
+++ b/components/kbd.js
@@ -1,7 +1,7 @@
 // components/Kbd.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Kbd = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
+  return h("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
 };
--- a/components/loading.js
+++ b/components/loading.js
@@ -1,7 +1,7 @@
 // components/Loading.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Loading = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("span", { ...props, class: `loading loading-spinner ${props.class ?? ''}` }, children);
+  return h("span", { ...props, class: `loading loading-spinner ${props.class ?? ''}` }, children);
 };
--- a/components/menu.js
+++ b/components/menu.js
@@ -1,9 +1,9 @@
 // components/Menu.js
-import { Tag, For } from "sigpro";
+import { h, each } from "sigpro";

 export const Menu = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
+  return h("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
 };

 export const MenuItems = (props) => {
@@ -12,14 +12,14 @@ export const MenuItems = (props) => {

  const renderItem = (item) => {
    if (item.children) {
-      return Tag("li", {}, [
-        Tag("details", {}, [
-          Tag("summary", {}, item.label),
-          Tag("ul", {}, MenuItems({ items: item.children }))
+      return h("li", {}, [
+        h("details", {}, [
+          h("summary", {}, item.label),
+          h("ul", {}, MenuItems({ items: item.children }))
        ])
      ]);
    }
-    return Tag("li", {}, Tag("a", {
+    return h("li", {}, h("a", {
      href: item.href,
      onclick: item.onclick ? (e) => {
        if (!item.href) e.preventDefault();
@@ -28,5 +28,5 @@ export const MenuItems = (props) => {
    }, item.label));
  };

-  return For(itemsSignal, renderItem, keyFn);
+  return each(itemsSignal, renderItem, keyFn);
 };
--- a/components/modal.js
+++ b/components/modal.js
@@ -1,10 +1,10 @@
 // components/Modal.js
-import { Tag, Watch } from "sigpro";
+import { h, watch } from "sigpro";

 export const Modal = (props) => {
  let dialogRef = null;

-  Watch(() => {
+  watch(() => {
    const isOpen = typeof props.open === "function" ? props.open() : props.open;
    if (!dialogRef) return;
    isOpen ? dialogRef.showModal() : dialogRef.close();
@@ -12,22 +12,22 @@ export const Modal = (props) => {

  const close = () => typeof props.open === "function" && props.open(false);

-  return Tag("dialog", {
+  return h("dialog", {
    ...props,
    ref: el => dialogRef = el,
    class: `modal ${props.class ?? ''}`,
    onclose: close,
    oncancel: close
  }, [
-    Tag("div", { class: "modal-box" }, [
-      props.title && Tag("h3", { class: "text-lg font-bold" }, props.title),
+    h("div", { class: "modal-box" }, [
+      props.title && h("h3", { class: "text-lg font-bold" }, props.title),
      props.children,
-      Tag("div", { class: "modal-action" }, [
-        props.actions || Tag("button", { class: "btn", onclick: close }, "Cerrar")
+      h("div", { class: "modal-action" }, [
+        props.actions || h("button", { class: "btn", onclick: close }, "Cerrar")
      ])
    ]),
-    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
-      Tag("button", {}, "close")
+    h("form", { method: "dialog", class: "modal-backdrop" }, [
+      h("button", {}, "close")
    ])
  ]);
 };
--- a/components/navbar.js
+++ b/components/navbar.js
@@ -1,7 +1,7 @@
 // components/Navbar.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Navbar = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
 };
--- a/components/radial.js
+++ b/components/radial.js
@@ -1,12 +1,12 @@
 // components/Radial.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Radial = (props, children) => {
  children === undefined && (children = props, props = {});
  const percentage = props.value != null ? (props.value / (props.max || 100)) * 100 : 0;
  const style = `--value: ${percentage}; --max: 100;`;

-  return Tag("div", {
+  return h("div", {
    ...props,
    class: `radial-progress ${props.class ?? ''}`,
    style: style,
--- a/components/radio.js
+++ b/components/radio.js
@@ -1,4 +1,4 @@
 // components/Radio.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Radio = (props) => Tag("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
+export const Radio = (props) => h("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
--- a/components/range.js
+++ b/components/range.js
@@ -1,4 +1,4 @@
 // components/Range.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Range = (props) => Tag("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
+export const Range = (props) => h("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
--- a/components/rating.js
+++ b/components/rating.js
@@ -1,13 +1,13 @@
 // components/Rating.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Rating = (props, children) => {
  children === undefined && (children = props, props = {});
  const name = `rating-${Math.random().toString(36).slice(2, 7)}`;
  
-  return Tag("div", { ...props, class: `rating ${props.class ?? ''}` }, children || Array.from({ length: props.count || 5 }, (_, i) => {
+  return h("div", { ...props, class: `rating ${props.class ?? ''}` }, children || Array.from({ length: props.count || 5 }, (_, i) => {
    const starValue = i + 1;
-    return Tag("input", {
+    return h("input", {
      type: "radio",
      name,
      class: `mask ${props.mask || "mask-star"}`,
--- a/components/select.js
+++ b/components/select.js
@@ -1,22 +1,22 @@
 // components/Select.js
-import { Tag, For } from "sigpro";
+import { h, each } from "sigpro";

 export const Select = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("select", { ...props, class: `select ${props.class ?? ''}` }, children);
+  return h("select", { ...props, class: `select ${props.class ?? ''}` }, children);
 };

 export const SelectItems = (props) => {
  const placeholderOption = props.placeholder
-    ? Tag("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
+    ? h("option", { disabled: props.placeholderDisabled ?? true, selected: true }, props.placeholder)
    : null;

-  const dynamicOptions = For(
+  const dynamicOptions = each(
    () => [...(typeof props.items === "function" ? props.items() : props.items || [])],
    (item) => {
      const val = typeof item === "string" ? item : item.value;
      const label = typeof item === "string" ? item : item.label;
-      return Tag("option", { value: val }, label);
+      return h("option", { value: val }, label);
    },
    props.keyFn || ((item) => (typeof item === "string" ? item : item.value))
  );
@@ -24,11 +24,11 @@ export const SelectItems = (props) => {
  return placeholderOption ? [placeholderOption, dynamicOptions] : dynamicOptions;
 };

-export const SelectLabel = (props, children) => Tag("label", { class: `${props.float ? 'floating-label' : 'select'}` },
+export const SelectLabel = (props, children) => h("label", { class: `${props.float ? 'floating-label' : 'select'}` },
  [
-    Tag("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
+    h("span", { class: props.float ? '' : 'label opacity-50' }, props.label),
    props.left ?? null,
-    Tag("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
+    h("select", { ...props, class: `${props.float ? 'select' : ''} ${props.class ?? ''}` }, children),
    props.right ?? null
  ]
 );
--- a/components/skeleton.js
+++ b/components/skeleton.js
@@ -1,12 +1,12 @@
 // components/Skeleton.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Skeleton = (props) => Tag("div", { ...props, class: `skeleton ${props.class ?? ''}` });
+export const Skeleton = (props) => h("div", { ...props, class: `skeleton ${props.class ?? ''}` });

 export const SkeletonText = (props) => {
-  return Tag("div", { ...props, class: "space-y-2" }, 
+  return h("div", { ...props, class: "space-y-2" }, 
    Array.from({ length: props.lines || 3 }, () => 
-      Tag("div", { class: `skeleton h-4 w-full ${props.class ?? ''}` })
+      h("div", { class: `skeleton h-4 w-full ${props.class ?? ''}` })
    )
  );
 };
--- a/components/stack.js
+++ b/components/stack.js
@@ -1,7 +1,7 @@
 // components/Stack.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Stack = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
 };
--- a/components/stat.js
+++ b/components/stat.js
@@ -1,20 +1,20 @@
 // components/Stats.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Stats = (props, children) => {
  children === undefined && (children = props, props = {});
  const direction = props.vertical ? "stats-vertical" : "stats-horizontal";
-  return Tag("div", { ...props, class: `stats ${direction} ${props.class ?? ''}`.trim() }, children);
+  return h("div", { ...props, class: `stats ${direction} ${props.class ?? ''}`.trim() }, children);
 };

 export const Stat = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `stat ${props.class ?? ''}` }, [
-    props.icon && Tag("div", { class: "stat-figure" }, props.icon),
-    props.label && Tag("div", { class: "stat-title" }, props.label),
-    props.value && Tag("div", { class: "stat-value" }, props.value),
-    props.desc && Tag("div", { class: "stat-desc" }, props.desc),
-    props.actions && Tag("div", { class: "stat-actions" }, props.actions),
+  return h("div", { ...props, class: `stat ${props.class ?? ''}` }, [
+    props.icon && h("div", { class: "stat-figure" }, props.icon),
+    props.label && h("div", { class: "stat-title" }, props.label),
+    props.value && h("div", { class: "stat-value" }, props.value),
+    props.desc && h("div", { class: "stat-desc" }, props.desc),
+    props.actions && h("div", { class: "stat-actions" }, props.actions),
    children
  ]);
 };
--- a/components/steps.js
+++ b/components/steps.js
@@ -1,12 +1,12 @@
 // components/Steps.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Steps = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
+  return h("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
 };

 export const Step = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("li", { ...props, class: `step ${props.class ?? ''}`, "data-content": props.dataContent }, children);
+  return h("li", { ...props, class: `step ${props.class ?? ''}`, "data-content": props.dataContent }, children);
 };
--- a/components/swap.js
+++ b/components/swap.js
@@ -1,14 +1,14 @@
 // components/Swap.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Swap = (props) => {
-  return Tag("label", { ...props, class: `swap ${props.class ?? ''}` }, [
-    Tag("input", {
+  return h("label", { ...props, class: `swap ${props.class ?? ''}` }, [
+    h("input", {
      type: "checkbox",
      checked: () => typeof props.value === "function" ? props.value() : props.value,
      onchange: (e) => typeof props.value === "function" && props.value(e.target.checked)
    }),
-    Tag("div", { class: "swap-on" }, props.on),
-    Tag("div", { class: "swap-off" }, props.off)
+    h("div", { class: "swap-on" }, props.on),
+    h("div", { class: "swap-off" }, props.off)
  ]);
 };
--- a/components/table.js
+++ b/components/table.js
@@ -1,27 +1,27 @@
 // components/Table.js
-import { Tag, For } from "sigpro";
+import { h, each } from "sigpro";

 export const Table = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("table", { ...props, class: `table ${props.class ?? ''}` }, children);
+  return h("table", { ...props, class: `table ${props.class ?? ''}` }, children);
 };

 export const TableItems = (props) => {
  const itemArray = typeof props.items === "function" ? props.items() : (props.items || []);
  
  const thead = props.header !== false && props.columns?.some(col => col.label) ? 
-    Tag("thead", {}, 
-      Tag("tr", {}, 
-        props.columns.map(col => Tag("th", { class: col.class }, col.label))
+    h("thead", {}, 
+      h("tr", {}, 
+        props.columns.map(col => h("th", { class: col.class }, col.label))
      )
    ) : null;
  
-  const tbody = Tag("tbody", {}, [
-    For(itemArray, (item, idx) => 
-      Tag("tr", {}, 
+  const tbody = h("tbody", {}, [
+    each(itemArray, (item, idx) => 
+      h("tr", {}, 
        props.columns.map(col => {
          const content = col.render ? col.render(item, idx) : item[col.key];
-          return Tag("td", { class: col.class }, content);
+          return h("td", { class: col.class }, content);
        })
      )
    , props.keyFn || ((item, idx) => item.id ?? idx))
--- a/components/tabs.js
+++ b/components/tabs.js
@@ -1,25 +1,25 @@
 // components/Tabs.js
-import { Tag, For } from "sigpro";
+import { h, each } from "sigpro";

 export const Tabs = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
 };

 export const Tab = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
+  return h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
 };

 export const TabContent = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
+  return h("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
 };

-export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
-  Tag("span", { class: "flex items-center" }, [
+export const TabClose = (props) => h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
+  h("span", { class: "flex items-center" }, [
    props.label,
-    Tag("span", {
+    h("span", {
      class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
      onclick: (e) => { e.stopPropagation(); props.onClose?.(e); }
    })
@@ -28,7 +28,7 @@ export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab

 export const TabItems = (props) => {
  const items = typeof props.items === "function" ? props.items : () => props.items || [];
-  return For(
+  return each(
    items,
    (item, idx) => {
      const TabComp = item.closable ? TabClose : Tab;
--- a/components/textarea.js
+++ b/components/textarea.js
@@ -1,4 +1,4 @@
 // components/Textarea.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Textarea = (props) => Tag("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
+export const Textarea = (props) => h("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
--- a/components/textrotate.js
+++ b/components/textrotate.js
@@ -1,12 +1,12 @@
 // components/Textrotate.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const TextRotate = (props) => {
  const wordsArray = Array.isArray(props.words) 
    ? props.words 
    : (typeof props.words === 'string' ? props.words.split(',') : []);
    
-  return Tag("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [
-    Tag("span", {}, wordsArray.map(word => Tag("span", {}, word)))
+  return h("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [
+    h("span", {}, wordsArray.map(word => h("span", {}, word)))
  ]);
 };
--- a/components/timeline.js
+++ b/components/timeline.js
@@ -1,11 +1,11 @@
 // components/Timeline.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Timeline = (props, children) => {
  children === undefined && (children = props, props = {});
  const vertical = props.vertical !== false;
  const compact = props.compact === true;
-  return Tag("ul", {
+  return h("ul", {
    ...props,
    class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${props.class ?? ''}`.trim()
  }, children);
--- a/components/toast.js
+++ b/components/toast.js
@@ -1,17 +1,17 @@
 // components/Toast.js
-import { Tag, Mount } from "sigpro";
+import { h, mount } from "sigpro";

 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;
@@ -32,16 +32,16 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
  };

  const ToastComponent = () => {
-    const closeIcon = Tag("span", { class: "icon-[lucide--x]" });
-    const closeBtn = Tag("button", {
+    const closeIcon = h("span", { class: "icon-[lucide--x]" });
+    const closeBtn = h("button", {
      class: "btn btn-xs btn-circle btn-ghost",
      onclick: close
    }, closeIcon);

-    const alertDiv = Tag("div", {
+    const alertDiv = 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),
      closeBtn
    ]);

@@ -49,7 +49,7 @@ export const Toast = (message, type = "alert-success", duration = 3500) => {
    return alertDiv;
  };

-  const instance = Mount(ToastComponent, toastHost);
+  const instance = mount(ToastComponent, toastHost);
  if (duration > 0) timeoutId = setTimeout(close, duration);
  return close;
 };
--- a/components/toggle.js
+++ b/components/toggle.js
@@ -1,4 +1,4 @@
 // components/Toggle.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

-export const Toggle = (p) => Tag("input", { ...p, type: "checkbox", class: `toggle ${p.class ?? ''}` });
+export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: `toggle ${p.class ?? ''}` });
--- a/components/tooltip.js
+++ b/components/tooltip.js
@@ -1,7 +1,7 @@
 // components/Tooltip.js
-import { Tag } from "sigpro";
+import { h } from "sigpro";

 export const Tooltip = (props, children) => {
  children === undefined && (children = props, props = {});
-  return Tag("div", { ...props, class: `tooltip ${props.class ?? ''}`, "data-tip": props.tip }, children);
+  return h("div", { ...props, class: `tooltip ${props.class ?? ''}`, "data-tip": props.tip }, children);
 };