@majapisoftwares/ui 4.3.17 → 6.0.0

package/components/Modal/Modal.d.ts

@@ -1,45 +0,0 @@
-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;
-    onClose?: () => void;
-    children?: ReactNode;
-    overlayClassName?: string;
-    panelClassName?: string;
-    dialogClassName?: string;
-    dialogOuterPanelClassName?: string;
-    dialogOverflowClassName?: string;
-    style?: CSSProperties;
-}): import("react").JSX.Element;
-declare namespace Modal {
-    var Container: typeof ModalContainer;
-    var Title: typeof ModalTitle;
-    var Content: typeof ModalContent;
-    var Actions: typeof ModalActions;
-    var Icon: typeof ModalIcon;
-    var CloseButton: typeof ModalCloseButton;
-}
-export default Modal;
-declare function ModalContainer({ children, className, }: {
-    children?: ReactNode;
-    className?: string;
-}): import("react").JSX.Element;
-declare function ModalTitle({ children, className, }: {
-    children?: ReactNode;
-    className?: string;
-}): import("react").JSX.Element;
-declare function ModalContent({ children, className, }: {
-    children?: ReactNode;
-    className?: string;
-}): import("react").JSX.Element;
-declare function ModalActions({ children, className, }: {
-    children?: ReactNode;
-    className?: string;
-}): import("react").JSX.Element;
-declare function ModalIcon({ children, }: {
-    children?: ReactElement<{
-        className?: string;
-        "aria-hidden"?: string;
-    }>;
-}): import("react").JSX.Element;
-declare function ModalCloseButton({ className, ...props }: ComponentPropsWithoutRef<typeof Button>): import("react").JSX.Element;

package/components/Modal/Modal.jsx

@@ -1,65 +0,0 @@
-import { cloneElement, Fragment, useCallback, } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-import Stack from "../Stack";
-import Group from "../Group";
-import Button from "../Button";
-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 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 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 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}
-    </div>);
-}
-Modal.Actions = ModalActions;
-function ModalActions({ children, className, }) {
-    return <Group className={className}>{children}</Group>;
-}
-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">
-      {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 top-2 right-2", className)} variant="text" {...props}>
-      <XMarkIcon />
-    </Button>);
-}

package/components/Modal/index.d.ts

@@ -1,4 +0,0 @@
-import Modal from "./Modal";
-export * from "./Modal";
-export default Modal;
-export { default as useModalState } from "./useModalState";

package/components/Modal/index.jsx

@@ -1,4 +0,0 @@
-import Modal from "./Modal";
-export * from "./Modal";
-export default Modal;
-export { default as useModalState } from "./useModalState";

package/components/Modal/useModalState.d.ts

@@ -1,6 +0,0 @@
-export default function useModalState(): readonly [boolean, {
-    readonly setModalOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    readonly openModal: () => void;
-    readonly closeModal: () => void;
-    readonly toggleModal: () => void;
-}];

package/components/Modal/useModalState.js

@@ -1,16 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-export default function useModalState() {
-    const [modalOpen, setModalOpen] = useState(false);
-    const handleModalToggle = useCallback(() => setModalOpen((open) => !open), []);
-    const handleModalOpen = useCallback(() => setModalOpen(true), []);
-    const handleModalClose = useCallback(() => setModalOpen(false), []);
-    return useMemo(() => [
-        modalOpen,
-        {
-            setModalOpen,
-            openModal: handleModalOpen,
-            closeModal: handleModalClose,
-            toggleModal: handleModalToggle,
-        },
-    ], [handleModalClose, handleModalOpen, handleModalToggle, modalOpen]);
-}

package/components/ModeToggle/ModeToggle.d.ts

