@majapisoftwares/ui 4.0.2

package/components/DropdownMenu/DropdownMenu.jsx

@@ -0,0 +1,74 @@
+import React, { Fragment } from "react";
+import * as RDropdownMenu from "@radix-ui/react-dropdown-menu";
+import clsx from "../../utils/clsx";
+import { CheckIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import { dropdownCheckboxItemClassName, dropdownItemClassName, dropdownItemIndicatorClassName, dropdownLabelClassName, dropdownSeparatorClassName, } from "../../styles/Dropdown.classNames";
+import { modalArrowClassName, modalContentClassName, } from "../../styles/Modal.classNames";
+function DropdownMenuContent({ className, arrowClassName, children, sideOffset = 4, collisionPadding = 8, ...props }) {
+    return (<RDropdownMenu.Portal>
+      <RDropdownMenu.Content sideOffset={sideOffset} collisionPadding={collisionPadding} {...props} className={clsx(modalContentClassName, "ui-dropdown-menu-content", className)}>
+        {children}
+        <RDropdownMenu.Arrow className={clsx(modalArrowClassName, "ui-dropdown-menu-arrow", arrowClassName)}/>
+      </RDropdownMenu.Content>
+    </RDropdownMenu.Portal>);
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (<RDropdownMenu.Separator {...props} className={clsx(dropdownSeparatorClassName, "ui-dropdown-menu-separator", className)}/>);
+}
+function DropdownMenuItem({ className, href, target, ...props }) {
+    const Wrapper = href ? Link : Fragment;
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Wrapper {...(href ? { href, target } : {})}>
+      <RDropdownMenu.Item {...props} className={clsx(dropdownItemClassName, "ui-dropdown-menu-item", className)}/>
+    </Wrapper>);
+}
+function DropdownMenuLabel({ className, ...props }) {
+    return (<RDropdownMenu.Item {...props} className={clsx(dropdownLabelClassName, "ui-dropdown-menu-label", className)}/>);
+}
+function DropdownMenuItemIndicator({ className, ...props }) {
+    return (<RDropdownMenu.ItemIndicator className={clsx(dropdownItemIndicatorClassName, "ui-dropdown-menu-checkbox-item-indicator", className)} {...props}/>);
+}
+function DropdownMenuCheckboxItem({ className, children, indicatorClassName, ...props }) {
+    return (<RDropdownMenu.CheckboxItem {...props} className={clsx(dropdownCheckboxItemClassName, "ui-dropdown-menu-checkbox-item", className)}>
+      <DropdownMenuItemIndicator className={indicatorClassName}>
+        <CheckIcon />
+      </DropdownMenuItemIndicator>
+      {children}
+    </RDropdownMenu.CheckboxItem>);
+}
+function DropdownMenuSubContent({ className, children, sideOffset = 2, alignOffset = -5, ...props }) {
+    return (<RDropdownMenu.Portal>
+      <RDropdownMenu.SubContent sideOffset={sideOffset} alignOffset={alignOffset} {...props} className={clsx(modalContentClassName, "ui-dropdown-menu-sub-content", className)}>
+        {children}
+      </RDropdownMenu.SubContent>
+    </RDropdownMenu.Portal>);
+}
+function DropdownMenuSubTrigger({ className, href, children, ...props }) {
+    const Wrapper = href ? Link : Fragment;
+    return (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    <Wrapper {...(href ? { href } : {})}>
+      <RDropdownMenu.SubTrigger {...props} className={clsx(dropdownItemClassName, "ui-dropdown-menu-sub-trigger", className)}>
+        {children}
+        <div className={clsx("absolute right-1.5 top-1.5 inline-flex items-center justify-center", "[&>svg]:h-4 [&>svg]:w-4")}>
+          <ChevronRightIcon />
+        </div>
+      </RDropdownMenu.SubTrigger>
+    </Wrapper>);
+}
+const DropdownMenu = {
+    Root: RDropdownMenu.Root,
+    Trigger: RDropdownMenu.Trigger,
+    Content: DropdownMenuContent,
+    Item: DropdownMenuItem,
+    Separator: DropdownMenuSeparator,
+    CheckboxItem: DropdownMenuCheckboxItem,
+    Label: DropdownMenuLabel,
+    ItemIndicator: DropdownMenuItemIndicator,
+    Sub: RDropdownMenu.Sub,
+    SubContent: DropdownMenuSubContent,
+    SubTrigger: DropdownMenuSubTrigger,
+};
+export default DropdownMenu;

