Updateing Docs

src/components/Fileinput.js

@@ -1,9 +1,26 @@
+// components/Fileinput.js
 import { $, $html, $if, $for } from "sigpro";
-import { iconUpload, iconClose } from "../core/icons.js";
+import { ui, getIcon } from "../core/utils.js";
 
-/** FILEINPUT */
+/**
+ * Fileinput component
+ * 
+ * daisyUI classes used:
+ * - fieldset, w-full, p-0
+ * - tooltip, tooltip-top, before:z-50, after:z-50
+ * - relative, flex, items-center, justify-between, w-full, h-12, px-4
+ * - border-2, border-dashed, rounded-lg, cursor-pointer, transition-all, duration-200
+ * - border-primary, bg-primary/10, border-base-content/20, bg-base-100, hover:bg-base-200
+ * - text-sm, opacity-70, truncate, grow, text-left
+ * - text-[10px], opacity-40, shrink-0
+ * - text-error, text-[10px], mt-1, px-1, font-medium
+ * - mt-2, space-y-1
+ * - flex, items-center, justify-between, p-1.5, pl-3, text-xs, bg-base-200/50, rounded-md, border, border-base-300
+ * - gap-2, truncate, opacity-50, font-medium, max-w-[200px]
+ * - btn, btn-ghost, btn-xs, btn-circle
+ */
 export const Fileinput = (props) => {
-  const { tooltip, max = 2, accept = "*", onSelect } = props;
+  const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
 
   const selectedFiles = $([]);
   const isDragging = $(false);
@@ -30,7 +47,7 @@ export const Fileinput = (props) => {
     onSelect?.(updated);
   };
 
-  return $html("fieldset", { class: "fieldset w-full p-0" }, [
+  return $html("fieldset", { ...rest, class: ui('fieldset w-full p-0', className) }, [
     $html(
       "div",
       {
@@ -60,7 +77,7 @@ export const Fileinput = (props) => {
           },
           [
             $html("div", { class: "flex items-center gap-3 w-full" }, [
-              $html("img", { src: iconUpload, class: "w-5 h-5 opacity-50 shrink-0" }),
+              getIcon("icon-[lucide--upload]"),
               $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`),
             ]),
@@ -102,7 +119,7 @@ export const Fileinput = (props) => {
                       removeFile(index);
                     },
                   },
-                  [$html("img", { src: iconClose, class: "w-3 h-3 opacity-70" })],
+                  [getIcon("icon-[lucide--x]")]
                 ),
               ]),
             (file) => file.name + file.lastModified,
@@ -110,4 +127,4 @@ export const Fileinput = (props) => {
         ]),
     ),
   ]);
-};
+};