feat(file-upload): add file-upload component (#31)

Author: xx-yoke

.changes/file-upload.md

@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:feat
+---
+
+Add `FileUpload` component for file selections.

src/file-upload.tsx

@@ -0,0 +1,47 @@
+import clsx from "clsx";
+import type React from "react";
+import { useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import Appendix from "./icons/appendix.svg";
+
+export interface FileUploadProps extends React.ComponentProps<"button"> {
+  onFilesSelect: (files: File[]) => void;
+}
+
+export function FileUpload({
+  className,
+  onFilesSelect,
+  ...props
+}: FileUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files ?? []);
+    onFilesSelect(files);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  return (
+    <button
+      data-slot="file-upload"
+      type="button"
+      className={twMerge(
+        clsx("cursor-pointer text-gray-500 hover:text-gray-500/80", className),
+      )}
+      onClick={() => fileInputRef.current?.click()}
+      {...props}
+    >
+      <img
+        src={Appendix}
+        alt="upload"
+        className="w-5 h-5 dark:filter dark:filter-invert hover:scale-105"
+      />
+      <input
+        type="file"
+        className="hidden"
+        ref={fileInputRef}
+        onChange={handleChange}
+        multiple
+      />
+    </button>
+  );
+}

src/icons/appendix.svg

@@ -1,5 +1,6 @@
 export * from "./bubble";
 export * from "./button";
+export * from "./file-upload";
 export * from "./list";
 export * from "./prompt";
 export * from "./sender";