package/components/DropdownMenu/index.d.ts

@@ -0,0 +1,3 @@
+import DropdownMenu from "./DropdownMenu";
+export * from "./DropdownMenu";
+export default DropdownMenu;

package/components/DropdownMenu/index.jsx

@@ -0,0 +1,3 @@
+import DropdownMenu from "./DropdownMenu";
+export * from "./DropdownMenu";
+export default DropdownMenu;

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+export default class ErrorBoundary extends Component<{
+    title?: ReactNode;
+    content?: ReactNode;
+    tryAgain?: string;
+    children: ReactNode;
+}, {
+    hasError: boolean;
+}> {
+    constructor(props: {
+        children: ReactNode;
+    });
+    static getDerivedStateFromError(_error: Error): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}

package/components/ErrorBoundary/ErrorBoundary.jsx

@@ -0,0 +1,32 @@
+"use client";
+import { Component } from "react";
+import Alert from "../Alert/Alert";
+import Button from "../Button/Button";
+export default class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        // Define a state variable to track whether is an error or not
+        this.state = { hasError: false };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    static getDerivedStateFromError(_error) {
+        // Update state so the next render will show the fallback UI
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error({ error, errorInfo });
+    }
+    render() {
+        // Check if the error is thrown
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return (<Alert variant="error" title={this.props.title || "Oops, there was an unexpected error"} actions={this.props.tryAgain && (<Button variant="text" color="error" onClick={() => this.setState({ hasError: false })}>
+                {this.props.tryAgain}
+              </Button>)}>
+          {this.props.content}
+        </Alert>);
+        }
+        // Return children components in case of no error
+        return this.props.children;
+    }
+}

package/components/ErrorBoundary/index.d.ts

@@ -0,0 +1,3 @@
+import ErrorBoundary from "./ErrorBoundary";
+export * from "./ErrorBoundary";
+export default ErrorBoundary;

package/components/ErrorBoundary/index.jsx

@@ -0,0 +1,3 @@
+import ErrorBoundary from "./ErrorBoundary";
+export * from "./ErrorBoundary";
+export default ErrorBoundary;

package/components/ErrorPage/Error404Page.d.ts

@@ -0,0 +1 @@
+export default function Error404Page(): import("react").JSX.Element;

package/components/ErrorPage/Error404Page.jsx

@@ -0,0 +1,4 @@
+import ErrorPage from "./ErrorPage";
+export default function Error404Page() {
+    return (<ErrorPage error={404} title="Uh oh! I think you're lost." description="It looks like the page you're looking for doesn't exist."/>);
+}

package/components/ErrorPage/Error500Page.d.ts

@@ -0,0 +1 @@
+export default function Error500Page(): import("react").JSX.Element;

package/components/ErrorPage/Error500Page.jsx

@@ -0,0 +1,4 @@
+import ErrorPage from "./ErrorPage";
+export default function Error500Page() {
+    return (<ErrorPage error={500} title="Something bad just happened..." description="Our servers could not handle your request. Don't worry, our development team was already notified. Try refreshing the page."/>);
+}

package/components/ErrorPage/ErrorPage.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export type ErrorProps = {
+    error: number;
+    background?: string;
+    title: string;
+    description: string;
+    defaultActionLabel?: string;
+    defaultActionHref?: string;
+    action?: ReactNode;
+};
+export default function ErrorPage({ error, background, title, description, defaultActionLabel, defaultActionHref, action, }: ErrorProps): import("react").JSX.Element;

package/components/ErrorPage/ErrorPage.jsx

