@pol-studios/ui 1.0.0

package/dist/file/index.js

@@ -0,0 +1,256 @@
+"use client";
+
+// src/file/dropzone.tsx
+import { CheckCircle, File, Loader2, Upload, X } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext
+} from "react";
+
+// src/primitives/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@pol-studios/utils";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/file/dropzone.tsx
+import { cn as cn2 } from "@pol-studios/utils";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var formatBytes = (bytes, decimals = 2, size) => {
+  const k = 1e3;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  if (bytes === 0 || bytes === void 0)
+    return size !== void 0 ? `0 ${size}` : "0 bytes";
+  const i = size !== void 0 ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+var DropzoneContext = createContext(
+  void 0
+);
+var Dropzone = ({
+  className,
+  children,
+  getRootProps,
+  getInputProps,
+  ...restProps
+}) => {
+  const isSuccess = restProps.isSuccess;
+  const isActive = restProps.isDragActive;
+  const isInvalid = restProps.isDragActive && restProps.isDragReject || restProps.errors.length > 0 && !restProps.isSuccess || restProps.files.some((file) => file.errors.length !== 0);
+  return /* @__PURE__ */ jsx2(DropzoneContext.Provider, { value: { ...restProps }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getRootProps({
+        className: cn2(
+          "border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground",
+          className,
+          isSuccess ? "border-solid" : "border-dashed",
+          isActive && "border-primary bg-primary/10",
+          isInvalid && "border-destructive bg-destructive/10"
+        )
+      }),
+      children: [
+        /* @__PURE__ */ jsx2("input", { ...getInputProps() }),
+        children
+      ]
+    }
+  ) });
+};
+var DropzoneContent = ({ className }) => {
+  const {
+    files,
+    setFiles,
+    onUpload,
+    loading,
+    successes,
+    errors,
+    maxFileSize,
+    maxFiles,
+    isSuccess
+  } = useDropzoneContext();
+  const exceedMaxFiles = files.length > maxFiles;
+  const handleRemoveFile = useCallback(
+    (fileName) => {
+      setFiles(files.filter((file) => file.name !== fileName));
+    },
+    [files, setFiles]
+  );
+  if (isSuccess) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn2(
+          "flex flex-row items-center gap-x-2 justify-center",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx2(CheckCircle, { size: 16, className: "text-primary" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-primary text-sm", children: [
+            "Successfully uploaded ",
+            files.length,
+            " file",
+            files.length > 1 ? "s" : ""
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn2("flex flex-col", className), children: [
+    files.map((file, idx) => {
+      const fileError = errors.find((e) => e.name === file.name);
+      const isSuccessfullyUploaded = !!successes.find((e) => e === file.name);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 ",
+          children: [
+            file.type.startsWith("image/") ? /* @__PURE__ */ jsx2("div", { className: "h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: file.preview,
+                alt: file.name,
+                className: "object-cover"
+              }
+            ) }) : /* @__PURE__ */ jsx2("div", { className: "h-10 w-10 rounded border bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsx2(File, { size: 18 }) }),
+            /* @__PURE__ */ jsxs("div", { className: "shrink grow flex flex-col items-start truncate", children: [
+              /* @__PURE__ */ jsx2("p", { title: file.name, className: "text-sm truncate max-w-full", children: file.name }),
+              file.errors.length > 0 ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-destructive", children: file.errors.map(
+                (e) => e.message.startsWith("File is larger than") ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})` : e.message
+              ).join(", ") }) : loading && !isSuccessfullyUploaded ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: "Uploading file..." }) : !!fileError ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-destructive", children: [
+                "Failed to upload: ",
+                fileError.message
+              ] }) : isSuccessfullyUploaded ? /* @__PURE__ */ jsx2("p", { className: "text-xs text-primary", children: "Successfully uploaded file" }) : /* @__PURE__ */ jsx2("p", { className: "text-xs text-muted-foreground", children: formatBytes(file.size, 2) })
+            ] }),
+            !loading && !isSuccessfullyUploaded && /* @__PURE__ */ jsx2(
+              Button,
+              {
+                size: "icon",
+                variant: "link",
+                className: "shrink-0 justify-self-end text-muted-foreground hover:text-foreground",
+                onClick: () => handleRemoveFile(file.name),
+                children: /* @__PURE__ */ jsx2(X, {})
+              }
+            )
+          ]
+        },
+        `${file.name}-${idx}`
+      );
+    }),
+    exceedMaxFiles && /* @__PURE__ */ jsxs("p", { className: "text-sm text-left mt-2 text-destructive", children: [
+      "You may upload only up to ",
+      maxFiles,
+      " files, please remove",
+      " ",
+      files.length - maxFiles,
+      " file",
+      files.length - maxFiles > 1 ? "s" : "",
+      "."
+    ] }),
+    files.length > 0 && !exceedMaxFiles && /* @__PURE__ */ jsx2("div", { className: "mt-2", children: /* @__PURE__ */ jsx2(
+      Button,
+      {
+        variant: "outline",
+        onClick: onUpload,
+        disabled: files.some((file) => file.errors.length !== 0) || loading,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+          "Uploading..."
+        ] }) : /* @__PURE__ */ jsx2(Fragment, { children: "Upload files" })
+      }
+    ) })
+  ] });
+};
+var DropzoneEmptyState = ({ className }) => {
+  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext();
+  if (isSuccess) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn2("flex flex-col items-center gap-y-2", className), children: [
+    /* @__PURE__ */ jsx2(Upload, { size: 20, className: "text-muted-foreground" }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm", children: [
+      "Upload",
+      !!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : "",
+      " file",
+      !maxFiles || maxFiles > 1 ? "s" : ""
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-1", children: [
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "Drag and drop or",
+        " ",
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            onClick: () => inputRef.current?.click(),
+            className: "underline cursor-pointer transition hover:text-foreground",
+            children: [
+              "select ",
+              maxFiles === 1 ? `file` : "files"
+            ]
+          }
+        ),
+        " ",
+        "to upload"
+      ] }),
+      maxFileSize !== Number.POSITIVE_INFINITY && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "Maximum file size: ",
+        formatBytes(maxFileSize, 2)
+      ] })
+    ] })
+  ] });
+};
+var useDropzoneContext = () => {
+  const context = useContext(DropzoneContext);
+  if (!context) {
+    throw new Error("useDropzoneContext must be used within a Dropzone");
+  }
+  return context;
+};
+export {
+  Dropzone,
+  DropzoneContent,
+  DropzoneEmptyState,
+  formatBytes,
+  useDropzoneContext
+};