Preparing more simple components

src/base/Accordion.js

@@ -0,0 +1,22 @@
+// components/Collapse.js
+import { Tag } from "sigpro";
+
+export const Collapse = (props, children) => {
+  const { class: className, title, name, open, ...rest } = props;
+
+  return Tag("div", {
+    ...rest,
+    class: `collapse collapse-arrow bg-base-200 ${className || ''}`.trim()
+  }, [
+    Tag("input", {
+      type: name ? "radio" : "checkbox",
+      name: name,
+      checked: () => typeof open === "function" ? open() : open,
+      onchange: (e) => {
+        if (typeof open === "function") open(e.target.checked);
+      }
+    }),
+    Tag("div", { class: "collapse-title text-xl font-medium" }, title),
+    Tag("div", { class: "collapse-content" }, children)
+  ]);
+};

src/base/Alert.js

@@ -0,0 +1,12 @@
+// components/Alert.js
+import { Tag } from "sigpro";
+
+export const Alert = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("div", {
+    ...rest,
+    role: "alert",
+    class: className || undefined
+  }, children);
+};

src/base/Autocomplete.js

@@ -0,0 +1,93 @@
+// components/Autocomplete.js
+import { $, Tag, For, Watch } from "sigpro";
+
+export const Autocomplete = (props) => {
+  const { class: className, items = [], value, onselect, placeholder, ...rest } = props;
+
+  const query = $(() => {
+    const v = typeof value === "function" ? value() : value;
+    return v || "";
+  });
+  
+  const isOpen = $(false);
+  const cursor = $(-1);
+  const filteredItems = $([]);
+
+  Watch(() => {
+    const q = String(query()).toLowerCase();
+    const allItems = typeof items === "function" ? items() : items;
+    const filtered = q
+      ? allItems.filter((item) =>
+          (typeof item === "string" ? item : item.label).toLowerCase().includes(q)
+        )
+      : allItems;
+    filteredItems(filtered);
+  });
+
+  const pick = (item) => {
+    const display = typeof item === "string" ? item : item.label;
+    const actual = typeof item === "string" ? item : item.value;
+    query(display);
+    if (typeof value === "function") value(actual);
+    onselect?.(item);
+    isOpen(false);
+    cursor(-1);
+  };
+
+  const handleKeyDown = (e) => {
+    const list = filteredItems();
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      isOpen(true);
+      cursor(Math.min(cursor() + 1, list.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      cursor(Math.max(cursor() - 1, 0));
+    } else if (e.key === "Enter" && cursor() >= 0) {
+      e.preventDefault();
+      pick(list[cursor()]);
+    } else if (e.key === "Escape") {
+      isOpen(false);
+    }
+  };
+
+  return Tag("div", { class: `relative w-full ${className || ''}`.trim() }, [
+    Tag("label", { class: "input input-bordered w-full" }, [
+      Tag("span", { class: "icon-[lucide--search]" }),
+      Tag("input", {
+        ...rest,
+        type: "text",
+        class: "grow",
+        value: query,
+        placeholder: placeholder || "Buscar...",
+        onfocus: () => isOpen(true),
+        onblur: () => setTimeout(() => isOpen(false), 150),
+        onkeydown: handleKeyDown,
+        oninput: (e) => {
+          const newVal = e.target.value;
+          query(newVal);
+          if (typeof value === "function") value(newVal);
+          isOpen(true);
+          cursor(-1);
+        }
+      })
+    ]),
+    
+    Tag("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", {
+            class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`,
+            onclick: () => pick(item),
+            onmouseenter: () => cursor(idx)
+          }, typeof item === "string" ? item : item.label)
+        ]),
+        (item, idx) => (typeof item === "string" ? item : item.value) + idx
+      ),
+      () => filteredItems().length === 0 && Tag("li", { class: "p-2 text-center opacity-50" }, "Sin resultados")
+    ])
+  ]);
+};

src/base/Badge.js

@@ -0,0 +1,11 @@
+// components/Badge.js
+import { Tag } from "sigpro";
+
+export const Badge = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("span", {
+    ...rest,
+    class: className || undefined
+  }, children);
+};

src/base/Calendar.js

@@ -0,0 +1,174 @@
+// components/Calendar.js
+import { $, Tag, Watch } from "sigpro";
+
+export const Calendar = (props) => {
+  const { value, range = false, hour = false, onChange, class: className = "" } = props;
+  
+  const internalDate = $(new Date());
+  const hoverDate = $(null);
+  const startHour = $(0);
+  const endHour = $(0);
+  const isRangeMode = () => {
+    const r = typeof range === "function" ? range() : range;
+    return r === true;
+  };
+  
+  const now = new Date();
+  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+  
+  const formatDate = (d) => {
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, "0");
+    const day = String(d.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+  
+  const getCurrentValue = () => {
+    const v = value;
+    return typeof v === "function" ? v() : v;
+  };
+  
+  const selectDate = (date) => {
+    const dateStr = formatDate(date);
+    const current = getCurrentValue();
+    
+    if (isRangeMode()) {
+      if (!current?.start || (current.start && current.end)) {
+        const newValue = {
+          start: dateStr,
+          end: null,
+          ...(hour && { startHour: startHour() }),
+        };
+        onChange?.(newValue);
+      } else {
+        const start = current.start;
+        let newValue;
+        if (dateStr < start) {
+          newValue = { start: dateStr, end: start };
+        } else {
+          newValue = { start, end: dateStr };
+        }
+        if (hour) {
+          newValue.startHour = current.startHour !== undefined ? current.startHour : startHour();
+          newValue.endHour = endHour();
+        }
+        onChange?.(newValue);
+      }
+    } else {
+      const newValue = hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr;
+      onChange?.(newValue);
+    }
+  };
+  
+  const move = (m) => {
+    const d = internalDate();
+    internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
+  };
+  
+  const moveYear = (y) => {
+    const d = internalDate();
+    internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
+  };
+  
+  const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
+    return Tag("div", { class: "flex-1" }, [
+      Tag("div", { class: "flex gap-2 items-center" }, [
+        Tag("input", {
+          type: "range",
+          min: 0,
+          max: 23,
+          value: hVal,
+          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" }, 
+          () => 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 ${className}`.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]" })
+        ),
+        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+          Tag("span", { class: "icon-[lucide--chevron-left]" })
+        )
+      ]),
+      Tag("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]" })
+        ),
+        Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+          Tag("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)),
+      () => {
+        const d = internalDate();
+        const year = d.getFullYear();
+        const month = d.getMonth();
+        const firstDay = new Date(year, month, 1).getDay();
+        const offset = firstDay === 0 ? 6 : firstDay - 1;
+        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 = 1; i <= daysInMonth; i++) {
+          const date = new Date(year, month, i);
+          const dStr = formatDate(date);
+          
+          cells.push(
+            Tag("button", {
+              type: "button",
+              class: () => {
+                const v = getCurrentValue();
+                const h = hoverDate();
+                const isStart = typeof v === "string" ? v.split("T")[0] === dStr : v?.start === dStr;
+                const isEnd = v?.end === dStr;
+                let inRange = false;
+                
+                if (isRangeMode() && v?.start) {
+                  const start = v.start;
+                  if (!v.end && h) {
+                    inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h);
+                  } else if (v.end) {
+                    inRange = dStr > start && dStr < v.end;
+                  }
+                }
+                
+                const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
+                const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
+                const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
+                
+                return `${base} ${state} ${today}`.trim();
+              },
+              onmouseenter: () => { if (isRangeMode()) hoverDate(dStr); },
+              onclick: () => selectDate(date)
+            }, i.toString())
+          );
+        }
+        return cells;
+      }
+    ]),
+    
+    hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+      isRangeMode()
+        ? Tag("div", { class: "flex gap-4" }, [
+            HourSlider({ value: startHour, onChange: (h) => startHour(h) }),
+            HourSlider({ value: endHour, onChange: (h) => endHour(h) })
+          ])
+        : HourSlider({ value: startHour, onChange: (h) => startHour(h) })
+    ]) : null
+  ]);
+};

