@majapisoftwares/ui 4.3.16 → 5.0.0

package/components/Drawer/Drawer.d.ts

@@ -1,15 +0,0 @@
-import { type ReactNode } from "react";
-export type DialogProps = {
-    open?: boolean;
-    onClose?: (open: boolean) => void;
-    onChangeOpen?: (open: boolean) => void;
-    title?: ReactNode;
-    children: ReactNode;
-    position?: "left" | "right";
-    actions?: ReactNode;
-    hideOverlay?: boolean;
-    className?: string;
-    noPadding?: boolean;
-    panelClassName?: string;
-};
-export default function Drawer({ open: defaultOpen, onClose, onChangeOpen, title, children, position, actions, hideOverlay, className, noPadding, panelClassName, }: DialogProps): import("react").JSX.Element;

package/components/Drawer/Drawer.jsx

@@ -1,72 +0,0 @@
-import { Fragment, useCallback, useEffect, useState, } from "react";
-import { Dialog as HuiDialog, Transition } from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import Button from "../Button/Button";
-import Group from "../Group/Group";
-import clsx from "../../utils/clsx";
-export default function Drawer({ open: defaultOpen, onClose, onChangeOpen, title, children, position = "left", actions, hideOverlay, className, noPadding, panelClassName, }) {
-    const [open, setOpen] = useState(defaultOpen);
-    useEffect(() => {
-        if (onClose && !open) {
-            onClose(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-    useEffect(() => {
-        if (onChangeOpen) {
-            onChangeOpen(open || false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-    useEffect(() => {
-        setOpen(defaultOpen);
-    }, [defaultOpen]);
-    return (<Transition.Root show={open} as={Fragment}>
-      <HuiDialog as="div" className={clsx("relative z-20", className)} onClose={setOpen}>
-        {!hideOverlay ? (<Transition.Child as={Fragment} enter="ease-in-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in-out duration-300" leaveFrom="opacity-100" leaveTo="opacity-0">
-            <div className="bg-opacity-75 fixed inset-0 bg-black/70 transition-opacity"/>
-          </Transition.Child>) : (<div className="fixed inset-0"/>)}
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
-            <div className={clsx("pointer-events-none fixed inset-y-0 flex max-w-full", {
-            ["left-0 pr-10"]: !noPadding && position === "left",
-            ["right-0 pl-10"]: !noPadding && position === "right",
-        })}>
-              <Transition.Child as={Fragment} enter="transform transition ease-in-out duration-300 sm:duration-500" enterFrom={position === "right"
-            ? "translate-x-full"
-            : "-translate-x-full"} enterTo={position === "right" ? "translate-x-0" : "translate-x-0"} leave="transform transition ease-in-out duration-300 sm:duration-500" leaveFrom={position === "right" ? "translate-x-0" : "translate-x-0"} leaveTo={position === "right"
-            ? "translate-x-full"
-            : "-translate-x-full"}>
-                <HuiDialog.Panel className="pointer-events-auto w-screen max-w-md">
-                  <div className={clsx("flex h-full flex-col divide-y divide-zinc-200 bg-white shadow-xl dark:bg-zinc-900", panelClassName)}>
-                    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto pb-6">
-                      <div className="sticky top-0 z-10 bg-white/95 px-4 py-6 backdrop-blur-sm sm:px-6 [@supports(backdrop-filter:blur(0))]:bg-white/50 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75">
-                        <div className="flex items-start">
-                          {title && (<HuiDialog.Title className="text-lg font-medium text-zinc-900">
-                              {title}
-                            </HuiDialog.Title>)}
-                          <div className="grow"/>
-                          <div className="ml-3 flex h-7 items-center">
-                            <Button icon variant="text" onClick={useCallback(() => setOpen(false), [])}>
-                              <XMarkIcon className="h-6 w-6" aria-hidden="true"/>
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="relative flex-1 px-4 pt-1 sm:px-6">
-                        {children}
-                      </div>
-                    </div>
-                    {actions && (<Group className="shrink-0 justify-end px-4 py-4">
-                        {actions}
-                      </Group>)}
-                  </div>
-                </HuiDialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
-        </div>
-      </HuiDialog>
-    </Transition.Root>);
-}

package/components/Drawer/index.d.ts

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

package/components/Drawer/index.jsx

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

package/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,33 +0,0 @@
-import React, { type ComponentProps } from "react";
-import * as RDropdownMenu from "@radix-ui/react-dropdown-menu";
-declare function DropdownMenuContent({ className, arrowClassName, children, sideOffset, collisionPadding, ...props }: ComponentProps<typeof RDropdownMenu.Content> & {
-    arrowClassName?: string;
-}): React.JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof RDropdownMenu.Separator>): React.JSX.Element;
-declare function DropdownMenuItem({ className, href, target, ...props }: ComponentProps<typeof RDropdownMenu.Item> & {
-    href?: string;
-    target?: string;
-}): React.JSX.Element;
-declare function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof RDropdownMenu.Item>): React.JSX.Element;
-declare function DropdownMenuItemIndicator({ className, ...props }: ComponentProps<typeof RDropdownMenu.ItemIndicator>): React.JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, indicatorClassName, ...props }: ComponentProps<typeof RDropdownMenu.CheckboxItem> & {
-    indicatorClassName?: string;
-}): React.JSX.Element;
-declare function DropdownMenuSubContent({ className, children, sideOffset, alignOffset, ...props }: ComponentProps<typeof RDropdownMenu.SubContent>): React.JSX.Element;
-declare function DropdownMenuSubTrigger({ className, href, children, ...props }: ComponentProps<typeof RDropdownMenu.SubTrigger> & {
-    href?: string;
-}): React.JSX.Element;
-declare const DropdownMenu: {
-    Root: React.FC<RDropdownMenu.DropdownMenuProps>;
-    Trigger: React.ForwardRefExoticComponent<RDropdownMenu.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: typeof DropdownMenuContent;
-    Item: typeof DropdownMenuItem;
-    Separator: typeof DropdownMenuSeparator;
-    CheckboxItem: typeof DropdownMenuCheckboxItem;
-    Label: typeof DropdownMenuLabel;
-    ItemIndicator: typeof DropdownMenuItemIndicator;
-    Sub: React.FC<RDropdownMenu.DropdownMenuSubProps>;
-    SubContent: typeof DropdownMenuSubContent;
-    SubTrigger: typeof DropdownMenuSubTrigger;
-};
-export default DropdownMenu;

package/components/DropdownMenu/DropdownMenu.jsx

@@ -1,74 +0,0 @@
-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 top-1.5 right-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

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

package/components/DropdownMenu/index.jsx

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

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,18 +0,0 @@
-import { Component, type ErrorInfo, type 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

@@ -1,32 +0,0 @@
-"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

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

package/components/ErrorBoundary/index.jsx

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

package/components/ErrorPage/Error404Page.d.ts

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

package/components/ErrorPage/Error404Page.jsx

@@ -1,4 +0,0 @@
-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

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

package/components/ErrorPage/Error500Page.jsx

@@ -1,4 +0,0 @@
-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

@@ -1,11 +0,0 @@
-import type { 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

@@ -1,23 +0,0 @@
-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="bg-opacity-75 text-opacity-75 sm:bg-opacity-25 sm:hover:bg-opacity-50 inline-flex items-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-black">
-      {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-opacity-50 text-base font-semibold text-black">
-          {error}
-        </p>
-        <h1 className="mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl">
-          {title}
-        </h1>
-        <p className="text-opacity-50 mt-2 text-lg font-medium text-black">
-          {description}
-        </p>
-        <div className="mt-6">{action}</div>
-      </div>
-    </main>);
-}

package/components/FileInput/FileInput.d.ts

@@ -1,53 +0,0 @@
-import { type ComponentPropsWithRef, type ComponentType, type ReactNode } from "react";
-import { type InputProps } from "../Input";
-import { type FileSelectProps } from "../FileSelect";
-import { type PreviewFileProps } from "./PreviewFile";
-export type FileFile = {
-    _id: string;
-    file: File;
-    description?: string;
-    name: string;
-    type: string;
-    size: number;
-    url: string;
-};
-export type FileUrl = {
-    _id: string;
-    url: string;
-    description?: string;
-    name: string;
-    type: string;
-    size: number;
-};
-export type FileInputFile = FileFile | FileUrl;
-declare function FileInput<PFP extends object>({ 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, previewFileComponent, previewFileProps, filesClassName, ...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;
-    previewFileComponent?: ComponentType<PreviewFileProps & PFP>;
-    previewFileProps?: PFP;
-    filesClassName?: string;
-}): import("react").JSX.Element;
-export type FileInputProps = ComponentPropsWithRef<typeof FileInput>;
-declare const _default: typeof FileInput;
-export default _default;

package/components/FileInput/FileInput.jsx

@@ -1,141 +0,0 @@
-import clsx from "../../utils/clsx";
-import { memo, useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { useDeepCompareEffect } 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, previewFileComponent, previewFileProps, filesClassName, ...props }) {
-    const [uploading, setUploading] = useState(false);
-    const [innerValue, setInnerValue] = useState(value || []);
-    const [currentPage, setCurrentPage] = useState(1);
-    const PreviewFileComponent = useMemo(() => memo(previewFileComponent || PreviewFile, isEqual), [previewFileComponent]);
-    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 }]);
-    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,
-                    url: URL.createObjectURL(file),
-                })),
-            ]);
-        }
-        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,
-                        url: URL.createObjectURL(file),
-                    });
-                    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);
-        }
-    };
-    useDeepCompareEffect(() => {
-        if (onChange) {
-            onChange({
-                target: {
-                    name,
-                    value: innerValue,
-                },
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            });
-        }
-    }, [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("flex flex-col gap-4", {
-            "md:grid md:grid-cols-2": !!innerValue.length,
-            "min-h-[140px]": !!innerValue.length || !readOnly,
-        }, filesClassName)}>
-        {paginatedValue.map((file, index) => (<PreviewFileComponent key={index} file={file} readOnly={readOnly} handleDeleteClick={handleDeleteClick(file)} downloadText={downloadText} display={fileDisplay} openText={openText} additionalInfo={fileAdditionalInfo} index={index} className={previewFileClassName} filesPerPage={filesPerPage} currentPage={currentPage} {...previewFileProps}/>))}
-        {innerValue.length > filesPerPage && (<Pagination className="mx-auto md:col-span-2" 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 memo(FileInput, isEqual);

package/components/FileInput/PreviewFile.d.ts

@@ -1,18 +0,0 @@
-import type { FileInputFile } from "./FileInput";
-import { type ReactNode } from "react";
-export type PreviewFileProps = {
-    file: FileInputFile;
-    readOnly?: boolean;
-    handleDeleteClick: () => void;
-    downloadText: string;
-    openText: string;
-    display?: "info" | "preview" | "both";
-    additionalInfo?: (file: FileInputFile, index: number) => ReactNode;
-    index: number;
-    className?: string;
-    filesPerPage: number;
-    currentPage: number;
-};
-declare function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display, additionalInfo, index, className, filesPerPage, currentPage, }: PreviewFileProps): import("react").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof PreviewFile>;
-export default _default;

package/components/FileInput/PreviewFile.jsx

@@ -1,54 +0,0 @@
-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 { memo } from "react";
-import clsx from "../../utils/clsx";
-import checkIsVideo from "./isVideo";
-import checkIsImage from "./isImage";
-import { isEqual } from "lodash-es";
-function PreviewFile({ file, readOnly, handleDeleteClick, downloadText, openText, display = "info", additionalInfo, index, className, filesPerPage, currentPage, }) {
-    const isVideo = file.type?.startsWith("video") || checkIsVideo(file.url);
-    const isImage = file.type?.startsWith("image") || checkIsImage(file.url);
-    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={file.url} controls/>) : (
-            // eslint-disable-next-line @next/next/no-img-element
-            <img src={file.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>)}
-              {!file.url.startsWith("blob") && (<Group className="mr-auto">
-                  <Button leading={<ArrowTopRightOnSquareIcon />} href={file.url} target="_blank">
-                    {openText}
-                  </Button>
-                  <Button leading={<ArrowDownTrayIcon />} href={file.url} download={file.name}>
-                    {downloadText}
-                  </Button>
-                </Group>)}
-            </Stack>
-            {additionalInfo &&
-                additionalInfo(file, index + (currentPage - 1) * filesPerPage)}
-          </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>);
-}
-export default memo(PreviewFile, isEqual);

package/components/FileInput/index.d.ts

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

package/components/FileInput/index.jsx

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

package/components/FileInput/isImage.d.ts

@@ -1 +0,0 @@
-export default function isImage(file: File | string): boolean;

package/components/FileInput/isImage.js

@@ -1,10 +0,0 @@
-const imageExtensions = [".png", ".jpg", ".jpeg", ".webp"];
-export default function isImage(file) {
-    if (typeof file === "string") {
-        return imageExtensions.some((ext) => file.endsWith(ext));
-    }
-    if (file instanceof File) {
-        return imageExtensions.some((ext) => file.name.endsWith(ext));
-    }
-    return false;
-}

package/components/FileInput/isVideo.d.ts

@@ -1 +0,0 @@
-export default function isVideo(file: File | string): boolean;