MOdular

2026-05-05 22:44:16 +02:00
parent fb8c5eabd2
commit e7e3def5ed
13 changed files with 178 additions and 156 deletions
--- a/dist/sigpro-ui.editor.esm.js
+++ b/dist/sigpro-ui.editor.esm.js
@@ -1,20 +1,66 @@
 // src/editor.js
-import { $, isFunc, h } from "./sigpro.js";
+import { $ as $2, isFunc as isFunc2, h as h2 } from "./sigpro.js";

-// src/helpers.js
+// src/sigpro-ui.js
+import { $, watch, h, mount, when, each, isFunc } from "./sigpro.js";
 var val = (val2) => typeof val2 === "function" ? val2() : val2;
 var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
+var currentLocale = $("en");
+var c1 = (tag, cls2) => (p) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() });
+var c2 = (tag, cls2) => (p, c) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() }, c);
+var ct = (tag, cls2, type) => (p) => h(tag, { type, ...p, class: `${cls2} ${p?.class || ""}`.trim() });
+var Alert = c2("div", "alert");
+var AvatarGroup = c2("div", "avatar-group -space-x-6");
+var Badge = c2("span", "badge");
+var Breadcrumbs = c2("div", "breadcrumbs");
+var Button = c2("button", "btn");
+var Card = c2("div", "card");
+var CardTitle = c2("div", "card-title");
+var CardBody = c2("div", "card-body");
+var CardActions = c2("div", "card-actions");
+var Carousel = c2("div", "carousel");
+var CarouselItem = c2("div", "carousel-item");
+var Chat = c2("div", "chat");
+var ChatBubble = c2("div", "chat-bubble");
+var ChatFooter = c2("div", "chat-footer");
+var ChatHeader = c2("div", "chat-header");
+var Checkbox = ct("input", "checkbox", "checkbox");
+var Drawer = c2("div", "drawer");
+var DrawerContent = c2("div", "drawer-content");
+var DrawerSide = c2("div", "drawer-side");
+var Divider = c1("div", "divider");
+var Dropdown = c2("div", "dropdown");
+var Kbd = c2("kbd", "kbd");
+var List = c2("ul", "list");
+var Loading = c2("span", "loading loading-spinner");
+var Navbar = c2("div", "navbar");
+var Progress = c1("progress", "progress");
+var Radio = ct("input", "radio", "radio");
+var Range = ct("input", "range", "range");
+var Rating = c2("div", "rating");
+var Skeleton = c1("div", "skeleton");
+var SkeletonText = c1("span", "skeleton skeleton-text");
+var Stack = c2("div", "stack");
+var Stats = c2("div", "stats shadow");
+var Steps = c2("ul", "steps");
+var Swap = c2("label", "swap");
+var SwapOn = c2("div", "swap-on");
+var SwapOff = c2("div", "swap-off");
+var Table = c2("table", "table");
+var Textarea = c1("textarea", "textarea");
+var Timeline = c2("ul", "timeline");
+var Toggle = ct("input", "toggle", "checkbox");

 // src/editor.js
 var Editor = (p) => {
  const { value, class: extraClass } = p;
  let editorRef = null;
  let savedRange = null;
-  const isSource = $(false);
-  const source = $("");
-  const count = $(0);
-  const refreshTick = $(0);
-  const showEmojis = $(false);
+  const isSource = $2(false);
+  const source = $2("");
+  const count = $2(0);
+  const refreshTick = $2(0);
+  const showEmojis = $2(false);
  const emojis = ["\uD83D\uDE00", "\uD83D\uDE0A", "\uD83D\uDE09", "\uD83E\uDDD0", "\uD83D\uDE2E", "\uD83E\uDD14", "\uD83D\uDE05", "\uD83D\uDE02", "\uD83D\uDE0D", "\uD83D\uDE18", "\uD83E\uDD70", "\uD83D\uDC4D", "\uD83D\uDC4E", "\uD83D\uDC4C", "\uD83E\uDD1D", "\uD83E\uDD1E", "\uD83D\uDC4B", "\uD83D\uDC4F", "\uD83D\uDE4C", "\uD83D\uDE4F", "\uD83D\uDCAA", "☝️", "\uD83D\uDC47", "\uD83D\uDC48", "\uD83D\uDC49", "\uD83D\uDD95", "✅", "⚠️", "\uD83D\uDE80", "\uD83D\uDCE2", "✉️", "❤️"];
  const saveSelection = () => {
    const sel = window.getSelection();
@@ -37,7 +83,7 @@ var Editor = (p) => {
    if (!editorRef)
      return;
    const html = editorRef.innerHTML;
-    if (isFunc(value))
+    if (isFunc2(value))
      value(html);
    else
      p.onchange?.(html);
@@ -97,63 +143,63 @@ var Editor = (p) => {
      return false;
    }
  };
-  const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
-    h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
-      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("bold") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
-      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("italic") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
-      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("underline") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
-      h("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
-      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      h("button", {
+  const toolbar = h2("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
+    h2("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
+      h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("bold") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("bold") }, h2("span", { class: "icon-[lucide--bold]" })),
+      h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("italic") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("italic") }, h2("span", { class: "icon-[lucide--italic]" })),
+      h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("underline") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("underline") }, h2("span", { class: "icon-[lucide--underline]" })),
+      h2("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
+      h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
+      h2("button", {
        type: "button",
        class: "btn btn-ghost btn-xs",
        onclick: () => exec("justifyLeft")
-      }, h("span", { class: "icon-[lucide--align-left]" })),
-      h("button", {
+      }, h2("span", { class: "icon-[lucide--align-left]" })),
+      h2("button", {
        type: "button",
        class: "btn btn-ghost btn-xs",
        onclick: () => exec("justifyCenter")
-      }, h("span", { class: "icon-[lucide--align-center]" })),
-      h("button", {
+      }, h2("span", { class: "icon-[lucide--align-center]" })),
+      h2("button", {
        type: "button",
        class: "btn btn-ghost btn-xs",
        onclick: () => exec("justifyRight")
-      }, h("span", { class: "icon-[lucide--align-right]" })),
-      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h("span", { class: "icon-[lucide--indent-increase]" })),
-      h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("formatBlock", "BLOCKQUOTE") ? "btn-active" : ""}`, onclick: () => exec("formatBlock", queryState("formatBlock", "BLOCKQUOTE") ? "P" : "BLOCKQUOTE") }, h("span", { class: "icon-[lucide--quote]" })),
-      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
+      }, h2("span", { class: "icon-[lucide--align-right]" })),
+      h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h2("span", { class: "icon-[lucide--list]" })),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h2("span", { class: "icon-[lucide--list-ordered]" })),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h2("span", { class: "icon-[lucide--indent-decrease]" })),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h2("span", { class: "icon-[lucide--indent-increase]" })),
+      h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("formatBlock", "BLOCKQUOTE") ? "btn-active" : ""}`, onclick: () => exec("formatBlock", queryState("formatBlock", "BLOCKQUOTE") ? "P" : "BLOCKQUOTE") }, h2("span", { class: "icon-[lucide--quote]" })),
+      h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
        const url = window.prompt("URL:");
        if (url)
          exec("createLink", url);