src/base/Card.js

@@ -0,0 +1,34 @@
+// components/Card.js
+import { Tag } from "sigpro";
+
+export const Card = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `card ${className || ''}`.trim()
+  }, children);
+};
+
+export const CardTitle = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `card-title ${className || ''}`.trim()
+  }, children);
+};
+
+export const CardBody = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `card-body ${className || ''}`.trim()
+  }, children);
+};
+
+export const CardActions = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `card-actions ${className || ''}`.trim()
+  }, children);
+};

src/base/Carousel.js

@@ -0,0 +1,18 @@
+// components/Carousel.js
+import { Tag } from "sigpro";
+
+export const Carousel = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `carousel ${className || ''}`.trim()
+  }, children);
+};
+
+export const CarouselItem = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `carousel-item ${className || ''}`.trim()
+  }, children);
+};

src/base/Chat.js

@@ -0,0 +1,42 @@
+// components/Chat.js
+import { Tag } from "sigpro";
+
+export const Chat = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `chat ${className || ''}`.trim()
+  }, children);
+};
+
+export const ChatImage = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `chat-image ${className || ''}`.trim()
+  }, children);
+};
+
+export const ChatHeader = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `chat-header ${className || ''}`.trim()
+  }, children);
+};
+
+export const ChatFooter = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `chat-footer ${className || ''}`.trim()
+  }, children);
+};
+
+export const ChatBubble = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `chat-bubble ${className || ''}`.trim()
+  }, children);
+};