@@ -0,0 +1,23 @@
+import Button from "../Button/Button";
+import { NextSeo } from "next-seo";
+export default function ErrorPage({ error, background = "https://images.unsplash.com/photo-1545972154-9bb223aac798?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3050&q=80&exp=8&con=-15&sat=-75", title, description, defaultActionLabel = "Go back home", defaultActionHref = "/", action = (<Button variant="text" href={defaultActionHref} className="inline-flex items-center rounded-md border border-transparent bg-white bg-opacity-75 px-4 py-2 text-sm font-medium text-black text-opacity-75 sm:bg-opacity-25 sm:hover:bg-opacity-50">
+      {defaultActionLabel}
+    </Button>), }) {
+    return (<main className="min-h-full bg-slate-400 bg-cover bg-top sm:bg-top" style={{
+            backgroundImage: `url("${background}")`,
+        }}>
+      <NextSeo title={error.toString()}/>
+      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8 lg:py-48">
+        <p className="text-base font-semibold text-black text-opacity-50">
+          {error}
+        </p>
+        <h1 className="mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl">
+          {title}
+        </h1>
+        <p className="mt-2 text-lg font-medium text-black text-opacity-50">
+          {description}
+        </p>
+        <div className="mt-6">{action}</div>
+      </div>
+    </main>);
+}

package/components/FileInput/FileInput.d.ts

@@ -0,0 +1,47 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { InputProps } from "../Input";
+import { FileSelectProps } from "../FileSelect";
+export type FileFile = {
+    _id: string;
+    file: File;
+    description?: string;
+    name: string;
+    type: string;
+    size: number;
+};
+export type FileUrl = {
+    _id: string;
+    url: string;
+    description?: string;
+    name: string;
+    type: string;
+    size: number;
+};
+export type FileInputFile = FileFile | FileUrl;
+declare function FileInput({ error, className, helpText, onChange, name, limit, label, id, required, onMouseOver, onMouseOut, readOnly, value, emptyText, downloadText, openText, fileDisplay, asyncUpload, onRejectFiles, loading, maxConcurrentUploads, fileAdditionalInfo, ref, fileSelectClassName, previewFileClassName, filesPerPage, ...props }: Pick<InputProps<false>, "error" | "className" | "helpText" | "name" | "label" | "id" | "required" | "onMouseOver" | "onMouseOut"> & Omit<FileSelectProps, "onAcceptFiles" | "onRejectFiles"> & {
+    readOnly?: boolean;
+    value?: FileInputFile[];
+    onChange?: (event: {
+        target: {
+            value: FileInputFile[];
+        };
+    }) => void;
+    emptyText?: string;
+    downloadText?: string;
+    openText?: string;
+    fileDisplay?: "info" | "preview" | "both";
+    asyncUpload?: (file: FileFile & {
+        _id: string;
+    }) => Promise<FileUrl & {
+        _id: string;
+    }>;
+    onRejectFiles?: (files: File[], reason: "type" | "size" | "limit" | "upload-error") => void;
+    loading?: boolean;
+    maxConcurrentUploads?: number;
+    fileAdditionalInfo?: (file: FileInputFile, index: number) => ReactNode;
+    fileSelectClassName?: string;
+    previewFileClassName?: string;
+    filesPerPage?: number;
+}): import("react").JSX.Element;
+export type FileInputProps = ComponentPropsWithRef<typeof FileInput>;
+export default FileInput;

package/components/FileInput/FileInput.jsx

