@majapisoftwares/ui 4.1.17 → 4.2.0

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/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;

package/components/GridPattern/GridPattern.jsx

@@ -1,12 +1,12 @@
 import { useId } from "react";
 export default function GridPattern(props) {
     const patternId = useId();
-    return (<svg aria-hidden="true" className="absolute inset-0 h-full w-full">
-      <defs>
-        <pattern id={patternId} width="32" height="32" patternUnits="userSpaceOnUse" {...props}>
-          <path d="M0 32V.5H32" fill="none" stroke="currentColor"/>
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" fill={`url(#${patternId})`}/>
+    return (<svg aria-hidden="true" className="absolute inset-0 h-full w-full">
+      <defs>
+        <pattern id={patternId} width="32" height="32" patternUnits="userSpaceOnUse" {...props}>
+          <path d="M0 32V.5H32" fill="none" stroke="currentColor"/>
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`}/>
     </svg>);
 }

package/components/Header/Header.d.ts

@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { type DetailedHTMLProps, type HTMLAttributes } from "react";
 export type HeaderProps = {
     hideOnScroll?: boolean;
 } & DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;

package/components/Header/Header.jsx

@@ -1,6 +1,6 @@
 import clsx from "../../utils/clsx";
 import { useScrollYMovement } from "../../hooks/useScroll";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, } from "react";
 import useMediaQuery from "../../hooks/useMediaQuery";
 export default function Header({ className, hideOnScroll, ...props }) {
     const ref = useRef(null);
@@ -15,5 +15,5 @@ export default function Header({ className, hideOnScroll, ...props }) {
             ref.current.style.transform = "";
         }
     }, [isMobile]);
-    return (<header ref={ref} {...props} className={clsx("fixed top-0 z-20 flex h-16 w-full items-center px-2.5 shadow-none shadow-slate-900/5 ring-offset-zinc-100 transition-colors duration-500 scrolled:shadow-md sm:px-4 md:px-6", "bg-white/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-white/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "not-scrolled:bg-transparent!", className)}/>);
+    return (<header ref={ref} {...props} className={clsx("scrolled:shadow-md fixed top-0 z-20 flex h-16 w-full items-center px-2.5 shadow-none shadow-slate-900/5 ring-offset-zinc-100 transition-colors duration-500 sm:px-4 md:px-6", "bg-white/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-white/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "not-scrolled:bg-transparent!", className)}/>);
 }

package/components/ImageInput/ImageInput.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import FileInput from "../FileInput";
 declare function ImageInput<PFP extends object>({ icon, uploadAFileText, allowedFileTypes, fileDisplay, ...props }: ComponentProps<typeof FileInput<PFP>>): import("react").JSX.Element;
 export default ImageInput;

package/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { UnstyledInputProps } from "../Input/UnstyledInput";
+import { type UnstyledInputProps } from "../Input/UnstyledInput";
 export type InputProps<Select extends boolean | undefined> = {
     loading?: boolean;
 } & UnstyledInputProps<Select>;

package/components/Input/Input.jsx

@@ -1,4 +1,4 @@
-import UnstyledInput from "../Input/UnstyledInput";
+import UnstyledInput, {} from "../Input/UnstyledInput";
 import { defaultTextStyles } from "../Text";
 import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
 import InputIcon from "./InputIcon";
@@ -16,8 +16,8 @@ export const defaultTrailingInputClassName = "pr-10";
 function Input({ error, trailing, labelClassName, inputClassName, helpTextClassName, trailingClassName, leadingClassName, leadingInputClassName, trailingInputClassName, required, label, loading, readOnly, children, disabled, helpText, ref, ...props }) {
     trailing =
         trailing ||
-            (error ? (<InputIcon className="text-error-500">
-        <ExclamationCircleIcon aria-hidden="true"/>
+            (error ? (<InputIcon className="text-error-500">
+        <ExclamationCircleIcon aria-hidden="true"/>
       </InputIcon>) : undefined);
     labelClassName = clsx(defaultLabelClassName, labelClassName);
     inputClassName = clsx(error ? defaultInputClassNameUncolored : defaultInputClassName, inputClassName, {
@@ -40,18 +40,18 @@ function Input({ error, trailing, labelClassName, inputClassName, helpTextClassN
         inputClassName = `${inputClassName} border-dashed`;
     }
     if (label && required) {
-        label = (<>
-        {label} <span className="text-red-500">*</span>
+        label = (<>
+        {label} <span className="text-red-500">*</span>
       </>);
     }
     return (<UnstyledInput 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    {...props} trailing={trailing} labelClassName={labelClassName} inputClassName={inputClassName} helpTextClassName={helpTextClassName} trailingClassName={trailingClassName} leadingClassName={leadingClassName} leadingInputClassName={leadingInputClassName} trailingInputClassName={trailingInputClassName} ref={ref} required={required} label={label} readOnly={readOnly} disabled={disabled} data-disabled={disabled || undefined} helpText={helpText}>
+    {...props} trailing={trailing} labelClassName={labelClassName} inputClassName={inputClassName} helpTextClassName={helpTextClassName} trailingClassName={trailingClassName} leadingClassName={leadingClassName} leadingInputClassName={leadingInputClassName} trailingInputClassName={trailingInputClassName} ref={ref} required={required} label={label} readOnly={readOnly} disabled={disabled} data-disabled={disabled || undefined} helpText={helpText}>
       {recursiveChildrenMap(children, (child) => cloneElement(child, child.type !== Fragment
             ? {
                 disabled: readOnly || disabled || child.props.disabled,
             }
-            : undefined))}
+            : undefined))}
     </UnstyledInput>);
 }
 export default Input;

package/components/Input/InputIcon.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { type ReactElement } from "react";
 export default function InputIcon({ className, children, }: {
     className?: string;
     children: ReactElement<{

package/components/Input/MultiSelectInput.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
 declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, ...props }: Omit<InputProps<undefined>, "value" | "onChange"> & {
     options: {
         value: string;