@@ -1,9 +0,0 @@
-import type { Ref } from "react";
-export interface ModeToggleProps {
-    ariaLabel?: string;
-    className?: string;
-    iconClassName?: string;
-    ref?: Ref<HTMLButtonElement>;
-}
-declare const ModeToggle: ({ ariaLabel, className, iconClassName, ref, }: ModeToggleProps) => import("react").JSX.Element;
-export default ModeToggle;

package/components/ModeToggle/ModeToggle.jsx

@@ -1,12 +0,0 @@
-import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
-import Button from "../Button";
-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)}/>
-    </Button>);
-};
-export default ModeToggle;

package/components/ModeToggle/index.d.ts

@@ -1,4 +0,0 @@
-import ModeToggle from "./ModeToggle";
-export * from "./ModeToggle";
-export default ModeToggle;
-export { default as useModeToggle } from "./useModeToggle";

package/components/ModeToggle/index.jsx

@@ -1,5 +0,0 @@
-import ModeToggle from "./ModeToggle";
-export * from "./ModeToggle";
-export default ModeToggle;
-// noinspection JSUnusedGlobalSymbols
-export { default as useModeToggle } from "./useModeToggle";

package/components/ModeToggle/useModeToggle.d.ts

@@ -1 +0,0 @@
-export default function useModeToggle(): () => void;

package/components/ModeToggle/useModeToggle.js

@@ -1,21 +0,0 @@
-export default function useModeToggle() {
-    function disableTransitionsTemporarily() {
-        document.documentElement.classList.add("**:transition-none!");
-        window.setTimeout(() => {
-            document.documentElement.classList.remove("**:transition-none!");
-        }, 0);
-    }
-    function toggleMode() {
-        disableTransitionsTemporarily();
-        const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        const isSystemDarkMode = darkModeMediaQuery.matches;
-        const isDarkMode = document.documentElement.classList.toggle("dark");
-        if (isDarkMode === isSystemDarkMode) {
-            delete window.localStorage.isDarkMode;
-        }
-        else {
-            window.localStorage.isDarkMode = isDarkMode;
-        }
-    }
-    return toggleMode;
-}

package/components/MultiSelect/MultiSelect.d.ts

@@ -1,28 +0,0 @@
-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;
-    items?: T[];
-    filterProperty?: keyof T;
-    filterFunction?: (item: T) => boolean;
-    onChange?: (items: string[]) => void;
-    renderProperty?: keyof T;
-    renderFunction?: (item: T) => ReactNode;
-    query?: string;
-    onChangeQuery?: (query: string) => void;
-    loading?: boolean;
-    leadingClassName?: string;
-    inputInnerClassName?: string;
-    inputElementClassName?: string;
-    leading?: ReactNode;
-    as?: typeof Input;
-    static?: boolean;
-    displayValue?: (item: T | null) => string;
-    value?: string[];
-    creatable?: boolean;
-    getCreateLabel?: (query: string) => string;
-    itemsRenderLimit?: number;
-    valueProperty?: string;
-}
-export default function MultiSelect<T extends object | string>({ placeholder, emptyText, items, renderProperty, renderFunction, filterProperty, filterFunction, onChange, query: defaultQuery, onChangeQuery, loading, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, displayValue, value, labelClassName, creatable, getCreateLabel, itemsRenderLimit, className, valueProperty, label, required, readOnly, error, ...props }: MultiSelectProps<T>): import("react").JSX.Element;

package/components/MultiSelect/MultiSelect.jsx