@@ -0,0 +1,144 @@
+import clsx from "../../utils/clsx";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { useDeepCompareEffect, useUpdateEffect } from "react-use";
+import { defaultHelpTextClassName, defaultLabelClassName, } from "../Input";
+import FileSelect from "../FileSelect";
+import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
+import { isEqual } from "lodash-es";
+import Text from "../Text";
+import { PreviewFile } from "./PreviewFile";
+import concurrentForOf from "@majapisoftwares/next/utils/concurrentForOf";
+import paginated from "@majapisoftwares/next/utils/paginated";
+import Pagination from "../Pagination";
+function FileInput({ error, className, helpText, onChange, name, limit, label, id, required, onMouseOver, onMouseOut, readOnly, value, emptyText = "No files", downloadText = "Download", openText = "Open", fileDisplay, asyncUpload, onRejectFiles, loading, maxConcurrentUploads = 1, fileAdditionalInfo, ref, fileSelectClassName, previewFileClassName, filesPerPage = 10, ...props }) {
+    const [uploading, setUploading] = useState(false);
+    const [innerValue, setInnerValue] = useState(value || []);
+    const [currentPage, setCurrentPage] = useState(1);
+    const paginatedValue = paginated(innerValue, currentPage - 1, filesPerPage);
+    useEffect(() => {
+        const totalPages = Math.ceil(innerValue.length / filesPerPage);
+        if (currentPage > totalPages && totalPages > 0) {
+            setCurrentPage(totalPages);
+        }
+    }, [innerValue.length, currentPage, filesPerPage]);
+    useDeepCompareEffect(() => {
+        if (value && !isEqual(value, innerValue)) {
+            setInnerValue(value);
+        }
+    }, [{ value: value }]);
+    const innerRef = useRef({
+        get value() {
+            return innerValue;
+        },
+        set value(value) {
+            setInnerValue(value || []);
+        },
+    });
+    useEffect(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                ref(innerRef.current);
+            }
+            else {
+                try {
+                    ref.current = innerRef.current;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // do nothing
+                }
+            }
+        }
+    }, [ref]);
+    const handleAcceptFiles = async (files) => {
+        if (!asyncUpload) {
+            setInnerValue((value) => [
+                ...value,
+                ...files
+                    .filter((_file, index) => !limit || index <= limit - value.length - 1)
+                    .map((file) => ({
+                    _id: isomorphicObjectId().toString(),
+                    name: file.name,
+                    file,
+                    type: file.type,
+                    size: file.size,
+                })),
+            ]);
+        }
+        else {
+            setUploading(true);
+            if (onRejectFiles) {
+                const rejectedFilesLimit = files.filter((_file, index) => !(!limit || index <= limit - innerValue.length - 1));
+                if (rejectedFilesLimit.length) {
+                    onRejectFiles(rejectedFilesLimit, "limit");
+                }
+            }
+            const acceptedFiles = files.filter((_file, index) => !limit || index <= limit - innerValue.length - 1);
+            const filesNotUploaded = [];
+            await concurrentForOf(acceptedFiles, async (file) => {
+                try {
+                    const uploadedFile = await asyncUpload({
+                        _id: isomorphicObjectId().toString(),
+                        name: file.name,
+                        file,
+                        type: file.type,
+                        size: file.size,
+                    });
+                    setInnerValue((value) => [...value, uploadedFile]);
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    filesNotUploaded.push(file);
+                }
+            }, maxConcurrentUploads);
+            if (onRejectFiles && filesNotUploaded.length) {
+                onRejectFiles(filesNotUploaded, "upload-error");
+            }
+            setUploading(false);
+        }
+    };
+    useUpdateEffect(() => {
+        if (onChange) {
+            onChange({
+                target: {
+                    name,
+                    value: innerValue.map((file) => ({
+                        ...file,
+                        url: file.file
+                            ? URL.createObjectURL(file.file)
+                            : file.url,
+                    })),
+                },
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [innerValue]);
+    const handleDeleteClick = useCallback((clickedFile) => () => {
+        setInnerValue((value) => [
+            ...value.filter((file) => file !== clickedFile),
+        ]);
+    }, []);
+    return (<div data-input-name={name} data-error={error ? "" : undefined} data-loading={loading ? "" : undefined} className={clsx("relative data-loading:animate-pulse", className)} onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
+      {label && (<label htmlFor={id} className={defaultLabelClassName}>
+          {label}
+          {required && (<>
+              {" "}
+              <span className="text-red-500">*</span>
+            </>)}
+        </label>)}
+      <div className={clsx("grid grid-cols-1 gap-4", {
+            "md:grid-cols-2": !!innerValue.length,
+            "min-h-[140px]": !!innerValue.length || !readOnly,
+        })}>
+        {paginatedValue.map((file, index) => (<PreviewFile key={index} file={file} readOnly={readOnly} handleDeleteClick={handleDeleteClick(file)} downloadText={downloadText} display={fileDisplay} openText={openText} additionalInfo={fileAdditionalInfo} index={index} className={previewFileClassName}/>))}
+        {innerValue.length > filesPerPage && (<Pagination className="col-span-2 mx-auto" currentPage={currentPage} totalItems={innerValue.length} onChangePage={setCurrentPage} itemsPerPage={filesPerPage}/>)}
+        {readOnly && !innerValue.length && (<Text variant="secondary">{emptyText}</Text>)}
+        {!readOnly && (!limit || innerValue.length < limit) && (<FileSelect {...props} className={fileSelectClassName} id={id} onAcceptFiles={handleAcceptFiles} limit={limit ? limit - innerValue.length : undefined} uploading={uploading} onRejectFiles={onRejectFiles} error={error}/>)}
+      </div>
+      {helpText && (<div className={clsx(defaultHelpTextClassName, "in-data-error:text-error-500")}>
+          {helpText}
+        </div>)}
+    </div>);
+}
+export default FileInput;

package/components/FileInput/PreviewFile.d.ts

@@ -0,0 +1,13 @@
+import { FileInputFile } from "./FileInput";
+import { ReactNode } from "react";
+export declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, }: {
+    file: FileInputFile;
+    readOnly?: boolean;
+    handleDeleteClick: () => void;
+    downloadText: string;
+    openText: string;
+    display?: "info" | "preview" | "both";
+    additionalInfo?: (file: FileInputFile, index: number) => ReactNode;
+    index: number;
+    className?: string;
+}): import("react").JSX.Element;

package/components/FileInput/PreviewFile.jsx

@@ -0,0 +1,55 @@
+import Group from "../Group";
+import { ArrowDownTrayIcon, DocumentIcon } from "@heroicons/react/24/outline";
+import Stack from "../Stack";
+import Text from "../Text";
+import numeral from "numeral";
+import Button from "../Button";
+import { ArrowTopRightOnSquareIcon, TrashIcon, } from "@heroicons/react/20/solid";
+import clsx from "../../utils/clsx";
+const videoExtensions = [".mp4"];
+const imageExtensions = [".png", ".jpg", ".jpeg", ".webp"];
+export function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, }) {
+    const url = file.file
+        ? URL.createObjectURL(file.file)
+        : file.url;
+    const isVideo = file.type?.startsWith("video") ||
+        videoExtensions.some((e) => url.endsWith(e));
+    const isImage = file.type?.startsWith("image") ||
+        imageExtensions.some((e) => url.endsWith(e));
+    if (display === "preview" && !isVideo && !isImage) {
+        display = "info";
+    }
+    return (<div className={clsx("group relative flex flex-wrap items-center justify-center rounded-md bg-zinc-200 dark:bg-zinc-800", className)}>
+      {["preview", "both"].includes(display) &&
+            (isVideo ? (<video className="max-h-96 rounded-md" src={url} controls/>) : (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={url} alt={file.description} className="max-h-96 rounded-md"/>))}
+      {["info", "both"].includes(display) && (<Group className="w-full items-center gap-0">
+          {display === "info" && (<div className="m-2 mr-0 rounded-lg bg-zinc-300 p-2 dark:bg-zinc-800">
+              <DocumentIcon className="h-5 w-5"/>
+            </div>)}
+          <Stack className="w-full overflow-hidden p-3">
+            <Stack className="gap-1">
+              <div className="flex-1 truncate" title={file.name}>
+                {file.name}
+              </div>
+              {file.description && <div>{file.description}</div>}
+              <Text size="sm">{file.type}</Text>
+              {!!file.size && (<Text size="sm">{numeral(file.size).format("0b")}</Text>)}
+              {!url.startsWith("blob") && (<Group className="mr-auto">
+                  <Button leading={<ArrowTopRightOnSquareIcon />} href={url} target="_blank">
+                    {openText}
+                  </Button>
+                  <Button leading={<ArrowDownTrayIcon />} href={url} download={file.name}>
+                    {downloadText}
+                  </Button>
+                </Group>)}
+            </Stack>
+            {additionalInfo && additionalInfo(file, index)}
+          </Stack>
+        </Group>)}
+      {!readOnly && (<Button icon variant="filled" color="default" className="absolute top-2 right-2 group-hover:opacity-100 sm:opacity-0" onClick={handleDeleteClick}>
+          <TrashIcon />
+        </Button>)}
+    </div>);
+}