-      } }, h("span", { class: "icon-[lucide--link]" })),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
-        const input = document.createElement("input");
-        input.type = "file";
-        input.onchange = (e) => handleUpload(e.target.files[0]);
-        input.click();
-      } }, h("span", { class: "icon-[lucide--paperclip]" })),
-      h("div", { class: "relative" }, [
-        h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => {
+      } }, h2("span", { class: "icon-[lucide--link]" })),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
+        const input2 = document.createElement("input");
+        input2.type = "file";
+        input2.onchange = (e) => handleUpload(e.target.files[0]);
+        input2.click();
+      } }, h2("span", { class: "icon-[lucide--paperclip]" })),
+      h2("div", { class: "relative" }, [
+        h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => {
          e.stopPropagation();
          saveSelection();
          showEmojis(!showEmojis());
-        } }, h("span", { class: "icon-[lucide--smile]" })),
-        h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map((emo) => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => {
+        } }, h2("span", { class: "icon-[lucide--smile]" })),
+        h2("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map((emo) => h2("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => {
          e.stopPropagation();
          exec("insertText", emo);
          showEmojis(false);
        } }, emo)))
      ]),
-      h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
-      h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" }))
+      h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h2("span", { class: "icon-[lucide--undo-2]" })),
+      h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h2("span", { class: "icon-[lucide--redo-2]" }))
    ]),