src/base/Checkbox.js

@@ -0,0 +1,19 @@
+// components/Checkbox.js
+import { Tag } from "sigpro";
+
+export const Checkbox = (props) => {
+  const { class: className, label, ...rest } = props;
+
+  const inputEl = Tag("input", {
+    ...rest,
+    type: "checkbox",
+    class: className || undefined
+  });
+
+  if (!label) return inputEl;
+
+  return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    inputEl,
+    Tag("span", { class: "label-text" }, label)
+  ]);
+};

src/base/Collapse.js

@@ -0,0 +1,21 @@
+// components/Collapse.js
+import { Tag } from "sigpro";
+
+export const Collapse = (props, children) => {
+  const { class: className, open, ...rest } = props;
+  
+  return Tag("div", {
+    ...rest,
+    class: `collapse ${className || ''}`.trim(),
+    tabindex: 0
+  }, [
+    Tag("input", {
+      type: "checkbox",
+      checked: () => typeof open === "function" ? open() : open,
+      onchange: (e) => {
+        if (typeof open === "function") open(e.target.checked);
+      }
+    }),
+    ...(Array.isArray(children) ? children : [children])
+  ]);
+};

src/base/Datepicker.js

@@ -0,0 +1,85 @@
+// components/Datepicker.js
+import { $, Tag, If, Watch } from "sigpro";
+import { Calendar } from "./Calendar.js";
+
+export const Datepicker = (props) => {
+  const { class: className, value, range, placeholder, hour = false, ...rest } = props;
+  
+  const isOpen = $(false);
+  const isRangeMode = () => {
+    const r = typeof range === "function" ? range() : range;
+    return r === true;
+  };
+  
+  const displayValue = $("");
+  
+  Watch(() => {
+    const v = typeof value === "function" ? value() : value;
+    if (!v) {
+      displayValue("");
+      return;
+    }
+    let text = "";
+    if (typeof v === "string") {
+      text = (hour && v.includes("T")) ? v.replace("T", " ") : v;
+    } else if (v.start && v.end) {
+      const startStr = hour && v.startHour !== undefined 
+        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
+        : v.start;
+      const endStr = hour && v.endHour !== undefined 
+        ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` 
+        : v.end;
+      text = `${startStr} - ${endStr}`;
+    } else if (v.start) {
+      const startStr = hour && v.startHour !== undefined 
+        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
+        : v.start;
+      text = `${startStr}...`;
+    }
+    displayValue(text);
+  });
+  
+  const handleCalendarChange = (newValue) => {
+    if (typeof value === "function") value(newValue);
+    if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
+      isOpen(false);
+    }
+  };
+  
+  const toggleOpen = (e) => {
+    e.stopPropagation();
+    isOpen(!isOpen());
+  };
+  
+  return Tag("div", { class: `relative w-full ${className || ''}`.trim() }, [
+    Tag("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
+      Tag("span", { class: "icon-[lucide--calendar]" }),
+      Tag("input", {
+        ...rest,
+        type: "text",
+        class: "grow",
+        value: displayValue,
+        readonly: true,
+        placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
+      })
+    ]),
+    
+    If(isOpen, () =>
+      Tag("div", {
+        class: "absolute left-0 mt-2 z-[100]",
+        onclick: (e) => e.stopPropagation()
+      }, [
+        Calendar({
+          value,
+          range: isRangeMode(),
+          hour,
+          onChange: handleCalendarChange
+        })
+      ])
+    ),
+    
+    If(isOpen, () => 
+      Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })
+    )
+  ]);
+};

src/base/Drawer.js

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

src/base/Dropdown.js

@@ -0,0 +1,32 @@
+// components/Dropdown.js
+import { Tag } from "sigpro";
+
+let currentOpen = null;
+
+if (typeof window !== 'undefined' && !window.__dropdownHandlerRegistered) {
+  window.addEventListener('click', (e) => {
+    if (currentOpen && !currentOpen.contains(e.target)) {
+      currentOpen.open = false;
+      currentOpen = null;
+    }
+  });
+  window.__dropdownHandlerRegistered = true;
+}
+
+export const Dropdown = (props) => {
+  const { class: className, children, ...rest } = props;
+
+  return Tag("details", {
+    ...rest,
+    class: `dropdown ${className || ''}`.trim(),
+    onclick: (e) => {
+      const details = e.currentTarget;
+      if (currentOpen && currentOpen !== details) {
+        currentOpen.open = false;
+      }
+      setTimeout(() => {
+        currentOpen = details.open ? details : null;
+      }, 0);
+    }
+  }, children);
+};

src/base/Fab.js

@@ -0,0 +1,11 @@
+// components/Fab.js
+import { Tag } from "sigpro";
+
+export const Fab = (props, children) => {
+  const { class: className, position = "bottom-6 right-6", ...rest } = props;
+
+  return Tag("div", {
+    ...rest,
+    class: `absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className || ''}`.trim()
+  }, children);
+};

src/base/Fieldset.js

@@ -0,0 +1,14 @@
+// components/Fieldset.js
+import { Tag } from "sigpro";
+
+export const Fieldset = (props, children) => {
+  const { class: className, legend, ...rest } = props;
+
+  return Tag("fieldset", {
+    ...rest,
+    class: `fieldset ${className || ''}`.trim()
+  }, [
+    legend ? Tag("legend", { class: "fieldset-legend" }, legend) : null,
+    children
+  ]);
+};

src/base/Fileinput.js

@@ -0,0 +1,81 @@
+// components/Fileinput.js
+import { $, Tag, If, For } from "sigpro";
+
+export const Fileinput = (props) => {
+  const { class: className, max = 2, accept = "*", onselect, ...rest } = props;
+
+  const selectedFiles = $([]);
+  const isDragging = $(false);
+  const error = $(null);
+  const MAX_BYTES = max * 1024 * 1024;
+
+  const handleFiles = (files) => {
+    const fileList = Array.from(files);
+    error(null);
+    const oversized = fileList.find((f) => f.size > MAX_BYTES);
+    if (oversized) {
+      error(`Máx ${max}MB`);
+      return;
+    }
+    selectedFiles([...selectedFiles(), ...fileList]);
+    onselect?.(selectedFiles());
+  };
+
+  const removeFile = (index) => {
+    const updated = selectedFiles().filter((_, i) => i !== index);
+    selectedFiles(updated);
+    onselect?.(updated);
+  };
+
+  return Tag("div", {
+    ...rest,
+    class: `fieldset w-full p-0 ${className || ''}`.trim()
+  }, [
+    Tag("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 ${max}MB`)
+      ]),
+      Tag("input", {
+        type: "file",
+        multiple: true,
+        accept,
+        class: "hidden",
+        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)`)
+            ]),
+            Tag("button", {
+              type: "button",
+              class: "btn btn-ghost btn-xs btn-circle",
+              onclick: (e) => { e.preventDefault(); removeFile(idx); }
+            }, Tag("span", { class: "icon-[lucide--x]" }))
+          ]),
+          (file) => file.name + file.lastModified
+        )
+      ])
+    )
+  ]);
+};

src/base/Indicator.js

@@ -0,0 +1,14 @@
+// components/Indicator.js
+import { Tag } from "sigpro";
+
+export const Indicator = (props, children) => {
+  const { value, class: className, ...rest } = props;
+
+  return Tag("div", {
+    ...rest,
+    class: "indicator"
+  }, [
+    value ? Tag("span", { class: `indicator-item badge ${className || ''}`.trim() }, value) : null,
+    children
+  ]);
+};

src/base/Input.js

@@ -0,0 +1,14 @@
+// components/Input.js
+import { Tag } from "sigpro";
+
+export const Input = (props) => {
+  const { type = "text", value, oninput, class: className, ...rest } = props;
+
+  return Tag("input", {
+    ...rest,
+    type,
+    value,
+    oninput,
+    class: className,
+  });
+};

src/base/Kdb.js

@@ -0,0 +1,14 @@
+// components/Kbd.js
+import { Tag } from "sigpro";
+
+export const Kbd = (props, children) => {
+  if (typeof props === "string" || typeof props === "number") {
+    children = props;
+    props = {};
+  }
+  const { class: className, ...rest } = props;
+  return Tag("kbd", {
+    ...rest,
+    class: `kbd ${className || ''}`.trim()
+  }, children);
+};

src/base/List.js

@@ -0,0 +1,11 @@
+// components/List.js
+import { Tag } from "sigpro";
+
+export const List = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("ul", {
+    ...rest,
+    class: `list ${className || ''}`.trim()
+  }, children);
+};

src/base/Loading.js

@@ -0,0 +1,10 @@
+// components/Spinner.js
+import { Tag } from "sigpro";
+
+export const Spinner = (props) => {
+  const { class: className, ...rest } = props;
+  return Tag("span", {
+    ...rest,
+    class: `loading loading-spinner ${className || ''}`.trim()
+  });
+};

src/base/Menu.js

@@ -0,0 +1,11 @@
+// components/Menu.js
+import { Tag } from "sigpro";
+
+export const Menu = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("ul", {
+    ...rest,
+    class: `menu ${className || ''}`.trim()
+  }, children);
+};

src/base/Modal.js

@@ -0,0 +1,36 @@
+// components/Modal.js
+import { Tag, Watch } from "sigpro";
+
+export const Modal = (props) => {
+  const { class: className, open, title, children, ...rest } = props;
+  let dialogRef = null;
+
+  Watch(() => {
+    const isOpen = typeof open === "function" ? open() : open;
+    if (!dialogRef) return;
+    isOpen ? dialogRef.showModal() : dialogRef.close();
+  });
+
+  const close = () => {
+    if (typeof open === "function") open(false);
+  };
+
+  return Tag("dialog", {
+    ...rest,
+    ref: el => dialogRef = el,
+    class: `modal ${className || ''}`.trim(),
+    onclose: close,
+    oncancel: close
+  }, [
+    Tag("div", { class: "modal-box" }, [
+      title && Tag("h3", { class: "text-lg font-bold" }, title),
+      children,
+      Tag("div", { class: "modal-action" }, [
+        props.actions || Button({ onclick: close }, "Cerrar")
+      ])
+    ]),
+    Tag("form", { method: "dialog", class: "modal-backdrop" }, [
+      Tag("button", {}, "close")
+    ])
+  ]);
+};

src/base/Navbar.js

@@ -0,0 +1,11 @@
+// components/Navbar.js
+import { Tag } from "sigpro";
+
+export const Navbar = (props, children) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("div", {
+    ...rest,
+    class: `navbar ${className || ''}`.trim()
+  }, children);
+};

src/base/Radial.js

@@ -0,0 +1,18 @@
+// components/RadialProgress.js
+import { Tag } from "sigpro";
+
+export const RadialProgress = (props) => {
+  const { class: className, value, max = 100, children, ...rest } = props;
+  const percentage = value != null ? (value / max) * 100 : 0;
+  const style = `--value: ${percentage}; --max: 100;`;
+
+  return Tag("div", {
+    ...rest,
+    class: `radial-progress ${className || ''}`.trim(),
+    style: style,
+    role: "progressbar",
+    "aria-valuenow": value,
+    "aria-valuemin": 0,
+    "aria-valuemax": max
+  }, children || `${Math.round(percentage)}%`);
+};

src/base/Radio.js

@@ -0,0 +1,19 @@
+// components/Radio.js
+import { Tag } from "sigpro";
+
+export const Radio = (props) => {
+  const { class: className, label, ...rest } = props;
+
+  const radioEl = Tag("input", {
+    ...rest,
+    type: "radio",
+    class: `radio ${className || ''}`.trim()
+  });
+
+  if (!label) return radioEl;
+
+  return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    radioEl,
+    Tag("span", { class: "label-text" }, label)
+  ]);
+};

src/base/Range.js

@@ -0,0 +1,12 @@
+// components/Range.js
+import { Tag } from "sigpro";
+
+export const Range = (props) => {
+  const { class: className, ...rest } = props;
+
+  return Tag("input", {
+    ...rest,
+    type: "range",
+    class: `range ${className || ''}`.trim()
+  });
+};

src/base/Rating.js

@@ -0,0 +1,25 @@
+// components/Rating.js
+import { Tag } from "sigpro";
+
+export const Rating = (props, children) => {
+  const { class: className, count, mask = "mask-star", value, onchange, ...rest } = props;
+
+  const name = `rating-${Math.random().toString(36).slice(2, 7)}`;
+
+  return Tag("div", {
+    ...rest,
+    class: `rating ${className || ''}`.trim()
+  }, children || Array.from({ length: count || 5 }, (_, i) => {
+    const starValue = i + 1;
+    return Tag("input", {
+      type: "radio",
+      name,
+      class: `mask ${mask}`,
+      checked: () => typeof value === "function" ? value() === starValue : value === starValue,
+      onchange: () => {
+        if (onchange) onchange(starValue);
+        else if (typeof value === "function") value(starValue);
+      }
+    });
+  }));
+};

src/base/Skeleton.js

@@ -0,0 +1,19 @@
+// components/Skeleton.js
+import { Tag } from "sigpro";
+
+export const Skeleton = (props) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `skeleton ${className || ''}`.trim()
+  });
+};
+
+export const SkeletonText = (props) => {
+  const { class: className, lines = 3, ...rest } = props;
+  return Tag("div", { ...rest, class: "space-y-2" }, 
+    Array.from({ length: lines }, (_, i) => 
+      Tag("div", { class: `skeleton h-4 w-full ${className || ''}`.trim() })
+    )
+  );
+};

src/base/Stack.js

@@ -0,0 +1,10 @@
+// components/Stack.js
+import { Tag } from "sigpro";
+
+export const Stack = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `stack ${className || ''}`.trim()
+  }, children);
+};

src/base/Stat.js

@@ -0,0 +1,10 @@
+// components/Stat.js
+import { Tag } from "sigpro";
+
+export const Stat = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `stat ${className || ''}`.trim()
+  }, children);
+};

src/base/Steps.js

@@ -0,0 +1,19 @@
+// components/Steps.js
+import { Tag } from "sigpro";
+
+export const Steps = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("ul", {
+    ...rest,
+    class: `steps ${className || ''}`.trim()
+  }, children);
+};
+
+export const Step = (props, children) => {
+  const { class: className, dataContent, ...rest } = props;
+  return Tag("li", {
+    ...rest,
+    class: `step ${className || ''}`.trim(),
+    "data-content": dataContent
+  }, children);
+};

src/base/Swap.js

@@ -0,0 +1,21 @@
+// components/Swap.js
+import { Tag } from "sigpro";
+
+export const Swap = (props) => {
+  const { class: className, value, on, off, ...rest } = props;
+
+  return Tag("label", {
+    ...rest,
+    class: `swap ${className || ''}`.trim()
+  }, [
+    Tag("input", {
+      type: "checkbox",
+      checked: () => typeof value === "function" ? value() : value,
+      onchange: (e) => {
+        if (typeof value === "function") value(e.target.checked);
+      }
+    }),
+    Tag("div", { class: "swap-on" }, on),
+    Tag("div", { class: "swap-off" }, off)
+  ]);
+};

src/base/Table.js

@@ -0,0 +1,10 @@
+// components/Table.js
+import { Tag } from "sigpro";
+
+export const Table = (props, children) => {
+  const { class: className, ...rest } = props;
+  return Tag("table", {
+    ...rest,
+    class: `table ${className || ''}`.trim()
+  }, children);
+};

src/base/Tabs.js

@@ -0,0 +1,75 @@
+// components/Tabs.js
+import { Tag, $, Watch } from "sigpro";
+
+export const Tabs = (props) => {
+  const { items, class: className, onTabClose, ...rest } = props;
+  const itemsSignal = typeof items === "function" ? items : () => items || [];
+  const activeIndex = $(0);
+
+  Watch(() => {
+    const list = itemsSignal();
+    const idx = list.findIndex(it => {
+      const active = it.active;
+      return typeof active === "function" ? active() : active;
+    });
+    if (idx !== -1 && activeIndex() !== idx) activeIndex(idx);
+  });
+
+  const removeTab = (idx, item) => {
+    item.onClose?.();
+    onTabClose?.(item, idx);
+    const current = itemsSignal();
+    if (typeof items !== "function" || items._isComputed) return;
+    const newItems = current.filter((_, i) => i !== idx);
+    items(newItems);
+    if (newItems.length) {
+      let newIdx = activeIndex();
+      if (idx < newIdx) newIdx--;
+      else if (idx === newIdx) newIdx = Math.min(newIdx, newItems.length - 1);
+      activeIndex(newIdx);
+    }
+  };
+
+  return Tag("div", { ...rest, class: `tabs ${className || ''}`.trim() }, () => {
+    const list = itemsSignal();
+    const elements = [];
+    for (let i = 0; i < list.length; i++) {
+      const item = list[i];
+      const label = typeof item.label === "function" ? item.label() : item.label;
+      const closable = typeof item.closable === "function" ? item.closable() : item.closable;
+
+      const btnContent = closable
+        ? Tag("span", { class: "flex items-center" }, [
+            label,
+            Tag("span", {
+              class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
+              onclick: (e) => { e.stopPropagation(); removeTab(i, item); }
+            })
+          ])
+        : label;
+
+      const tabBtn = Tag("button", {
+        class: () => `tab ${activeIndex() === i ? 'tab-active' : ''}`,
+        onclick: (e) => {
+          e.preventDefault();
+          const disabled = typeof item.disabled === "function" ? item.disabled() : item.disabled;
+          if (!disabled) {
+            item.onclick?.();
+            activeIndex(i);
+          }
+        }
+      }, btnContent);
+
+      elements.push(item.tip ? Tag("div", { class: "tooltip", "data-tip": item.tip }, tabBtn) : tabBtn);
+
+      const content = typeof item.content === "function" ? item.content() : item.content;
+      elements.push(
+        Tag("div", {
+          class: "tab-content bg-base-100 border-base-300 p-6",
+          style: () => `display: ${activeIndex() === i ? 'block' : 'none'}`
+        }, content)
+      );
+    }
+    return elements;
+  });
+};

src/base/TextRotate.js

@@ -0,0 +1,19 @@
+// components/TextRotate.js
+import { Tag } from "sigpro";
+
+export const TextRotate = (props) => {
+  const { class: className, words, ...rest } = props;
+
+  const wordsArray = Array.isArray(words) 
+    ? words 
+    : (typeof words === 'string' ? words.split(',') : []);
+
+  return Tag("span", {
+    ...rest,
+    class: `text-rotate ${className || ''}`.trim()
+  }, [
+    Tag("span", {}, 
+      wordsArray.map(word => Tag("span", {}, word))
+    )
+  ]);
+};

src/base/Timeline.js

@@ -0,0 +1,10 @@
+// components/Timeline.js
+import { Tag } from "sigpro";
+
+export const Timeline = (props, children) => {
+  const { class: className, vertical = true, compact = false, ...rest } = props;
+  return Tag("ul", {
+    ...rest,
+    class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${className || ''}`.trim()
+  }, children);
+};

