@majapisoftwares/ui 4.1.17 → 4.2.0

package/components/Input/MultiSelectInput.jsx

@@ -1,28 +1,28 @@
-import Input from "./Input";
+import Input, {} from "./Input";
 import DropdownMenu from "../DropdownMenu";
 import Button from "../Button";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { xor } from "lodash-es";
 function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, ...props }) {
-    return (<DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <Input as={Button} {...props} ref={ref} trailing={<ChevronDownIcon />} inputClassName="text-left dark:hover:bg-zinc-700/70">
+    return (<DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <Input as={Button} {...props} ref={ref} trailing={<ChevronDownIcon />} inputClassName="text-left dark:hover:bg-zinc-700/70">
           {value?.length
             ? options
                 .map((project) => value.includes(project.value) ? project.name : null)
                 .filter(Boolean)
                 .join(", ")
-            : emptyLabel}
-        </Input>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Content>
-        <DropdownMenu.Item onClick={() => onChange?.([])}>
-          {emptyLabel}
-        </DropdownMenu.Item>
-        {options.map((options) => (<DropdownMenu.CheckboxItem key={options.name} checked={value?.includes(options.value)} onClick={() => onChange?.(xor(value, [options.value]))}>
-            {options.name}
-          </DropdownMenu.CheckboxItem>))}
-      </DropdownMenu.Content>
+            : emptyLabel}
+        </Input>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={() => onChange?.([])}>
+          {emptyLabel}
+        </DropdownMenu.Item>
+        {options.map((options) => (<DropdownMenu.CheckboxItem key={options.name} checked={value?.includes(options.value)} onClick={() => onChange?.(xor(value, [options.value]))}>
+            {options.name}
+          </DropdownMenu.CheckboxItem>))}
+      </DropdownMenu.Content>
     </DropdownMenu.Root>);
 }
 export default MultiSelectInput;

package/components/Input/NumericInput.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
-import { NumericFormatProps } from "react-number-format";
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
+import { type NumericFormatProps } from "react-number-format";
 declare function NumericInput({ ref, ...props }: Omit<NumericFormatProps, "customInput"> & InputProps<undefined>): import("react").JSX.Element;
 export type NumericInputProps = ComponentProps<typeof NumericInput>;
 export default NumericInput;

package/components/Input/NumericInput.jsx