package/components/FileInput/index.d.ts

@@ -0,0 +1,3 @@
+import FileInput from "./FileInput";
+export * from "./FileInput";
+export default FileInput;

package/components/FileInput/index.jsx

@@ -0,0 +1,3 @@
+import FileInput from "./FileInput";
+export * from "./FileInput";
+export default FileInput;

package/components/FileSelect/FileSelect.d.ts

@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode, Ref } from "react";
+export interface FileSelectProps {
+    uploadAFileText?: string;
+    orDragAndDropText?: string;
+    upToText?: string;
+    anyFileText?: string;
+    dropFilesHereText?: string;
+    uploadingText?: string;
+    maxFileSize?: number | string;
+    allowedFileTypes?: string[];
+    id?: string;
+    limit?: number;
+    onAcceptFiles: (files: File[]) => void;
+    onRejectFiles?: (files: File[], reason: "type" | "size") => void;
+    helperText?: string;
+    className?: string;
+    error?: boolean;
+    icon?: ReactElement<{
+        className?: string;
+    }>;
+    uploading?: boolean;
+    disabled?: boolean;
+    additionalBottomInfo?: ReactNode;
+    ref?: Ref<HTMLInputElement>;
+    innerClassName?: string;
+}
+declare function FileSelect({ maxFileSize, allowedFileTypes, id, limit, onAcceptFiles, className, uploadAFileText, orDragAndDropText, upToText, anyFileText, dropFilesHereText, uploadingText, icon, uploading, disabled, additionalBottomInfo, onRejectFiles, error, ref, innerClassName, }: FileSelectProps): import("react").JSX.Element;
+export default FileSelect;
+export declare function FileSelectProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/components/FileSelect/FileSelect.jsx

