sigpro-ui 1.0.6

package/src/components/Radio.js

@@ -0,0 +1,25 @@
+import { $html } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** RADIO */
+export const Radio = (props) => {
+  const { label, tooltip, value, ...rest } = props;
+
+  const radioEl = $html("input", {
+    ...rest,
+    type: "radio",
+    class: joinClass("radio", props.class),
+    checked: () => val(value) === props.value,
+    disabled: () => val(props.disabled),
+    onclick: () => typeof value === "function" && value(props.value),
+  });
+
+  if (!label && !tooltip) return radioEl;
+
+  const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
+    radioEl,
+    label ? $html("span", { class: "label-text" }, label) : null,
+  ]);
+
+  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+};

package/src/components/Range.js

@@ -0,0 +1,24 @@
+import { $html } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** RANGE */
+export const Range = (props) => {
+  const { label, tooltip, value, ...rest } = props;
+
+  const rangeEl = $html("input", {
+    ...rest,
+    type: "range",
+    class: joinClass("range", props.class),
+    value: value,
+    disabled: () => val(props.disabled)
+  });
+
+  if (!label && !tooltip) return rangeEl;
+
+  const layout = $html("div", { class: "flex flex-col gap-2" }, [
+    label ? $html("span", { class: "label-text" }, label) : null, 
+    rangeEl
+  ]);
+
+  return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
+};

package/src/components/Rating.js

@@ -0,0 +1,34 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+
+/** RATING */
+export const Rating = (props) => {
+  const { value, count = 5, mask = "mask-star", readonly = false, ...rest } = props;
+  
+  // Generamos un ID único para el grupo de radio buttons
+  const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: () => `rating ${val(readonly) ? "pointer-events-none" : ""} ${props.class || ""}`,
+    },
+    Array.from({ length: val(count) }, (_, i) => {
+      const starValue = i + 1;
+
+      return $html("input", {
+        type: "radio",
+        name: ratingGroup,
+        class: `mask ${mask}`,
+        "aria-label": `${starValue} star`,
+        checked: () => Math.round(val(value)) === starValue,
+        onchange: () => {
+          if (!val(readonly) && typeof value === "function") {
+            value(starValue);
+          }
+        },
+      });
+    })
+  );
+};

package/src/components/Select.js

@@ -0,0 +1,36 @@
+import { $html, $for } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** SELECT */
+export const Select = (props) => {
+  const { label, options, value, ...rest } = props;
+
+  const selectEl = $html(
+    "select",
+    {
+      ...rest,
+      class: joinClass("select select-bordered w-full", props.class),
+      value: value
+    },
+    $for(
+      () => val(options) || [],
+      (opt) =>
+        $html(
+          "option",
+          {
+            value: opt.value,
+            $selected: () => String(val(value)) === String(opt.value),
+          },
+          opt.label,
+        ),
+      (opt) => opt.value,
+    ),
+  );
+
+  if (!label) return selectEl;
+
+  return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
+    $html("span", {}, label), 
+    selectEl
+  ]);
+};

package/src/components/Stack.js

@@ -0,0 +1,6 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** STACK */
+export const Stack = (props, children) => 
+  $html("div", { ...props, class: joinClass("stack", props.class) }, children);

package/src/components/Stat.js

@@ -0,0 +1,11 @@
+import { $html } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** STAT */
+export const Stat = (props) =>
+  $html("div", { ...props, class: joinClass("stat", props.class) }, [
+    props.icon && $html("div", { class: "stat-figure text-secondary" }, props.icon),
+    props.label && $html("div", { class: "stat-title" }, props.label),
+    $html("div", { class: "stat-value" }, () => val(props.value) ?? props.value),
+    props.desc && $html("div", { class: "stat-desc" }, props.desc),
+  ]);

package/src/components/Swap.js

@@ -0,0 +1,13 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** SWAP */
+export const Swap = (props) =>
+  $html("label", { class: joinClass("swap", props.class) }, [
+    $html("input", {
+      type: "checkbox",
+      checked: props.value
+    }),
+    $html("div", { class: "swap-on" }, props.on),
+    $html("div", { class: "swap-off" }, props.off),
+  ]);

package/src/components/Table.js

