@mdigital_ui/ui 0.3.8 → 0.4.0

package/dist/chunk-ITCXCSUS.js

@@ -1,753 +0,0 @@
-import { getValidationStatus, cn, statusMessageVariants, iconSizes } from './chunk-NGYLRX6F.js';
-import { Image, Upload as Upload$1, File, X, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
-import React from 'react';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var uploadButtonVariants = cva(
-  "inline-flex cursor-pointer outline-none border items-center justify-center gap-2 font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-  {
-    variants: {
-      color: {
-        primary: "border-primary text-white bg-primary hover:bg-primary/90",
-        secondary: "border-secondary text-white bg-secondary hover:bg-secondary/90",
-        success: "border-success text-white bg-success hover:bg-success/90",
-        error: "border-error text-white bg-error hover:bg-error/90",
-        accent: "border-accent text-white bg-accent hover:bg-accent/90",
-        warning: "border-warning text-white bg-warning hover:bg-warning/90",
-        info: "border-info text-white bg-info hover:bg-info/90"
-      },
-      size: {
-        xs: "h-(--button-height-xs) px-(--button-padding-x-xs) text-xs",
-        sm: "h-(--button-height-sm) px-(--button-padding-x-sm) text-sm",
-        md: "h-(--button-height-md) px-(--button-padding-x-md) text-base",
-        lg: "h-(--button-height-lg) px-(--button-padding-x-lg) text-lg"
-      }
-    },
-    defaultVariants: {
-      color: "primary",
-      size: "md"
-    }
-  }
-);
-var uploadDropzoneVariants = cva(
-  "relative border-2 border-dashed rounded-lg transition-[colors,border-color] duration-200 cursor-pointer",
-  {
-    variants: {
-      status: {
-        default: "border-border bg-surface/50 hover:border-primary hover:bg-primary/5",
-        dragActive: "border-primary bg-primary/10",
-        error: "border-error bg-error/5",
-        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
-      },
-      size: {
-        xs: "p-2",
-        sm: "p-4",
-        md: "p-6",
-        lg: "p-8"
-      }
-    },
-    defaultVariants: {
-      status: "default",
-      size: "md"
-    }
-  }
-);
-var uploadDraggerVariants = cva(
-  "relative border-2 border-dashed rounded-lg transition-[colors,border-color] duration-200 cursor-pointer flex flex-col items-center justify-center gap-2",
-  {
-    variants: {
-      status: {
-        default: "border-border bg-surface/50 hover:border-primary hover:bg-primary/5",
-        dragActive: "border-primary bg-primary/10 scale-[1.02]",
-        error: "border-error bg-error/5",
-        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
-      },
-      size: {
-        xs: "min-h-[100px] p-3",
-        sm: "min-h-[120px] p-4",
-        md: "min-h-[160px] p-6",
-        lg: "min-h-[200px] p-8"
-      }
-    },
-    defaultVariants: {
-      status: "default",
-      size: "md"
-    }
-  }
-);
-var uploadAvatarVariants = cva(
-  "relative overflow-hidden rounded-full border-2 border-dashed cursor-pointer transition-[colors,border-color] duration-200 flex items-center justify-center",
-  {
-    variants: {
-      status: {
-        default: "border-border bg-surface/50 hover:border-primary",
-        dragActive: "border-primary bg-primary/10",
-        error: "border-error bg-error/5",
-        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
-      },
-      size: {
-        xs: "w-12 h-12",
-        sm: "w-16 h-16",
-        md: "w-24 h-24",
-        lg: "w-32 h-32"
-      }
-    },
-    defaultVariants: {
-      status: "default",
-      size: "md"
-    }
-  }
-);
-var uploadPictureVariants = cva(
-  "relative overflow-hidden rounded-md border-2 border-dashed cursor-pointer transition-[colors,border-color] duration-200 flex items-center justify-center",
-  {
-    variants: {
-      status: {
-        default: "border-border bg-surface/50 hover:border-primary",
-        dragActive: "border-primary bg-primary/10",
-        error: "border-error bg-error/5",
-        disabled: "border-border bg-surface/30 cursor-not-allowed opacity-50"
-      },
-      size: {
-        xs: "w-16 h-16",
-        sm: "w-24 h-24",
-        md: "w-32 h-32",
-        lg: "w-40 h-40"
-      }
-    },
-    defaultVariants: {
-      status: "default",
-      size: "md"
-    }
-  }
-);
-var formatFileSize = (bytes) => {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const sizes = ["Bytes", "KB", "MB", "GB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
-};
-var isImageFile = (file) => {
-  const type = file.type || "";
-  return type.startsWith("image/");
-};
-var generateUID = () => {
-  return `upload-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
-};
-var Upload = React.memo(
-  ({
-    variant = "button",
-    size = "md",
-    color = "primary",
-    label,
-    helperText,
-    error,
-    warning,
-    info,
-    success,
-    accept,
-    multiple = false,
-    maxSize,
-    maxCount,
-    fileList,
-    defaultFileList = [],
-    showUploadList = true,
-    listType = "text",
-    disabled = false,
-    buttonText = "Upload File",
-    dragText = "Click or drag file to this area to upload",
-    dragHint = "Support for a single or bulk upload",
-    onChange,
-    onRemove,
-    beforeUpload,
-    customRequest,
-    onError,
-    className,
-    classNames,
-    ref,
-    ...props
-  }) => {
-    const [internalFileList, setInternalFileList] = React.useState(defaultFileList);
-    const [dragActive, setDragActive] = React.useState(false);
-    const inputRef = React.useRef(null);
-    const prevFileListRef = React.useRef([]);
-    const currentFileList = fileList !== void 0 ? fileList : internalFileList;
-    const { status, message: helperMessage } = getValidationStatus({
-      error,
-      warning,
-      info,
-      success,
-      helperText
-    });
-    const validateFile = React.useCallback(
-      (file) => {
-        if (maxSize && file.size > maxSize) {
-          return `File size exceeds ${formatFileSize(maxSize)}`;
-        }
-        if (maxCount && currentFileList.length >= maxCount) {
-          return `Maximum ${maxCount} file${maxCount > 1 ? "s" : ""} allowed`;
-        }
-        return null;
-      },
-      [maxSize, maxCount, currentFileList.length]
-    );
-    const handleFiles = React.useCallback(
-      async (files) => {
-        if (!files || files.length === 0) return;
-        const newFiles = [];
-        for (let i = 0; i < files.length; i++) {
-          const file = files[i];
-          if (!file) continue;
-          const validationError = validateFile(file);
-          if (validationError) {
-            onError?.(validationError, file);
-            continue;
-          }
-          if (beforeUpload) {
-            const shouldUpload = await beforeUpload(file);
-            if (!shouldUpload) continue;
-          }
-          const uploadFile = {
-            uid: generateUID(),
-            name: file.name,
-            size: file.size,
-            type: file.type,
-            status: "uploading",
-            percent: 0
-          };
-          newFiles.push(uploadFile);
-          if (customRequest) {
-            customRequest({
-              file,
-              onProgress: (percent) => {
-                setInternalFileList(
-                  (prev) => prev.map(
-                    (f) => f.uid === uploadFile.uid ? { ...f, percent } : f
-                  )
-                );
-              },
-              onSuccess: (response) => {
-                setInternalFileList(
-                  (prev) => prev.map(
-                    (f) => f.uid === uploadFile.uid ? {
-                      ...f,
-                      status: "done",
-                      percent: 100,
-                      response
-                    } : f
-                  )
-                );
-              },
-              onError: (err) => {
-                setInternalFileList(
-                  (prev) => prev.map(
-                    (f) => f.uid === uploadFile.uid ? { ...f, status: "error", error: err } : f
-                  )
-                );
-              }
-            });
-          } else {
-            if (file && isImageFile(file)) {
-              uploadFile.thumbUrl = URL.createObjectURL(file);
-            }
-            uploadFile.status = "done";
-            uploadFile.percent = 100;
-          }
-        }
-        const updatedList = multiple ? [...currentFileList, ...newFiles] : newFiles;
-        if (fileList === void 0) {
-          setInternalFileList(updatedList);
-        }
-        onChange?.(updatedList);
-      },
-      [
-        validateFile,
-        beforeUpload,
-        customRequest,
-        onError,
-        multiple,
-        currentFileList,
-        fileList,
-        onChange
-      ]
-    );
-    const handleInputChange = React.useCallback(
-      (e) => {
-        handleFiles(e.target.files);
-        e.target.value = "";
-      },
-      [handleFiles]
-    );
-    const handleRemove = React.useCallback(
-      (file) => {
-        if (file.thumbUrl?.startsWith("blob:")) {
-          URL.revokeObjectURL(file.thumbUrl);
-        }
-        const updatedList = currentFileList.filter((f) => f.uid !== file.uid);
-        if (fileList === void 0) {
-          setInternalFileList(updatedList);
-        }
-        onRemove?.(file);
-        onChange?.(updatedList);
-      },
-      [currentFileList, fileList, onRemove, onChange]
-    );
-    React.useEffect(() => {
-      const prevFileList = prevFileListRef.current;
-      prevFileList.forEach((prevFile) => {
-        const stillExists = currentFileList.some((file) => file.uid === prevFile.uid);
-        if (!stillExists && prevFile.thumbUrl?.startsWith("blob:")) {
-          URL.revokeObjectURL(prevFile.thumbUrl);
-        }
-      });
-      prevFileListRef.current = currentFileList;
-    }, [currentFileList]);
-    React.useEffect(() => {
-      return () => {
-        prevFileListRef.current.forEach((file) => {
-          if (file.thumbUrl?.startsWith("blob:")) {
-            URL.revokeObjectURL(file.thumbUrl);
-          }
-        });
-      };
-    }, []);
-    const handleClick = React.useCallback(() => {
-      if (!disabled) {
-        inputRef.current?.click();
-      }
-    }, [disabled]);
-    const handleKeyDown = React.useCallback(
-      (e) => {
-        if (disabled) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          inputRef.current?.click();
-        }
-      },
-      [disabled]
-    );
-    const handleDragEnter = React.useCallback((e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setDragActive(true);
-    }, []);
-    const handleDragLeave = React.useCallback((e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setDragActive(false);
-    }, []);
-    const handleDragOver = React.useCallback((e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    }, []);
-    const handleDrop = React.useCallback(
-      (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setDragActive(false);
-        if (!disabled) {
-          handleFiles(e.dataTransfer.files);
-        }
-      },
-      [disabled, handleFiles]
-    );
-    const renderFileList = () => {
-      if (!showUploadList || currentFileList.length === 0) return null;
-      if (listType === "picture-card") {
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-slot": "upload_fileList",
-            className: cn("upload_fileList", "flex flex-wrap gap-2 mt-2", classNames?.fileList),
-            children: currentFileList.map((file) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "data-slot": "upload_fileItem",
-                className: cn(
-                  "upload_fileItem",
-                  "relative w-24 h-24 rounded-md border border-border overflow-hidden group",
-                  classNames?.fileItem
-                ),
-                children: [
-                  file.thumbUrl ? /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: file.thumbUrl,
-                      alt: file.name,
-                      className: "w-full h-full object-cover"
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-surface", children: /* @__PURE__ */ jsx(File, { className: "w-8 h-8 text-text-secondary" }) }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleRemove(file),
-                      className: "text-white hover:text-error transition-colors",
-                      children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
-                    }
-                  ) }),
-                  file.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 text-white animate-spin" }) })
-                ]
-              },
-              file.uid
-            ))
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          "data-slot": "upload_fileList",
-          className: cn("upload_fileList", "mt-2 space-y-1", classNames?.fileList),
-          children: currentFileList.map((file) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "data-slot": "upload_fileItem",
-              className: cn(
-                "upload_fileItem",
-                "flex items-center justify-between p-2 rounded-md bg-surface hover:bg-surface/80 transition-colors",
-                classNames?.fileItem
-              ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-                  listType === "picture" && file.thumbUrl ? /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: file.thumbUrl,
-                      alt: file.name,
-                      className: "w-8 h-8 rounded object-cover"
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    File,
-                    {
-                      className: cn("text-text-secondary shrink-0", iconSizes[size])
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-sm text-text-primary truncate", children: file.name }),
-                    /* @__PURE__ */ jsxs("p", { className: "text-xs text-text-secondary", children: [
-                      formatFileSize(file.size),
-                      file.status === "uploading" && file.percent !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-                        " - ",
-                        file.percent,
-                        "%"
-                      ] })
-                    ] })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                  file.status === "uploading" && /* @__PURE__ */ jsx(
-                    Loader2,
-                    {
-                      className: cn("text-primary animate-spin", iconSizes[size])
-                    }
-                  ),
-                  file.status === "done" && /* @__PURE__ */ jsx(
-                    CheckCircle,
-                    {
-                      className: cn("text-success", iconSizes[size])
-                    }
-                  ),
-                  file.status === "error" && /* @__PURE__ */ jsx(AlertCircle, { className: cn("text-error", iconSizes[size]) }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => handleRemove(file),
-                      className: "text-text-secondary hover:text-error transition-colors",
-                      children: /* @__PURE__ */ jsx(X, { className: iconSizes[size] })
-                    }
-                  )
-                ] })
-              ]
-            },
-            file.uid
-          ))
-        }
-      );
-    };
-    const currentFile = currentFileList[0];
-    const renderUploadArea = () => {
-      const dragStatus = dragActive ? "dragActive" : disabled ? "disabled" : status === "error" ? "error" : "default";
-      switch (variant) {
-        case "button":
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: handleClick,
-              disabled,
-              "data-slot": "upload_dropzone",
-              className: cn(
-                "upload_dropzone",
-                uploadButtonVariants({ color, size }),
-                "active:scale-[0.97]",
-                classNames?.dropzone,
-                className
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Upload$1,
-                  {
-                    "data-slot": "upload_icon",
-                    className: cn("upload_icon", iconSizes[size], classNames?.icon)
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    "data-slot": "upload_text",
-                    className: cn("upload_text", classNames?.text),
-                    children: buttonText
-                  }
-                )
-              ]
-            }
-          );
-        case "dropzone":
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "button",
-              tabIndex: disabled ? -1 : 0,
-              "aria-label": `Upload file${multiple ? "s" : ""}`,
-              "aria-disabled": disabled || void 0,
-              onClick: handleClick,
-              onKeyDown: handleKeyDown,
-              onDragEnter: handleDragEnter,
-              onDragLeave: handleDragLeave,
-              onDragOver: handleDragOver,
-              onDrop: handleDrop,
-              "data-slot": "upload_dropzone",
-              className: cn(
-                "upload_dropzone",
-                uploadDropzoneVariants({ status: dragStatus, size }),
-                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
-                classNames?.dropzone,
-                className
-              ),
-              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx(
-                  Upload$1,
-                  {
-                    "data-slot": "upload_icon",
-                    className: cn(
-                      "upload_icon",
-                      "text-text-secondary",
-                      iconSizes[size],
-                      classNames?.icon
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      "data-slot": "upload_text",
-                      className: cn(
-                        "upload_text",
-                        "text-sm text-text-primary font-medium",
-                        classNames?.text
-                      ),
-                      children: dragText
-                    }
-                  ),
-                  dragHint && /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      "data-slot": "upload_hint",
-                      className: cn(
-                        "upload_hint",
-                        "text-xs text-text-secondary mt-0.5",
-                        classNames?.hint
-                      ),
-                      children: dragHint
-                    }
-                  )
-                ] })
-              ] })
-            }
-          );
-        case "dragger":
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "button",
-              tabIndex: disabled ? -1 : 0,
-              "aria-label": `Upload file${multiple ? "s" : ""}`,
-              "aria-disabled": disabled || void 0,
-              onClick: handleClick,
-              onKeyDown: handleKeyDown,
-              onDragEnter: handleDragEnter,
-              onDragLeave: handleDragLeave,
-              onDragOver: handleDragOver,
-              onDrop: handleDrop,
-              "data-slot": "upload_dropzone",
-              className: cn(
-                "upload_dropzone",
-                uploadDraggerVariants({ status: dragStatus, size }),
-                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
-                classNames?.dropzone,
-                className
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Upload$1,
-                  {
-                    "data-slot": "upload_icon",
-                    className: cn("upload_icon", "w-10 h-10 text-primary", classNames?.icon)
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    "data-slot": "upload_text",
-                    className: cn(
-                      "upload_text",
-                      "text-base font-medium text-text-primary",
-                      classNames?.text
-                    ),
-                    children: dragText
-                  }
-                ),
-                dragHint && /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    "data-slot": "upload_hint",
-                    className: cn(
-                      "upload_hint",
-                      "text-sm text-text-secondary",
-                      classNames?.hint
-                    ),
-                    children: dragHint
-                  }
-                )
-              ]
-            }
-          );
-        case "avatar":
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "button",
-              tabIndex: disabled ? -1 : 0,
-              "aria-label": "Upload avatar image",
-              "aria-disabled": disabled || void 0,
-              onClick: handleClick,
-              onKeyDown: handleKeyDown,
-              onDragEnter: handleDragEnter,
-              onDragLeave: handleDragLeave,
-              onDragOver: handleDragOver,
-              onDrop: handleDrop,
-              "data-slot": "upload_dropzone",
-              className: cn(
-                "upload_dropzone",
-                uploadAvatarVariants({ status: dragStatus, size }),
-                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
-                classNames?.dropzone,
-                className
-              ),
-              children: currentFile?.thumbUrl ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: currentFile.thumbUrl,
-                  alt: "avatar",
-                  className: "w-full h-full object-cover"
-                }
-              ) : /* @__PURE__ */ jsx(
-                Image,
-                {
-                  "data-slot": "upload_icon",
-                  className: cn(
-                    "upload_icon",
-                    "w-8 h-8 text-text-secondary",
-                    classNames?.icon
-                  )
-                }
-              )
-            }
-          );
-        case "picture":
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "button",
-              tabIndex: disabled ? -1 : 0,
-              "aria-label": "Upload picture",
-              "aria-disabled": disabled || void 0,
-              onClick: handleClick,
-              onKeyDown: handleKeyDown,
-              onDragEnter: handleDragEnter,
-              onDragLeave: handleDragLeave,
-              onDragOver: handleDragOver,
-              onDrop: handleDrop,
-              "data-slot": "upload_dropzone",
-              className: cn(
-                "upload_dropzone",
-                uploadPictureVariants({ status: dragStatus, size }),
-                "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 outline-none",
-                classNames?.dropzone,
-                className
-              ),
-              children: currentFile?.thumbUrl ? /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: currentFile.thumbUrl,
-                  alt: "preview",
-                  className: "w-full h-full object-cover"
-                }
-              ) : /* @__PURE__ */ jsx(
-                Image,
-                {
-                  "data-slot": "upload_icon",
-                  className: cn(
-                    "upload_icon",
-                    "w-8 h-8 text-text-secondary",
-                    classNames?.icon
-                  )
-                }
-              )
-            }
-          );
-        default:
-          return null;
-      }
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        "data-slot": "upload_root",
-        className: cn("upload_root", "w-full", classNames?.root),
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              type: "file",
-              accept,
-              multiple,
-              onChange: handleInputChange,
-              disabled,
-              "data-slot": "upload_input",
-              className: cn("upload_input", "hidden", classNames?.input),
-              ...props
-            }
-          ),
-          label && /* @__PURE__ */ jsx("label", { className: "block mb-1", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-secondary", children: label }) }),
-          renderUploadArea(),
-          renderFileList(),
-          helperMessage && /* @__PURE__ */ jsx("p", { className: cn(statusMessageVariants({ status }), "mt-1"), children: helperMessage })
-        ]
-      }
-    );
-  }
-);
-Upload.displayName = "Upload";
-var upload_default = Upload;
-
-export { upload_default };
-//# sourceMappingURL=chunk-ITCXCSUS.js.map
-//# sourceMappingURL=chunk-ITCXCSUS.js.map