@majapisoftwares/ui 4.3.16 → 5.0.0

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>);
-}

package/components/NavigationDrawer/index.d.ts

@@ -1,6 +0,0 @@
-import NavigationDrawer from "./NavigationDrawer";
-export * from "./NavigationDrawer";
-export default NavigationDrawer;
-export { default as NavigationItem } from "./NavigationItem";
-export { default as navigationDrawerState } from "./navigationDrawer.state";
-export * from "./navigationDrawer.state";

package/components/NavigationDrawer/index.jsx

@@ -1,6 +0,0 @@
-import NavigationDrawer from "./NavigationDrawer";
-export * from "./NavigationDrawer";
-export default NavigationDrawer;
-export { default as NavigationItem } from "./NavigationItem";
-export { default as navigationDrawerState } from "./navigationDrawer.state";
-export * from "./navigationDrawer.state";

package/components/NavigationDrawer/navigationDrawer.state.d.ts

@@ -1,9 +0,0 @@
-declare const navigationDrawerState: {
-    isOpen: boolean;
-    open(): void;
-    close(): void;
-    setOpen(open: boolean): void;
-    toggle(): void;
-};
-export declare const hydrateNavigationDrawerState: (cookies?: object) => void;
-export default navigationDrawerState;

package/components/NavigationDrawer/navigationDrawer.state.js

@@ -1,19 +0,0 @@
-import { proxy } from "valtio";
-import createStateHydration from "../../utils/createStateHydration";
-const navigationDrawerState = proxy({
-    isOpen: false,
-    open() {
-        navigationDrawerState.isOpen = true;
-    },
-    close() {
-        navigationDrawerState.isOpen = false;
-    },
-    setOpen(open) {
-        navigationDrawerState.isOpen = open;
-    },
-    toggle() {
-        navigationDrawerState.isOpen = !navigationDrawerState.isOpen;
-    },
-});
-export const hydrateNavigationDrawerState = createStateHydration("navigationDrawerState", navigationDrawerState, ["isOpen"]);
-export default navigationDrawerState;

package/components/NoSsr/NoSsr.d.ts

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

package/components/NoSsr/NoSsr.jsx

@@ -1,8 +0,0 @@
-import React, { useEffect, useState } from "react";
-export default function NoSsr({ children }) {
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    return isMounted ? <>{children}</> : null;
-}

package/components/NoSsr/index.d.ts

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

package/components/NoSsr/index.jsx

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

package/components/Noise/Noise.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-interface NoiseProps {
-    patternSize?: number;
-    patternScaleX?: number;
-    patternScaleY?: number;
-    patternRefreshInterval?: number;
-    patternAlpha?: number;
-    className?: string;
-}
-declare const Noise: React.FC<NoiseProps>;
-export default Noise;

package/components/Noise/Noise.jsx

@@ -1,69 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import clsx from "../../utils/clsx";
-const Noise = ({ patternSize = 250, patternScaleX = 1, patternScaleY = 1, patternRefreshInterval = 2, patternAlpha = 15, className, }) => {
-    const grainRef = useRef(null);
-    useEffect(() => {
-        const canvas = grainRef.current;
-        if (!canvas)
-            return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx)
-            return;
-        let frame = 0;
-        const patternCanvas = document.createElement("canvas");
-        patternCanvas.width = patternSize;
-        patternCanvas.height = patternSize;
-        const patternCtx = patternCanvas.getContext("2d");
-        if (!patternCtx)
-            return;
-        const patternData = patternCtx.createImageData(patternSize, patternSize);
-        const patternPixelDataLength = patternSize * patternSize * 4;
-        const resize = () => {
-            if (!canvas)
-                return;
-            canvas.width = window.innerWidth * window.devicePixelRatio;
-            canvas.height = window.innerHeight * window.devicePixelRatio;
-            ctx.scale(patternScaleX, patternScaleY);
-        };
-        const updatePattern = () => {
-            for (let i = 0; i < patternPixelDataLength; i += 4) {
-                const value = Math.random() * 255;
-                patternData.data[i] = value;
-                patternData.data[i + 1] = value;
-                patternData.data[i + 2] = value;
-                patternData.data[i + 3] = patternAlpha;
-            }
-            patternCtx.putImageData(patternData, 0, 0);
-        };
-        const drawGrain = () => {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            const pattern = ctx.createPattern(patternCanvas, "repeat");
-            if (pattern) {
-                ctx.fillStyle = pattern;
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-            }
-        };
-        const loop = () => {
-            if (frame % patternRefreshInterval === 0) {
-                updatePattern();
-                drawGrain();
-            }
-            frame++;
-            window.requestAnimationFrame(loop);
-        };
-        window.addEventListener("resize", resize);
-        resize();
-        loop();
-        return () => {
-            window.removeEventListener("resize", resize);
-        };
-    }, [
-        patternSize,
-        patternScaleX,
-        patternScaleY,
-        patternRefreshInterval,
-        patternAlpha,
-    ]);
-    return (<canvas className={clsx("absolute top-0 left-0 h-screen w-screen", className)} ref={grainRef}/>);
-};
-export default Noise;

package/components/Noise/index.d.ts

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

package/components/Noise/index.jsx

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

package/components/Notifications/Notifications.d.ts

@@ -1,3 +0,0 @@
-export default function Notifications({ notificationClassName, }: {
-    notificationClassName?: string;
-}): import("react").JSX.Element;

package/components/Notifications/Notifications.jsx

@@ -1,60 +0,0 @@
-import { AnimatePresence, motion } from "motion/react";
-import { useSnapshot } from "valtio";
-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 clsx from "../../utils/clsx";
-export default function Notifications({ notificationClassName, }) {
-    const { notifications, remove, setRendered } = useSnapshot(notificationsState);
-    useEffect(() => {
-        setRendered(true);
-        return () => {
-            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}>
-        {notifications.map(({ _id, dismissable, title, message, icon, actions, style, className, }) => {
-            const iconChild = (typeof icon === "string"
-                ? {
-                    success: <CheckCircleIcon className="text-success-400!"/>,
-                    error: (<ExclamationCircleIcon className="text-error-400!"/>),
-                }[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">
-                        {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">
-                        <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>
-              </motion.li>);
-        })}
-      </AnimatePresence>
-    </ul>);
-}

package/components/Notifications/index.d.ts

@@ -1,5 +0,0 @@
-import Notifications from "./Notifications";
-export * from "./Notifications";
-export default Notifications;
-export { default as notificationsState } from "./notifications.state";
-export * from "./notifications.state";