@douglasneuroinformatics/libui 3.6.1 → 3.6.3

package/dist/components.d.ts

@@ -1218,10 +1218,16 @@ type FileDropzoneProps = {
     acceptedFileTypes: {
         [key: string]: string[];
     };
+    className?: string;
+    description?: string;
     file: File | null;
     setFile: (file: File) => void;
+    titles?: {
+        dragActive: string;
+        dragInactive: string;
+    };
 };
-declare const FileDropzone: ({ acceptedFileTypes, file, setFile }: FileDropzoneProps) => react_jsx_runtime.JSX.Element;
+declare const FileDropzone: ({ acceptedFileTypes, className, description, file, setFile, titles }: FileDropzoneProps) => react_jsx_runtime.JSX.Element;
 
 type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>> = {
     [key: `data-${string}`]: unknown;

package/dist/components.js

@@ -2010,9 +2010,17 @@ var ErrorBoundary = ({ children }) => {
 
 // src/components/FileDropzone/FileDropzone.tsx
 import { useCallback } from "react";
+import { UploadIcon } from "lucide-react";
 import { useDropzone } from "react-dropzone";
 import { jsx as jsx92, jsxs as jsxs25 } from "react/jsx-runtime";
-var FileDropzone = ({ acceptedFileTypes, file, setFile }) => {
+var FileDropzone = ({
+  acceptedFileTypes,
+  className,
+  description,
+  file,
+  setFile,
+  titles
+}) => {
   const { t } = useTranslation();
   const handleDrop = useCallback(
     (acceptedFiles, rejectedFiles) => {
@@ -2028,16 +2036,35 @@ var FileDropzone = ({ acceptedFileTypes, file, setFile }) => {
     maxFiles: 1,
     onDrop: handleDrop
   });
-  return /* @__PURE__ */ jsxs25("div", { "data-testid": "dropzone", ...getRootProps(), children: [
-    /* @__PURE__ */ jsx92("p", { className: "mt-1 border border-dashed p-4 text-center text-sm", "data-testid": "dropzoneText", children: file ? file.name : isDragActive ? t({
-      en: "File to upload",
-      fr: "fichier \xE0 t\xE9l\xE9charger"
-    }) : t({
-      en: "Drag'n'drop files or click on box to upload",
-      fr: "Glissez-d\xE9posez les fichiers ou cliquez sur la case pour les t\xE9l\xE9charger"
-    }) }),
-    /* @__PURE__ */ jsx92("input", { ...getInputProps() })
-  ] });
+  const dragActiveTitle = titles?.dragActive ?? t({
+    en: "File to upload",
+    fr: "fichier \xE0 t\xE9l\xE9charger"
+  });
+  const dragInactiveTitle = titles?.dragInactive ?? t({
+    en: "Drag and drop files or click on box to upload",
+    fr: "Glissez-d\xE9posez les fichiers ou cliquez sur la case pour les t\xE9l\xE9charger"
+  });
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center rounded-md border border-dashed border-slate-400 p-4 dark:border-slate-600",
+        className
+      ),
+      "data-testid": "dropzone",
+      ...getRootProps(),
+      children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center justify-center gap-3", children: [
+          /* @__PURE__ */ jsx92(UploadIcon, { style: { height: 24, strokeWidth: 2, width: 24 } }),
+          /* @__PURE__ */ jsxs25("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+            /* @__PURE__ */ jsx92("h3", { className: "text-lg font-semibold tracking-tight", "data-testid": "dropzone-title", children: file ? file.name : isDragActive ? dragActiveTitle : dragInactiveTitle }),
+            description && /* @__PURE__ */ jsx92("p", { className: "text-sm text-muted-foreground", children: description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx92("input", { ...getInputProps() })
+      ]
+    }
+  );
 };
 
 // src/components/Form/Form.tsx