@@ -0,0 +1,143 @@
+import { cloneElement, useCallback, useEffect, useId, useState, } from "react";
+import clsx from "../../utils/clsx";
+import { DndProvider, useDrop } from "react-dnd";
+import { HTML5Backend, NativeTypes } from "react-dnd-html5-backend";
+import numeral from "numeral";
+import { ArrowUpTrayIcon } from "@heroicons/react/24/solid";
+import { DocumentIcon } from "@heroicons/react/24/outline";
+import Loading from "../Loading";
+const translateAllowedType = (type) => ({
+    "image/png": "PNG",
+    ".png": "PNG",
+    "image/jpeg": "JPG",
+    ".jpg": "JPG",
+    ".jpeg": "JPG",
+    ".gif": "GIF",
+    "image/gif": "GIF",
+    "video/mp4": "MP4",
+    ".mp4": "MP4",
+    ".csv": "CSV",
+    "audio/mpeg": "MP3",
+    "application/pdf": "PDF",
+    "text/csv": "CSV",
+    "application/msword": "DOC",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation": "PPTX",
+    ".webp": "WEBP",
+    "image/webp": "WEBP",
+})[type] || type;
+const defaultIcon = <DocumentIcon />;
+function checkAllowedFileTypesFn(file, allowedFileTypes) {
+    return (!allowedFileTypes ||
+        allowedFileTypes.includes(file.type) ||
+        allowedFileTypes.some((t) => file.name.endsWith(t)));
+}
+function FileSelect({ maxFileSize, allowedFileTypes, id, limit, onAcceptFiles, className, uploadAFileText = "Upload a file", orDragAndDropText = "or drag and drop", upToText = "up to", anyFileText = "Any file", dropFilesHereText = "Drop files here", uploadingText = "Uploading...", icon = defaultIcon, uploading, disabled, additionalBottomInfo, onRejectFiles, error, ref, innerClassName, }) {
+    const innerId = useId();
+    id = id || innerId;
+    maxFileSize =
+        typeof maxFileSize === "string"
+            ? numeral(maxFileSize).value() || undefined
+            : maxFileSize;
+    maxFileSize = maxFileSize || numeral("10MB").value() || undefined;
+    const checkAllowedFileTypes = useCallback((file) => checkAllowedFileTypesFn(file, allowedFileTypes), [allowedFileTypes]);
+    const handleFileBrowse = (event) => {
+        if (!event.target.files) {
+            throw Error("Files is falsy");
+        }
+        const files = Array.from(event.target.files);
+        const acceptedFiles = files.filter((file) => checkAllowedFileTypes(file) && file.size <= maxFileSize);
+        if (onRejectFiles) {
+            const rejectedFilesType = files.filter((file) => !checkAllowedFileTypes(file));
+            if (rejectedFilesType.length) {
+                onRejectFiles(rejectedFilesType, "type");
+            }
+            const rejectedFilesSize = files.filter((file) => file.size > maxFileSize);
+            if (rejectedFilesSize.length) {
+                onRejectFiles(rejectedFilesSize, "size");
+            }
+        }
+        onAcceptFiles(acceptedFiles);
+        event.target.value = "";
+    };
+    const [pasteEnabled, setPasteEnabled] = useState(false);
+    useOnPasteFiles(pasteEnabled, onAcceptFiles, allowedFileTypes);
+    const [{ canDrop, isOver }, drop] = useDrop(() => ({
+        accept: [NativeTypes.FILE],
+        drop(item) {
+            if (!disabled) {
+                let files = item.files;
+                files = files.filter(checkAllowedFileTypes);
+                onAcceptFiles(files);
+            }
+        },
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    }));
+    return (<div ref={(ref) => {
+            drop(ref);
+        }} className={clsx("flex justify-center rounded-md border-2 border-dashed px-6 pt-5 pb-6", "border-zinc-300 hover:border-zinc-400 dark:border-zinc-700 dark:hover:border-zinc-600", "data-is-over:border-primary-300 data-is-over:dark:border-primary-700", "data-disabled:cursor-not-allowed data-disabled:border-zinc-200", "data-error:border-error-500", className)} data-is-over={isOver || undefined} data-error={error || undefined} data-disabled={disabled || undefined} onMouseMove={!disabled ? () => setPasteEnabled(true) : undefined} onMouseOut={!disabled ? () => setPasteEnabled(false) : undefined}>
+      {uploading ? (<div className={clsx("flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
+          <Loading className={clsx("h-10 w-10", {
+                "text-primary-500": isOver,
+            })}/>
+          <div>{uploadingText}</div>
+        </div>) : !canDrop || disabled ? (<div className={clsx("relative flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
+          {cloneElement(icon, {
+                className: clsx("mx-auto h-12 w-12 text-zinc-400", icon.props.className),
+            })}
+          <div className="text-sm">
+            <label htmlFor={id} className={clsx("text-primary-600 focus-within:ring-primary-500 hover:text-primary-500 relative rounded-md font-medium focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-hidden dark:ring-offset-slate-900", {
+                "cursor-pointer": !disabled,
+                "cursor-not-allowed": disabled,
+            })}>
+              <span>{uploadAFileText}</span>
+              {!disabled && (<input id={id} name={id} type="file" className="sr-only" accept={allowedFileTypes?.join(",")} onChange={handleFileBrowse} multiple={limit !== 1} ref={ref}/>)}
+            </label>
+            <span className="pl-1">{orDragAndDropText}</span>
+          </div>
+          <p className="text-xs text-zinc-500">
+            {allowedFileTypes
+                ? allowedFileTypes.map(translateAllowedType).join(", ")
+                : anyFileText}{" "}
+            {upToText} {numeral(maxFileSize).format("0b")}
+          </p>
+          {additionalBottomInfo}
+        </div>) : (<div className={clsx("flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
+          <ArrowUpTrayIcon className={clsx("w-10 text-7xl", {
+                "text-primary-500": isOver,
+            })}/>
+          <div>{dropFilesHereText}</div>
+        </div>)}
+    </div>);
+}
+export default FileSelect;
+const useOnPasteFiles = (enabled, onAcceptFiles, allowedFileTypes) => {
+    useEffect(() => {
+        if (enabled) {
+            document.onpaste = function (event) {
+                const items = 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (event.clipboardData || event.originalEvent.clipboardData)
+                    .items;
+                for (const index in items) {
+                    const item = items[index];
+                    if (item.kind === "file") {
+                        const file = item.getAsFile();
+                        if (checkAllowedFileTypesFn(file, allowedFileTypes)) {
+                            onAcceptFiles([file]);
+                        }
+                    }
+                }
+            };
+            return () => {
+                document.onpaste = null;
+            };
+        }
+    }, [allowedFileTypes, enabled, onAcceptFiles]);
+};
+export function FileSelectProvider({ children }) {
+    return <DndProvider backend={HTML5Backend}>{children}</DndProvider>;
+}