@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-B6KQKQ4S.js

@@ -0,0 +1,774 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { UploadCloudIcon, Loader2Icon, CheckCircle2Icon, AlertCircleIcon, XIcon, FileIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var fileUploadVariants = cva(
+  // Base styles
+  ["relative", "w-full"],
+  {
+    variants: {
+      variant: {
+        button: "",
+        dropzone: [
+          "border-2 border-dashed border-input",
+          "rounded-lg",
+          "transition-colors duration-200",
+          "hover:border-primary/50",
+          "data-[dragging=true]:border-primary data-[dragging=true]:bg-primary/5"
+        ],
+        avatar: [
+          "inline-flex",
+          "cursor-pointer",
+          "rounded-full",
+          "overflow-hidden"
+        ],
+        inline: ["flex items-center gap-2"]
+      }
+    },
+    defaultVariants: {
+      variant: "button"
+    }
+  }
+);
+var fileUploadTriggerVariants = cva(
+  // Base styles
+  [
+    "inline-flex items-center justify-center gap-2",
+    "rounded-md font-medium",
+    "transition-colors duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-primary text-primary-foreground",
+          "hover:bg-primary/90"
+        ],
+        secondary: [
+          "bg-secondary text-secondary-foreground",
+          "hover:bg-secondary/80"
+        ],
+        outline: [
+          "border border-input bg-background",
+          "hover:bg-accent hover:text-accent-foreground"
+        ],
+        ghost: ["hover:bg-accent hover:text-accent-foreground"]
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var fileUploadDropzoneVariants = cva(
+  // Base styles
+  [
+    "flex flex-col items-center justify-center",
+    "p-8",
+    "cursor-pointer",
+    "transition-colors duration-200"
+  ],
+  {
+    variants: {
+      isDragging: {
+        true: "bg-primary/5",
+        false: ""
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      isDragging: false,
+      disabled: false
+    }
+  }
+);
+var fileUploadPreviewVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "flex items-center gap-3",
+    "p-3",
+    "rounded-md",
+    "bg-muted/50",
+    "border border-border"
+  ],
+  {
+    variants: {
+      status: {
+        pending: "",
+        uploading: "",
+        success: "border-success/50 bg-success/5",
+        error: "border-destructive/50 bg-destructive/5"
+      }
+    },
+    defaultVariants: {
+      status: "pending"
+    }
+  }
+);
+var fileUploadAvatarVariants = cva(
+  // Base styles
+  [
+    "relative",
+    "rounded-full",
+    "overflow-hidden",
+    "bg-muted",
+    "flex items-center justify-center"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-16",
+        md: "size-24",
+        lg: "size-32"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var fileUploadProgressVariants = cva(
+  // Base styles
+  ["h-1 w-full overflow-hidden rounded-full bg-muted"],
+  {
+    variants: {
+      status: {
+        pending: "",
+        uploading: "",
+        success: "",
+        error: ""
+      }
+    }
+  }
+);
+var fileUploadProgressFillVariants = cva(
+  // Base styles
+  ["h-full transition-all duration-300 ease-out"],
+  {
+    variants: {
+      status: {
+        pending: "bg-muted-foreground",
+        uploading: "bg-primary",
+        success: "bg-success",
+        error: "bg-destructive"
+      }
+    },
+    defaultVariants: {
+      status: "uploading"
+    }
+  }
+);
+var FileUploadContext = React.createContext(
+  null
+);
+function useFileUploadContext() {
+  const context = React.use(FileUploadContext);
+  if (!context) {
+    throw new Error(
+      "FileUpload compound components must be used within a FileUpload component"
+    );
+  }
+  return context;
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${String(Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)))} ${sizes[i] ?? ""}`;
+}
+function getFileTypeIcon(file) {
+  if (file.type.startsWith("image/")) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(FileIcon, { className: "size-8 text-muted-foreground" });
+}
+function validateFiles(files, options) {
+  const errors = [];
+  const validFiles = [];
+  const { accept, maxFiles, maxSize, currentCount = 0 } = options;
+  const acceptedTypes = accept ? accept.split(",").map((t) => t.trim().toLowerCase()) : null;
+  for (const file of files) {
+    let isValid = true;
+    if (acceptedTypes) {
+      const fileType = file.type.toLowerCase();
+      const fileExt = `.${file.name.split(".").pop()?.toLowerCase() ?? ""}`;
+      const typeMatch = acceptedTypes.some((accepted) => {
+        if (accepted.startsWith(".")) {
+          return fileExt === accepted;
+        }
+        if (accepted.endsWith("/*")) {
+          const baseType = accepted.replace("/*", "");
+          return fileType.startsWith(baseType);
+        }
+        return fileType === accepted;
+      });
+      if (!typeMatch) {
+        errors.push({
+          file,
+          message: `File type not accepted. Accepted: ${accept ?? ""}`,
+          type: "type"
+        });
+        isValid = false;
+      }
+    }
+    if (maxSize && file.size > maxSize) {
+      errors.push({
+        file,
+        message: `File too large. Maximum size: ${formatFileSize(maxSize)}`,
+        type: "size"
+      });
+      isValid = false;
+    }
+    if (maxFiles && currentCount + validFiles.length >= maxFiles) {
+      errors.push({
+        file,
+        message: `Maximum ${String(maxFiles)} file(s) allowed`,
+        type: "count"
+      });
+      isValid = false;
+    }
+    if (isValid) {
+      validFiles.push(file);
+    }
+  }
+  return { errors, validFiles };
+}
+function FileUpload({
+  accept,
+  autoUpload = false,
+  children,
+  className,
+  disabled = false,
+  maxFiles = 1,
+  maxSize,
+  multiple = false,
+  onChange,
+  onComplete,
+  onError,
+  onProgress,
+  onRemove,
+  onUpload,
+  required = false,
+  showPreview = true,
+  value,
+  variant = "button",
+  ...props
+}) {
+  const inputRef = React.useRef(null);
+  const [internalFiles, setInternalFiles] = React.useState([]);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [progress, setProgress] = React.useState([]);
+  const [status, setStatus] = React.useState("idle");
+  const files = value ?? internalFiles;
+  const isControlled = value !== void 0;
+  const setFilesInternal = React.useCallback(
+    (newFiles) => {
+      if (!isControlled) {
+        setInternalFiles(newFiles);
+      }
+    },
+    [isControlled]
+  );
+  const openFilePicker = React.useCallback(() => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  }, [disabled]);
+  const handleUpload = React.useCallback(
+    async (filesToUpload) => {
+      if (!onUpload) return;
+      setStatus("uploading");
+      setProgress(
+        (prev) => prev.map(
+          (p) => filesToUpload.includes(p.file) ? { ...p, progress: 0, status: "uploading" } : p
+        )
+      );
+      onProgress?.(progress);
+      try {
+        const results = await onUpload(filesToUpload);
+        setProgress(
+          (prev) => prev.map((p) => {
+            const result = results.find((r) => r.file === p.file);
+            if (!result) return p;
+            return {
+              ...p,
+              error: result.error,
+              progress: 100,
+              status: result.error ? "error" : "success"
+            };
+          })
+        );
+        const hasErrors = results.some((r) => r.error);
+        setStatus(hasErrors ? "error" : "success");
+        onComplete?.(results);
+      } catch (error) {
+        setStatus("error");
+        setProgress(
+          (prev) => prev.map(
+            (p) => filesToUpload.includes(p.file) ? {
+              ...p,
+              error: error instanceof Error ? error.message : "Upload failed",
+              status: "error"
+            } : p
+          )
+        );
+        onError?.(error instanceof Error ? error : new Error("Upload failed"));
+      }
+    },
+    [onUpload, onProgress, onComplete, onError, progress]
+  );
+  const selectFiles = React.useCallback(
+    (newFiles) => {
+      if (disabled) return;
+      const fileArray = [...newFiles];
+      const { errors, validFiles } = validateFiles(fileArray, {
+        accept,
+        currentCount: multiple ? files.length : 0,
+        maxFiles: multiple ? maxFiles : 1,
+        maxSize
+      });
+      if (errors.length > 0 && onError) {
+        const error = new Error(errors.map((e) => e.message).join("; "));
+        onError(error);
+      }
+      if (validFiles.length === 0) return;
+      const updatedFiles = multiple ? [...files, ...validFiles] : validFiles;
+      setFilesInternal(updatedFiles);
+      onChange?.(updatedFiles);
+      const initialProgress = validFiles.map((file) => ({
+        error: void 0,
+        file,
+        progress: 0,
+        status: "pending"
+      }));
+      setProgress(
+        (prev) => multiple ? [...prev, ...initialProgress] : initialProgress
+      );
+      if (autoUpload && onUpload) {
+        void handleUpload(validFiles);
+      }
+    },
+    [
+      disabled,
+      accept,
+      maxSize,
+      maxFiles,
+      multiple,
+      files,
+      onChange,
+      autoUpload,
+      onUpload,
+      onError,
+      setFilesInternal,
+      handleUpload
+    ]
+  );
+  const removeFile = React.useCallback(
+    (file, index) => {
+      const fileToRemove = files[index];
+      if (!fileToRemove || fileToRemove !== file) return;
+      const updatedFiles = files.filter((_, i) => i !== index);
+      setFilesInternal(updatedFiles);
+      onChange?.(updatedFiles);
+      onRemove?.(fileToRemove, index);
+      setProgress((prev) => prev.filter((p) => p.file !== fileToRemove));
+    },
+    [files, onChange, onRemove, setFilesInternal]
+  );
+  const handleInputChange = React.useCallback(
+    (event) => {
+      const newFiles = event.target.files;
+      if (newFiles) {
+        selectFiles(newFiles);
+      }
+      event.target.value = "";
+    },
+    [selectFiles]
+  );
+  const handleDragOver = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!disabled) {
+        setIsDragging(true);
+      }
+    },
+    [disabled]
+  );
+  const handleDragLeave = React.useCallback((event) => {
+    event.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragging(false);
+      if (!disabled && event.dataTransfer.files) {
+        selectFiles(event.dataTransfer.files);
+      }
+    },
+    [disabled, selectFiles]
+  );
+  const contextValue = {
+    accept,
+    disabled,
+    files,
+    isDragging,
+    maxFiles,
+    maxSize,
+    multiple,
+    openFilePicker,
+    progress,
+    removeFile,
+    selectFiles,
+    status
+  };
+  return /* @__PURE__ */ jsx(FileUploadContext, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(fileUploadVariants({ variant }), className),
+      "data-dragging": isDragging,
+      "data-slot": "file-upload",
+      "data-status": status,
+      "data-variant": variant,
+      onDragLeave: variant === "dropzone" ? handleDragLeave : void 0,
+      onDragOver: variant === "dropzone" ? handleDragOver : void 0,
+      onDrop: variant === "dropzone" ? handleDrop : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            accept,
+            "aria-hidden": "true",
+            className: "sr-only",
+            "data-slot": "file-upload-input",
+            disabled,
+            multiple,
+            required,
+            tabIndex: -1,
+            type: "file",
+            onChange: handleInputChange
+          }
+        ),
+        children,
+        showPreview && files.length > 0 && variant !== "avatar" && /* @__PURE__ */ jsx(
+          FileUploadList,
+          {
+            className: "mt-4",
+            files,
+            progress,
+            onRemove: removeFile
+          }
+        )
+      ]
+    }
+  ) });
+}
+function FileUploadTrigger({
+  children,
+  className,
+  disabled: disabledProp,
+  ...props
+}) {
+  const { disabled: contextDisabled, openFilePicker } = useFileUploadContext();
+  const disabled = disabledProp ?? contextDisabled;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(fileUploadTriggerVariants(), className),
+      "data-slot": "file-upload-trigger",
+      disabled,
+      type: "button",
+      onClick: openFilePicker,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { children: "Choose File" })
+      ] })
+    }
+  );
+}
+function FileUploadDropzone({
+  children,
+  className,
+  disabled: disabledProp,
+  ...props
+}) {
+  const {
+    accept,
+    disabled: contextDisabled,
+    isDragging,
+    maxSize,
+    multiple,
+    openFilePicker
+  } = useFileUploadContext();
+  const disabled = disabledProp ?? contextDisabled;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        fileUploadDropzoneVariants({ disabled, isDragging }),
+        className
+      ),
+      "data-dragging": isDragging,
+      "data-slot": "file-upload-dropzone",
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onClick: disabled ? void 0 : openFilePicker,
+      onKeyDown: (e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          openFilePicker();
+        }
+      },
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(UploadCloudIcon, { className: "mx-auto size-12 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm font-medium", children: isDragging ? "Drop files here" : "Drag files here or click to upload" }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+          accept && `Accepted: ${accept}`,
+          accept && maxSize && " \u2022 ",
+          maxSize && `Max size: ${formatFileSize(maxSize)}`,
+          (accept ?? maxSize) && multiple && " \u2022 ",
+          multiple && "Multiple files allowed"
+        ] })
+      ] })
+    }
+  );
+}
+function FileUploadAvatar({
+  children,
+  className,
+  size = "md",
+  ...props
+}) {
+  const { disabled, files, openFilePicker, status } = useFileUploadContext();
+  const file = files[0];
+  const [preview, setPreview] = React.useState(null);
+  React.useEffect(() => {
+    if (file?.type.startsWith("image/")) {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+    setPreview(null);
+    return;
+  }, [file]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        fileUploadAvatarVariants({ size }),
+        "group cursor-pointer",
+        className
+      ),
+      "data-slot": "file-upload-avatar",
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onClick: disabled ? void 0 : openFilePicker,
+      onKeyDown: (e) => {
+        if (!disabled && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          openFilePicker();
+        }
+      },
+      ...props,
+      children: [
+        preview ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: "Avatar preview",
+            className: "size-full object-cover",
+            src: preview
+          }
+        ) : children ?? /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-8 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100", children: status === "uploading" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-6 animate-spin text-white" }) : /* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-6 text-white" }) })
+      ]
+    }
+  );
+}
+function FileUploadList({
+  className,
+  files: filesProp,
+  onRemove: onRemoveProp,
+  progress: progressProp,
+  ...props
+}) {
+  const context = React.use(FileUploadContext);
+  const files = filesProp ?? context?.files ?? [];
+  const progress = progressProp ?? context?.progress ?? [];
+  const onRemove = onRemoveProp ?? context?.removeFile;
+  if (files.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-2", className),
+      "data-slot": "file-upload-list",
+      ...props,
+      children: files.map((file, index) => {
+        const fileProgress = progress.find((p) => p.file === file);
+        return /* @__PURE__ */ jsx(
+          FileUploadPreview,
+          {
+            file,
+            index,
+            progress: fileProgress,
+            onRemove
+          },
+          `${file.name}-${String(file.size)}-${String(index)}`
+        );
+      })
+    }
+  );
+}
+function FileUploadPreview({
+  className,
+  file,
+  index,
+  onRemove,
+  progress,
+  ...props
+}) {
+  const [preview, setPreview] = React.useState(null);
+  React.useEffect(() => {
+    if (file.type.startsWith("image/")) {
+      const url = URL.createObjectURL(file);
+      setPreview(url);
+      return () => {
+        URL.revokeObjectURL(url);
+      };
+    }
+    setPreview(null);
+    return;
+  }, [file]);
+  const status = progress?.status ?? "pending";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(fileUploadPreviewVariants({ status }), className),
+      "data-slot": "file-upload-preview",
+      "data-status": status,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded bg-muted", children: preview ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: file.name,
+            className: "size-full object-cover",
+            src: preview
+          }
+        ) : getFileTypeIcon(file) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: file.name }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            formatFileSize(file.size),
+            progress?.error && /* @__PURE__ */ jsx("span", { className: "ml-2 text-destructive", children: progress.error })
+          ] }),
+          progress && status === "uploading" && /* @__PURE__ */ jsx(FileUploadProgressBar, { file, progress })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
+          status === "uploading" && /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin text-muted-foreground" }),
+          status === "success" && /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-4 text-success" }),
+          status === "error" && /* @__PURE__ */ jsx(AlertCircleIcon, { className: "size-4 text-destructive" })
+        ] }),
+        onRemove && status !== "uploading" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Remove ${file.name}`,
+            className: "shrink-0 rounded-sm p-1 opacity-50 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            type: "button",
+            onClick: () => {
+              onRemove(file, index);
+            },
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function FileUploadProgressBar({
+  className,
+  file,
+  progress,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": `Uploading ${file.name}`,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": progress.progress,
+      className: cn(fileUploadProgressVariants(), "mt-2", className),
+      "data-slot": "file-upload-progress",
+      role: "progressbar",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(fileUploadProgressFillVariants({ status: progress.status })),
+          style: { width: `${String(progress.progress)}%` }
+        }
+      )
+    }
+  );
+}
+function FileUploadInline({
+  children,
+  className,
+  ...props
+}) {
+  const { disabled, files, openFilePicker } = useFileUploadContext();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center gap-2", className),
+      "data-slot": "file-upload-inline",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 truncate rounded-md border border-input bg-background px-3 py-2 text-sm", children: files.length > 0 ? files.map((f) => f.name).join(", ") : "No file selected" }),
+        children ?? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(fileUploadTriggerVariants({ variant: "outline" })),
+            disabled,
+            type: "button",
+            onClick: openFilePicker,
+            children: "Browse"
+          }
+        )
+      ]
+    }
+  );
+}
+FileUpload.displayName = "FileUpload";
+FileUploadTrigger.displayName = "FileUploadTrigger";
+FileUploadDropzone.displayName = "FileUploadDropzone";
+FileUploadAvatar.displayName = "FileUploadAvatar";
+FileUploadList.displayName = "FileUploadList";
+FileUploadPreview.displayName = "FileUploadPreview";
+FileUploadProgressBar.displayName = "FileUploadProgressBar";
+FileUploadInline.displayName = "FileUploadInline";
+
+export { FileUpload, FileUploadAvatar, FileUploadDropzone, FileUploadInline, FileUploadList, FileUploadPreview, FileUploadProgressBar, FileUploadTrigger };
+//# sourceMappingURL=chunk-B6KQKQ4S.js.map
+//# sourceMappingURL=chunk-B6KQKQ4S.js.map