Before repair nav components

2026-04-25 11:24:39 +02:00
parent e842ed8041
commit 910c6ab3c7
71 changed files with 4260 additions and 2819 deletions
--- a/components/discarted/Accordion.js
+++ b/components/discarted/Accordion.js
@@ -0,0 +1,22 @@
+// components/Accordion.js
+import { h } from "sigpro";
+
+export const Accordion = (props, children) => {
+  const name = props.name || `accordion-${Math.random().toString(36).slice(2, 9)}`;
+  
+  if (props.items && Array.isArray(props.items)) {
+    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" }, 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" }, children)
+  ]);
+};
--- a/components/discarted/Alert.js
+++ b/components/discarted/Alert.js
@@ -0,0 +1,7 @@
+// components/Alert.js
+import { h } from "sigpro";
+
+export const Alert = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `alert ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/Autocomplete.js
+++ b/components/discarted/Autocomplete.js
@@ -0,0 +1,61 @@
+import { $, h, when, fx } from 'sigpro';
+import { Input } from '../Input.js';
+import { filterBy, listKey, getBy } from '../All.js';
+
+
+export const Autocomplete = ({ items, value, onselect, placeholder = 'Buscar...', ...props }) => {
+  const query = $(value ? (typeof value === 'function' ? value() : value) : '');
+  const isOpen = $(false);
+  const filtered = $(() => filterBy(items, query()));
+  const { cursor, onKey } = listKey(filtered, isOpen);
+
+  const pick = (item) => {
+    const display = getBy(item);
+    const actual = typeof item === 'string' ? item : item.value;
+    query(display);
+    if (typeof value === 'function') value(actual);
+    onselect?.(item);
+    isOpen(false);
+  };
+
+  return h('div', { class: 'relative w-full' }, [
+    Input({
+      ...props,
+      type: 'text',
+      placeholder,
+      value: query,
+      left: h('span', { class: 'icon-[lucide--search]' }),
+      oninput: (e) => {
+        query(e.target.value);
+        if (typeof value === 'function') value(e.target.value);
+        isOpen(true);
+      },
+      onfocus: () => isOpen(true),
+      onblur: () => setTimeout(() => isOpen(false), 150),
+      onkeydown: (e) => onKey(e, pick)
+    }),
+
+    when(isOpen, () =>
+      fx({ duration: 200, slide: true },
+        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 flex-col flex-nowrap'
+        }, [
+          each(filtered, (item, idx) =>
+            h('li', {}, [
+              h('a', {
+                class: () => cursor() === idx ? 'active bg-primary text-primary-content' : '',
+                onmousedown: (e) => e.preventDefault(), // evita que el blur cierre antes del click
+                onclick: () => pick(item),
+                onmouseenter: () => cursor(idx)
+              }, getBy(item))
+            ]),
+            (item, idx) => getBy(item) + idx
+          ),
+          () => filtered().length === 0
+            ? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados')
+            : null
+        ])
+      )
+    )
+  ]);
+};
--- a/components/discarted/Badge.js
+++ b/components/discarted/Badge.js
@@ -0,0 +1,7 @@
+// components/Badge.js
+import { h } from "sigpro";
+const colors = [""]
+export const Badge = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("span", { ...props, class: `badge ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/Calendar.js
+++ b/components/discarted/Calendar.js
@@ -0,0 +1,172 @@
+// components/Calendar.js
+import { $, h } from "sigpro";
+
+export const Calendar = (props) => {
+  const internalDate = $(new Date());
+  const hoverDate = $(null);
+  const startHour = $(0);
+  const endHour = $(0);
+  
+  const isRangeMode = () => {
+    const r = typeof props.range === "function" ? props.range() : props.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 = () => {
+    return typeof props.value === "function" ? props.value() : props.value;
+  };
+  
+  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,
+          ...(props.hour && { startHour: startHour() }),
+        };
+        props.onChange?.(newValue);
+      } else {
+        const start = current.start;
+        let newValue;
+        if (dateStr < start) {
+          newValue = { start: dateStr, end: start };
+        } else {
+          newValue = { start, end: dateStr };
+        }
+        if (props.hour) {
+          newValue.startHour = current.startHour !== undefined ? current.startHour : startHour();
+          newValue.endHour = endHour();
+        }
+        props.onChange?.(newValue);
+      }
+    } else {
+      const newValue = props.hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr;
+      props.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 h("div", { class: "flex-1" }, [
+      h("div", { class: "flex gap-2 items-center" }, [
+        h("input", {
+          type: "range",
+          min: 0,
+          max: 23,
+          value: hVal,
+          class: "range range-xs flex-1",
+          oninput: (e) => onHourChange(parseInt(e.target.value))
+        }),
+        h("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
+          () => String(typeof hVal === "function" ? hVal() : hVal).padStart(2, "0") + ":00"
+        )
+      ])
+    ]);
+  };
+  
+  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]" })
+        ),
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+          h("span", { class: "icon-[lucide--chevron-left]" })
+        )
+      ]),
+      h("span", { class: "font-bold uppercase flex-1 text-center" }, [
+        () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
+      ]),
+      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]" })
+        ),
+        h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+          h("span", { class: "icon-[lucide--chevrons-right]" })
+        )
+      ])
+    ]),
+    
+    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();
+        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(h("div"));
+        
+        for (let i = 1; i <= daysInMonth; i++) {
+          const date = new Date(year, month, i);
+          const dStr = formatDate(date);
+          
+          cells.push(
+            h("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;
+      }
+    ]),
+    
+    props.hour ? h("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+      isRangeMode()
+        ? h("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
+  ]);
+};
--- a/components/discarted/Datepicker.js
+++ b/components/discarted/Datepicker.js
@@ -0,0 +1,83 @@
+// components/Datepicker.js
+import { $, h, when, watch } from "sigpro";
+import { Calendar } from "./Calendar.js";
+
+export const Datepicker = (props) => {
+  const isOpen = $(false);
+  const isRangeMode = () => {
+    const r = typeof props.range === "function" ? props.range() : props.range;
+    return r === true;
+  };
+  
+  const displayValue = $("");
+  
+  watch(() => {
+    const v = typeof props.value === "function" ? props.value() : props.value;
+    if (!v) {
+      displayValue("");
+      return;
+    }
+    let text = "";
+    if (typeof v === "string") {
+      text = (props.hour && v.includes("T")) ? v.replace("T", " ") : v;
+    } else if (v.start && v.end) {
+      const startStr = props.hour && v.startHour !== undefined 
+        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
+        : v.start;
+      const endStr = props.hour && v.endHour !== undefined 
+        ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` 
+        : v.end;
+      text = `${startStr} - ${endStr}`;
+    } else if (v.start) {
+      const startStr = props.hour && v.startHour !== undefined 
+        ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` 
+        : v.start;
+      text = `${startStr}...`;
+    }
+    displayValue(text);
+  });
+  
+  const handleCalendarChange = (newValue) => {
+    if (typeof props.value === "function") props.value(newValue);
+    if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
+      isOpen(false);
+    }
+  };
+  
+  const toggleOpen = (e) => {
+    e.stopPropagation();
+    isOpen(!isOpen());
+  };
+  
+  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",
+        value: displayValue,
+        readonly: true,
+        placeholder: props.placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
+      })
+    ]),
+    
+    when(isOpen, () =>
+      h("div", {
+        class: "absolute left-0 mt-2 z-[100]",
+        onclick: (e) => e.stopPropagation()
+      }, [
+        Calendar({
+          value: props.value,
+          range: isRangeMode(),
+          hour: props.hour,
+          onChange: handleCalendarChange
+        })
+      ])
+    ),
+    
+    when(isOpen, () => 
+      h("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })
+    )
+  ]);
+};
--- a/components/discarted/Input.js
+++ b/components/discarted/Input.js
@@ -0,0 +1,46 @@
+import { h, $, when, fx } from 'sigpro';
+import { get, cls, isFn } from '../All.js';
+
+export const Input = (props) => {
+  const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = props;
+
+  const showPassword = $(false);
+  const isFocused = $(false);
+  const isPassword = props.type === 'password';
+  const pattern = rule ?? null;
+
+  const inputType = () => isPassword
+    ? (get(showPassword) ? 'text' : 'password')
+    : (props.type || 'text');
+
+  return h("div", {
+    class: "input-container",
+    onfocusin: () => isFocused(true),
+    onfocusout: (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) { isFocused(false); }
+    }
+  }, [
+    h('label', { class: "floating-label" }, [
+      float ? h("span", {}, label) : null,
+      h("label", { pattern: pattern, class: () => cls('input validator', props.class) },
+        [
+          label && !float ? h('span', { class: 'label' }, label) : null,
+          left ?? null,
+          h('input', { ...rest, type: inputType, class: 'grow', pattern: pattern, placeholder: placeholder || label || ' ', value: value }), right ?? null,
+          isPassword ? h('label', { class: 'swap swap-rotate ml-2' }, [
+            h('input', { type: 'checkbox', onchange: (e) => showPassword(e.target.checked) }),
+            h('span', { class: 'swap-on icon-[lucide--eye]' }),
+            h('span', { class: 'swap-off icon-[lucide--eye-off]' })
+          ]) : null
+        ]),
+        hint ? h('div', { class: "validator-hint" }, hint) : null,
+      
+      when(isFocused, () => fx({ duration: 300, slide: true },
+        h('div', { class: 'input-content', onmousedown: e => e.preventDefault() },
+          [
+            isFn(content) ? content(isFocused) : content
+          ])
+      ))
+    ]),
+  ]);
+};
--- a/components/discarted/Select.js
+++ b/components/discarted/Select.js
@@ -0,0 +1,30 @@
+// components/Select.js
+import { h, each } from "sigpro";
+
+export const Select = (props) => {
+  const { items, placeholder, placeholderDisabled = true, keyFn, children, ...rest } = props;
+
+  if (children !== undefined) {
+    return h("select", { ...rest, class: `select ${rest.class ?? ''}` }, children);
+  }
+
+  const placeholderOption = placeholder
+    ? h("option", { disabled: placeholderDisabled, selected: true }, placeholder)
+    : null;
+
+  const dynamicOptions = each(
+    () => [...(typeof items === "function" ? items() : items || [])],
+    (item) => {
+      const value = typeof item === "string" ? item : item.value;
+      const label = typeof item === "string" ? item : item.label;
+      return h("option", { value }, label);
+    },
+    keyFn || ((item) => (typeof item === "string" ? item : item.value))
+  );
+
+  const options = placeholderOption
+    ? [placeholderOption, dynamicOptions]
+    : dynamicOptions;
+
+  return h("select", { ...rest, class: `select ${rest.class ?? ''}` }, options);
+};
--- a/components/discarted/Toast.js
+++ b/components/discarted/Toast.js
@@ -0,0 +1,55 @@
+// components/Toast.js
+import { h, mount } from "sigpro";
+
+export const Toast = (message, type = "alert-success", duration = 3500) => {
+  let container = document.getElementById("sigpro-toast-container");
+  if (!container) {
+    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 = h("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 = h("span", { class: "icon-[lucide--x]" });
+    const closeBtn = h("button", {
+      class: "btn btn-xs btn-circle btn-ghost",
+      onclick: close
+    }, closeIcon);
+
+    const alertDiv = h("div", {
+      class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
+    }, [
+      h("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;
+};
--- a/components/discarted/_core.js
+++ b/components/discarted/_core.js
@@ -0,0 +1,62 @@
+// _core.js
+import { $, watch } from 'sigpro';
+
+export const ui = (base, extras = '') => {
+  if (!extras) return base;
+  const extraClasses = extras
+    .split(' ')
+    .map(part => part.trim())
+    .filter(Boolean)
+    .map(part => part.startsWith(base + '-') ? part : `${base}-${part}`)
+    .join(' ');
+  return `${base} ${extraClasses}`.trim();
+};
+
+export const get = val => typeof val === "function" ? val() : val;
+
+export const filterBy = (items, query, field = 'label') => {
+  const q = String(query).toLowerCase();
+  if (!q) return get(items);
+  return get(items).filter(item => {
+    const text = typeof item === 'string' ? item : item[field];
+    return String(text).toLowerCase().includes(q);
+  });
+};
+
+
+export const listKey = (items, isOpen) => {
+  const cursor = $(-1);
+  
+  watch([items, isOpen], () => {
+    if (!get(isOpen)) cursor(-1);
+  });
+  
+  const onKey = (e, select) => {
+    const list = get(items);
+    if (!list.length) return;
+    
+    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();
+      select(list[cursor()]);
+    } else if (e.key === 'Escape') {
+      isOpen(false);
+    }
+  };
+  
+  return { cursor, onKey };
+};
+
+export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
+
+export const getBy = (item, field = 'label') => {
+  return typeof item === 'string' ? item : item[field];
+};
+
+export const isFunc = f => typeof f === "function";
--- a/components/discarted/button.js
+++ b/components/discarted/button.js
@@ -0,0 +1,6 @@
+import { h } from "sigpro";
+
+export const Button = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("button", { ...props, class: `btn ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/card.js
+++ b/components/discarted/card.js
@@ -0,0 +1,22 @@
+// components/Card.js
+import { h } from "sigpro";
+
+export const Card = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `card ${props.class ?? ''}` }, children);
+};
+
+export const CardTitle = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `card-title ${props.class ?? ''}` }, children);
+};
+
+export const CardBody = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `card-body ${props.class ?? ''}` }, children);
+};
+
+export const CardActions = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `card-actions ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/carousel.js
+++ b/components/discarted/carousel.js
@@ -0,0 +1,12 @@
+// components/Carousel.js
+import { h } from "sigpro";
+
+export const Carousel = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `carousel ${props.class ?? ''}` }, children);
+};
+
+export const CarouselItem = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `carousel-item ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/chat.js
+++ b/components/discarted/chat.js
@@ -0,0 +1,42 @@
+// components/Chat.js
+import { h } from "sigpro";
+
+export const Chat = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return h("div", { ...props, class: `chat ${props.class ?? ''}` }, children);
+};
+
+export const ChatImage = (props, children) => {
+    children === undefined && (children = props, props = {});
+    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 h("div", { ...props, class: `chat-header ${props.class ?? ''}` }, children);
+};
+
+export const ChatFooter = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return h("div", { ...props, class: `chat-footer ${props.class ?? ''}` }, children);
+};
+
+export const ChatBubble = (props, children) => {
+    children === undefined && (children = props, props = {});
+    return h("div", { ...props, class: `chat-bubble ${props.class ?? ''}` }, children);
+};
+
+export const ChatMessage = (props) => {
+  const { position = "start", avatar, header, message, footer, bubbleClass, ...rest } = props;
+  
+  return Chat({ ...rest, class: `chat-${position} ${props.class ?? ''}` }, [
+    avatar && ChatImage(avatar),
+    header && ChatHeader(header),
+    ChatBubble({ class: bubbleClass }, message),
+    footer && ChatFooter(footer)
+  ]);
+};
--- a/components/discarted/checkbox.js
+++ b/components/discarted/checkbox.js
@@ -0,0 +1,4 @@
+// components/Checkbox.js
+import { h } from "sigpro";
+
+export const Checkbox = (props) => h("input", { ...props, type: "checkbox", class: `checkbox ${props.class ?? ''}` });
--- a/components/discarted/colorpicker.js
+++ b/components/discarted/colorpicker.js
@@ -0,0 +1,68 @@
+// components/Colorpicker.js
+import { $, h, when} from "sigpro";
+
+export const Colorpicker = (props) => {
+  const isOpen = $(false);
+
+  const palette = [
+    ...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
+    ...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"],
+    ...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"],
+    ...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"],
+    ...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"],
+    ...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"],
+    ...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"],
+    ...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"],
+  ];
+
+  const getColor = () => {
+    const v = props.value;
+    return (typeof v === "function" ? v() : v) || "#000000";
+  };
+
+  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
+    }, [
+      h("div", {
+        class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
+        style: () => `background-color: ${getColor()}`
+      }),
+      props.label ? h("span", { class: "opacity-80" }, props.label) : null
+    ]),
+
+    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()
+      }, [
+        h("div", { class: "grid grid-cols-8 gap-1" },
+          palette.map(c =>
+            h("button", {
+              type: "button",
+              style: `background-color: ${c}`,
+              class: () => {
+                const active = getColor().toLowerCase() === c.toLowerCase();
+                return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
+              },
+              onclick: () => {
+                if (typeof props.value === "function") props.value(c);
+                isOpen(false);
+              }
+            })
+          )
+        )
+      ])
+    ),
+
+    when(isOpen, () =>
+      h("div", {
+        class: "fixed inset-0 z-[100]",
+        onclick: () => isOpen(false)
+      })
+    )
+  ]);
+};
--- a/components/discarted/divider.js
+++ b/components/discarted/divider.js
@@ -0,0 +1,4 @@
+// components/Collapse.js
+import { h } from "sigpro";
+
+export const Divider = (props) => h("div", { ...props, class: `divider ${props.class ?? ''}` });
--- a/components/discarted/drawer.js
+++ b/components/discarted/drawer.js
@@ -0,0 +1,31 @@
+// components/Drawer.js
+import { h } from "sigpro";
+
+export const Drawer = (props, children) => {
+  children === undefined && (children = props, props = {});
+  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 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)
+    }),
+    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)
+      }),
+      h("div", { class: "min-h-full bg-base-200 w-80 p-4" },
+        typeof props.content === "function" ? props.content() : props.content
+      )
+    ])
+  ]);
+};
--- a/components/discarted/dropdown.js
+++ b/components/discarted/dropdown.js
@@ -0,0 +1,24 @@
+// components/Dropdown.js
+import { h } 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) => h("details", {
+  ...props,
+  class: `dropdown ${props.class ?? ''}`,
+  onclick: (e) => {
+    const details = e.currentTarget;
+    if (currentOpen && currentOpen !== details) currentOpen.open = false;
+    setTimeout(() => { currentOpen = details.open ? details : null; }, 0);
+  }
+}, props.children);
--- a/components/discarted/fab.js
+++ b/components/discarted/fab.js
@@ -0,0 +1,7 @@
+// components/Fab.js
+import { h } from "sigpro";
+
+export const Fab = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `fab ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/fieldset.js
+++ b/components/discarted/fieldset.js
@@ -0,0 +1,10 @@
+// components/Fieldset.js
+import { h } from "sigpro";
+
+export const Fieldset = (props, children) => h("fieldset", {
+  ...props,
+  class: `fieldset ${props.class ?? ''}`
+}, [
+  props.legend ? h("legend", { class: "fieldset-legend" }, props.legend) : null,
+  children
+]);
--- a/components/discarted/fileinput.js
+++ b/components/discarted/fileinput.js
@@ -0,0 +1,69 @@
+// components/Fileinput.js
+import { $, h, when, each } from "sigpro";
+
+export const Fileinput = (props) => {
+  const selectedFiles = $([]);
+  const isDragging = $(false);
+  const error = $(null);
+  const maxBytes = (props.max || 2) * 1024 * 1024;
+
+  const handleFiles = (files) => {
+    const fileList = Array.from(files);
+    error(null);
+    if (fileList.find(f => f.size > maxBytes)) {
+      error(`Máx ${props.max || 2}MB`);
+      return;
+    }
+    selectedFiles([...selectedFiles(), ...fileList]);
+    props.onselect?.(selectedFiles());
+  };
+
+  const removeFile = (idx) => {
+    const updated = selectedFiles().filter((_, i) => i !== idx);
+    selectedFiles(updated);
+    props.onselect?.(updated);
+  };
+
+  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); }
+    }, [
+      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`)
+      ]),
+      h("input", {
+        type: "file",
+        multiple: true,
+        accept: props.accept || "*",
+        class: "hidden",
+        onchange: (e) => handleFiles(e.target.files)
+      })
+    ]),
+    () => 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)`)
+            ]),
+            h("button", {
+              type: "button",
+              class: "btn btn-ghost btn-xs btn-circle",
+              onclick: (e) => { e.preventDefault(); removeFile(idx); }
+            }, h("span", { class: "icon-[lucide--x]" }))
+          ]),
+          (file) => file.name + file.lastModified
+        )
+      ])
+    )
+  ]);
+};
+
--- a/components/discarted/icon.js
+++ b/components/discarted/icon.js
@@ -0,0 +1,14 @@
+// components/Icon.js
+import { h } from "sigpro";
+
+export const Icon = (props, children) => {
+  if (typeof props === "string") {
+    if (props.includes("icon-") || props.startsWith("lucide-")) {
+      return h("span", { class: props }, children);
+    }
+    return h("span", { class: "icon" }, props);
+  }
+  if (!props) return null;
+  const { class: className, ...rest } = props;
+  return h("span", { ...rest, class: className }, children);
+};
--- a/components/discarted/indicator.js
+++ b/components/discarted/indicator.js
@@ -0,0 +1,10 @@
+// components/Indicator.js
+import { h } from "sigpro";
+
+export const Indicator = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `indicator ${props.class ?? ''}` }, [
+    props.value ? h("span", { class: `indicator-item badge ${props.class ?? ''}` }, props.value) : null,
+    children
+  ]);
+};
--- a/components/discarted/kbd.js
+++ b/components/discarted/kbd.js
@@ -0,0 +1,7 @@
+// components/Kbd.js
+import { h } from "sigpro";
+
+export const Kbd = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("kbd", { ...props, class: `kbd ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/loading.js
+++ b/components/discarted/loading.js
@@ -0,0 +1,7 @@
+// components/Loading.js
+import { h } from "sigpro";
+
+export const Loading = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("span", { ...props, class: `loading loading-spinner ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/menu.js
+++ b/components/discarted/menu.js
@@ -0,0 +1,32 @@
+// components/Menu.js
+import { h, each } from "sigpro";
+
+export const Menu = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("ul", { ...props, class: `menu ${props.class ?? ''}` }, children);
+};
+
+export const MenuItems = (props) => {
+  const { items, keyFn = (item, idx) => item.id ?? idx } = props;
+  const itemsSignal = typeof items === "function" ? items : () => items || [];
+
+  const renderItem = (item) => {
+    if (item.children) {
+      return h("li", {}, [
+        h("details", {}, [
+          h("summary", {}, item.label),
+          h("ul", {}, MenuItems({ items: item.children }))
+        ])
+      ]);
+    }
+    return h("li", {}, h("a", {
+      href: item.href,
+      onclick: item.onclick ? (e) => {
+        if (!item.href) e.preventDefault();
+        item.onclick(e);
+      } : null
+    }, item.label));
+  };
+
+  return each(itemsSignal, renderItem, keyFn);
+};
--- a/components/discarted/modal.js
+++ b/components/discarted/modal.js
@@ -0,0 +1,33 @@
+// components/Modal.js
+import { h, watch } from "sigpro";
+
+export const Modal = (props) => {
+  let dialogRef = null;
+
+  watch(() => {
+    const isOpen = typeof props.open === "function" ? props.open() : props.open;
+    if (!dialogRef) return;
+    isOpen ? dialogRef.showModal() : dialogRef.close();
+  });
+
+  const close = () => typeof props.open === "function" && props.open(false);
+
+  return h("dialog", {
+    ...props,
+    ref: el => dialogRef = el,
+    class: `modal ${props.class ?? ''}`,
+    onclose: close,
+    oncancel: close
+  }, [
+    h("div", { class: "modal-box" }, [
+      props.title && h("h3", { class: "text-lg font-bold" }, props.title),
+      props.children,
+      h("div", { class: "modal-action" }, [
+        props.actions || h("button", { class: "btn", onclick: close }, "Cerrar")
+      ])
+    ]),
+    h("form", { method: "dialog", class: "modal-backdrop" }, [
+      h("button", {}, "close")
+    ])
+  ]);
+};
--- a/components/discarted/navbar.js
+++ b/components/discarted/navbar.js
@@ -0,0 +1,7 @@
+// components/Navbar.js
+import { h } from "sigpro";
+
+export const Navbar = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `navbar ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/radial.js
+++ b/components/discarted/radial.js
@@ -0,0 +1,18 @@
+// components/Radial.js
+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 h("div", {
+    ...props,
+    class: `radial-progress ${props.class ?? ''}`,
+    style: style,
+    role: "progressbar",
+    "aria-valuenow": props.value,
+    "aria-valuemin": 0,
+    "aria-valuemax": props.max || 100
+  }, children || `${Math.round(percentage)}%`);
+};
--- a/components/discarted/radio.js
+++ b/components/discarted/radio.js
@@ -0,0 +1,4 @@
+// components/Radio.js
+import { h } from "sigpro";
+
+export const Radio = (props) => h("input", { ...props, type: "radio", class: `radio ${props.class ?? ''}` });
--- a/components/discarted/range.js
+++ b/components/discarted/range.js
@@ -0,0 +1,4 @@
+// components/Range.js
+import { h } from "sigpro";
+
+export const Range = (props) => h("input", { ...props, type: "range", class: `range ${props.class ?? ''}` });
--- a/components/discarted/rating.js
+++ b/components/discarted/rating.js
@@ -0,0 +1,21 @@
+// components/Rating.js
+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 h("div", { ...props, class: `rating ${props.class ?? ''}` }, children || Array.from({ length: props.count || 5 }, (_, i) => {
+    const starValue = i + 1;
+    return h("input", {
+      type: "radio",
+      name,
+      class: `mask ${props.mask || "mask-star"}`,
+      checked: () => typeof props.value === "function" ? props.value() === starValue : props.value === starValue,
+      onchange: () => {
+        if (props.onchange) props.onchange(starValue);
+        else if (typeof props.value === "function") props.value(starValue);
+      }
+    });
+  }));
+};
--- a/components/discarted/skeleton.js
+++ b/components/discarted/skeleton.js
@@ -0,0 +1,12 @@
+// components/Skeleton.js
+import { h } from "sigpro";
+
+export const Skeleton = (props) => h("div", { ...props, class: `skeleton ${props.class ?? ''}` });
+
+export const SkeletonText = (props) => {
+  return h("div", { ...props, class: "space-y-2" }, 
+    Array.from({ length: props.lines || 3 }, () => 
+      h("div", { class: `skeleton h-4 w-full ${props.class ?? ''}` })
+    )
+  );
+};
--- a/components/discarted/stack.js
+++ b/components/discarted/stack.js
@@ -0,0 +1,7 @@
+// components/Stack.js
+import { h } from "sigpro";
+
+export const Stack = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `stack ${props.class ?? ''}` }, children);
+};
--- a/components/discarted/stat.js
+++ b/components/discarted/stat.js
@@ -0,0 +1,20 @@
+// components/Stats.js
+import { h } from "sigpro";
+
+export const Stats = (props, children) => {
+  children === undefined && (children = props, props = {});
+  const direction = props.vertical ? "stats-vertical" : "stats-horizontal";
+  return h("div", { ...props, class: `stats ${direction} ${props.class ?? ''}`.trim() }, children);
+};
+
+export const Stat = (props, children) => {
+  children === undefined && (children = props, props = {});
+  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/discarted/steps.js
+++ b/components/discarted/steps.js
@@ -0,0 +1,12 @@
+// components/Steps.js
+import { h } from "sigpro";
+
+export const Steps = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("ul", { ...props, class: `steps ${props.class ?? ''}` }, children);
+};
+
+export const Step = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("li", { ...props, class: `step ${props.class ?? ''}`, "data-content": props.dataContent }, children);
+};
--- a/components/discarted/swap.js
+++ b/components/discarted/swap.js
@@ -0,0 +1,14 @@
+// components/Swap.js
+import { h } from "sigpro";
+
+export const Swap = (props) => {
+  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)
+    }),
+    h("div", { class: "swap-on" }, props.on),
+    h("div", { class: "swap-off" }, props.off)
+  ]);
+};
--- a/components/discarted/table.js
+++ b/components/discarted/table.js
@@ -0,0 +1,31 @@
+// components/Table.js
+import { h, each } from "sigpro";
+
+export const Table = (props, children) => {
+  children === undefined && (children = props, props = {});
+  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) ? 
+    h("thead", {}, 
+      h("tr", {}, 
+        props.columns.map(col => h("th", { class: col.class }, col.label))
+      )
+    ) : null;
+  
+  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 h("td", { class: col.class }, content);
+        })
+      )
+    , props.keyFn || ((item, idx) => item.id ?? idx))
+  ]);
+  
+  return [thead, tbody];
+};
--- a/components/discarted/tabs.js
+++ b/components/discarted/tabs.js
@@ -0,0 +1,49 @@
+// components/Tabs.js
+import { h, each } from "sigpro";
+
+export const Tabs = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
+};
+
+export const Tab = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
+};
+
+export const TabContent = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return h("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
+};
+
+export const TabClose = (props) => h("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
+  h("span", { class: "flex items-center" }, [
+    props.label,
+    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); }
+    })
+  ])
+]);
+
+export const TabItems = (props) => {
+  const items = typeof props.items === "function" ? props.items : () => props.items || [];
+  return each(
+    items,
+    (item, idx) => {
+      const TabComp = item.closable ? TabClose : Tab;
+      return [
+        TabComp({
+          ...item,
+          class: () => props.activeIndex() === idx ? `tab-active ${item.class ?? ''}` : item.class,
+          onclick: (e) => { e.preventDefault(); props.activeIndex(idx); item.onclick?.(e); },
+          onClose: () => props.onClose?.(idx, item)
+        }),
+        TabContent({
+          style: () => `display: ${props.activeIndex() === idx ? "block" : "none"};`
+        }, typeof item.content === "function" ? item.content() : item.content)
+      ];
+    },
+    (item, idx) => item.id ?? idx
+  );
+};
--- a/components/discarted/textarea.js
+++ b/components/discarted/textarea.js
@@ -0,0 +1,4 @@
+// components/Textarea.js
+import { h } from "sigpro";
+
+export const Textarea = (props) => h("textarea", { ...props, class: `textarea ${props.class ?? ''}` });
--- a/components/discarted/textrotate.js
+++ b/components/discarted/textrotate.js
@@ -0,0 +1,12 @@
+// components/Textrotate.js
+import { h } from "sigpro";
+
+export const TextRotate = (props) => {
+  const wordsArray = Array.isArray(props.words) 
+    ? props.words 
+    : (typeof props.words === 'string' ? props.words.split(',') : []);
+    
+  return h("span", { ...props, class: `text-rotate ${props.class ?? ''}` }, [
+    h("span", {}, wordsArray.map(word => h("span", {}, word)))
+  ]);
+};
--- a/components/discarted/timeline.js
+++ b/components/discarted/timeline.js
@@ -0,0 +1,12 @@
+// components/Timeline.js
+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 h("ul", {
+    ...props,
+    class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${props.class ?? ''}`.trim()
+  }, children);
+};
--- a/components/discarted/toggle.js
+++ b/components/discarted/toggle.js
@@ -0,0 +1,4 @@
+// components/Toggle.js
+import { h } from "sigpro";
+
+export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: `toggle ${p.class ?? ''}` });
--- a/components/discarted/tooltip.js
+++ b/components/discarted/tooltip.js
@@ -0,0 +1,4 @@
+// components/Tooltip.js
+import { h } from "sigpro";
+
+export const Tooltip = (p, c) => h("div", { ...p, class: `tooltip ${p.class ?? ''}`, "data-tip": p.tip }, c);