@majapisoftwares/ui 4.1.17 → 4.3.0

package/components/Input/MultiSelectInput.d.ts

@@ -1,13 +1,14 @@
-import { ComponentProps } from "react";
-import { InputProps } from "./Input";
-declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, ...props }: Omit<InputProps<undefined>, "value" | "onChange"> & {
+import type { ComponentProps } from "react";
+import { type InputProps } from "./Input";
+declare function MultiSelectInput({ options, value, onChange, emptyLabel, ref, badgeClassName, name, onValueChange, ...props }: Omit<InputProps<undefined>, "value"> & {
     options: {
         value: string;
         name: string;
     }[];
     value?: string[];
-    onChange?: (value: string[]) => void;
+    onValueChange?: (value: string[]) => void;
     emptyLabel?: string;
+    badgeClassName?: string;
 }): import("react").JSX.Element;
 export type MultiSelectInputProps = ComponentProps<typeof MultiSelectInput>;
 export default MultiSelectInput;

package/components/Input/MultiSelectInput.jsx

@@ -1,28 +1,48 @@
-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">
-          {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>
+import clsx from "../../utils/clsx";
+import Badge from "../Badge";
+import useInputRefValue from "./useInputRefValue";
+import { useDeepCompareEffect } from "react-use";
+function MultiSelectInput({ options, value, onChange, emptyLabel = "None", ref, badgeClassName, name, onValueChange, ...props }) {
+    const { innerRef, innerValue, setInnerValue } = useInputRefValue({
+        value,
+        ref,
+        name,
+        onChange,
+    });
+    const isEmpty = !innerValue?.length;
+    useDeepCompareEffect(() => {
+        if (onValueChange) {
+            onValueChange(innerValue || []);
+        }
+    }, [innerValue]);
+    return (<DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <Input as={Button} {...props} name={name} onChange={onChange} ref={innerRef} trailing={<ChevronDownIcon className="h-5 w-5 shrink-0"/>} inputClassName={clsx("text-left dark:hover:bg-zinc-700/70 bg-white gap-1.5 flex justify-start flex-wrap", {
+            "text-zinc-500 dark:text-zinc-500": isEmpty,
+            "p-1.5": !isEmpty,
+        })}>
+          {isEmpty
+            ? emptyLabel
+            : options
+                .filter((option) => innerValue.includes(option.value))
+                .map((option, index) => (<Badge key={index} className={badgeClassName} onActionClick={() => setInnerValue(xor(innerValue, [option.value]))}>
+                    {option.name}
+                  </Badge>))}
+        </Input>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Item onClick={() => setInnerValue([])}>
+          {emptyLabel}
+        </DropdownMenu.Item>
+        {options.map((option) => (<DropdownMenu.CheckboxItem key={option.name} checked={innerValue?.includes(option.value)} onClick={() => setInnerValue(xor(value, [option.value]))}>
+            {option.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/SelectInput.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type InputProps } from "./index";
+declare function SelectInput({ options, onChange, ref, placeholder, inputClassName, value, name, ...props }: InputProps<false> & {
+    options: {
+        value: string;
+        name: ReactNode;
+    }[];
+    children?: ReactNode;
+    placeholder?: string;
+}): import("react").JSX.Element;
+export type SelectInputProps = ComponentProps<typeof SelectInput>;
+export default SelectInput;

package/components/Input/SelectInput.jsx

@@ -0,0 +1,25 @@
+import {} from "react";
+import Input, {} from "./index";
+import Select from "../Select/Select";
+import clsx from "../../utils/clsx";
+import useInputRefValue from "./useInputRefValue";
+function SelectInput({ options, onChange, ref, placeholder, inputClassName, value, name, ...props }) {
+    const { innerRef, innerValue, setInnerValue } = useInputRefValue({
+        value,
+        ref,
+        name,
+        onChange,
+    });
+    return (<Input as={Select.Root} {...props} ref={innerRef} {...{
+        value: innerValue,
+        onValueChange: setInnerValue,
+    }}>
+      <Select.Trigger placeholder={placeholder} buttonClassName={clsx("bg-white dark:hover:bg-zinc-700/70 dark:bg-zinc-800 w-full justify-between", inputClassName)}/>
+      <Select.Content>
+        {options?.map((option) => (<Select.Item key={option.value} value={option.value}>
+            {option.name}
+          </Select.Item>))}
+      </Select.Content>
+    </Input>);
+}
+export default SelectInput;

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/Input/useInputRefValue.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent, type Ref } from "react";
+export default function useInputRefValue<T>({ value, ref, name, onChange, }: {
+    value?: T;
+    ref?: Ref<HTMLInputElement>;
+    name?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}): {
+    innerRef: import("react").RefObject<HTMLInputElement>;
+    innerValue: T | undefined;
+    setInnerValue: import("react").Dispatch<import("react").SetStateAction<T | undefined>>;
+};

package/components/Input/useInputRefValue.jsx

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from "react";
+import { useDeepCompareEffect } from "react-use";
+import { isEqual } from "lodash-es";
+export default function useInputRefValue({ value, ref, name, onChange, }) {
+    const [innerValue, setInnerValue] = useState(value);
+    useDeepCompareEffect(() => {
+        if (value && !isEqual(value, innerValue)) {
+            setInnerValue(value);
+        }
+    }, [{ value }]);
+    const innerRef = useRef({
+        get value() {
+            return innerValue;
+        },
+        set value(value) {
+            setInnerValue(value);
+        },
+    });
+    useEffect(() => {
+        if (ref) {
+            if (typeof ref === "function") {
+                ref(innerRef.current);
+            }
+            else {
+                try {
+                    ref.current = innerRef.current;
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                }
+                catch (e) {
+                    // do nothing
+                }
+            }
+        }
+    }, [ref]);
+    useDeepCompareEffect(() => {
+        if (onChange) {
+            onChange({
+                target: {
+                    name,
+                    value: innerValue,
+                },
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            });
+        }
+    }, [innerValue]);
+    return {
+        innerRef,
+        innerValue,
+        setInnerValue,
+    };
+}

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;