@@ -0,0 +1,60 @@
+import { $html, $for, $if } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+import { tt } from "../core/i18n.js";
+
+/** TABLE */
+export const Table = (props) => {
+  const { 
+    items = [], 
+    columns = [], 
+    keyFn, 
+    zebra = false, 
+    pinRows = false, 
+    empty = tt("nodata")(),
+    ...rest 
+  } = props;
+
+  const tableClass = () => joinClass(
+    "table", 
+    `${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${props.class || ""}`
+  );
+
+  return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
+    $html("table", { ...rest, class: tableClass }, [
+      $html("thead", {}, [
+        $html("tr", {}, 
+          columns.map(col => $html("th", { class: col.class || "" }, col.label))
+        )
+      ]),
+      $html("tbody", {}, [
+        $for(items, (item, index) => {
+          return $html("tr", { class: "hover" }, 
+            columns.map(col => {
+              const cellContent = () => {
+                if (col.render) return col.render(item, index);
+                const value = item[col.key];
+                return val(value);
+              };
+              return $html("td", { class: col.class || "" }, [cellContent]);
+            })
+          );
+        }, keyFn || ((item, idx) => item.id || idx)),
+        
+        $if(() => val(items).length === 0, () => 
+          $html("tr", {}, [
+            $html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
+              val(empty)
+            ])
+          ])
+        )
+      ]),
+      $if(() => columns.some(c => c.footer), () => 
+        $html("tfoot", {}, [
+          $html("tr", {}, 
+            columns.map(col => $html("th", {}, col.footer || ""))
+          )
+        ])
+      )
+    ])
+  ]);
+};

package/src/components/Tabs.js

@@ -0,0 +1,46 @@
+import { $html, $for } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** TABS */
+export const Tabs = (props) => {
+  const { items, ...rest } = props;
+  const itemsSignal = typeof items === "function" ? items : () => items || [];
+
+  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
+    $html(
+      "div",
+      {
+        role: "tablist",
+        class: joinClass("tabs tabs-box", props.class),
+      },
+      $for(
+        itemsSignal,
+        (it) =>
+          $html(
+            "a",
+            {
+              role: "tab",
+              class: () => joinClass(
+                "tab", 
+                val(it.active) && "tab-active", 
+                val(it.disabled) && "tab-disabled", 
+                it.tip && "tooltip"
+              ),
+              "data-tip": it.tip,
+              onclick: (e) => !val(it.disabled) && it.onclick?.(e),
+            },
+            it.label,
+          ),
+        (t) => t.label,
+      ),
+    ),
+    () => {
+      const active = itemsSignal().find((it) => val(it.active));
+      if (!active) return null;
+      const content = val(active.content);
+      return $html("div", { class: "p-4" }, [
+        typeof content === "function" ? content() : content
+      ]);
+    },
+  ]);
+};

package/src/components/Timeline.js