@@ -1,116 +0,0 @@
-import { Combobox } from "@headlessui/react";
-import Loading from "../Loading";
-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";
-import { useDeepCompareEffect } from "react-use";
-import { getValue, MultiSelectInput } from "./MultiSelectInput";
-const defaultMenuItemsClassName = "z-10 rounded-md bg-white shadow-lg ring-1 ring-black/5 dark:ring-zinc-700 focus:outline-hidden dark:bg-zinc-800";
-export default function MultiSelect({ placeholder, emptyText = "No item found.", items = [], renderProperty = "title", renderFunction, filterProperty = "title", filterFunction, onChange, query: defaultQuery = "", onChangeQuery, loading, inputInnerClassName, inputElementClassName, as, trailing, trailingClassName, trailingInputClassName, leadingInputClassName, static: isStatic, 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-displayValue = (item) => item?.[renderProperty] || "", value, labelClassName, creatable, getCreateLabel = (query) => `+ create "${query}"`, itemsRenderLimit, className, valueProperty = "_id", label, required, readOnly, error, ...props }) {
-    const [query, setQuery] = useState(defaultQuery);
-    const [selectedItems, setSelectedItems] = useState(value || []);
-    // noinspection DuplicatedCode
-    useEffect(() => {
-        if (query !== defaultQuery) {
-            setQuery(defaultQuery);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultQuery]);
-    useEffect(() => {
-        if (onChangeQuery && query !== defaultQuery) {
-            onChangeQuery(query);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [query]);
-    const filteredItems = useMemo(() => query === ""
-        ? items
-        : items.filter(filterFunction ||
-            ((item) => (typeof item === "string"
-                ? item
-                : item[filterProperty])
-                .toLowerCase()
-                .includes(query.toLowerCase()))), [filterFunction, filterProperty, items, query]);
-    trailing = loading ? (<Loading />) : (trailing ||
-        (!readOnly ? (<Combobox.Button className="pointer-events-auto -mr-1 flex items-center">
-        <ChevronUpDownIcon className="h-5 w-5 text-zinc-400" aria-hidden="true"/>
-      </Combobox.Button>) : undefined));
-    const ComponentInput = as || UnstyledInput;
-    const doRender = useCallback((item) => renderFunction
-        ? renderFunction(item)
-        : typeof item === "string"
-            ? item
-            : item[renderProperty], [renderFunction, renderProperty]);
-    useDeepCompareEffect(() => {
-        onChange?.(selectedItems);
-    }, [selectedItems || {}]);
-    useDeepCompareEffect(() => {
-        if (!isEqual(selectedItems, value)) {
-            setSelectedItems(value || []);
-        }
-    }, [value || {}]);
-    const removeItem = useCallback((item) => () => setSelectedItems((selectedItems) => [
-        ...selectedItems.filter((i) => getValue(valueProperty, i) !== getValue(valueProperty, item)),
-    ]), [valueProperty]);
-    if (label && required) {
-        label = (<>
-        {label} <span className="text-red-500">*</span>
-      </>);
-    }
-    const renderedItems = itemsRenderLimit
-        ? take(filteredItems, itemsRenderLimit)
-        : filteredItems;
-    let inputClassName = clsx(defaultInputClassName, "bg-white dark:bg-zinc-800 pl-0", inputElementClassName, {
-        "border-dashed": readOnly,
-    });
-    let helpTextClassName = defaultHelpTextClassName;
-    if (error) {
-        inputClassName = clsx(inputClassName, "border-error-300 dark:border-error-500 text-error-900 dark:text-error-500 placeholder-error-300 focus:border-error-500 dark:focus:border-error-500 focus:ring-error-500");
-        helpTextClassName = clsx(helpTextClassName, "text-error-600 dark:text-error-500");
-    }
-    return (<div className={clsx("relative", className)}>
-      <Combobox 
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    onChange={setSelectedItems} value={selectedItems.map((item) => getValue(valueProperty, item))} multiple>
-        {({ open }) => (<div>
-            <ComponentInput 
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        {...props} as={MultiSelectInput} placeholder={!readOnly ? placeholder : undefined} value={query} onChange={(event) => setQuery(event.target.value)} trailing={trailing} trailingClassName={clsx(defaultTrailingClassName, trailingClassName)} inputClassName={inputClassName} innerClassName={inputInnerClassName} trailingInputClassName={clsx(defaultTrailingInputClassName, trailingInputClassName)} leadingInputClassName={clsx(defaultLeadingInputClassName, leadingInputClassName)} displayValue={displayValue} labelClassName={clsx(defaultLabelClassName, labelClassName)} selectedItems={selectedItems} doRender={doRender} removeItem={removeItem} required={required && !selectedItems.length} label={label} readOnly={readOnly} valueProperty={valueProperty} helpTextClassName={helpTextClassName} items={items}/>
-
-            {!readOnly &&
-                ((creatable && query) || filteredItems.length > 0) && (<Combobox.Options static={isStatic} className={clsx(defaultMenuItemsClassName, "absolute z-10 mt-1 max-h-72 w-full scroll-py-2 overflow-y-auto py-2 text-sm text-zinc-800 dark:text-zinc-200")}>
-                  {!renderedItems.some((item) => getValue(valueProperty, item) === query) &&
-                    creatable &&
-                    !!query && (<Combobox.Option value={query} className={({ active }) => clsx("cursor-default px-4 py-2 select-none", {
-                        "bg-primary-600 text-white": active,
-                    })}>
-                        {({ selected }) => (<div className="flex">
-                            {selected && <CheckIcon className="mr-2 w-5"/>}
-                            {selected ? query : getCreateLabel(query)}
-                          </div>)}
-                      </Combobox.Option>)}
-                  {renderedItems.map((item) => (<Combobox.Option key={getValue(valueProperty, item)} value={getValue(valueProperty, item)} className={({ active }) => clsx("cursor-default px-4 py-2 select-none", {
-                        "bg-primary-600 text-white": active,
-                    })}>
-                      {({ selected }) => (<div className="flex">
-                          {selected && <CheckIcon className="mr-2 w-5"/>}
-                          {doRender(item)}
-                        </div>)}
-                    </Combobox.Option>))}
-                </Combobox.Options>)}
-
-            {!readOnly &&
-                !creatable &&
-                open &&
-                emptyText &&
-                query !== "" &&
-                filteredItems.length === 0 && (<p className={clsx(defaultMenuItemsClassName, "absolute mt-1 w-full p-4 text-sm text-zinc-500 dark:text-zinc-400")}>
-                  {emptyText}
-                </p>)}
-          </div>)}
-      </Combobox>
-    </div>);
-}

package/components/MultiSelect/MultiSelectInput.d.ts

@@ -1,12 +0,0 @@
-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;
-    selectedItems: string[];
-    doRender: (item: T) => ReactNode;
-    removeItem: (item: T) => () => void;
-    valueProperty: Id;
-    readOnly?: boolean;
-    error?: boolean;
-    items?: T[];
-}): import("react").JSX.Element;

package/components/MultiSelect/MultiSelectInput.jsx

@@ -1,27 +0,0 @@
-import { useRef } from "react";
-import clsx from "../../utils/clsx";
-import Badge from "../Badge";
-import { Combobox } from "@headlessui/react";
-export function getValue(id, item) {
-    return typeof item === "string"
-        ? item
-        : item[id];
-}
-export function MultiSelectInput({ className, selectedItems, doRender, removeItem, valueProperty, readOnly, items, ...props }) {
-    const ref = useRef(null);
-    return (<div className={clsx("focus-within:border-primary-500 focus-within:ring-primary-500 dark:focus-within:border-primary-500 flex flex-wrap border focus-within:ring-1", className)} onClick={() => ref.current?.focus()}>
-      {!!selectedItems.length && (<div className="flex flex-wrap items-center gap-1 p-1.5 pb-0">
-          {selectedItems.map((selectedItem) => {
-                const item = items?.find((item) => getValue(valueProperty, item) === selectedItem);
-                if (!item)
-                    return null;
-                return (<Badge key={getValue(valueProperty, item)} onActionClick={!readOnly ? removeItem(item) : undefined}>
-                {doRender(item)}
-              </Badge>);
-            })}
-        </div>)}
-      {!readOnly && (<Combobox.Input 
-        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        {...props} ref={ref} className="rounded-md border-none ring-transparent! disabled:cursor-not-allowed disabled:text-zinc-500 sm:text-sm dark:bg-zinc-800 dark:disabled:bg-zinc-900/90" readOnly={readOnly}/>)}
-    </div>);
-}

package/components/MultiSelect/index.d.ts

@@ -1,5 +0,0 @@
-import MultiSelect from "./MultiSelect";
-export * from "./MultiSelect";
-export default MultiSelect;
-export { MultiSelectInput } from "./MultiSelectInput";
-export { getValue } from "./MultiSelectInput";

package/components/MultiSelect/index.jsx

@@ -1,5 +0,0 @@
-import MultiSelect from "./MultiSelect";
-export * from "./MultiSelect";
-export default MultiSelect;
-export { MultiSelectInput } from "./MultiSelectInput";
-export { getValue } from "./MultiSelectInput";

package/components/MultiText/MultiText.d.ts

@@ -1,23 +0,0 @@
-import { type ChangeEventHandler, type FocusEventHandler, type Ref } from "react";
-export interface MultiTextProps {
-    value?: string[];
-    onChangeValue?: (value: string[]) => void;
-    name?: string;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    id?: string;
-    className?: string;
-    helpText?: string;
-    label?: string;
-    validate?: (value: string) => boolean;
-    invalidHelpText?: string;
-    error?: boolean;
-    format?: (item: string) => string;
-    readOnly?: boolean;
-    loading?: boolean;
-    type?: string;
-    required?: boolean;
-    ref?: Ref<HTMLInputElement>;
-}
-declare function MultiText({ value, onChangeValue, onChange, onBlur, name, id, className, helpText, label, validate, invalidHelpText, error, format, readOnly, loading, type, required, ref, }: MultiTextProps): import("react").JSX.Element;
-export default MultiText;

package/components/MultiText/MultiText.jsx

@@ -1,118 +0,0 @@
-import { useEffect, useId, useRef, useState, } from "react";
-import { isEqual, uniq } from "lodash-es";
-import { useDeepCompareEffect } from "react-use";
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import InputWrapper from "../Input2/InputWrapper";
-function defaultFormat(item) {
-    return item;
-}
-function MultiText({ value, onChangeValue, onChange, onBlur, name, id, className, helpText, label, validate, invalidHelpText, error, format = defaultFormat, readOnly, loading, type, required, ref, }) {
-    const innerId = useId();
-    id = id || innerId;
-    const inputRef = useRef(null);
-    const [innerFocused, setInnerFocused] = useState(false);
-    const [innerValue, setInnerValue] = useState(value || []);
-    const [inputValue, setInputValue] = useState("");
-    const [invalid, setInvalid] = useState(false);
-    useDeepCompareEffect(() => {
-        if (value && onChangeValue && !isEqual(value, innerValue)) {
-            onChangeValue(innerValue);
-        }
-    }, [innerValue]);
-    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 (<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}>
-        {!!innerValue?.length && (<div className="-mx-2 flex w-full flex-wrap gap-0.5">
-            {innerValue.map((item, i) => {
-                const removeItem = () => {
-                    const newValue = [...innerValue];
-                    newValue.splice(i, 1);
-                    setInnerValue(newValue);
-                    inputRef.current?.focus();
-                };
-                return (<span className="ui-multi-text-item" key={i} onClick={(e) => e.stopPropagation()} onDoubleClick={() => {
-                        setInputValue(item);
-                        removeItem();
-                    }}>
-                  <span className="ui-multi-text-item-content">
-                    {format(item)}
-                  </span>
-                  {!readOnly && (<button className="ui-multi-text-delete-button" onClick={removeItem} type="button">
-                      <XMarkIcon className="ui-multi-text-delete-icon"/>
-                    </button>)}
-                </span>);
-            })}
-          </div>)}
-        <input id={id} ref={inputRef} type={type || "text"} className="ui-multi-text-input" value={inputValue} onChange={(e) => {
-            setInvalid(false);
-            setInputValue(e.target.value);
-        }} onBlur={(e) => {
-            setInnerFocused(false);
-            const value = e.currentTarget.value;
-            if (value) {
-                if (!validate || validate(value)) {
-                    setInvalid(false);
-                    setInnerValue(uniq([...(innerValue || []), value]));
-                    setInputValue("");
-                }
-                else {
-                    setInvalid(true);
-                }
-            }
-            onBlur?.(e);
-        }} onKeyDown={(e) => {
-            const value = e.currentTarget.value;
-            if (e.code === "Enter") {
-                e.preventDefault();
-                if (!validate || validate(value)) {
-                    setInnerValue(uniq([...(innerValue || []), value]));
-                    setInputValue("");
-                }
-                else {
-                    setInvalid(true);
-                }
-            }
-        }} onFocus={() => setInnerFocused(true)} readOnly={readOnly} required={required && innerValue.length === 0}/>
-      </div>
-    </InputWrapper>);
-}
-export default MultiText;

