@majapisoftwares/ui 4.1.16 → 4.2.0

package/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
-import React, { ComponentProps, ReactElement, ReactNode } from "react";
-import { DateRange, Matcher, ModifiersClassNames } from "react-day-picker";
+import React, { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import type { DayPickerProps } from "react-day-picker";
+import { type DateRange, type Matcher, type ModifiersClassNames } from "react-day-picker";
 import Button from "../Button";
-import type { DayPickerProps } from "react-day-picker/src/types/props";
 export type { DateRange };
 export default function DatePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, footer, monthFooter, modifiers, modifiersClassNames, disabled, defaultMonth, }: {
     value?: Date | string;

package/components/DatePicker/DatePicker.jsx

@@ -22,8 +22,8 @@ export default function DatePicker({ value, onValueChange, children, buttonProps
     const buttonText = useMemo(() => {
         return date ? dayjs(date).format("ll") : "";
     }, [date]);
-    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
-      {buttonText}
+    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
+      {buttonText}
     </Button>);
     const defaultDisabled = useMemo(() => [
         ...(fromDate
@@ -45,11 +45,11 @@ export default function DatePicker({ value, onValueChange, children, buttonProps
         setOpen(false);
         setDate(value);
     }, []);
-    return (<Popover.Root open={open} onOpenChange={setOpen}>
-      <Popover.Trigger asChild>{children2}</Popover.Trigger>
-      <Popover.Content>
-        <DayPicker mode="single" selected={date} onSelect={onSelect} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} footer={monthFooter} modifiers={modifiers} modifiersClassNames={modifiersClassNames} disabled={disabled || defaultDisabled} defaultMonth={defaultMonth}/>
-        {footer}
-      </Popover.Content>
+    return (<Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>{children2}</Popover.Trigger>
+      <Popover.Content>
+        <DayPicker mode="single" selected={date} onSelect={onSelect} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} footer={monthFooter} modifiers={modifiers} modifiersClassNames={modifiersClassNames} disabled={disabled || defaultDisabled} defaultMonth={defaultMonth}/>
+        {footer}
+      </Popover.Content>
     </Popover.Root>);
 }

package/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentProps, ReactElement, ReactNode } from "react";
-import { DateRange } from "react-day-picker";
+import React, { type ComponentProps, type ReactElement, type ReactNode } from "react";
+import { type DateRange } from "react-day-picker";
 import Button from "../Button";
 export type { DateRange };
 export default function DateRangePicker({ value, onValueChange, children, buttonProps, fromDate, toDate, min, max, footer, monthFooter, }: {

package/components/DateRangePicker/DateRangePicker.jsx

@@ -27,8 +27,8 @@ export default function DateRangePicker({ value, onValueChange, children, button
         }
         return buttonText;
     }, [range]);
-    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
-      {buttonText}
+    const children2 = children ? (children(buttonText)) : (<Button {...buttonProps} leading={buttonProps?.leading || <CalendarIcon />} className={clsx(dayPickerButtonClassName, buttonProps?.className)}>
+      {buttonText}
     </Button>);
     const hidden = useMemo(() => [
         ...(fromDate
@@ -46,11 +46,11 @@ export default function DateRangePicker({ value, onValueChange, children, button
             ]
             : []),
     ], [fromDate, toDate]);
-    return (<Popover.Root>
-      <Popover.Trigger asChild>{children2}</Popover.Trigger>
-      <Popover.Content>
-        <DayPicker mode="range" defaultMonth={value?.from} selected={range} onSelect={setRange} numberOfMonths={2} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} hidden={hidden} min={min} max={max} footer={monthFooter} excludeDisabled/>
-        {footer}
-      </Popover.Content>
+    return (<Popover.Root>
+      <Popover.Trigger asChild>{children2}</Popover.Trigger>
+      <Popover.Content>
+        <DayPicker mode="range" defaultMonth={value?.from} selected={range} onSelect={setRange} numberOfMonths={2} showOutsideDays classNames={dayPickerClassNames} startMonth={fromDate} endMonth={toDate} hidden={hidden} min={min} max={max} footer={monthFooter} excludeDisabled/>
+        {footer}
+      </Popover.Content>
     </Popover.Root>);
 }

package/components/Dialog/Dialog.d.ts

@@ -1,6 +1,6 @@
 import * as RDialog from "@radix-ui/react-dialog";
-import { DialogContentProps } from "@radix-ui/react-dialog";
-import { ReactNode } from "react";
+import type { DialogContentProps } from "@radix-ui/react-dialog";
+import { type ReactNode } from "react";
 export interface DialogProps {
     title: ReactNode;
     description?: ReactNode;

package/components/Dialog/Dialog.jsx

@@ -7,29 +7,29 @@ import { modalContentClassName } from "../../styles/Modal.classNames";
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 export default function Dialog({ children, title, description, open, onOpenChange, contentClassName, contentOverflowClassName, closeButtonClassName, overlayClassName, titleClassName, descriptionClassName, hideTitle, contentProps, hideCloseButton, }) {
     const TitleWrapper = !hideTitle ? Fragment : VisuallyHidden;
-    return (<RDialog.Root open={open} onOpenChange={onOpenChange}>
-      <RDialog.Portal>
-        <RDialog.Overlay className={clsx("ui-dialog-overlay", "fixed inset-0 z-20 flex items-center justify-center bg-black/50", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
-          <RDialog.Content className={clsx(modalContentClassName, "ui-dialog-content", "relative p-0 focus:outline-hidden", contentClassName, contentProps?.className)} {...(!description ? { "aria-describedby": undefined } : {})} {...contentProps}>
-            <div className={clsx("flex max-h-[85vh] w-[90vw] max-w-[450px] flex-col gap-3 overflow-auto p-4", contentOverflowClassName)}>
-              <TitleWrapper>
-                <RDialog.Title className={clsx("ui-dialog-title", "text-lg leading-none font-medium text-zinc-900 dark:text-zinc-50", titleClassName)}>
-                  {title}
-                </RDialog.Title>
-              </TitleWrapper>
-              {description && (<RDialog.Description className={clsx("ui-dialog-description", "text-zinc-700 dark:text-zinc-300", descriptionClassName)}>
-                  {description}
-                </RDialog.Description>)}
-              {children}
-              {!hideCloseButton && (<RDialog.Close asChild>
-                  <Button className={clsx("absolute top-1 right-1 p-1.5", "ui-dialog-close-button", closeButtonClassName)} aria-label="Close" variant="text" icon>
-                    <XMarkIcon />
-                  </Button>
-                </RDialog.Close>)}
-            </div>
-          </RDialog.Content>
-        </RDialog.Overlay>
-      </RDialog.Portal>
+    return (<RDialog.Root open={open} onOpenChange={onOpenChange}>
+      <RDialog.Portal>
+        <RDialog.Overlay className={clsx("ui-dialog-overlay", "fixed inset-0 z-20 flex items-center justify-center bg-black/50", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
+          <RDialog.Content className={clsx(modalContentClassName, "ui-dialog-content", "relative p-0 focus:outline-hidden", contentClassName, contentProps?.className)} {...(!description ? { "aria-describedby": undefined } : {})} {...contentProps}>
+            <div className={clsx("flex max-h-[85vh] w-[90vw] max-w-[450px] flex-col gap-3 overflow-auto p-4", contentOverflowClassName)}>
+              <TitleWrapper>
+                <RDialog.Title className={clsx("ui-dialog-title", "text-lg leading-none font-medium text-zinc-900 dark:text-zinc-50", titleClassName)}>
+                  {title}
+                </RDialog.Title>
+              </TitleWrapper>
+              {description && (<RDialog.Description className={clsx("ui-dialog-description", "text-zinc-700 dark:text-zinc-300", descriptionClassName)}>
+                  {description}
+                </RDialog.Description>)}
+              {children}
+              {!hideCloseButton && (<RDialog.Close asChild>
+                  <Button className={clsx("absolute top-1 right-1 p-1.5", "ui-dialog-close-button", closeButtonClassName)} aria-label="Close" variant="text" icon>
+                    <XMarkIcon />
+                  </Button>
+                </RDialog.Close>)}
+            </div>
+          </RDialog.Content>
+        </RDialog.Overlay>
+      </RDialog.Portal>
     </RDialog.Root>);
 }
 Dialog.Close = RDialog.Close;

package/components/Dialog/Dialogs.jsx

@@ -10,12 +10,12 @@ export default function Dialogs() {
             setRendered(false);
         };
     }, [setRendered]);
-    return (<>
+    return (<>
       {dialogs.map((dialog) => (<Dialog key={dialog._id} open={dialog.open} onOpenChange={() => {
                 closeDialog(dialog._id);
                 dialog.props.onClose?.(dialog._id);
-            }} {...dialog.props} title={dialog.props.title} description={dialog.props.description}>
-          {dialog.props.content}
-        </Dialog>))}
+            }} {...dialog.props} title={dialog.props.title} description={dialog.props.description}>
+          {dialog.props.content}
+        </Dialog>))}
     </>);
 }

package/components/Dialog/dialogs.state.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { DialogProps } from "./Dialog";
+import type { ReactNode } from "react";
+import type { DialogProps } from "./Dialog";
 export type IDialog = {
     _id: string;
     open: boolean;

package/components/Drawer/Drawer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type DialogProps = {
     open?: boolean;
     onClose?: (open: boolean) => void;

package/components/Drawer/Drawer.jsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useState } from "react";
+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";
@@ -21,52 +21,52 @@ export default function Drawer({ open: defaultOpen, onClose, onChangeOpen, title
     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="fixed inset-0 bg-black/70 bg-opacity-75 transition-opacity"/>
-          </Transition.Child>) : (<div className="fixed inset-0"/>)}
-
-        <div className="fixed inset-0 overflow-hidden">
-          <div className="absolute inset-0 overflow-hidden">
+    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>
+            : "-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/DropdownMenu/DropdownMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+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;

package/components/DropdownMenu/DropdownMenu.jsx

@@ -6,11 +6,11 @@ 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>
+    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 }) {
@@ -20,8 +20,8 @@ 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 {...(href ? { href, target } : {})}>
+      <RDropdownMenu.Item {...props} className={clsx(dropdownItemClassName, "ui-dropdown-menu-item", className)}/>
     </Wrapper>);
 }
 function DropdownMenuLabel({ className, ...props }) {
@@ -31,31 +31,31 @@ 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}
+    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>
+    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 {...(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 = {

package/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -1,4 +1,4 @@
-import { Component, ErrorInfo, ReactNode } from "react";
+import { Component, type ErrorInfo, type ReactNode } from "react";
 export default class ErrorBoundary extends Component<{
     title?: ReactNode;
     content?: ReactNode;

package/components/ErrorBoundary/ErrorBoundary.jsx

@@ -20,10 +20,10 @@ export default class ErrorBoundary extends Component {
         // 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}
+            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

package/components/ErrorPage/ErrorPage.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export type ErrorProps = {
     error: number;
     background?: string;

package/components/ErrorPage/ErrorPage.jsx

@@ -1,23 +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}
+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-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>
+        }}>
+      <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,7 +1,7 @@
-import { ComponentPropsWithRef, ComponentType, ReactNode } from "react";
-import { InputProps } from "../Input";
-import { FileSelectProps } from "../FileSelect";
-import { PreviewFileProps } from "./PreviewFile";
+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;

package/components/FileInput/FileInput.jsx

@@ -2,11 +2,11 @@ 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 FileSelect, {} from "../FileSelect";
 import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
 import { isEqual } from "lodash-es";
 import Text from "../Text";
-import PreviewFile from "./PreviewFile";
+import PreviewFile, {} from "./PreviewFile";
 import concurrentForOf from "@majapisoftwares/next/utils/concurrentForOf";
 import paginated from "@majapisoftwares/next/utils/paginated";
 import Pagination from "../Pagination";

package/components/FileInput/PreviewFile.d.ts

@@ -1,5 +1,5 @@
-import { FileInputFile } from "./FileInput";
-import { ReactNode } from "react";
+import type { FileInputFile } from "./FileInput";
+import { type ReactNode } from "react";
 export type PreviewFileProps = {
     file: FileInputFile;
     readOnly?: boolean;

package/components/FileSelect/FileSelect.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, Ref } from "react";
+import { type ReactElement, type ReactNode, type Ref } from "react";
 export interface FileSelectProps {
     uploadAFileText?: string;
     orDragAndDropText?: string;

package/components/FileSelect/FileSelect.jsx

@@ -6,6 +6,7 @@ import numeral from "numeral";
 import { ArrowUpTrayIcon } from "@heroicons/react/24/solid";
 import { DocumentIcon } from "@heroicons/react/24/outline";
 import Loading from "../Loading";
+import { uniq } from "lodash-es";
 const translateAllowedType = (type) => ({
     "image/png": "PNG",
     ".png": "PNG",
@@ -85,25 +86,27 @@ function FileSelect({ maxFileSize, allowedFileTypes, id, limit, onAcceptFiles, c
             })}/>
           <div>{uploadingText}</div>
         </div>) : !canDrop || disabled ? (<div className={clsx("relative flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
-          {cloneElement(icon, {
+          <div className="relative flex flex-col items-center justify-center gap-2 text-center">
+            {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", {
+            <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(", ")
+                <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
+                ? uniq(allowedFileTypes.map(translateAllowedType)).join(", ")
                 : anyFileText}{" "}
-            {upToText} {numeral(maxFileSize).format("0b")}
-          </p>
+              {upToText} {numeral(maxFileSize).format("0b")}
+            </p>
+          </div>
           {additionalBottomInfo}
         </div>) : (<div className={clsx("flex flex-col items-center justify-center gap-2 text-center", innerClassName)}>
           <ArrowUpTrayIcon className={clsx("w-10 text-7xl", {

package/components/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 export type FooterProps = {
     main?: {
         name: string;

package/components/Footer/Footer.jsx

@@ -1,30 +1,30 @@
 import { cloneElement } from "react";
 const CURRENT_YEAR = new Date().getFullYear();
 export default function Footer({ main, social, companyName, allRightsReserved = "All rights reserved", children, }) {
-    return (<>
-      <div className="flex min-h-screen flex-col">{children}</div>
-      <footer className="border-t border-slate-900/5 bg-white dark:border-slate-50/5 dark:bg-zinc-900">
-        <div className="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
-          {main && (<nav className="-mx-5 -my-2 mb-8 flex flex-wrap justify-center" aria-label="Footer">
-              {main.map((item) => (<div key={item.name} className="px-5 py-2">
-                  <a href={item.href} className="text-base text-zinc-500 hover:text-zinc-900">
-                    {item.name}
-                  </a>
-                </div>))}
-            </nav>)}
-          {social && (<div className="mb-8 flex justify-center space-x-6">
-              {social.map((item) => (<a key={item.name} href={item.href} className="text-zinc-400 hover:text-zinc-500">
-                  <span className="sr-only">{item.name}</span>
+    return (<>
+      <div className="flex min-h-screen flex-col">{children}</div>
+      <footer className="border-t border-slate-900/5 bg-white dark:border-slate-50/5 dark:bg-zinc-900">
+        <div className="mx-auto max-w-7xl overflow-hidden px-4 py-12 sm:px-6 lg:px-8">
+          {main && (<nav className="-mx-5 -my-2 mb-8 flex flex-wrap justify-center" aria-label="Footer">
+              {main.map((item) => (<div key={item.name} className="px-5 py-2">
+                  <a href={item.href} className="text-base text-zinc-500 hover:text-zinc-900">
+                    {item.name}
+                  </a>
+                </div>))}
+            </nav>)}
+          {social && (<div className="mb-8 flex justify-center space-x-6">
+              {social.map((item) => (<a key={item.name} href={item.href} className="text-zinc-400 hover:text-zinc-500">
+                  <span className="sr-only">{item.name}</span>
                   {cloneElement(item.icon, {
                     className: "h-6 w-6",
                     "aria-hidden": "true",
-                })}
-                </a>))}
-            </div>)}
-          <p className="text-center text-base text-zinc-400">
-            {companyName} &copy; {CURRENT_YEAR}. {allRightsReserved}.
-          </p>
-        </div>
-      </footer>
+                })}
+                </a>))}
+            </div>)}
+          <p className="text-center text-base text-zinc-400">
+            {companyName} &copy; {CURRENT_YEAR}. {allRightsReserved}.
+          </p>
+        </div>
+      </footer>
     </>);
 }

package/components/GridPattern/GridPattern.d.ts

@@ -1,2 +1,2 @@
-import { SVGProps } from "react";
+import { type SVGProps } from "react";
 export default function GridPattern(props: SVGProps<SVGPatternElement>): import("react").JSX.Element;