@page-speed/forms 0.1.4 → 0.1.6

package/dist/inputs.cjs

@@ -22,6 +22,7 @@ function _interopNamespace(e) {
 
 var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
+// src/inputs/TextInput.tsx
 function TextInput({
   name,
   value,
@@ -668,9 +669,261 @@ function Select({
   );
 }
 Select.displayName = "Select";
+function FileInput({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  placeholder = "Choose file(s)...",
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  accept,
+  maxSize = 5 * 1024 * 1024,
+  // 5MB default
+  maxFiles = 1,
+  multiple = false,
+  showPreview = true,
+  onValidationError,
+  onFileRemove,
+  ...props
+}) {
+  const inputRef = React6__namespace.useRef(null);
+  const [dragActive, setDragActive] = React6__namespace.useState(false);
+  const validateFile = React6__namespace.useCallback(
+    (file) => {
+      if (accept) {
+        const acceptedTypes = accept.split(",").map((t) => t.trim());
+        const isValidType = acceptedTypes.some((type) => {
+          if (type.startsWith(".")) {
+            return file.name.toLowerCase().endsWith(type.toLowerCase());
+          } else if (type.endsWith("/*")) {
+            const baseType = type.split("/")[0];
+            return file.type.startsWith(baseType + "/");
+          } else {
+            return file.type === type;
+          }
+        });
+        if (!isValidType) {
+          return {
+            file,
+            error: "type",
+            message: `File type "${file.type}" is not accepted. Accepted types: ${accept}`
+          };
+        }
+      }
+      if (file.size > maxSize) {
+        const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(2);
+        const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
+        return {
+          file,
+          error: "size",
+          message: `File size ${fileSizeMB}MB exceeds maximum ${maxSizeMB}MB`
+        };
+      }
+      return null;
+    },
+    [accept, maxSize]
+  );
+  const handleFiles = React6__namespace.useCallback(
+    (fileList) => {
+      if (!fileList || fileList.length === 0) return;
+      const newFiles = Array.from(fileList);
+      const validationErrors = [];
+      const validFiles = [];
+      for (const file of newFiles) {
+        const validationError = validateFile(file);
+        if (validationError) {
+          validationErrors.push(validationError);
+        } else {
+          validFiles.push(file);
+        }
+      }
+      const totalFiles = value.length + validFiles.length;
+      if (totalFiles > maxFiles) {
+        validationErrors.push({
+          file: validFiles[0],
+          // Use first file as reference
+          error: "count",
+          message: `Maximum ${maxFiles} file(s) allowed. Attempting to add ${validFiles.length} to existing ${value.length}.`
+        });
+      }
+      if (validationErrors.length > 0 && onValidationError) {
+        onValidationError(validationErrors);
+      }
+      if (validFiles.length > 0 && totalFiles <= maxFiles) {
+        const updatedFiles = multiple ? [...value, ...validFiles] : validFiles;
+        onChange(updatedFiles.slice(0, maxFiles));
+      }
+      if (inputRef.current) {
+        inputRef.current.value = "";
+      }
+    },
+    [value, onChange, validateFile, maxFiles, multiple, onValidationError]
+  );
+  const handleChange = (e) => {
+    handleFiles(e.target.files);
+  };
+  const handleRemove = (index) => {
+    const fileToRemove = value[index];
+    const updatedFiles = value.filter((_, i) => i !== index);
+    onChange(updatedFiles);
+    if (onFileRemove && fileToRemove) {
+      onFileRemove(fileToRemove, index);
+    }
+  };
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  };
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+  const 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];
+  };
+  const getPreviewUrl = (file) => {
+    if (file.type.startsWith("image/")) {
+      return URL.createObjectURL(file);
+    }
+    return null;
+  };
+  React6__namespace.useEffect(() => {
+    return () => {
+      value.forEach((file) => {
+        const previewUrl = getPreviewUrl(file);
+        if (previewUrl) {
+          URL.revokeObjectURL(previewUrl);
+        }
+      });
+    };
+  }, [value]);
+  const baseClassName = "file-input";
+  const errorClassName = error ? "file-input--error" : "";
+  const dragClassName = dragActive ? "file-input--drag-active" : "";
+  const disabledClassName = disabled ? "file-input--disabled" : "";
+  const combinedClassName = `${baseClassName} ${errorClassName} ${dragClassName} ${disabledClassName} ${className}`.trim();
+  return /* @__PURE__ */ React6__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React6__namespace.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      name,
+      onChange: handleChange,
+      onBlur,
+      accept,
+      multiple,
+      disabled,
+      required: required && value.length === 0,
+      className: "file-input__native",
+      "aria-invalid": error || props["aria-invalid"],
+      "aria-describedby": props["aria-describedby"],
+      "aria-required": required || props["aria-required"],
+      style: { display: "none" }
+    }
+  ), /* @__PURE__ */ React6__namespace.createElement(
+    "div",
+    {
+      className: "file-input__dropzone",
+      onDragEnter: handleDrag,
+      onDragLeave: handleDrag,
+      onDragOver: handleDrag,
+      onDrop: handleDrop,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-label": placeholder,
+      "aria-disabled": disabled
+    },
+    /* @__PURE__ */ React6__namespace.createElement("div", { className: "file-input__dropzone-content" }, /* @__PURE__ */ React6__namespace.createElement(
+      "svg",
+      {
+        className: "file-input__icon",
+        width: "48",
+        height: "48",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true"
+      },
+      /* @__PURE__ */ React6__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React6__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React6__namespace.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React6__namespace.createElement("p", { className: "file-input__placeholder" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React6__namespace.createElement("p", { className: "file-input__hint" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React6__namespace.createElement("p", { className: "file-input__hint" }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React6__namespace.createElement("ul", { className: "file-input__list", role: "list" }, value.map((file, index) => {
+    const previewUrl = showPreview ? getPreviewUrl(file) : null;
+    return /* @__PURE__ */ React6__namespace.createElement("li", { key: `${file.name}-${index}`, className: "file-input__item" }, previewUrl && /* @__PURE__ */ React6__namespace.createElement(
+      "img",
+      {
+        src: previewUrl,
+        alt: file.name,
+        className: "file-input__preview",
+        width: "48",
+        height: "48"
+      }
+    ), /* @__PURE__ */ React6__namespace.createElement("div", { className: "file-input__details" }, /* @__PURE__ */ React6__namespace.createElement("span", { className: "file-input__filename" }, file.name), /* @__PURE__ */ React6__namespace.createElement("span", { className: "file-input__filesize" }, formatFileSize(file.size))), /* @__PURE__ */ React6__namespace.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleRemove(index);
+        },
+        disabled,
+        className: "file-input__remove",
+        "aria-label": `Remove ${file.name}`
+      },
+      /* @__PURE__ */ React6__namespace.createElement(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React6__namespace.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ React6__namespace.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      )
+    ));
+  })));
+}
+FileInput.displayName = "FileInput";
 
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
+exports.FileInput = FileInput;
 exports.Radio = Radio;
 exports.Select = Select;
 exports.TextArea = TextArea;