@@ -1,4 +1,4 @@
-import Input from "./Input";
+import Input, {} from "./Input";
 import { NumericFormat } from "react-number-format";
 function NumericInput({ ref, ...props }) {
     return <NumericFormat getInputRef={ref} customInput={Input} {...props}/>;

package/components/Input/PatternInput.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
-import { PatternFormatProps } from "react-number-format";
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
+import { type PatternFormatProps } from "react-number-format";
 declare function PatternInput(props: Omit<PatternFormatProps, "customInput"> & InputProps<undefined>): import("react").JSX.Element;
 export type PatternInputProps = ComponentProps<typeof PatternInput>;
 export default PatternInput;

package/components/Input/PatternInput.jsx

@@ -1,4 +1,4 @@
-import Input from "./Input";
+import Input, {} from "./Input";
 import { PatternFormat } from "react-number-format";
 function PatternInput(props) {
     return <PatternFormat customInput={Input} {...props}/>;

package/components/Input/UnstyledInput.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType, DetailedHTMLProps, InputHTMLAttributes, ReactNode } from "react";
+import { type ComponentType, type DetailedHTMLProps, type InputHTMLAttributes, type ReactNode } from "react";
 export type UnstyledInputCommonProps = {
     label?: ReactNode;
     inputClassName?: string;

package/components/Input/UnstyledInput.jsx

@@ -9,20 +9,20 @@ function UnstyledInput({ id, label, className, inputClassName, labelClassName, h
     }, trailingInputClassName && {
         [trailingInputClassName]: !!trailing,
     });
-    return (<div className={className}>
-      {label && (<label htmlFor={id} className={labelClassName}>
-          {label}
-        </label>)}
-      <div style={{ position: "relative" }} className={innerClassName}>
-        {leading && <div className={leadingClassName}>{leading}</div>}
+    return (<div className={className}>
+      {label && (<label htmlFor={id} className={labelClassName}>
+          {label}
+        </label>)}
+      <div style={{ position: "relative" }} className={innerClassName}>
+        {leading && <div className={leadingClassName}>{leading}</div>}
         <Component 
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    {...props} className={inputClassName} id={id} type={type} value={value}>
-          {children}
-        </Component>
-        {trailing && <div className={trailingClassName}>{trailing}</div>}
-      </div>
-      {helpText && <div className={helpTextClassName}>{helpText}</div>}
+    {...props} className={inputClassName} id={id} type={type} value={value}>
+          {children}
+        </Component>
+        {trailing && <div className={trailingClassName}>{trailing}</div>}
+      </div>
+      {helpText && <div className={helpTextClassName}>{helpText}</div>}
     </div>);
 }
 export default UnstyledInput;

package/components/Input2/InputWrapper.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export interface InputWrapperProps {
     children?: ReactNode;
     className?: string;

package/components/Input2/InputWrapper.jsx

@@ -1,11 +1,11 @@
 import clsx from "../../utils/clsx";
 export default function InputWrapper({ children, className, label, id, helpText, error, required, }) {
-    return (<div className={clsx("ui-input-wrapper", className)} data-error={error ? "" : undefined}>
-      {label && (<label htmlFor={id} className="ui-input-wrapper-label">
-          {label}
-          {required && <span className="text-red-500"> *</span>}
-        </label>)}
-      {children}
-      {helpText && <div className="ui-input-wrapper-help-text">{helpText}</div>}
+    return (<div className={clsx("ui-input-wrapper", className)} data-error={error ? "" : undefined}>
+      {label && (<label htmlFor={id} className="ui-input-wrapper-label">
+          {label}
+          {required && <span className="text-red-500"> *</span>}
+        </label>)}
+      {children}
+      {helpText && <div className="ui-input-wrapper-help-text">{helpText}</div>}
     </div>);
 }

package/components/Link/Link.d.ts

@@ -1,3 +1,3 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import NextLink from "next/link";
 export default function Link({ className, href, ...props }: Partial<ComponentProps<typeof NextLink>>): import("react").JSX.Element;

package/components/Magnet/Magnet.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from "react";
+import React, { type ReactNode, type HTMLAttributes } from "react";
 interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     padding?: number;

package/components/Markdown/Markdown.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import React, { type ComponentProps } from "react";
 import ReactMarkdown from "react-markdown";
 export type MarkdownProps = {
     children?: string;

package/components/Markdown/Markdown.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {} from "react";
 import ReactMarkdown from "react-markdown";
 import clsx from "../../utils/clsx";
 import remarkGfm from "remark-gfm";

package/components/Menu/Menu.d.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from "react";
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode, type Ref } from "react";
 import Button from "../Button/Button";
-import { UnstyledButtonProps } from "../Button/UnstyledButton";
-import { TextProps } from "../Text";
+import { type UnstyledButtonProps } from "../Button/UnstyledButton";
+import { type TextProps } from "../Text";
 export declare const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
 export type MenuProps = {
     className?: string;

package/components/Menu/Menu.jsx

@@ -3,21 +3,21 @@ import { Menu as HuiMenu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import clsx from "../../utils/clsx";
 import Button from "../Button/Button";
-import UnstyledButton from "../Button/UnstyledButton";
-import Text from "../Text";
+import UnstyledButton, {} from "../Button/UnstyledButton";
+import Text, {} from "../Text";
 import { useMount } from "react-use";
 export const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-hidden dark:bg-zinc-800";
 const Item = function MenuItem({ className, icon, children, ...props }) {
-    return (<HuiMenu.Item>
+    return (<HuiMenu.Item>
       {({ active }) => (<UnstyledButton {...props} type="button" className={clsx("flex w-full items-center text-left", active
                 ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-700/50 dark:text-zinc-100"
-                : "text-zinc-700 dark:text-zinc-200", "block px-4 py-2 text-sm", className)}>
+                : "text-zinc-700 dark:text-zinc-200", "block px-4 py-2 text-sm", className)}>
           {icon &&
                 cloneElement(icon, {
                     className: clsx("w-5 mr-2", icon.props.className),
-                })}
-          {children}
-        </UnstyledButton>)}
+                })}
+          {children}
+        </UnstyledButton>)}
     </HuiMenu.Item>);
 };
 const Label = function MenuLabel(props) {
@@ -27,16 +27,16 @@ const Menu = function Menu({ className, iconClassName, position = "right", child
     useMount(() => {
         console.warn("<Menu> was deprecated and should be replaced with <DropdownMenu>");
     });
-    return (<HuiMenu as="div" className={clsx("relative inline-block text-left", className)} {...props}>
-      <div>
+    return (<HuiMenu as="div" className={clsx("relative inline-block text-left", className)} {...props}>
+      <div>
         {button ? (<HuiMenu.Button as={Fragment}>{button}</HuiMenu.Button>) : (<HuiMenu.Button 
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        as={Button} className={clsx("flex w-full", buttonProps?.className)} trailing={<ChevronDownIcon className={iconClassName}/>} {...buttonProps}>
-            {label}
-          </HuiMenu.Button>)}
-      </div>
-
-      <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
+        as={Button} className={clsx("flex w-full", buttonProps?.className)} trailing={<ChevronDownIcon className={iconClassName}/>} {...buttonProps}>
+            {label}
+          </HuiMenu.Button>)}
+      </div>
+
+      <Transition as={Fragment} enter="transition ease-out duration-100" enterFrom="transform opacity-0 scale-95" enterTo="transform opacity-100 scale-100" leave="transition ease-in duration-75" leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95">
         <HuiMenu.Items unmount={unmount} className={clsx(defaultMenuItemsClassName, "absolute mt-2 min-w-[14rem]", {
             "right-0": position.includes("right"),
             "origin-top-right": position.includes("right") && !position.includes("bottom"),
@@ -45,10 +45,10 @@ const Menu = function Menu({ className, iconClassName, position = "right", child
             "origin-bottom-left": position.includes("left") && position.includes("bottom"),
             "left-0": position.includes("left"),
             "bottom-0": position.includes("bottom"),
-        }, menuItemsClassName)}>
-          <div className="py-1">{children}</div>
-        </HuiMenu.Items>
-      </Transition>
+        }, menuItemsClassName)}>
+          <div className="py-1">{children}</div>
+        </HuiMenu.Items>
+      </Transition>
     </HuiMenu>);
 };
 export default Object.assign(Menu, { Label, Item });