@@ -0,0 +1,52 @@
+import { $html, $for } from "sigpro";
+import { val } from "../core/utils.js";
+import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+
+/** TIMELINE */
+export const Timeline = (props) => {
+  const { items = [], vertical = true, compact = false, ...rest } = props;
+
+  const icons = {
+    info: iconInfo,
+    success: iconSuccess,
+    warning: iconWarning,
+    error: iconError,
+  };
+
+  return $html(
+    "ul",
+    {
+      ...rest,
+      class: () =>
+        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
+          val(compact) ? "timeline-compact" : ""
+        } ${props.class || ""}`,
+    },
+    [
+      $for(
+        items,
+        (item, i) => {
+          const isFirst = i === 0;
+          const isLast = i === val(items).length - 1;
+          const itemType = item.type || "success";
+          const renderSlot = (content) => (typeof content === "function" ? content() : content);
+
+          return $html("li", { class: "flex-1" }, [
+            !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
+            $html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
+            $html("div", { class: "timeline-middle" }, [
+              $html("img", {
+                src: icons[itemType] || item.icon || icons.success,
+                class: "w-4 h-4 object-contain mx-1",
+                alt: itemType,
+              }),
+            ]),
+            $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
+            !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
+          ]);
+        },
+        (item, i) => item.id || i,
+      ),
+    ],
+  );
+};

package/src/components/Toast.js

@@ -0,0 +1,63 @@
+import { $html, $mount } from "sigpro";
+import { Button } from "./Button.js";
+
+/** TOAST (Imperative Function) */
+export const Toast = (message, type = "alert-success", duration = 3500) => {
+  let container = document.getElementById("sigpro-toast-container");
+  
+  // Crear el contenedor global si no existe
+  if (!container) {
+    container = $html("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 = $html("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();
+        // Limpiar el contenedor si ya no hay más toasts
+        if (!container.hasChildNodes()) container.remove();
+      }, 300);
+    } else {
+      instance.destroy();
+      toastHost.remove();
+    }
+  };
+
+  const ToastComponent = () => {
+    const el = $html(
+      "div",
+      {
+        class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
+      },
+      [
+        $html("span", {}, [typeof message === "function" ? message() : message]), 
+        Button({ class: "btn-xs btn-circle btn-ghost", onclick: close }, "✕")
+      ],
+    );
+
+    // Animación de entrada
+    requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
+    return el;
+  };
+
+  const instance = $mount(ToastComponent, toastHost);
+
+  if (duration > 0) {
+    timeoutId = setTimeout(close, duration);
+  }
+
+  return close;
+};

package/src/components/Tooltip.js

@@ -0,0 +1,6 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** TOOLTIP */
+export const Tooltip = (props, children) =>
+  $html("div", { ...props, class: joinClass("tooltip", props.class), "data-tip": props.tip }, children);

package/src/components/index.js

@@ -0,0 +1,110 @@
+import * as AccordionModule from './Accordion.js';
+import * as AlertModule from './Alert.js';
+import * as AutocompleteModule from './Autocomplete.js';
+import * as BadgeModule from './Badge.js';
+import * as ButtonModule from './Button.js';
+import * as CheckboxModule from './Checkbox.js';
+import * as ColorpickerModule from './Colorpicker.js';
+import * as DatepickerModule from './Datepicker.js';
+import * as DrawerModule from './Drawer.js';
+import * as DropdownModule from './Dropdown.js';
+import * as FabModule from './Fab.js';
+import * as FieldsetModule from './Fieldset.js';
+import * as FileinputModule from './Fileinput.js';
+import * as IndicatorModule from './Indicator.js';
+import * as InputModule from './Input.js';
+import * as ListModule from './List.js';
+import * as LoadingModule from './Loading.js';
+import * as MenuModule from './Menu.js';
+import * as ModalModule from './Modal.js';
+import * as NavbarModule from './Navbar.js';
+import * as RadioModule from './Radio.js';
+import * as RangeModule from './Range.js';
+import * as RatingModule from './Rating.js';
+import * as SelectModule from './Select.js';
+import * as StackModule from './Stack.js';
+import * as StatModule from './Stat.js';
+import * as SwapModule from './Swap.js';
+import * as TableModule from './Table.js';
+import * as TabsModule from './Tabs.js';
+import * as TimelineModule from './Timeline.js';
+import * as ToastModule from './Toast.js';
+import * as TooltipModule from './Tooltip.js';
+
+export * from './Accordion.js';
+export * from './Alert.js';
+export * from './Autocomplete.js';
+export * from './Badge.js';
+export * from './Button.js';
+export * from './Checkbox.js';
+export * from './Colorpicker.js';
+export * from './Datepicker.js';
+export * from './Drawer.js';
+export * from './Dropdown.js';
+export * from "./Fab.js";
+export * from './Fieldset.js';
+export * from './Fileinput.js';
+export * from './Indicator.js';
+export * from './Input.js';
+export * from './List.js';
+export * from './Loading.js';
+export * from './Menu.js';
+export * from './Modal.js';
+export * from './Navbar.js';
+export * from './Radio.js';
+export * from './Range.js';
+export * from './Rating.js';
+export * from './Select.js';
+export * from './Stack.js';
+export * from './Stat.js';
+export * from './Swap.js';
+export * from './Table.js';
+export * from './Tabs.js';
+export * from './Timeline.js';
+export * from './Toast.js';
+export * from './Tooltip.js';
+
+const Components = {
+  ...AccordionModule,
+  ...AlertModule,
+  ...AutocompleteModule,
+  ...BadgeModule,
+  ...ButtonModule,
+  ...CheckboxModule,
+  ...ColorpickerModule,
+  ...DatepickerModule,
+  ...DrawerModule,
+  ...DropdownModule,
+  ...FabModule,
+  ...FieldsetModule,
+  ...FileinputModule,
+  ...IndicatorModule,
+  ...InputModule,
+  ...ListModule,
+  ...LoadingModule,
+  ...MenuModule,
+  ...ModalModule,
+  ...NavbarModule,
+  ...RadioModule,
+  ...RangeModule,
+  ...RatingModule,
+  ...SelectModule,
+  ...StackModule,
+  ...StatModule,
+  ...SwapModule,
+  ...TableModule,
+  ...TabsModule,
+  ...TimelineModule,
+  ...ToastModule,
+  ...TooltipModule
+};
+
+export default {
+  ...Components,
+  install: (target = window) => {
+    Object.entries(Components).forEach(([name, component]) => {
+      target[name] = component;
+    });
+    console.log("🚀 SigproUI");
+  }
+};

package/src/core/i18n.js

@@ -0,0 +1,26 @@
+import { $ } from "sigpro";
+
+export const i18n = {
+  es: {
+    close: "Cerrar",
+    confirm: "Confirmar",
+    cancel: "Cancelar",
+    search: "Buscar...",
+    loading: "Cargando...",
+    nodata: "Sin datos"
+  },
+  en: {
+    close: "Close",
+    confirm: "Confirm",
+    cancel: "Cancel",
+    search: "Search...",
+    loading: "Loading...",
+    nodata: "No data"
+  }
+};
+
+export const currentLocale = $("es");
+
+export const Locale = t => currentLocale(t);
+
+export const tt = t => () => i18n[currentLocale()][t] || t;

package/src/core/icons.js

@@ -0,0 +1,17 @@
+export const iconShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADjSURBVDiN3dJNSgNBEAXgz4DZeAAVJ9tko2St3kaIFxAVt4KZeAD1GKKi7vQSydI/yHgALxAXU02GxniAFBR0v1ev+3V1sZSxjxtM8BM5wTX2/hNu4gFvOMI21iJ3cIwP3GMjF/dQ4RyraOMS34GPAmvjIrBeEnfwjoPGgSM8ooh8QtngB6Ep4BWnmaMqkY1LqqzmDC8tzNDK3/RHzLL9SloUYWfQIMuw3Yl8xrDBH6qbvZWALqbqBqVmlWF7GuKEDwPr5hbXcYdPnKBv/o39wL5wG7ULY1c9NGPzQRrjKrhli1/02zEjWyWMBwAAAABJRU5ErkJggg==";
+export const iconHide = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAEDSURBVDiN1dK/K8VhFAbwD+VLGSxKcu9guSQ/Zils/gNkuaX4BxRZDTdklYU/QAaDlEVGGwu2Kz/uVbKJzWDwfuv1+jHz1Km3c85znuf0Hv4jxnD2W8MItnCJ5xAX2MQcHsOQL+jEAapYQD9aQwxiDy+B3JKSe1DHCpqQYQ0PeMJOpDyAmyAAirjGbDRwFYcoYCZSzjGP+8B1gqXEUT2QxyPlqaRnGceNeENzUswwil1MBocbSU9DCAXUUI6K25HtIo5QSVaooitP9OEO65iIbE+HXSvBVRbeNZQSR9pxGil3o83HNw5hEbfYR0dKFki5ci+u8OrzIQ1/R8xx7ocL+9t4B0HPOVXjoptxAAAAAElFTkSuQmCC";
+export const iconClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABcSURBVDiN3dIxDoAwCIXhL563g3bSm+hlq4O6GFNbO+k/EV54QIDfsSBk9IA5ZxCQEG+0eGi5BqDHivEhV2xSXXwy2EdOR3xLV+ta0/26wvSm+KTYpPmMzY/0QTZeZR2f+FxhRQAAAABJRU5ErkJggg==";
+export const iconCalendar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACLSURBVDiN7dO9CQJBFEXhb38K0FwQrMNEVpuwB0NjrcYabECsQk0sQ1mTF4zIjrgmBh54MMx998AEwzOrmC5e8gJjbDHCJO7PHYI0v2JT4Ig9DljGwq5DkOZTLOCOMoIhBpknpHmFWx3ldaaUo6oTc2/ab7rl+508f8GvCC5oenTn4tM1cWg/nBNmD4fBH/Kfvt2TAAAAAElFTkSuQmCC";
+export const iconLock = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAWQAAAFkBqp2phgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACQSURBVDiN7dKxDcJQDATQJ0YgXQQ1bAgDEIZBETPQwjakIjRQ8CMSyR8SiZKTrvHZd/r+JsYSNZrEI1ZR4ywzfElcJ55xwiITOECNTVDf4jDGoEEZ1Etcxxg8pmjRDiahb7BH20uKKPVUkVmL+YjQArdI+PT2bO9Pd/A34O71Rd9QeN/LAFUSckfUscWuG3oCgP8nrDH6T5AAAAAASUVORK5CYII=";
+export const iconAbc = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADFSURBVDiN7dCxSoIBFAXgr1BbgmgSB5ubxKAHaAkcgnBpySVaDET3WhzcpQfoHZojawgX0ZZcfAWDSDdBoeUKP/8ojZ7tnnPv4dzDFv+KZzwl5jf84B354C4wwjdeUV4vl7DCEsXgxmhigDpOMcMVjoKr7cTyI/ZxiE90wmCB4zi+RRatZOxd7OEavxHtBmvjIV5wH2a59N8ZXIZQisMCzkL/wgGq6EYffXzgHHNo4y5h+oBGlLjEBJVUiVP0cJJOtMUG+APtfyYzbH7eVgAAAABJRU5ErkJggg==";
+export const icon123 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAB2AAAAdgFOeyYIAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAMxJREFUOI3t0bFKwlEUBvBfmmBEr1APIDZJ9AJJQyAIvkGP0C4uQruza+DUmuIc9AC9gBG4Nmpkw/8IB3Vw1w8u95zvnvPde77LEeUUV9HAF67QRA2nmMf5A+o4x3cWOsMYy8j7WMX6jaYbLBL/mAWe8RcHm1ihs8G94gVKQQzwlAouMcQo8p/Y28HdYpYFZmsi0MVdxD1MdrxsC500wijdvgtbI1AYtDbxMwkuFAZmE1uYwkkSqOIaHyHcxEU0vUXNPSqKr37fZ6xDwD9DPS0OyHjQHQAAAABJRU5ErkJggg==";
+export const iconMail = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAC4SURBVDiNxdIxagJRFIXhLzLFBNJYaJslSEylWOhq3IorMGQ16SyjYCFiZWU5pTaDFvOUyTAZ8RHID69555577oXLf/OEGaY4R3g/4IhORHg3eOXYYvSAeRQ8OWQYYoNPvDQYnxUr7zBB1grCAv3QbIlxjXmAb7Txhq+rkFUKq9NUU8vcJiizwDtOWGEdmvTKqT+61H0GXsP7jSxpEGF/R1e3wkO0FBeVRnhTSBTneBB3yvOI4D/mAnvrIwKM5s4AAAAAAElFTkSuQmCC";
+export const iconInfo = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASVJREFUOI190r0uhFEQBuBnVxaF2PUTCkFchV0SV6BQi0rEbShFlCqNktJP0Iqf3i3YVSlXVEQozojP8e2+ySSTed+ZMzNnKnpjCFPhv+C9j/YPlnCBV3TCujhHq19iFftoYxOjBa4esTb2QvsP+7jFWJ9HxnEXRf5gGU9Z8gKucBl+sUgHTahE8AJnOCoIT/AcmhmsF7gtrGINBqWFFWcmLXMUhzjIuEbk1GA+2i/DNh4wUsK1MVfFV2GUHJO4xlsPHr8j1Eu44bAcDek2agP4lDZaxWMm3MEKbrL4hjT/8U+gJc00nglnw4qYkL5xMW9rTzqSvEiefI/dMrIaRTrSPzcKXCNinUguPeUfNKWj6kqH9Bz+aVnbvb6PtKTp8F/wUSb6Bu5YN5n7ff0kAAAAAElFTkSuQmCC";
+export const iconSuccess = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAQtJREFUOI2F0jFOAlEQBuAPImoFqyTa6TEEbfUihruYDYfwCAg3UDsTY20na0VjgqUWWuxgHsuy/skk82bmn/fPm9eyHXs4Cn+Br4baNZxjhk8UYUtMMWwitjHGHNfoJrlexObIo3YDY9zjoOGSQzxEkzVc4O0fctqkwCANzkJiE9LmI9ytDrvKB+tWGQnylIAsOB04VcrfdluO55CeYo6THfygVUne4jX8S1zho1LTDu7fCL2KxCe8oF8zUqb8G51VYGrzEffD6jDCJA0MY6bqnHXoK9d4Vk3kyk/S1KSPR9zUJdvRpAiJWZLLIlYEufYrrzBQ7nyJ97ClcuYN2dX1pejgOPwFvuuKfgHXiDR+HL1j1AAAAABJRU5ErkJggg==";
+export const iconError = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARZJREFUOI2V0j1KQ1EQBeDPp4lWRiMoKVyAK9AoiLgJGytxD9oJNhKyDyvBnw2IugC3YGKVRk1KRbR48yC5vjzwwIHL3DPnzp2ZGdMxj9U4D/BZoZ3ANu4wQj84xC3aVYkZuujhCItjd42I9dAJ7R908YDlikeaeAyTCezgpST5IJia9LFVlA0nOMd7It4IjuMttKeFQR17uKooPcUV9lHL0ArX0T8MPqLa1hx+MDNFWDX7LHLV4/VGiWghmGJJvhu1WXzLO5rhORGeYRf3SfwQNVwWgbZ8SZqJcD04jhX5GDfTsjryJUlN0uQnXJRdZmHSx7H8nwWWItaP5NJVLrCFG3mTXoNDXJeVPW185E1ai/MAX2WiX9S3NSPYbj+uAAAAAElFTkSuQmCC";
+export const iconWarning = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAnXAAAJ1wGxbhe3AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAARJJREFUOI2l0r8uRFEQBvAfu9glwUYiUaxHUEl0VDpKeq+wpZBINAqFRHgTKg0tCSqVhmKDEM1u/Esodm725rq7iC+ZzMnM982ZmXP4JwpdchWsYBrXeMkj9XQQV3GEi+BMYR63v+mqiDPUUrEaTiP3I1ZxEOcySnE+jFxXVPEQPimWiCYzOdCbKbCFPe1Z+8PgBvvBycVMCIdSsY2wBEPBmcnrYBtraKRib2EJGljHjswLLuI8Z6SS9hLTl15iIR08wZLv2AzLYjk0YATP8n9lVWbrgUJohosYxCdG8Zghdvp5ldCUi6hrPd0VjvGEVzTxEYLkogGMYQ67uEtvcgKzGA8y9IV/D9/Evdb89Q7d/Q1fB8U0mpUmzV0AAAAASUVORK5CYII=";
+export const iconLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABfSURBVDiNY2AY8oCZSHWxDAwMEgwMDHfJsaSAgYHhH9QQsjT/Z2BgKKe75gQGiLMLCSlkwiHOSI6t6ADmhYoBN6SIARIeidgkiUlIxxkYGB4xMDB8YmBguE6JSwYpAACvLRHTKwPjZgAAAABJRU5ErkJggg==";
+export const iconRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABNSURBVDiN3dAxCoAwFATRh3fU2oAHiDbi5Y1F2jT+gKLbzyy7/DYjUo8g4cTWI8koOF6XrOqc5ifDDVGJthfsj8OLujtHYJgwR+GP5QKMxA9/SolDQgAAAABJRU5ErkJggg==";
+export const iconLLeft = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABlSURBVDiN3ZLBDUBAEEUfmtCchA5woUMlOO1FCQrAwbqwf8eFhHd7mfzJn2Tg82TGvABywAmPUgOLD4XcDK9AJ/y5cOlrNsIvpCdPDL/FUbkX/t6Slv3+SjgQf6QBmIAZGAP+FzZJViOd89x8pAAAAABJRU5ErkJggg==";
+export const iconRRight = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABmSURBVDiN3dGxCoAgEMbxfz1dL1BTREJzmUv08trgDYcg6VCD3/YD7zvkoLmMgFEegLmmwAAecOJVvNeUWCAAt7IHjt9LThkyiRf9qC8oCom70u0BuDL+bngj/tNm/JqJePucW8wDvGYdzT0nMUkAAAAASUVORK5CYII=";
+export const iconUpload = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAdgAAAHYBTnsmCAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADNSURBVDiNndOxTgJRFIThz41ZDMFKqH0DLSRSq4lQ0RifUcMzUJlYQKjtLcHVSimBggPRNSzs/sk0kzPnTHEvxZyHKnGJD3yhXSWcYRnKwvvH0Y7wEG/4wQI1XOEek6LLF3FtiDoGoXp4WcxsSXILHjFCH/Nf/jy8ER6KGuTZNNhJvkFpEpygUyHbRi1BFy8VFryilyANlSVFerxn6N36IRVyG0PNEtdbkbmBU8zwdOCSJp4xRWNj3sWS5YGaRvM/f6GBa5ztafCJMb5hBQQ/MMwXLnnZAAAAAElFTkSuQmCC";

package/src/core/utils.js

@@ -0,0 +1,5 @@
+export const val = t => typeof t === "function" ? t() : t;
+
+export const joinClass = (t, l) => typeof l === "function" 
+  ? () => `${t} ${l() || ""}`.trim() 
+  : `${t} ${l || ""}`.trim();