package/components/MultiText/index.d.ts

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

package/components/MultiText/index.jsx

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

package/components/NavigationDrawer/NavigationDrawer.d.ts

@@ -1,9 +0,0 @@
-import { type ReactNode } from "react";
-export default function NavigationDrawer({ children, navigationChildren, position, title, noPadding, panelClassName, }: {
-    children: ReactNode;
-    navigationChildren: ReactNode;
-    position?: "left" | "right";
-    title?: ReactNode;
-    noPadding?: boolean;
-    panelClassName?: string;
-}): import("react").JSX.Element;

package/components/NavigationDrawer/NavigationDrawer.jsx

@@ -1,29 +0,0 @@
-import Drawer from "../Drawer";
-import { useCallback } from "react";
-import navigationDrawerState from "./navigationDrawer.state";
-import { useSnapshot } from "valtio";
-import clsx from "../../utils/clsx";
-export default function NavigationDrawer({ children, navigationChildren, position, title, noPadding, panelClassName, }) {
-    const { isOpen } = useSnapshot(navigationDrawerState);
-    const handleChangeOpen = useCallback((open) => {
-        if (window.innerWidth <= 1024) {
-            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 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>
-      <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>
-    </>);
-}

package/components/NavigationDrawer/NavigationItem.d.ts

@@ -1,13 +0,0 @@
-import { type ReactElement, type ReactNode } from "react";
-export default function NavigationItem({ icon, children, href, exact, alternativeActiveHrefs, className, disabled, active, }: {
-    icon?: ReactElement<{
-        className?: string;
-    }>;
-    children: ReactNode;
-    href: string;
-    exact?: boolean;
-    alternativeActiveHrefs?: string[];
-    className?: string;
-    disabled?: boolean;
-    active?: boolean;
-}): import("react").JSX.Element;

package/components/NavigationDrawer/NavigationItem.jsx

@@ -1,24 +0,0 @@
-import clsx from "../../utils/clsx";
-import { useRouter } from "next/router";
-import { cloneElement } from "react";
-import Button from "../Button";
-import navigationDrawerState from "./navigationDrawer.state";
-import useMediaQuery from "../../hooks/useMediaQuery";
-export default function NavigationItem({ icon, children, href, exact, alternativeActiveHrefs, className, disabled, active, }) {
-    const router = useRouter();
-    active =
-        active === undefined
-            ? exact
-                ? router.asPath === href ||
-                    alternativeActiveHrefs?.some((href) => router.asPath === href)
-                : router.asPath.includes(href) ||
-                    alternativeActiveHrefs?.some((href) => router.asPath.includes(href))
-            : active;
-    const isMobile = useMediaQuery(`(max-width: 1024px)`);
-    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}
-    </Button>);
-}