@majapisoftwares/ui 4.3.17 → 6.0.0

package/components/Input/Input.jsx

@@ -1,57 +0,0 @@
-import UnstyledInput, {} from "../Input/UnstyledInput";
-import { defaultTextStyles } from "../Text";
-import { ExclamationCircleIcon } from "@heroicons/react/20/solid";
-import InputIcon from "./InputIcon";
-import { cloneElement, Fragment } from "react";
-import recursiveChildrenMap from "../../utils/recursiveChildrenMap";
-import clsx from "../../utils/clsx";
-export const defaultLabelClassName = `ui-input-label block ${defaultTextStyles.variant.label} mb-1`;
-export const defaultInputClassNameUncolored = "block w-full rounded-md shadow-xs sm:text-sm data-disabled:cursor-not-allowed dark:bg-zinc-800 dark:placeholder:text-zinc-500 px-2.5";
-export const defaultInputClassName = clsx("ui-input-input", defaultInputClassNameUncolored, "border-zinc-300 focus:border-primary-500 focus:ring-primary-500 data-disabled:border-zinc-200 data-disabled:bg-zinc-50", "dark:border-zinc-700 dark:focus:border-primary-500 dark:data-disabled:border-zinc-800 dark:data-disabled:bg-zinc-900/90 data-disabled:text-zinc-500");
-export const defaultHelpTextClassName = `mt-2 ${defaultTextStyles.variant.secondary}`;
-export const defaultTrailingClassName = "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2.5 text-zinc-500 text-sm";
-export const defaultLeadingClassName = "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-zinc-500 text-sm";
-export const defaultLeadingInputClassName = "pl-10";
-export const defaultTrailingInputClassName = "pr-10";
-function Input({ error, trailing, labelClassName, inputClassName, helpTextClassName, trailingClassName, leadingClassName, leadingInputClassName, trailingInputClassName, required, label, loading, readOnly, children, disabled, helpText, ref, ...props }) {
-    trailing =
-        trailing ||
-            (error ? (<InputIcon className="text-error-500">
-        <ExclamationCircleIcon aria-hidden="true"/>
-      </InputIcon>) : undefined);
-    labelClassName = clsx(defaultLabelClassName, labelClassName);
-    inputClassName = clsx(error ? defaultInputClassNameUncolored : defaultInputClassName, inputClassName, {
-        "animate-pulse": loading,
-    });
-    helpTextClassName = clsx(defaultHelpTextClassName, helpTextClassName);
-    trailingClassName = clsx(defaultTrailingClassName, trailingClassName);
-    leadingClassName = clsx(defaultLeadingClassName, leadingClassName);
-    leadingInputClassName = clsx(defaultLeadingInputClassName, leadingInputClassName);
-    trailingInputClassName = clsx(defaultTrailingInputClassName, trailingInputClassName);
-    if (typeof error === "string") {
-        helpText = error;
-        error = true;
-    }
-    if (error) {
-        inputClassName = `${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 = `${helpTextClassName} text-error-600! dark:text-error-500!`;
-    }
-    if (readOnly) {
-        inputClassName = `${inputClassName} border-dashed`;
-    }
-    if (label && required) {
-        label = (<>
-        {label} <span className="text-red-500">*</span>
-      </>);
-    }
-    return (<UnstyledInput 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    {...props} trailing={trailing} labelClassName={labelClassName} inputClassName={inputClassName} helpTextClassName={helpTextClassName} trailingClassName={trailingClassName} leadingClassName={leadingClassName} leadingInputClassName={leadingInputClassName} trailingInputClassName={trailingInputClassName} ref={ref} required={required} label={label} readOnly={readOnly} disabled={disabled} data-disabled={disabled || undefined} helpText={helpText}>
-      {recursiveChildrenMap(children, (child) => cloneElement(child, child.type !== Fragment
-            ? {
-                disabled: readOnly || disabled || child.props.disabled,
-            }
-            : undefined))}
-    </UnstyledInput>);
-}
-export default Input;

package/components/Input/InputIcon.d.ts

@@ -1,9 +0,0 @@
-import { type ReactElement } from "react";
-export default function InputIcon({ className, children, }: {
-    className?: string;
-    children: ReactElement<{
-        className?: string;
-    }>;
-}): ReactElement<{
-    className?: string;
-}, string | import("react").JSXElementConstructor<any>>;

package/components/Input/InputIcon.jsx

@@ -1,7 +0,0 @@
-import { cloneElement } from "react";
-import clsx from "../../utils/clsx";
-export default function InputIcon({ className, children, }) {
-    return cloneElement(children, {
-        className: clsx("h-5 w-5", className),
-    });
-}

package/components/Input/MultiSelectInput.d.ts

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

package/components/Input/MultiSelectInput.jsx

@@ -1,48 +0,0 @@
-import Input, {} from "./Input";
-import DropdownMenu from "../DropdownMenu";
-import Button from "../Button";
-import { ChevronDownIcon } from "@heroicons/react/16/solid";
-import { xor } from "lodash-es";
-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, inputClassName, emptyClassName, noneLabel = "None", ...props }) {
-    const { innerRef, innerValue, setInnerValue } = useInputRefValue({
-        value,
-        ref,
-        name,
-        onChange,
-    });
-    const isEmpty = !innerValue?.length;
-    useDeepCompareEffect(() => {
-        if (onValueChange) {
-            onValueChange(innerValue || []);
-        }
-    }, [{ innerValue }]);
-    emptyClassName = isEmpty
-        ? clsx("text-zinc-500 dark:text-zinc-500", emptyClassName)
-        : "p-1.5";
-    return (<DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <Input as={Button} {...props} name={name} 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", emptyClassName, inputClassName)}>
-          {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([])}>
-          {noneLabel}
-        </DropdownMenu.Item>
-        {options.map((option) => (<DropdownMenu.CheckboxItem key={option.name} checked={innerValue?.includes(option.value)} onClick={() => setInnerValue(xor(innerValue, [option.value]))}>
-            {option.name}
-          </DropdownMenu.CheckboxItem>))}
-      </DropdownMenu.Content>
-    </DropdownMenu.Root>);
-}
-export default MultiSelectInput;

package/components/Input/NumericInput.d.ts

@@ -1,6 +0,0 @@
-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,6 +0,0 @@
-import Input, {} from "./Input";
-import { NumericFormat } from "react-number-format";
-function NumericInput({ ref, ...props }) {
-    return <NumericFormat getInputRef={ref} customInput={Input} {...props}/>;
-}
-export default NumericInput;

package/components/Input/PatternInput.d.ts

@@ -1,6 +0,0 @@
-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,6 +0,0 @@
-import Input, {} from "./Input";
-import { PatternFormat } from "react-number-format";
-function PatternInput(props) {
-    return <PatternFormat customInput={Input} {...props}/>;
-}
-export default PatternInput;

package/components/Input/SelectInput.d.ts

@@ -1,12 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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 min-h-[38px]", 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,22 +0,0 @@
-import { type ComponentType, type DetailedHTMLProps, type InputHTMLAttributes, type ReactNode } from "react";
-export type UnstyledInputCommonProps = {
-    label?: ReactNode;
-    inputClassName?: string;
-    labelClassName?: string;
-    helpTextClassName?: string;
-    trailingClassName?: string;
-    trailingInputClassName?: string;
-    leadingClassName?: string;
-    leadingInputClassName?: string;
-    helpText?: ReactNode;
-    trailing?: ReactNode;
-    leading?: ReactNode;
-    as?: ComponentType;
-    innerClassName?: string;
-    error?: boolean | string;
-};
-export type UnstyledInputProps<Select extends boolean | undefined> = UnstyledInputCommonProps & {
-    select?: Select;
-} & (Select extends string ? DetailedHTMLProps<InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>);
-declare function UnstyledInput<Select extends boolean | undefined>({ id, label, className, inputClassName, labelClassName, helpTextClassName, trailingClassName, trailingInputClassName, leadingClassName, leadingInputClassName, helpText, type, leading, trailing, select, children, as, innerClassName, value, ...props }: UnstyledInputProps<Select>): import("react").JSX.Element;
-export default UnstyledInput;

package/components/Input/UnstyledInput.jsx

@@ -1,28 +0,0 @@
-import { useId, } from "react";
-import clsx from "../../utils/clsx";
-function UnstyledInput({ id, label, className, inputClassName, labelClassName, helpTextClassName, trailingClassName, trailingInputClassName, leadingClassName, leadingInputClassName, helpText, type = "text", leading, trailing, select, children, as, innerClassName, value, ...props }) {
-    const innerId = useId();
-    id = id || innerId;
-    const Component = as || (select ? "select" : "input");
-    inputClassName = clsx(inputClassName, leadingInputClassName && {
-        [leadingInputClassName]: !!leading,
-    }, 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>}
-        <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>}
-    </div>);
-}
-export default UnstyledInput;

package/components/Input/index.d.ts

@@ -1,6 +0,0 @@
-import Input from "./Input";
-export * from "./Input";
-export default Input;
-export { default as InputIcon } from "./InputIcon";
-export * from "./UnstyledInput";
-export { default as UnstyledInput } from "./UnstyledInput";

package/components/Input/index.jsx

@@ -1,6 +0,0 @@
-import Input from "./Input";
-export * from "./Input";
-export default Input;
-export { default as InputIcon } from "./InputIcon";
-export * from "./UnstyledInput";
-export { default as UnstyledInput } from "./UnstyledInput";

package/components/Input/useInputRefValue.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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,11 +0,0 @@
-import type { ReactNode } from "react";
-export interface InputWrapperProps {
-    children?: ReactNode;
-    className?: string;
-    label?: string;
-    id?: string;
-    helpText?: string;
-    error?: boolean;
-    required?: boolean;
-}
-export default function InputWrapper({ children, className, label, id, helpText, error, required, }: InputWrapperProps): import("react").JSX.Element;

package/components/Input2/InputWrapper.jsx

@@ -1,11 +0,0 @@
-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>}
-    </div>);
-}

package/components/Link/Link.d.ts

@@ -1,3 +0,0 @@
-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/Link/Link.jsx

@@ -1,9 +0,0 @@
-import NextLink from "next/link";
-import clsx from "../../utils/clsx";
-export default function Link({ className, href, ...props }) {
-    className = clsx("text-primary-500 underline decoration-primary-500/40 decoration-2 transition-colors hover:decoration-primary-500", className);
-    if (href) {
-        return <NextLink href={href} {...props} className={className}/>;
-    }
-    return (<button {...props} className={className} type="button"/>);
-}

package/components/Link/index.d.ts

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

package/components/Link/index.jsx

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

package/components/Loading/Loading.d.ts

@@ -1,5 +0,0 @@
-declare function Loading({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof Loading>;
-export default _default;

package/components/Loading/Loading.jsx

@@ -1,15 +0,0 @@
-import { memo } from "react";
-function Loading({ className }) {
-    return (<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" className={className}>
-      <circle cx="4" cy="12" r="3" fill="currentColor">
-        <animate attributeName="opacity" begin="0s" dur="1.5s" repeatCount="indefinite" values="1;0.2;1"/>
-      </circle>
-      <circle cx="12" cy="12" r="3" fill="currentColor">
-        <animate attributeName="opacity" begin="0.3s" dur="1.5s" repeatCount="indefinite" values="1;0.2;1"/>
-      </circle>
-      <circle cx="20" cy="12" r="3" fill="currentColor">
-        <animate attributeName="opacity" begin="0.6s" dur="1.5s" repeatCount="indefinite" values="1;0.2;1"/>
-      </circle>
-    </svg>);
-}
-export default memo(Loading);

package/components/Loading/index.d.ts

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

package/components/Loading/index.jsx

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

package/components/Magnet/Magnet.d.ts

@@ -1,13 +0,0 @@
-import React, { type ReactNode, type HTMLAttributes } from "react";
-interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
-    padding?: number;
-    disabled?: boolean;
-    magnetStrength?: number;
-    activeTransition?: string;
-    inactiveTransition?: string;
-    wrapperClassName?: string;
-    innerClassName?: string;
-}
-declare const Magnet: React.FC<MagnetProps>;
-export default Magnet;

package/components/Magnet/Magnet.jsx

@@ -1,50 +0,0 @@
-import React, { useState, useEffect, useRef, } from "react";
-import clsx from "../../utils/clsx";
-const Magnet = ({ children, padding = 100, disabled = false, magnetStrength = 2, activeTransition = "transform 0.3s ease-out", inactiveTransition = "transform 0.5s ease-in-out", wrapperClassName = "", innerClassName = "", ...props }) => {
-    const [isActive, setIsActive] = useState(false);
-    const [position, setPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    const magnetRef = useRef(null);
-    useEffect(() => {
-        if (disabled) {
-            setPosition({ x: 0, y: 0 });
-            return;
-        }
-        const handleMouseMove = (e) => {
-            if (!magnetRef.current)
-                return;
-            const { left, top, width, height } = magnetRef.current.getBoundingClientRect();
-            const centerX = left + width / 2;
-            const centerY = top + height / 2;
-            const distX = Math.abs(centerX - e.clientX);
-            const distY = Math.abs(centerY - e.clientY);
-            if (distX < width / 2 + padding && distY < height / 2 + padding) {
-                setIsActive(true);
-                const offsetX = (e.clientX - centerX) / magnetStrength;
-                const offsetY = (e.clientY - centerY) / magnetStrength;
-                setPosition({ x: offsetX, y: offsetY });
-            }
-            else {
-                setIsActive(false);
-                setPosition({ x: 0, y: 0 });
-            }
-        };
-        window.addEventListener("mousemove", handleMouseMove);
-        return () => {
-            window.removeEventListener("mousemove", handleMouseMove);
-        };
-    }, [padding, disabled, magnetStrength]);
-    const transitionStyle = isActive ? activeTransition : inactiveTransition;
-    return (<div ref={magnetRef} className={clsx("relative inline-block", wrapperClassName)} {...props}>
-      <div className={innerClassName} style={{
-            transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-            transition: transitionStyle,
-            willChange: "transform",
-        }}>
-        {children}
-      </div>
-    </div>);
-};
-export default Magnet;

package/components/Magnet/index.d.ts

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

package/components/Magnet/index.jsx

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

package/components/Markdown/Markdown.d.ts

@@ -1,8 +0,0 @@
-import React, { type ComponentProps } from "react";
-import ReactMarkdown from "react-markdown";
-export type MarkdownProps = {
-    children?: string;
-    className?: string;
-    options?: ComponentProps<typeof ReactMarkdown>;
-};
-export default function Markdown({ children, className, options, }: MarkdownProps): React.JSX.Element;

package/components/Markdown/Markdown.jsx

@@ -1,11 +0,0 @@
-import React, {} from "react";
-import ReactMarkdown from "react-markdown";
-import clsx from "../../utils/clsx";
-import remarkGfm from "remark-gfm";
-export default function Markdown({ children, className, options, }) {
-    return (<div className={clsx("prose prose-zinc dark:prose-invert max-w-full leading-normal", "[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0", "[&_.task-list-item_input[type='checkbox']]:-mt-1", "prose-a:break-all", className)}>
-      <ReactMarkdown remarkPlugins={[remarkGfm, ...(options?.remarkPlugins || [])]} {...options}>
-        {children}
-      </ReactMarkdown>
-    </div>);
-}

package/components/Markdown/index.d.ts

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

package/components/Markdown/index.jsx

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

package/components/Menu/Menu.d.ts

@@ -1,28 +0,0 @@
-import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode, type Ref } from "react";
-import Button from "../Button/Button";
-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;
-    position?: "left" | "right" | "bottom-right" | "bottom-left";
-    iconClassName?: string;
-    menuItemsClassName?: string;
-    buttonProps?: ComponentPropsWithoutRef<typeof Button>;
-    label?: ReactNode;
-    children?: ReactNode;
-    button?: ReactNode;
-    unmount?: boolean;
-    ref?: Ref<HTMLDivElement>;
-};
-export type MenuItemProps<T extends HTMLElement = HTMLButtonElement> = UnstyledButtonProps<T> & {
-    icon?: ReactElement<{
-        className?: string;
-    }>;
-};
-export type MenuLabelProps = TextProps;
-declare const _default: (({ className, iconClassName, position, children, label, button, buttonProps, unmount, menuItemsClassName, ...props }: MenuProps) => import("react").JSX.Element) & {
-    Label: (props: MenuLabelProps) => import("react").JSX.Element;
-    Item: <T extends HTMLElement = HTMLButtonElement>({ className, icon, children, ...props }: MenuItemProps<T>) => import("react").JSX.Element;
-};
-export default _default;

package/components/Menu/Menu.jsx

@@ -1,54 +0,0 @@
-import { cloneElement, Fragment, } from "react";
-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 { 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>
-      {({ 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)}>
-          {icon &&
-                cloneElement(icon, {
-                    className: clsx("w-5 mr-2", icon.props.className),
-                })}
-          {children}
-        </UnstyledButton>)}
-    </HuiMenu.Item>);
-};
-const Label = function MenuLabel(props) {
-    return (<Text {...props} variant="label" className={clsx("w-full text-left", "block px-4 py-2 text-sm", props.className)}/>);
-};
-const Menu = function Menu({ className, iconClassName, position = "right", children, label, button, buttonProps, unmount, menuItemsClassName, ...props }) {
-    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>
-        {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">
-        <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"),
-            "origin-top-left": position.includes("left") && !position.includes("bottom"),
-            "origin-bottom-right": position.includes("right") && position.includes("bottom"),
-            "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>
-    </HuiMenu>);
-};
-export default Object.assign(Menu, { Label, Item });