sigpro-ui 1.0.6

package/src/components/Datepicker.js

@@ -0,0 +1,252 @@
+import { $, $html, $if } from "sigpro";
+import { val } from "../core/utils.js";
+import { 
+  iconCalendar, 
+  iconLeft, 
+  iconRight, 
+  iconLLeft, 
+  iconRRight 
+} from "../core/icons.js";
+import { Input } from "./Input.js";
+
+/** DATEPICKER */
+export const Datepicker = (props) => {
+  const { value, range, label, placeholder, hour = false, ...rest } = props;
+
+  const isOpen = $(false);
+  const internalDate = $(new Date());
+  const hoverDate = $(null);
+  const startHour = $(0);
+  const endHour = $(0);
+  const isRangeMode = () => val(range) === 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 selectDate = (date) => {
+    const dateStr = formatDate(date);
+    const current = val(value);
+
+    if (isRangeMode()) {
+      if (!current?.start || (current.start && current.end)) {
+        if (typeof value === "function") {
+          value({
+            start: dateStr,
+            end: null,
+            ...(hour && { startHour: startHour() }),
+          });
+        }
+      } else {
+        const start = current.start;
+        if (typeof value === "function") {
+          const newValue = dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr };
+          if (hour) {
+            newValue.startHour = current.startHour || startHour();
+            newValue.endHour = current.endHour || endHour();
+          }
+          value(newValue);
+        }
+        isOpen(false);
+      }
+    } else {
+      if (typeof value === "function") {
+        value(hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr);
+      }
+      isOpen(false);
+    }
+  };
+
+  const displayValue = $(() => {
+    const v = val(value);
+    if (!v) return "";
+    if (typeof v === "string") {
+      if (hour && v.includes("T")) return v.replace("T", " ");
+      return v;
+    }
+    if (v.start && v.end) {
+      const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
+      const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
+      return `${startStr} - ${endStr}`;
+    }
+    if (v.start) {
+      const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
+      return `${startStr}...`;
+    }
+    return "";
+  });
+
+  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 }) => {
+    return $html("div", { class: "flex-1" }, [
+      $html("div", { class: "flex gap-2 items-center" }, [
+        $html("input", {
+          type: "range",
+          min: 0,
+          max: 23,
+          value: hVal,
+          class: "range range-xs flex-1",
+          oninput: (e) => {
+            const newHour = parseInt(e.target.value);
+            onChange(newHour);
+          },
+        }),
+        $html("span", { class: "text-sm font-mono min-w-[48px] text-center" }, 
+          () => String(val(hVal)).padStart(2, "0") + ":00"
+        ),
+      ]),
+    ]);
+  };
+
+  return $html("div", { class: "relative w-full" }, [
+    Input({
+      label,
+      placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
+      value: displayValue,
+      readonly: true,
+      icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
+      onclick: (e) => {
+        e.stopPropagation();
+        isOpen(!isOpen());
+      },
+      ...rest,
+    }),
+
+    $if(isOpen, () =>
+      $html(
+        "div",
+        {
+          class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",
+          onclick: (e) => e.stopPropagation(),
+        },
+        [
+          $html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
+            $html("div", { class: "flex gap-0.5" }, [
+              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, 
+                $html("img", { src: iconLLeft, class: "opacity-40" })
+              ),
+              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, 
+                $html("img", { src: iconLeft, class: "opacity-40" })
+              ),
+            ]),
+            $html("span", { class: "font-bold uppercase flex-1 text-center" }, [
+              () => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
+            ]),
+            $html("div", { class: "flex gap-0.5" }, [
+              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, 
+                $html("img", { src: iconRight, class: "opacity-40" })
+              ),
+              $html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, 
+                $html("img", { src: iconRRight, class: "opacity-40" })
+              ),
+            ]),
+          ]),
+
+          $html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
+            ...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("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 nodes = [];
+              for (let i = 0; i < offset; i++) nodes.push($html("div"));
+
+              for (let i = 1; i <= daysInMonth; i++) {
+                const date = new Date(year, month, i);
+                const dStr = formatDate(date);
+
+                nodes.push(
+                  $html(
+                    "button",
+                    {
+                      type: "button",
+                      class: () => {
+                        const v = val(value);
+                        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}`;
+                      },
+                      onmouseenter: () => { if (isRangeMode()) hoverDate(dStr); },
+                      onclick: () => selectDate(date),
+                    },
+                    [i.toString()],
+                  ),
+                );
+              }
+              return nodes;
+            },
+          ]),
+
+          hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
+            isRangeMode()
+              ? $html("div", { class: "flex gap-4" }, [
+                  HourSlider({
+                    value: startHour,
+                    onChange: (newHour) => {
+                      startHour(newHour);
+                      const currentVal = val(value);
+                      if (currentVal?.start) value({ ...currentVal, startHour: newHour });
+                    },
+                  }),
+                  HourSlider({
+                    value: endHour,
+                    onChange: (newHour) => {
+                      endHour(newHour);
+                      const currentVal = val(value);
+                      if (currentVal?.end) value({ ...currentVal, endHour: newHour });
+                    },
+                  }),
+                ])
+              : HourSlider({
+                  value: startHour,
+                  onChange: (newHour) => {
+                    startHour(newHour);
+                    const currentVal = val(value);
+                    if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) {
+                      value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
+                    }
+                  },
+                }),
+          ]) : null,
+        ],
+      ),
+    ),
+
+    $if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
+  ]);
+};

package/src/components/Drawer.js

@@ -0,0 +1,18 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** DRAWER */
+export const Drawer = (props) =>
+  $html("div", { class: joinClass("drawer", props.class) }, [
+    $html("input", {
+      id: props.id,
+      type: "checkbox",
+      class: "drawer-toggle",
+      checked: props.open,
+    }),
+    $html("div", { class: "drawer-content" }, props.content),
+    $html("div", { class: "drawer-side" }, [
+      $html("label", { for: props.id, class: "drawer-overlay", onclick: () => props.open?.(false) }),
+      $html("div", { class: "min-h-full bg-base-200 w-80" }, props.side),
+    ]),
+  ]);

package/src/components/Dropdown.js

@@ -0,0 +1,37 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+
+/** DROPDOWN */
+export const Dropdown = (props, children) => {
+  const { label, icon, ...rest } = props;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: () => `dropdown ${val(props.class) || props.class || ""}`,
+    },
+    [
+      $html(
+        "div",
+        {
+          tabindex: 0,
+          role: "button",
+          class: "btn m-1 flex items-center gap-2",
+        },
+        [
+          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+          label ? (typeof label === "function" ? label() : label) : null
+        ],
+      ),
+      $html(
+        "ul",
+        {
+          tabindex: 0,
+          class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300",
+        },
+        [typeof children === "function" ? children() : children],
+      ),
+    ],
+  );
+};

package/src/components/Fab.js

@@ -0,0 +1,51 @@
+import { $html } from "sigpro";
+import { val } from "../core/utils.js";
+
+/** FAB (Floating Action Button) */
+export const Fab = (props) => {
+  const { icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
+
+  return $html(
+    "div",
+    {
+      ...rest,
+      class: () => `fab fixed ${val(position)} flex flex-col-reverse items-end gap-3 z-[100] ${
+        props.class || ""
+      }`,
+    },
+    [
+      // Botón principal
+      $html(
+        "div",
+        {
+          tabindex: 0,
+          role: "button",
+          class: "btn btn-lg btn-circle btn-primary shadow-2xl",
+        },
+        [
+          icon ? (typeof icon === "function" ? icon() : icon) : null, 
+          !icon && label ? label : null
+        ],
+      ),
+
+      // Acciones secundarias (se despliegan hacia arriba)
+      ...val(actions).map((act) =>
+        $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
+          act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
+          $html(
+            "button",
+            {
+              type: "button",
+              class: `btn btn-circle shadow-lg ${act.class || ""}`,
+              onclick: (e) => {
+                e.stopPropagation();
+                act.onclick?.(e);
+              },
+            },
+            [act.icon ? (typeof act.icon === "function" ? act.icon() : act.icon) : act.text || ""],
+          ),
+        ]),
+      ),
+    ],
+  );
+};

package/src/components/Fieldset.js

@@ -0,0 +1,19 @@
+import { $html } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** FIELDSET */
+export const Fieldset = (props, children) =>
+  $html(
+    "fieldset",
+    {
+      ...props,
+      class: joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", props.class),
+    },
+    [
+      () => {
+        const legendText = val(props.legend);
+        return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
+      },
+      children,
+    ],
+  );

package/src/components/Fileinput.js

@@ -0,0 +1,113 @@
+import { $, $html, $if, $for } from "sigpro";
+import { iconUpload, iconClose } from "../core/icons.js";
+
+/** FILEINPUT */
+export const Fileinput = (props) => {
+  const { tooltip, max = 2, accept = "*", onSelect } = props;
+
+  const selectedFiles = $([]);
+  const isDragging = $(false);
+  const error = $(null);
+  const MAX_BYTES = max * 1024 * 1024;
+
+  const handleFiles = (files) => {
+    const fileList = Array.from(files);
+    error(null);
+    const oversized = fileList.find((f) => f.size > MAX_BYTES);
+
+    if (oversized) {
+      error(`Máx ${max}MB`);
+      return;
+    }
+
+    selectedFiles([...selectedFiles(), ...fileList]);
+    onSelect?.(selectedFiles());
+  };
+
+  const removeFile = (index) => {
+    const updated = selectedFiles().filter((_, i) => i !== index);
+    selectedFiles(updated);
+    onSelect?.(updated);
+  };
+
+  return $html("fieldset", { class: "fieldset w-full p-0" }, [
+    $html(
+      "div",
+      {
+        class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
+        "data-tip": tooltip,
+      },
+      [
+        $html(
+          "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);
+            },
+          },
+          [
+            $html("div", { class: "flex items-center gap-3 w-full" }, [
+              $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
+              $html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
+              $html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
+            ]),
+            $html("input", {
+              type: "file",
+              multiple: true,
+              accept: accept,
+              class: "hidden",
+              onchange: (e) => handleFiles(e.target.files),
+            }),
+          ],
+        ),
+      ],
+    ),
+
+    () => (error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
+
+    $if(
+      () => selectedFiles().length > 0,
+      () =>
+        $html("ul", { class: "mt-2 space-y-1" }, [
+          $for(
+            selectedFiles,
+            (file, index) =>
+              $html("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
+                $html("div", { class: "flex items-center gap-2 truncate" }, [
+                  $html("span", { class: "opacity-50" }, "📄"),
+                  $html("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
+                  $html("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
+                ]),
+                $html(
+                  "button",
+                  {
+                    type: "button",
+                    class: "btn btn-ghost btn-xs btn-circle",
+                    onclick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      removeFile(index);
+                    },
+                  },
+                  [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
+                ),
+              ]),
+            (file) => file.name + file.lastModified,
+          ),
+        ]),
+    ),
+  ]);
+};

package/src/components/Indicator.js

@@ -0,0 +1,9 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** INDICATOR */
+export const Indicator = (props, children) =>
+  $html("div", { class: joinClass("indicator", props.class) }, [
+    children,
+    $html("span", { class: joinClass("indicator-item badge", props.badgeClass) }, props.badge),
+  ]);

package/src/components/Input.js

@@ -0,0 +1,77 @@
+import { $, $html } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+import { tt } from "../core/i18n.js";
+import { 
+  iconAbc, 
+  iconLock, 
+  iconCalendar, 
+  icon123, 
+  iconMail, 
+  iconShow, 
+  iconHide 
+} from "../core/icons.js";
+
+/** INPUT */
+export const Input = (props) => {
+  const { label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
+  const isPassword = type === "password";
+  const visible = $(false);
+
+  const iconsByType = {
+    text: iconAbc,
+    password: iconLock,
+    date: iconCalendar,
+    number: icon123,
+    email: iconMail,
+  };
+
+  const inputEl = $html("input", {
+    ...rest,
+    type: () => (isPassword ? (visible() ? "text" : "password") : type),
+    placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
+    class: joinClass("grow order-2 focus:outline-none", props.class),
+    value: value,
+    oninput: (e) => props.oninput?.(e),
+    disabled: () => val(props.disabled),
+  });
+
+  const leftIcon = icon ? icon : iconsByType[type] ? $html("img", { src: iconsByType[type], class: "opacity-50", alt: type }) : null;
+
+  return $html(
+    "label",
+    {
+      class: () => joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : ""),
+    },
+    [
+      leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
+      label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
+      inputEl,
+      isPassword
+        ? $html(
+            "button",
+            {
+              type: "button",
+              class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
+              onclick: (e) => {
+                e.preventDefault();
+                visible(!visible());
+              },
+            },
+            () =>
+              $html("img", {
+                class: "w-5 h-5",
+                src: visible() ? iconShow : iconHide,
+              }),
+          )
+        : null,
+      tip
+        ? $html(
+            "div",
+            { class: "tooltip tooltip-left order-4", "data-tip": tip },
+            $html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
+          )
+        : null,
+      () => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
+    ],
+  );
+};

package/src/components/List.js

@@ -0,0 +1,18 @@
+import { $html, $if, $for } from "sigpro";
+import { joinClass, val } from "../core/utils.js";
+
+/** LIST */
+export const List = (props) => {
+  const { items, header, render, keyFn, class: className } = props;
+
+  return $html(
+    "ul",
+    {
+      class: joinClass("list bg-base-100 rounded-box shadow-md", className),
+    },
+    [
+      $if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])),
+      $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn),
+    ],
+  );
+};

package/src/components/Loading.js

@@ -0,0 +1,13 @@
+import { $html, $if } from "sigpro";
+
+/** LOADING (Overlay Component) */
+export const Loading = (props) => {
+  // Se espera un signal props.$show para controlar la visibilidad
+  return $if(props.$show, () =>
+    $html("div", { 
+      class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30" 
+    }, [
+      $html("span", { class: "loading loading-spinner loading-lg text-primary" }),
+    ]),
+  );
+};

package/src/components/Menu.js

@@ -0,0 +1,25 @@
+import { $html, $for } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** MENU */
+export const Menu = (props) => {
+  const renderItems = (items) =>
+    $for(
+      () => items || [],
+      (it) =>
+        $html("li", {}, [
+          it.children
+            ? $html("details", { open: it.open }, [
+                $html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
+                $html("ul", {}, renderItems(it.children)),
+              ])
+            : $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
+                it.icon && $html("span", { class: "mr-2" }, it.icon),
+                it.label,
+              ]),
+        ]),
+      (it, i) => it.label || i,
+    );
+
+  return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
+};

package/src/components/Modal.js

@@ -0,0 +1,31 @@
+import { $html, $if } from "sigpro";
+import { tt } from "../core/i18n.js";
+import { Button } from "./Button.js";
+
+/** MODAL */
+export const Modal = (props, children) => {
+  const { title, buttons, open, ...rest } = props;
+  const close = () => open(false);
+
+  return $if(open, () =>
+    $html("dialog", { ...rest, class: "modal modal-open" }, [
+      $html("div", { class: "modal-box" }, [
+        title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
+        typeof children === "function" ? children() : children,
+        $html("div", { class: "modal-action flex gap-2" }, [
+          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
+          Button({ onclick: close }, tt("close")()),
+        ]),
+      ]),
+      $html(
+        "form",
+        {
+          method: "dialog",
+          class: "modal-backdrop",
+          onclick: (e) => (e.preventDefault(), close()),
+        },
+        [$html("button", {}, "close")],
+      ),
+    ]),
+  );
+};

package/src/components/Navbar.js

@@ -0,0 +1,6 @@
+import { $html } from "sigpro";
+import { joinClass } from "../core/utils.js";
+
+/** NAVBAR */
+export const Navbar = (props, children) =>
+  $html("div", { ...props, class: joinClass("navbar bg-base-100 shadow-sm px-4", props.class) }, children);