src/base/Toast.js

@@ -0,0 +1,61 @@
+// components/Toast.js
+import { Tag, Mount } from "sigpro";
+
+export const Toast = (message, type = "alert-success", duration = 3500) => {
+  let container = document.getElementById("sigpro-toast-container");
+
+  if (!container) {
+    container = Tag("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" });
+  container.appendChild(toastHost);
+
+  let timeoutId;
+
+  const close = () => {
+    clearTimeout(timeoutId);
+    const el = toastHost.firstElementChild;
+    if (el && !el.classList.contains("opacity-0")) {
+      el.classList.add("translate-x-full", "opacity-0");
+      setTimeout(() => {
+        instance.destroy();
+        toastHost.remove();
+        if (!container.hasChildNodes()) container.remove();
+      }, 300);
+    } else {
+      instance.destroy();
+      toastHost.remove();
+    }
+  };
+
+  const ToastComponent = () => {
+    const closeIcon = Tag("span", { class: "icon-[lucide--x]" });
+    const closeBtn = Tag("button", {
+      class: "btn btn-xs btn-circle btn-ghost",
+      onclick: close
+    }, closeIcon);
+
+    const alertDiv = Tag("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),
+      closeBtn
+    ]);
+
+    requestAnimationFrame(() => alertDiv.classList.remove("translate-x-10", "opacity-0"));
+    return alertDiv;
+  };
+
+  const instance = Mount(ToastComponent, toastHost);
+
+  if (duration > 0) {
+    timeoutId = setTimeout(close, duration);
+  }
+
+  return close;
+};