-    h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? "btn-active" : ""}`, onclick: () => {
+    h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? "btn-active" : ""}`, onclick: () => {
      if (!isSource())
        source(editorRef?.innerHTML || "");
      else if (editorRef) {
@@ -161,7 +207,7 @@ var Editor = (p) => {
        notify();
      }
      isSource(!isSource());
-    } }, h("span", { class: "icon-[lucide--code-2]" }))
+    } }, h2("span", { class: "icon-[lucide--code-2]" }))
  ]);
  if (typeof document !== "undefined" && !document.getElementById("editor-styles")) {
    const style = document.createElement("style");
@@ -175,10 +221,10 @@ var Editor = (p) => {
  `;
    document.head.appendChild(style);
  }
-  return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
+  return h2("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
    toolbar,
-    h("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
-      h("div", {
+    h2("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
+      h2("div", {
        ref: (el) => {
          if (!editorRef && el) {
            editorRef = el;
@@ -228,7 +274,7 @@ var Editor = (p) => {
          handleUpload(e.dataTransfer.files[0]);
        }
      }),
-      h("textarea", {
+      h2("textarea", {
        class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
        style: () => isSource() ? "" : "display:none",
        value: source,
@@ -240,8 +286,8 @@ var Editor = (p) => {
        }
      })
    ]),
-    h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
-      h("span", () => `${count()}`)
+    h2("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
+      h2("span", () => `${count()}`)
    ])
  ]);
 };
--- a/dist/sigpro-ui.editor.esm.min.js
+++ b/dist/sigpro-ui.editor.esm.min.js
--- a/dist/sigpro-ui.esm.js
+++ b/dist/sigpro-ui.esm.js
@@ -1,7 +1,5 @@
 // src/sigpro-ui.js
-import { $ as $2, watch, h, mount, when, each, isFunc } from "./sigpro.js";
-
-// src/helpers.js
+import { $, watch, h, mount, when, each, isFunc } from "./sigpro.js";
 var val = (val2) => typeof val2 === "function" ? val2() : val2;
 var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
 var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
@@ -12,8 +10,6 @@ var filterBy = (items, query, field = "label") => {
 };
 var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
 var hide = () => document.activeElement?.blur();
-
-// src/locale.js
 var currentLocale = $("en");
 var lang = {
  es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
@@ -24,8 +20,6 @@ var setLocale = (locale) => {
    currentLocale(locale);
 };
 var t = (t2) => () => lang[currentLocale()][t2] || t2;
-
-// src/sigpro-ui.js
 var c1 = (tag, cls2) => (p) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() });
 var c2 = (tag, cls2) => (p, c) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() }, c);
 var ct = (tag, cls2, type) => (p) => h(tag, { type, ...p, class: `${cls2} ${p?.class || ""}`.trim() });
@@ -98,8 +92,8 @@ var Accordion = (p) => {
  });
 };
 var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
-  const query = $2(val(value) || "");
-  const filtered = $2(() => filterBy(items, query()));
+  const query = $(val(value) || "");
+  const filtered = $(() => filterBy(items, query()));
  const pick = (item) => {
    const display = getBy(item);
    const actual = typeof item === "string" ? item : item.value;
@@ -118,10 +112,10 @@ var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) =
  ]);
 };
 var Calendar = (p) => {
-  const internalDate = $2(new Date);
-  const hoverDate = $2(null);
-  const startHour = $2(0);
-  const endHour = $2(0);
+  const internalDate = $(new Date);
+  const hoverDate = $(null);
+  const startHour = $(0);
+  const endHour = $(0);
  const now = new Date;
  const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
  const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -314,7 +308,7 @@ var ColorPalette = (p) => {
  }))));
 };
 var Datepicker = (p) => {
-  const displayValue = $2("");
+  const displayValue = $("");
  const rangeMode = () => val(p.range) === true;
  watch(() => {
    const v = val(p.value);
@@ -369,9 +363,9 @@ var Datepicker = (p) => {
  ]);
 };
 var Fileinput = (p) => {
-  const files = $2([]);
-  const drag = $2(false);
-  const error = $2(null);
+  const files = $([]);
+  const drag = $(false);
+  const error = $(null);
  const maxBytes = (p.max || 2) * 1024 * 1024;
  const process = (fileList) => {
    const arr = Array.from(fileList);
@@ -442,7 +436,7 @@ var Fileinput = (p) => {
 };
 var Input = (p) => {
  const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
-  const showPassword = $2(false);
+  const showPassword = $(false);
  const isPassword = p.type === "password";
  const pattern = rule ?? null;
  const inputType = () => isPassword ? val(showPassword) ? "text" : "password" : p.type || "search";
@@ -597,8 +591,8 @@ var Toast = (message, type = "alert-success", duration = 3500) => {
  container.appendChild(host);
  let closeFn, timer, enterTimer;
  const ToastComponent = () => {
-    const visible = $2(false);
-    const leaving = $2(false);
+    const visible = $(false);
+    const leaving = $(false);
    closeFn = () => {
      if (leaving())
        return;
@@ -638,8 +632,15 @@ var Toast = (message, type = "alert-success", duration = 3500) => {
  return closeFn;
 };
 export {
+  val,
  t,
  setLocale,
+  rand,
+  lang,
+  hide,
+  getBy,
+  filterBy,
+  cls,
  Tooltip,
  Toggle,
  Toast,
--- a/dist/sigpro-ui.esm.min.js
+++ b/dist/sigpro-ui.esm.min.js
--- a/dist/sigpro-ui.js
+++ b/dist/sigpro-ui.js
@@ -80,7 +80,16 @@ var spui = (() => {
    Timeline: () => Timeline,
    Toast: () => Toast,
    Toggle: () => Toggle,
-    Tooltip: () => Tooltip
+    Tooltip: () => Tooltip,
+    cls: () => cls,
+    filterBy: () => filterBy,
+    getBy: () => getBy,
+    hide: () => hide,
+    lang: () => lang,
+    rand: () => rand,
+    setLocale: () => setLocale,
+    t: () => t,
+    val: () => val
  });

  // src/sigpro.js
@@ -186,7 +195,7 @@ var spui = (() => {
      if (hasQueue && !isFlushing && batchDepth === 0) queueMicrotask(flush);
    }
  };
-  var $2 = (val2, key = null) => {
+  var $ = (val2, key = null) => {
    const subs = /* @__PURE__ */ new Set();
    if (isFunc(val2)) {
      let cache;
@@ -461,7 +470,7 @@ var spui = (() => {
  };
  var router = (routes) => {
    const getHash = () => window.location.hash.slice(1) || "/";
-    const path = $2(getHash());
+    const path = $(getHash());
    const handler = () => path(getHash());
    window.addEventListener("hashchange", handler);
    onUnmount(() => window.removeEventListener("hashchange", handler));
@@ -487,7 +496,7 @@ var spui = (() => {
    });
    return hook;
  };
-  router.params = $2({});
+  router.params = $({});
  router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
  router.back = () => window.history.back();
  router.path = () => window.location.hash.replace(/^#/, "") || "/";
@@ -506,7 +515,7 @@ var spui = (() => {
    });
  }

-  // src/helpers.js
+  // src/sigpro-ui.js
  var val = (val2) => typeof val2 === "function" ? val2() : val2;
  var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
  var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
@@ -517,13 +526,6 @@ var spui = (() => {
  };
  var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
  var hide = () => document.activeElement?.blur();
-
-  // src/locale.js
-  var locale_exports = {};
-  __export(locale_exports, {
-    setLocale: () => setLocale,
-    t: () => t
-  });
  var currentLocale = $("en");
  var lang = {
    es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
@@ -533,8 +535,6 @@ var spui = (() => {
    if (lang[locale]) currentLocale(locale);
  };
  var t = (t2) => () => lang[currentLocale()][t2] || t2;
-
-  // src/sigpro-ui.js
  var c1 = (tag, cls2) => (p) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() });
  var c2 = (tag, cls2) => (p, c) => h(tag, { ...p, class: `${cls2} ${p?.class || ""}`.trim() }, c);
  var ct = (tag, cls2, type) => (p) => h(tag, { type, ...p, class: `${cls2} ${p?.class || ""}`.trim() });
@@ -607,8 +607,8 @@ var spui = (() => {
    });
  };
  var Autocomplete = ({ items, value, onselect, placeholder = "...", ...props }) => {
-    const query = $2(val(value) || "");
-    const filtered = $2(() => filterBy(items, query()));
+    const query = $(val(value) || "");
+    const filtered = $(() => filterBy(items, query()));
    const pick = (item) => {
      const display = getBy(item);
      const actual = typeof item === "string" ? item : item.value;
@@ -629,10 +629,10 @@ var spui = (() => {
    ]);
  };
  var Calendar = (p) => {
-    const internalDate = $2(/* @__PURE__ */ new Date());
-    const hoverDate = $2(null);
-    const startHour = $2(0);
-    const endHour = $2(0);
+    const internalDate = $(/* @__PURE__ */ new Date());
+    const hoverDate = $(null);
+    const startHour = $(0);
+    const endHour = $(0);
    const now = /* @__PURE__ */ new Date();
    const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
    const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -833,7 +833,7 @@ var spui = (() => {
    ));
  };
  var Datepicker = (p) => {
-    const displayValue = $2("");
+    const displayValue = $("");
    const rangeMode = () => val(p.range) === true;
    watch(() => {
      const v = val(p.value);
@@ -885,9 +885,9 @@ var spui = (() => {
    ]);
  };
  var Fileinput = (p) => {
-    const files = $2([]);
-    const drag = $2(false);
-    const error = $2(null);
+    const files = $([]);
+    const drag = $(false);
+    const error = $(null);
    const maxBytes = (p.max || 2) * 1024 * 1024;
    const process = (fileList) => {
      const arr = Array.from(fileList);
@@ -964,7 +964,7 @@ var spui = (() => {
  };
  var Input = (p) => {
    const { label: label2, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
-    const showPassword = $2(false);
+    const showPassword = $(false);
    const isPassword = p.type === "password";
    const pattern = rule ?? null;
    const inputType = () => isPassword ? val(showPassword) ? "text" : "password" : p.type || "search";
@@ -1126,8 +1126,8 @@ var spui = (() => {
    container.appendChild(host);
    let closeFn, timer, enterTimer;
    const ToastComponent = () => {
-      const visible = $2(false);
-      const leaving = $2(false);
+      const visible = $(false);
+      const leaving = $(false);
      closeFn = () => {
        if (leaving()) return;
        clearTimeout(timer);
@@ -1171,11 +1171,11 @@ var spui = (() => {
    const { value, class: extraClass } = p;
    let editorRef = null;
    let savedRange = null;
-    const isSource = $2(false);
-    const source = $2("");
-    const count = $2(0);
-    const refreshTick = $2(0);
-    const showEmojis = $2(false);
+    const isSource = $(false);
+    const source = $("");
+    const count = $(0);
+    const refreshTick = $(0);
+    const showEmojis = $(false);
    const emojis = ["\u{1F600}", "\u{1F60A}", "\u{1F609}", "\u{1F9D0}", "\u{1F62E}", "\u{1F914}", "\u{1F605}", "\u{1F602}", "\u{1F60D}", "\u{1F618}", "\u{1F970}", "\u{1F44D}", "\u{1F44E}", "\u{1F44C}", "\u{1F91D}", "\u{1F91E}", "\u{1F44B}", "\u{1F44F}", "\u{1F64C}", "\u{1F64F}", "\u{1F4AA}", "\u261D\uFE0F", "\u{1F447}", "\u{1F448}", "\u{1F449}", "\u{1F595}", "\u2705", "\u26A0\uFE0F", "\u{1F680}", "\u{1F4E2}", "\u2709\uFE0F", "\u2764\uFE0F"];
    const saveSelection = () => {
      const sel = window.getSelection();
@@ -1396,6 +1396,6 @@ var spui = (() => {

  // src/build_umd.js
  if (typeof window !== "undefined") {
-    Object.assign(window, sigpro_ui_exports, editor_exports, locale_exports);
+    Object.assign(window, sigpro_ui_exports, editor_exports);
  }
 })();
--- a/dist/sigpro-ui.min.js
+++ b/dist/sigpro-ui.min.js
--- a/docs/sigpro-ui.min.js
+++ b/docs/sigpro-ui.min.js
--- a/src/build_esm.js
+++ b/src/build_esm.js
@@ -1,2 +1 @@
 export * from './sigpro-ui.js';
-export * from './locale.js';
--- a/src/build_umd.js
+++ b/src/build_umd.js
@@ -1,7 +1,6 @@
 import * as All from './sigpro-ui.js';
 import * as Edt from './editor.js';
-import * as Loc from './locale.js';

 if (typeof window !== "undefined") {
-    Object.assign(window, All, Edt, Loc)
+    Object.assign(window, All, Edt)
 }
--- a/src/editor.js
+++ b/src/editor.js
@@ -1,5 +1,5 @@
 import { $, isFunc, h } from "./sigpro.js"
-import { val, cls } from "./helpers.js"
+import { val, cls } from "./sigpro-ui.js"

 export const Editor = (p) => {
  const { value, class: extraClass } = p
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -1,11 +0,0 @@
-// Helpers
-export const val = val => typeof val === "function" ? val() : val;
-export const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
-export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
-export const filterBy = (items, query, field = 'label') => {
-  const q = String(val(query) || '').toLowerCase();
-  const list = (val(items) || []).map(i => typeof i === 'object' ? i : { label: i, value: i });
-  return !q ? list : list.filter(item => String(item[field] || '').toLowerCase().includes(q));
-};
-export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
-export const hide = () => document.activeElement?.blur()
--- a/src/locale.js
+++ b/src/locale.js
@@ -1,7 +0,0 @@
-const currentLocale = $("en");
-const lang = {
-    es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
-    en: { uploadFiles: "Drag and drop or click to select" }
-};
-export const setLocale = (locale) => { if (lang[locale]) currentLocale(locale) }
-export const t = t => () => lang[currentLocale()][t] || t;
--- a/src/sigpro-ui.js
+++ b/src/sigpro-ui.js
@@ -1,13 +1,24 @@
 import { $, watch, h, mount, when, each, isFunc } from "./sigpro.js"
-import { val, getBy, cls, filterBy, rand, hide } from "./helpers.js"
-import { t } from "./locale.js"
-
-// CreateFunctions
+export const val = val => typeof val === "function" ? val() : val;
+export const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
+export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
+export const filterBy = (items, query, field = 'label') => {
+  const q = String(val(query) || '').toLowerCase();
+  const list = (val(items) || []).map(i => typeof i === 'object' ? i : { label: i, value: i });
+  return !q ? list : list.filter(item => String(item[field] || '').toLowerCase().includes(q));
+};
+export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
+export const hide = () => document.activeElement?.blur()
+const currentLocale = $("en");
+export const lang = {
+    es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
+    en: { uploadFiles: "Drag and drop or click to select" }
+};
+export const setLocale = (locale) => { if (lang[locale]) currentLocale(locale) }
+export const t = t => () => lang[currentLocale()][t] || t;
 const c1 = (tag, cls) => (p) => h(tag, { ...p, class: `${cls} ${p?.class || ''}`.trim() })
 const c2 = (tag, cls) => (p, c) => h(tag, { ...p, class: `${cls} ${p?.class || ''}`.trim() }, c)
 const ct = (tag, cls, type) => (p) => h(tag, { type, ...p, class: `${cls} ${p?.class || ''}`.trim() })
-
-// Components
 export const Alert = c2("div", "alert")
 export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c))
 export const AvatarGroup = c2("div", "avatar-group -space-x-6")
@@ -66,7 +77,6 @@ export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate',
 export const Timeline = c2("ul", "timeline")
 export const Toggle = ct("input", "toggle", "checkbox")
 export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c)
-
 export const Accordion = (p) => {
    const name = p.name || rand('acc')
    return each(p.items, (it) => {
@@ -77,7 +87,6 @@ export const Accordion = (p) => {
        ]);
    });
 };
-
 export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
    const query = $(val(value) || '')
    const filtered = $(() => filterBy(items, query()))
@@ -99,7 +108,6 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
        )
    ])
 };
-
 export const Calendar = (p) => {
    const internalDate = $(new Date())
    const hoverDate = $(null)
@@ -190,7 +198,6 @@ export const Calendar = (p) => {
        ) : null
    ])
 };
-
 export const Colorpicker = (p) => {
    const current = () => val(p.value) || '#000000'
    return Dropdown({}, [
@@ -203,7 +210,6 @@ export const Colorpicker = (p) => {
        )
    ])
 };
-
 export const ColorPalette = (p) => {
    const current = () => val(p.value) || '#000000'
    const palette = [
@@ -235,7 +241,6 @@ export const ColorPalette = (p) => {
        }))
    ))
 };
-
 export const Datepicker = (p) => {
    const displayValue = $("")
    const rangeMode = () => val(p.range) === true
@@ -290,7 +295,6 @@ export const Datepicker = (p) => {
        )
    ])
 };
-
 export const Fileinput = (p) => {
    const files = $([])
    const drag = $(false)
@@ -355,7 +359,6 @@ export const Fileinput = (p) => {
        )
    ])
 };
-
 export const Input = (p) => {
    const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
    const showPassword = $(false);
@@ -379,7 +382,6 @@ export const Input = (p) => {
        hint ? h('div', { class: "validator-hint" }, hint) : null,
    ]);
 };
-
 export const Menu = (p) => {
    if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children)
    const { items } = p
@@ -396,7 +398,6 @@ export const Menu = (p) => {
        each(() => val(items) || [], render)
    )
 };
-
 export const Modal = (p) => {
    let dialogRef = null;
    watch(() => { const isOpen = val(p.open); if (!dialogRef) return; isOpen ? dialogRef.showModal() : dialogRef.hide(); });
@@ -414,8 +415,6 @@ export const Modal = (p) => {
        ])
    ]);
 };
-
-
 export const Select = (p, c) => {
    if (c !== undefined) return h('select', { class: cls('select', p.class), ...p }, c)
    const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p
@@ -444,13 +443,11 @@ export const Select = (p, c) => {
        hint ? h('div', { class: 'validator-hint' }, hint) : null
    ])
 };
-
 export const Stat = (p) => h('div', { ...p, class: cls('stat', p.class) }, [
    p.title ? h('div', { class: 'stat-title' }, p.title) : null,
    p.value ? h('div', { class: 'stat-value' }, p.value) : null,
    p.desc ? h('div', { class: 'stat-desc' }, p.desc) : null
 ]);
-
 export const TableItems = ({ items, columns = [], header = true }) => {
    const head = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null
    const body = h('tbody', {}, () => {
@@ -459,7 +456,6 @@ export const TableItems = ({ items, columns = [], header = true }) => {
    })
    return [head, body].filter(Boolean)
 };
-
 export const Tabs = (p, c) => {
    if (!p.items) {
        const { class: className, ...rest } = p
@@ -495,7 +491,6 @@ export const Tabs = (p, c) => {
        })
    })
 };
-
 export const Toast = (message, type = "alert-success", duration = 3500) => {
    let container = document.getElementById("sigpro-toast-container");
    if (!container) {