package/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, ReactElement, ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactElement, type ReactNode } from "react";
 import Button from "../Button";
 declare function Modal({ open, onClose, children, overlayClassName, panelClassName, dialogClassName, dialogOuterPanelClassName, dialogOverflowClassName, style, }: {
     open?: boolean;

package/components/Modal/Modal.jsx

@@ -7,40 +7,40 @@ import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "../../utils/clsx";
 export default function Modal({ open, onClose, children, overlayClassName, panelClassName, dialogClassName, dialogOuterPanelClassName, dialogOverflowClassName, style, }) {
     const handleOnClose = useCallback(() => onClose?.(), [onClose]);
-    return (<Transition.Root show={open} as={Fragment}>
-      <Dialog as="div" className={clsx("relative z-10", dialogClassName)} onClose={handleOnClose} style={style}>
-        <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
-          <div className={clsx("fixed inset-0 bg-white/75 transition-opacity dark:bg-black/75", overlayClassName)}/>
-        </Transition.Child>
-
-        <div className={clsx("fixed inset-0 z-10 overflow-y-auto", dialogOverflowClassName)}>
-          <div className={clsx("flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", dialogOuterPanelClassName)}>
-            <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
-              <Dialog.Panel className={clsx("relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all dark:bg-zinc-900 dark:ring-1 dark:ring-white/5 sm:my-8 sm:w-full sm:max-w-sm", panelClassName)}>
-                {children}
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
+    return (<Transition.Root show={open} as={Fragment}>
+      <Dialog as="div" className={clsx("relative z-10", dialogClassName)} onClose={handleOnClose} style={style}>
+        <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
+          <div className={clsx("fixed inset-0 bg-white/75 transition-opacity dark:bg-black/75", overlayClassName)}/>
+        </Transition.Child>
+
+        <div className={clsx("fixed inset-0 z-10 overflow-y-auto", dialogOverflowClassName)}>
+          <div className={clsx("flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", dialogOuterPanelClassName)}>
+            <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+              <Dialog.Panel className={clsx("relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm dark:bg-zinc-900 dark:ring-1 dark:ring-white/5", panelClassName)}>
+                {children}
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
     </Transition.Root>);
 }
 Modal.Container = ModalContainer;
 function ModalContainer({ children, className, }) {
-    return (<Stack className={clsx("gap-4! px-4 pb-4 pt-5 sm:p-6", className)}>
-      {children}
+    return (<Stack className={clsx("gap-4! px-4 pt-5 pb-4 sm:p-6", className)}>
+      {children}
     </Stack>);
 }
 Modal.Title = ModalTitle;
 function ModalTitle({ children, className, }) {
-    return (<Dialog.Title as="h3" className={clsx("text-center text-lg font-medium leading-6 text-zinc-900 dark:text-zinc-100", className)}>
-      {children}
+    return (<Dialog.Title as="h3" className={clsx("text-center text-lg leading-6 font-medium text-zinc-900 dark:text-zinc-100", className)}>
+      {children}
     </Dialog.Title>);
 }
 Modal.Content = ModalContent;
 function ModalContent({ children, className, }) {
-    return (<div className={clsx("text-center text-sm text-zinc-500 dark:text-zinc-400", className)}>
-      {children}
+    return (<div className={clsx("text-center text-sm text-zinc-500 dark:text-zinc-400", className)}>
+      {children}
     </div>);
 }
 Modal.Actions = ModalActions;
@@ -49,17 +49,17 @@ function ModalActions({ children, className, }) {
 }
 Modal.Icon = ModalIcon;
 function ModalIcon({ children, }) {
-    return (<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-800">
+    return (<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-800">
       {children &&
             cloneElement(children, {
                 className: "h-6 w-6 text-green-600 dark:text-green-400",
                 "aria-hidden": "true",
-            })}
+            })}
     </div>);
 }
 Modal.CloseButton = ModalCloseButton;
 function ModalCloseButton({ className, ...props }) {
-    return (<Button icon className={clsx("absolute right-2 top-2", className)} variant="text" {...props}>
-      <XMarkIcon />
+    return (<Button icon className={clsx("absolute top-2 right-2", className)} variant="text" {...props}>
+      <XMarkIcon />
     </Button>);
 }

package/components/ModeToggle/ModeToggle.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from "react";
+import type { Ref } from "react";
 export interface ModeToggleProps {
     ariaLabel?: string;
     className?: string;

package/components/ModeToggle/ModeToggle.jsx

@@ -4,9 +4,9 @@ import clsx from "../../utils/clsx";
 import useModeToggle from "./useModeToggle";
 const ModeToggle = function ModeToggle({ ariaLabel = "Toggle dark mode", className, iconClassName, ref, }) {
     const toggleMode = useModeToggle();
-    return (<Button ref={ref} icon variant="text" aria-label={ariaLabel} onClick={toggleMode} className={className}>
-      <SunIcon className={clsx("dark:hidden", iconClassName)}/>
-      <MoonIcon className={clsx("hidden dark:block", iconClassName)}/>
+    return (<Button ref={ref} icon variant="text" aria-label={ariaLabel} onClick={toggleMode} className={className}>
+      <SunIcon className={clsx("dark:hidden", iconClassName)}/>
+      <MoonIcon className={clsx("hidden dark:block", iconClassName)}/>
     </Button>);
 };
 export default ModeToggle;

package/components/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import Input, { UnstyledInputProps } from "../Input";
+import { type ReactNode } from "react";
+import Input, { type UnstyledInputProps } from "../Input";
 export interface MultiSelectProps<T extends object | string> extends Omit<UnstyledInputProps<false>, "as" | "onSelect" | "inputClassName" | "innerClassName" | "value" | "onChange"> {
     placeholder?: string;
     emptyText?: string;

package/components/MultiSelect/MultiSelect.jsx

@@ -1,7 +1,7 @@
 import { Combobox } from "@headlessui/react";
 import Loading from "../Loading";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { defaultHelpTextClassName, defaultInputClassName, defaultLabelClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
+import { useCallback, useEffect, useMemo, useState, } from "react";
+import Input, { defaultHelpTextClassName, defaultInputClassName, defaultLabelClassName, defaultLeadingInputClassName, defaultTrailingClassName, defaultTrailingInputClassName, UnstyledInput, } from "../Input";
 import clsx from "../../utils/clsx";
 import { isEqual, take } from "lodash-es";
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";

package/components/MultiSelect/MultiSelectInput.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export declare function getValue<Id extends string | number, T extends object | string>(id: Id, item: T): string | number;
 export declare function MultiSelectInput<Id extends string | number, T extends object | string>({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, items, ...props }: {
     className?: string;

package/components/MultiText/MultiText.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FocusEventHandler, Ref } from "react";
+import { type ChangeEventHandler, type FocusEventHandler, type Ref } from "react";
 export interface MultiTextProps {
     value?: string[];
     onChangeValue?: (value: string[]) => void;

package/components/MultiText/MultiText.jsx

@@ -58,7 +58,6 @@ function MultiText({ value, onChangeValue, onChange, onBlur, name, id, className
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [innerValue]);
     return (<InputWrapper id={id} className={className} helpText={(invalid ? invalidHelpText : undefined) || helpText} label={label} error={invalid || error} required={required}>
       <div className="ui-multi-text" onClick={() => inputRef.current?.focus()} data-focused={innerFocused ? "" : undefined} data-error={invalid || error ? "" : undefined} data-loading={loading ? "" : undefined} data-readonly={readOnly ? "" : undefined}>

package/components/NavigationDrawer/NavigationDrawer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export default function NavigationDrawer({ children, navigationChildren, position, title, noPadding, panelClassName, }: {
     children: ReactNode;
     navigationChildren: ReactNode;

package/components/NavigationDrawer/NavigationDrawer.jsx

@@ -10,20 +10,20 @@ export default function NavigationDrawer({ children, navigationChildren, positio
             navigationDrawerState.setOpen(open);
         }
     }, []);
-    return (<>
-      <Drawer open={isOpen} onChangeOpen={handleChangeOpen} className="lg:hidden" position={position} title={title} noPadding={noPadding} panelClassName={panelClassName}>
-        {navigationChildren}
-      </Drawer>
-      <div className={clsx("fixed left-0 top-0 z-10 hidden h-full w-full max-w-xs flex-1 overflow-y-auto px-4 py-4 pt-20 lg:block", "bg-zinc-100/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-zinc-100/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "transition-transform", {
+    return (<>
+      <Drawer open={isOpen} onChangeOpen={handleChangeOpen} className="lg:hidden" position={position} title={title} noPadding={noPadding} panelClassName={panelClassName}>
+        {navigationChildren}
+      </Drawer>
+      <div className={clsx("fixed top-0 left-0 z-10 hidden h-full w-full max-w-xs flex-1 overflow-y-auto px-4 py-4 pt-20 lg:block", "bg-zinc-100/95 backdrop-blur-sm [@supports(backdrop-filter:blur(0))]:bg-zinc-100/75", "dark:bg-zinc-900/95 dark:[@supports(backdrop-filter:blur(0))]:bg-zinc-900/75", "transition-transform", {
             "translate-x-0": isOpen,
             "-translate-x-full": !isOpen,
-        }, panelClassName)}>
-        {navigationChildren}
-      </div>
+        }, panelClassName)}>
+        {navigationChildren}
+      </div>
       <div className={clsx("flex min-h-screen flex-col ring-offset-zinc-100 transition-all duration-300", {
             "lg:pl-80 lg:duration-150": isOpen,
-        })}>
-        {children}
-      </div>
+        })}>
+        {children}
+      </div>
     </>);
 }

package/components/NavigationDrawer/NavigationItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 export default function NavigationItem({ icon, children, href, exact, alternativeActiveHrefs, className, disabled, active, }: {
     icon?: ReactElement<{
         className?: string;

package/components/NavigationDrawer/NavigationItem.jsx

@@ -18,7 +18,7 @@ export default function NavigationItem({ icon, children, href, exact, alternativ
     return (<Button variant={active ? "light" : "text"} color={active ? "primary" : "default"} className={clsx("w-full justify-start border-transparent", className)} leading={icon &&
             cloneElement(icon, {
                 className: clsx(icon.props?.className, "w-5! mr-3"),
-            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
-      {children}
+            })} href={href} onClick={isMobile ? navigationDrawerState.close : undefined} disabled={disabled}>
+      {children}
     </Button>);
 }

package/components/NoSsr/NoSsr.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export default function NoSsr({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;

package/components/Notifications/Notifications.jsx

@@ -4,7 +4,7 @@ import notificationsState from "./notifications.state";
 import { CheckCircleIcon, ExclamationCircleIcon, } from "@heroicons/react/24/outline";
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import Button from "../Button";
-import { cloneElement, useEffect } from "react";
+import { cloneElement, useEffect, } from "react";
 import clsx from "../../utils/clsx";
 export default function Notifications({ notificationClassName, }) {
     const { notifications, remove, setRendered } = useSnapshot(notificationsState);
@@ -14,8 +14,8 @@ export default function Notifications({ notificationClassName, }) {
             setRendered(false);
         };
     }, [setRendered]);
-    return (<ul id="ui-notifications" className="pointer-events-none fixed inset-0 z-30 flex flex-col items-center justify-end gap-3 px-4 py-6 sm:items-end sm:justify-start sm:p-6">
-      <AnimatePresence initial={false}>
+    return (<ul id="ui-notifications" className="pointer-events-none fixed inset-0 z-30 flex flex-col items-center justify-end gap-3 px-4 py-6 sm:items-end sm:justify-start sm:p-6">
+      <AnimatePresence initial={false}>
         {notifications.map(({ _id, dismissable, title, message, icon, actions, style, className, }) => {
             const iconChild = (typeof icon === "string"
                 ? {
@@ -24,37 +24,37 @@ export default function Notifications({ notificationClassName, }) {
                 }[icon]
                 : icon);
             // noinspection SuspiciousTypeOfGuard
-            return (<motion.li key={_id} layout initial={{ opacity: 0, y: 50, scale: 0.3 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }} className={clsx("pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10", notificationClassName, className)} style={style}>
-                <div className="p-4">
-                  <div className="flex items-start">
-                    {iconChild && (<div className="mr-2 shrink-0">
+            return (<motion.li key={_id} layout initial={{ opacity: 0, y: 50, scale: 0.3 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }} className={clsx("pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10", notificationClassName, className)} style={style}>
+                <div className="p-4">
+                  <div className="flex items-start">
+                    {iconChild && (<div className="mr-2 shrink-0">
                         {cloneElement(iconChild, {
                         className: clsx("h-6 w-6 text-zinc-400 dark:text-zinc-600", iconChild.props?.className),
                         "aria-hidden": "true",
-                    })}
-                      </div>)}
-                    <div className="ml-1 w-0 flex-1 pt-0.5">
-                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
-                        {title || message}
-                      </p>
-                      {title && message && (<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
-                          {message}
-                        </p>)}
-                      {actions && (<div className="-m-3 mt-0 flex">
-                          {actions}
-                        </div>)}
-                    </div>
-                    {dismissable && (<div className="ml-4 flex shrink-0">
+                    })}
+                      </div>)}
+                    <div className="ml-1 w-0 flex-1 pt-0.5">
+                      <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                        {title || message}
+                      </p>
+                      {title && message && (<p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                          {message}
+                        </p>)}
+                      {actions && (<div className="-m-3 mt-0 flex">
+                          {actions}
+                        </div>)}
+                    </div>
+                    {dismissable && (<div className="ml-4 flex shrink-0">
                         <Button icon onClick={() => {
                         remove(_id);
-                    }} className="h-5 w-5 p-0!" variant="text">
-                          <XMarkIcon className="h-5 w-5 text-zinc-400" aria-label="Close"/>
-                        </Button>
-                      </div>)}
-                  </div>
-                </div>
+                    }} className="h-5 w-5 p-0!" variant="text">
+                          <XMarkIcon className="h-5 w-5 text-zinc-400" aria-label="Close"/>
+                        </Button>
+                      </div>)}
+                  </div>
+                </div>
               </motion.li>);
-        })}
-      </AnimatePresence>
+        })}
+      </AnimatePresence>
     </ul>);
 }

package/components/Notifications/notifications.state.d.ts

@@ -1,5 +1,5 @@
-import { StringValue } from "ms";
-import { CSSProperties, ReactElement, ReactNode } from "react";
+import { type StringValue } from "ms";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 type Notification = {
     _id: string;
     message: string | ReactElement;

package/components/Notifications/notifications.state.js

@@ -1,6 +1,6 @@
 import { proxy, ref } from "valtio";
 import isomorphicObjectId from "@majapisoftwares/next/utils/isomorphicObjectId";
-import ms from "ms";
+import ms, {} from "ms";
 const notificationsState = proxy({
     rendered: false,
     setRendered(rendered) {