Rebuild all components

components/Fileinput.js

@@ -2,42 +2,31 @@
 import { $, Tag, If, For } from "sigpro";
 
 export const Fileinput = (props) => {
-  const { class: className, max = 2, accept = "*", onselect, ...rest } = props;
-
   const selectedFiles = $([]);
   const isDragging = $(false);
   const error = $(null);
-  const MAX_BYTES = max * 1024 * 1024;
+  const maxBytes = (props.max || 2) * 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`);
+    if (fileList.find(f => f.size > maxBytes)) {
+      error(`Máx ${props.max || 2}MB`);
       return;
     }
     selectedFiles([...selectedFiles(), ...fileList]);
-    onselect?.(selectedFiles());
+    props.onselect?.(selectedFiles());
   };
 
-  const removeFile = (index) => {
-    const updated = selectedFiles().filter((_, i) => i !== index);
+  const removeFile = (idx) => {
+    const updated = selectedFiles().filter((_, i) => i !== idx);
     selectedFiles(updated);
-    onselect?.(updated);
+    props.onselect?.(updated);
   };
 
-  return Tag("div", {
-    ...rest,
-    class: `fieldset w-full p-0 ${className || ''}`.trim()
-  }, [
+  return Tag("div", { ...props, class: `fieldset w-full p-0 ${props.class ?? ''}` }, [
     Tag("label", {
-      class: () => `
-        relative flex items-center justify-between w-full h-12 px-4
-        border-2 border-dashed rounded-lg cursor-pointer
-        transition-all duration-200
-        ${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}
-      `,
+      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); }
@@ -45,19 +34,17 @@ export const Fileinput = (props) => {
       Tag("div", { class: "flex items-center gap-3 w-full" }, [
         Tag("span", { class: "icon-[lucide--upload]" }),
         Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
-        Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
+        Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${props.max || 2}MB`)
       ]),
       Tag("input", {
         type: "file",
         multiple: true,
-        accept,
+        accept: props.accept || "*",
         class: "hidden",
         onchange: (e) => handleFiles(e.target.files)
       })
     ]),
-
     () => error() && Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
-
     If(() => selectedFiles().length > 0, () =>
       Tag("ul", { class: "mt-2 space-y-1" }, [
         For(selectedFiles, (file, idx) =>