src/base/Toggle.js

@@ -0,0 +1,19 @@
+// components/Toggle.js
+import { Tag } from "sigpro";
+
+export const Toggle = (props) => {
+  const { class: className, label, ...rest } = props;
+
+  const inputEl = Tag("input", {
+    ...rest,
+    type: "checkbox",
+    class: `toggle ${className || ''}`.trim()
+  });
+
+  if (!label) return inputEl;
+
+  return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    inputEl,
+    Tag("span", { class: "label-text" }, label)
+  ]);
+};

src/base/Tooltip.js

@@ -0,0 +1,11 @@
+// components/Tooltip.js
+import { Tag } from "sigpro";
+
+export const Tooltip = (props, children) => {
+  const { class: className, tip, ...rest } = props;
+  return Tag("div", {
+    ...rest,
+    class: `tooltip ${className || ''}`.trim(),
+    "data-tip": tip
+  }, children);
+};

src/sigpro.css

@@ -61,10 +61,12 @@
 }
 
 /* Agrupamos los selectores normales de CSS */
-.input, .select, .textarea {
+.input,
+.select,
+.textarea {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
+
-  &:focus, 
+  &:focus,
   &:focus-within {
     outline: 1px solid transparent !important;
     outline-offset: 1px !important;
@@ -78,43 +80,57 @@
     --focus-color: var(--color-primary);
 
     /* Selectores que detectan la variante de color sin importar el prefijo */
-    &[class*="-secondary"] { --focus-color: var(--color-secondary); }
+    &[class*="-secondary"] {
-    &[class*="-accent"]    { --focus-color: var(--color-accent); }
+      --focus-color: var(--color-secondary);
-    &[class*="-neutral"]   { --focus-color: var(--color-neutral); }
+    }
-    &[class*="-ghost"]     { --focus-color: var(--color-base-content); }
+    &[class*="-accent"] {
-    &[class*="-info"]      { --focus-color: var(--color-info); }
+      --focus-color: var(--color-accent);
-    &[class*="-success"]   { --focus-color: var(--color-success); }
+    }
-    &[class*="-warning"]   { --focus-color: var(--color-warning); }
+    &[class*="-neutral"] {
-    &[class*="-error"]     { --focus-color: var(--color-error); }
+      --focus-color: var(--color-neutral);
+    }
+    &[class*="-ghost"] {
+      --focus-color: var(--color-base-content);
+    }
+    &[class*="-info"] {
+      --focus-color: var(--color-info);
+    }
+    &[class*="-success"] {
+      --focus-color: var(--color-success);
+    }
+    &[class*="-warning"] {
+      --focus-color: var(--color-warning);
+    }
+    &[class*="-error"] {
+      --focus-color: var(--color-error);
+    }
 
     background-color: oklch(from var(--focus-color) l c h / 0.05);
     border-color: var(--focus-color);
     box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
-    
+
     &[class*="-ghost"] {
       border-width: 1px;
     }
   }
 }
 
-
 .floating-label span {
-  color: oklch(30% 0.01 260);  /* Gris más oscuro (30% es más oscuro que 45%) */
+  color: oklch(30% 0.01 260); /* Gris más oscuro (30% es más oscuro que 45%) */
-  font-size: 1.1rem;             /* text-base: más grande que 0.875rem */
+  font-size: 1.1rem; /* text-base: más grande que 0.875rem */
   transition: all 0.2s ease;
 }
 
 .floating-label:focus-within span {
-  color: oklch(25% 0.02 260);  /* Aún más oscuro al enfocar */
+  color: oklch(25% 0.02 260); /* Aún más oscuro al enfocar */
-  font-size: 1.1rem;             /* Mantiene el mismo tamaño */
+  font-size: 1.1rem; /* Mantiene el mismo tamaño */
 }
 
 .floating-label:has(input:not(:placeholder-shown)) span {
-  color: oklch(28% 0.01 260);  /* Gris oscuro cuando tiene valor */
+  color: oklch(28% 0.01 260); /* Gris oscuro cuando tiene valor */
-  font-size: 1.1rem;             /* Mantiene el mismo tamaño */
+  font-size: 1.1rem; /* Mantiene el mismo tamaño */
 }
 
-
 .tab-content-inner {
   animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: top;
@@ -131,6 +147,67 @@
   }
 }
 
+@layer utilities {
+  button {
+    @apply btn;
+  }
+
+  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not(
+      [type="color"]
+    ),
+  select,
+  textarea {
+    @apply input;
+  }
+
+  input[type="radio"] {
+    @apply radio;
+  }
+
+  input[type="checkbox"] {
+    @apply checkbox;
+  }
+
+  input[type="range"] {
+    @apply range;
+  }
+
+  select {
+    @apply select;
+  }
+
+  textarea {
+    @apply textarea;
+  }
+
+  hr {
+    @apply divider;
+  }
+
+  progress {
+    @apply progress;
+  }
+
+  table {
+    @apply table;
+  }
+
+  dialog {
+    @apply modal;
+  }
+
+  [data-tip] {
+    @apply tooltip;
+  }
+
+  nav {
+    @apply navbar;
+  }
+
+  [role="alert"] {
+    @apply alert;
+  }
+}
 
 /* sigpro-ui daisyUI classes - extracted from components */
 
@@ -346,4 +423,4 @@
 /* .active, .hr, .label, .label-text, */
 
 /* Icons */
-/* .icon-[lucide--heart] */
+/* .icon-[lucide--heart] */